Initial Commit

2025-12-05 16:40:33 +07:00
parent 0834f12410
commit 94c7d5aec0
91 changed files with 20446 additions and 0 deletions
--- a/src/pages/Login.js
+++ b/src/pages/Login.js
@@ -0,0 +1,122 @@
+import React, { useState } from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+import { Button } from '../components/ui/button';
+import { Input } from '../components/ui/input';
+import { Label } from '../components/ui/label';
+import { Card } from '../components/ui/card';
+import { toast } from 'sonner';
+import Navbar from '../components/Navbar';
+import { ArrowRight, ArrowLeft } from 'lucide-react';
+
+const Login = () => {
+  const navigate = useNavigate();
+  const { login } = useAuth();
+  const [loading, setLoading] = useState(false);
+  const [formData, setFormData] = useState({
+    email: '',
+    password: ''
+  });
+
+  const handleInputChange = (e) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({ ...prev, [name]: value }));
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+
+    try {
+      const user = await login(formData.email, formData.password);
+      toast.success('Login successful!');
+      
+      if (user.role === 'admin') {
+        navigate('/admin');
+      } else {
+        navigate('/dashboard');
+      }
+    } catch (error) {
+      toast.error(error.response?.data?.detail || 'Login failed. Please check your credentials.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-[#FDFCF8]">
+      <Navbar />
+      
+      <div className="max-w-md mx-auto px-6 py-12">
+        <div className="mb-8">
+          <Link to="/" className="inline-flex items-center text-[#6B708D] hover:text-[#E07A5F] transition-colors">
+            <ArrowLeft className="h-4 w-4 mr-2" />
+            Back to Home
+          </Link>
+        </div>
+
+        <Card className="p-8 md:p-12 bg-white rounded-2xl border border-[#EAE0D5] shadow-lg">
+          <div className="mb-8 text-center">
+            <h1 className="text-4xl md:text-5xl font-semibold fraunces text-[#3D405B] mb-4">
+              Welcome Back
+            </h1>
+            <p className="text-lg text-[#6B708D]">
+              Login to access your member dashboard.
+            </p>
+          </div>
+
+          <form onSubmit={handleSubmit} className="space-y-6" data-testid="login-form">
+            <div>
+              <Label htmlFor="email">Email</Label>
+              <Input
+                id="email"
+                name="email"
+                type="email"
+                required
+                value={formData.email}
+                onChange={handleInputChange}
+                placeholder="your.email@example.com"
+                className="h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
+                data-testid="login-email-input"
+              />
+            </div>
+
+            <div>
+              <Label htmlFor="password">Password</Label>
+              <Input
+                id="password"
+                name="password"
+                type="password"
+                required
+                value={formData.password}
+                onChange={handleInputChange}
+                placeholder="Enter your password"
+                className="h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
+                data-testid="login-password-input"
+              />
+            </div>
+
+            <Button
+              type="submit"
+              disabled={loading}
+              className="w-full bg-[#E07A5F] text-white hover:bg-[#D0694E] rounded-full py-6 text-lg font-medium shadow-lg hover:scale-105 transition-transform disabled:opacity-50"
+              data-testid="login-submit-button"
+            >
+              {loading ? 'Logging in...' : 'Login'}
+              <ArrowRight className="ml-2 h-5 w-5" />
+            </Button>
+
+            <p className="text-center text-[#6B708D]">
+              Don't have an account?{' '}
+              <Link to="/register" className="text-[#E07A5F] hover:underline font-medium">
+                Register here
+              </Link>
+            </p>
+          </form>
+        </Card>
+      </div>
+    </div>
+  );
+};
+
+export default Login;