Add buttons to show password

src/components/LoginForm.vue

@@ -6,6 +6,7 @@ import { useUserStore } from '@/stores/user.store';
 
 import FormField from './FormField.vue';
 import Modal from './Modal.vue';
+import PasswordInput from './PasswordInput.vue';
 
 const { ask_reset_password, login } = useUserStore();
 
@@ -79,14 +80,11 @@ const openModal = () => {
         <label for="password">
           Mot de passe
         </label>
-        <input
+        <PasswordInput
           id="password"
           v-model="login_form.password"
-          :class="{ error: context.invalid }"
-          class="border-2 bg-theme-bg"
-          placeholder="Mot de passe"
-          type="password"
-          @blur="v$.password.$touch"
+          :error="context.invalid"
+          :on-blur="v$.password.$touch"
         />
       </FormField>
       <div class="flex flex-col items-center">

src/components/PasswordInput.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const showPassword = ref(false);
+
+interface Props {
+  id?: string;
+  error: boolean;
+  placeholder?: string;
+  ariaLabel?: string;
+  required?: boolean;
+  onBlur: () => void;
+  modelValue: string;
+}
+
+defineProps<Props>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void;
+}>();
+
+const onInput = (event: Event): void => {
+  const target = event.target as HTMLInputElement;
+  emit('update:modelValue', target.value);
+};
+
+const onClick = (): void => {
+  showPassword.value = !showPassword.value;
+};
+</script>
+
+<template>
+  <div
+    :class="{ error: error }"
+    class="flex border-2 border-gray-500 focus-within:border-blue-600 focus-within:ring-1 focus-within:ring-blue-600"
+  >
+    <input
+      :id="id"
+      :value="modelValue"
+      :type="showPassword ? 'text' : 'password'"
+      class="min-w-0 grow border-0 bg-theme-bg focus:ring-0"
+      :placeholder="placeholder || 'Mot de passe'"
+      :aria-label="ariaLabel || 'Mot de passe'"
+      :required="required"
+      @input="onInput"
+      @blur="onBlur"
+    />
+    <button type="button" class="mx-3 w-6" @click="onClick">
+      <fa-awesome-icon
+        :icon="showPassword ? 'fa-solid fa-eye-slash' : 'fa-solid fa-eye'"
+        title="Afficher le mot de passe"
+      />
+    </button>
+  </div>
+</template>

src/components/PasswordResetForm.vue

@@ -7,6 +7,7 @@ import { computed, reactive } from 'vue';
 import { useUserStore } from '@/stores/user.store';
 
 import FormField from './FormField.vue';
+import PasswordInput from './PasswordInput.vue';
 
 const { reset_password } = useUserStore();
 
