From 62b2f3bbfb1023e70fde03021796a407650abf88 Mon Sep 17 00:00:00 2001
From: Peaceultime <clem31470@gmail.com>
Date: Wed, 29 Jan 2025 17:39:42 +0100
Subject: [PATCH] Fix autocomplete

---
 components/base/HoverCard.vue    | 8 +++++---
 layouts/default.vue              | 2 +-
 pages/explore/edit/index.vue     | 2 +-
 pages/index.vue                  | 2 --
 pages/user/changing-password.vue | 8 ++++----
 pages/user/login.vue             | 6 +++---
 pages/user/register.vue          | 8 ++++----
 7 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/components/base/HoverCard.vue b/components/base/HoverCard.vue
index 960d795..66476af 100644
--- a/components/base/HoverCard.vue
+++ b/components/base/HoverCard.vue
@@ -4,7 +4,7 @@
             <slot></slot>
         </HoverCardTrigger>
         <HoverCardPortal v-if="!disabled">
-            <HoverCardContent :class="$attrs.class" :side="side"  class="max-h-[var(--radix-hover-card-content-available-height)] data-[side=bottom]:animate-slideUpAndFade data-[side=right]:animate-slideLeftAndFade data-[side=left]:animate-slideRightAndFade data-[side=top]:animate-slideDownAndFade w-[300px] bg-light-10 dark:bg-dark-10 border border-light-35 dark:border-dark-35 p-5 data-[state=open]:transition-all text-light-100 dark:text-dark-100" >
+            <HoverCardContent :class="$attrs.class" :side="side" :align="align" class="max-h-[var(--radix-hover-card-content-available-height)] data-[side=bottom]:animate-slideUpAndFade data-[side=right]:animate-slideLeftAndFade data-[side=left]:animate-slideRightAndFade data-[side=top]:animate-slideDownAndFade w-[300px] bg-light-10 dark:bg-dark-10 border border-light-35 dark:border-dark-35 p-5 data-[state=open]:transition-all text-light-100 dark:text-dark-100" >
                 <slot name="content"></slot>
                 <HoverCardArrow class="fill-light-35 dark:fill-dark-35" />
             </HoverCardContent>
@@ -13,11 +13,13 @@
 </template>
 
 <script setup lang="ts">
