front > account : update password working

src/views/Account.vue

@@ -17,7 +17,13 @@
         required
       />
       <p v-else>Email : {{ user.email }}</p>
-      <button v-if="isEditingEmail" class="btn | w-full">enregistrer</button>
+      <button
+        v-if="isEditingEmail"
+        class="btn | w-full"
+        :class="'btn--' + emailBtn.status"
+      >
+        {{ emailBtn.text }}
+      </button>
       <button v-else @click="isEditingEmail = true" class="btn | w-full">
         modifier
       </button>
@@ -43,9 +49,11 @@
       />
       <button
         class="btn | w-full"
+        :class="'btn--' + passwordBtn.status"
         :disabled="!isPasswordConfirmed ? true : undefined"
+        @click="updatePassword"
       >
-        enregistrer
+        {{ passwordBtn.text }}
       </button>
     </li>
     <li>
@@ -63,21 +71,66 @@ import { computed, ref, watch } from 'vue';
 
 const { user } = storeToRefs(useUserStore());
 
+// Email
 const email = ref('');
+const emailBtn = ref({
+  text: 'mettre à jour',
+  status: 'ready',
+});
 const isEditingEmail = ref(false);
 const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
 
+// Password
 const password = ref('');
+const passwordBtn = ref({
+  text: 'mettre à jour',
+  status: 'ready',
+});
 const passwordConfirm = ref('');
 const isPasswordConfirmed = computed(() => {
   return (
-    passwordConfirm.value.length > 0 && passwordConfirm.value === password.value
+    passwordConfirm.value.length > 7 && passwordConfirm.value === password.value
   );
 });
+async function updatePassword() {
+  passwordBtn.value.text = 'en cours…';
+  passwordBtn.value.status = 'pending';
+
+  const headers = {
+    method: 'POST',
+    body: JSON.stringify({
+      password: password.value,
+    }),
+  };
+  const response = await fetch('update-password.json', headers);
+  const json = await response.json();
+
+  if (json.status === 'success') {
+    password.value = '';
+    passwordConfirm.value = '';
+    passwordBtn.value.text = 'mise à jour réussie';
+    passwordBtn.value.status = 'succeed';
+
+    setTimeout(() => {
+      passwordBtn.value.text = 'mettre à jour';
+      passwordBtn.value.status = 'ready';
+    }, 1500);
+  } else {
+    console.log(json.message);
+  }
+}
 </script>
 
 <style scoped>
 input.invalid:focus-visible {
   outline: 2px solid #ef8d8d;
 }
+
+.btn--pending {
+  background-color: #ffdb88;
+}
+
+.btn--succeed {
+  background-color: rgb(182, 211, 255);
+}
 </style>