diff options
Diffstat (limited to 'src/views/_sila')
5 files changed, 121 insertions, 97 deletions
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: { |