main

pages/LoginPage.tsx

@@ -0,0 +1,94 @@
+import React, { useState } from 'react';
+import axios from 'axios';
+import { useAuth } from '../AuthContext';
+import { useNavigate, Link } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Tooltip } from '../components/Tooltip';
+import { GoogleLogin } from '@react-oauth/google';
+
+export default function Login() {
+    const { t } = useTranslation();
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [error, setError] = useState('');
+    const { login } = useAuth();
+    const navigate = useNavigate();
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        try {
+            const res = await axios.post('/api/auth/login', { email, password });
+            login(res.data.token, res.data.user);
+            navigate('/');
+        } catch (err: any) {
+            setError(err.response?.data?.error || 'Login failed');
+        }
+    };
+
+    return (
+        <div className="flex min-h-screen items-center justify-center bg-gray-100">
+            <div className="w-full max-w-md rounded-lg bg-white p-8 shadow-lg">
+                <h2 className="mb-6 text-center text-2xl font-bold text-gray-800">{t('buttons.login')}</h2>
+                {error && <div className="mb-4 rounded bg-red-100 p-2 text-red-600">{error}</div>}
+                <form onSubmit={handleSubmit}>
+                    <div className="mb-4">
+                        <label className="mb-1 block font-semibold text-gray-700">Email</label>
+                        <input
+                            type="email"
+                            className="w-full rounded border p-2 focus:border-blue-500 focus:outline-none"
+                            value={email}
+                            onChange={(e) => setEmail(e.target.value)}
+                            required
+                        />
+                    </div>
+                    <div className="mb-6">
+                        <label className="mb-1 block font-semibold text-gray-700">Password</label>
+                        <input
+                            type="password"
+                            className="w-full rounded border p-2 focus:border-blue-500 focus:outline-none"
+                            value={password}
+                            onChange={(e) => setPassword(e.target.value)}
+                            required
+                        />
+                    </div>
+                    <Tooltip content={t('buttons.login')} position="top">
+                        <button
+                            type="submit"
+                            className="w-full rounded bg-blue-600 py-2 font-bold text-white hover:bg-blue-700 transition"
+                        >
+                            {t('buttons.login')}
+                        </button>
+                    </Tooltip>
+                </form>
+
+                <div className="mt-6">
+                    <div className="relative">
+                        <div className="absolute inset-0 flex items-center">
+                            <div className="w-full border-t border-gray-300"></div>
+                        </div>
+                        <div className="relative flex justify-center text-sm">
+                            <span className="bg-white px-2 text-gray-500">Or continue with</span>
+                        </div>
+                    </div>
+                    <div className="mt-6 flex justify-center">
+                        <GoogleLogin
+                            onSuccess={async (credentialResponse) => {
+                                try {
+                                    const res = await axios.post('/api/auth/google', { credential: credentialResponse.credential });
+                                    login(res.data.token, res.data.user);
+                                    navigate('/');
+                                } catch (err) {
+                                    setError('Google Login Failed');
+                                }
+                            }}
+                            onError={() => setError('Google Login Failed')}
+                        />
+                    </div>
+                </div>
+                <div className="mt-4 text-center">
+                    <p className="text-gray-600">Don't have an account? <Link to="/signup" className="text-blue-600 hover:underline">Sign up</Link></p>
+                </div>
+            </div>
+        </div>
+    );
+}