Magdy Atef Zahran

Forgot Password)

Project Setup

npm create vite@latest auth-forms -- --template react cd auth-forms npm i npm i -D tailwindcss postcss autoprefixer npx tailwindcss init -p npm i react-router-dom zod clsx

tailwind.config.js

/** @type {import('tailwindcss').Config} */ export default { darkMode: 'class', content: ['./index.html','./src/**/*.{js,jsx,ts,tsx}'], theme: { extend: { colors: { brand: { 50:'#eef2ff', 600:'#4f46e5', 700:'#4338ca' } }, boxShadow: { soft: '0 8px 24px rgba(0,0,0,.08)' } }, }, plugins: [], }

src/index.css

@tailwind base; @tailwind components; @tailwind utilities; @layer base { html { @apply antialiased; } body { @apply bg-gray-50 text-gray-900; } } @layer components { .card { @apply bg-white rounded-2xl shadow-soft p-6; } .btn { @apply inline-flex items-center justify-center gap-2 rounded-xl px-4 py-2 font-medium transition hover:opacity-90; } .btn-primary { @apply btn bg-brand-600 text-white; } .btn-ghost { @apply btn bg-transparent hover:bg-gray-100; } .input { @apply w-full rounded-xl border border-gray-200 bg-white px-3 py-2 focus:outline-none focus:ring-2 focus:ring-brand-600; } .label { @apply text-sm font-medium text-gray-700; } .hint { @apply text-xs text-gray-500; } .alert { @apply rounded-xl border px-3 py-2 text-sm; } .alert-error { @apply alert border-red-200 bg-red-50 text-red-700; } .alert-success { @apply alert border-green-200 bg-green-50 text-green-700; } .link { @apply text-brand-700 hover:underline; } }

index.html

<!doctype html> <html lang="en" class="h-full"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" /> <title>Auth Forms</title> </head> <body class="h-full"> <div id="root"></div> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22module%22%20src%3D%22%2Fsrc%2Fmain.jsx%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object mce-object-script" width="20" height="20" alt="<script>" /> </body> </html>

Project structure

src/ main.jsx App.jsx pages/ Login.jsx Register.jsx Forgot.jsx Dashboard.jsx ResetSent.jsx components/ AuthLayout.jsx Input.jsx PasswordInput.jsx Button.jsx Alert.jsx lib/ api.js validators.js auth.js

src/main.jsx

import React from 'react' import { createRoot } from 'react-dom/client' import { createBrowserRouter, RouterProvider } from 'react-router-dom' import './index.css' import App from './App' import Login from './pages/Login' import Register from './pages/Register' import Forgot from './pages/Forgot' import ResetSent from './pages/ResetSent' import Dashboard from './pages/Dashboard' import { requireAuth } from './lib/auth' const router = createBrowserRouter([ { path: '/', element: <App/> }, { path: '/login', element: <Login/> }, { path: '/register', element: <Register/> }, { path: '/forgot', element: <Forgot/> }, { path: '/reset-sent', element: <ResetSent/> }, { path: '/dashboard', element: requireAuth(<Dashboard/>) }, ]) createRoot(document.getElementById('root')).render( <React.StrictMode><RouterProvider router={router} /></React.StrictMode> )

src/App.jsx

import { Link, Navigate } from 'react-router-dom' import { isAuthed } from './lib/auth' export default function App(){ if(isAuthed()) return <Navigate to="/dashboard" replace /> return ( <div className="min-h-screen flex items-center justify-center p-6"> <div className="card max-w-lg w-full text-center space-y-4"> <h1 className="text-2xl font-bold">Auth Forms Kit</h1> <p className="text-gray-600">Login / Register / Forgot Password—جاهزين بالتصميم والفاليديشن.</p> <div className="flex justify-center gap-3"> <Link to="/login" className="btn-primary">Login</Link> <Link to="/register" className="btn-ghost">Register</Link> </div> </div> </div> ) }

Virtual Library + Validation

(Fake API) src/lib/api.js

