update email working

public/site/config/config.php

@@ -34,6 +34,7 @@ return [
     require(__DIR__ . '/routes/save-file.php'),
     require(__DIR__ . '/routes/remove-file.php'),
     require(__DIR__ . '/routes/update-password.php'),
+    require(__DIR__ . '/routes/update-email.php'),
     require(__DIR__ . '/routes/upload-pdf.php'),
     require(__DIR__ . '/routes/validate-brief.php'),
     require(__DIR__ . '/routes/request-project-creation.php'),

public/site/config/routes/update-email.php

@@ -0,0 +1,22 @@
+<?php
+
+return [
+  'pattern' => '/update-email.json',
+  'method' => 'POST',
+  'action' => function() {
+    $json = file_get_contents("php://input");
+    $data = json_decode($json);
+
+    try {
+      kirby()->user()->changeEmail($data->email);
+      return [
+        'status' => 'success'
+      ];
+    } catch (\Throwable $th) {
+      return [
+        'status' => 'error',
+        'message' => 'Impossible de mettre à jour l\'email : ' . $th->getMessage() . ' in file ' . $th->getFile() . ' line ' . $th->getLine()
+      ];
+    }
+  }
+];

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('');