66 lines
1.5 KiB
TypeScript
66 lines
1.5 KiB
TypeScript
import { useState } from "react";
|
|
import { login } from "../api/client";
|
|
import { useNavigate } from "react-router";
|
|
import {
|
|
Button,
|
|
Checkbox,
|
|
FormControlLabel,
|
|
Grid,
|
|
TextField,
|
|
Typography,
|
|
} from "@mui/material";
|
|
|
|
export const Login = () => {
|
|
const [userName, setUserName] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const [rememberMe, setRememberMe] = useState(false);
|
|
const navigate = useNavigate();
|
|
|
|
const handleLoginFlow = () =>
|
|
login(userName, password).then(() => {
|
|
navigate("/signup");
|
|
});
|
|
|
|
return (
|
|
<Grid container direction="column" spacing={2} alignItems="center">
|
|
<Typography variant="h3">Login</Typography>
|
|
<TextField
|
|
value={userName}
|
|
onChange={(e) => setUserName(e.target.value)}
|
|
placeholder="User"
|
|
/>
|
|
<TextField
|
|
type="password"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
placeholder="Password"
|
|
/>
|
|
<FormControlLabel
|
|
control={
|
|
<Checkbox
|
|
checked={rememberMe}
|
|
onChange={() => setRememberMe(!rememberMe)}
|
|
/>
|
|
}
|
|
label="Remember me"
|
|
/>
|
|
<Button
|
|
onClick={handleLoginFlow}
|
|
variant="contained"
|
|
color="primary"
|
|
sx={{ width: "100%" }}
|
|
>
|
|
Login
|
|
</Button>
|
|
<Button
|
|
variant="contained"
|
|
color="secondary"
|
|
sx={{ width: "100%" }}
|
|
onClick={() => navigate("/register")}
|
|
>
|
|
Create an account
|
|
</Button>
|
|
</Grid>
|
|
);
|
|
};
|