mobilizon.chapril.org-mobil.../js/src/views/User/SendPasswordReset.vue

128 lines
3.2 KiB
Vue

<template>
<section class="section container">
<div class="columns is-mobile is-centered">
<div class="column is-half-desktop">
<h1 class="title">
{{ $t("Forgot your password?") }}
</h1>
<p>
{{
$t(
"Enter your email address below, and we'll email you instructions on how to change your password."
)
}}
</p>
<b-message
title="Error"
type="is-danger"
v-for="error in errors"
:key="error"
@close="removeError(error)"
>
{{ error }}
</b-message>
<form @submit="sendResetPasswordTokenAction" v-if="!validationSent">
<b-field :label="$t('Email address')">
<b-input aria-required="true" required type="email" v-model="credentials.email" />
</b-field>
<p class="control">
<b-button type="is-primary" native-type="submit">
{{ $t("Submit") }}
</b-button>
<router-link :to="{ name: RouteName.LOGIN }" class="button is-text">{{
$t("Cancel")
}}</router-link>
</p>
</form>
<div v-else>
<b-message type="is-success" :closable="false" title="Success">
{{ $t("We just sent an email to {email}", { email: credentials.email }) }}
</b-message>
<b-message type="is-info">
{{ $t("Please check your spam folder if you didn't receive the email.") }}
</b-message>
</div>
</div>
</div>
</section>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { validateEmailField, validateRequiredField } from "../../utils/validators";
import { SEND_RESET_PASSWORD } from "../../graphql/auth";
import RouteName from "../../router/name";
@Component
export default class SendPasswordReset extends Vue {
@Prop({ type: String, required: false, default: "" }) email!: string;
credentials = {
email: "",
} as { email: string };
validationSent = false;
RouteName = RouteName;
errors: string[] = [];
state = {
email: {
status: null,
msg: "",
} as { status: boolean | null; msg: string },
};
rules = {
required: validateRequiredField,
email: validateEmailField,
};
mounted() {
this.credentials.email = this.email;
}
removeError(message: string) {
this.errors.splice(this.errors.indexOf(message));
}
async sendResetPasswordTokenAction(e: Event) {
e.preventDefault();
try {
await this.$apollo.mutate({
mutation: SEND_RESET_PASSWORD,
variables: {
email: this.credentials.email,
},
});
this.validationSent = true;
} catch (err) {
console.error(err);
err.graphQLErrors.forEach(({ message }: { message: string }) => {
if (this.errors.indexOf(message) < 0) {
this.errors.push(message);
}
});
}
}
resetState() {
this.state = {
email: {
status: null,
msg: "",
},
};
}
}
</script>
<style lang="scss" scoped>
.container .columns {
margin: 1rem auto 3rem;
}
</style>