front > account : update password working

public/site/config/config.php

@@ -33,6 +33,7 @@ return [
     require(__DIR__ . '/routes/save-page.php'),
     require(__DIR__ . '/routes/save-file.php'),
     require(__DIR__ . '/routes/remove-file.php'),
+    require(__DIR__ . '/routes/update-password.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-password.php

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

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>