diff options
author | Maksim Zakharov <m.zakharov@IBS.RU> | 2022-08-12 12:11:42 +0300 |
---|---|---|
committer | Maksim Zakharov <m.zakharov@IBS.RU> | 2022-08-12 12:11:42 +0300 |
commit | 24f3ff1f05fd624abe636805c6bb9e1643f1f336 (patch) | |
tree | ecf99688283e53d1d91c241b3a520e0b61f87764 | |
parent | 24d03b89a00c5cf1e873d12a86cee12974b60af1 (diff) | |
download | webui-vue-24f3ff1f05fd624abe636805c6bb9e1643f1f336.tar.xz |
fix user modal layout
-rw-r--r-- | src/views/_sila/SecurityAndAccess/UserManagement/ModalUser.vue | 234 |
1 files changed, 124 insertions, 110 deletions
diff --git a/src/views/_sila/SecurityAndAccess/UserManagement/ModalUser.vue b/src/views/_sila/SecurityAndAccess/UserManagement/ModalUser.vue index c7aa56bb..ede4a833 100644 --- a/src/views/_sila/SecurityAndAccess/UserManagement/ModalUser.vue +++ b/src/views/_sila/SecurityAndAccess/UserManagement/ModalUser.vue @@ -8,7 +8,12 @@ {{ $t('pageUserManagement.editUser') }} </template> </template> - <b-form id="form-user" novalidate @submit.prevent="handleSubmit"> + <b-form + id="form-user" + style="width: 100%" + novalidate + @submit.prevent="handleSubmit" + > <b-container> <!-- Manual unlock form control --> <b-row v-if="!newUser && manualUnlockPolicy && user.Locked"> @@ -40,7 +45,7 @@ </b-col> </b-row> <b-row> - <b-col> + <b-col xs="6"> <b-form-group :label="$t('pageUserManagement.modal.accountStatus')"> <b-form-radio v-model="form.status" @@ -61,43 +66,8 @@ {{ $t('global.status.disabled') }} </b-form-radio> </b-form-group> - <b-form-group - :label="$t('pageUserManagement.modal.username')" - label-for="username" - > - <b-form-text id="username-help-block"> - {{ $t('pageUserManagement.modal.cannotStartWithANumber') }} - <br /> - {{ - $t( - 'pageUserManagement.modal.noSpecialCharactersExceptUnderscore' - ) - }} - </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') }} - </template> - </b-form-invalid-feedback> - </b-form-group> + </b-col> + <b-col xs="6"> <b-form-group :label="$t('pageUserManagement.modal.privilege')" label-for="privilege" @@ -123,76 +93,119 @@ </b-form-invalid-feedback> </b-form-group> </b-col> - <b-col> - <b-form-group - :label="$t('pageUserManagement.modal.userPassword')" - label-for="password" - > - <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-form-group - :label="$t('pageUserManagement.modal.confirmUserPassword')" - label-for="password-confirmation" - > - <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-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') }} + </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-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-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> + </b-form-invalid-feedback> + </input-password-toggle> + </b-form-group> </b-row> </b-container> </b-form> @@ -234,9 +247,10 @@ import { import VuelidateMixin from '@/components/_sila/Mixins/VuelidateMixin.js'; import InputPasswordToggle from '@/components/_sila/Global/InputPasswordToggle'; import Alert from '@/components/_sila/Global/Alert'; +import InfoTooltip from '@/components/_sila/Global/InfoTooltip'; export default { - components: { Alert, InputPasswordToggle }, + components: { Alert, InputPasswordToggle, InfoTooltip }, mixins: [VuelidateMixin], props: { user: { |