🩹 fixing the visibility of the result when forgot pwd

modules/app/components/FOHeader.vue

@@ -35,7 +35,7 @@ const signOut = async () => {
 </script>
 
 <template>
-  <UHeader :links="links" class="bg-white dark:bg-gray-900 rounded-xl shadow-lg mx-4 mt-4">
+  <UHeader class="bg-white dark:bg-gray-900 rounded-xl shadow-lg mx-4 mt-4">
     <template #left>
       <NuxtLink to="/">
         <NuxtImg src="/assets/img/logo-fo.svg" alt="Force Orange" />
@@ -43,7 +43,7 @@ const signOut = async () => {
     </template>
 
     <template #right>
-      <UColorModeButton />
+      <UHeaderLinks class="mx-2" :ui="{ base: 'gap-2' }" :links="links" />
 
       <template v-if="user">
         <UButton to="/profile" :loading="loading" icon="i-mdi-account-circle">
@@ -53,6 +53,7 @@ const signOut = async () => {
       </template>
 
       <UButton v-else to="/signin" variant="soft">Se connecter</UButton>
+      <UColorModeButton />
     </template>
   </UHeader>
 

modules/app/components/PasswordStrength.vue

@@ -29,6 +29,18 @@ const color = computed(() => {
       <UMeter :value="strength.score" :max="4" :color="color">
         <template #label>
           <p class="text-sm font-thin">
+            <UPopover class="inline-block align-middle">
+              <UIcon name="i-mdi-info-circle" color="blue" class="w-5 h-5 mr-2 hover:text-blue-300" />
+              <template #panel>
+                <p class="max-w-sm p-4 text-gray-400 font-thin">
+                  Un mot bon mot de passe est souvent lié au nombres de charactères (une phrase est un bon mot de
+                  passe) et à sa complexité à deviner (non, votre code postal et le nom de votre lapin n'est pas un bon
+                  motde
+                  passe)
+                </p>
+              </template>
+            </UPopover>
+
             <template v-if="strength.score === 1">
               Le mot de passe est faible
             </template>
@@ -44,16 +56,6 @@ const color = computed(() => {
           </p>
         </template>
       </UMeter>
-      <UPopover>
-        <UIcon name="i-mdi-info-circle" color="blue" class="w-5 h-5 m-2 hover:text-blue-300" />
-        <template #panel>
-          <p class="max-w-sm p-4 text-gray-400 font-thin">
-            Un mot bon mot de passe est souvent lié au nombres de charactères (une phrase est un bon mot de
-            passe) et à sa complexité à deviner (non, votre code postal et le nom de votre lapin n'est pas un bon motde
-            passe)
-          </p>
-        </template>
-      </UPopover>
     </div>
   </div>
 </template>

modules/app/pages/signin/forgot.vue

@@ -27,7 +27,7 @@ const state = reactive({
   email: undefined,
 })
 
-async function onSignin(event: FormSubmitEvent<Schema>) {
+async function onSend(event: FormSubmitEvent<Schema>) {
   loading.value = true
   const formSubmit = event.data
 
@@ -58,22 +58,7 @@ async function onSignin(event: FormSubmitEvent<Schema>) {
 </script>
 
 <template>
-  <UCard class="container mx-auto max-w-screen-md">
-    <h1 class="text-2xl uppercase mb-4">Réinitialiser votre mot de passe</h1>
-    <p>Nous pouvons envoyer un lien de récupération à l’adresse courriel associé à votre compte.</p>
-
-    <UForm :schema="schema" :state="state" @submit="onSignin" class="my-8">
-      <UFormGroup :ui="formGroupStyle.ui" label="Adresse courriel" name="email">
-        <UInput :ui="inputStyle.ui" v-bind="inputStyle.attrs" v-model="state.email" />
-      </UFormGroup>
-
-      <p class="mt-8 text-center">
-        <UButton type="submit" variant="soft" :disabled="loading" :loading="loading">Récupérer mon compte</UButton>
-      </p>
-    </UForm>
-  </UCard>
-
-  <UCard v-if="sended">
+  <UCard v-if="sended" class="container mx-auto max-w-screen-md">
     <h1 class="text-2xl uppercase mb-8">C’est partit</h1>
     <p>
       Si nous avons connaissance de cette adresse, vous devriez recevoir un courriel contenant les instructions pour
@@ -85,4 +70,19 @@ async function onSignin(event: FormSubmitEvent<Schema>) {
       </UButton>
     </p>
   </UCard>
+
+  <UCard v-else class="container mx-auto max-w-screen-md">
+    <h1 class="text-2xl uppercase mb-4">Réinitialiser votre mot de passe</h1>
+    <p>Nous pouvons envoyer un lien de récupération à l’adresse courriel associé à votre compte.</p>
+
+    <UForm :schema="schema" :state="state" @submit="onSend" class="my-8">
+      <UFormGroup :ui="formGroupStyle.ui" label="Adresse courriel" name="email">
+        <UInput :ui="inputStyle.ui" v-bind="inputStyle.attrs" v-model="state.email" />
+      </UFormGroup>
+
+      <p class="mt-8 text-center">
+        <UButton type="submit" variant="soft" :disabled="loading" :loading="loading">Récupérer mon compte</UButton>
+      </p>
+    </UForm>
+  </UCard>
 </template>