Create barebones sequence for logging in

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']);
+        }
+    }
+}

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,
     },
 ];
 

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>

resources/assets/js/prototype/screens/Login.vue

@@ -1,19 +1,44 @@
 <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>
     <div class="max-w-sm mx-auto my-12">
         <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>

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