update email working

src/views/Account.vue

@@ -13,7 +13,7 @@
         placeholder="mail@exemple.com"
         autocomplete="username"
         class="w-full rounded-md border border-grey-200 px-16 py-12"
-        :class="{ invalid: emailRegex.test(email) }"
+        :class="{ invalid: !isEmailValid }"
         required
       />
       <p v-else>Email : {{ user.email }}</p>
@@ -21,6 +21,8 @@
         v-if="isEditingEmail"
         class="btn | w-full"
         :class="'btn--' + emailBtn.status"
+        :disabled="!isEmailValid"
+        @click="updateEmail"
       >
         {{ emailBtn.text }}
       </button>
@@ -79,6 +81,35 @@ const emailBtn = ref({
 });
 const isEditingEmail = ref(false);
 const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+const isEmailValid = computed(() => {
+  return emailRegex.test(email.value);
+});
+async function updateEmail() {
+  emailBtn.value.text = 'en cours…';
+  emailBtn.value.status = 'pending';
+
+  const headers = {
+    method: 'POST',
+    body: JSON.stringify({
+      email: email.value,
+    }),
+  };
+  const response = await fetch('update-email.json', headers);
+  const json = await response.json();
+
+  if (json.status === 'success') {
+    email.value = '';
+    emailBtn.value.text = 'mise à jour réussie';
+    emailBtn.value.status = 'succeed';
+
+    setTimeout(() => {
+      emailBtn.value.text = 'mettre à jour';
+      emailBtn.value.status = 'ready';
+    }, 1500);
+  } else {
+    console.log(json.message);
+  }
+}
 
 // Password
 const password = ref('');