diff options
author | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2020-11-17 20:03:46 +0300 |
---|---|---|
committer | Derick Montague <derick.montague@ibm.com> | 2020-11-28 18:48:41 +0300 |
commit | 1c53659ad1e623a2fa7497a2a3b413f85739b128 (patch) | |
tree | 000e7c171a16a8d70c491391c1317b6ed2e95fda /src/views | |
parent | e080ba7aed41b2baecb16e1a05c8f37963c396f5 (diff) | |
download | webui-vue-1c53659ad1e623a2fa7497a2a3b413f85739b128.tar.xz |
Fix LDAP accessibility violations
- Fixed "<fieldset> element does not have a <legend>" by removing
a label-for prop
- Fixed "Form control has more than one label" by removing a wrapper
<b-form-group> that disabled controls while the page was loading
- Existing table violations to be addressed separately
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I7c90f361cc982b54ddd2b7893ba65b2e5489f5cd
Diffstat (limited to 'src/views')
-rw-r--r-- | src/views/AccessControl/Ldap/Ldap.vue | 404 |
1 files changed, 201 insertions, 203 deletions
diff --git a/src/views/AccessControl/Ldap/Ldap.vue b/src/views/AccessControl/Ldap/Ldap.vue index 27172019..9e32adaf 100644 --- a/src/views/AccessControl/Ldap/Ldap.vue +++ b/src/views/AccessControl/Ldap/Ldap.vue @@ -3,224 +3,222 @@ <page-title :description="$t('pageLdap.pageDescription')" /> <page-section :section-title="$t('pageLdap.settings')"> <b-form novalidate @submit.prevent="handleSubmit"> - <b-form-group :disabled="loading"> - <b-row> - <b-col> - <b-form-group - class="mb-3" - :label="$t('pageLdap.form.ldapAuthentication')" - label-for="enable-ldap-auth" - > - <b-form-checkbox - id="enable-ldap-auth" - v-model="form.ldapAuthenticationEnabled" - data-test-id="ldap-checkbox-ldapAuthenticationEnabled" - @change="onChangeldapAuthenticationEnabled" - > - {{ $t('global.action.enable') }} - </b-form-checkbox> - </b-form-group> - </b-col> - </b-row> - <div class="form-background p-3"> + <b-row> + <b-col> <b-form-group - class="m-0" - :label="$t('pageLdap.ariaLabel.ldapSettings')" - label-class="sr-only" - :disabled="!form.ldapAuthenticationEnabled" + class="mb-3" + :label="$t('pageLdap.form.ldapAuthentication')" + :disabled="loading" > - <b-row> - <b-col md="3" lg="4" xl="3"> - <b-form-group - class="mb-4" - :label="$t('pageLdap.form.secureLdapUsingSsl')" - > - <b-form-text id="enable-secure-help-block"> - {{ $t('pageLdap.form.secureLdapHelper') }} - </b-form-text> - <b-form-checkbox - id="enable-secure-ldap" - v-model="form.secureLdapEnabled" - aria-describedby="enable-secure-help-block" - data-test-id="ldap-checkbox-secureLdapEnabled" - :disabled=" - !caCertificateExpiration || !ldapCertificateExpiration - " - @change="$v.form.secureLdapEnabled.$touch()" - > - {{ $t('global.action.enable') }} - </b-form-checkbox> - </b-form-group> - <dl> - <dt>{{ $t('pageLdap.form.caCertificateValidUntil') }}</dt> - <dd v-if="caCertificateExpiration"> - {{ caCertificateExpiration | formatDate }} - </dd> - <dd v-else>--</dd> - <dt>{{ $t('pageLdap.form.ldapCertificateValidUntil') }}</dt> - <dd v-if="ldapCertificateExpiration"> - {{ ldapCertificateExpiration | formatDate }} - </dd> - <dd v-else>--</dd> - </dl> - <b-link - class="d-inline-block mb-4 m-md-0" - to="/access-control/ssl-certificates" + <b-form-checkbox + v-model="form.ldapAuthenticationEnabled" + data-test-id="ldap-checkbox-ldapAuthenticationEnabled" + @change="onChangeldapAuthenticationEnabled" + > + {{ $t('global.action.enable') }} + </b-form-checkbox> + </b-form-group> + </b-col> + </b-row> + <div class="form-background p-3"> + <b-form-group + class="m-0" + :label="$t('pageLdap.ariaLabel.ldapSettings')" + label-class="sr-only" + :disabled="!form.ldapAuthenticationEnabled || loading" + > + <b-row> + <b-col md="3" lg="4" xl="3"> + <b-form-group + class="mb-4" + :label="$t('pageLdap.form.secureLdapUsingSsl')" + > + <b-form-text id="enable-secure-help-block"> + {{ $t('pageLdap.form.secureLdapHelper') }} + </b-form-text> + <b-form-checkbox + id="enable-secure-ldap" + v-model="form.secureLdapEnabled" + aria-describedby="enable-secure-help-block" + data-test-id="ldap-checkbox-secureLdapEnabled" + :disabled=" + !caCertificateExpiration || !ldapCertificateExpiration + " + @change="$v.form.secureLdapEnabled.$touch()" > - {{ $t('pageLdap.form.manageSslCertificates') }} - </b-link> - </b-col> - <b-col md="9" lg="8" xl="9"> - <b-row> - <b-col> - <b-form-group :label="$t('pageLdap.form.serviceType')"> - <b-form-radio - v-model="form.activeDirectoryEnabled" - data-test-id="ldap-radio-activeDirectoryEnabled" - :value="false" - @change="onChangeServiceType" - > - OpenLDAP - </b-form-radio> - <b-form-radio - v-model="form.activeDirectoryEnabled" - data-test-id="ldap-radio-activeDirectoryEnabled" - :value="true" - @change="onChangeServiceType" - > - Active Directory - </b-form-radio> - </b-form-group> - </b-col> - </b-row> - <b-row> - <b-col sm="6" xl="4"> - <b-form-group label-for="server-uri"> - <template #label> - {{ $t('pageLdap.form.serverUri') }} - <info-tooltip - :title="$t('pageLdap.form.serverUriTooltip')" - /> - </template> - <b-input-group :prepend="ldapProtocol"> - <b-form-input - id="server-uri" - v-model="form.serverUri" - data-test-id="ldap-input-serverUri" - :state="getValidationState($v.form.serverUri)" - @change="$v.form.serverUri.$touch()" - /> - <b-form-invalid-feedback role="alert"> - {{ $t('global.form.fieldRequired') }} - </b-form-invalid-feedback> - </b-input-group> - </b-form-group> - </b-col> - <b-col sm="6" xl="4"> - <b-form-group - :label="$t('pageLdap.form.bindDn')" - label-for="bind-dn" + {{ $t('global.action.enable') }} + </b-form-checkbox> + </b-form-group> + <dl> + <dt>{{ $t('pageLdap.form.caCertificateValidUntil') }}</dt> + <dd v-if="caCertificateExpiration"> + {{ caCertificateExpiration | formatDate }} + </dd> + <dd v-else>--</dd> + <dt>{{ $t('pageLdap.form.ldapCertificateValidUntil') }}</dt> + <dd v-if="ldapCertificateExpiration"> + {{ ldapCertificateExpiration | formatDate }} + </dd> + <dd v-else>--</dd> + </dl> + <b-link + class="d-inline-block mb-4 m-md-0" + to="/access-control/ssl-certificates" + > + {{ $t('pageLdap.form.manageSslCertificates') }} + </b-link> + </b-col> + <b-col md="9" lg="8" xl="9"> + <b-row> + <b-col> + <b-form-group :label="$t('pageLdap.form.serviceType')"> + <b-form-radio + v-model="form.activeDirectoryEnabled" + data-test-id="ldap-radio-activeDirectoryEnabled" + :value="false" + @change="onChangeServiceType" + > + OpenLDAP + </b-form-radio> + <b-form-radio + v-model="form.activeDirectoryEnabled" + data-test-id="ldap-radio-activeDirectoryEnabled" + :value="true" + @change="onChangeServiceType" > + Active Directory + </b-form-radio> + </b-form-group> + </b-col> + </b-row> + <b-row> + <b-col sm="6" xl="4"> + <b-form-group label-for="server-uri"> + <template #label> + {{ $t('pageLdap.form.serverUri') }} + <info-tooltip + :title="$t('pageLdap.form.serverUriTooltip')" + /> + </template> + <b-input-group :prepend="ldapProtocol"> <b-form-input - id="bind-dn" - v-model="form.bindDn" - data-test-id="ldap-input-bindDn" - :state="getValidationState($v.form.bindDn)" - @change="$v.form.bindDn.$touch()" + id="server-uri" + v-model="form.serverUri" + data-test-id="ldap-input-serverUri" + :state="getValidationState($v.form.serverUri)" + @change="$v.form.serverUri.$touch()" /> <b-form-invalid-feedback role="alert"> {{ $t('global.form.fieldRequired') }} </b-form-invalid-feedback> - </b-form-group> - </b-col> - <b-col sm="6" xl="4"> - <b-form-group - :label="$t('pageLdap.form.bindPassword')" - label-for="bind-password" - > - <input-password-toggle - data-test-id="ldap-input-togglePassword" - > - <b-form-input - id="bind-password" - v-model="form.bindPassword" - type="password" - :state="getValidationState($v.form.bindPassword)" - class="form-control-with-button" - @change="$v.form.bindPassword.$touch()" - /> - <b-form-invalid-feedback role="alert"> - {{ $t('global.form.fieldRequired') }} - </b-form-invalid-feedback> - </input-password-toggle> - </b-form-group> - </b-col> - <b-col sm="6" xl="4"> - <b-form-group - :label="$t('pageLdap.form.baseDn')" - label-for="base-dn" + </b-input-group> + </b-form-group> + </b-col> + <b-col sm="6" xl="4"> + <b-form-group + :label="$t('pageLdap.form.bindDn')" + label-for="bind-dn" + > + <b-form-input + id="bind-dn" + v-model="form.bindDn" + data-test-id="ldap-input-bindDn" + :state="getValidationState($v.form.bindDn)" + @change="$v.form.bindDn.$touch()" + /> + <b-form-invalid-feedback role="alert"> + {{ $t('global.form.fieldRequired') }} + </b-form-invalid-feedback> + </b-form-group> + </b-col> + <b-col sm="6" xl="4"> + <b-form-group + :label="$t('pageLdap.form.bindPassword')" + label-for="bind-password" + > + <input-password-toggle + data-test-id="ldap-input-togglePassword" > <b-form-input - id="base-dn" - v-model="form.baseDn" - data-test-id="ldap-input-baseDn" - :state="getValidationState($v.form.baseDn)" - @change="$v.form.baseDn.$touch()" + id="bind-password" + v-model="form.bindPassword" + type="password" + :state="getValidationState($v.form.bindPassword)" + class="form-control-with-button" + @change="$v.form.bindPassword.$touch()" /> <b-form-invalid-feedback role="alert"> {{ $t('global.form.fieldRequired') }} </b-form-invalid-feedback> - </b-form-group> - </b-col> - <b-col sm="6" xl="4"> - <b-form-group label-for="user-id-attribute"> - <template #label> - {{ $t('pageLdap.form.userIdAttribute') }} - - <span class="form-text d-inline"> - {{ $t('global.form.optional') }} - </span> - </template> - <b-form-input - id="user-id-attribute" - v-model="form.userIdAttribute" - data-test-id="ldap-input-userIdAttribute" - @change="$v.form.userIdAttribute.$touch()" - /> - </b-form-group> - </b-col> - <b-col sm="6" xl="4"> - <b-form-group label-for="group-id-attribute"> - <template #label> - {{ $t('pageLdap.form.groupIdAttribute') }} - - <span class="form-text d-inline"> - {{ $t('global.form.optional') }} - </span> - </template> - <b-form-input - id="group-id-attribute" - v-model="form.groupIdAttribute" - data-test-id="ldap-input-groupIdAttribute" - @change="$v.form.groupIdAttribute.$touch()" - /> - </b-form-group> - </b-col> - </b-row> - </b-col> - </b-row> - </b-form-group> - </div> - <b-row class="mt-4 mb-5"> - <b-col> - <b-btn - variant="primary" - type="submit" - data-test-id="ldap-button-saveSettings" - > - {{ $t('global.action.saveSettings') }} - </b-btn> - </b-col> - </b-row> - </b-form-group> + </input-password-toggle> + </b-form-group> + </b-col> + <b-col sm="6" xl="4"> + <b-form-group + :label="$t('pageLdap.form.baseDn')" + label-for="base-dn" + > + <b-form-input + id="base-dn" + v-model="form.baseDn" + data-test-id="ldap-input-baseDn" + :state="getValidationState($v.form.baseDn)" + @change="$v.form.baseDn.$touch()" + /> + <b-form-invalid-feedback role="alert"> + {{ $t('global.form.fieldRequired') }} + </b-form-invalid-feedback> + </b-form-group> + </b-col> + <b-col sm="6" xl="4"> + <b-form-group label-for="user-id-attribute"> + <template #label> + {{ $t('pageLdap.form.userIdAttribute') }} - + <span class="form-text d-inline"> + {{ $t('global.form.optional') }} + </span> + </template> + <b-form-input + id="user-id-attribute" + v-model="form.userIdAttribute" + data-test-id="ldap-input-userIdAttribute" + @change="$v.form.userIdAttribute.$touch()" + /> + </b-form-group> + </b-col> + <b-col sm="6" xl="4"> + <b-form-group label-for="group-id-attribute"> + <template #label> + {{ $t('pageLdap.form.groupIdAttribute') }} - + <span class="form-text d-inline"> + {{ $t('global.form.optional') }} + </span> + </template> + <b-form-input + id="group-id-attribute" + v-model="form.groupIdAttribute" + data-test-id="ldap-input-groupIdAttribute" + @change="$v.form.groupIdAttribute.$touch()" + /> + </b-form-group> + </b-col> + </b-row> + </b-col> + </b-row> + </b-form-group> + </div> + <b-row class="mt-4 mb-5"> + <b-col> + <b-btn + variant="primary" + type="submit" + data-test-id="ldap-button-saveSettings" + :disabled="loading" + > + {{ $t('global.action.saveSettings') }} + </b-btn> + </b-col> + </b-row> </b-form> </page-section> |