From ec26dd145de46a241a26d876ae676344543ebfb0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dani=C3=ABl=20van=20Drunen?= <daniel@pixely.me>
Date: Sun, 13 Aug 2023 02:55:23 +0200
Subject: [PATCH] Create barebones sequence for logging in

---
 app/Http/Controllers/Api/LogInController.php  | 38 +++++++++++++++++++
 resources/assets/js/prototype/app.js          |  5 +++
 .../assets/js/prototype/screens/Dashboard.vue | 11 ++++++
 .../assets/js/prototype/screens/Login.vue     | 33 ++++++++++++++--
 routes/api.php                                |  5 ++-
 5 files changed, 86 insertions(+), 6 deletions(-)
 create mode 100644 app/Http/Controllers/Api/LogInController.php
 create mode 100644 resources/assets/js/prototype/screens/Dashboard.vue

diff --git a/app/Http/Controllers/Api/LogInController.php b/app/Http/Controllers/Api/LogInController.php
new file mode 100644
index 00000000..2afb3f49
--- /dev/null
+++ b/app/Http/Controllers/Api/LogInController.php
@@ -0,0 +1,38 @@
+<?php
+
+namespace App\Http\Controllers\Api;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+
+class LogInController extends Controller
+{
+    public function __invoke(Request $request): JsonResponse
+    {
+        $request->validate([
+            'email' => ['required'],
+            'password' => ['required'],
+        ]);
+
+        if (
+            Auth::attempt([
+                'email' => $request->input('email'),
+                'password' => $request->input('password'),
+            ])
+        ) {
+            // LOG ATTEMPT?
+
+            return response()
+                ->json([
+                    'token' => 'TOKEN_GOES_HERE',
+                ]);
+        } else {
+            // LOG ATTEMPT?
+
+            return response()
+                    ->json(['error' => 'UNABLE_TO_LOG_IN']);
+        }
+    }
+}
diff --git a/resources/assets/js/prototype/app.js b/resources/assets/js/prototype/app.js
index 9d60f8cd..f2e982e8 100644
--- a/resources/assets/js/prototype/app.js
+++ b/resources/assets/js/prototype/app.js
@@ -4,6 +4,7 @@ import VueRouter from 'vue-router';
 import App from './components/App.vue';
 
 import Login from './screens/Login.vue';
+import Dashboard from './screens/Dashboard.vue';
 
 Vue.use(VueRouter);
 
@@ -12,6 +13,10 @@ const routes = [
         path: '/prototype/login',
         name: 'login',
         component: Login,
+    }, {
+        path: '/prototype/dashboard',
+        name: 'dashboard',
+        component: Dashboard,
     },
 ];
 
diff --git a/resources/assets/js/prototype/screens/Dashboard.vue b/resources/assets/js/prototype/screens/Dashboard.vue
new file mode 100644
index 00000000..4c14c6f3
--- /dev/null
+++ b/resources/assets/js/prototype/screens/Dashboard.vue
@@ -0,0 +1,11 @@
+<script setup>
+//
+</script>
+
+<template>
+    <div>
+        <div class="max-w-5xl mx-auto my-10">
+            Hello world
+        </div>
+    </div>
+</template>
diff --git a/resources/assets/js/prototype/screens/Login.vue b/resources/assets/js/prototype/screens/Login.vue
index 0c56170e..0d63e077 100644
--- a/resources/assets/js/prototype/screens/Login.vue
+++ b/resources/assets/js/prototype/screens/Login.vue
@@ -1,5 +1,30 @@
 <script setup>
-//
+import axios from 'axios';
+import { getCurrentInstance, ref } from 'vue';
+
+const router = getCurrentInstance().proxy.$router;
+
+const email = ref('');
+const password = ref('');
+
+const logIn = () => {
+    axios
+        .post('/api/log-in', { email: email.value, password: password.value })
+        .then(response => {
+            const json = response.data;
+
+            if (json.token) {
+                router.push('dashboard');
+            }
+
+            if (json.error) {
+                alert('Unable to log in');
+            }
+        })
+        .catch(() => {
+            alert('Unable to log in');
+        });
+};
 </script>
 
 <template>
@@ -7,13 +32,13 @@
         <div class="p-5 bg-white border rounded-md space-y-5">
             <div>
                 <label class="block mb-1 text-sm text-gray-700">E-mail</label>
-                <input class="w-full px-3 py-2 text-sm border rounded-md" type="email" />
+                <input class="w-full px-3 py-2 text-sm border rounded-md" type="email" v-model="email" />
             </div>
             <div>
                 <label class="block mb-1 text-sm text-gray-700">Password</label>
-                <input class="w-full px-3 py-2 text-sm border rounded-md" type="password" />
+                <input class="w-full px-3 py-2 text-sm border rounded-md" type="password" v-model="password" @keyup.enter="logIn" />
             </div>
-            <button class="w-full py-2.5 hover:bg-blue-600 transition text-sm bg-blue-500 text-white rounded-md">Log in</button>
+            <button class="w-full py-2.5 hover:bg-blue-600 transition text-sm bg-blue-500 text-white rounded-md" @click="logIn">Log in</button>
         </div>
     </div>
 </template>
diff --git a/routes/api.php b/routes/api.php
index 8e54864d..3b963692 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -1,5 +1,6 @@
 <?php
 
-use Illuminate\Http\Request;
+use App\Http\Controllers\Api\LogInController;
+use Illuminate\Support\Facades\Route;
 
-//
+Route::post('/log-in', LogInController::class);