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'; 81 82export default { 83 name: 'ChangePassword', 84 components: { Alert, InputPasswordToggle }, 85 mixins: [VuelidateMixin, BVToastMixin], 86 setup() { 87 return { 88 v$: useVuelidate(), 89 }; 90 }, 91 data() { 92 return { 93 form: { 94 password: null, 95 passwordConfirm: null, 96 }, 97 username: this.$store.getters['global/username'], 98 changePasswordError: false, 99 }; 100 }, 101 validations() { 102 return { 103 form: { 104 password: { required }, 105 passwordConfirm: { 106 required, 107 sameAsPassword: sameAs('password'), 108 }, 109 }, 110 }; 111 }, 112 methods: { 113 goBack() { 114 // Remove session created if navigating back to the Login page 115 this.$store.dispatch('authentication/logout'); 116 }, 117 changePassword() { 118 this.$v.$touch(); 119 if (this.$v.$invalid) return; 120 let data = { 121 originalUsername: this.username, 122 password: this.form.password, 123 }; 124 125 this.$store 126 .dispatch('userManagement/updateUser', data) 127 .then(() => this.$router.push('/')) 128 .catch(() => (this.changePasswordError = true)); 129 }, 130 }, 131}; 132</script> 133 134<style lang="scss" scoped> 135@import '@/assets/styles/bmc/helpers/_index.scss'; 136@import '@/assets/styles/bootstrap/_helpers.scss'; 137 138@import '@/assets/styles/bootstrap/_helpers.scss'; 139 140.change-password__form-container { 141 @include media-breakpoint-up('md') { 142 max-width: 360px; 143 } 144} 145</style> 146