// تخزين المستخدمين محليًا لتجربة الفلو const key = 'users_db_v1' const read = () => JSON.parse(localStorage.getItem(key) || '[]') const write = (arr) => localStorage.setItem(key, JSON.stringify(arr)) export async function registerUser({ name, email, password }) { await sleep(600) const users = read() if (users.some(u => u.email === email.toLowerCase())) { throw new Error('البريد مستخدم بالفعل') } users.push({ id: crypto.randomUUID(), name, email: email.toLowerCase(), password }) write(users) return { ok: true } } export async function loginUser({ email, password }) { await sleep(500) const users = read() const user = users.find(u => u.email === email.toLowerCase() && u.password === password) if (!user) throw new Error('بيانات الدخول غير صحيحة') localStorage.setItem('session_user', JSON.stringify({ id:user.id, name:user.name, email:user.email })) return { ok: true, user } } export async function requestPasswordReset(email){ await sleep(500) const users = read() const user = users.find(u => u.email === email.toLowerCase()) if (!user) throw new Error('البريد غير مسجل') // بنبعت “لينك” وهمي localStorage.setItem('reset_token', JSON.stringify({ email:user.email, ts:Date.now() })) return { ok:true } } export function logout(){ localStorage.removeItem('session_user') } export function getSession(){ const raw = localStorage.getItem('session_user') return raw ? JSON.parse(raw) : null } const sleep = (ms)=> new Promise(r=>setTimeout(r,ms))

src/lib/validators.js

import { z } from 'zod' export const emailSchema = z.string().email('بريد غير صالح') export const passwordSchema = z.string() .min(6, 'كلمة المرور لا تقل عن 6 أحرف') .regex(/[A-Z]/, 'لازم حرف كبير واحد على الأقل') .regex(/[0-9]/, 'لازم رقم واحد على الأقل') export const nameSchema = z.string().min(2, 'الاسم قصير جدًا') export const registerSchema = z.object({ name: nameSchema, email: emailSchema, password: passwordSchema, }) export const loginSchema = z.object({ email: emailSchema, password: z.string().min(1, 'مطلوب'), }) export const forgotSchema = z.object({ email: emailSchema, })

src/lib/auth.js

import { getSession } from './api' import { Navigate } from 'react-router-dom' export const isAuthed = () => !!getSession() export const requireAuth = (element) => isAuthed() ? element : <Navigate to="/login" replace />

Components

src/components/AuthLayout.jsx

export default function AuthLayout({ title, subtitle, children }) { return ( <div className="min-h-screen grid lg:grid-cols-2"> <div className="hidden lg:flex items-center justify-center bg-gradient-to-br from-brand-600 to-brand-700 p-10 text-white"> <div className="max-w-md"> <h2 className="text-3xl font-bold">Welcome to AuthKit</h2> <p className="mt-2 text-white/90">نُظم دخول جاهزة—تصميم + فاليديشن + تجربة كاملة.</p> </div> </div> <div className="flex items-center justify-center p-6"> <div className="card w-full max-w-md"> <h1 className="text-xl font-bold">{title}</h1> {subtitle && <p className="text-sm text-gray-600 mt-1">{subtitle}</p>} <div className="mt-5">{children}</div> </div> </div> </div> ) }

src/components/Input.jsx

export default function Input({ label, hint, error, ...props }) { return ( <div> <label className="label">{label}</label> <input className={`input ${error ? 'border-red-300 focus:ring-red-400' : ''}`} {...props} /> {hint && <p className="hint mt-1">{hint}</p>} {error && <p className="text-xs text-red-600 mt-1">{error}</p>} </div> ) }

src/components/PasswordInput.jsx

import { useState } from 'react' export default function PasswordInput({ label, error, ...props }) { const [show, setShow] = useState(false) return ( <div> <label className="label">{label}</label> <div className="relative"> <input type={show ? 'text' : 'password'} className={`input pr-10 ${error ? 'border-red-300 focus:ring-red-400' : ''}`} {...props} /> <button type="button" onClick={()=>setShow(!show)} className="absolute right-2 top-1/2 -translate-y-1/2 text-sm text-gray-500"> {show ? 'Hide' : 'Show'} </button> </div> {error && <p className="text-xs text-red-600 mt-1">{error}</p>} </div> ) }

