46 lines
2.2 KiB
Vue
46 lines
2.2 KiB
Vue
<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>
|