fix form-input

6 files changed, 124 insertions, 97 deletions

diff --git a/src/assets/styles/bmc/_sila/_forms.scss b/src/assets/styles/bmc/_sila/_forms.scss
index b206f46c..18236593 100644
--- a/src/assets/styles/bmc/_sila/_forms.scss
+++ b/src/assets/styles/bmc/_sila/_forms.scss
@@ -33,6 +33,9 @@ div:not(.search-global) > .form-group {
     right: 10px;
     top: 0;
     margin-right: 0;
+    @include media-breakpoint-down(sm) { 
+      top: -25px;
+    }
   }
   .form-control,
   .input-group-prepend,
diff --git a/src/views/_sila/Operations/VirtualMedia/ModalConfigureConnection.vue b/src/views/_sila/Operations/VirtualMedia/ModalConfigureConnection.vue
index df11e76e..e996b022 100644
--- a/src/views/_sila/Operations/VirtualMedia/ModalConfigureConnection.vue
+++ b/src/views/_sila/Operations/VirtualMedia/ModalConfigureConnection.vue
@@ -10,54 +10,66 @@
       {{ $t('pageVirtualMedia.modal.title') }}
     </template>
     <b-form>
-      <b-form-group
-        :label="
-          $t('pageVirtualMedia.modal.serverUri') + ' (http, ftp, smb, nfs)'
-        "
-        label-for="serverUri"
-      >
-        <b-form-input
-          id="serverUri"
-          v-model="form.serverUri"
-          placeholder="https://"
-          type="text"
-          :state="getValidationState($v.form.serverUri)"
-          data-test-id="configureConnection-input-serverUri"
-          @input="$v.form.serverUri.$touch()"
-        />
-        <b-form-invalid-feedback role="alert">
-          <template v-if="!$v.form.serverUri.required">
-            {{ $t('global.form.fieldRequired') }}
-          </template>
-        </b-form-invalid-feedback>
-      </b-form-group>
-      <b-form-group
-        :label="$t('pageVirtualMedia.modal.username')"
-        label-for="username"
-      >
-        <b-form-input
-          id="username"
-          v-model="form.username"
-          type="text"
-          data-test-id="configureConnection-input-username"
-        />
-      </b-form-group>
-      <b-form-group
-        :label="$t('pageVirtualMedia.modal.password')"
-        label-for="password"
-      >
-        <b-form-input
-          id="password"
-          v-model="form.password"
-          type="password"
-          data-test-id="configureConnection-input-password"
-        />
-      </b-form-group>
+      <b-input-group>
+        <b-form-group
+          :label="
+            $t('pageVirtualMedia.modal.serverUri') + ' (http, ftp, smb, nfs)'
+          "
+          label-for="serverUri"
+          style="width: 100%"
+        >
+          <b-form-input
+            id="serverUri"
+            v-model="form.serverUri"
+            placeholder="https://"
+            type="text"
+            :state="getValidationState($v.form.serverUri)"
+            data-test-id="configureConnection-input-serverUri"
+            @input="$v.form.serverUri.$touch()"
+          />
+          <b-form-invalid-feedback role="alert">
+            <template v-if="!$v.form.serverUri.required">
+              {{ $t('global.form.fieldRequired') }}
+            </template>
+          </b-form-invalid-feedback>
+        </b-form-group>
+      </b-input-group>
+
+      <b-input-group>
+        <b-form-group
+          :label="$t('pageVirtualMedia.modal.username')"
+          label-for="username"
+          style="width: 100%"
+        >
+          <b-form-input
+            id="username"
+            v-model="form.username"
+            type="text"
+            data-test-id="configureConnection-input-username"
+          />
+        </b-form-group>
+      </b-input-group>
+
+      <b-input-group>
+        <b-form-group
+          :label="$t('pageVirtualMedia.modal.password')"
+          label-for="password"
+          style="width: 100%"
+        >
+          <b-form-input
+            id="password"
+            v-model="form.password"
+            type="password"
+            data-test-id="configureConnection-input-password"
+          />
+        </b-form-group>
+      </b-input-group>
       <b-form-group>
         <b-form-checkbox
           v-model="form.isRW"
           data-test-id="configureConnection-input-isRW"
           name="check-button"
