103 lines
2.8 KiB
JavaScript
103 lines
2.8 KiB
JavaScript
import React, { useContext, useEffect, useState } from "react";
|
|
import { Button, Col, Container, Form, Row, Alert } from "react-bootstrap";
|
|
import { Link, useLocation } from "wouter";
|
|
import MyNavbar from "../components/MyNavbar";
|
|
import UserContext from "../contexts/UserContext";
|
|
import { makeRequest } from "../utils.ts";
|
|
|
|
const LoginPage = () => {
|
|
const [username, setUsername] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const [error, setError] = useState(null);
|
|
|
|
const { currentUser, setCurrentUser } = useContext(UserContext);
|
|
const [location, setLocation] = useLocation();
|
|
|
|
useEffect(() => {
|
|
if (currentUser?.id) {
|
|
gotoHome();
|
|
}
|
|
}, [currentUser]);
|
|
|
|
const gotoHome = () => {
|
|
setLocation("/");
|
|
};
|
|
|
|
const sendLoginRequest = async (e) => {
|
|
e?.preventDefault();
|
|
await makeRequest({
|
|
url: "http://localhost:5000/login",
|
|
method: "POST",
|
|
body: { username, password },
|
|
})
|
|
.then((resp) => resp.json())
|
|
.then((data) => {
|
|
if (data.error) {
|
|
setError(data);
|
|
return;
|
|
}
|
|
setCurrentUser(data);
|
|
});
|
|
};
|
|
|
|
return (
|
|
<React.Fragment>
|
|
<MyNavbar />
|
|
<Container className="p-5">
|
|
{error && (
|
|
<Container>
|
|
<Alert variant="danger" className="mx-auto w-50 text-center">
|
|
{error.message}
|
|
</Alert>
|
|
</Container>
|
|
)}
|
|
<h2>Login</h2>
|
|
<br />
|
|
<Form onSubmit={sendLoginRequest}>
|
|
<Form.Group as={Row} className="mb-3" controlId="username">
|
|
<Form.Label column sm={2} className="me-2">
|
|
Username
|
|
</Form.Label>
|
|
<Col sm={9}>
|
|
<Form.Control
|
|
type="username"
|
|
placeholder="username"
|
|
onChange={(e) => {
|
|
setUsername(e.target.value);
|
|
}}
|
|
/>
|
|
</Col>
|
|
</Form.Group>
|
|
<Form.Group as={Row} className="mb-3" controlId="password">
|
|
<Form.Label column sm={2} className="me-2">
|
|
Password
|
|
</Form.Label>
|
|
<Col sm={9}>
|
|
<Form.Control
|
|
type="password"
|
|
placeholder="password"
|
|
onChange={(e) => {
|
|
setPassword(e.target.value);
|
|
}}
|
|
/>
|
|
</Col>
|
|
</Form.Group>
|
|
<Form.Group as={Row} className="mb-3" controlId="submit">
|
|
<Col sm={2}></Col>
|
|
<Col sm={2}>
|
|
<Button type="submit">Submit</Button>
|
|
</Col>
|
|
</Form.Group>
|
|
<Form.Group as={Row}>
|
|
<p>
|
|
Don't have an account? <Link href="/register">Register here</Link>
|
|
</p>
|
|
</Form.Group>
|
|
</Form>
|
|
</Container>
|
|
</React.Fragment>
|
|
);
|
|
};
|
|
|
|
export default LoginPage;
|