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

@@ -5,6 +5,7 @@ import App from './components/App.vue';
 
 import Login from './screens/Login.vue';
 import Register from './screens/Register.vue';
+import Dashboard from './screens/Dashboard.vue';
 
 Vue.use(VueRouter);
 
@@ -17,6 +18,10 @@ const routes = [
         path: '/prototype/register',
         name: 'register',
         component: Register,
+    }, {
+        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 class="mt-4 text-center">
             <router-link class="text-sm" :to="{ name: 'register' }">First time here? Register.</router-link>

routes/api.php

@@ -1,5 +1,8 @@
 <?php
 
-use Illuminate\Http\Request;
+use App\Http\Controllers\Api\CurrencyController;
+use App\Http\Controllers\Api\LogInController;
 
-Route::get('/currencies', \App\Http\Controllers\Api\CurrencyController::class);
+Route::post('/log-in', LogInController::class);
+
+Route::get('/currencies', CurrencyController::class);