fix form-input

2 files changed, 48 insertions, 41 deletions

diff --git a/src/views/_sila/SecurityAndAccess/Certificates/ModalGenerateCsr.vue b/src/views/_sila/SecurityAndAccess/Certificates/ModalGenerateCsr.vue
index 63258a40..2f2cb98f 100644
--- a/src/views/_sila/SecurityAndAccess/Certificates/ModalGenerateCsr.vue
+++ b/src/views/_sila/SecurityAndAccess/Certificates/ModalGenerateCsr.vue
@@ -237,9 +237,9 @@
                 <b-col lg="6">
                   <b-form-group label-for="challenge-password">
                     <template #label>
-                      {{ $t('pageCertificates.modal.challengePassword') }} -
+                      {{ $t('pageCertificates.modal.challengePassword') }}
                       <span class="form-text d-inline">
-                        {{ $t('global.form.optional') }}
+                        {{ '*' }}
                       </span>
                     </template>
                     <b-form-input
@@ -255,9 +255,9 @@
                 <b-col lg="6">
                   <b-form-group label-for="contact-person">
                     <template #label>
-                      {{ $t('pageCertificates.modal.contactPerson') }} -
+                      {{ $t('pageCertificates.modal.contactPerson') }}
                       <span class="form-text d-inline">
-                        {{ $t('global.form.optional') }}
+                        {{ '*' }}
                       </span>
                     </template>
                     <b-form-input
@@ -271,9 +271,9 @@
                 <b-col lg="6">
                   <b-form-group label-for="email-address">
                     <template #label>
-                      {{ $t('pageCertificates.modal.emailAddress') }} -
+                      {{ $t('pageCertificates.modal.emailAddress') }}
                       <span class="form-text d-inline">
-                        {{ $t('global.form.optional') }}
+                        {{ '*' }}
                       </span>
                     </template>
                     <b-form-input
@@ -289,14 +289,16 @@
                 <b-col lg="12">
                   <b-form-group label-for="alternate-name">
                     <template #label>
-                      {{ $t('pageCertificates.modal.alternateName') }} -
+                      {{ $t('pageCertificates.modal.alternateName') }}
                       <span class="form-text d-inline">
-                        {{ $t('global.form.optional') }}
+                        {{ '*' }}
                       </span>
+                      <info-tooltip
+                        :title="
+                          $t('pageCertificates.modal.alternateNameHelperText')
+                        "
+                      />
                     </template>
-                    <b-form-text id="alternate-name-help-block">
-                      {{ $t('pageCertificates.modal.alternateNameHelperText') }}
-                    </b-form-text>
                     <b-form-tags
                       v-model="form.alternateName"
                       :remove-on-delete="true"
@@ -304,9 +306,6 @@
                       input-id="alternate-name"
                       size="lg"
                       separator=" "
-                      :input-attrs="{
-                        'aria-describedby': 'alternate-name-help-block',
-                      }"
                       :duplicate-tag-text="
                         $t('pageCertificates.modal.duplicateAlternateName')
                       "
@@ -377,12 +376,13 @@ import { required, requiredIf } from 'vuelidate/lib/validators';
 
 import { COUNTRY_LIST } from './CsrCountryCodes';
 import { CERTIFICATE_TYPES } from '@/store/modules/SecurityAndAccess/CertificatesStore';
+import InfoTooltip from '@/components/_sila/Global/InfoTooltip';
 import BVToastMixin from '@/components/_sila/Mixins/BVToastMixin';
 import VuelidateMixin from '@/components/_sila/Mixins/VuelidateMixin.js';
 
 export default {
   name: 'ModalGenerateCsr',
-  components: { IconAdd, IconCheckmark },
+  components: { IconAdd, IconCheckmark, InfoTooltip },
   mixins: [BVToastMixin, VuelidateMixin],
   data() {
     return {
diff --git a/src/views/_sila/SecurityAndAccess/UserManagement/ModalSettings.vue b/src/views/_sila/SecurityAndAccess/UserManagement/ModalSettings.vue
index 6c72d5e4..a83a9c80 100644
--- a/src/views/_sila/SecurityAndAccess/UserManagement/ModalSettings.vue
+++ b/src/views/_sila/SecurityAndAccess/UserManagement/ModalSettings.vue
@@ -11,18 +11,18 @@
           <b-col lg="12">
             <b-row>
               <b-col lg="12">
-                <b-form-group
-                  :label="$t('pageUserManagement.modal.maxFailedLoginAttempts')"
-                  label-for="lockout-threshold"
-                >
-                  <b-form-text id="lockout-threshold-help-block">
-                    {{
-                      $t('global.form.valueMustBeBetween', {
-                        min: 0,
-                        max: 65535,
-                      })
-                    }}
-                  </b-form-text>
+                <b-form-group label-for="lockout-threshold">
+                  <template #label>
+                    {{ $t('pageUserManagement.modal.maxFailedLoginAttempts') }}
+                    <info-tooltip
+                      :title="
+                        $t('global.form.valueMustBeBetween', {
+                          min: 0,
+                          max: 65535,
+                        })
+                      "
+                    />
+                  </template>
                   <b-form-input
                     id="lockout-threshold"
                     v-model.number="form.lockoutThreshold"
@@ -75,21 +75,25 @@
                   >
                     {{ $t('pageUserManagement.modal.automaticAfterTimeout') }}
                   </b-form-radio>
-                  <div class="mt-3 ml-4">
-                    <b-form-text id="lockout-duration-help-block">
-                      {{
+                  <div class="mt-4">
+                    <b-form-group
+                      :label="
                         $t('pageUserManagement.modal.timeoutDurationSeconds')
-                      }}
-                    </b-form-text>
-                    <b-form-input
-                      v-model.number="form.lockoutDuration"
-                      aria-describedby="lockout-duration-help-block"
-                      type="number"
-                      data-test-id="userManagement-input-lockoutDuration"
-                      :state="getValidationState($v.form.lockoutDuration)"
-                      :readonly="$v.form.unlockMethod.$model === 0"
-                      @input="$v.form.lockoutDuration.$touch()"
-                    />
+                      "
+                      label-for="lockout-duration"
+                    >
+                      <b-form-input
+                        id="lockout-duration"
+                        v-model.number="form.lockoutDuration"
+                        aria-describedby="lockout-duration-help-block"
+                        type="number"
+                        data-test-id="userManagement-input-lockoutDuration"
+                        :state="getValidationState($v.form.lockoutDuration)"
+                        :readonly="$v.form.unlockMethod.$model === 0"
+                        style="width: 100%"
+                        @input="$v.form.lockoutDuration.$touch()"
+                      />
+                    </b-form-group>
                     <b-form-invalid-feedback role="alert">
                       <template v-if="!$v.form.lockoutDuration.required">
                         {{ $t('global.form.fieldRequired') }}
@@ -129,6 +133,8 @@
 
 <script>
 import VuelidateMixin from '@/components/_sila/Mixins/VuelidateMixin.js';
+import InfoTooltip from '@/components/_sila/Global/InfoTooltip';
+
 import {
   required,
   requiredIf,
@@ -137,6 +143,7 @@ import {
 } from 'vuelidate/lib/validators';
 
 export default {
+  components: { InfoTooltip },
   mixins: [VuelidateMixin],
   props: {
     settings: {