@@ -47,29 +48,24 @@ const register_user = async () => {
         <label for="password">
           Nouveau mot de passe
         </label>
-        <input
+        <PasswordInput
           id="password"
           v-model="data.password"
-          :class="{ error: context.invalid }"
-          class="border-2 bg-theme-bg"
-          placeholder="Mot de passe"
-          type="password"
-          @blur="v$.password.$touch"
+          :error="context.invalid"
+          :on-blur="v$.password.$touch"
         />
       </FormField>
       <FormField v-slot="context" :validations="v$.password_confirm" class="flex flex-col" required>
         <label for="repeat">
           Répéter le mot de passe
         </label>
-        <input
+        <PasswordInput
           id="repeat"
           v-model="data.password_confirm"
-          :class="{ error: context.invalid }"
-          class="border-2 bg-theme-bg"
+          :error="context.invalid"
           placeholder="Mot de passe"
           required
-          type="password"
-          @blur="v$.password_confirm.$touch"
+          :on-blur="v$.password_confirm.$touch"
         />
       </FormField>
       <div class="flex justify-center">

src/components/RegisterForm.vue

@@ -12,6 +12,7 @@ import { useUserStore } from '@/stores/user.store';
 import Content from './Content.vue';
 import FormField from './FormField.vue';
 import Modal from './Modal.vue';
+import PasswordInput from './PasswordInput.vue';
 
 const contentStore = useContentStore();
 const { getContent } = contentStore;
@@ -115,29 +116,23 @@ const register_user = async () => {
         <label for="password_register">
           Mot de passe
         </label>
-        <input
+        <PasswordInput
           id="password_register"
           v-model="register_form.password"
-          :class="{ error: context.invalid }"
-          class="border-2 bg-theme-bg"
-          placeholder="Mot de passe"
-          type="password"
-          @blur="v$.password.$touch"
+          :error="context.invalid"
+          :on-blur="v$.password.$touch"
         />
       </FormField>
       <FormField v-slot="context" :validations="v$.password_confirm" class="flex flex-col">
         <label for="repeat">
           Répéter mot de passe
         </label>
-        <input
+        <PasswordInput
           id="repeat"
           v-model="register_form.password_confirm"
-          :class="{ error: context.invalid }"
-          class="border-2 bg-theme-bg"
-          placeholder="Mot de passe"
+          :error="context.invalid"
           required
-          type="password"
-          @blur="v$.password_confirm.$touch"
+          :on-blur="v$.password_confirm.$touch"
         />
       </FormField>
       <FormField v-slot="context" :validations="v$.accept_cgu" class="flex flex-col" required>

src/main.ts

@@ -1,7 +1,7 @@
 import { library } from '@fortawesome/fontawesome-svg-core';
 import {
-  faArrowsRotate, faCircle, faCircleCheck, faCirclePlus, faClock,
-  faFile, faPencil, faWarning,
+  faArrowsRotate, faCircle, faCircleCheck, faCirclePlus, faClock, faEye,
+  faEyeSlash, faFile, faPencil, faWarning,
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import axios, { type AxiosError } from 'axios';
@@ -16,7 +16,18 @@ import App from './App.vue';
 import './style.css';
 
 /* add icons to the library */
-library.add(faCirclePlus, faPencil, faWarning, faFile, faArrowsRotate, faCircleCheck, faCircle, faClock);
+library.add(
+  faCirclePlus,
+  faPencil,
+  faWarning,
+  faFile,
+  faArrowsRotate,
+  faCircleCheck,
+  faCircle,
+  faClock,
+  faEye,
+  faEyeSlash,
+);
 
 axios.defaults.baseURL = import.meta.env.VITE_API_URL;
 axios.defaults.withCredentials = true;

src/views/Me.vue

@@ -10,6 +10,7 @@ import {
 import placeholder from '@/assets/images/logo_home.png';
 import FormField from '@/components/FormField.vue';
 import Modal from '@/components/Modal.vue';
+import PasswordInput from '@/components/PasswordInput.vue';
 import type { PlayerRegistrationDeref } from '@/models/registration';
 import type { Tournament } from '@/models/tournament';
 import { useTournamentStore } from '@/stores/tournament.store';
@@ -490,15 +491,13 @@ const editField = (field: string) => {
             class="m-2 flex flex-col"
             label="Nouveau mot de passe"
           >
-            <input
+            <PasswordInput
               v-model="data_password.new_password"
-              :class="{ error: context.invalid }"
+              :error="context.invalid"
               aria-label="Nouveau mot de passe"
-              class="border-2 bg-theme-bg"
               placeholder="Nouveau mot de passe"
               required
-              type="password"
-              @blur="v$_password.new_password.$touch"
+              :on-blur="v$_password.new_password.$touch"
             />
           </FormField>
           <FormField
@@ -507,15 +506,13 @@ const editField = (field: string) => {
             class="m-2 flex flex-col"
             label="Confirmer le mot de passe"
           >
-            <input
+            <PasswordInput
               v-model="data_password.password_validation"
-              :class="{ error: context.invalid }"
+              :error="context.invalid"
               aria-label="Confirmer le mot de passe"
-              class="border-2 bg-theme-bg"
               placeholder="Confirmer le mot de passe"
               required
-              type="password"
-              @blur="v$_password.password_validation.$touch"
+              :on-blur="v$_password.password_validation.$touch"
             />
           </FormField>
           <FormField
@@ -524,15 +521,13 @@ const editField = (field: string) => {
             class="m-2 flex flex-col"
             label="Mot de passe actuel"
           >
-            <input
+            <PasswordInput
               v-model="data_password.current_password"
-              :class="{ error: context.invalid }"
+              :error="context.invalid"
               aria-label="mot de passe actuel"
-              class="border-2 bg-theme-bg"
               placeholder="Mot de passe actuel"
               required
-              type="password"
-              @blur="v$_password.current_password.$touch"
+              :on-blur="v$_password.current_password.$touch"
             />
           </FormField>
         </div>