style: fix auth layout height overlap and remove all emojis for LPK professionalism

This commit is contained in:
nihonbuzz
2026-01-23 19:51:01 +07:00
parent 762746859c
commit fe6b195156
7 changed files with 138 additions and 88 deletions

View File

@@ -5,9 +5,13 @@ import { Footer } from "@/Components/Landing/Footer";
export default function GuestLayout({ children }: { children: React.ReactNode }) {
return (
<ThemeProvider defaultTheme="dark" storageKey="nihonbuzz-theme">
<div className="min-h-screen bg-background text-foreground selection:bg-primary/30 selection:text-primary">
<div className="min-h-screen bg-background text-foreground selection:bg-primary/30 selection:text-primary flex flex-col">
<Navbar />
<main>{children}</main>
<main className="flex-1 flex items-center justify-center p-4 lg:p-8 pt-24 lg:pt-32">
<div className="w-full flex justify-center py-8">
{children}
</div>
</main>
<Footer />
</div>
</ThemeProvider>

View File

@@ -5,6 +5,8 @@ import { FormEventHandler } from 'react';
import { Button } from '@/Components/ui/button';
import { Input } from '@/Components/ui/input';
import { Label } from '@/Components/ui/label';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/Components/ui/card';
import { Lock, ArrowRight } from 'lucide-react';
export default function ConfirmPassword() {
const { data, setData, post, processing, errors, reset } = useForm({
@@ -21,38 +23,44 @@ export default function ConfirmPassword() {
return (
<GuestLayout>
<Head title="Confirm Password" />
<Head title="Konfirmasi Kata Sandi" />
<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">
<div className="mb-6 text-sm text-gray-600 dark:text-gray-400">
This is a secure area of the application. Please confirm your
password before continuing.
<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">
<Lock className="w-6 h-6" />
</div>
<CardTitle className="text-2xl font-black tracking-tight text-foreground">
Area Aman
</CardTitle>
<CardDescription className="text-muted-foreground font-medium text-xs uppercase tracking-widest pt-2 px-4 leading-loose">
Ini adalah area aman. Harap konfirmasi kata sandi Anda sebelum melanjutkan.
</CardDescription>
</CardHeader>
<CardContent className="px-8 pb-10">
<form onSubmit={submit} className="space-y-6">
<div className="space-y-2">
<Label htmlFor="password">Password</Label>
<Label htmlFor="password" className="text-[10px] font-black uppercase tracking-widest text-muted-foreground ml-1">Kata Sandi Anda</Label>
<Input
id="password"
type="password"
name="password"
value={data.password}
className="block w-full"
className="h-14 rounded-2xl bg-white/50 dark:bg-black/50 border-white/20 focus:ring-nihonbuzz-red/20 focus:border-nihonbuzz-red transition-all"
autoFocus
onChange={(e) => setData('password', e.target.value)}
/>
<InputError message={errors.password} />
</div>
<div className="flex items-center justify-end">
<Button className="w-full bg-nihonbuzz-red hover:bg-nihonbuzz-red/90 text-white font-bold py-3 rounded-xl" disabled={processing}>
Confirm
<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}>
Konfirmasi & Lanjutkan <ArrowRight className="inline-block w-4 h-4 ml-1 group-hover:translate-x-1 transition-transform" />
</Button>
</div>
</form>
</div>
</div>
</CardContent>
</Card>
</GuestLayout>
);
}

View File

@@ -1,10 +1,12 @@
import InputError from '@/Components/InputError';
import GuestLayout from '@/Layouts/GuestLayout';
import { Head, useForm } from '@inertiajs/react';
import { Head, useForm, Link } from '@inertiajs/react';
import { FormEventHandler } from 'react';
import { Button } from '@/Components/ui/button';
import { Input } from '@/Components/ui/input';
import { Label } from '@/Components/ui/label';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/Components/ui/card';
import { KeyRound, ArrowLeft } from 'lucide-react';
export default function ForgotPassword({ status }: { status?: string }) {
const { data, setData, post, processing, errors } = useForm({
@@ -19,45 +21,60 @@ export default function ForgotPassword({ status }: { status?: string }) {
return (
<GuestLayout>
<Head title="Forgot Password" />
<Head title="Lupa Kata Sandi" />
<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">
<div className="mb-6 text-sm text-gray-600 dark:text-gray-400">
Forgot your password? No problem. Just let us know your email
address and we will email you a password reset link that will
allow you to choose a new one.
<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">
<KeyRound className="w-6 h-6" />
</div>
<CardTitle className="text-2xl font-black tracking-tight text-foreground">
Pemulihan Akses
</CardTitle>
<CardDescription className="text-muted-foreground font-medium text-xs uppercase tracking-widest pt-2 px-4 leading-loose">
Kami akan mengirimkan tautan reset kata sandi melalui alamat email terdaftar Anda.
</CardDescription>
</CardHeader>
<CardContent className="px-8 pb-10">
{status && (
<div className="mb-4 text-sm font-medium text-green-600 dark:text-green-400">
<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">
{status}
</div>
)}
<form onSubmit={submit} className="space-y-6">
<div className="space-y-2">
<Label htmlFor="email">Email</Label>
<Label htmlFor="email" className="text-[10px] font-black uppercase tracking-widest text-muted-foreground ml-1">Email Terdaftar</Label>
<Input
id="email"
type="email"
name="email"
value={data.email}
className="block w-full"
className="h-14 rounded-2xl bg-white/50 dark:bg-black/50 border-white/20 focus:ring-nihonbuzz-red/20 focus:border-nihonbuzz-red transition-all"
placeholder="nama@email.com"
autoFocus
onChange={(e) => setData('email', e.target.value)}
/>
<InputError message={errors.email} />
</div>
<div className="flex items-center justify-end">
<Button className="w-full bg-nihonbuzz-red hover:bg-nihonbuzz-red/90 text-white font-bold py-3 rounded-xl" disabled={processing}>
Email Password Reset Link
<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]" disabled={processing}>
Kirim Tautan Pemulihan
</Button>
</div>
<div className="text-center pt-2">
<Link
href={route('login')}
className="text-nihonbuzz-red font-black hover:underline uppercase tracking-widest text-[10px] flex items-center justify-center gap-1"
>
<ArrowLeft className="w-3 h-3" /> Kembali ke Halaman Masuk
</Link>
</div>
</form>
</div>
</div>
</CardContent>
</Card>
</GuestLayout>
);
}

View File

@@ -1,4 +1,4 @@
import AuthLayout from '@/Layouts/AuthLayout';
import GuestLayout from '@/Layouts/GuestLayout';
import { Head, Link, useForm } from '@inertiajs/react';
import { FormEventHandler } from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/Components/ui/card';
@@ -31,13 +31,13 @@ export default function Login({
};
return (
<AuthLayout>
<GuestLayout>
<Head title="Masuk ke Academy" />
<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">
<CardHeader className="space-y-1 text-center pt-10 pb-6 px-8">
<CardTitle className="text-3xl font-black tracking-tight text-foreground flex items-center justify-center gap-3">
Okaeri! <span className="animate-bounce">👋</span>
Selamat Datang Kembali
</CardTitle>
<CardDescription className="text-muted-foreground font-medium text-xs uppercase tracking-widest pt-2">
Masuk ke portal siswa LPK NihonBuzz
@@ -161,6 +161,6 @@ export default function Login({
</form>
</CardContent>
</Card>
</AuthLayout>
</GuestLayout>
);
}

View File

@@ -1,5 +1,5 @@
import InputError from '@/Components/InputError';
import AuthLayout from '@/Layouts/AuthLayout';
import GuestLayout from '@/Layouts/GuestLayout';
import { Head, Link, useForm } from '@inertiajs/react';
import { FormEventHandler } from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/Components/ui/card';
@@ -25,13 +25,13 @@ export default function Register() {
};
return (
<AuthLayout>
<GuestLayout>
<Head title="Registrasi Peserta Didik" />
<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">
<CardHeader className="space-y-1 text-center pt-10 pb-6 px-8">
<CardTitle className="text-3xl font-black tracking-tight text-foreground flex items-center justify-center gap-3">
Hajimemashou! <span className="animate-pulse"></span>
Mulai Belajar
</CardTitle>
<CardDescription className="text-muted-foreground font-medium text-xs uppercase tracking-widest pt-2">
Pendaftaran Peserta Didik LPK NihonBuzz
@@ -122,6 +122,6 @@ export default function Register() {
</form>
</CardContent>
</Card>
</AuthLayout>
</GuestLayout>
);
}

View File

@@ -5,6 +5,8 @@ import { FormEventHandler } from 'react';
import { Button } from '@/Components/ui/button';
import { Input } from '@/Components/ui/input';
import { Label } from '@/Components/ui/label';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/Components/ui/card';
import { ShieldCheck, ArrowRight } from 'lucide-react';
export default function ResetPassword({
token,
@@ -30,21 +32,30 @@ export default function ResetPassword({
return (
<GuestLayout>
<Head title="Reset Password" />
<Head title="Reset Kata Sandi" />
<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">
<h2 className="text-2xl font-bold mb-6 text-center">Reset Password</h2>
<form onSubmit={submit} className="space-y-6">
<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">
<ShieldCheck className="w-6 h-6" />
</div>
<CardTitle className="text-2xl font-black tracking-tight text-foreground">
Atur Ulang Sandi
</CardTitle>
<CardDescription className="text-muted-foreground font-medium text-xs uppercase tracking-widest pt-2 px-4 leading-loose">
Silakan masukkan kata sandi baru untuk akun Academy Anda.
</CardDescription>
</CardHeader>
<CardContent className="px-8 pb-10">
<form onSubmit={submit} className="space-y-5">
<div className="space-y-2">
<Label htmlFor="email">Email</Label>
<Label htmlFor="email" className="text-[10px] font-black uppercase tracking-widest text-muted-foreground ml-1">Email Konfirmasi</Label>
<Input
id="email"
type="email"
name="email"
value={data.email}
className="block w-full"
className="h-14 rounded-2xl bg-white/50 dark:bg-black/50 border-white/20 focus:ring-nihonbuzz-red/20 focus:border-nihonbuzz-red transition-all"
autoComplete="username"
onChange={(e) => setData('email', e.target.value)}
/>
@@ -52,41 +63,42 @@ export default function ResetPassword({
</div>
<div className="space-y-2">
<Label htmlFor="password">Password</Label>
<Label htmlFor="password" className="text-[10px] font-black uppercase tracking-widest text-muted-foreground ml-1">Kata Sandi Baru</Label>
<Input
id="password"
type="password"
name="password"
value={data.password}
className="block w-full"
className="h-14 rounded-2xl bg-white/50 dark:bg-black/50 border-white/20 focus:ring-nihonbuzz-red/20 focus:border-nihonbuzz-red transition-all"
autoComplete="new-password"
autoFocus
onChange={(e) => setData('password', e.target.value)}
/>
<InputError message={errors.password} />
</div>
<div className="space-y-2">
<Label htmlFor="password_confirmation">Confirm Password</Label>
<Label htmlFor="password_confirmation" className="text-[10px] font-black uppercase tracking-widest text-muted-foreground ml-1">Konfirmasi Sandi Baru</Label>
<Input
type="password"
name="password_confirmation"
id="password_confirmation"
value={data.password_confirmation}
className="block w-full"
className="h-14 rounded-2xl bg-white/50 dark:bg-black/50 border-white/20 focus:ring-nihonbuzz-red/20 focus:border-nihonbuzz-red transition-all"
autoComplete="new-password"
onChange={(e) => setData('password_confirmation', e.target.value)}
/>
<InputError message={errors.password_confirmation} />
</div>
<div className="flex items-center justify-end">
<Button className="w-full bg-nihonbuzz-red hover:bg-nihonbuzz-red/90 text-white font-bold py-3 rounded-xl" disabled={processing}>
Reset Password
<div className="pt-4">
<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}>
Atur Ulang & Masuk <ArrowRight className="inline-block w-4 h-4 ml-1 group-hover:translate-x-1 transition-transform" />
</Button>
</div>
</form>
</div>
</div>
</CardContent>
</Card>
</GuestLayout>
);
}

View File

@@ -2,6 +2,8 @@ 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({});
@@ -14,40 +16,47 @@ export default function VerifyEmail({ status }: { status?: string }) {
return (
<GuestLayout>
<Head title="Email Verification" />
<Head title="Verifikasi Email" />
<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.
<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>
<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 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 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>
)}
<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 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>
</div>
</div>
</CardContent>
</Card>
</GuestLayout>
);
}