You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
80 lines
2.4 KiB
80 lines
2.4 KiB
3 years ago
|
import { useReduxStore } from "@redux/hooks/base";
|
||
|
import logo from "@static/logo128.png";
|
||
|
import { useSystem } from "apis/hooks";
|
||
|
import React, { FunctionComponent, useState } from "react";
|
||
|
import { Button, Card, Form, Image, Spinner } from "react-bootstrap";
|
||
4 years ago
|
import { Redirect } from "react-router-dom";
|
||
3 years ago
|
import "./Authentication.scss";
|
||
4 years ago
|
|
||
|
interface Props {}
|
||
|
|
||
3 years ago
|
const Authentication: FunctionComponent<Props> = () => {
|
||
4 years ago
|
const [username, setUsername] = useState("");
|
||
|
const [password, setPassword] = useState("");
|
||
|
|
||
3 years ago
|
const { login, isWorking } = useSystem();
|
||
4 years ago
|
|
||
3 years ago
|
const authenticated = useReduxStore((s) => s.status !== "unauthenticated");
|
||
4 years ago
|
|
||
3 years ago
|
if (authenticated) {
|
||
4 years ago
|
return <Redirect to="/"></Redirect>;
|
||
|
}
|
||
|
|
||
|
return (
|
||
|
<div className="d-flex bg-light vh-100 justify-content-center align-items-center">
|
||
|
<Card className="auth-card shadow">
|
||
|
<Form
|
||
|
onSubmit={(e) => {
|
||
|
e.preventDefault();
|
||
3 years ago
|
login({ username, password });
|
||
4 years ago
|
}}
|
||
|
>
|
||
|
<Card.Body>
|
||
|
<Form.Group className="mb-5 d-flex justify-content-center">
|
||
|
<Image width="64" height="64" src={logo}></Image>
|
||
|
</Form.Group>
|
||
|
<Form.Group>
|
||
|
<Form.Control
|
||
3 years ago
|
disabled={isWorking}
|
||
4 years ago
|
name="username"
|
||
|
type="text"
|
||
|
placeholder="Username"
|
||
|
required
|
||
|
onChange={(e) => setUsername(e.currentTarget.value)}
|
||
|
></Form.Control>
|
||
|
</Form.Group>
|
||
|
<Form.Group>
|
||
|
<Form.Control
|
||
3 years ago
|
disabled={isWorking}
|
||
4 years ago
|
name="password"
|
||
|
type="password"
|
||
|
placeholder="Password"
|
||
|
required
|
||
|
onChange={(e) => setPassword(e.currentTarget.value)}
|
||
|
></Form.Control>
|
||
|
</Form.Group>
|
||
3 years ago
|
{/* <Collapse in={error.length !== 0}>
|
||
4 years ago
|
<div>
|
||
|
<Alert variant="danger" className="m-0">
|
||
|
{error}
|
||
|
</Alert>
|
||
|
</div>
|
||
3 years ago
|
</Collapse> */}
|
||
4 years ago
|
</Card.Body>
|
||
|
<Card.Footer>
|
||
3 years ago
|
<Button type="submit" disabled={isWorking} block>
|
||
|
{isWorking ? (
|
||
4 years ago
|
<Spinner size="sm" animation="border"></Spinner>
|
||
|
) : (
|
||
|
"LOGIN"
|
||
|
)}
|
||
|
</Button>
|
||
|
</Card.Footer>
|
||
|
</Form>
|
||
|
</Card>
|
||
|
</div>
|
||
|
);
|
||
|
};
|
||
|
|
||
3 years ago
|
export default Authentication;
|