Completed the ToDo App

2026-04-25 22:45:00 +06:00
parent c295362495
commit 4e6a1ef71f
12 changed files with 987 additions and 106 deletions
--- a/client/src/pages/LoginPage.tsx
+++ b/client/src/pages/LoginPage.tsx
@@ -1,4 +1,132 @@
+// src/pages/LoginPage.tsx
+import { useState } from 'react'
+import { Link, useNavigate } from 'react-router-dom'
+import { useAuth } from '../context/AuthContext'
+import api from '../api/axios'
+import type { AuthResponse } from '../types'
+import axios from 'axios'
+
 const LoginPage = () => {
-    return <div>Login Page</div>
+    // ── State ──────────────────────────────────────────
+    const [email, setEmail] = useState<string>('')
+    const [password, setPassword] = useState<string>('')
+    const [error, setError] = useState<string>('')
+    const [isLoading, setIsLoading] = useState<boolean>(false)
+
+    // ── Hooks ──────────────────────────────────────────
+    const { login } = useAuth()       // get login function from context
+    const navigate = useNavigate()    // programmatic navigation
+
+    // ── Submit Handler ─────────────────────────────────
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault()
+        setError('')        // clear previous errors
+        setIsLoading(true)
+
+        try {
+            const response = await api.post<AuthResponse>('/auth/login', {
+                email,
+                password
+            })
+            login(response.data)       // save token + user to context
+            navigate('/dashboard')     // redirect to dashboard
+        } catch (err: unknown) {
+            // Axios wraps errors — need to extract message
+            if (axios.isAxiosError(err)) {
+                setError(
+                    err.response?.data?.message || 'Login failed'
+                )
+            } else {
+                setError('Something went wrong')
+            }
+        } finally {
+            setIsLoading(false)
+        }
+    }
+
+    // ── UI ─────────────────────────────────────────────
+    return (
+        // Full screen centered layout
+        <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
+
+            {/* Card container */}
+            <div className="bg-white rounded-2xl shadow-sm border border-gray-200 w-full max-w-md p-8">
+
+                {/* Header */}
+                <div className="text-center mb-8">
+                    <h1 className="text-2xl font-bold text-gray-900">
+                        Welcome back
+                    </h1>
+                    <p className="text-gray-500 mt-2 text-sm">
+                        Sign in to your account
+                    </p>
+                </div>
+
+                {/* Error message */}
+                {error && (
+                    <div className="bg-red-50 text-red-600 text-sm px-4 py-3 rounded-lg mb-6">
+                        {error}
+                    </div>
+                )}
+
+                {/* Form */}
+                <form onSubmit={handleSubmit} className="space-y-5">
+
+                    {/* Email field */}
+                    <div>
+                        <label className="block text-sm font-medium text-gray-700 mb-1.5">
+                            Email
+                        </label>
+                        <input
+                            type="email"
+                            value={email}
+                            onChange={(e) => setEmail(e.target.value)}
+                            placeholder="you@example.com"
+                            required
+                            className="w-full px-4 py-2.5 rounded-lg border border-gray-300 text-sm outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition"
+                        />
+                    </div>
+
+                    {/* Password field */}
+                    <div>
+                        <label className="block text-sm font-medium text-gray-700 mb-1.5">
+                            Password
+                        </label>
+                        <input
+                            type="password"
+                            value={password}
+                            onChange={(e) => setPassword(e.target.value)}
+                            placeholder="••••••••"
+                            required
+                            className="w-full px-4 py-2.5 rounded-lg border border-gray-300 text-sm outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition"
+                        />
+                    </div>
+
+                    {/* Submit button */}
+                    <button
+                        type="submit"
+                        disabled={isLoading}
+                        className="w-full bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 disabled:cursor-not-allowed text-white font-medium py-2.5 px-4 rounded-lg text-sm transition"
+                    >
+                        {isLoading ? 'Signing in...' : 'Sign in'}
+                    </button>
+
+                </form>
+
+                {/* Register link */}
+                <p className="text-center text-sm text-gray-500 mt-6">
+                    Don't have an account?{' '}
+                    <Link
+                        to="/register"
+                        className="text-blue-600 hover:underline font-medium"
+                    >
+                        Register
+                    </Link>
+                </p>
+
+            </div>
+        </div>
+    )
 }
-export default LoginPage
+
+export default LoginPage