78 lines
2 KiB
Vue
78 lines
2 KiB
Vue
|
<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>
|