fix user modal layout

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: {