1<template> 2 <b-modal 3 id="modal-settings" 4 ref="modal" 5 :title="$t('pageUserManagement.accountPolicySettings')" 6 @hidden="resetForm" 7 > 8 <b-form id="form-settings" novalidate @submit.prevent="handleSubmit"> 9 <b-container> 10 <b-row> 11 <b-col> 12 <b-form-group 13 :label="$t('pageUserManagement.modal.maxFailedLoginAttempts')" 14 label-for="lockout-threshold" 15 > 16 <b-form-text id="lockout-threshold-help-block"> 17 {{ 18 $t('global.form.valueMustBeBetween', { 19 min: 0, 20 max: 65535, 21 }) 22 }} 23 </b-form-text> 24 <b-form-input 25 id="lockout-threshold" 26 v-model.number="form.lockoutThreshold" 27 type="number" 28 aria-describedby="lockout-threshold-help-block" 29 data-test-id="userManagement-input-lockoutThreshold" 30 :state="getValidationState($v.form.lockoutThreshold)" 31 @input="$v.form.lockoutThreshold.$touch()" 32 /> 33 <b-form-invalid-feedback role="alert"> 34 <template v-if="!$v.form.lockoutThreshold.required"> 35 {{ $t('global.form.fieldRequired') }} 36 </template> 37 <template 38 v-if=" 39 !$v.form.lockoutThreshold.minLength || 40 !$v.form.lockoutThreshold.maxLength 41 " 42 > 43 {{ 44 $t('global.form.valueMustBeBetween', { 45 min: 0, 46 max: 65535, 47 }) 48 }} 49 </template> 50 </b-form-invalid-feedback> 51 </b-form-group> 52 </b-col> 53 <b-col> 54 <b-form-group 55 :label="$t('pageUserManagement.modal.userUnlockMethod')" 56 > 57 <b-form-radio 58 v-model="form.unlockMethod" 59 name="unlock-method" 60 class="mb-2" 61 :value="0" 62 data-test-id="userManagement-radio-manualUnlock" 63 @input="$v.form.unlockMethod.$touch()" 64 > 65 {{ $t('pageUserManagement.modal.manual') }} 66 </b-form-radio> 67 <b-form-radio 68 v-model="form.unlockMethod" 69 name="unlock-method" 70 :value="1" 71 data-test-id="userManagement-radio-automaticUnlock" 72 @input="$v.form.unlockMethod.$touch()" 73 > 74 {{ $t('pageUserManagement.modal.automaticAfterTimeout') }} 75 </b-form-radio> 76 <div class="mt-3 ml-4"> 77 <b-form-text id="lockout-duration-help-block"> 78 {{ $t('pageUserManagement.modal.timeoutDurationSeconds') }} 79 </b-form-text> 80 <b-form-input 81 v-model.number="form.lockoutDuration" 82 aria-describedby="lockout-duration-help-block" 83 type="number" 84 data-test-id="userManagement-input-lockoutDuration" 85 :state="getValidationState($v.form.lockoutDuration)" 86 :readonly="$v.form.unlockMethod.$model === 0" 87 @input="$v.form.lockoutDuration.$touch()" 88 /> 89 <b-form-invalid-feedback role="alert"> 90 <template v-if="!$v.form.lockoutDuration.required"> 91 {{ $t('global.form.fieldRequired') }} 92 </template> 93 <template v-else-if="!$v.form.lockoutDuration.minvalue"> 94 {{ $t('global.form.mustBeAtLeast', { value: 1 }) }} 95 </template> 96 </b-form-invalid-feedback> 97 </div> 98 </b-form-group> 99 </b-col> 100 </b-row> 101 </b-container> 102 </b-form> 103 <template #modal-footer="{ cancel }"> 104 <b-button 105 variant="secondary" 106 data-test-id="userManagement-button-cancel" 107 @click="cancel()" 108 > 109 {{ $t('global.action.cancel') }} 110 </b-button> 111 <b-button 112 form="form-settings" 113 type="submit" 114 variant="primary" 115 data-test-id="userManagement-button-submit" 116 @click="onOk" 117 > 118 {{ $t('global.action.save') }} 119 </b-button> 120 </template> 121 </b-modal> 122</template> 123 124<script> 125import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js'; 126import { useVuelidate } from '@vuelidate/core'; 127 128import { 129 required, 130 requiredIf, 131 minValue, 132 maxValue, 133} from '@vuelidate/validators'; 134 135export default { 136 mixins: [VuelidateMixin], 137 props: { 138 settings: { 139 type: Object, 140 required: true, 141 }, 142 }, 143 setup() { 144 return { 145 v$: useVuelidate(), 146 }; 147 }, 148 data() { 149 return { 150 form: { 151 lockoutThreshold: 0, 152 unlockMethod: 0, 153 lockoutDuration: null, 154 }, 155 }; 156 }, 157 watch: { 158 settings: function ({ lockoutThreshold, lockoutDuration }) { 159 this.form.lockoutThreshold = lockoutThreshold; 160 this.form.unlockMethod = lockoutDuration ? 1 : 0; 161 this.form.lockoutDuration = lockoutDuration ? lockoutDuration : null; 162 }, 163 }, 164 validations: { 165 form: { 166 lockoutThreshold: { 167 minValue: minValue(0), 168 maxValue: maxValue(65535), 169 required, 170 }, 171 unlockMethod: { required }, 172 lockoutDuration: { 173 minValue: function (value) { 174 return this.form.unlockMethod === 0 || value > 0; 175 }, 176 required: requiredIf(function () { 177 return this.form.unlockMethod === 1; 178 }), 179 }, 180 }, 181 }, 182 methods: { 183 handleSubmit() { 184 this.$v.$touch(); 185 if (this.$v.$invalid) return; 186 187 let lockoutThreshold; 188 let lockoutDuration; 189 if (this.$v.form.lockoutThreshold.$dirty) { 190 lockoutThreshold = this.form.lockoutThreshold; 191 } 192 if (this.$v.form.unlockMethod.$dirty) { 193 lockoutDuration = this.form.unlockMethod 194 ? this.form.lockoutDuration 195 : 0; 196 } 197 198 this.$emit('ok', { lockoutThreshold, lockoutDuration }); 199 this.closeModal(); 200 }, 201 onOk(bvModalEvt) { 202 // prevent modal close 203 bvModalEvt.preventDefault(); 204 this.handleSubmit(); 205 }, 206 closeModal() { 207 this.$nextTick(() => { 208 this.$refs.modal.hide(); 209 }); 210 }, 211 resetForm() { 212 // Reset form models 213 this.form.lockoutThreshold = this.settings.lockoutThreshold; 214 this.form.unlockMethod = this.settings.lockoutDuration ? 1 : 0; 215 this.form.lockoutDuration = this.settings.lockoutDuration 216 ? this.settings.lockoutDuration 217 : null; 218 this.$v.$reset(); // clear validations 219 }, 220 }, 221}; 222</script> 223