feat: add admin login page

This commit is contained in:
پارسا آقایی 2026-06-12 13:35:05 +03:30
parent 222581c6a3
commit 4dc8786847
2 changed files with 92 additions and 0 deletions

View File

@ -1,11 +1,13 @@
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Layout from './components/Layout';
import Dashboard from './pages/Dashboard';
import Login from './pages/Login';
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/login" element={<Login />} />
<Route path="/" element={<Layout />}>
<Route index element={<Dashboard />} />
<Route path="users" element={<div className="p-4">مدیریت کاربران</div>} />

View File

@ -0,0 +1,90 @@
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Lock, Mail, ChevronLeft } from 'lucide-react';
export default function Login() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [isLoading, setIsLoading] = useState(false);
const navigate = useNavigate();
const handleLogin = (e: React.FormEvent) => {
e.preventDefault();
setIsLoading(true);
// Simulate API call
setTimeout(() => {
setIsLoading(false);
navigate('/');
}, 1000);
};
return (
<div className="min-h-screen bg-gray-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8 font-vazir" dir="rtl">
<div className="sm:mx-auto sm:w-full sm:max-w-md">
<div className="w-20 h-20 bg-purple-600 rounded-2xl mx-auto flex items-center justify-center shadow-lg shadow-purple-200">
<Lock className="w-10 h-10 text-white" />
</div>
<h2 className="mt-6 text-center text-3xl font-black text-gray-900">
ورود به پنل مدیریت
</h2>
<p className="mt-2 text-center text-sm text-gray-600 font-bold">
کانینا | لابراتوار تخصصی مکملهای درمانی حیوانات
</p>
</div>
<div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
<div className="bg-white py-8 px-4 shadow-xl shadow-gray-100 sm:rounded-3xl sm:px-10 border border-gray-100">
<form className="space-y-6" onSubmit={handleLogin}>
<div>
<label className="block text-sm font-black text-gray-700">آدرس ایمیل</label>
<div className="mt-2 relative">
<div className="absolute inset-y-0 right-0 pl-3 flex items-center pr-3 pointer-events-none">
<Mail className="h-5 w-5 text-gray-400" />
</div>
<input
type="email"
required
value={email}
onChange={(e) => setEmail(e.target.value)}
className="block w-full pl-3 pr-10 py-3 border border-gray-200 rounded-xl focus:ring-purple-500 focus:border-purple-500 sm:text-sm bg-gray-50 font-bold transition-all"
placeholder="admin@canina-iran.com"
dir="ltr"
/>
</div>
</div>
<div>
<label className="block text-sm font-black text-gray-700">رمز عبور</label>
<div className="mt-2 relative">
<div className="absolute inset-y-0 right-0 pl-3 flex items-center pr-3 pointer-events-none">
<Lock className="h-5 w-5 text-gray-400" />
</div>
<input
type="password"
required
value={password}
onChange={(e) => setPassword(e.target.value)}
className="block w-full pl-3 pr-10 py-3 border border-gray-200 rounded-xl focus:ring-purple-500 focus:border-purple-500 sm:text-sm bg-gray-50 font-bold transition-all text-left"
placeholder="••••••••"
dir="ltr"
/>
</div>
</div>
<div>
<button
type="submit"
disabled={isLoading}
className="w-full flex justify-center items-center gap-2 py-3 px-4 border border-transparent rounded-xl shadow-sm text-sm font-black text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 transition-all disabled:opacity-50 disabled:cursor-wait"
>
{isLoading ? 'در حال ورود...' : 'ورود به سیستم'}
{!isLoading && <ChevronLeft className="w-5 h-5" />}
</button>
</div>
</form>
</div>
</div>
</div>
);
}