src/components/Button.jsx

export default function Button({ children, loading, variant='primary', ...props }) { return ( <button disabled={loading || props.disabled} className={`${variant === 'primary' ? 'btn-primary' : 'btn-ghost'} w-full disabled:opacity-50`} {...props} > {loading && <span className="animate-pulse">●</span>} {children} </button> ) }

src/components/Alert.jsx

export function ErrorAlert({ children }) { return <div className="alert-error">{children}</div> } export function SuccessAlert({ children }) { return <div className="alert-success">{children}</div> }

Pages

src/pages/Register.jsx

import { useState } from 'react' import AuthLayout from '../components/AuthLayout' import Input from '../components/Input' import PasswordInput from '../components/PasswordInput' import Button from '../components/Button' import { Link, useNavigate } from 'react-router-dom' import { registerSchema } from '../lib/validators' import { registerUser } from '../lib/api' import { ErrorAlert, SuccessAlert } from '../components/Alert' export default function Register(){ const nav = useNavigate() const [form, setForm] = useState({ name:'', email:'', password:'' }) const [loading, setLoading] = useState(false) const [errors, setErrors] = useState({}) const [message, setMessage] = useState(null) const onChange = e => setForm({...form, [e.target.name]: e.target.value}) async function onSubmit(e){ e.preventDefault() setErrors({}) setMessage(null) const parsed = registerSchema.safeParse(form) if(!parsed.success){ const es = {} parsed.error.issues.forEach(i => es[i.path[0]] = i.message) setErrors(es); return } try{ setLoading(true) await registerUser(form) setMessage('تم إنشاء الحساب بنجاح—سجّل الدخول الآن.') setTimeout(()=> nav('/login'), 700) }catch(err){ setErrors({general: err.message}) }finally{ setLoading(false) } } return ( <AuthLayout title="إنشاء حساب" subtitle="ابدأ بحساب مجاني."> {errors.general && <ErrorAlert>{errors.general}</ErrorAlert>} {message && <SuccessAlert>{message}</SuccessAlert>} <form onSubmit={onSubmit} className="space-y-4"> <Input label="الاسم" name="name" value={form.name} onChange={onChange} error={errors.name}/> <Input label="البريد الإلكتروني" name="email" type="email" value={form.email} onChange={onChange} error={errors.email}/> <PasswordInput label="كلمة المرور" name="password" value={form.password} onChange={onChange} error={errors.password}/> <Button loading={loading} type="submit">إنشاء الحساب</Button> </form> <p className="mt-4 text-sm">عندك حساب؟ <Link to="/login" className="link">تسجيل الدخول</Link></p> </AuthLayout> ) }

src/pages/Login.jsx

import { useState } from 'react' import AuthLayout from '../components/AuthLayout' import Input from '../components/Input' import PasswordInput from '../components/PasswordInput' import Button from '../components/Button' import { Link, useNavigate, Navigate } from 'react-router-dom' import { loginSchema } from '../lib/validators' import { loginUser } from '../lib/api' import { ErrorAlert } from '../components/Alert' import { isAuthed } from '../lib/auth' export default function Login(){ if(isAuthed()) return <Navigate to="/dashboard" replace /> const nav = useNavigate() const [form, setForm] = useState({ email:'', password:'' }) const [loading, setLoading] = useState(false) const [errors, setErrors] = useState({}) const onChange = e => setForm({...form, [e.target.name]: e.target.value}) async function onSubmit(e){ e.preventDefault() setErrors({}) const parsed = loginSchema.safeParse(form) if(!parsed.success){ const es = {} parsed.error.issues.forEach(i => es[i.path[0]] = i.message) setErrors(es); return } try{ setLoading(true) await loginUser(form) nav('/dashboard') }catch(err){ setErrors({general: err.message}) }finally{ setLoading(false) } } return ( <AuthLayout title="تسجيل الدخول" subtitle="ادخل على حسابك."> {errors.general && <ErrorAlert>{errors.general}</ErrorAlert>} <form onSubmit={onSubmit} className="space-y-4"> <Input label="البريد الإلكتروني" name="email" type="email" value={form.email} onChange={onChange} error={errors.email}/> <PasswordInput label="كلمة المرور" name="password" value={form.password} onChange={onChange} error={errors.password}/> <div className="flex items-center justify-between"> <label className="text-sm flex items-center gap-2"> <input type="checkbox" className="rounded border-gray-300"/> تذكرني </label> <Link to="/forgot" className="link text-sm">نسيت كلمة المرور؟</Link> </div> <Button loading={loading} type="submit">دخول</Button> </form> <p className="mt-4 text-sm">لسه ماعندكش حساب؟ <Link to="/register" className="link">سجل الآن</Link></p> </AuthLayout> ) }

