132 lines
5.1 KiB
Vue
132 lines
5.1 KiB
Vue
<template>
|
|
<div class="min-h-screen bg-gradient-to-br from-slate-900 to-slate-800 flex items-center justify-center px-4">
|
|
<div class="max-w-md w-full">
|
|
<!-- Logo & Title -->
|
|
<div class="text-center mb-8">
|
|
<div class="inline-flex items-center justify-center w-16 h-16 bg-primary/10 rounded-2xl mb-4">
|
|
<svg class="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z" />
|
|
</svg>
|
|
</div>
|
|
<h1 class="text-2xl font-bold text-white">Панель управления</h1>
|
|
<p class="text-sm text-slate-400 mt-2">NTSPI Administration System</p>
|
|
</div>
|
|
|
|
<!-- Login Form -->
|
|
<div class="bg-white/5 backdrop-blur-lg border border-white/10 rounded-2xl p-8 shadow-2xl">
|
|
<form @submit.prevent="submit" class="space-y-6">
|
|
<!-- Email -->
|
|
<div>
|
|
<label for="email" class="block text-sm font-medium text-slate-300 mb-2">
|
|
Email адрес
|
|
</label>
|
|
<input
|
|
id="email"
|
|
v-model="form.email"
|
|
type="email"
|
|
required
|
|
autofocus
|
|
autocomplete="email"
|
|
class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all"
|
|
placeholder="your@email.com"
|
|
/>
|
|
<p v-if="form.errors.email" class="mt-2 text-sm text-rose-400">{{ form.errors.email }}</p>
|
|
</div>
|
|
|
|
<!-- Password -->
|
|
<div>
|
|
<label for="password" class="block text-sm font-medium text-slate-300 mb-2">
|
|
Пароль
|
|
</label>
|
|
<input
|
|
id="password"
|
|
v-model="form.password"
|
|
type="password"
|
|
required
|
|
autocomplete="current-password"
|
|
class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all"
|
|
placeholder="••••••••"
|
|
/>
|
|
<p v-if="form.errors.password" class="mt-2 text-sm text-rose-400">{{ form.errors.password }}</p>
|
|
</div>
|
|
|
|
<!-- Remember Me -->
|
|
<div class="flex items-center">
|
|
<input
|
|
id="remember"
|
|
v-model="form.remember"
|
|
type="checkbox"
|
|
class="h-4 w-4 rounded border-white/20 bg-white/10 text-primary focus:ring-primary/50 focus:ring-offset-0"
|
|
/>
|
|
<label for="remember" class="ml-2 block text-sm text-slate-300">
|
|
Запомнить меня
|
|
</label>
|
|
</div>
|
|
|
|
<!-- Status Message -->
|
|
<div v-if="status" class="p-4 bg-emerald-500/10 border border-emerald-500/20 rounded-lg">
|
|
<p class="text-sm text-emerald-300">{{ status }}</p>
|
|
</div>
|
|
|
|
<!-- Submit Button -->
|
|
<button
|
|
type="submit"
|
|
:disabled="form.processing"
|
|
class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-primary/50"
|
|
>
|
|
<span v-if="form.processing" class="flex items-center justify-center gap-2">
|
|
<svg class="animate-spin h-5 w-5" 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>
|
|
Вход...
|
|
</span>
|
|
<span v-else>Войти в систему</span>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Back to site link -->
|
|
<div class="text-center mt-6">
|
|
<a href="/" class="text-sm text-slate-400 hover:text-white transition-colors inline-flex items-center gap-2">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
|
</svg>
|
|
Вернуться на сайт
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useForm } from '@inertiajs/vue3';
|
|
|
|
defineOptions({
|
|
name: 'Login',
|
|
});
|
|
|
|
const props = defineProps({
|
|
canResetPassword: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
status: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
});
|
|
|
|
const form = useForm({
|
|
email: '',
|
|
password: '',
|
|
remember: false,
|
|
});
|
|
|
|
const submit = () => {
|
|
form.post(route('login'), {
|
|
onFinish: () => form.reset('password'),
|
|
});
|
|
};
|
|
</script>
|