SILABMC-240: fix fields in modal

3 files changed, 116 insertions, 102 deletions

diff --git a/src/assets/styles/bmc/_sila/_forms.scss b/src/assets/styles/bmc/_sila/_forms.scss
index aec35370..c8f85db0 100644
--- a/src/assets/styles/bmc/_sila/_forms.scss
+++ b/src/assets/styles/bmc/_sila/_forms.scss
@@ -21,11 +21,16 @@ div:not(.search-global) > .form-group {
   .input-password-toggle-container {
     position: initial;
   }
+  & small {
+    font-size: x-small;
+    text-align: right;
+    margin-right: 10px;
+  }
   & label + div > small {
     position: absolute;
     right: 10px;
     top: 0;
-    font-size: x-small;
+    margin-right: 0;
   }
   & .form-control,
   .input-group-prepend,
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>