Neuaufbau des Repositories
This commit is contained in:
@@ -0,0 +1,198 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user