From 55630527957d4f6a2e1e6845e64a92bc4794efc8 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Wed, 17 May 2023 09:54:33 +0200
Subject: [PATCH] fix(front): Improve resend inscription instructions view and
 show error when appropriate

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/views/User/ResendConfirmation.vue | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/js/src/views/User/ResendConfirmation.vue b/js/src/views/User/ResendConfirmation.vue
index 3dffee670..f13f122ed 100644
--- a/js/src/views/User/ResendConfirmation.vue
+++ b/js/src/views/User/ResendConfirmation.vue
@@ -3,16 +3,20 @@
     <h1>
       {{ $t("Resend confirmation email") }}
     </h1>
+    <o-notification v-if="error" variant="danger">
+      {{  errorMessage  }}
+    </o-notification>
     <form v-if="!validationSent" @submit="resendConfirmationAction">
-      <o-field :label="$t('Email address')">
+      <o-field :label="$t('Email address')" labelFor="emailAddress">
         <o-input
           aria-required="true"
           required
           type="email"
+          id="emailAddress"
           v-model="credentials.email"
         />
       </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">
           {{ $t("Send the confirmation email again") }}
         </o-button>
@@ -34,7 +38,7 @@
           )
         }}
       </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.")
         }}
@@ -65,6 +69,7 @@ const credentials = reactive({
 
 const validationSent = ref(false);
 const error = ref(false);
+const errorMessage = ref<string>();
 
 const {
   mutate: resendConfirmationEmail,
@@ -79,6 +84,7 @@ resentConfirmationEmail(() => {
 resentConfirmationEmailError((err) => {
   console.error(err);
   error.value = true;
+  errorMessage.value = err.graphQLErrors[0].message;
 });
 
 const resendConfirmationAction = async (e: Event): Promise<void> => {