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

package/edit/auth/ldap/__tests__/index.test.ts

@@ -0,0 +1,206 @@
+import { nextTick } from 'vue';
+import { mount, type VueWrapper, flushPromises } from '@vue/test-utils';
+import { _EDIT } from '@shell/config/query-params';
+
+import LDAPIndex from '@shell/edit/auth/ldap/index.vue';
+
+jest.mock('@shell/utils/clipboard', () => {
+  return { copyTextToClipboard: jest.fn(() => Promise.resolve({})) };
+});
+
+const validOpenLdapModel = {
+  enabled:                         false,
+  servers:                         ['ldap.example.com'],
+  port:                            389,
+  connectionTimeout:               5000,
+  serviceAccountDistinguishedName: 'cn=admin,dc=example,dc=com',
+  serviceAccountPassword:          'secretpassword',
+  userSearchBase:                  'dc=example,dc=com',
+};
+
+const validActiveDirectoryModel = {
+  enabled:                false,
+  servers:                ['ad.example.com'],
+  port:                   389,
+  connectionTimeout:      5000,
+  serviceAccountUsername: 'DOMAIN\\admin',
+  serviceAccountPassword: 'secretpassword',
+  userSearchBase:         'dc=example,dc=com',
+};
+
+const validUsername = 'testuser';
+const validPassword = 'testpassword';
+
+const buildSetup = (type = 'openldap', modelOverride = {}, localDataOverride = {}) => ({
+  data() {
+    const baseModel = type === 'activedirectory' ? validActiveDirectoryModel : validOpenLdapModel;
+
+    return {
+      isEnabling:     false,
+      editConfig:     false,
+      model:          { ...baseModel, ...modelOverride },
+      username:       validUsername,
+      password:       validPassword,
+      errors:         [],
+      serverSetting:  null,
+      originalModel:  null,
+      principals:     [],
+      authConfigName: type,
+      ...localDataOverride,
+    } as any;
+  },
+  global: {
+    mocks: {
+      $fetchState: { pending: false },
+      $store:      {
+        getters: {
+          currentStore:              () => 'current_store',
+          'current_store/schemaFor': jest.fn(),
+          'current_store/all':       jest.fn(),
+          'i18n/t':                  (val: string) => val,
+          'i18n/exists':             jest.fn(),
+        },
+        dispatch: jest.fn()
+      },
+      $route:  { query: { AS: '' }, params: { id: type } },
+      $router: { applyQuery: jest.fn() },
+    },
+  },
+  props: {
+    value: { ...validOpenLdapModel, ...modelOverride },
+    mode:  _EDIT,
+  },
+});
+
+const mountAndValidate = async(type: string, modelOverride = {}, localDataOverride = {}) => {
+  const wrapper = mount(LDAPIndex, buildSetup(type, modelOverride, localDataOverride));
+
+  await wrapper.vm.validateAllFields();
+  await flushPromises();
+
+  return wrapper;
+};
+
+describe('ldap/index.vue', () => {
+  describe('given default valid values (openldap)', () => {
+    let wrapper: VueWrapper<any, any>;
+
+    beforeEach(() => {
+      wrapper = mount(LDAPIndex, buildSetup());
+    });
+
+    afterEach(() => {
+      wrapper.unmount();
+    });
+
+    it('has "Enable" button enabled when all required fields are filled', async() => {
+      await nextTick();
+
+      const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+
+      expect(saveButton.disabled).toBe(false);
+    });
+
+    it('has "Enable" button enabled when provider is already enabled and not editing config', async() => {
+      wrapper.setData({ model: { ...validOpenLdapModel, enabled: true }, editConfig: false });
+      await nextTick();
+
+      const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+
+      expect(saveButton.disabled).toBe(false);
+    });
+  });
+
+  describe('have "Enable" button disabled when required fields are empty', () => {
+    it.each([
+      ['username', { username: '', password: validPassword }],
+      ['password', { username: validUsername, password: '' }],
+    ])('given empty %s (test credentials)', async(field, localData) => {
+      const wrapper = await mountAndValidate('openldap', {}, localData);
+      const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+
+      expect(saveButton.disabled).toBe(true);
+      wrapper.unmount();
+    });
+
+    it.each([
+      ['serviceAccountDistinguishedName', { serviceAccountDistinguishedName: '' }],
+      ['serviceAccountPassword', { serviceAccountPassword: '' }],
+      ['userSearchBase', { userSearchBase: '' }],
+    ])('given empty %s (config field)', async(field, modelOverride) => {
+      const wrapper = await mountAndValidate('openldap', modelOverride);
+      const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+
+      expect(saveButton.disabled).toBe(true);
+      wrapper.unmount();
+    });
+  });
+
+  describe('certificate conditional validation', () => {
+    it('is not required when TLS and STARTTLS are disabled', async() => {
+      const wrapper = await mountAndValidate('openldap', { tls: false, starttls: false });
+
+      const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+
+      expect(saveButton.disabled).toBe(false);
+      wrapper.unmount();
+    });
+
+    it('is required and causes button disabled when TLS is enabled and certificate is empty', async() => {
+      const wrapper = await mountAndValidate('openldap', {
+        tls:         true,
+        starttls:    false,
+        certificate: '',
+      });
+
+      const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+
+      expect(saveButton.disabled).toBe(true);
+      wrapper.unmount();
+    });
+
+    it('button is enabled when TLS is enabled and certificate is provided', async() => {
+      const wrapper = mount(LDAPIndex, buildSetup('openldap', {
+        tls:         true,
+        starttls:    false,
+        certificate: '-----BEGIN CERTIFICATE-----\nMIIB\n-----END CERTIFICATE-----',
+      }));
+
+      await nextTick();
+
+      const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+
+      expect(saveButton.disabled).toBe(false);
+      wrapper.unmount();
+    });
+  });
+
+  describe('service account field conditional validation', () => {
+    it('requires serviceAccountDistinguishedName for openldap when empty', async() => {
+      const wrapper = await mountAndValidate('openldap', { serviceAccountDistinguishedName: '' });
+      const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+
+      expect(saveButton.disabled).toBe(true);
+      wrapper.unmount();
+    });
+
+    it('requires serviceAccountUsername for activedirectory when empty', async() => {
+      const wrapper = await mountAndValidate('activedirectory', { serviceAccountUsername: '' });
+      const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+
+      expect(saveButton.disabled).toBe(true);
+      wrapper.unmount();
+    });
+
+    it('button is enabled for activedirectory when serviceAccountUsername is provided', async() => {
+      const wrapper = mount(LDAPIndex, buildSetup('activedirectory'));
+
+      await nextTick();
+
+      const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+
+      expect(saveButton.disabled).toBe(false);
+      wrapper.unmount();
+    });
+  });
+});

