1<template> 2 <div class="change-password-container"> 3 <alert variant="danger" class="mb-4"> 4 <p v-if="changePasswordError"> 5 {{ $t('pageChangePassword.changePasswordError') }} 6 </p> 7 <p v-else> 8 {{ $t('pageChangePassword.changePasswordAlertMessage') }} 9 </p> 10 </alert> 11 <div class="change-password__form-container"> 12 <dl> 13 <dt>{{ $t('pageChangePassword.username') }}</dt> 14 <dd>{{ username }}</dd> 15 </dl> 16 <b-form novalidate @submit.prevent="changePassword"> 17 <b-form-group 18 label-for="password" 19 :label="$t('pageChangePassword.newPassword')" 20 > 21 <input-password-toggle> 22 <b-form-input 23 id="password" 24 v-model="form.password" 25 autofocus="autofocus" 26 type="password" 27 autocomplete="new-password" 28 :state="getValidationState(v$.form.password)" 29 class="form-control-with-button" 30 @change="v$.form.password.$touch()" 31 > 32 </b-form-input> 33 <b-form-invalid-feedback role="alert"> 34 <template v-if="v$.form.password.required.$invalid"> 35 {{ $t('global.form.fieldRequired') }} 36 </template> 37 </b-form-invalid-feedback> 38 </input-password-toggle> 39 </b-form-group> 40 <b-form-group 41 label-for="password-confirm" 42 :label="$t('pageChangePassword.confirmNewPassword')" 43 > 44 <input-password-toggle> 45 <b-form-input 46 id="password-confirm" 47 v-model="form.passwordConfirm" 48 type="password" 49 autocomplete="new-password" 50 :state="getValidationState(v$.form.passwordConfirm)" 51 class="form-control-with-button" 52 @change="v$.form.passwordConfirm.$touch()" 53 > 54 </b-form-input> 55 <b-form-invalid-feedback role="alert"> 56 <template v-if="v$.form.passwordConfirm.required.$invalid"> 57 {{ $t('global.form.fieldRequired') }} 58 </template> 59 <template 60 v-else-if="v$.form.passwordConfirm.sameAsPassword.$invalid" 61 > 62 {{ $t('global.form.passwordsDoNotMatch') }} 63 </template> 64 </b-form-invalid-feedback> 65 </input-password-toggle> 66 </b-form-group> 67 <div class="text-end"> 68 <b-button type="button" variant="link" @click="goBack"> 69 {{ $t('pageChangePassword.goBack') }} 70 </b-button> 71 <b-button type="submit" variant="primary"> 72 {{ $t('pageChangePassword.changePassword') }} 73 </b-button> 74 </div> 75 </b-form> 76 </div> 77 </div> 78</template> 79 80<script> 81import { required, sameAs } from '@vuelidate/validators'; 82import Alert from '@/components/Global/Alert'; 83import VuelidateMixin from '@/components/Mixins/VuelidateMixin'; 84import InputPasswordToggle from '@/components/Global/InputPasswordToggle'; 85import BVToastMixin from '@/components/Mixins/BVToastMixin'; 86import { useVuelidate } from '@vuelidate/core'; 87import { useI18n } from 'vue-i18n'; 88 89export default { 90 name: 'ChangePassword', 91 components: { Alert, InputPasswordToggle }, 92 mixins: [VuelidateMixin, BVToastMixin], 93 setup() { 94 return { 95 v$: useVuelidate(), 96 }; 97 }, 98 data() { 99 return { 100 $t: useI18n().t, 101 form: { 102 password: null, 103 passwordConfirm: null, 104 }, 105 username: this.$store.getters['global/username'], 106 changePasswordError: false, 107 }; 108 }, 109 validations() { 110 return { 111 form: { 112 password: { required }, 113 passwordConfirm: { 114 required, 115 sameAsPassword: sameAs(this.form.password), 116 }, 117 }, 118 }; 119 }, 120 methods: { 121 goBack() { 122 // Remove session created if navigating back to the Login page 123 this.$store.dispatch('authentication/logout'); 124 }, 125 changePassword() { 126 this.v$.$touch(); 127 if (this.v$.$invalid) return; 128 let data = { 129 originalUsername: this.username, 130 password: this.form.password, 131 }; 132 133 this.$store 134 .dispatch('userManagement/updateUser', data) 135 .then(() => this.$router.push('/')) 136 .catch(() => (this.changePasswordError = true)); 137 }, 138 }, 139}; 140</script> 141 142<style lang="scss" scoped> 143.change-password__form-container { 144 @include media-breakpoint-up('md') { 145 max-width: 360px; 146 } 147} 148</style> 149