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