199 lines
9.4 KiB
Vue
199 lines
9.4 KiB
Vue
<script setup lang="ts">
|
|
import { Form, Head } from '@inertiajs/vue3';
|
|
import InputError from '@/components/InputError.vue';
|
|
import PasswordInput from '@/components/PasswordInput.vue';
|
|
import TextLink from '@/components/TextLink.vue';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Checkbox } from '@/components/ui/checkbox';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Spinner } from '@/components/ui/spinner';
|
|
import { store } from '@/routes/login';
|
|
import { request } from '@/routes/password';
|
|
// Hintergrund-Komponente importieren
|
|
import BackgroundStars from '@/components/Welcome/BackgroundStars.vue';
|
|
|
|
defineOptions({
|
|
layout: {
|
|
title: 'Bratanbonus.net Admin',
|
|
description: 'Bitte logge dich ein, um fortzufahren.',
|
|
},
|
|
});
|
|
|
|
defineProps<{
|
|
status?: string;
|
|
canResetPassword: boolean;
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<Head title="Log in" />
|
|
|
|
<div
|
|
class="relative flex min-h-screen w-full flex-col items-center justify-center overflow-hidden bg-gray-950 p-4"
|
|
>
|
|
<div class="absolute inset-0 z-0">
|
|
<BackgroundStars />
|
|
</div>
|
|
|
|
<div class="relative z-10 mx-auto w-full max-w-[440px]">
|
|
<div
|
|
v-if="status"
|
|
class="mb-6 rounded-xl border border-green-500/30 bg-green-500/10 p-4 text-center text-sm font-medium text-green-400 backdrop-blur-md"
|
|
>
|
|
{{ status }}
|
|
</div>
|
|
|
|
<div class="group relative">
|
|
<div
|
|
class="absolute -inset-1 rounded-[2rem] bg-gradient-to-r from-purple-600 via-blue-600 to-cyan-500 opacity-20 blur transition duration-1000 group-hover:opacity-30"
|
|
></div>
|
|
|
|
<div
|
|
class="relative overflow-hidden rounded-[1.75rem] border border-white/10 bg-gray-950/80 p-8 shadow-2xl backdrop-blur-2xl sm:p-10"
|
|
>
|
|
<div
|
|
class="pointer-events-none absolute top-0 right-0 -mt-12 -mr-12 h-24 w-24 rounded-full bg-purple-500/10 blur-[50px]"
|
|
></div>
|
|
<div
|
|
class="pointer-events-none absolute bottom-0 left-0 -mb-12 -ml-12 h-24 w-24 rounded-full bg-blue-500/10 blur-[50px]"
|
|
></div>
|
|
|
|
<div class="relative z-10">
|
|
<div class="mb-10 text-center">
|
|
<h1
|
|
class="text-2xl font-bold tracking-tight text-white"
|
|
>
|
|
Admin Login
|
|
</h1>
|
|
<p class="mt-2 text-sm text-gray-400">
|
|
Bratanbonus.net Control Panel
|
|
</p>
|
|
</div>
|
|
|
|
<Form
|
|
v-bind="store.form()"
|
|
:reset-on-success="['password']"
|
|
v-slot="{ errors, processing }"
|
|
class="flex flex-col gap-5"
|
|
>
|
|
<div class="space-y-5">
|
|
<div class="space-y-2">
|
|
<Label
|
|
for="email"
|
|
class="ml-1 text-[11px] font-bold tracking-[0.15em] text-gray-500 uppercase"
|
|
>
|
|
Email Adresse
|
|
</Label>
|
|
<Input
|
|
id="email"
|
|
type="email"
|
|
name="email"
|
|
required
|
|
autofocus
|
|
:tabindex="1"
|
|
autocomplete="email"
|
|
placeholder="admin@bratanbonus.net"
|
|
class="h-11 rounded-xl border-white/10 bg-white/[0.03] text-white transition-all duration-300 placeholder:text-gray-600 hover:bg-white/[0.06] focus:border-purple-500/40 focus:ring-2 focus:ring-purple-500/40"
|
|
/>
|
|
<InputError :message="errors.email" />
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<div
|
|
class="flex items-center justify-between px-1"
|
|
>
|
|
<Label
|
|
for="password"
|
|
class="text-[11px] font-bold tracking-[0.15em] text-gray-500 uppercase"
|
|
>
|
|
Passwort
|
|
</Label>
|
|
<TextLink
|
|
v-if="canResetPassword"
|
|
:href="request()"
|
|
class="text-[10px] font-bold tracking-wider text-purple-400 uppercase transition-colors hover:text-purple-300"
|
|
:tabindex="5"
|
|
>
|
|
Vergessen?
|
|
</TextLink>
|
|
</div>
|
|
<PasswordInput
|
|
id="password"
|
|
name="password"
|
|
required
|
|
:tabindex="2"
|
|
autocomplete="current-password"
|
|
placeholder="••••••••"
|
|
class="h-11 rounded-xl border-white/10 bg-white/[0.03] text-white transition-all duration-300 placeholder:text-gray-600 hover:bg-white/[0.06] focus:border-purple-500/40 focus:ring-2 focus:ring-purple-500/40"
|
|
/>
|
|
<InputError :message="errors.password" />
|
|
</div>
|
|
|
|
<div class="flex items-center px-1 pt-1">
|
|
<Label
|
|
for="remember"
|
|
class="group/check flex cursor-pointer items-center"
|
|
>
|
|
<Checkbox
|
|
id="remember"
|
|
name="remember"
|
|
:tabindex="3"
|
|
class="rounded-md border-white/20 bg-white/5 transition-transform active:scale-90 data-[state=checked]:border-purple-600 data-[state=checked]:bg-purple-600"
|
|
/>
|
|
<span
|
|
class="ml-3 text-xs font-semibold tracking-wide text-gray-400 uppercase transition-colors group-hover/check:text-gray-200"
|
|
>
|
|
Stay logged in
|
|
</span>
|
|
</Label>
|
|
</div>
|
|
|
|
<Button
|
|
type="submit"
|
|
class="group/btn relative mt-6 h-11 w-full overflow-hidden rounded-xl bg-white text-[11px] font-bold tracking-[0.2em] text-black uppercase transition-all duration-300 hover:shadow-[0_0_25px_rgba(168,85,247,0.4)] active:scale-[0.97]"
|
|
:tabindex="4"
|
|
:disabled="processing"
|
|
data-test="login-button"
|
|
>
|
|
<div
|
|
class="absolute inset-0 bg-gradient-to-r from-purple-600 to-blue-600 opacity-0 transition-opacity duration-300 group-hover/btn:opacity-100"
|
|
></div>
|
|
|
|
<div
|
|
class="relative z-10 flex items-center justify-center gap-2 transition-colors duration-300 group-hover/btn:text-white"
|
|
>
|
|
<Spinner
|
|
v-if="processing"
|
|
class="h-4 w-4"
|
|
/>
|
|
<span v-else>Authorize</span>
|
|
</div>
|
|
</Button>
|
|
</div>
|
|
</Form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* Die Animation gilt nur für die Login-Karte */
|
|
.mx-auto {
|
|
animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
@keyframes slideUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
</style>
|