- update login page

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>