Dev branch
This commit is contained in:
Simon Pocrnjič
@@ -1,12 +1,10 @@
|
||||
<script setup>
|
||||
import { Head, Link, useForm } from '@inertiajs/vue3';
|
||||
import AuthenticationCard from '@/Components/AuthenticationCard.vue';
|
||||
import AuthenticationCardLogo from '@/Components/AuthenticationCardLogo.vue';
|
||||
import Checkbox from '@/Components/Checkbox.vue';
|
||||
import InputError from '@/Components/InputError.vue';
|
||||
import InputLabel from '@/Components/InputLabel.vue';
|
||||
import PrimaryButton from '@/Components/PrimaryButton.vue';
|
||||
import TextInput from '@/Components/TextInput.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,
|
||||
@@ -30,61 +28,108 @@ const submit = () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Head title="Log in" />
|
||||
<Head title="Prijava" />
|
||||
|
||||
<AuthenticationCard>
|
||||
<template #logo>
|
||||
<AuthenticationCardLogo />
|
||||
</template>
|
||||
<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 v-if="status" class="mb-4 font-medium text-sm text-green-600">
|
||||
{{ status }}
|
||||
<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>
|
||||
|
||||
<form @submit.prevent="submit">
|
||||
<div>
|
||||
<InputLabel for="email" value="Email" />
|
||||
<TextInput
|
||||
id="email"
|
||||
v-model="form.email"
|
||||
type="email"
|
||||
class="mt-1 block w-full"
|
||||
required
|
||||
autofocus
|
||||
autocomplete="username"
|
||||
/>
|
||||
<InputError class="mt-2" :message="form.errors.email" />
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<InputLabel for="password" value="Password" />
|
||||
<TextInput
|
||||
id="password"
|
||||
v-model="form.password"
|
||||
type="password"
|
||||
class="mt-1 block w-full"
|
||||
required
|
||||
autocomplete="current-password"
|
||||
/>
|
||||
<InputError class="mt-2" :message="form.errors.password" />
|
||||
</div>
|
||||
|
||||
<div class="block mt-4">
|
||||
<label class="flex items-center">
|
||||
<Checkbox v-model:checked="form.remember" name="remember" />
|
||||
<span class="ms-2 text-sm text-gray-600">Remember me</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-end mt-4">
|
||||
<Link v-if="canResetPassword" :href="route('password.request')" class="underline text-sm text-gray-600 hover:text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
||||
Forgot your password?
|
||||
</Link>
|
||||
|
||||
<PrimaryButton class="ms-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
|
||||
Log in
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
</form>
|
||||
</AuthenticationCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user