views/ChangePassword/ChangePassword.vue

2   <div class="change-password-container">
3     <alert variant="danger" class="mb-4">
4       <p v-if="changePasswordError">
7       <p v-else>{{ $t('pageChangePassword.changePasswordAlertMessage') }}</p>
9     <div class="change-password__form-container">
14       <b-form novalidate @submit.prevent="changePassword">
15         <b-form-group
16           label-for="password"
19           <input-password-toggle>
20             <b-form-input
22               v-model="form.password"
26               class="form-control-with-button"
29             </b-form-input>
30             <b-form-invalid-feedback role="alert">
31               <template v-if="v$.form.password.required.$invalid">
34             </b-form-invalid-feedback>
35           </input-password-toggle>
36         </b-form-group>
37         <b-form-group
38           label-for="password-confirm"
41           <input-password-toggle>
42             <b-form-input
43               id="password-confirm"
44               v-model="form.passwordConfirm"
47               class="form-control-with-button"
50             </b-form-input>
51             <b-form-invalid-feedback role="alert">
52               <template v-if="v$.form.passwordConfirm.required.$invalid">
56                 v-else-if="v$.form.passwordConfirm.sameAsPassword.$invalid"
60             </b-form-invalid-feedback>
61           </input-password-toggle>
62         </b-form-group>
63         <div class="text-right">
64           <b-button type="button" variant="link" @click="goBack">
66           </b-button>
67           <b-button type="submit" variant="primary">
69           </b-button>
71       </b-form>
83 import { useI18n } from 'vue-i18n';
138 <style lang="scss" scoped>
139 .change-password__form-container {
140   @include media-breakpoint-up('md') {
141     max-width: 360px;
144 </style>