@rancher/shell 2.0.0 → 3.0.0-rc.1

package/pages/auth/logout.vue

@@ -1,8 +1,30 @@
 <script>
+import { authProvidersInfo } from '@shell/utils/auth';
 
 export default {
   async fetch() {
-    await this.$store.dispatch('auth/logout', { force: true }, { root: true });
+    const authInfo = await authProvidersInfo(this.$store);
+
+    if (authInfo.enabled?.length) {
+      const authProvider = authInfo.enabled[0];
+
+      const {
+        logoutAllSupported, logoutAllEnabled, logoutAllForced, configType
+      } = authProvider;
+
+      if (configType === 'saml' && logoutAllSupported && logoutAllEnabled && logoutAllForced) {
+        // SAML - force SLO (logout from all apps)
+        await this.$store.dispatch('auth/logout', {
+          force: true, slo: true, provider: authProvider
+        }, { root: true });
+      } else {
+        // simple logout
+        await this.$store.dispatch('auth/logout', { force: true }, { root: true });
+      }
+    } else {
+      // simple logout
+      await this.$store.dispatch('auth/logout', { force: true }, { root: true });
+    }
   }
 };
 </script>

package/pages/auth/setup.vue

@@ -73,27 +73,27 @@ export default {
     };
   },
 
-  async middleware({ store, redirect } ) {
-    const isFirstLogin = calcIsFirstLogin(store);
-    const mustChangePassword = await calcMustChangePassword(store);
+  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 (!!store.getters['auth/initialPass']) {
+      if (!!this.$store.getters['auth/initialPass']) {
         // Got it... show setup
         return;
       }
       // Haven't got it... redirect to log in so we get it
-      await store.dispatch('auth/logout', null, { root: true });
+      await this.$store.dispatch('auth/logout', null, { root: true });
 
-      return redirect(302, `/auth/login?${ LOGGED_OUT }`);
+      return this.$router.replace(`/auth/login?${ LOGGED_OUT }`);
     }
 
     // For all other cases we don't need to show setup
-    return redirect('/');
+    return this.$router.replace('/');
   },
 
   components: {
@@ -154,17 +154,17 @@ export default {
     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);
+    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['telemetry'] = telemetry;
+    this['principals'] = principals;
   },
 
   computed: {
@@ -276,10 +276,14 @@ export default {
 </script>
 
 <template>
-  <Loading v-if="$fetchState.pending" />
+  <Loading
+    v-if="$fetchState.pending"
+    mode="relative"
+  />
   <form
     v-else
     class="setup"
+    @submit.prevent
   >
     <div class="row">
       <div class="col span-6 form-col">
@@ -298,7 +302,7 @@ export default {
             />
             <Password
               v-if="!haveCurrent"
-              v-model.trim="current"
+              v-model:value.trim="current"
               autocomplete="current-password"
               type="password"
               :label="t('setup.currentPassword')"
@@ -315,7 +319,7 @@ export default {
             >
             <div class="mb-20">
               <RadioGroup
-                v-model="useRandom"
+                v-model:value="useRandom"
                 data-testid="setup-password-mode"
                 name="password-mode"
                 :options="passwordOptions"
@@ -325,7 +329,7 @@ export default {
               <LabeledInput
                 v-if="useRandom"
                 ref="password"
-                v-model.trim="password"
+                v-model:value.trim="password"
                 :type="useRandom ? 'text' : 'password'"
                 :disabled="useRandom"
                 data-testid="setup-password-random"
@@ -349,7 +353,7 @@ export default {
               <Password
                 v-else
                 ref="password"
-                v-model.trim="password"
+                v-model:value.trim="password"
                 :label="t('setup.newPassword')"
                 data-testid="setup-password"
                 :required="true"
@@ -357,7 +361,7 @@ export default {
             </div>
             <Password
               v-show="!useRandom"
-              v-model.trim="confirm"
+              v-model:value.trim="confirm"
               autocomplete="new-password"
               data-testid="setup-password-confirm"
               :label="t('setup.confirmPassword')"
@@ -392,12 +396,12 @@ export default {
                   data-testid="setup-error-banner"
                 />
                 <LabeledInput
-                  v-model="serverUrl"
+                  v-model:value="serverUrl"
                   :label="t('setup.serverUrl.label')"
                   data-testid="setup-server-url"
                   :rules="fvGetAndReportPathRules('serverUrl')"
                   :required="true"
-                  @input="onServerUrlChange"
+                  @update:value="onServerUrlChange"
                 />
               </div>
             </template>
@@ -405,7 +409,7 @@ export default {
             <div class="checkbox mt-40">
               <Checkbox
                 id="checkbox-telemetry"
-                v-model="telemetry"
+                v-model:value="telemetry"
               >
                 <template #label>
                   <t
@@ -419,7 +423,7 @@ export default {
             <div class="checkbox pt-10 eula">
               <Checkbox
                 id="checkbox-eula"
-                v-model="eula"
+                v-model:value="eula"
                 data-testid="setup-agreement"
               >
                 <template #label>
@@ -449,8 +453,8 @@ export default {
 
           <div class="setup-errors mt-20">
             <h4
-              v-for="err in errors"
-              :key="err"
+              v-for="(err, i) in errors"
+              :key="i"
               class="text-error text-center"
             >
               {{ err }}
@@ -518,7 +522,7 @@ export default {
     }
 
     .setup-title {
-      ::v-deep code {
+      :deep() code {
         font-size: 12px;
         padding: 0;
       }

package/pages/auth/verify.vue

@@ -1,5 +1,7 @@
 <script>
-import { GITHUB_CODE, GITHUB_NONCE, BACK_TO } from '@shell/config/query-params';
+import {
+  GITHUB_CODE, GITHUB_NONCE, BACK_TO, IS_SLO, _FLAGGED
+} from '@shell/config/query-params';
 import { get } from '@shell/utils/object';
 import { base64Decode } from '@shell/utils/crypto';
 import loadPlugins from '@shell/plugins/plugin';
@@ -35,14 +37,36 @@ export default {
     if (error || errorDescription || errorCode || errorMsg) {
       let out = errorDescription || error || errorCode;
 
-      if (errorMsg) {
-        out = this.$store.getters['i18n/withFallback'](`login.serverError.${ errorMsg }`, null, errorMsg);
+      if (this.isSlo) {
+        console.error('Failed to log out of auth provider', error, errorDescription, errorCode, errorMsg); // eslint-disable-line no-console
+
+        let out = this.$store.getters['i18n/withFallback'](`logout.specificError.unknown`);
+
+        if (errorCode) {
+          out = this.$store.getters['i18n/withFallback'](`logout.specificError.${ errorCode }`, null, out);
+        }
+
+        this.$router.replace(`/auth/login?${ IS_SLO }&err=${ escape(out) }`);
+
+        return;
+      } else {
+        if (errorMsg) {
+          out = this.$store.getters['i18n/withFallback'](`login.serverError.${ errorMsg }`, null, errorMsg);
+        }
+
+        this.$router.replace(`/auth/login?err=${ escape(out) }`);
+
+        return;
       }
+    }
 
-      this.$router.replace(`/auth/login?err=${ escape(out) }`);
+    // check for existence of IS_SLO query param to differentiate between a login and a logout
+    if (this.isSlo) {
+      this.$store.dispatch('auth/uiLogout');
 
       return;
     }
+
     let parsed;
 
     try {
@@ -106,7 +130,13 @@ export default {
 
     const { test } = parsed;
 
-    return { testing: test };
+    // Is Single Log Out
+    const isSlo = this.$route.query[IS_SLO] === _FLAGGED;
+
+    return {
+      testing: test,
+      isSlo
+    };
   },
 
   mounted() {
@@ -147,6 +177,9 @@ export default {
       <span v-if="testing">
         Testing Configuration&hellip;
       </span>
+      <span v-else-if="isSlo">
+        Logging Out&hellip;
+      </span>
       <span v-else>
         Logging In&hellip;
       </span>

package/pages/c/_cluster/_product/namespaces.vue

@@ -63,8 +63,7 @@ export default {
       :rows="rows"
       :groupable="false"
       group-tooltip="resourceTable.groupBy.project"
-      key-field="_key"
-      v-on="$listeners"
+      key-field="_key"
     >
       <template #cell:project="{row}">
         <span v-if="row.project">{{ row.project.nameDisplay }}</span>

package/pages/c/_cluster/apps/charts/chart.vue

@@ -203,16 +203,16 @@ export default {
           <span v-clean-html="osWarning" />
         </Banner>
         <Banner
-          v-for="msg in requires"
-          :key="msg"
+          v-for="(msg, i) in requires"
+          :key="i"
           color="error"
         >
           <span v-clean-html="msg" />
         </Banner>
 
         <Banner
-          v-for="msg in warnings"
-          :key="msg"
+          v-for="(msg, i) in warnings"
+          :key="i"
           color="warning"
         >
           <span v-clean-html="msg" />

package/pages/c/_cluster/apps/charts/index.vue

@@ -390,7 +390,7 @@ export default {
         class="actions-container"
       >
         <ButtonGroup
-          v-model="chartMode"
+          v-model:value="chartMode"
           :options="chartOptions"
         />
       </div>
@@ -438,7 +438,7 @@ export default {
       </Select>
 
       <Select
-        v-model="category"
+        v-model:value="category"
         :clearable="false"
         :searchable="false"
         :options="categories"
@@ -478,7 +478,7 @@ export default {
 
       <div class="mt-10">
         <Checkbox
-          v-model="showDeprecated"
+          v-model:value="showDeprecated"
           :label="t('catalog.charts.deprecatedChartsFilter.label')"
           data-testid="charts-show-deprecated-filter"
         />
@@ -486,8 +486,8 @@ export default {
     </div>
 
     <Banner
-      v-for="err in loadingErrors"
-      :key="err"
+      v-for="(err, i) in loadingErrors"
+      :key="i"
       color="error"
       :label="err"
     />
@@ -585,7 +585,7 @@ export default {
   padding: 7px 0 6px 13px;
   width: calc(100% + 10px);
 
-  ::v-deep .checkbox-label {
+  :deep() .checkbox-label {
     display: flex;
     align-items: center;
 
@@ -600,7 +600,7 @@ export default {
     }
   }
 
-  &:hover ::v-deep .checkbox-label {
+  &:hover :deep() .checkbox-label {
       color: var(--body-text);
     }
 
@@ -608,7 +608,7 @@ export default {
       &:hover {
       background: var(--app-rancher-accent);
     }
-    &:hover ::v-deep .checkbox-label {
+    &:hover :deep() .checkbox-label {
       color: var(--app-rancher-accent-text);
     }
     & i {
@@ -620,7 +620,7 @@ export default {
       &:hover {
       background: var(--app-partner-accent);
     }
-    &:hover ::v-deep .checkbox-label {
+    &:hover :deep() .checkbox-label {
       color: var(--app-partner-accent-text);
     }
     & i {
@@ -632,7 +632,7 @@ export default {
     &:hover {
       background: var(--app-color1-accent);
     }
-    &:hover ::v-deep .checkbox-label {
+    &:hover :deep() .checkbox-label {
       color: var(--app-color1-accent-text);
     }
     & i {
@@ -643,7 +643,7 @@ export default {
     &:hover {
       background: var(--app-color2-accent);
     }
-    &:hover ::v-deep .checkbox-label {
+    &:hover :deep() .checkbox-label {
       color: var(--app-color2-accent-text);
     }
     & i {
@@ -654,7 +654,7 @@ export default {
     &:hover {
       background: var(--app-color3-accent);
     }
-    &:hover ::v-deep .checkbox-label {
+    &:hover :deep() .checkbox-label {
       color: var(--app-color3-accent-text);
     }
     & i {
@@ -665,7 +665,7 @@ export default {
     &:hover {
       background: var(--app-color4-accent);
     }
-    &:hover ::v-deep.checkbox-label {
+    &:hover :deep().checkbox-label {
       color: var(--app-color4-accent-text);
     }
     & i {
@@ -676,7 +676,7 @@ export default {
     &:hover {
       background: var(--app-color5-accent);
     }
-    &:hover ::v-deep .checkbox-label {
+    &:hover :deep() .checkbox-label {
       color: var(--app-color5-accent-text);
     }
     & i {
@@ -687,7 +687,7 @@ export default {
     &:hover {
       background: var(--app-color6-accent);
     }
-    &:hover ::v-deep .checkbox-label {
+    &:hover :deep() .checkbox-label {
       color: var(--app-color6-accent-text);
     }
     & i {
@@ -698,7 +698,7 @@ export default {
     &:hover {
       background: var(--app-color7-accent);
     }
-    &:hover ::v-deep .checkbox-label {
+    &:hover :deep() .checkbox-label {
       color: var(--app-color7-accent-text);
     }
     & i {