- update login page

app/Http/Controllers/Auth/LoginController.php

@@ -8,8 +8,7 @@ use App\Http\Controllers\Controller;
 use Illuminate\Http\RedirectResponse;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Auth;
-use Illuminate\Support\Facades\Hash;
+use Inertia\Response as InertiaResponse;
-use Illuminate\View\View;
 
 class LoginController extends Controller
 {
@@ -43,12 +42,12 @@ class LoginController extends Controller
         return redirect()->route('admin.auth.login');
     }
 
-    public function login(): View|RedirectResponse
+    public function login(): InertiaResponse|RedirectResponse
     {
         if (Auth::check())
             return redirect()->route('admin.home');
 
-        return view('auth.login');
+        return inertia('Login');
     }
 
 }

app/Http/Kernel.php

@@ -17,7 +17,8 @@ class Kernel extends HttpKernel
         \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
         \App\Http\Middleware\TrimStrings::class,
         \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
-        Core::class
+        Core::class,
+        \App\Http\Middleware\HandleInertiaRequests::class,
     ];
 
     protected $middlewareGroups = [

app/Http/Middleware/HandleInertiaRequests.php

@@ -4,6 +4,7 @@ declare(strict_types=1);
 
 namespace App\Http\Middleware;
 
+use Closure;
 use Illuminate\Http\Request;
 use Inertia\Middleware;
 
@@ -12,7 +13,16 @@ class HandleInertiaRequests extends Middleware
     public function share(Request $request): array
     {
         return array_merge(parent::share($request), [
-            //
+            'messages' => $this->getFlashData($request),
         ]);
     }
+
+    protected function getFlashData(Request $request): Closure
+    {
+        return fn(): array => [
+            'success' => $request->session()->get('success'),
+            'error' => $request->session()->get('error'),
+            'info' => $request->session()->get('info'),
+        ];
+    }
 }

resources/js/Pages/Login.vue

@@ -0,0 +1,45 @@
+<script setup>
+import { useForm } from '@inertiajs/inertia-vue3';
+import GuestLayout from '../Share/Layout/Guest.vue';
+
+defineOptions({ layout: GuestLayout });
+
+const form = useForm({
+    'email': null,
+    'password': null,
+});
+
+function login() {
+    form.post('/dashboard/login');
+}
+</script>
+
+<template>
+    <InertiaHead title="Logowanie" />
+    <div class="max-w-screen-sm mx-auto p-4 bg-neutral-100 rounded-md border border-gray-200 shadow">
+        <h1 class="pb-4 text-3xl font-robot font-light">Logowanie</h1>
+        <form class="flex flex-col gap-4" @submit.prevent="form.post('/dashboard/login')">
+            <div class="flex flex-col gap-1 w-full">
+                <label for="email"
+                    class="text-gray-500">E-mail</label>
+                <input id="email"
+                    :class="['w-full px-2.5 py-2 border-b-2 rounded-md', form.errors.email ? 'border-red-300 focus:border-red-400 hover:border-red-500 outline-none text-red-900 placeholder-red-400' : 'border-neutral-300 focus:border-neutral-400 hover:border-neutral-500 outline-none text-gray-900 placeholder-gray-400']"
+                    type="email"
+                    v-model="form.email"
+                    placeholder="Podaj swój e-mail" />
+                <span class="text-red-400" v-if="form.errors.email">{{ form.errors.email }}</span>
+            </div>
+            <div class="flex flex-col">
+                <label for="password"
+                    class="text-gray-500">Hasło</label>
+                <input
+                    id="password"
+                    :class="['w-full px-2.5 py-2 border-b-2 rounded-md', form.errors.email ? 'border-red-300 focus:border-red-400 hover:border-red-500 outline-none text-red-900 placeholder-red-400' : 'border-neutral-300 focus:border-neutral-400 hover:border-neutral-500 outline-none text-gray-900 placeholder-gray-400']"
+                    type="password"
+                    v-model="form.password"
+                    placeholder="Podaj swoje hasło" />
+            </div>
+            <button class="px-0.5 py-1 rounded-lg bg-[#436da7] border-4 border-[#436da7] text-white text-lg hover:bg-transparent hover:text-[#436da7]">Zaloguj</button>
+        </form>
+    </div>
+</template>

resources/js/Share/Layout/Guest.vue

@@ -0,0 +1,30 @@
+<template>
+    <div>
+        <header class="header">
+            <div class="flex gap-5 items-center justify-between md:justify-start max-w-screen-xl mx-auto font-thasadith">
+                <InertiaLink href="/">
+                    <div
+                        class="bg-white text-gray-800 pl-10 pr-5 py-2.5 text-4xl"
+                    >Kamil<span class="logo-green">Craft</span></div>
+                </InertiaLink>
+            </div>
+        </header>
+        <main class="-my-24 px-2 sm:px-0">
+            <slot />
+        </main>
+    </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="css">
+.header {
+    @apply min-h-[220px];
+    background: linear-gradient(237.74deg,#1199a5,#436da7 83%);
+}
+.logo-green {
+    color: rgb(162, 207, 0);
+}
+</style>

resources/js/app.js

@@ -1,9 +1,12 @@
 import './bootstrap';
+
+import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
+
 import { createApp, h } from 'vue';
 import { createInertiaApp, Head, Link } from '@inertiajs/inertia-vue3';
-import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
+
-import App from '@/Share/Layout/App.vue';
 import './css/app.css';
+import App from '@/Share/Layout/App.vue';
 
 createInertiaApp({
     resolve: async (name) => {
@@ -25,4 +28,5 @@ createInertiaApp({
             .component('InertiaHead', Head)
             .mount(el)
     },
+    title: title => `${title} | KamilCraft API`
 });

resources/js/css/app.css

@@ -1,3 +1,9 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+    :root {
+        --color-logo-green: 162, 207, 0;
+    }
+}

resources/views/app.blade.php

@@ -3,6 +3,8 @@
     <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;700&display=swap" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css2?family=Thasadith&display=swap" rel="stylesheet">
         @vite('resources/js/app.js')
         @inertiaHead
     </head>

tailwind.config.js

@@ -6,7 +6,16 @@ module.exports = {
         "./resources/views/**/*.blade.php"
     ],
     theme: {
-        extend: {},
+        extend: {
+            fontFamily: {
+                'arial': ['Arial', 'sans-serif'],
+                'roboto': ['Roboto', 'sans-serif'],
+                'thasadith': ['Thasadith', 'sans-serif']
+            },
+            colors: {
+                'logo-green': 'rgb(var(--color-logo-green) / <alpha-value>)'
+            }        
+        },
     },
     plugins: [],
 }

vite.config.js

@@ -6,6 +6,7 @@ import { networkInterfaces } from 'os'
 export default defineConfig({
     server: {
         host: Object.values(networkInterfaces()).flat().find(i => i.family === 'IPv4' && !i.internal).address,
+        port: 3001,
         hmr: {
             host: 'localhost',
         },