package/edit/auth/ldap/config.vue

@@ -110,6 +110,7 @@ export default {
       <div class="col span-6">
         <LabeledInput
           v-model:value="hostname"
+          name="hostname"
           required
           :mode="mode"
           :hoover-tooltip="true"
@@ -121,6 +122,7 @@ export default {
       <div class="col span-4">
         <LabeledInput
           :value="model.port"
+          name="port"
           type="number"
           required
           :min="0"
@@ -156,6 +158,7 @@ export default {
       <div class="col span-12">
         <LabeledInput
           v-model:value="model.certificate"
+          name="certificate"
           required
           type="multiline"
           :mode="mode"
@@ -173,6 +176,7 @@ export default {
       <div class="col span-6">
         <UnitInput
           v-model:value="model.connectionTimeout"
+          name="connectionTimeout"
           required
           :mode="mode"
           :label="t('authConfig.ldap.serverConnectionTimeout')"
@@ -191,6 +195,7 @@ export default {
       >
         <LabeledInput
           v-model:value="model.serviceAccountUsername"
+          name="serviceAccountUsername"
           required
           :mode="mode"
           :label="t('authConfig.ldap.serviceAccountDN')"
@@ -203,6 +208,7 @@ export default {
       >
         <LabeledInput
           v-model:value="model.serviceAccountDistinguishedName"
+          name="serviceAccountDistinguishedName"
           required
           :mode="mode"
           :label="t('authConfig.ldap.serviceAccountDN')"
@@ -211,6 +217,7 @@ export default {
       <div class="col span-6">
         <LabeledInput
           v-model:value="model.serviceAccountPassword"
+          name="serviceAccountPassword"
           required
           type="password"
           :mode="mode"
@@ -254,6 +261,7 @@ export default {
       <div class="col span-6">
         <LabeledInput
           v-model:value="model.userSearchBase"
+          name="userSearchBase"
           required
           :mode="mode"
           :label="t('authConfig.ldap.userSearchBase.label')"

package/edit/auth/ldap/index.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';
@@ -9,6 +14,7 @@ import AuthConfig from '@shell/mixins/auth-config';
 import AuthBanner from '@shell/components/auth/AuthBanner';
 import Password from '@shell/components/form/Password';
 import AuthProviderWarningBanners from '@shell/edit/auth/AuthProviderWarningBanners';
+import { useI18n } from '@shell/composables/useI18n';
 
 const AUTH_TYPE = 'ldap';
 
@@ -26,6 +32,49 @@ export default {
 
   mixins: [CreateEditView, AuthConfig],
 
+  setup() {
+    const store = useStore();
+    const { t } = useI18n(store);
+
+    const coerce = (schema) => z.preprocess((v) => (v === null || v === undefined) ? '' : String(v), schema);
+    const requiredField = (key) => coerce(z.string().min(1, t('validation.required', { key: t(key) })));
+    const optionalField = coerce(z.string());
+
+    const tlsEnabledRef = ref(false);
+    const isActiveDirectoryRef = ref(false);
+
+    const validationSchema = computed(() => toTypedSchema(
+      z.object({
+        hostname:                        requiredField('authConfig.ldap.hostname.label'),
+        port:                            requiredField('authConfig.ldap.port'),
+        certificate:                     tlsEnabledRef.value ? requiredField('authConfig.ldap.cert') : optionalField,
+        connectionTimeout:               requiredField('authConfig.ldap.serverConnectionTimeout'),
+        serviceAccountUsername:          isActiveDirectoryRef.value ? requiredField('authConfig.ldap.serviceAccountDN') : optionalField,
+        serviceAccountDistinguishedName: !isActiveDirectoryRef.value ? requiredField('authConfig.ldap.serviceAccountDN') : optionalField,
+        serviceAccountPassword:          requiredField('authConfig.ldap.serviceAccountPassword'),
+        userSearchBase:                  requiredField('authConfig.ldap.userSearchBase.label'),
+        username:                        requiredField(`authConfig.${ AUTH_TYPE }.username`),
+        password:                        requiredField(`authConfig.${ AUTH_TYPE }.password`),
+      })
+    ));
+
+    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, tlsEnabledRef, isActiveDirectoryRef
+    };
+  },
+
   data() {
     return {
       username: null,
@@ -33,7 +82,21 @@ export default {
     };
   },
 
+  created() {
+    this.tlsEnabledRef = !!(this.model?.tls || this.model?.starttls);
+    this.isActiveDirectoryRef = this.NAME === 'activedirectory';
+    this.registerBeforeHook(this.validateAllFields, 'willSave');
+  },
+
   computed: {
+    validationPassed() {
+      if (this.model?.enabled && !this.editConfig) {
+        return true;
+      }
+
+      return this.isFormValid;
+    },
+
     tArgs() {
       return {
         provider: this.displayName,
@@ -66,6 +129,15 @@ export default {
     },
   },
 
+  watch: {
+    'model.tls'(neu) {
+      this.tlsEnabledRef = !!(neu || this.model?.starttls);
+    },
+    'model.starttls'(neu) {
+      this.tlsEnabledRef = !!(this.model?.tls || neu);
+    },
+  },
+
 };
 </script>
 
@@ -78,7 +150,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"
@@ -126,6 +198,7 @@ export default {
           <div class="col span-6">
             <LabeledInput
               v-model:value="username"
+              name="username"
               :label="t(`authConfig.${AUTH_TYPE}.username`)"
               :mode="mode"
               required
@@ -134,6 +207,7 @@ export default {
           <div class="col span-6">
             <Password
               v-model:value="password"
+              name="password"
               :label="t(`authConfig.${AUTH_TYPE}.password`)"
               :mode="mode"
               required

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 { isValidUrl } from '@shell/utils/validators/setting';
+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 || !isValidUrl(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"