@rancher/shell 0.5.3 → 2.0.0

package/pages/auth/login.vue

@@ -8,129 +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',
   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);
@@ -169,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 }`);
     },
@@ -291,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">
@@ -314,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"
@@ -476,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>
@@ -551,7 +555,7 @@ export default {
       place-content: center;
     }
   }
-  .locale-elector {
+  .locale-selector {
     position: absolute;
     bottom: 30px;
   }

package/pages/auth/logout.vue

@@ -1,8 +1,8 @@
 <script>
 
 export default {
-  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,7 +11,6 @@ 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';
@@ -22,6 +21,7 @@ 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);
@@ -49,22 +49,32 @@ export default {
         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) {
@@ -87,13 +97,13 @@ export default {
   },
 
   components: {
-    AsyncButton, LabeledInput, CopyToClipboard, Checkbox, RadioGroup, Password, BrandImage, Banner
+    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') {
@@ -105,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 }` }
       });
@@ -128,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` }
     });
 
@@ -148,36 +151,20 @@ export default {
       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: {
@@ -289,7 +276,11 @@ export default {
 </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>
@@ -391,12 +382,14 @@ export default {
                   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"

package/pages/auth/verify.vue

@@ -25,21 +25,21 @@ function isSaml($route) {
 }
 
 export default {
-  async fetch({ store, route, redirect }) {
-    const code = route.query[GITHUB_CODE];
-    const stateStr = route.query[GITHUB_NONCE];
+  async fetch() {
+    const code = this.$route.query[GITHUB_CODE];
+    const stateStr = this.$route.query[GITHUB_NONCE];
     const {
       error, error_description: errorDescription, errorCode, errorMsg
-    } = route.query;
+    } = this.$route.query;
 
     if (error || errorDescription || errorCode || errorMsg) {
       let out = errorDescription || error || errorCode;
 
       if (errorMsg) {
-        out = store.getters['i18n/withFallback'](`login.serverError.${ errorMsg }`, null, errorMsg);
+        out = this.$store.getters['i18n/withFallback'](`login.serverError.${ errorMsg }`, null, errorMsg);
       }
 
-      redirect(`/auth/login?err=${ escape(out) }`);
+      this.$router.replace(`/auth/login?err=${ escape(out) }`);
 
       return;
     }
@@ -48,16 +48,16 @@ export default {
     try {
       parsed = JSON.parse(base64Decode((stateStr)));
     } catch (err) {
-      if (isSaml(route)) {
+      if (isSaml(this.$route)) {
         // This is an ok failure. SAML has no state string so a failure is fine (see similar check in mounted).
         // This whole file could be re-written with that in mind, but this change keeps things simple and fixes a breaking addition
         return;
       }
-      const out = store.getters['i18n/t'](`login.error`);
+      const out = this.$store.getters['i18n/t'](`login.error`);
 
       console.error('Failed to parse nonce', stateStr, err); // eslint-disable-line no-console
 
-      redirect(`/auth/login?err=${ escape(out) }`);
+      this.$router.replace(`/auth/login?err=${ escape(out) }`);
 
       return;
     }
@@ -69,28 +69,28 @@ export default {
     }
 
     try {
-      const res = await store.dispatch('auth/verifyOAuth', {
+      const res = await this.$store.dispatch('auth/verifyOAuth', {
         code,
         nonce,
         provider
       });
 
       if ( res._status === 200) {
-        const backTo = route.query[BACK_TO] || '/';
+        const backTo = this.$route.query[BACK_TO] || '/';
 
         // Load plugins
         await loadPlugins({
-          app:     store.app,
-          store,
-          $plugin: store.$plugin
+          app:     this.$store.app,
+          store:   this.$store,
+          $plugin: this.$store.$plugin
         });
 
-        redirect(backTo);
+        this.$router.replace(backTo);
       } else {
-        redirect(`/auth/login?err=${ escape(res) }`);
+        this.$router.replace(`/auth/login?err=${ escape(res) }`);
       }
     } catch (err) {
-      redirect(`/auth/login?err=${ escape(err) }`);
+      this.$router.replace(`/auth/login?err=${ escape(err) }`);
     }
   },