feat: add admin login page
This commit is contained in:
parent
222581c6a3
commit
4dc8786847
@ -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>} />
|
||||
|
||||
90
frontend/admin-panel/src/pages/Login.tsx
Normal file
90
frontend/admin-panel/src/pages/Login.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user