feat: Implement authentication flow, core application pages, and initial landing page components.

This commit is contained in:
2026-01-24 10:20:15 +07:00
parent fe6b195156
commit 62dc61aa31
7 changed files with 271 additions and 328 deletions

View File

@@ -2,8 +2,6 @@ import GuestLayout from '@/Layouts/GuestLayout';
import { Head, Link, useForm } from '@inertiajs/react';
import { FormEventHandler } from 'react';
import { Button } from '@/Components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/Components/ui/card';
import { Mail, LogOut, Send } from 'lucide-react';
export default function VerifyEmail({ status }: { status?: string }) {
const { post, processing } = useForm({});
@@ -16,47 +14,40 @@ export default function VerifyEmail({ status }: { status?: string }) {
return (
<GuestLayout>
<Head title="Verifikasi Email" />
<Head title="Email Verification" />
<Card className="border-white/10 bg-white/40 dark:bg-black/40 backdrop-blur-2xl shadow-[0_24px_48px_-12px_rgba(0,0,0,0.1)] rounded-[2.5rem] overflow-hidden w-full max-w-md">
<CardHeader className="space-y-1 text-center pt-10 pb-6 px-8">
<div className="mx-auto w-12 h-12 bg-nihonbuzz-red/10 rounded-2xl flex items-center justify-center mb-4 text-nihonbuzz-red">
<Mail className="w-6 h-6" />
<div className="flex flex-col items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
<div className="w-full max-w-md bg-white p-8 rounded-3xl shadow-2xl border border-gray-100 text-center">
<div className="mb-6 text-sm text-gray-600 dark:text-gray-400">
Thanks for signing up! Before getting started, could you verify
your email address by clicking on the link we just emailed to
you? If you didn't receive the email, we will gladly send you
another.
</div>
<CardTitle className="text-2xl font-black tracking-tight text-foreground">
Verifikasi Akun
</CardTitle>
<CardDescription className="text-muted-foreground font-medium text-xs uppercase tracking-widest pt-2 px-4 leading-loose">
Terima kasih telah mendaftar! Sebelum memulai, silakan verifikasi alamat email Anda melalui tautan yang baru saja kami kirimkan.
</CardDescription>
</CardHeader>
<CardContent className="px-8 pb-10">
{status === 'verification-link-sent' && (
<div className="mb-6 p-4 rounded-2xl bg-green-500/10 border border-green-500/20 text-xs font-bold text-green-600 text-center animate-in fade-in slide-in-from-top-2">
Tautan verifikasi baru telah berhasil dikirim ke alamat email Anda.
<div className="mb-6 text-sm font-medium text-green-600 dark:text-green-400">
A new verification link has been sent to the email address
you provided during registration.
</div>
)}
<form onSubmit={submit} className="space-y-6">
<div className="pt-2">
<Button className="w-full h-16 rounded-[1.5rem] text-sm font-black shadow-2xl shadow-nihonbuzz-red/20 bg-nihonbuzz-red hover:bg-nihonbuzz-red/90 transition-all hover:scale-[1.02] active:scale-[0.98] group" disabled={processing}>
Kirim Ulang Email Verifikasi <Send className="ml-2 w-4 h-4 group-hover:translate-x-1 group-hover:-translate-y-1 transition-transform" />
</Button>
</div>
<div className="text-center pt-2">
<Link
href={route('logout')}
method="post"
as="button"
className="text-muted-foreground font-black hover:text-nihonbuzz-red uppercase tracking-widest text-[10px] flex items-center justify-center gap-1 transition-colors"
>
<LogOut className="w-3 h-3" /> Keluar dari Sesi
</Link>
</div>
<form onSubmit={submit} className="space-y-4">
<Button className="w-full bg-nihonbuzz-red hover:bg-nihonbuzz-red/90 text-white font-bold py-3 rounded-xl" disabled={processing}>
Resend Verification Email
</Button>
<Link
href={route('logout')}
method="post"
as="button"
className="text-sm text-gray-600 underline hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:text-gray-400 dark:hover:text-gray-100"
>
Log Out
</Link>
</form>
</CardContent>
</Card>
</div>
</div>
</GuestLayout>
);
}