122 lines
3.5 KiB
Vue
122 lines
3.5 KiB
Vue
<template>
|
|
<v-card>
|
|
<v-toolbar color="primary" class="white--text" flat>
|
|
<v-toolbar-title text-center>Reset Password</v-toolbar-title>
|
|
</v-toolbar>
|
|
<v-card-text>
|
|
<v-alert type="error" v-if="!!resetPasswordError">{{resetPasswordError}}</v-alert>
|
|
<v-alert type="success" v-if="!!resetPasswordMessage">{{resetPasswordMessage}}</v-alert>
|
|
<v-form ref="resetPassword" v-on:submit.prevent="resetPassword" >
|
|
<v-text-field
|
|
type="password"
|
|
class="textfield-border"
|
|
label="New Password"
|
|
ref="newPassword"
|
|
v-model="newPassword"
|
|
@click="clear()"
|
|
:rules="commonValidationRules.passwordRule"
|
|
required
|
|
prepend-icon="mdi-lock"
|
|
>
|
|
</v-text-field>
|
|
|
|
<v-text-field
|
|
type="password"
|
|
class="textfield-border"
|
|
label="Confirm Password"
|
|
ref="confirmPassword"
|
|
v-model="confirmPassword"
|
|
:rules="[passwordConfirmationRule]"
|
|
prepend-icon="mdi-lock"
|
|
required
|
|
>
|
|
</v-text-field>
|
|
|
|
<div class="mt-5 text-center">
|
|
<v-hover v-slot:default="{ hover }">
|
|
<v-btn
|
|
large
|
|
block
|
|
:outlined="hover ? false:true"
|
|
:color="hover ? 'primary' : 'primary'"
|
|
class="mt-6 body"
|
|
tile
|
|
@click="resetPassword"
|
|
:disabled="inProgress"
|
|
><v-progress-circular :size="20" color="primary" indeterminate v-if="inProgress"></v-progress-circular>Reset Password</v-btn>
|
|
</v-hover>
|
|
</div>
|
|
</v-form>
|
|
<v-row>
|
|
<v-col cols="12">
|
|
Already have an account sign in here
|
|
<v-hover v-slot:default="{ hover }">
|
|
<router-link class="text-decoration-none" :to="{name:'LoginPage'}" :class="hover ? 'content-link-hover-color' : 'primary--text'">Sign In</router-link>
|
|
</v-hover>
|
|
</v-col>
|
|
</v-row>
|
|
</v-card-text>
|
|
</v-card>
|
|
</template>
|
|
<script>
|
|
import { createHelpers } from "vuex-map-fields";
|
|
import { commonValidationRules } from "@/services/util.service";
|
|
const { mapFields } = createHelpers({
|
|
getterType: "registration/getField",
|
|
mutationType: "registration/updateField"
|
|
});
|
|
|
|
export default {
|
|
name: "ResetPasswordComponent",
|
|
data: () => ({
|
|
valid: true,
|
|
confirmPassword: "",
|
|
commonValidationRules: commonValidationRules,
|
|
}),
|
|
computed: {
|
|
...mapFields([
|
|
"resetOne",
|
|
"resetOne.newPassword",
|
|
"resetPasswordError",
|
|
"inProgress",
|
|
"resetPasswordMessage"
|
|
]),
|
|
passwordConfirmationRule() {
|
|
return () =>
|
|
this.newPassword === this.confirmPassword || "Password must match";
|
|
},
|
|
},
|
|
methods: {
|
|
resetPassword(e) {
|
|
e.preventDefault();
|
|
if (this.$refs.resetPassword.validate()) {
|
|
|
|
this.$store
|
|
.dispatch("registration/resetPassword")
|
|
.then(data => {
|
|
if (data) {
|
|
this.$store.dispatch(
|
|
"auth/prepare",
|
|
"You updated your password."
|
|
);
|
|
this.$router.push({
|
|
name: "SignInPage"
|
|
});
|
|
}
|
|
});
|
|
}
|
|
},
|
|
clear() {
|
|
return (this.confirmPassword = "");
|
|
}
|
|
},
|
|
created() {
|
|
this.token = this.$route.params.token;
|
|
let userIdAndToken = {
|
|
token : this.token,
|
|
}
|
|
this.$store.dispatch("registration/newResetPassword",{userIdAndToken});
|
|
}
|
|
};
|
|
</script>
|