132 lines
5.4 KiB
TypeScript
132 lines
5.4 KiB
TypeScript
// 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 = () => {
|
|
// ── 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 |