diff options
author | Anna Tsyganova <ATSyganova@IBS.RU> | 2022-08-15 17:10:31 +0300 |
---|---|---|
committer | Anna Tsyganova <ATSyganova@IBS.RU> | 2022-08-15 17:10:31 +0300 |
commit | 80b4c8a8df24c5784d0c4c186816d16452f288f8 (patch) | |
tree | 695612a4b80a89451ae801eb6ee95c56ce4ea568 /src/views | |
parent | 8f2890845f7be3b4aaf40eb6cd12f51bc6604fcd (diff) | |
download | webui-vue-80b4c8a8df24c5784d0c4c186816d16452f288f8.tar.xz |
SILABMC-240: fix fields in modal
Diffstat (limited to 'src/views')
-rw-r--r-- | src/views/_sila/SecurityAndAccess/UserManagement/ModalSettings.vue | 2 | ||||
-rw-r--r-- | src/views/_sila/SecurityAndAccess/UserManagement/ModalUser.vue | 209 |
2 files changed, 110 insertions, 101 deletions
diff --git a/src/views/_sila/SecurityAndAccess/UserManagement/ModalSettings.vue b/src/views/_sila/SecurityAndAccess/UserManagement/ModalSettings.vue index 2bea7177..6c72d5e4 100644 --- a/src/views/_sila/SecurityAndAccess/UserManagement/ModalSettings.vue +++ b/src/views/_sila/SecurityAndAccess/UserManagement/ModalSettings.vue @@ -75,7 +75,7 @@ > {{ $t('pageUserManagement.modal.automaticAfterTimeout') }} </b-form-radio> - <div class="mt-3"> + <div class="mt-3 ml-4"> <b-form-text id="lockout-duration-help-block"> {{ $t('pageUserManagement.modal.timeoutDurationSeconds') diff --git a/src/views/_sila/SecurityAndAccess/UserManagement/ModalUser.vue b/src/views/_sila/SecurityAndAccess/UserManagement/ModalUser.vue index ede4a833..7fbc0cf1 100644 --- a/src/views/_sila/SecurityAndAccess/UserManagement/ModalUser.vue +++ b/src/views/_sila/SecurityAndAccess/UserManagement/ModalUser.vue @@ -95,117 +95,126 @@ </b-col> </b-row> <b-row> - <b-form-group label-for="username" style="width: 100%"> - <template #label> - {{ $t('pageUserManagement.modal.username') }} - <info-tooltip - :title=" - $t( - 'pageUserManagement.modal.noSpecialCharactersExceptUnderscore' - ) - " - /> - </template> - <b-form-text id="username-help-block"> - {{ $t('pageUserManagement.modal.cannotStartWithANumber') }} - <br /> - </b-form-text> - - <b-form-input - id="username" - v-model="form.username" - type="text" - aria-describedby="username-help-block" - data-test-id="userManagement-input-username" - :state="getValidationState($v.form.username)" - :disabled="!newUser && originalUsername === 'root'" - @input="$v.form.username.$touch()" - /> - <b-form-invalid-feedback role="alert"> - <template v-if="!$v.form.username.required"> - {{ $t('global.form.fieldRequired') }} - </template> - <template v-else-if="!$v.form.username.maxLength"> - {{ $t('global.form.lengthMustBeBetween', { min: 1, max: 16 }) }} - </template> - <template v-else-if="!$v.form.username.pattern"> - {{ $t('global.form.invalidFormat') }} + <b-col lg="12"> + <b-form-group label-for="username" style="width: 100%"> + <template #label> + {{ $t('pageUserManagement.modal.username') }} + <info-tooltip + :title=" + $t( + 'pageUserManagement.modal.noSpecialCharactersExceptUnderscore' + ) + " + /> </template> - </b-form-invalid-feedback> - </b-form-group> - </b-row> - <b-row> - <b-form-group - :label="$t('pageUserManagement.modal.userPassword')" - label-for="password" - style="width: 100%" - > - <b-form-text id="password-help-block"> - {{ - $t('pageUserManagement.modal.passwordMustBeBetween', { - min: passwordRequirements.minLength, - max: passwordRequirements.maxLength, - }) - }} - </b-form-text> - <input-password-toggle> + <b-form-text id="username-help-block"> + {{ $t('pageUserManagement.modal.cannotStartWithANumber') }} + <br /> + </b-form-text> + <b-form-input - id="password" - v-model="form.password" - type="password" - data-test-id="userManagement-input-password" - aria-describedby="password-help-block" - :state="getValidationState($v.form.password)" - class="form-control-with-button" - @input="$v.form.password.$touch()" + id="username" + v-model="form.username" + type="text" + aria-describedby="username-help-block" + data-test-id="userManagement-input-username" + :state="getValidationState($v.form.username)" + :disabled="!newUser && originalUsername === 'root'" + @input="$v.form.username.$touch()" /> <b-form-invalid-feedback role="alert"> - <template v-if="!$v.form.password.required"> + <template v-if="!$v.form.username.required"> {{ $t('global.form.fieldRequired') }} </template> - <template - v-if=" - !$v.form.password.minLength || !$v.form.password.maxLength - " - > + <template v-else-if="!$v.form.username.maxLength"> {{ - $t('pageUserManagement.modal.passwordMustBeBetween', { - min: passwordRequirements.minLength, - max: passwordRequirements.maxLength, - }) + $t('global.form.lengthMustBeBetween', { min: 1, max: 16 }) }} </template> - </b-form-invalid-feedback> - </input-password-toggle> - </b-form-group> </b-row - ><b-row> - <b-form-group - :label="$t('pageUserManagement.modal.confirmUserPassword')" - label-for="password-confirmation" - style="width: 100%" - > - <input-password-toggle> - <b-form-input - id="password-confirmation" - v-model="form.passwordConfirmation" - data-test-id="userManagement-input-passwordConfirmation" - type="password" - :state="getValidationState($v.form.passwordConfirmation)" - class="form-control-with-button" - @input="$v.form.passwordConfirmation.$touch()" - /> - <b-form-invalid-feedback role="alert"> - <template v-if="!$v.form.passwordConfirmation.required"> - {{ $t('global.form.fieldRequired') }} - </template> - <template - v-else-if="!$v.form.passwordConfirmation.sameAsPassword" - > - {{ $t('pageUserManagement.modal.passwordsDoNotMatch') }} + <template v-else-if="!$v.form.username.pattern"> + {{ $t('global.form.invalidFormat') }} </template> </b-form-invalid-feedback> - </input-password-toggle> - </b-form-group> + </b-form-group> + </b-col> + </b-row> + <b-row> + <b-col lg="12"> + <b-form-group + :label="$t('pageUserManagement.modal.userPassword')" + label-for="password" + style="width: 100%" + > + <b-form-text id="password-help-block"> + {{ + $t('pageUserManagement.modal.passwordMustBeBetween', { + min: passwordRequirements.minLength, + max: passwordRequirements.maxLength, + }) + }} + </b-form-text> + <input-password-toggle> + <b-form-input + id="password" + v-model="form.password" + type="password" + data-test-id="userManagement-input-password" + aria-describedby="password-help-block" + :state="getValidationState($v.form.password)" + class="form-control-with-button" + @input="$v.form.password.$touch()" + /> + <b-form-invalid-feedback role="alert"> + <template v-if="!$v.form.password.required"> + {{ $t('global.form.fieldRequired') }} + </template> + <template + v-if=" + !$v.form.password.minLength || !$v.form.password.maxLength + " + > + {{ + $t('pageUserManagement.modal.passwordMustBeBetween', { + min: passwordRequirements.minLength, + max: passwordRequirements.maxLength, + }) + }} + </template> + </b-form-invalid-feedback> + </input-password-toggle> + </b-form-group> + </b-col> + </b-row> + <b-row> + <b-col lg="12"> + <b-form-group + :label="$t('pageUserManagement.modal.confirmUserPassword')" + label-for="password-confirmation" + style="width: 100%" + > + <input-password-toggle> + <b-form-input + id="password-confirmation" + v-model="form.passwordConfirmation" + data-test-id="userManagement-input-passwordConfirmation" + type="password" + :state="getValidationState($v.form.passwordConfirmation)" + class="form-control-with-button" + @input="$v.form.passwordConfirmation.$touch()" + /> + <b-form-invalid-feedback role="alert"> + <template v-if="!$v.form.passwordConfirmation.required"> + {{ $t('global.form.fieldRequired') }} + </template> + <template + v-else-if="!$v.form.passwordConfirmation.sameAsPassword" + > + {{ $t('pageUserManagement.modal.passwordsDoNotMatch') }} + </template> + </b-form-invalid-feedback> + </input-password-toggle> + </b-form-group> + </b-col> </b-row> </b-container> </b-form> |