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 {
127  required,
128  requiredIf,
129  minValue,
130  maxValue,
131} from 'vuelidate/lib/validators';
132
133export default {
134  mixins: [VuelidateMixin],
135  props: {
136    settings: {
137      type: Object,
138      required: true,
139    },
140  },
141  data() {
142    return {
143      form: {
144        lockoutThreshold: 0,
145        unlockMethod: 0,
146        lockoutDuration: null,
147      },
148    };
149  },
150  watch: {
151    settings: function ({ lockoutThreshold, lockoutDuration }) {
152      this.form.lockoutThreshold = lockoutThreshold;
153      this.form.unlockMethod = lockoutDuration ? 1 : 0;
154      this.form.lockoutDuration = lockoutDuration ? lockoutDuration : null;
155    },
156  },
157  validations: {
158    form: {
159      lockoutThreshold: {
160        minValue: minValue(0),
161        maxValue: maxValue(65535),
162        required,
163      },
164      unlockMethod: { required },
165      lockoutDuration: {
166        minValue: function (value) {
167          return this.form.unlockMethod === 0 || value > 0;
168        },
169        required: requiredIf(function () {
170          return this.form.unlockMethod === 1;
171        }),
172      },
173    },
174  },
175  methods: {
176    handleSubmit() {
177      this.$v.$touch();
178      if (this.$v.$invalid) return;
179
180      let lockoutThreshold;
181      let lockoutDuration;
182      if (this.$v.form.lockoutThreshold.$dirty) {
183        lockoutThreshold = this.form.lockoutThreshold;
184      }
185      if (this.$v.form.unlockMethod.$dirty) {
186        lockoutDuration = this.form.unlockMethod
187          ? this.form.lockoutDuration
188          : 0;
189      }
190
191      this.$emit('ok', { lockoutThreshold, lockoutDuration });
192      this.closeModal();
193    },
194    onOk(bvModalEvt) {
195      // prevent modal close
196      bvModalEvt.preventDefault();
197      this.handleSubmit();
198    },
199    closeModal() {
200      this.$nextTick(() => {
201        this.$refs.modal.hide();
202      });
203    },
204    resetForm() {
205      // Reset form models
206      this.form.lockoutThreshold = this.settings.lockoutThreshold;
207      this.form.unlockMethod = this.settings.lockoutDuration ? 1 : 0;
208      this.form.lockoutDuration = this.settings.lockoutDuration
209        ? this.settings.lockoutDuration
210        : null;
211      this.$v.$reset(); // clear validations
212    },
213  },
214};
215</script>
216