94 lines
2.8 KiB
TypeScript
94 lines
2.8 KiB
TypeScript
import { useState, type FormEvent, type ChangeEvent } from "react";
|
|
import { useNavigate, useLocation, Link } from "react-router-dom";
|
|
import { useAuth } from "../contexts/AuthContext";
|
|
import styles from "./LoginPage.module.css";
|
|
|
|
export default function LoginPage() {
|
|
const navigate = useNavigate();
|
|
const location = useLocation();
|
|
const { state, login, clearError } = useAuth();
|
|
|
|
const successMessage = (location.state as { message?: string } | null)
|
|
?.message;
|
|
|
|
const [email, setEmail] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
|
|
const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
|
|
e.preventDefault();
|
|
clearError();
|
|
try {
|
|
await login({ email, password });
|
|
navigate("/");
|
|
} catch {
|
|
// error is captured in state.error via context
|
|
}
|
|
};
|
|
|
|
const handleEmailChange = (e: ChangeEvent<HTMLInputElement>) => {
|
|
setEmail(e.target.value);
|
|
};
|
|
|
|
const handlePasswordChange = (e: ChangeEvent<HTMLInputElement>) => {
|
|
setPassword(e.target.value);
|
|
};
|
|
|
|
return (
|
|
<div className={styles.container}>
|
|
<div className={styles.card}>
|
|
<h1 className={styles.title}>Sign In</h1>
|
|
<p className={styles.subtitle}>Welcome back to Job Tracker</p>
|
|
|
|
{state.error && <div className={styles.error}>{state.error}</div>}
|
|
{successMessage && <div className={styles.success}>{successMessage}</div>}
|
|
|
|
<form onSubmit={handleSubmit} className={styles.form}>
|
|
<div className={styles.field}>
|
|
<label htmlFor="email" className={styles.label}>
|
|
Email
|
|
</label>
|
|
<input
|
|
id="email"
|
|
type="email"
|
|
value={email}
|
|
onChange={handleEmailChange}
|
|
className={styles.input}
|
|
placeholder="you@example.com"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div className={styles.field}>
|
|
<label htmlFor="password" className={styles.label}>
|
|
Password
|
|
</label>
|
|
<input
|
|
id="password"
|
|
type="password"
|
|
value={password}
|
|
onChange={handlePasswordChange}
|
|
className={styles.input}
|
|
placeholder="\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={state.isLoading}
|
|
className={styles.button}
|
|
>
|
|
{state.isLoading ? "Signing in..." : "Sign In"}
|
|
</button>
|
|
</form>
|
|
|
|
<p className={styles.footer}>
|
|
Don't have an account?{" "}
|
|
<Link to="/register" className={styles.link}>
|
|
Create one
|
|
</Link>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |