Simon Pocrnjič
136 lines
6.6 KiB
Vue
136 lines
6.6 KiB
Vue
<script setup>
|
|
import { Head, Link, useForm } from '@inertiajs/vue3';
|
|
import AuthenticationCardLogo from '@/Components/AuthenticationCardLogo.vue';
|
|
import { Input } from '@/Components/ui/input';
|
|
import { Label } from '@/Components/ui/label';
|
|
import { Checkbox } from '@/Components/ui/checkbox';
|
|
import { Button } from '@/Components/ui/button';
|
|
|
|
defineProps({
|
|
canResetPassword: Boolean,
|
|
status: String,
|
|
});
|
|
|
|
const form = useForm({
|
|
email: '',
|
|
password: '',
|
|
remember: false,
|
|
});
|
|
|
|
const submit = () => {
|
|
form.transform(data => ({
|
|
...data,
|
|
remember: form.remember ? 'on' : '',
|
|
})).post(route('login'), {
|
|
onFinish: () => form.reset('password'),
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<Head title="Prijava" />
|
|
|
|
<div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gradient-to-br from-neutral-50 via-white to-primary-50/30">
|
|
<div class="w-full sm:max-w-md">
|
|
<div class="mb-8 flex justify-center">
|
|
<AuthenticationCardLogo />
|
|
</div>
|
|
|
|
<div class="w-full sm:max-w-md px-8 py-10 bg-white/80 backdrop-blur-sm shadow-xl border border-neutral-200/50 rounded-2xl overflow-hidden">
|
|
<div class="mb-8">
|
|
<h1 class="text-3xl font-bold text-neutral-900 mb-2">Dobrodošli nazaj</h1>
|
|
<p class="text-sm text-neutral-600">Prijavite se v svoj račun za nadaljevanje</p>
|
|
</div>
|
|
|
|
<div v-if="status" class="mb-6 p-4 rounded-lg bg-success-50 border border-success-200">
|
|
<p class="text-sm font-medium text-success-700">
|
|
{{ status }}
|
|
</p>
|
|
</div>
|
|
|
|
<form @submit.prevent="submit" class="space-y-5">
|
|
<div class="space-y-2">
|
|
<Label for="email" class="text-sm font-medium text-neutral-700">E-poštni naslov</Label>
|
|
<Input
|
|
id="email"
|
|
v-model="form.email"
|
|
type="email"
|
|
required
|
|
autofocus
|
|
autocomplete="username"
|
|
placeholder="vas@example.com"
|
|
class="h-11 transition-all"
|
|
:class="form.errors.email ? 'border-error-500 focus:border-error-500 focus:ring-error-500/20' : 'focus:border-primary-500 focus:ring-primary-500/20'"
|
|
/>
|
|
<p v-if="form.errors.email" class="text-sm text-error-600 mt-1.5 flex items-center gap-1.5">
|
|
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
|
|
</svg>
|
|
{{ form.errors.email }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<Label for="password" class="text-sm font-medium text-neutral-700">Geslo</Label>
|
|
<Input
|
|
id="password"
|
|
v-model="form.password"
|
|
type="password"
|
|
required
|
|
autocomplete="current-password"
|
|
placeholder="••••••••"
|
|
class="h-11 transition-all"
|
|
:class="form.errors.password ? 'border-error-500 focus:border-error-500 focus:ring-error-500/20' : 'focus:border-primary-500 focus:ring-primary-500/20'"
|
|
/>
|
|
<p v-if="form.errors.password" class="text-sm text-error-600 mt-1.5 flex items-center gap-1.5">
|
|
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
|
|
</svg>
|
|
{{ form.errors.password }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between pt-1">
|
|
<div class="flex items-center space-x-2.5">
|
|
<Checkbox
|
|
id="remember"
|
|
v-model="form.remember"
|
|
name="remember"
|
|
class="data-[state=checked]:bg-primary-600"
|
|
/>
|
|
<Label for="remember" class="text-sm font-normal text-neutral-600 cursor-pointer select-none">
|
|
Zapomni si me
|
|
</Label>
|
|
</div>
|
|
|
|
<Link
|
|
v-if="canResetPassword"
|
|
:href="route('password.request')"
|
|
class="text-sm font-medium text-primary-600 hover:text-primary-700 transition-colors focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:ring-offset-2 rounded-md px-2 py-1"
|
|
>
|
|
Ste pozabili geslo?
|
|
</Link>
|
|
</div>
|
|
|
|
<div class="pt-2">
|
|
<Button
|
|
type="submit"
|
|
class="w-full h-11 text-base font-semibold shadow-md hover:shadow-lg transition-all duration-200"
|
|
:disabled="form.processing"
|
|
>
|
|
<span v-if="!form.processing">Prijavi se</span>
|
|
<span v-else class="flex items-center gap-2">
|
|
<svg class="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
Prijavljanje...
|
|
</span>
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|