dashboard-shell-shell 3.0.2-test.20250913 → 3.0.5-logTest.2

package/pages/auth copy/setup.vue

@@ -1,523 +0,0 @@
-<script>
-import { randomStr } from '@shell/utils/string';
-import { LabeledInput } from '@components/Form/LabeledInput';
-import CopyToClipboard from '@shell/components/CopyToClipboard';
-import AsyncButton from '@shell/components/AsyncButton';
-import { LOGGED_OUT, SETUP } from '@shell/config/query-params';
-import { NORMAN, MANAGEMENT } from '@shell/config/types';
-import { findBy } from '@shell/utils/array';
-import { Checkbox } from '@components/Form/Checkbox';
-import { getVendor, getProduct, setVendor } from '@shell/config/private-label';
-import { RadioGroup } from '@components/Form/Radio';
-import { setSetting } from '@shell/utils/settings';
-import { SETTING } from '@shell/config/settings';
-import { exceptionToErrorsArray } from '@shell/utils/error';
-import Password from '@shell/components/form/Password';
-import { applyProducts } from '@shell/store/type-map';
-import BrandImage from '@shell/components/BrandImage';
-import { waitFor } from '@shell/utils/async';
-import { Banner } from '@components/Banner';
-import FormValidation from '@shell/mixins/form-validation';
-import isUrl from 'is-url';
-import { isLocalhost } from '@shell/utils/validators/setting';
-import Loading from '@shell/components/Loading';
-
-const calcIsFirstLogin = (store) => {
-  const firstLoginSetting = store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.FIRST_LOGIN);
-
-  return firstLoginSetting?.value === 'true';
-};
-
-const calcMustChangePassword = async(store) => {
-  await store.dispatch('auth/getUser');
-
-  const out = store.getters['auth/v3User']?.mustChangePassword;
-
-  return out;
-};
-
-export default {
-  mixins: [FormValidation],
-
-  data() {
-    return {
-      passwordOptions: [
-        { label: this.t('setup.useRandom'), value: true },
-        { label: this.t('setup.useManual'), value: false }],
-      fvFormRuleSets: [{
-        path:       'serverUrl',
-        rootObject: this,
-        rules:      ['required', 'https', 'url', 'trailingForwardSlash']
-      }],
-      productName: '',
-      vendor:      getVendor(),
-      product:     getProduct(),
-      step:        parseInt(this.$route.query.step, 10) || 1,
-
-      useRandom:          true,
-      haveCurrent:        false,
-      username:           null,
-      isFirstLogin:       false,
-      mustChangePassword: false,
-      current:            null,
-      password:           randomStr(),
-      confirm:            null,
-      v3User:             null,
-      serverUrl:          null,
-      mcmEnabled:         null,
-      eula:               false,
-      principals:         null,
-      errors:             []
-    };
-  },
-
-  async beforeCreate() {
-    const isFirstLogin = calcIsFirstLogin(this.$store);
-    const mustChangePassword = await calcMustChangePassword(this.$store);
-
-    if (isFirstLogin) {
-      // Always show setup if this is the first log in
-      return;
-    } else if (mustChangePassword) {
-      // If the password needs changing and this isn't the first log in ensure we have the password
-      if (!!this.$store.getters['auth/initialPass']) {
-        // Got it... show setup
-        return;
-      }
-      // Haven't got it... redirect to log in so we get it
-      await this.$store.dispatch('auth/logout', null, { root: true });
-
-      return this.$router.replace(`/auth/login?${ LOGGED_OUT }`);
-    }
-
-    // For all other cases we don't need to show setup
-    return this.$router.replace('/');
-  },
-
-  components: {
-    AsyncButton, LabeledInput, CopyToClipboard, Checkbox, RadioGroup, Password, BrandImage, Banner, Loading
-  },
-
-  async fetch() {
-    const serverUrlSetting = this.$store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.SERVER_URL);
-
-    let plSetting;
-
-    try {
-      plSetting = this.$store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.PL);
-    } catch (e) {
-      // Older versions used Norman API to get these
-      plSetting = await this.$store.dispatch('rancher/find', {
-        type: NORMAN.SETTING,
-        id:   SETTING.PL,
-        opt:  { url: `/v3/settings/${ SETTING.PL }` }
-      });
-    }
-
-    if (plSetting.value?.length && plSetting.value !== getVendor()) {
-      setVendor(plSetting.value);
-    }
-
-    const productName = plSetting.default;
-
-    const principals = await this.$store.dispatch('rancher/findAll', { type: NORMAN.PRINCIPAL, opt: { url: '/v3/principals' } });
-    const me = findBy(principals, 'me', true);
-
-    const current = this.$route.query[SETUP] || this.$store.getters['auth/initialPass'];
-    const v3User = this.$store.getters['auth/v3User'] ?? {};
-
-    const mcmFeature = await this.$store.dispatch('management/find', {
-      type: MANAGEMENT.FEATURE, id: 'multi-cluster-management', opt: { url: `/v1/${ MANAGEMENT.FEATURE }/multi-cluster-management` }
-    });
-
-    const mcmEnabled = (mcmFeature?.spec?.value || mcmFeature?.status?.default) && productName !== 'Harvester';
-
-    let serverUrl;
-
-    if (serverUrlSetting?.value) {
-      serverUrl = serverUrlSetting.value;
-    } else {
-      serverUrl = window.location.origin;
-    }
-
-    const isFirstLogin = await calcIsFirstLogin(this.$store);
-    const mustChangePassword = await calcMustChangePassword(this.$store);
-
-    this['productName'] = productName;
-    this['haveCurrent'] = !!current;
-    this['username'] = me?.loginName || 'admin';
-    this['isFirstLogin'] = isFirstLogin;
-    this['mustChangePassword'] = mustChangePassword;
-    this['current'] = current;
-    this['v3User'] = v3User;
-    this['serverUrl'] = serverUrl;
-    this['mcmEnabled'] = mcmEnabled;
-    this['principals'] = principals;
-  },
-
-  computed: {
-    saveEnabled() {
-      if ( !this.eula && this.isFirstLogin) {
-        return false;
-      }
-
-      if ( this.mustChangePassword ) {
-        if ( !this.current ) {
-          return false;
-        }
-
-        if ( !this.useRandom ) {
-          if ( !this.password || this.password !== this.confirm ) {
-            return false;
-          }
-        }
-      }
-
-      if (!isUrl(this.serverUrl) || this.fvGetPathErrors(['serverUrl']).length > 0) {
-        return false;
-      }
-
-      return true;
-    },
-
-    me() {
-      const out = findBy(this.principals, 'me', true);
-
-      return out;
-    },
-
-    showLocalhostWarning() {
-      return isLocalhost(this.serverUrl);
-    }
-  },
-
-  watch: {
-    useRandom(neu) {
-      if (neu) {
-        this.password = randomStr();
-      } else {
-        this.password = '';
-        this.$nextTick(() => {
-          this.$refs.password.focus();
-        });
-      }
-    }
-  },
-
-  methods: {
-    async save(buttonCb) {
-      const promises = [];
-
-      try {
-        await applyProducts(this.$store, this.$plugin);
-        await this.$store.dispatch('loadManagement');
-
-        if ( this.mustChangePassword ) {
-          await this.$store.dispatch('rancher/request', {
-            url:    '/v3/users?action=changepassword',
-            method: 'post',
-            data:   {
-              currentPassword: this.current,
-              newPassword:     this.password
-            },
-          });
-        } else {
-          promises.push(setSetting(this.$store, SETTING.FIRST_LOGIN, 'false'));
-        }
-
-        const user = this.v3User;
-
-        user.mustChangePassword = false;
-        this.$store.dispatch('auth/gotUser', user);
-
-        if (this.isFirstLogin) {
-          promises.push( setSetting(this.$store, SETTING.EULA_AGREED, (new Date()).toISOString()) );
-
-          if ( this.mcmEnabled && this.serverUrl ) {
-            promises.push( setSetting(this.$store, SETTING.SERVER_URL, this.serverUrl) );
-          }
-        }
-
-        await Promise.all(promises);
-
-        await waitFor(() => !calcIsFirstLogin(this.$store), 'first login to be completed', 10000, 1000, true);
-
-        buttonCb(true);
-        this.done();
-      } catch (err) {
-        console.error(err) ; // eslint-disable-line no-console
-        buttonCb(false);
-        this.errors = exceptionToErrorsArray(err);
-      }
-    },
-
-    done() {
-      this.$router.replace('/');
-    },
-
-    onServerUrlChange(value) {
-      this.serverUrl = value.trim();
-    },
-  },
-};
-</script>
-
-<template>
-  <Loading
-    v-if="$fetchState.pending"
-    mode="relative"
-  />
-  <form
-    v-else
-    class="setup"
-    @submit.prevent
-  >
-    <div class="row">
-      <div class="col span-6 form-col">
-        <div>
-          &nbsp;
-        </div>
-        <div>
-          <h1 class="text-center">
-            {{ t('setup.welcome', {product}) }}
-          </h1>
-
-          <template v-if="mustChangePassword">
-            <p
-              v-clean-html="t(isFirstLogin ? 'setup.setPassword' : 'setup.newUserSetPassword', { username }, true)"
-              class="text-center mb-20 mt-20 setup-title"
-            />
-            <Password
-              v-if="!haveCurrent"
-              v-model:value.trim="current"
-              autocomplete="current-password"
-              type="password"
-              :label="t('setup.currentPassword')"
-              class="mb-20"
-              :required="true"
-            />
-
-            <!-- For password managers... -->
-            <input
-              type="hidden"
-              name="username"
-              autocomplete="username"
-              :value="username"
-            >
-            <div class="mb-20">
-              <RadioGroup
-                v-model:value="useRandom"
-                data-testid="setup-password-mode"
-                name="password-mode"
-                :options="passwordOptions"
-              />
-            </div>
-            <div class="mb-20">
-              <LabeledInput
-                v-if="useRandom"
-                ref="password"
-                v-model:value.trim="password"
-                :type="useRandom ? 'text' : 'password'"
-                :disabled="useRandom"
-                data-testid="setup-password-random"
-                label-key="setup.newPassword"
-              >
-                <template
-                  v-if="useRandom"
-                  #suffix
-                >
-                  <div
-                    class="addon"
-                    style="padding: 0 0 0 12px;"
-                  >
-                    <CopyToClipboard
-                      :aria-label="t('setup.copyRandom')"
-                      :text="password"
-                      class="btn-sm"
-                    />
-                  </div>
-                </template>
-              </LabeledInput>
-              <Password
-                v-else
-                ref="password"
-                v-model:value.trim="password"
-                :label="t('setup.newPassword')"
-                data-testid="setup-password"
-                :required="true"
-              />
-            </div>
-            <Password
-              v-show="!useRandom"
-              v-model:value.trim="confirm"
-              autocomplete="new-password"
-              data-testid="setup-password-confirm"
-              :label="t('setup.confirmPassword')"
-              :required="true"
-            />
-          </template>
-
-          <template v-if="isFirstLogin">
-            <template v-if="mcmEnabled">
-              <hr
-                v-if="mustChangePassword"
-                class="mt-20 mb-20"
-                role="none"
-              >
-              <p>
-                <t
-                  k="setup.serverUrl.tip"
-                  :raw="true"
-                />
-              </p>
-              <div class="mt-20">
-                <Banner
-                  v-if="showLocalhostWarning"
-                  color="warning"
-                  :label="t('validation.setting.serverUrl.localhost')"
-                  data-testid="setup-serverurl-localhost-warning"
-                />
-                <Banner
-                  v-for="(err, i) in fvGetPathErrors(['serverUrl'])"
-                  :key="i"
-                  color="error"
-                  :label="err"
-                  data-testid="setup-error-banner"
-                />
-                <LabeledInput
-                  v-model:value="serverUrl"
-                  :label="t('setup.serverUrl.label')"
-                  data-testid="setup-server-url"
-                  :rules="fvGetAndReportPathRules('serverUrl')"
-                  :required="true"
-                  @update:value="onServerUrlChange"
-                />
-              </div>
-            </template>
-
-            <div class="checkbox pt-10 eula">
-              <Checkbox
-                id="checkbox-eula"
-                v-model:value="eula"
-                data-testid="setup-agreement"
-              >
-                <template #label>
-                  <t
-                    k="setup.eula"
-                    :raw="true"
-                    :name="productName"
-                  />
-                </template>
-              </Checkbox>
-            </div>
-          </template>
-
-          <div
-            id="submit"
-            class="text-center mt-20"
-          >
-            <AsyncButton
-              key="passwordSubmit"
-              type="submit"
-              mode="continue"
-              :disabled="!saveEnabled"
-              data-testid="setup-submit"
-              @click="save"
-            />
-          </div>
-
-          <div class="setup-errors mt-20">
-            <h4
-              v-for="(err, i) in errors"
-              :key="i"
-              class="text-error text-center"
-            >
-              {{ err }}
-            </h4>
-          </div>
-        </div>
-        <div>
-          &nbsp;
-        </div>
-      </div>
-      <BrandImage
-        class="col span-6 landscape"
-        file-name="login-landscape.svg"
-      />
-    </div>
-  </form>
-</template>
-
-<style lang="scss" scoped>
-  .principal {
-    display: block;
-    background: var(--box-bg);
-    border: 1px solid var(--border);
-    border-radius: 3px;
-    margin: 10px 0;
-    padding: 10px;
-    line-height: 40px;
-
-    img {
-      vertical-align: middle;
-      margin: 0 10px;
-    }
-  }
-
-  .setup {
-    overflow: hidden;
-
-    .row {
-      & .checkbox {
-        margin: auto
-      }
-
-      .span-6 {
-        padding: 0 60px;
-        margin: 0;
-      }
-
-      .landscape {
-        height: 100vh;
-        margin: 0;
-        object-fit: cover;
-        padding: 0;
-        width: 49%;
-      }
-    }
-
-    .form-col {
-      display: flex;
-      flex-direction: column;
-      overflow-y: auto;
-      position: relative;
-      height: 100vh;
-      width: 51%;
-
-      & > div:first-of-type {
-        flex: 3;
-      }
-      & > div:nth-of-type(2) {
-        flex: 9;
-      }
-      & > div:nth-of-type(3) {
-        flex: 2;
-      }
-    }
-
-    .setup-title {
-      :deep() code {
-        font-size: 12px;
-        padding: 0;
-      }
-    }
-
-    .setup-errors {
-      min-height: 50px;
-    }
-
-    p {
-      line-height: 20px;
-    }
-  }
-</style>