front > login : login page working

public/site/config/config.php

@@ -27,6 +27,7 @@ return [
   ],
   'routes' => [
     require(__DIR__ . '/routes/logout.php'),
+    require(__DIR__ . '/routes/login.php'),
     require(__DIR__ . '/routes/toggle-favorite.php'),
     require(__DIR__ . '/routes/upload-images.php'),
     require(__DIR__ . '/routes/save-page.php'),

public/site/config/routes/login.php

@@ -0,0 +1,35 @@
+<?php
+
+return [
+  "pattern" => "login.json",
+  "method" => "POST",
+  "action"  => function () {
+    $json = file_get_contents("php://input");
+    $data = json_decode($json);
+
+    $kirby = kirby();
+
+    $email = $data->email;
+		$password = $data->password;
+		
+    if(V::email($email)) {
+			try {
+        $kirby->auth()->login($email, $password);
+        return json_encode([
+          "status" => "success",
+          "role" => (string) $kirby->user()->role()
+        ]);
+      } catch (Exception $e) {
+        return json_encode([
+          "status" => "error",
+          "message" => "<strong>Email ou mot de passe invalide.</strong><br>Contactez l'administrateur pour demander la réinitialisation de vos informations de connexion."
+        ]);
+      }
+		} else {
+      return json_encode([
+        "status" => "error",
+        "message" => "<strong>Email invalide.</strong>"
+      ]);
+    }
+  },
+];

public/site/config/routes/logout.php

@@ -10,6 +10,6 @@ return [
           session_start();
       }
 
-      go(site()->panel()->url());
+      go(site()->url() . '/login');
   },
 ];

src/views/Login.vue

@@ -2,17 +2,19 @@
   <form
     @submit.prevent="handleSubmit"
     class="px-24 py-32 flex flex-col mx-auto bg-white rounded-xl"
-    style="--row-gap: 1rem; max-width: 24em;"
+    style="--row-gap: 1rem; max-width: 24em"
   >
     <div class="field | w-full">
       <label for="username">Email</label>
       <input
+        @input="updateEmail"
         type="email"
         v-model="email"
         id="username"
         placeholder="mail@exemple.com"
         autocomplete="username"
         class="w-full rounded-md border border-grey-200 px-16 py-12"
+        :class="{ invalid: !isValidEmail }"
         required
       />
     </div>
@@ -27,11 +29,77 @@
         required
       />
     </div>
-    <button @click="login" class="btn | w-full" type="submit">Connexion</button>
+    <p class="error" v-if="errorMessage" v-html="errorMessage"></p>
+    <button
+      @click="login"
+      :class="submitBtn.state"
+      class="btn | w-full"
+      type="submit"
+      :disabled="submitBtn.state === 'pending' ? true : undefined"
+    >
+      {{ submitBtn.message }}
+    </button>
   </form>
 </template>
 <script setup>
-function login() {
+import { ref, watch } from 'vue';
-  console.log('test');
+
+const email = ref('');
+const isValidEmail = ref(false);
+const password = ref('');
+const errorMessage = ref(null);
+
+const submitBtn = ref({
+  message: 'Connexion',
+  state: 'ready',
+});
+
+watch(email, (newEmail) => {
+  const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+  isValidEmail.value = regex.test(newEmail);
+});
+function updateEmail(event) {
+  email.value = event.target.value;
+}
+
+async function login() {
+  if (email.value.length === 0 || password.value.length === 0) {
+    errorMessage.value = 'Veuillez remplir les champs.';
+  }
+
+  submitBtn.value.message = 'En cours…';
+  submitBtn.value.state = 'pending';
+
+  const headers = {
+    method: 'POST',
+    body: JSON.stringify({
+      email: email.value,
+      password: password.value,
+    }),
+  };
+  const res = await fetch('/login.json', headers);
+  const json = await res.json();
+
+  if (json.status === 'success') {
+    if (json.role === 'admin') {
+      location.href = '/panel';
+    } else {
+      location.href = '/';
+    }
+  } else {
+    errorMessage.value = json.message;
+    submitBtn.value.message = 'Réessayer';
+    submitBtn.value.state = 'ready';
+  }
 }
 </script>
+
+<style scoped>
+.error {
+  color: #ee6767;
+}
+
+input.invalid:focus-visible {
+  outline: 2px solid #ef8d8d;
+}
+</style>