@rancher/shell 3.0.12-rc.2 → 3.0.12-rc.4

package/edit/auth/oidc.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 AuthConfig, { SLO_OPTION_VALUES } from '@shell/mixins/auth-config';
@@ -15,7 +20,7 @@ import { RadioGroup } from '@components/Form/Radio';
 import { Checkbox } from '@components/Form/Checkbox';
 import { BASE_SCOPES } from '@shell/store/auth';
 import CopyToClipboardText from '@shell/components/CopyToClipboardText.vue';
-import isUrl from 'is-url';
+import { useI18n } from '@shell/composables/useI18n';
 
 const PKCE_S256 = 'S256';
 
@@ -41,7 +46,94 @@ export default {
   mixins: [CreateEditView, AuthConfig],
 
   setup() {
-    return { PKCE_S256 };
+    const store = useStore();
+    const { t } = useI18n(store);
+
+    // These refs sync mixin-state for the composition api
+    const modelId = ref(null);
+    const sloTypeRef = ref(null);
+    const customEndpointEnabled = ref(false);
+
+    const requiredScopes = computed(() => {
+      const scopes = BASE_SCOPES[modelId.value]?.[0];
+
+      return scopes ? scopes.split(' ') : [];
+    });
+    const isAmazonCognito = computed(() => modelId.value === 'cognito');
+    const isKeycloak = computed(() => modelId.value === 'keycloakoidc');
+    const isGenericOidc = computed(() => modelId.value === 'genericoidc');
+    const supportsCustomClaims = computed(() => isKeycloak.value || isGenericOidc.value);
+    const supportsGroupSearch = computed(() => modelId.value !== 'cognito');
+    const requiresCert = computed(() => modelId.value !== 'cognito');
+    const requiresAuthEndpoint = computed(() => ['genericoidc', 'keycloakoidc'].includes(modelId.value));
+    const sloEndSessionEndpointUiEnabled = computed(() => [SLO_OPTION_VALUES.all, SLO_OPTION_VALUES.both].includes(sloTypeRef.value));
+
+    // z.preprocess coerces null/undefined to '' before validation. This
+    // prevents the raw "Expected string, received null" zod message.
+    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());
+
+    // Reactive schema uses computed to reshape when provider or endpoint mode
+    // changes.
+    const validationSchema = computed(() => toTypedSchema(
+      z.object({
+        clientId:     requiredField('authConfig.oidc.clientId'),
+        clientSecret: requiredField('authConfig.oidc.clientSecret'),
+
+        url:   !customEndpointEnabled.value && !isAmazonCognito.value ? requiredUrlField('authConfig.oidc.url') : optionalField,
+        realm: !customEndpointEnabled.value && !isAmazonCognito.value ? requiredField('authConfig.oidc.realm') : optionalField,
+
+        rancherUrl: customEndpointEnabled.value && !isAmazonCognito.value ? requiredField('authConfig.oidc.rancherUrl') : optionalField,
+        issuer:     customEndpointEnabled.value || isAmazonCognito.value ? requiredField('authConfig.oidc.issuer') : optionalField,
+
+        authEndpoint: requiresAuthEndpoint.value ? requiredUrlField('authConfig.oidc.authEndpoint') : optionalField,
+
+        endSessionEndpoint: sloEndSessionEndpointUiEnabled.value ? requiredUrlField('authConfig.oidc.endSessionEndpoint.title') : optionalField,
+
+        scope: z.preprocess(
+          (v) => (Array.isArray(v) ? v : []),
+          z.array(z.string()).refine(
+            (arr) => requiredScopes.value?.every((s) => arr.includes(s)),
+            (arr) => {
+              const missing = requiredScopes.value?.filter((s) => !arr.includes(s));
+
+              return { message: t('authConfig.oidc.scope.missingRequired', { scopes: missing?.join(', '), count: missing?.length }) };
+            }
+          )
+        ),
+      })
+    ));
+
+    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 {
+      PKCE_S256,
+      isFormValid,
+      validateAllFields,
+      modelId,
+      sloTypeRef,
+      customEndpointEnabled,
+      isAmazonCognito,
+      isKeycloak,
+      isGenericOidc,
+      supportsCustomClaims,
+      supportsGroupSearch,
+      requiresCert,
+      requiresAuthEndpoint,
+      sloEndSessionEndpointUiEnabled,
+    };
   },
 
   data() {
@@ -92,75 +184,11 @@ export default {
     },
 
     validationPassed() {
-      if ( this.model.enabled && !this.editConfig ) {
+      if ( this.model?.enabled && !this.editConfig ) {
         return true;
       }
 
-      const { clientId, clientSecret } = this.model;
-      const isMissingAuthEndpoint = (this.requiresAuthEndpoint && !this.model.authEndpoint);
-      const isMissingScopes = !this.requiredScopes.every((scope) => this.oidcScope.includes(scope));
-
-      if (isMissingAuthEndpoint || isMissingScopes) {
-        return false;
-      }
-
-      // make sure that if SLO options are enabled on radio group, field "endSessionEndpoint" is required
-      if (this.isLogoutAllSupported && this.sloEndSessionEndpointUiEnabled && (!this.model.endSessionEndpoint || !isUrl(this.model.endSessionEndpoint))) {
-        return false;
-      }
-
-      if (this.isAmazonCognito) {
-        const { issuer } = this.model;
-
-        return !!(clientId && clientSecret && issuer);
-      } else if ( !this.customEndpoint.value ) {
-        const { url, realm } = this.oidcUrls;
-
-        return !!(clientId && clientSecret && url && realm);
-      } else {
-        const { rancherUrl, issuer } = this.model;
-
-        return !!(clientId && clientSecret && rancherUrl && issuer);
-      }
-    },
-
-    requiresAuthEndpoint() {
-      return ['genericoidc', 'keycloakoidc'].includes(this.model.id);
-    },
-
-    /**
-     * TODO #13457: Refactor scopes to be an array of terms
-     * Return valid scopes
-     * The scopes for given auth provider (model.id) have format of ['scope1 scope2 scope3']
-     */
-    requiredScopes() {
-      return this.model.id ? (BASE_SCOPES[this.model.id] || []) ? (BASE_SCOPES[this.model.id] || [])[0].split(' ') : [] : [];
-    },
-
-    requiresCert() {
-      // We assume all do, apart from the ones here, which do not
-      return !(['cognito'].includes(this.model.id));
-    },
-
-    supportsGroupSearch() {
-      // We assume all do, apart from the ones here, which do not
-      return !(['cognito'].includes(this.model.id));
-    },
-
-    isAmazonCognito() {
-      return this.model?.id === 'cognito';
-    },
-
-    isGenericOidc() {
-      return this.model?.id === 'genericoidc';
-    },
-
-    isKeycloak() {
-      return this.model?.id === 'keycloakoidc';
-    },
-
-    supportsCustomClaims() {
-      return this.isGenericOidc || this.isKeycloak;
+      return this.isFormValid;
     },
 
     isLogoutAllSupported() {
@@ -180,17 +208,24 @@ export default {
 
       return sloOptionSelected?.label || '';
     },
-
-    sloEndSessionEndpointUiEnabled() {
-      return this.sloType === SLO_OPTION_VALUES.all || this.sloType === SLO_OPTION_VALUES.both;
-    },
   },
 
   watch: {
-    fvFormIsValid(newValue) {
+    validationPassed(newValue) {
       this.$emit('validationChanged', !!newValue);
     },
 
+    'model.id': {
+      handler(newVal) {
+        this.modelId = newVal;
+      },
+      immediate: true,
+    },
+
+    'customEndpoint.value'(v) {
+      this.customEndpointEnabled = v;
+    },
+
     'oidcUrls.url'() {
       this.updateEndpoints();
     },
@@ -228,6 +263,7 @@ export default {
 
     // sloType is defined on shell/mixins/auth-config.js
     sloType(neu) {
+      this.sloTypeRef = neu;
       switch (neu) {
       case SLO_OPTION_VALUES.rancher:
         this.model.logoutAllEnabled = false;
@@ -379,6 +415,7 @@ export default {
           <div class="col span-6">
             <LabeledInput
               v-model:value="model.clientId"
+              name="clientId"
               :label="t(`authConfig.oidc.clientId`)"
               :mode="mode"
               required
@@ -388,6 +425,7 @@ export default {
           <div class="col span-6">
             <LabeledInput
               v-model:value="model.clientSecret"
+              name="clientSecret"
               :label="t(`authConfig.oidc.clientSecret`)"
               :mode="mode"
               required
@@ -528,6 +566,7 @@ export default {
             <div class="col span-6">
               <LabeledInput
                 v-model:value="oidcUrls.url"
+                name="url"
                 :label="t(`authConfig.oidc.url`)"
                 :mode="mode"
                 :required="!customEndpoint.value"
@@ -538,6 +577,7 @@ export default {
             <div class="col span-6">
               <LabeledInput
                 v-model:value="oidcUrls.realm"
+                name="realm"
                 :label="t(`authConfig.oidc.realm`)"
                 :mode="mode"
                 :required="!customEndpoint.value"
@@ -552,6 +592,7 @@ export default {
             <div class="col span-6">
               <LabeledInput
                 v-model:value="model.rancherUrl"
+                name="rancherUrl"
                 :label="t(`authConfig.oidc.rancherUrl`)"
                 :mode="mode"
                 required
@@ -565,6 +606,7 @@ export default {
             <div class="col span-6">
               <LabeledInput
                 v-model:value="model.issuer"
+                name="issuer"
                 :label="t(`authConfig.oidc.issuer`)"
                 :mode="mode"
                 required
@@ -575,6 +617,7 @@ export default {
             <div class="col span-6">
               <LabeledInput
                 v-model:value="model.authEndpoint"
+                name="authEndpoint"
                 :label="t(`authConfig.oidc.authEndpoint`)"
                 :mode="mode"
                 :disabled="!customEndpoint.value"
@@ -635,6 +678,7 @@ export default {
             <div class="col span-6">
               <LabeledInput
                 v-model:value="model.issuer"
+                name="issuer"
                 :label="t(`authConfig.oidc.issuer`)"
                 :mode="mode"
                 required
@@ -649,6 +693,7 @@ export default {
           <div class="col span-6">
             <ArrayList
               v-model:value="oidcScope"
+              name="scope"
               :mode="mode"
               :title="t('authConfig.oidc.scope.label')"
               :value-placeholder="t('authConfig.oidc.scope.placeholder')"
@@ -686,6 +731,7 @@ export default {
             <div class="col span-6">
               <LabeledInput
                 v-model:value="model.endSessionEndpoint"
+                name="endSessionEndpoint"
                 :tooltip="t('authConfig.oidc.endSessionEndpoint.tooltip')"
                 :label="t('authConfig.oidc.endSessionEndpoint.title')"
                 :mode="mode"

package/edit/auth/saml.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 AuthConfig, { SLO_OPTION_VALUES } from '@shell/mixins/auth-config';
@@ -12,6 +17,8 @@ import AuthBanner from '@shell/components/auth/AuthBanner';
 import config, { OKTA, SHIBBOLETH } from '@shell/edit/auth/ldap/config';
 import AuthProviderWarningBanners from '@shell/edit/auth/AuthProviderWarningBanners';
 import RadioGroup from '@components/Form/Radio/RadioGroup.vue';
+import { RcButton } from '@components/RcButton';
+import { useI18n } from '@shell/composables/useI18n';
 
 // Standard LDAP defaults
 const LDAP_DEFAULTS = {
@@ -47,10 +54,48 @@ export default {
     FileSelector,
     config,
     AuthBanner,
-    AuthProviderWarningBanners
+    AuthProviderWarningBanners,
+    RcButton,
   },
 
   mixins: [CreateEditView, AuthConfig],
+
+  setup() {
+    const store = useStore();
+    const { t } = useI18n(store);
+
+    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 validationSchema = computed(() => toTypedSchema(
+      z.object({
+        displayNameField:   requiredField('authConfig.saml.displayName'),
+        userNameField:      requiredField('authConfig.saml.userName'),
+        uidField:           requiredField('authConfig.saml.UID'),
+        groupsField:        requiredField('authConfig.saml.groups'),
+        rancherApiHost:     requiredUrlField('authConfig.saml.api'),
+        spKey:              requiredField('authConfig.saml.key.label'),
+        spCert:             requiredField('authConfig.saml.cert.label'),
+        idpMetadataContent: requiredField('authConfig.saml.metadata.label'),
+      })
+    ));
+
+    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 { isFormValid, validateAllFields };
+  },
+
   data() {
     return {
       showLdap:        false,
@@ -58,7 +103,19 @@ export default {
     };
   },
 
+  created() {
+    this.registerBeforeHook(this.validateAllFields, 'willSave');
+  },
+
   computed: {
+    validationPassed() {
+      if (this.model?.enabled && !this.editConfig) {
+        return true;
+      }
+
+      return this.isFormValid;
+    },
+
     tArgs() {
       return {
         baseUrl:  this.serverSetting,
@@ -152,7 +209,7 @@ export default {
       :mode="mode"
       :resource="model"
       :subtypes="[]"
-      :validation-passed="true"
+      :validation-passed="validationPassed"
       :finish-button-mode="model.enabled ? 'edit' : 'enable'"
       :can-yaml="false"
       :errors="errors"
@@ -193,13 +250,17 @@ export default {
               >
                 <div>{{ t('authConfig.saml.search.on') }}</div>
                 <div>
-                  <a
-                    class="toggle-btn"
+                  <rc-button
+                    variant="link"
                     @click="showLdapDetails = !showLdapDetails"
                   >
-                    <template v-if="showLdapDetails">{{ t('authConfig.saml.search.hide') }}</template>
-                    <template v-else>{{ t('authConfig.saml.search.show') }}</template>
-                  </a>
+                    <template v-if="showLdapDetails">
+                      {{ t('authConfig.saml.search.hide') }}
+                    </template>
+                    <template v-else>
+                      {{ t('authConfig.saml.search.show') }}
+                    </template>
+                  </rc-button>
                 </div>
               </div>
             </Banner>
@@ -244,6 +305,7 @@ export default {
           <div class="col span-6">
             <LabeledInput
               v-model:value="model.displayNameField"
+              name="displayNameField"
               :label="t(`authConfig.saml.displayName`)"
               :mode="mode"
               required
@@ -252,6 +314,7 @@ export default {
           <div class="col span-6">
             <LabeledInput
               v-model:value="model.userNameField"
+              name="userNameField"
               :label="t(`authConfig.saml.userName`)"
               :mode="mode"
               required
@@ -263,6 +326,7 @@ export default {
           <div class="col span-6">
             <LabeledInput
               v-model:value="model.uidField"
+              name="uidField"
               :label="t(`authConfig.saml.UID`)"
               :mode="mode"
               required
@@ -271,6 +335,7 @@ export default {
           <div class="col span-6">
             <LabeledInput
               v-model:value="model.groupsField"
+              name="groupsField"
               :label="t(`authConfig.saml.groups`)"
               :mode="mode"
               required
@@ -292,6 +357,7 @@ export default {
           <div class="col span-6">
             <LabeledInput
               v-model:value="model.rancherApiHost"
+              name="rancherApiHost"
               :label="t(`authConfig.saml.api`)"
               :mode="mode"
               required
@@ -303,6 +369,7 @@ export default {
           <div class="col span-4">
             <LabeledInput
               v-model:value="model.spKey"
+              name="spKey"
               :label="t(`authConfig.saml.key.label`)"
               :placeholder="t(`authConfig.saml.key.placeholder`)"
               :mode="mode"
@@ -319,6 +386,7 @@ export default {
           <div class="col span-4">
             <LabeledInput
               v-model:value="model.spCert"
+              name="spCert"
               :label="t(`authConfig.saml.cert.label`)"
               :placeholder="t(`authConfig.saml.cert.placeholder`)"
               :mode="mode"
@@ -335,6 +403,7 @@ export default {
           <div class="col span-4">
             <LabeledInput
               v-model:value="model.idpMetadataContent"
+              name="idpMetadataContent"
               :label="t(`authConfig.saml.metadata.label`)"
               :placeholder="t(`authConfig.saml.metadata.placeholder`)"
               :mode="mode"
@@ -423,10 +492,5 @@ export default {
     > :first-child {
       flex: 1;
     }
-
-    .toggle-btn {
-      cursor: pointer;
-      user-select: none;
-    }
   }
 </style>