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

78 lines
2.0 KiB
Vue
Raw Normal View History

<template>
<section class="columns">
<div class="column card">
<h1 class="title">
<translate>Resend confirmation email</translate>
</h1>
<form v-if="!validationSent" @submit="resendConfirmationAction">
<b-field label="Email">
<b-input aria-required="true" required type="email" v-model="credentials.email"/>
</b-field>
<button class="button is-primary">
<translate>Send confirmation email again</translate>
</button>
</form>
<div v-else>
<b-message type="is-success" :closable="false" title="Success">
<translate
:translate-params="{email: credentials.email}"
>If an account with this email exists, we just sent another confirmation email to %{email}</translate>
</b-message>
<b-message type="is-info">
<translate>Please check you spam folder if you didn't receive the email.</translate>
</b-message>
</div>
</div>
</section>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { validateEmailField, validateRequiredField } from "@/utils/validators";
import { RESEND_CONFIRMATION_EMAIL } from "@/graphql/auth";
@Component
export default class ResendConfirmation extends Vue {
@Prop({ type: String, required: false, default: "" }) email!: string;
credentials = {
email: ""
};
validationSent = false;
error = false;
state = {
email: {
status: null,
msg: ""
}
};
rules = {
required: validateRequiredField,
email: validateEmailField
};
mounted() {
this.credentials.email = this.email;
}
async resendConfirmationAction(e) {
e.preventDefault();
this.error = false;
try {
await this.$apollo.mutate({
mutation: RESEND_CONFIRMATION_EMAIL,
variables: {
email: this.credentials.email
}
});
} catch (err) {
console.error(err);
this.error = true;
} finally {
this.validationSent = true;
}
}
}
</script>