@rancher/shell 3.0.12-rc.3 → 3.0.12-rc.5

package/edit/auth/azuread.vue

@@ -1,8 +1,9 @@
 <script>
+import { ref, computed } from 'vue';
+import { useStore } from 'vuex';
 import isEqual from 'lodash/isEqual';
 import Loading from '@shell/components/Loading';
 import CreateEditView from '@shell/mixins/create-edit-view';
-import FormValidation from '@shell/mixins/form-validation';
 import CruResource from '@shell/components/CruResource';
 import InfoBox from '@shell/components/InfoBox';
 import { RadioGroup } from '@components/Form/Radio';
@@ -16,6 +17,8 @@ import { AZURE_MIGRATED } from '@shell/config/labels-annotations';
 import { get } from '@shell/utils/object';
 import AuthProviderWarningBanners from '@shell/edit/auth/AuthProviderWarningBanners';
 import formRulesGenerator from '@shell/utils/validators/formRules/index';
+import { useFormValidation } from '@shell/composables/useFormValidation';
+import { useI18n } from '@shell/composables/useI18n';
 
 const TENANT_ID_TOKEN = '__[[TENANT_ID]]__';
 
@@ -68,7 +71,73 @@ export default {
     AuthProviderWarningBanners
   },
 
-  mixins: [CreateEditView, AuthConfig, FormValidation],
+  mixins: [CreateEditView, AuthConfig],
+
+  setup() {
+    const store = useStore();
+    const { t } = useI18n(store);
+
+    const editMemberConfigRef = ref(false);
+    const isLogoutAllSupported = ref(false);
+    const sloTypeRef = ref(null);
+    const sloEndSessionEndpointUiEnabled = computed(() => (
+      sloTypeRef.value === SLO_OPTION_VALUES.all || sloTypeRef.value === SLO_OPTION_VALUES.both
+    ));
+
+    const urlRule = formRulesGenerator(t, {}).genericUrl;
+
+    const extraRules = {
+      applicationSecretRequired: (value) => {
+        if (!editMemberConfigRef.value && !value) {
+          return t('validation.required', { key: t('authConfig.azuread.applicationSecret.label') });
+        }
+
+        return undefined;
+      },
+      endSessionEndpointRequiredAndValid: (value) => {
+        if (!isLogoutAllSupported.value || !sloEndSessionEndpointUiEnabled.value) {
+          return undefined;
+        }
+        if (!value) {
+          return t('validation.required', { key: t('authConfig.azuread.endSessionEndpoint.title') });
+        }
+
+        return urlRule(value);
+      },
+    };
+
+    const { getRules, isFormValid } = useFormValidation(t, [
+      {
+        path: 'tenantId', rules: ['required'], translationKey: 'authConfig.azuread.tenantId.label'
+      },
+      {
+        path: 'applicationId', rules: ['required'], translationKey: 'authConfig.azuread.applicationId.label'
+      },
+      { path: 'applicationSecret', rules: ['applicationSecretRequired'] },
+      {
+        path: 'endpoint', rules: ['required', 'url'], translationKey: 'authConfig.azuread.endpoint.label'
+      },
+      {
+        path: 'graphEndpoint', rules: ['required', 'url'], translationKey: 'authConfig.azuread.graphEndpoint.label'
+      },
+      {
+        path: 'tokenEndpoint', rules: ['required', 'url'], translationKey: 'authConfig.azuread.tokenEndpoint.label'
+      },
+      {
+        path: 'authEndpoint', rules: ['required', 'url'], translationKey: 'authConfig.azuread.authEndpoint.label'
+      },
+      { path: 'endSessionEndpoint', rules: ['endSessionEndpointRequiredAndValid'] },
+    ], extraRules);
+
+    return {
+      getRules,
+      isFormValid,
+      editMemberConfigRef,
+      isLogoutAllSupported,
+      sloTypeRef,
+      sloEndSessionEndpointUiEnabled,
+    };
+  },
 
   async fetch() {
     await this.reloadModel();
@@ -89,39 +158,11 @@ export default {
 
       // Storing the applicationSecret is necessary because norman doesn't support returning secrets and when we
       // override the steve authconfig with a norman config the applicationSecret is lost
-      applicationSecret: this.value.applicationSecret,
-      fvFormRuleSets:    [
-        { path: 'tenantId', rules: ['tenantIdRequired'] },
-        { path: 'applicationId', rules: ['applicationIdRequired'] },
-        { path: 'applicationSecret', rules: ['applicationSecretRequired'] },
-        { path: 'endpoint', rules: ['endpointRequired', 'endpointMustBeURL'] },
-        { path: 'graphEndpoint', rules: ['graphEndpointRequired', 'graphEndpointMustBeURL'] },
-        { path: 'tokenEndpoint', rules: ['tokenEndpointRequired', 'tokenEndpointMustBeURL'] },
-        { path: 'authEndpoint', rules: ['authEndpointRequired', 'authEndpointMustBeURL'] },
-        { path: 'endSessionEndpoint', rules: ['endSessionEndpointRequiredAndValid'] },
-      ]
+      applicationSecret: this.value.applicationSecret
     };
   },
 
   computed: {
-    // Cannot pass this.model as a rootObject because it is undefined at that point, so had to use a workaround
-    fvExtraRules() {
-      return {
-        tenantIdRequired:                   this.modelFieldRequired('tenantId', 'authConfig.azuread.tenantId.label'),
-        applicationIdRequired:              this.modelFieldRequired('applicationId', 'authConfig.azuread.applicationId.label'),
-        applicationSecretRequired:          this.applicationSecretRequired(),
-        endpointRequired:                   this.modelFieldRequired('endpoint', 'authConfig.azuread.endpoint.label'),
-        endpointMustBeURL:                  this.modelFieldURL('endpoint'),
-        graphEndpointRequired:              this.modelFieldRequired('graphEndpoint', 'authConfig.azuread.graphEndpoint.label'),
-        graphEndpointMustBeURL:             this.modelFieldURL('graphEndpoint'),
-        tokenEndpointRequired:              this.modelFieldRequired('tokenEndpoint', 'authConfig.azuread.tokenEndpoint.label'),
-        tokenEndpointMustBeURL:             this.modelFieldURL('tokenEndpoint'),
-        authEndpointRequired:               this.modelFieldRequired('authEndpoint', 'authConfig.azuread.authEndpoint.label'),
-        authEndpointMustBeURL:              this.modelFieldURL('authEndpoint'),
-        endSessionEndpointRequiredAndValid: this.endSessionEndpointRule(),
-      };
-    },
-
     tArgs() {
       return {
         baseUrl:  this.baseUrl,
@@ -172,14 +213,14 @@ export default {
       return this.model.enabled && !this.isEnabling && !this.editConfig;
     },
 
-    isLogoutAllSupported() {
-      return this.model?.logoutAllSupported;
+    displayName() {
+      return this.t('model.authConfig.name.azuread');
     },
 
     sloOptions() {
       return [
-        { value: SLO_OPTION_VALUES.rancher, label: this.t('authConfig.slo.sloOptions.onlyRancher', { name: this.model?.nameDisplay }) },
-        { value: SLO_OPTION_VALUES.all, label: this.t('authConfig.slo.sloOptions.logoutAll', { name: this.model?.nameDisplay }) },
+        { value: SLO_OPTION_VALUES.rancher, label: this.t('authConfig.slo.sloOptions.onlyRancher', { name: this.displayName }) },
+        { value: SLO_OPTION_VALUES.all, label: this.t('authConfig.slo.sloOptions.logoutAll', { name: this.displayName }) },
         { value: SLO_OPTION_VALUES.both, label: this.t('authConfig.slo.sloOptions.choose') },
       ];
     },
@@ -190,12 +231,23 @@ export default {
       return sloOptionSelected?.label || '';
     },
 
-    sloEndSessionEndpointUiEnabled() {
-      return this.sloType === SLO_OPTION_VALUES.all || this.sloType === SLO_OPTION_VALUES.both;
-    },
   },
 
   watch: {
+    editMemberConfig: {
+      handler(val) {
+        this.editMemberConfigRef = val;
+      },
+      immediate: true,
+    },
+
+    'model.logoutAllSupported': {
+      handler(val) {
+        this.isLogoutAllSupported = !!val;
+      },
+      immediate: true,
+    },
+
     endpoint(value) {
       this.setEndpoints(value);
     },
@@ -207,22 +259,26 @@ export default {
     },
 
     // sloType is defined on shell/mixins/auth-config.js
-    sloType(neu) {
-      switch (neu) {
-      case SLO_OPTION_VALUES.rancher:
-        this.model.logoutAllEnabled = false;
-        this.model.logoutAllForced = false;
-        this.model.endSessionEndpoint = '';
-        break;
-      case SLO_OPTION_VALUES.all:
-        this.model.logoutAllEnabled = true;
-        this.model.logoutAllForced = true;
-        break;
-      case SLO_OPTION_VALUES.both:
-        this.model.logoutAllEnabled = true;
-        this.model.logoutAllForced = false;
-        break;
-      }
+    sloType: {
+      handler(neu) {
+        this.sloTypeRef = neu;
+        switch (neu) {
+        case SLO_OPTION_VALUES.rancher:
+          this.model.logoutAllEnabled = false;
+          this.model.logoutAllForced = false;
+          this.model.endSessionEndpoint = '';
+          break;
+        case SLO_OPTION_VALUES.all:
+          this.model.logoutAllEnabled = true;
+          this.model.logoutAllForced = true;
+          break;
+        case SLO_OPTION_VALUES.both:
+          this.model.logoutAllEnabled = true;
+          this.model.logoutAllForced = false;
+          break;
+        }
+      },
+      immediate: true,
     },
 
     model: {
@@ -324,37 +380,6 @@ export default {
           });
       }
     },
-    modelFieldRequired(path, label) {
-      return () => {
-        return !this.model[path] ? `${ this.t('validation.required', { key: this.t(label) }) }` : undefined;
-      };
-    },
-    applicationSecretRequired() {
-      return () => {
-        return !this.editMemberConfig && !this.model.applicationSecret ? `${ this.t('validation.required', { key: this.t('authConfig.azuread.applicationSecret.label') }) }` : undefined;
-      };
-    },
-    modelFieldURL(path) {
-      return () => {
-        const rule = formRulesGenerator(this.$store.getters['i18n/t'], {}).url;
-
-        return rule(this.model[path]);
-      };
-    },
-
-    endSessionEndpointRule() {
-      return () => {
-        if (!this.isLogoutAllSupported || !this.sloEndSessionEndpointUiEnabled) {
-          return undefined;
-        }
-        if (!this.model.endSessionEndpoint) {
-          return this.t('validation.required', { key: this.t('authConfig.azuread.endSessionEndpoint.title') });
-        }
-        const rule = formRulesGenerator(this.$store.getters['i18n/t'], {}).url;
-
-        return rule(this.model.endSessionEndpoint);
-      };
-    },
   }
 };
 </script>
@@ -367,7 +392,7 @@ export default {
       :mode="mode"
       :resource="model"
       :subtypes="[]"
-      :validation-passed="fvFormIsValid"
+      :validation-passed="isFormValid"
       :finish-button-mode="model && model.enabled ? 'edit' : 'enable'"
       :can-yaml="false"
       :errors="errors"
@@ -466,10 +491,11 @@ export default {
             <LabeledInput
               id="tenant-id"
               v-model:value="model.tenantId"
+              name="tenantId"
               :label="t('authConfig.azuread.tenantId.label')"
               :mode="mode"
               :required="true"
-              :rules="fvGetAndReportPathRules('tenantId')"
+              :rules="getRules('tenantId')"
               :tooltip="t('authConfig.azuread.tenantId.tooltip')"
               :placeholder="t('authConfig.azuread.tenantId.placeholder')"
               data-testid="input-azureAD-tenantId"
@@ -481,10 +507,11 @@ export default {
             <LabeledInput
               id="application-id"
               v-model:value="model.applicationId"
+              name="applicationId"
               :label="t('authConfig.azuread.applicationId.label')"
               :mode="mode"
               :required="true"
-              :rules="fvGetAndReportPathRules('applicationId')"
+              :rules="getRules('applicationId')"
               :placeholder="t('authConfig.azuread.applicationId.placeholder')"
               data-testid="input-azureAD-applcationId"
             />
@@ -493,10 +520,11 @@ export default {
             <LabeledInput
               id="application-secret"
               v-model:value="model.applicationSecret"
+              name="applicationSecret"
               type="password"
               :label="t('authConfig.azuread.applicationSecret.label')"
               :required="true"
-              :rules="fvGetAndReportPathRules('applicationSecret')"
+              :rules="getRules('applicationSecret')"
               :mode="mode"
               data-testid="input-azureAD-applicationSecret"
             />
@@ -548,19 +576,21 @@ export default {
             <div class="col span-6">
               <LabeledInput
                 v-model:value="model.endpoint"
+                name="endpoint"
                 :label="t('authConfig.azuread.endpoint.label')"
                 :mode="mode"
                 :required="true"
-                :rules="fvGetAndReportPathRules('endpoint')"
+                :rules="getRules('endpoint')"
                 data-testid="input-azureAD-endpoint"
               />
             </div>
             <div class="col span-6">
               <LabeledInput
                 v-model:value="model.graphEndpoint"
+                name="graphEndpoint"
                 :label="t('authConfig.azuread.graphEndpoint.label')"
                 :required="true"
-                :rules="fvGetAndReportPathRules('graphEndpoint')"
+                :rules="getRules('graphEndpoint')"
                 :mode="mode"
                 data-testid="input-azureAD-graphEndpoint"
               />
@@ -570,19 +600,21 @@ export default {
             <div class="col span-6">
               <LabeledInput
                 v-model:value="model.tokenEndpoint"
+                name="tokenEndpoint"
                 :label="t('authConfig.azuread.tokenEndpoint.label')"
                 :mode="mode"
                 :required="true"
-                :rules="fvGetAndReportPathRules('tokenEndpoint')"
+                :rules="getRules('tokenEndpoint')"
                 data-testid="input-azureAD-tokenEndpoint"
               />
             </div>
             <div class="col span-6">
               <LabeledInput
                 v-model:value="model.authEndpoint"
+                name="authEndpoint"
                 :label="t('authConfig.azuread.authEndpoint.label')"
                 :required="true"
-                :rules="fvGetAndReportPathRules('authEndpoint')"
+                :rules="getRules('authEndpoint')"
                 :mode="mode"
                 data-testid="input-azureAD-authEndpoint"
               />
@@ -619,10 +651,11 @@ export default {
             <div class="col span-6">
               <LabeledInput
                 v-model:value="model.endSessionEndpoint"
-                :tooltip="t('authConfig.azuread.endSessionEndpoint.tooltip', { tenantId: `${ tenantId || 'tenant-id' }` }, true)"
+                name="endSessionEndpoint"
+                :tooltip="t('authConfig.azuread.endSessionEndpoint.tooltip', { name: displayName, tenantId: `${ tenantId || 'tenant-id' }` }, true)"
                 :label="t('authConfig.azuread.endSessionEndpoint.title')"
                 :mode="mode"
-                :rules="fvGetAndReportPathRules('endSessionEndpoint')"
+                :rules="getRules('endSessionEndpoint')"
                 :required="true"
                 data-testid="azuread-endSessionEndpoint"
               />

package/edit/auth/github.vue

@@ -1,4 +1,9 @@
 <script>
+import { ref, computed, provide } from 'vue';
+import { useStore } from 'vuex';
+import { useForm } from 'vee-validate';
+import { toTypedSchema } from '@vee-validate/zod';
+import * as z from 'zod';
 import Loading from '@shell/components/Loading';
 import CreateEditView from '@shell/mixins/create-edit-view';
 import CruResource from '@shell/components/CruResource';
@@ -13,6 +18,7 @@ import AuthProviderWarningBanners from '@shell/edit/auth/AuthProviderWarningBann
 import FileSelector from '@shell/components/form/FileSelector';
 import GithubSteps from '@shell/edit/auth/github-steps.vue';
 import GithubAppSteps from '@shell/edit/auth/github-app-steps.vue';
+import { useI18n } from '@shell/composables/useI18n';
 
 export default {
   components: {
@@ -30,6 +36,49 @@ export default {
 
   mixins: [CreateEditView, AuthConfig],
 
+  setup() {
+    const store = useStore();
+    const { t } = useI18n(store);
+
+    // These refs sync Options API state into the Composition API for the reactive schema.
+    const isGithubAppRef = ref(false);
+    const isPublicRef = ref(true);
+
+    const coerce = (schema) => z.preprocess((v) => v ?? '', schema);
+    const requiredField = (key) => coerce(z.string().min(1, t('validation.required', { key: t(key) })));
+    const requiredUrlField = (key) => coerce(z.string().min(1, t('validation.required', { key: t(key) })).url(t('validation.genericUrl')));
+    const optionalField = coerce(z.string());
+
+    const validationSchema = computed(() => toTypedSchema(
+      z.object({
+        clientId:     requiredField('authConfig.github.clientId.label'),
+        clientSecret: requiredField('authConfig.github.clientSecret.label'),
+        appId:        isGithubAppRef.value ? requiredField('authConfig.githubapp.githubAppId.label') : optionalField,
+        privateKey:   isGithubAppRef.value ? requiredField('authConfig.githubapp.privateKey.label') : optionalField,
+        targetUrl:    !isPublicRef.value ? requiredUrlField('authConfig.github.host.label') : optionalField,
+      })
+    ));
+
+    const showAllErrors = ref(false);
+
+    provide('vee-show-all-errors', showAllErrors);
+
+    const { errors, validate } = useForm({ validationSchema });
+    const isFormValid = computed(() => Object.keys(errors.value).length === 0);
+
+    const validateAllFields = async() => {
+      await validate();
+      showAllErrors.value = true;
+    };
+
+    return {
+      isGithubAppRef,
+      isPublicRef,
+      isFormValid,
+      validateAllFields,
+    };
+  },
+
   async fetch() {
     await this.mixinFetch();
 
@@ -97,32 +146,37 @@ export default {
     },
 
     validationPassed() {
-      // Allows for configuring authorized users and groups
       if ( this.model.enabled && !this.editConfig ) {
         return true;
       }
 
-      if (!this.model.clientId || !this.model.clientSecret) {
-        return false;
-      }
-
-      if (this.isGithubApp && (!this.model.appId || !this.model.privateKey)) {
-        return false;
-      }
-
-      return true;
+      return this.isFormValid;
     },
 
   },
 
   watch: {
-    targetType: 'updateHost',
-    targetUrl:  'updateHost',
+    'model.id': {
+      handler(newVal) {
+        this.isGithubAppRef = newVal === 'githubapp';
+      },
+      immediate: true,
+    },
+
+    targetType: {
+      handler(newVal) {
+        this.isPublicRef = newVal === 'public';
+        this.updateHost();
+      },
+      immediate: true,
+    },
+
+    targetUrl: 'updateHost',
   },
 
   methods: {
     updateHost() {
-      const match = this.targetUrl.match(/^(((https?):)?\/\/)?([^/]+)(\/.*)?$/);
+      const match = this.targetUrl?.match(/^(((https?):)?\/\/)?([^/]+)(\/.*)?$/);
 
       if ( match ) {
         if ( match[3] === 'http') {
@@ -212,6 +266,7 @@ export default {
             <LabeledInput
               v-if="!isPublic"
               v-model:value="targetUrl"
+              name="targetUrl"
               :label-key="`authConfig.${NAME}.host.label`"
               :placeholder="t(`authConfig.${NAME}.host.placeholder`)"
               :required="true"
@@ -231,6 +286,7 @@ export default {
           <div class="col span-6">
             <LabeledInput
               v-model:value="model.clientId"
+              name="clientId"
               required
               data-testid="client-id"
               :label="t(`authConfig.${NAME}.clientId.label`)"
@@ -240,6 +296,7 @@ export default {
           <div class="col span-6">
             <LabeledInput
               v-model:value="model.clientSecret"
+              name="clientSecret"
               required
               data-testid="client-secret"
               type="password"
@@ -253,6 +310,7 @@ export default {
             <div class="col span-6">
               <LabeledInput
                 v-model:value="model.appId"
+                name="appId"
                 required
                 data-testid="app-id"
                 :label="t(`authConfig.${NAME}.githubAppId.label`)"
@@ -272,6 +330,7 @@ export default {
             <div class="col span-6">
               <LabeledInput
                 v-model:value="model.privateKey"
+                name="privateKey"
                 required
                 data-testid="private-key"
                 type="multiline"