-const { delay = 500, disabled = false, side = 'bottom' } = defineProps<{
+const { delay = 500, disabled = false, side = 'bottom', align = 'center', triggerKey } = defineProps<{
     delay?: number
     disabled?: boolean
     side?: 'top' | 'right' | 'bottom' | 'left'
+    align?: 'start' | 'center' | 'end'
+    triggerKey?: string
 }>();
 
-const emits = defineEmits(['open'])
+const emits = defineEmits(['open']);
 </script>
\ No newline at end of file
diff --git a/layouts/default.vue b/layouts/default.vue
index 73fe681..f38156c 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -35,7 +35,7 @@
 						<div class="flex justify-between items-center max-md:hidden">
 							<NuxtLink class=" text-light-100 dark:text-dark-100 hover:text-opacity-70 max-md:ps-6" aria-label="Accueil" :to="{ path: '/', force: true }">
 								<Avatar src="/logo.dark.svg" class="dark:block hidden" />
-        						<Avatar src="/logo.light.svg" class="block dark:hidden" />
+								<Avatar src="/logo.light.svg" class="block dark:hidden" />
 							</NuxtLink>
 							<div class="flex gap-4 items-center">
 								<Tooltip message="Changer de theme" side="left"><ThemeSwitch /></Tooltip>
diff --git a/pages/explore/edit/index.vue b/pages/explore/edit/index.vue
index 09ebd42..60118df 100644
--- a/pages/explore/edit/index.vue
+++ b/pages/explore/edit/index.vue
@@ -36,7 +36,7 @@
 								<div class="flex flex-row justify-between items-center mb-4 px-6">
 									<div class="flex flex-1 flex-row justify-start items-center gap-4">
 										<Tooltip side="top" message="Annuler (Ctrl+Shift+W)" ><Button icon @click="router.go(-1)"><Icon class="w-5 h-5" icon="radix-icons:arrow-left" /></Button></Tooltip>
-										<Tooltip side="top" message="Enregistrer (Ctrl+S)" ><Button icon :loading="saveStatus === 'pending'" @click="save(true)"><Icon class="w-5 h-5" icon="radix-icons:check" /></Button></Tooltip>
+										<Tooltip side="top" message="Enregistrer (Ctrl+S)" ><Button icon :loading="saveStatus === 'pending'" @click="save(true)"><Icon class="w-5 h-5" icon="ph:floppy-disk" /></Button></Tooltip>
 										<span v-if="edited" class="text-sm text-light-60 dark:text-dark-60 italic">Modifications non enregistrées</span>
 									</div>
 									<div class="flex flex-row justify-end items-center gap-4">
diff --git a/pages/index.vue b/pages/index.vue
index aa25af9..56b30fa 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -3,8 +3,6 @@
         <Title>d[any] - Accueil</Title>
     </Head>
     <div class="h-full w-full flex flex-1 flex-col justify-center items-center">
-        <Avatar src="/logo.dark.svg" class="dark:block hidden w-48 h-48" />
-        <Avatar src="/logo.light.svg" class="block dark:hidden w-48 h-48" />
         <h1 class="text-5xl font-thin font-mono">Bienvenue</h1>
     </div>
 </template>
\ No newline at end of file
diff --git a/pages/user/changing-password.vue b/pages/user/changing-password.vue
index 5a7ff68..a51c338 100644
--- a/pages/user/changing-password.vue
+++ b/pages/user/changing-password.vue
@@ -8,8 +8,8 @@
             <ProseH4>Modification de mon mot de passe</ProseH4>
         </div>
         <form @submit.prevent="submit" class="flex flex-1 flex-col justify-center items-stretch">
-            <TextInput type="password" label="Ancien mot de passe" autocomplete="currentPassword" v-model="oldPasswd"/>
-            <TextInput type="password" label="Nouveau mot de passe" autocomplete="newPassword" v-model="newPasswd" :class="{ 'border-light-red dark:border-dark-red': error }"/>
+            <TextInput type="password" label="Ancien mot de passe" name="old-password" autocomplete="current-password" v-model="oldPasswd"/>
+            <TextInput type="password" label="Nouveau mot de passe" name="new-password" autocomplete="new-password" v-model="newPasswd" :class="{ 'border-light-red dark:border-dark-red': error }"/>
             <div class="grid grid-cols-2 flex-col font-light border border-light-35 dark:border-dark-35 px-4 py-2 m-4 ms-0 text-sm leading-[18px] lg:text-base order-8 col-span-2 md:col-span-1 md:order-none">
                 <span class="col-span-2">Prérequis de sécurité</span>
                 <span class="ps-4 flex items-center gap-2" :class="{'text-light-red dark:text-dark-red': !checkedLength}"><Icon v-show="!checkedLength" icon="radix-icons:cross-2" />8 à 128 caractères</span>
@@ -18,8 +18,8 @@
                 <span class="ps-4 flex items-center gap-2" :class="{'text-light-red dark:text-dark-red': !checkedDigit}"><Icon v-show="!checkedDigit" icon="radix-icons:cross-2" />Un chiffre</span>
                 <span class="ps-4 flex items-center gap-2" :class="{'text-light-red dark:text-dark-red': !checkedSymbol}"><Icon v-show="!checkedSymbol" icon="radix-icons:cross-2" />Un caractère special</span>
             </div>
-            <TextInput type="password" label="Repeter le nouveau mot de passe" autocomplete="newPassword" v-model="repeatPasswd" :class="{ 'border-light-red dark:border-dark-red': manualError }"/>
-            <Button class="border border-light-35 dark:border-dark-35 self-center" :loading="status === 'pending'">Mettre à jour mon mot de passe</Button>
+            <TextInput type="password" label="Repeter le nouveau mot de passe" autocomplete="new-password" v-model="repeatPasswd" :class="{ 'border-light-red dark:border-dark-red': manualError }"/>
+            <Button type="submit" class="border border-light-35 dark:border-dark-35 self-center" :loading="status === 'pending'">Mettre à jour mon mot de passe</Button>
         </form>
     </div>
 </template>
diff --git a/pages/user/login.vue b/pages/user/login.vue
index b44c8c2..1488d4d 100644
--- a/pages/user/login.vue
+++ b/pages/user/login.vue
@@ -8,9 +8,9 @@
             <ProseH4>Connexion</ProseH4>
         </div>
         <form @submit.prevent="() => submit()" class="flex flex-1 flex-col justify-center items-stretch">
-            <TextInput type="text" label="Utilisateur ou email" autocomplete="username" v-model="state.usernameOrEmail"/>
-            <TextInput type="password" label="Mot de passe" autocomplete="current-password" v-model="state.password"/>
-            <Button class="border border-light-35 dark:border-dark-35 self-center" :loading="status === 'pending'">Se connecter</Button>
+            <TextInput type="text" label="Utilisateur ou email" name="username" autocomplete="username email" v-model="state.usernameOrEmail"/>
+            <TextInput type="password" label="Mot de passe" name="password" autocomplete="current-password" v-model="state.password"/>
+            <Button type="submit" class="border border-light-35 dark:border-dark-35 self-center" :loading="status === 'pending'">Se connecter</Button>
             <NuxtLink class="mt-4 text-center block text-sm font-semibold tracking-wide hover:text-accent-blue" :to="{ name: 'user-reset-password' }">Mot de passe oublié ?</NuxtLink>
             <NuxtLink class="mt-4 text-center block text-sm font-semibold tracking-wide hover:text-accent-blue" :to="{ name: 'user-register' }">Pas de compte ?</NuxtLink>
         </form>
diff --git a/pages/user/register.vue b/pages/user/register.vue
index 3f2d370..8c44575 100644
--- a/pages/user/register.vue
+++ b/pages/user/register.vue
@@ -8,9 +8,9 @@
             <ProseH4>Inscription</ProseH4>
         </div>
         <form @submit.prevent="() => submit()" class="grid flex-1 p-4 grid-cols-2 md:grid-cols-1 gap-4 md:gap-0">
-            <TextInput type="text" label="Nom d'utilisateur" autocomplete="username" v-model="state.username" class="w-full md:w-auto"/>
-            <TextInput type="email" label="Email" autocomplete="email" v-model="state.email" class="w-full md:w-auto"/>
-            <TextInput type="password" label="Mot de passe" autocomplete="new-password" v-model="state.password" class="w-full md:w-auto"/>
+            <TextInput type="text" label="Nom d'utilisateur" name="username" autocomplete="username" v-model="state.username" class="w-full md:w-auto"/>
+            <TextInput type="email" label="Email" name="email" autocomplete="email" v-model="state.email" class="w-full md:w-auto"/>
+            <TextInput type="password" label="Mot de passe" name="password" autocomplete="new-password" v-model="state.password" class="w-full md:w-auto"/>
             <div class="grid grid-cols-2 flex-col font-light border border-light-35 dark:border-dark-35 px-4 py-2 m-4 ms-0 text-sm leading-[18px] lg:text-base order-8 col-span-2 md:col-span-1 md:order-none">
                 <span class="col-span-2">Prérequis de sécurité</span>
                 <span class="ps-4 flex items-center gap-2" :class="{'text-light-red dark:text-dark-red': !checkedLength}"><Icon v-show="!checkedLength" icon="radix-icons:cross-2" />8 à 128 caractères</span>
@@ -20,7 +20,7 @@
                 <span class="ps-4 flex items-center gap-2" :class="{'text-light-red dark:text-dark-red': !checkedSymbol}"><Icon v-show="!checkedSymbol" icon="radix-icons:cross-2" />Un caractère special</span>
             </div>
             <TextInput type="password" label="Confirmation du mot de passe" autocomplete="new-password" v-model="confirmPassword" class="w-full md:w-auto"/>
-            <Button class="border border-light-35 dark:border-dark-35 max-w-48 w-full order-9 col-span-2 md:col-span-1 m-auto" :loading="status === 'pending'">S'inscrire</Button>
+            <Button type="submit" class="border border-light-35 dark:border-dark-35 max-w-48 w-full order-9 col-span-2 md:col-span-1 m-auto" :loading="status === 'pending'">S'inscrire</Button>
             <span class="mt-4 order-10 flex justify-center items-center gap-4 col-span-2 md:col-span-1 m-auto">Vous avez déjà un compte ?<NuxtLink class="text-center block text-sm font-semibold tracking-wide hover:text-accent-blue" :to="{ name: 'user-login' }">Se connecter</NuxtLink></span>
         </form>
     </div>