initial commit
linter / quality (push) Has been cancelled
tests / ci (8.3) (push) Has been cancelled
tests / ci (8.4) (push) Has been cancelled
tests / ci (8.5) (push) Has been cancelled

This commit is contained in:
2026-04-09 19:53:31 +02:00
commit c178fab470
307 changed files with 30669 additions and 0 deletions
@@ -0,0 +1,54 @@
<script setup lang="ts">
import { Form, Head } from '@inertiajs/vue3';
import InputError from '@/components/InputError.vue';
import PasswordInput from '@/components/PasswordInput.vue';
import { Button } from '@/components/ui/button';
import { Label } from '@/components/ui/label';
import { Spinner } from '@/components/ui/spinner';
import { store } from '@/routes/password/confirm';
defineOptions({
layout: {
title: 'Confirm your password',
description:
'This is a secure area of the application. Please confirm your password before continuing.',
},
});
</script>
<template>
<Head title="Confirm password" />
<Form
v-bind="store.form()"
reset-on-success
v-slot="{ errors, processing }"
>
<div class="space-y-6">
<div class="grid gap-2">
<Label htmlFor="password">Password</Label>
<PasswordInput
id="password"
name="password"
class="mt-1 block w-full"
required
autocomplete="current-password"
autofocus
/>
<InputError :message="errors.password" />
</div>
<div class="flex items-center">
<Button
class="w-full"
:disabled="processing"
data-test="confirm-password-button"
>
<Spinner v-if="processing" />
Confirm password
</Button>
</div>
</div>
</Form>
</template>
@@ -0,0 +1,66 @@
<script setup lang="ts">
import { Form, Head } from '@inertiajs/vue3';
import InputError from '@/components/InputError.vue';
import TextLink from '@/components/TextLink.vue';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Spinner } from '@/components/ui/spinner';
import { login } from '@/routes';
import { email } from '@/routes/password';
defineOptions({
layout: {
title: 'Forgot password',
description: 'Enter your email to receive a password reset link',
},
});
defineProps<{
status?: string;
}>();
</script>
<template>
<Head title="Forgot password" />
<div
v-if="status"
class="mb-4 text-center text-sm font-medium text-green-600"
>
{{ status }}
</div>
<div class="space-y-6">
<Form v-bind="email.form()" v-slot="{ errors, processing }">
<div class="grid gap-2">
<Label for="email">Email address</Label>
<Input
id="email"
type="email"
name="email"
autocomplete="off"
autofocus
placeholder="email@example.com"
/>
<InputError :message="errors.email" />
</div>
<div class="my-6 flex items-center justify-start">
<Button
class="w-full"
:disabled="processing"
data-test="email-password-reset-link-button"
>
<Spinner v-if="processing" />
Email password reset link
</Button>
</div>
</Form>
<div class="space-x-1 text-center text-sm text-muted-foreground">
<span>Or, return to</span>
<TextLink :href="login()">log in</TextLink>
</div>
</div>
</template>
+198
View File
@@ -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>
+108
View File
@@ -0,0 +1,108 @@
<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 { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Spinner } from '@/components/ui/spinner';
import { login } from '@/routes';
import { store } from '@/routes/register';
defineOptions({
layout: {
title: 'Create an account',
description: 'Enter your details below to create your account',
},
});
</script>
<template>
<Head title="Register" />
<Form
v-bind="store.form()"
:reset-on-success="['password', 'password_confirmation']"
v-slot="{ errors, processing }"
class="flex flex-col gap-6"
>
<div class="grid gap-6">
<div class="grid gap-2">
<Label for="name">Name</Label>
<Input
id="name"
type="text"
required
autofocus
:tabindex="1"
autocomplete="name"
name="name"
placeholder="Full name"
/>
<InputError :message="errors.name" />
</div>
<div class="grid gap-2">
<Label for="email">Email address</Label>
<Input
id="email"
type="email"
required
:tabindex="2"
autocomplete="email"
name="email"
placeholder="email@example.com"
/>
<InputError :message="errors.email" />
</div>
<div class="grid gap-2">
<Label for="password">Password</Label>
<PasswordInput
id="password"
required
:tabindex="3"
autocomplete="new-password"
name="password"
placeholder="Password"
/>
<InputError :message="errors.password" />
</div>
<div class="grid gap-2">
<Label for="password_confirmation">Confirm password</Label>
<PasswordInput
id="password_confirmation"
required
:tabindex="4"
autocomplete="new-password"
name="password_confirmation"
placeholder="Confirm password"
/>
<InputError :message="errors.password_confirmation" />
</div>
<Button
type="submit"
class="mt-2 w-full"
tabindex="5"
:disabled="processing"
data-test="register-user-button"
>
<Spinner v-if="processing" />
Create account
</Button>
</div>
<div class="text-center text-sm text-muted-foreground">
Already have an account?
<TextLink
:href="login()"
class="underline underline-offset-4"
:tabindex="6"
>Log in</TextLink
>
</div>
</Form>
</template>
+87
View File
@@ -0,0 +1,87 @@
<script setup lang="ts">
import { Form, Head } from '@inertiajs/vue3';
import { ref } from 'vue';
import InputError from '@/components/InputError.vue';
import PasswordInput from '@/components/PasswordInput.vue';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Spinner } from '@/components/ui/spinner';
import { update } from '@/routes/password';
defineOptions({
layout: {
title: 'Reset password',
description: 'Please enter your new password below',
},
});
const props = defineProps<{
token: string;
email: string;
}>();
const inputEmail = ref(props.email);
</script>
<template>
<Head title="Reset password" />
<Form
v-bind="update.form()"
:transform="(data) => ({ ...data, token, email })"
:reset-on-success="['password', 'password_confirmation']"
v-slot="{ errors, processing }"
>
<div class="grid gap-6">
<div class="grid gap-2">
<Label for="email">Email</Label>
<Input
id="email"
type="email"
name="email"
autocomplete="email"
v-model="inputEmail"
class="mt-1 block w-full"
readonly
/>
<InputError :message="errors.email" class="mt-2" />
</div>
<div class="grid gap-2">
<Label for="password">Password</Label>
<PasswordInput
id="password"
name="password"
autocomplete="new-password"
class="mt-1 block w-full"
autofocus
placeholder="Password"
/>
<InputError :message="errors.password" />
</div>
<div class="grid gap-2">
<Label for="password_confirmation"> Confirm password </Label>
<PasswordInput
id="password_confirmation"
name="password_confirmation"
autocomplete="new-password"
class="mt-1 block w-full"
placeholder="Confirm password"
/>
<InputError :message="errors.password_confirmation" />
</div>
<Button
type="submit"
class="mt-4 w-full"
:disabled="processing"
data-test="reset-password-button"
>
<Spinner v-if="processing" />
Reset password
</Button>
</div>
</Form>
</template>
@@ -0,0 +1,134 @@
<script setup lang="ts">
import { Form, Head, setLayoutProps } from '@inertiajs/vue3';
import { computed, ref, watchEffect } from 'vue';
import InputError from '@/components/InputError.vue';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import {
InputOTP,
InputOTPGroup,
InputOTPSlot,
} from '@/components/ui/input-otp';
import { store } from '@/routes/two-factor/login';
import type { TwoFactorConfigContent } from '@/types';
const authConfigContent = computed<TwoFactorConfigContent>(() => {
if (showRecoveryInput.value) {
return {
title: 'Recovery code',
description:
'Please confirm access to your account by entering one of your emergency recovery codes.',
buttonText: 'login using an authentication code',
};
}
return {
title: 'Authentication code',
description:
'Enter the authentication code provided by your authenticator application.',
buttonText: 'login using a recovery code',
};
});
watchEffect(() => {
setLayoutProps({
title: authConfigContent.value.title,
description: authConfigContent.value.description,
});
});
const showRecoveryInput = ref<boolean>(false);
const toggleRecoveryMode = (clearErrors: () => void): void => {
showRecoveryInput.value = !showRecoveryInput.value;
clearErrors();
code.value = '';
};
const code = ref<string>('');
</script>
<template>
<Head title="Two-factor authentication" />
<div class="space-y-6">
<template v-if="!showRecoveryInput">
<Form
v-bind="store.form()"
class="space-y-4"
reset-on-error
@error="code = ''"
#default="{ errors, processing, clearErrors }"
>
<input type="hidden" name="code" :value="code" />
<div
class="flex flex-col items-center justify-center space-y-3 text-center"
>
<div class="flex w-full items-center justify-center">
<InputOTP
id="otp"
v-model="code"
:maxlength="6"
:disabled="processing"
autofocus
>
<InputOTPGroup>
<InputOTPSlot
v-for="index in 6"
:key="index"
:index="index - 1"
/>
</InputOTPGroup>
</InputOTP>
</div>
<InputError :message="errors.code" />
</div>
<Button type="submit" class="w-full" :disabled="processing"
>Continue</Button
>
<div class="text-center text-sm text-muted-foreground">
<span>or you can </span>
<button
type="button"
class="text-foreground underline decoration-neutral-300 underline-offset-4 transition-colors duration-300 ease-out hover:decoration-current! dark:decoration-neutral-500"
@click="() => toggleRecoveryMode(clearErrors)"
>
{{ authConfigContent.buttonText }}
</button>
</div>
</Form>
</template>
<template v-else>
<Form
v-bind="store.form()"
class="space-y-4"
reset-on-error
#default="{ errors, processing, clearErrors }"
>
<Input
name="recovery_code"
type="text"
placeholder="Enter recovery code"
:autofocus="showRecoveryInput"
required
/>
<InputError :message="errors.recovery_code" />
<Button type="submit" class="w-full" :disabled="processing"
>Continue</Button
>
<div class="text-center text-sm text-muted-foreground">
<span>or you can </span>
<button
type="button"
class="text-foreground underline decoration-neutral-300 underline-offset-4 transition-colors duration-300 ease-out hover:decoration-current! dark:decoration-neutral-500"
@click="() => toggleRecoveryMode(clearErrors)"
>
{{ authConfigContent.buttonText }}
</button>
</div>
</Form>
</template>
</div>
</template>
+47
View File
@@ -0,0 +1,47 @@
<script setup lang="ts">
import { Form, Head } from '@inertiajs/vue3';
import TextLink from '@/components/TextLink.vue';
import { Button } from '@/components/ui/button';
import { Spinner } from '@/components/ui/spinner';
import { logout } from '@/routes';
import { send } from '@/routes/verification';
defineOptions({
layout: {
title: 'Verify email',
description:
'Please verify your email address by clicking on the link we just emailed to you.',
},
});
defineProps<{
status?: string;
}>();
</script>
<template>
<Head title="Email verification" />
<div
v-if="status === 'verification-link-sent'"
class="mb-4 text-center text-sm font-medium text-green-600"
>
A new verification link has been sent to the email address you provided
during registration.
</div>
<Form
v-bind="send.form()"
class="space-y-6 text-center"
v-slot="{ processing }"
>
<Button :disabled="processing" variant="secondary">
<Spinner v-if="processing" />
Resend verification email
</Button>
<TextLink :href="logout()" as="button" class="mx-auto block text-sm">
Log out
</TextLink>
</Form>
</template>