front > account : password form confirmation visually workin g

src/views/Account.vue

@@ -7,7 +7,6 @@
     <li :class="{ 'is-editing': isEditingEmail }">
       <input
         v-if="isEditingEmail"
-        @input="updateEmail"
         type="email"
         v-model="email"
         id="username"
@@ -25,14 +24,29 @@
     </li>
     <li :class="{ 'is-editing': isEditingEmail }">
       <input
-        @input="updatePassword"
         type="password"
         v-model="password"
         id="password"
+        placeholder="Minimum 8 caractères"
         class="w-full rounded-md border border-grey-200 px-16 py-12"
         :class="{ invalid: password.length < 8 }"
         required
       />
+      <input
+        type="password"
+        v-model="passwordConfirm"
+        id="password-confirm"
+        placeholder="Minimum 8 caractères"
+        class="w-full rounded-md border border-grey-200 px-16 py-12"
+        :class="{ invalid: !isPasswordConfirmed }"
+        required
+      />
+      <button
+        class="btn | w-full"
+        :disabled="!isPasswordConfirmed ? true : undefined"
+      >
+        enregistrer
+      </button>
     </li>
     <li>
       <p>Client : {{ user.client.name }}</p>
@@ -45,7 +59,7 @@
 <script setup>
 import { storeToRefs } from 'pinia';
 import { useUserStore } from '../stores/user';
-import { ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 
 const { user } = storeToRefs(useUserStore());
 
@@ -54,10 +68,12 @@ const isEditingEmail = ref(false);
 const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
 
 const password = ref('');
-
-function updateEmail(event) {
-  email.value = event.target.value;
-}
+const passwordConfirm = ref('');
+const isPasswordConfirmed = computed(() => {
+  return (
+    passwordConfirm.value.length > 0 && passwordConfirm.value === password.value
+  );
+});
 </script>
 
 <style scoped>