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>

frontend/src/app/login/page.tsx

@@ -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>
+    <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
+          dir="ltr"
+          autoComplete="email"
+          placeholder="you@example.com"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+        />
 
-        <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
-              id="email"
-              type="email"
-              required
-              className="input-field"
-              placeholder="you@example.com"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-            />
-          </div>
+        <AuthField
+          id="password"
+          label="رمز عبور"
+          type="password"
+          required
+          dir="ltr"
+          autoComplete="current-password"
+          placeholder="••••••••"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+        />
 
-          <div>
-            <label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-1.5">
-              Password
-            </label>
-            <input
-              id="password"
-              type="password"
-              required
-              className="input-field"
-              placeholder="••••••••"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-            />
-          </div>
-
-          <button type="submit" disabled={isLoading} className="btn-primary w-full">
-            {isLoading ? (
-              <>
-                <div className="animate-spin rounded-full h-4 w-4 border-2 border-white border-t-transparent" />
-                Signing in...
-              </>
-            ) : (
-              'Sign in'
-            )}
-          </button>
-
-          <p className="text-center text-sm text-gray-500">
-            Don&apos;t have an account?{' '}
-            <Link href="/register" className="text-primary-600 hover:text-primary-500 font-semibold">
-              Create one
-            </Link>
-          </p>
-        </form>
-      </div>
-    </div>
+        <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 ? (
+            <>
+              <span className="h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent" />
+              در حال ورود…
+            </>
+          ) : (
+            <>
+              ورود
+              <ArrowLeft className="h-4 w-4" />
+            </>
+          )}
+        </button>
+      </form>
+    </AuthShell>
   );
 }

frontend/src/app/register/page.tsx

@@ -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>
+    <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
+            autoComplete="given-name"
+            placeholder="مثلاً علی"
+            value={form.firstName}
+            onChange={(e) => setForm({ ...form, firstName: e.target.value })}
+          />
+          <AuthField
+            id="lastName"
+            label="نام خانوادگی"
+            type="text"
+            required
+            autoComplete="family-name"
+            placeholder="مثلاً رضایی"
+            value={form.lastName}
+            onChange={(e) => setForm({ ...form, lastName: e.target.value })}
+          />
         </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
-                type="text"
-                required
-                className="input-field"
-                placeholder="John"
-                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
-                type="text"
-                required
-                className="input-field"
-                placeholder="Doe"
-                value={form.lastName}
-                onChange={(e) => setForm({ ...form, lastName: e.target.value })}
-              />
-            </div>
-          </div>
+        <AuthField
+          id="email"
+          label="ایمیل"
+          type="email"
+          required
+          dir="ltr"
+          autoComplete="email"
+          placeholder="you@example.com"
+          value={form.email}
+          onChange={(e) => setForm({ ...form, email: e.target.value })}
+        />
 
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1.5">Email address</label>
-            <input
-              type="email"
-              required
-              className="input-field"
-              placeholder="you@example.com"
-              value={form.email}
-              onChange={(e) => setForm({ ...form, email: e.target.value })}
-            />
-          </div>
+        <AuthField
+          id="password"
+          label="رمز عبور"
+          type="password"
+          required
+          minLength={8}
+          dir="ltr"
+          autoComplete="new-password"
+          placeholder="حداقل ۸ کاراکتر"
+          value={form.password}
+          onChange={(e) => setForm({ ...form, password: e.target.value })}
+        />
 
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1.5">Password</label>
-            <input
-              type="password"
-              required
-              minLength={8}
-              className="input-field"
-              placeholder="Min 8 characters"
-              value={form.password}
-              onChange={(e) => setForm({ ...form, password: e.target.value })}
-            />
-          </div>
-
-          <button type="submit" disabled={isLoading} className="btn-primary w-full">
-            {isLoading ? (
-              <>
-                <div className="animate-spin rounded-full h-4 w-4 border-2 border-white border-t-transparent" />
-                Creating account...
-              </>
-            ) : (
-              'Create account'
-            )}
-          </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>
+        <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 ? (
+            <>
+              <span className="h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent" />
+              در حال ساخت حساب…
+            </>
+          ) : (
+            <>
+              ساخت حساب
+              <ArrowLeft className="h-4 w-4" />
+            </>
+          )}
+        </button>
+      </form>
+    </AuthShell>
   );
 }