2019-01-21 15:08:22 +01:00
|
|
|
<template>
|
2019-12-20 13:04:34 +01:00
|
|
|
<section class="section container columns is-mobile is-centered">
|
2019-01-21 15:08:22 +01:00
|
|
|
<div class="card column is-half-desktop">
|
2020-02-18 08:57:00 +01:00
|
|
|
<h1>{{ $t("Password reset") }}</h1>
|
|
|
|
<b-message title="Error" type="is-danger" v-for="error in errors" :key="error">{{
|
|
|
|
error
|
|
|
|
}}</b-message>
|
2019-01-21 15:08:22 +01:00
|
|
|
<form @submit="resetAction">
|
2019-09-18 17:32:37 +02:00
|
|
|
<b-field :label="$t('Password')">
|
2019-01-21 15:08:22 +01:00
|
|
|
<b-input
|
|
|
|
aria-required="true"
|
|
|
|
required
|
|
|
|
type="password"
|
|
|
|
password-reveal
|
|
|
|
minlength="6"
|
|
|
|
v-model="credentials.password"
|
|
|
|
/>
|
|
|
|
</b-field>
|
2019-09-18 17:32:37 +02:00
|
|
|
<b-field :label="$t('Password (confirmation)')">
|
2019-01-21 15:08:22 +01:00
|
|
|
<b-input
|
|
|
|
aria-required="true"
|
|
|
|
required
|
|
|
|
type="password"
|
|
|
|
password-reveal
|
|
|
|
minlength="6"
|
2020-02-18 08:57:00 +01:00
|
|
|
v-model="credentials.passwordConfirmation"
|
2019-01-21 15:08:22 +01:00
|
|
|
/>
|
|
|
|
</b-field>
|
2020-02-18 08:57:00 +01:00
|
|
|
<button class="button is-primary">{{ $t("Reset my password") }}</button>
|
2019-01-21 15:08:22 +01:00
|
|
|
</form>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts">
|
2020-02-18 08:57:00 +01:00
|
|
|
import { Component, Prop, Vue } from "vue-property-decorator";
|
|
|
|
import { validateRequiredField } from "../../utils/validators";
|
|
|
|
import { RESET_PASSWORD } from "../../graphql/auth";
|
|
|
|
import { saveUserData } from "../../utils/auth";
|
|
|
|
import { ILogin } from "../../types/login.model";
|
|
|
|
import RouteName from "../../router/name";
|
2019-01-21 15:08:22 +01:00
|
|
|
|
|
|
|
@Component
|
|
|
|
export default class PasswordReset extends Vue {
|
|
|
|
@Prop({ type: String, required: true }) token!: string;
|
|
|
|
|
|
|
|
credentials = {
|
2020-02-18 08:57:00 +01:00
|
|
|
password: "",
|
|
|
|
passwordConfirmation: "",
|
|
|
|
} as { password: string; passwordConfirmation: string };
|
|
|
|
|
2019-01-21 15:08:22 +01:00
|
|
|
errors: string[] = [];
|
2020-02-18 08:57:00 +01:00
|
|
|
|
2019-01-21 15:08:22 +01:00
|
|
|
rules = {
|
2020-02-18 08:57:00 +01:00
|
|
|
passwordLength: (value: string) =>
|
|
|
|
value.length > 6 || "Password must be at least 6 characters long",
|
2019-01-21 15:08:22 +01:00
|
|
|
required: validateRequiredField,
|
2020-02-18 08:57:00 +01:00
|
|
|
passwordEqual: (value: string) =>
|
|
|
|
value === this.credentials.password || "Passwords must be the same",
|
2019-01-21 15:08:22 +01:00
|
|
|
};
|
|
|
|
|
|
|
|
get samePasswords() {
|
|
|
|
return (
|
2020-02-18 08:57:00 +01:00
|
|
|
this.rules.passwordLength(this.credentials.password) === true &&
|
|
|
|
this.credentials.password === this.credentials.passwordConfirmation
|
2019-01-21 15:08:22 +01:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2020-02-18 08:57:00 +01:00
|
|
|
async resetAction(e: Event) {
|
2019-01-21 15:08:22 +01:00
|
|
|
e.preventDefault();
|
|
|
|
this.errors.splice(0);
|
|
|
|
|
|
|
|
try {
|
2019-09-02 18:52:23 +02:00
|
|
|
const { data } = await this.$apollo.mutate<{ resetPassword: ILogin }>({
|
2019-01-21 15:08:22 +01:00
|
|
|
mutation: RESET_PASSWORD,
|
|
|
|
variables: {
|
|
|
|
password: this.credentials.password,
|
2019-03-22 10:57:14 +01:00
|
|
|
token: this.token,
|
|
|
|
},
|
2019-01-21 15:08:22 +01:00
|
|
|
});
|
2019-09-02 18:52:23 +02:00
|
|
|
if (data == null) {
|
2020-02-18 08:57:00 +01:00
|
|
|
throw new Error("Data is undefined");
|
2019-09-02 18:52:23 +02:00
|
|
|
}
|
2019-01-21 15:08:22 +01:00
|
|
|
|
2019-09-02 18:52:23 +02:00
|
|
|
saveUserData(data.resetPassword);
|
|
|
|
await this.$router.push({ name: RouteName.HOME });
|
2019-01-21 15:08:22 +01:00
|
|
|
} catch (err) {
|
|
|
|
console.error(err);
|
2020-02-18 08:57:00 +01:00
|
|
|
err.graphQLErrors.forEach(({ message }: { message: any }) => {
|
2019-01-21 15:08:22 +01:00
|
|
|
this.errors.push(message);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|