src/pages/Forgot.jsx

import { useState } from 'react' import AuthLayout from '../components/AuthLayout' import Input from '../components/Input' import Button from '../components/Button' import { Link, useNavigate } from 'react-router-dom' import { forgotSchema } from '../lib/validators' import { requestPasswordReset } from '../lib/api' import { ErrorAlert, SuccessAlert } from '../components/Alert' export default function Forgot(){ const nav = useNavigate() const [email, setEmail] = useState('') const [loading, setLoading] = useState(false) const [error, setError] = useState(null) const [ok, setOk] = useState(false) async function onSubmit(e){ e.preventDefault() setError(null) const parsed = forgotSchema.safeParse({ email }) if(!parsed.success){ setError(parsed.error.issues[0].message); return } try{ setLoading(true) await requestPasswordReset(email) setOk(true) setTimeout(()=> nav('/reset-sent'), 600) }catch(err){ setError(err.message) }finally{ setLoading(false) } } return ( <AuthLayout title="نسيت كلمة المرور؟" subtitle="هنبعت لك رابط لإعادة التعيين."> {error && <ErrorAlert>{error}</ErrorAlert>} {ok && <SuccessAlert>تم إرسال الرابط—افتح بريدك.</SuccessAlert>} <form onSubmit={onSubmit} className="space-y-4"> <Input label="البريد الإلكتروني" value={email} onChange={e=>setEmail(e.target.value)} error={error}/> <Button loading={loading} type="submit">إرسال الرابط</Button> </form> <p className="mt-4 text-sm"><Link to="/login" className="link">رجوع لتسجيل الدخول</Link></p> </AuthLayout> ) }

src/pages/ResetSent.jsx

import { Link } from 'react-router-dom' import AuthLayout from '../components/AuthLayout' export default function ResetSent(){ return ( <AuthLayout title="تم إرسال رابط إعادة التعيين"> <div className="space-y-4"> <p className="text-sm text-gray-600">اتحقق من بريدك الإلكتروني واتّبع الخطوات.</p> <Link to="/login" className="btn-primary w-full text-center">رجوع لتسجيل الدخول</Link> </div> </AuthLayout> ) }

src/pages/Dashboard.jsx

import { getSession, logout } from '../lib/api' import { Link, useNavigate } from 'react-router-dom' export default function Dashboard(){ const user = getSession() const nav = useNavigate() return ( <div className="min-h-screen flex items-center justify-center p-6"> <div className="card w-full max-w-lg text-center space-y-4"> <h1 className="text-2xl font-bold">Welcome, {user?.name || 'User'}</h1> <p className="text-gray-600">ده مثال لصفحة محمية. الآن تقدر تكمل بناء مشروعك.</p> <div className="flex justify-center gap-3"> <button className="btn-ghost" onClick={()=>{ logout(); nav('/login') }}>تسجيل الخروج</button> <Link className="btn-primary" to="/">الصفحة الرئيسية</Link> </div> </div> </div> ) }