Redesign the login and register pages to match the Abrban landing.
Wrap both auth pages in a shared cinematic sky shell (calm blue sky, drifting clouds, sun glow, frosted dark-glass panel) in Persian/RTL with the Abrban brand, while leaving the existing auth store logic and dashboard routing intact. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
keyhan
@@ -2,10 +2,11 @@
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
import { useAuthStore } from '@/lib/store';
|
||||
import { toast } from 'react-toastify';
|
||||
import { Cloud } from 'lucide-react';
|
||||
import { LogIn, ArrowLeft } from 'lucide-react';
|
||||
import { AuthShell } from '@/components/auth/AuthShell';
|
||||
import { AuthField } from '@/components/auth/AuthField';
|
||||
|
||||
export default function LoginPage() {
|
||||
const [email, setEmail] = useState('');
|
||||
@@ -19,78 +20,67 @@ export default function LoginPage() {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
await login(email, password);
|
||||
toast.success('Logged in successfully!');
|
||||
toast.success('با موفقیت وارد شدی!');
|
||||
router.push('/dashboard');
|
||||
} catch (err: any) {
|
||||
toast.error(err.response?.data?.message || 'Login failed');
|
||||
toast.error(err.response?.data?.message || 'ورود ناموفق بود');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-gray-50 via-white to-primary-50 py-12 px-4">
|
||||
<div className="max-w-md w-full space-y-8 animate-slide-up">
|
||||
<div className="text-center">
|
||||
<div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-primary-100 mb-4">
|
||||
<Cloud className="w-8 h-8 text-primary-600" />
|
||||
</div>
|
||||
<h1 className="text-3xl font-bold text-gray-900 tracking-tight">Welcome back</h1>
|
||||
<p className="mt-2 text-gray-500">
|
||||
Sign in to your CloudHost account
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form className="card space-y-5" onSubmit={handleSubmit}>
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1.5">
|
||||
Email address
|
||||
</label>
|
||||
<input
|
||||
<AuthShell
|
||||
icon={<LogIn className="h-7 w-7" />}
|
||||
title="خوش آمدی"
|
||||
subtitle="به حساب ابربان خود وارد شو"
|
||||
altPrompt="هنوز حساب نداری؟"
|
||||
altHref="/register"
|
||||
altLabel="ثبتنام کن"
|
||||
>
|
||||
<form className="space-y-5" onSubmit={handleSubmit}>
|
||||
<AuthField
|
||||
id="email"
|
||||
label="ایمیل"
|
||||
type="email"
|
||||
required
|
||||
className="input-field"
|
||||
dir="ltr"
|
||||
autoComplete="email"
|
||||
placeholder="you@example.com"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-1.5">
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
<AuthField
|
||||
id="password"
|
||||
label="رمز عبور"
|
||||
type="password"
|
||||
required
|
||||
className="input-field"
|
||||
dir="ltr"
|
||||
autoComplete="current-password"
|
||||
placeholder="••••••••"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button type="submit" disabled={isLoading} className="btn-primary w-full">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoading}
|
||||
className="inline-flex w-full items-center justify-center gap-2 rounded-xl bg-primary-600 px-6 py-3.5 font-bold text-white shadow-lg shadow-primary-600/30 transition hover:bg-primary-500 disabled:cursor-not-allowed disabled:opacity-60"
|
||||
>
|
||||
{isLoading ? (
|
||||
<>
|
||||
<div className="animate-spin rounded-full h-4 w-4 border-2 border-white border-t-transparent" />
|
||||
Signing in...
|
||||
<span className="h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent" />
|
||||
در حال ورود…
|
||||
</>
|
||||
) : (
|
||||
'Sign in'
|
||||
<>
|
||||
ورود
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
|
||||
<p className="text-center text-sm text-gray-500">
|
||||
Don't have an account?{' '}
|
||||
<Link href="/register" className="text-primary-600 hover:text-primary-500 font-semibold">
|
||||
Create one
|
||||
</Link>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</AuthShell>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,10 +2,11 @@
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
import { useAuthStore } from '@/lib/store';
|
||||
import { toast } from 'react-toastify';
|
||||
import { Cloud } from 'lucide-react';
|
||||
import { UserPlus, ArrowLeft } from 'lucide-react';
|
||||
import { AuthShell } from '@/components/auth/AuthShell';
|
||||
import { AuthField } from '@/components/auth/AuthField';
|
||||
|
||||
export default function RegisterPage() {
|
||||
const [form, setForm] = useState({ email: '', password: '', firstName: '', lastName: '' });
|
||||
@@ -18,98 +19,91 @@ export default function RegisterPage() {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
await register(form);
|
||||
toast.success('Account created successfully!');
|
||||
toast.success('حساب با موفقیت ساخته شد!');
|
||||
router.push('/dashboard');
|
||||
} catch (err: any) {
|
||||
toast.error(err.response?.data?.message || 'Registration failed');
|
||||
toast.error(err.response?.data?.message || 'ثبتنام ناموفق بود');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-gray-50 via-white to-primary-50 py-12 px-4">
|
||||
<div className="max-w-md w-full space-y-8 animate-slide-up">
|
||||
<div className="text-center">
|
||||
<div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-primary-100 mb-4">
|
||||
<Cloud className="w-8 h-8 text-primary-600" />
|
||||
</div>
|
||||
<h1 className="text-3xl font-bold text-gray-900 tracking-tight">Create your account</h1>
|
||||
<p className="mt-2 text-gray-500">
|
||||
Start deploying apps in minutes
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form className="card space-y-5" onSubmit={handleSubmit}>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1.5">First name</label>
|
||||
<input
|
||||
<AuthShell
|
||||
icon={<UserPlus className="h-7 w-7" />}
|
||||
title="ساخت حساب"
|
||||
subtitle="در چند دقیقه اولین اپت را منتشر کن"
|
||||
altPrompt="قبلاً حساب ساختهای؟"
|
||||
altHref="/login"
|
||||
altLabel="وارد شو"
|
||||
>
|
||||
<form className="space-y-5" onSubmit={handleSubmit}>
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<AuthField
|
||||
id="firstName"
|
||||
label="نام"
|
||||
type="text"
|
||||
required
|
||||
className="input-field"
|
||||
placeholder="John"
|
||||
autoComplete="given-name"
|
||||
placeholder="مثلاً علی"
|
||||
value={form.firstName}
|
||||
onChange={(e) => setForm({ ...form, firstName: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1.5">Last name</label>
|
||||
<input
|
||||
<AuthField
|
||||
id="lastName"
|
||||
label="نام خانوادگی"
|
||||
type="text"
|
||||
required
|
||||
className="input-field"
|
||||
placeholder="Doe"
|
||||
autoComplete="family-name"
|
||||
placeholder="مثلاً رضایی"
|
||||
value={form.lastName}
|
||||
onChange={(e) => setForm({ ...form, lastName: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1.5">Email address</label>
|
||||
<input
|
||||
<AuthField
|
||||
id="email"
|
||||
label="ایمیل"
|
||||
type="email"
|
||||
required
|
||||
className="input-field"
|
||||
dir="ltr"
|
||||
autoComplete="email"
|
||||
placeholder="you@example.com"
|
||||
value={form.email}
|
||||
onChange={(e) => setForm({ ...form, email: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1.5">Password</label>
|
||||
<input
|
||||
<AuthField
|
||||
id="password"
|
||||
label="رمز عبور"
|
||||
type="password"
|
||||
required
|
||||
minLength={8}
|
||||
className="input-field"
|
||||
placeholder="Min 8 characters"
|
||||
dir="ltr"
|
||||
autoComplete="new-password"
|
||||
placeholder="حداقل ۸ کاراکتر"
|
||||
value={form.password}
|
||||
onChange={(e) => setForm({ ...form, password: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button type="submit" disabled={isLoading} className="btn-primary w-full">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoading}
|
||||
className="inline-flex w-full items-center justify-center gap-2 rounded-xl bg-primary-600 px-6 py-3.5 font-bold text-white shadow-lg shadow-primary-600/30 transition hover:bg-primary-500 disabled:cursor-not-allowed disabled:opacity-60"
|
||||
>
|
||||
{isLoading ? (
|
||||
<>
|
||||
<div className="animate-spin rounded-full h-4 w-4 border-2 border-white border-t-transparent" />
|
||||
Creating account...
|
||||
<span className="h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent" />
|
||||
در حال ساخت حساب…
|
||||
</>
|
||||
) : (
|
||||
'Create account'
|
||||
<>
|
||||
ساخت حساب
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
|
||||
<p className="text-center text-sm text-gray-500">
|
||||
Already have an account?{' '}
|
||||
<Link href="/login" className="text-primary-600 hover:text-primary-500 font-semibold">
|
||||
Sign in
|
||||
</Link>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</AuthShell>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
import type { InputHTMLAttributes } from 'react';
|
||||
|
||||
// A labeled input styled for the frosted dark-glass auth panel.
|
||||
export function AuthField({
|
||||
label,
|
||||
id,
|
||||
...props
|
||||
}: { label: string } & InputHTMLAttributes<HTMLInputElement>) {
|
||||
return (
|
||||
<div>
|
||||
<label htmlFor={id} className="mb-1.5 block text-sm font-medium text-white/85">
|
||||
{label}
|
||||
</label>
|
||||
<input
|
||||
id={id}
|
||||
{...props}
|
||||
className="w-full rounded-xl border border-white/15 bg-white/10 px-4 py-3 text-white placeholder-white/45 outline-none backdrop-blur-md transition focus:border-primary-400 focus:bg-white/[0.16] focus:ring-2 focus:ring-primary-400/30"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
import type { ReactNode } from 'react';
|
||||
import { Vazirmatn } from 'next/font/google';
|
||||
import Link from 'next/link';
|
||||
import { Logo } from '@/components/landing/Logo';
|
||||
|
||||
const vazir = Vazirmatn({ subsets: ['arabic'], variable: '--font-vazir', display: 'swap' });
|
||||
|
||||
// Cinematic auth shell that echoes the Abrban landing: a calm blue sky (the
|
||||
// "clear sky" finale), soft drifting clouds, a warm sun glow, the brand logo,
|
||||
// and the form inside a frosted dark-glass panel. Persian / RTL.
|
||||
export function AuthShell({
|
||||
icon,
|
||||
title,
|
||||
subtitle,
|
||||
children,
|
||||
altPrompt,
|
||||
altHref,
|
||||
altLabel,
|
||||
}: {
|
||||
icon: ReactNode;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
children: ReactNode;
|
||||
altPrompt: string;
|
||||
altHref: string;
|
||||
altLabel: string;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
dir="rtl"
|
||||
className={`${vazir.variable} font-vazir relative min-h-screen w-full overflow-hidden bg-gradient-to-b from-[#1b6fd0] via-[#589add] to-[#cfe6f7] text-white`}
|
||||
>
|
||||
{/* Sky atmosphere: warm sun glow, drifting clouds, soft vignette */}
|
||||
<div className="pointer-events-none absolute inset-0 overflow-hidden">
|
||||
<div className="absolute right-[10%] top-[-10%] h-80 w-80 rounded-full bg-[radial-gradient(circle,_rgba(255,244,214,0.9),_rgba(255,236,190,0.28)_45%,_transparent_70%)] blur-2xl" />
|
||||
<div className="abrban-float absolute left-[-6%] top-[20%] h-40 w-80 rounded-full bg-white/40 blur-3xl" />
|
||||
<div
|
||||
className="abrban-float absolute right-[-5%] top-[42%] h-44 w-96 rounded-full bg-white/30 blur-3xl"
|
||||
style={{ animationDelay: '1.4s' }}
|
||||
/>
|
||||
<div
|
||||
className="abrban-float absolute bottom-[4%] left-[16%] h-40 w-[30rem] rounded-full bg-white/45 blur-3xl"
|
||||
style={{ animationDelay: '0.7s' }}
|
||||
/>
|
||||
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_transparent_52%,_rgba(8,20,40,0.5)_100%)]" />
|
||||
{/* Horizon: darken the lower area so the panel + footer link stay legible */}
|
||||
<div className="absolute inset-x-0 bottom-0 h-3/5 bg-gradient-to-t from-[rgba(7,16,38,0.82)] via-[rgba(8,18,42,0.38)] to-transparent" />
|
||||
</div>
|
||||
|
||||
{/* Header */}
|
||||
<header className="relative z-10 mx-auto flex max-w-5xl items-center justify-between px-6 py-5">
|
||||
<Link href="/" aria-label="ابربان" className="transition hover:opacity-90">
|
||||
<Logo className="abrban-ink" />
|
||||
</Link>
|
||||
<Link
|
||||
href="/"
|
||||
className="rounded-lg px-3 py-2 text-sm font-medium text-white/85 transition hover:text-white"
|
||||
>
|
||||
بازگشت به خانه
|
||||
</Link>
|
||||
</header>
|
||||
|
||||
{/* Form card */}
|
||||
<main className="relative z-10 flex min-h-[calc(100vh-80px)] items-center justify-center px-4 pb-16">
|
||||
<div className="w-full max-w-md">
|
||||
<div className="mb-7 text-center">
|
||||
<div className="mx-auto mb-4 inline-flex h-16 w-16 items-center justify-center rounded-2xl bg-white/12 text-white ring-1 ring-white/20 backdrop-blur-md">
|
||||
{icon}
|
||||
</div>
|
||||
<h1 className="abrban-ink text-3xl font-black tracking-tight sm:text-4xl">{title}</h1>
|
||||
<p className="abrban-ink mt-2 text-white/85">{subtitle}</p>
|
||||
</div>
|
||||
|
||||
<div className="abrban-panel rounded-[1.75rem] p-6 sm:p-8">{children}</div>
|
||||
|
||||
<p className="abrban-ink mt-6 text-center text-sm text-white/90">
|
||||
{altPrompt}{' '}
|
||||
<Link href={altHref} className="font-bold text-primary-200 underline-offset-4 hover:text-white hover:underline">
|
||||
{altLabel}
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user