+          class="pl-4"
         >
           RW
         </b-form-checkbox>
diff --git a/src/views/_sila/Overview/DateTime/DateTime.vue b/src/views/_sila/Overview/DateTime/DateTime.vue
index 1b3d4ae4..4440cd4a 100644
--- a/src/views/_sila/Overview/DateTime/DateTime.vue
+++ b/src/views/_sila/Overview/DateTime/DateTime.vue
@@ -52,7 +52,6 @@
                 :label="$t('pageDateTime.form.date')"
                 label-for="input-manual-date"
               >
-                <b-form-text id="date-format-help">YYYY-MM-DD</b-form-text>
                 <b-input-group>
                   <b-form-input
                     id="input-manual-date"
@@ -62,6 +61,7 @@
                       ntpOptionSelected ||
                       $store.getters['authentication/role'] === 'ReadOnly'
                     "
+                    placeholder="YYYY-MM-DD"
                     data-test-id="dateTime-input-manualDate"
                     class="form-control-with-button"
                     @blur="$v.form.manual.date.$touch()"
@@ -107,7 +107,6 @@
                 :label="$t('pageDateTime.form.time.timezone', { timezone })"
                 label-for="input-manual-time"
               >
-                <b-form-text id="time-format-help">HH:MM</b-form-text>
                 <b-input-group>
                   <b-form-input
                     id="input-manual-time"
@@ -117,6 +116,7 @@
                       ntpOptionSelected ||
                       $store.getters['authentication/role'] === 'ReadOnly'
                     "
+                    placeholder="HH:MM"
                     data-test-id="dateTime-input-manualTime"
                     @blur="$v.form.manual.time.$touch()"
                   />
diff --git a/src/views/_sila/ResourceManagement/Power.vue b/src/views/_sila/ResourceManagement/Power.vue
index 43256db2..aaa9929f 100644
--- a/src/views/_sila/ResourceManagement/Power.vue
+++ b/src/views/_sila/ResourceManagement/Power.vue
@@ -38,17 +38,21 @@
           <b-col sm="8" md="6" xl="4">
             <b-form-group
               id="input-group-1"
-              :label="$t('pagePower.powerCapLabel')"
               label-for="input-1"
+              variant="with-label"
             >
-              <b-form-text id="power-help-text">
-                {{
-                  $t('pagePower.powerCapLabelTextInfo', {
-                    min: 500,
-                    max: 3000,
-                  })
-                }}
-              </b-form-text>
+              <template #label>
+                {{ $t('pagePower.powerCapLabel') }}
+
+                <info-tooltip
+                  :title="
+                    $t('pagePower.powerCapLabelTextInfo', {
+                      min: 500,
+                      max: 3000,
+                    })
+                  "
+                />
+              </template>
 
               <b-form-input
                 id="input-1"
@@ -59,7 +63,7 @@
                 "
                 data-test-id="power-input-powerCapValue"
                 type="number"
-                aria-describedby="power-help-text"
+                variant="with-label"
                 :state="getValidationState($v.powerCapValue)"
               ></b-form-input>
 
@@ -93,6 +97,7 @@ import PageTitle from '@/components/_sila/Global/PageTitle';
 import LoadingBarMixin, {
   loading,
 } from '@/components/_sila/Mixins/LoadingBarMixin';
+import InfoTooltip from '@/components/_sila/Global/InfoTooltip';
 import VuelidateMixin from '@/components/_sila/Mixins/VuelidateMixin.js';
 import BVToastMixin from '@/components/_sila/Mixins/BVToastMixin';
 import { requiredIf, between } from 'vuelidate/lib/validators';
@@ -100,7 +105,7 @@ import { mapGetters } from 'vuex';
 
 export default {
   name: 'Power',
-  components: { PageTitle },
+  components: { PageTitle, InfoTooltip },
   mixins: [VuelidateMixin, BVToastMixin, LoadingBarMixin],
   beforeRouteLeave(to, from, next) {
     this.hideLoader();
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: {