@rancher/shell 1.2.3 → 2.0.1

package/pages/account/index.vue

@@ -11,13 +11,13 @@ import { mapGetters } from 'vuex';
 import { Banner } from '@components/Banner';
 import ResourceTable from '@shell/components/ResourceTable';
 import CopyToClipboardText from '@shell/components/CopyToClipboardText';
+import TabTitle from '@shell/components/TabTitle';
 
 const API_ENDPOINT = '/v3';
 
 export default {
-  layout:     'plain',
   components: {
-    CopyToClipboardText, BackLink, Banner, PromptChangePassword, Loading, ResourceTable, Principal
+    CopyToClipboardText, BackLink, Banner, PromptChangePassword, Loading, ResourceTable, Principal, TabTitle
   },
   mixins: [BackRoute],
   async fetch() {
@@ -144,7 +144,11 @@ export default {
   <Loading v-if="$fetchState.pending" />
   <div v-else>
     <BackLink :link="backLink" />
-    <h1 v-t="'accountAndKeys.title'" />
+    <h1>
+      <TabTitle breadcrumb="vendor-only">
+        {{ t('accountAndKeys.title') }}
+      </TabTitle>
+    </h1>
 
     <h2 v-t="'accountAndKeys.account.title'" />
     <div class="account">

package/pages/auth/login.vue

@@ -8,130 +8,65 @@ import BrandImage from '@shell/components/BrandImage';
 import InfoBox from '@shell/components/InfoBox';
 import CopyCode from '@shell/components/CopyCode';
 import { Banner } from '@components/Banner';
-import { LOCAL, LOGGED_OUT, TIMED_OUT, _FLAGGED } from '@shell/config/query-params';
+import {
+  LOCAL, LOGGED_OUT, TIMED_OUT, IS_SSO, _FLAGGED
+} from '@shell/config/query-params';
 import { Checkbox } from '@components/Form/Checkbox';
 import Password from '@shell/components/form/Password';
 import { sortBy } from '@shell/utils/sort';
 import { configType } from '@shell/models/management.cattle.io.authconfig';
 import { mapGetters } from 'vuex';
-import { _ALL_IF_AUTHED, _MULTI } from '@shell/plugins/dashboard-store/actions';
+import { _MULTI } from '@shell/plugins/dashboard-store/actions';
 import { MANAGEMENT, NORMAN } from '@shell/config/types';
 import { SETTING } from '@shell/config/settings';
 import { LOGIN_ERRORS } from '@shell/store/auth';
 import {
   getBrand,
   getVendor,
-  getProduct,
   setBrand,
   setVendor
 } from '@shell/config/private-label';
 import loadPlugins from '@shell/plugins/plugin';
+import Loading from '@shell/components/Loading';
+import { getGlobalBannerFontSizes } from '@shell/utils/banners';
 
 export default {
   name:       'Login',
-  layout:     'unauthenticated',
   components: {
-    LabeledInput, AsyncButton, Checkbox, BrandImage, Banner, InfoBox, CopyCode, Password, LocaleSelector
+    LabeledInput, AsyncButton, Checkbox, BrandImage, Banner, InfoBox, CopyCode, Password, LocaleSelector, Loading
   },
 
-  async asyncData({ route, redirect, store }) {
-    const drivers = await store.dispatch('auth/getAuthProviders');
-    const providers = sortBy(drivers.map((x) => x.id), ['id']);
-
-    const hasLocal = providers.includes('local');
-    const hasOthers = hasLocal && !!providers.find((x) => x !== 'local');
-
-    if ( hasLocal ) {
-      // Local is special and handled here so that it can be toggled
-      removeObject(providers, 'local');
-    }
-
-    let firstLoginSetting, plSetting, brand;
-
-    // Load settings.
-    // For newer versions this will return all settings if you are somehow logged in,
-    // and just the public ones if you aren't.
-    try {
-      await store.dispatch('management/findAll', {
-        type: MANAGEMENT.SETTING,
-        opt:  {
-          load: _ALL_IF_AUTHED, url: `/v1/${ MANAGEMENT.SETTING }`, redirectUnauthorized: false
-        },
-      });
-
-      firstLoginSetting = store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.FIRST_LOGIN);
-      plSetting = store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.PL);
-      brand = store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.BRAND);
-    } catch (e) {
-      // Older versions used Norman API to get these
-      firstLoginSetting = await store.dispatch('rancher/find', {
-        type: 'setting',
-        id:   SETTING.FIRST_LOGIN,
-        opt:  { url: `/v3/settings/${ SETTING.FIRST_LOGIN }` }
-      });
-
-      plSetting = await store.dispatch('rancher/find', {
-        type: 'setting',
-        id:   SETTING.PL,
-        opt:  { url: `/v3/settings/${ SETTING.PL }` }
-      });
-
-      brand = await store.dispatch('rancher/find', {
-        type: 'setting',
-        id:   SETTING.BRAND,
-        opt:  { url: `/v3/settings/${ SETTING.BRAND }` }
-      });
-    }
-
-    if (plSetting.value?.length && plSetting.value !== getVendor()) {
-      setVendor(plSetting.value);
-    }
-
-    if (brand?.value?.length && brand.value !== getBrand()) {
-      setBrand(brand.value);
-    }
-
-    let singleProvider;
-
-    if (providers.length === 1) {
-      singleProvider = providers[0];
-    }
-
-    return {
-      vendor:             getVendor(),
-      providers,
-      hasOthers,
-      hasLocal,
-      showLocal:          !hasOthers || (route.query[LOCAL] === _FLAGGED),
-      firstLogin:         firstLoginSetting?.value === 'true',
-      singleProvider,
-      showLocaleSelector: !process.env.loginLocaleSelector || process.env.loginLocaleSelector === 'true'
-    };
-  },
-
-  data({ $cookies }) {
-    const username = $cookies.get(USERNAME, { parseJSON: false }) || '';
+  data() {
+    const username = this.$cookies.get(USERNAME, { parseJSON: false }) || '';
 
     return {
-      product: getProduct(),
-
       username,
       remember: !!username,
       password: '',
 
-      timedOut:  this.$route.query[TIMED_OUT] === _FLAGGED,
-      loggedOut: this.$route.query[LOGGED_OUT] === _FLAGGED,
-      err:       this.$route.query.err,
+      timedOut:           this.$route.query[TIMED_OUT] === _FLAGGED,
+      loggedOut:          this.$route.query[LOGGED_OUT] === _FLAGGED,
+      isSsoLogout:        this.$route.query[IS_SSO] === _FLAGGED,
+      err:                this.$route.query.err,
+      showLocaleSelector: !process.env.loginLocaleSelector || process.env.loginLocaleSelector === 'true',
 
+      hasLocal:           false,
+      showLocal:          false,
       providers:          [],
       providerComponents: [],
-      customLoginError:   {}
+      customLoginError:   {},
+      firstLogin:         false,
+      vendor:             getVendor()
     };
   },
 
   computed: {
     ...mapGetters({ t: 'i18n/t' }),
 
+    singleProvider() {
+      return this.providers.length === 1 ? this.providers[0] : undefined;
+    },
+
     nonLocalPrompt() {
       if (this.singleProvider) {
         const provider = this.displayName(this.singleProvider);
@@ -170,30 +105,91 @@ export default {
 
     hasLoginMessage() {
       return this.errorToDisplay || this.loggedOut || this.timedOut;
-    }
+    },
 
-  },
+    // Apply bottom margin so that the locale secletor control lifts up to avoid the footer fixed banner, if it is shown
+    localeSelectorStyle() {
+      const globalBannerSettings = getGlobalBannerFontSizes(this.$store);
 
-  created() {
-    this.providerComponents = this.providers.map((name) => {
-      return this.$store.getters['type-map/importLogin'](configType[name] || name);
-    });
+      return { marginBottom: globalBannerSettings?.footerFont };
+    }
   },
 
   async fetch() {
+    const { firstLoginSetting } = await this.loadInitialSettings();
     const { value } = await this.$store.dispatch('management/find', { type: MANAGEMENT.SETTING, id: SETTING.BANNERS });
+    const drivers = await this.$store.dispatch('auth/getAuthProviders');
+    const providers = sortBy(drivers.map((x) => x.id), ['id']);
+    const hasLocal = providers.includes('local');
+    const hasOthers = hasLocal && !!providers.find((x) => x !== 'local');
 
-    this.customLoginError = JSON.parse(value).loginError;
-  },
+    if ( hasLocal ) {
+      // Local is special and handled here so that it can be toggled
+      removeObject(providers, 'local');
+    }
 
-  mounted() {
+    this.vendor = getVendor();
+    this.providers = providers;
+    this.hasLocal = hasLocal;
+    this.showLocal = !hasOthers || (this.$route.query[LOCAL] === _FLAGGED);
+    this.customLoginError = JSON.parse(value).loginError;
+    this.firstLogin = firstLoginSetting?.value === 'true';
     this.username = this.firstLogin ? 'admin' : this.username;
+
+    this.providerComponents = this.providers.map((name) => {
+      return this.$store.getters['type-map/importLogin'](configType[name] || name);
+    });
+
     this.$nextTick(() => {
       this.focusSomething();
     });
   },
 
   methods: {
+    async loadInitialSettings() {
+      let firstLoginSetting, plSetting, brand;
+
+      // Load settings.
+      // For newer versions this will return all settings if you are somehow logged in,
+      // and just the public ones if you aren't.
+      try {
+        firstLoginSetting = this.$store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.FIRST_LOGIN);
+        plSetting = this.$store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.PL);
+        brand = this.$store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.BRAND);
+      } catch (e) {
+        // Older versions used Norman API to get these
+        firstLoginSetting = await this.$store.dispatch('rancher/find', {
+          type: NORMAN.SETTING,
+          id:   SETTING.FIRST_LOGIN,
+          opt:  { url: `/v3/settings/${ SETTING.FIRST_LOGIN }` }
+        });
+
+        plSetting = await this.$store.dispatch('rancher/find', {
+          type: NORMAN.SETTING,
+          id:   SETTING.PL,
+          opt:  { url: `/v3/settings/${ SETTING.PL }` }
+        });
+
+        brand = await this.$store.dispatch('rancher/find', {
+          type: NORMAN.SETTING,
+          id:   SETTING.BRAND,
+          opt:  { url: `/v3/settings/${ SETTING.BRAND }` }
+        });
+      }
+
+      if (plSetting.value?.length && plSetting.value !== getVendor()) {
+        setVendor(plSetting.value);
+      }
+
+      if (brand?.value?.length && brand.value !== getBrand()) {
+        setBrand(brand.value);
+      }
+
+      return {
+        firstLoginSetting, plSetting, brand
+      };
+    },
+
     displayName(provider) {
       return this.t(`model.authConfig.provider.${ provider }`);
     },
@@ -292,7 +288,11 @@ export default {
 </script>
 
 <template>
-  <main class="main-layout login">
+  <Loading v-if="$fetchState.pending" />
+  <main
+    v-else
+    class="main-layout login"
+  >
     <div class="row gutless mb-20">
       <div class="col span-6 p-20">
         <p class="text-center">
@@ -315,7 +315,7 @@ export default {
             v-else-if="loggedOut"
             class="text-success text-center"
           >
-            {{ t('login.loggedOut') }}
+            {{ isSsoLogout ? t('login.loggedOutFromSso') : t('login.loggedOut') }}
           </h4>
           <h4
             v-else-if="timedOut"
@@ -477,14 +477,17 @@ export default {
         </template>
         <div
           v-if="showLocaleSelector"
-          class="locale-elector"
+          class="locale-selector"
         >
-          <LocaleSelector mode="login" />
+          <LocaleSelector
+            :style="localeSelectorStyle"
+            mode="login"
+          />
         </div>
       </div>
-
       <BrandImage
         class="col span-6 landscape"
+        data-testid="login-landscape__img"
         file-name="login-landscape.svg"
       />
     </div>
@@ -552,7 +555,7 @@ export default {
       place-content: center;
     }
   }
-  .locale-elector {
+  .locale-selector {
     position: absolute;
     bottom: 30px;
   }

package/pages/auth/logout.vue

@@ -1,10 +1,8 @@
 <script>
 
 export default {
-  layout: 'unauthenticated',
-
-  async asyncData({ redirect, store, router }) {
-    await store.dispatch('auth/logout', null, { root: true });
+  async fetch() {
+    await this.$store.dispatch('auth/logout', { force: true }, { root: true });
   }
 };
 </script>

package/pages/auth/setup.vue

@@ -11,13 +11,17 @@ 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 { _ALL_IF_AUTHED } from '@shell/plugins/dashboard-store/actions';
 import { isDevBuild } from '@shell/utils/version';
 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);
@@ -34,28 +38,43 @@ const calcMustChangePassword = async(store) => {
 };
 
 export default {
-  layout: 'unauthenticated',
+  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,
+      telemetry:          null,
+      eula:               false,
+      principals:         null,
+      errors:             []
     };
   },
 
-  async middleware({ store, redirect, route } ) {
-    try {
-      await store.dispatch('management/findAll', {
-        type: MANAGEMENT.SETTING,
-        opt:  {
-          load: _ALL_IF_AUTHED, url: `/v1/${ MANAGEMENT.SETTING }`, redirectUnauthorized: false
-        }
-      });
-    } catch (e) {
-    }
-
-    const isFirstLogin = await calcIsFirstLogin(store);
+  async middleware({ store, redirect } ) {
+    const isFirstLogin = calcIsFirstLogin(store);
     const mustChangePassword = await calcMustChangePassword(store);
 
     if (isFirstLogin) {
@@ -78,13 +97,13 @@ export default {
   },
 
   components: {
-    AsyncButton, LabeledInput, CopyToClipboard, Checkbox, RadioGroup, Password, BrandImage
+    AsyncButton, LabeledInput, CopyToClipboard, Checkbox, RadioGroup, Password, BrandImage, Banner, Loading
   },
 
-  async asyncData({ route, req, store }) {
-    const telemetrySetting = store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.TELEMETRY);
-    const serverUrlSetting = store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.SERVER_URL);
-    const rancherVersionSetting = store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.VERSION_RANCHER);
+  async fetch() {
+    const telemetrySetting = this.$store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.TELEMETRY);
+    const serverUrlSetting = this.$store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.SERVER_URL);
+    const rancherVersionSetting = this.$store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.VERSION_RANCHER);
     let telemetry = true;
 
     if (telemetrySetting?.value && telemetrySetting.value !== 'prompt') {
@@ -96,18 +115,11 @@ export default {
     let plSetting;
 
     try {
-      await store.dispatch('management/findAll', {
-        type: MANAGEMENT.SETTING,
-        opt:  {
-          load: _ALL_IF_AUTHED, url: `/v1/${ MANAGEMENT.SETTING }`, redirectUnauthorized: false
-        },
-      });
-
-      plSetting = store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.PL);
+      plSetting = this.$store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.PL);
     } catch (e) {
       // Older versions used Norman API to get these
-      plSetting = await store.dispatch('rancher/find', {
-        type: 'setting',
+      plSetting = await this.$store.dispatch('rancher/find', {
+        type: NORMAN.SETTING,
         id:   SETTING.PL,
         opt:  { url: `/v3/settings/${ SETTING.PL }` }
       });
@@ -119,13 +131,13 @@ export default {
 
     const productName = plSetting.default;
 
-    const principals = await store.dispatch('rancher/findAll', { type: NORMAN.PRINCIPAL, opt: { url: '/v3/principals' } });
+    const principals = await this.$store.dispatch('rancher/findAll', { type: NORMAN.PRINCIPAL, opt: { url: '/v3/principals' } });
     const me = findBy(principals, 'me', true);
 
-    const current = route.query[SETUP] || store.getters['auth/initialPass'];
-    const v3User = store.getters['auth/v3User'] ?? {};
+    const current = this.$route.query[SETUP] || this.$store.getters['auth/initialPass'];
+    const v3User = this.$store.getters['auth/v3User'] ?? {};
 
-    const mcmFeature = await store.dispatch('management/find', {
+    const mcmFeature = await this.$store.dispatch('management/find', {
       type: MANAGEMENT.FEATURE, id: 'multi-cluster-management', opt: { url: `/v1/${ MANAGEMENT.FEATURE }/multi-cluster-management` }
     });
 
@@ -135,42 +147,24 @@ export default {
 
     if (serverUrlSetting?.value) {
       serverUrl = serverUrlSetting.value;
-    } else if ( process.server ) {
-      serverUrl = req.headers.host;
     } else {
       serverUrl = window.location.origin;
     }
 
-    const isFirstLogin = await calcIsFirstLogin(store);
-    const mustChangePassword = await calcMustChangePassword(store);
-
-    return {
-      productName,
-      vendor:  getVendor(),
-      product: getProduct(),
-      step:    parseInt(route.query.step, 10) || 1,
-
-      useRandom:   true,
-      haveCurrent: !!current,
-      username:    me?.loginName || 'admin',
-      isFirstLogin,
-      mustChangePassword,
-      current,
-      password:    randomStr(),
-      confirm:     '',
-
-      v3User,
-
-      serverUrl,
-      mcmEnabled,
-
-      telemetry,
-
-      eula: false,
-      principals,
-
-      errors: []
-    };
+    const isFirstLogin = await calcIsFirstLogin(this.$store);
+    const mustChangePassword = await calcMustChangePassword(this.$store);
+
+    this.$set(this, 'productName', productName);
+    this.$set(this, 'haveCurrent', !!current);
+    this.$set(this, 'username', me?.loginName || 'admin');
+    this.$set(this, 'isFirstLogin', isFirstLogin);
+    this.$set(this, 'mustChangePassword', mustChangePassword);
+    this.$set(this, 'current', current);
+    this.$set(this, 'v3User', v3User);
+    this.$set(this, 'serverUrl', serverUrl);
+    this.$set(this, 'mcmEnabled', mcmEnabled);
+    this.$set(this, 'telemetry', telemetry);
+    this.$set(this, 'principals', principals);
   },
 
   computed: {
@@ -191,6 +185,10 @@ export default {
         }
       }
 
+      if (!isUrl(this.serverUrl) || this.fvGetPathErrors(['serverUrl']).length > 0) {
+        return false;
+      }
+
       return true;
     },
 
@@ -198,6 +196,10 @@ export default {
       const out = findBy(this.principals, 'me', true);
 
       return out;
+    },
+
+    showLocalhostWarning() {
+      return isLocalhost(this.serverUrl);
     }
   },
 
@@ -265,12 +267,20 @@ export default {
     done() {
       this.$router.replace('/');
     },
+
+    onServerUrlChange(value) {
+      this.serverUrl = value.trim();
+    },
   },
 };
 </script>
 
 <template>
-  <form class="setup">
+  <Loading v-if="$fetchState.pending" />
+  <form
+    v-else
+    class="setup"
+  >
     <div class="row">
       <div class="col span-6 form-col">
         <div>
@@ -368,10 +378,26 @@ export default {
                 />
               </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="serverUrl"
                   :label="t('setup.serverUrl.label')"
                   data-testid="setup-server-url"
+                  :rules="fvGetAndReportPathRules('serverUrl')"
+                  :required="true"
+                  @input="onServerUrlChange"
                 />
               </div>
             </template>