fix(front): Improve resend inscription instructions view and show error when appropriate

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2023-05-17 09:54:33 +02:00
parent c420bbccc9
commit 5563052795
No known key found for this signature in database
GPG key ID: A061B9DDE0CA0773

View file

@ -3,16 +3,20 @@
<h1> <h1>
{{ $t("Resend confirmation email") }} {{ $t("Resend confirmation email") }}
</h1> </h1>
<o-notification v-if="error" variant="danger">
{{ errorMessage }}
</o-notification>
<form v-if="!validationSent" @submit="resendConfirmationAction"> <form v-if="!validationSent" @submit="resendConfirmationAction">
<o-field :label="$t('Email address')"> <o-field :label="$t('Email address')" labelFor="emailAddress">
<o-input <o-input
aria-required="true" aria-required="true"
required required
type="email" type="email"
id="emailAddress"
v-model="credentials.email" v-model="credentials.email"
/> />
</o-field> </o-field>
<p class="flex flex-wrap gap-1"> <p class="flex flex-wrap gap-1 mt-2">
<o-button variant="primary" native-type="submit"> <o-button variant="primary" native-type="submit">
{{ $t("Send the confirmation email again") }} {{ $t("Send the confirmation email again") }}
</o-button> </o-button>
@ -34,7 +38,7 @@
) )
}} }}
</o-notification> </o-notification>
<o-notification variant="info"> <o-notification variant="info" class="mt-2">
{{ {{
$t("Please check your spam folder if you didn't receive the email.") $t("Please check your spam folder if you didn't receive the email.")
}} }}
@ -65,6 +69,7 @@ const credentials = reactive({
const validationSent = ref(false); const validationSent = ref(false);
const error = ref(false); const error = ref(false);
const errorMessage = ref<string>();
const { const {
mutate: resendConfirmationEmail, mutate: resendConfirmationEmail,
@ -79,6 +84,7 @@ resentConfirmationEmail(() => {
resentConfirmationEmailError((err) => { resentConfirmationEmailError((err) => {
console.error(err); console.error(err);
error.value = true; error.value = true;
errorMessage.value = err.graphQLErrors[0].message;
}); });
const resendConfirmationAction = async (e: Event): Promise<void> => { const resendConfirmationAction = async (e: Event): Promise<void> => {