File size: 1,790 Bytes
6c4e56e | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | import React, { useState } from "react";
import { Link } from "react-router-dom";
import { useAuth } from "../../contexts/AuthContext";
import TextInput from "../common/inputs/TextInput";
import { Button } from "../common/ui/button";
import { ROUTES } from "../../lib/constants";
const Login = () => {
const { login } = useAuth();
const [formData, setFormData] = useState({
username: "",
password: "",
});
const handleChange = (e) => {
const { name, value } = e.target;
setFormData((prev) => ({
...prev,
[name]: value,
}));
};
const handleSubmit = async (event) => {
event.preventDefault();
await login(formData);
};
return (
<div className="max-w-xl mx-auto p-8 bg-[#F7F9FD] mt-6">
<div className="text-center mb-8">
<h1 className="text-2xl font-bold mb-4">Welcome back!</h1>
<p className="text-gray-600">
Need to register?{" "}
<Link
to={ROUTES.REGISTER}
className="text-primary hover:text-primary/90 font-semibold"
>
Create an account
</Link>
</p>
</div>
<form onSubmit={handleSubmit} className="space-y-6">
<TextInput
aria-label="username"
label="Username"
name="username"
type="text"
value={formData.username}
onChange={handleChange}
required
/>
<TextInput
aria-label="password"
label="Password"
type="password"
name="password"
value={formData.password}
onChange={handleChange}
required
/>
<Button type="submit" className="w-full">
Login
</Button>
</form>
</div>
);
};
export default Login;
|