aboutsummaryrefslogtreecommitdiff
path: root/Timeline/ClientApp/src/app/user/Login.tsx
diff options
context:
space:
mode:
authorcrupest <crupest@outlook.com>2020-09-01 02:32:06 +0800
committercrupest <crupest@outlook.com>2020-09-01 02:32:06 +0800
commita314b5350e269676e8c39eda4cc7842751b1a7fc (patch)
treeab3e8c96f18c8e9f6e8c613ace0e04329614304c /Timeline/ClientApp/src/app/user/Login.tsx
parent02a9bf9ecfe1659b3481a5386e7a06ee2f0e5fc5 (diff)
downloadtimeline-a314b5350e269676e8c39eda4cc7842751b1a7fc.tar.gz
timeline-a314b5350e269676e8c39eda4cc7842751b1a7fc.tar.bz2
timeline-a314b5350e269676e8c39eda4cc7842751b1a7fc.zip
...
Diffstat (limited to 'Timeline/ClientApp/src/app/user/Login.tsx')
-rw-r--r--Timeline/ClientApp/src/app/user/Login.tsx147
1 files changed, 0 insertions, 147 deletions
diff --git a/Timeline/ClientApp/src/app/user/Login.tsx b/Timeline/ClientApp/src/app/user/Login.tsx
deleted file mode 100644
index db6c43c4..00000000
--- a/Timeline/ClientApp/src/app/user/Login.tsx
+++ /dev/null
@@ -1,147 +0,0 @@
-import React, { Fragment, useState, useEffect } from "react";
-import { useHistory } from "react-router";
-import { useTranslation } from "react-i18next";
-import {
- Label,
- FormGroup,
- Input,
- Form,
- FormFeedback,
- Spinner,
- Button,
-} from "reactstrap";
-
-import AppBar from "../common/AppBar";
-import { useUser, userService } from "../data/user";
-
-const Login: React.FC = (_) => {
- const { t } = useTranslation();
- const history = useHistory();
- const [username, setUsername] = useState<string>("");
- const [usernameDirty, setUsernameDirty] = useState<boolean>(false);
- const [password, setPassword] = useState<string>("");
- const [passwordDirty, setPasswordDirty] = useState<boolean>(false);
- const [rememberMe, setRememberMe] = useState<boolean>(true);
- const [process, setProcess] = useState<boolean>(false);
- const [error, setError] = useState<string | null>(null);
-
- const user = useUser();
-
- useEffect(() => {
- if (user != null) {
- const id = setTimeout(() => history.push("/"), 3000);
- return () => {
- clearTimeout(id);
- };
- }
- }, [history, user]);
-
- if (user != null) {
- return (
- <>
- <AppBar />
- <p className="mt-appbar">{t("login.alreadyLogin")}</p>
- </>
- );
- }
-
- function onSubmit(event: React.SyntheticEvent): void {
- if (username === "" || password === "") {
- setUsernameDirty(true);
- setPasswordDirty(true);
- return;
- }
-
- setProcess(true);
- userService
- .login(
- {
- username: username,
- password: password,
- },
- rememberMe
- )
- .then(
- () => {
- if (history.length === 0) {
- history.push("/");
- } else {
- history.goBack();
- }
- },
- (e: Error) => {
- setProcess(false);
- setError(e.message);
- }
- );
- event.preventDefault();
- }
-
- return (
- <Fragment>
- <AppBar />
- <div className="container login-container mt-appbar">
- <h1>{t("welcome")}</h1>
- <Form>
- <FormGroup>
- <Label for="username">{t("user.username")}</Label>
- <Input
- id="username"
- disabled={process}
- onChange={(e) => {
- setUsername(e.target.value);
- setUsernameDirty(true);
- }}
- value={username}
- invalid={usernameDirty && username === ""}
- />
- {usernameDirty && username === "" && (
- <FormFeedback>{t("login.emptyUsername")}</FormFeedback>
- )}
- </FormGroup>
- <FormGroup>
- <Label for="password">{t("user.password")}</Label>
- <Input
- id="password"
- type="password"
- disabled={process}
- onChange={(e) => {
- setPassword(e.target.value);
- setPasswordDirty(true);
- }}
- value={password}
- invalid={passwordDirty && password === ""}
- />
- {passwordDirty && password === "" && (
- <FormFeedback>{t("login.emptyPassword")}</FormFeedback>
- )}
- </FormGroup>
- <FormGroup check>
- <Input
- id="remember-me"
- type="checkbox"
- checked={rememberMe}
- onChange={(e) => {
- const v = (e.target as HTMLInputElement).checked;
- setRememberMe(v);
- }}
- />
- <Label for="remember-me">{t("user.rememberMe")}</Label>
- </FormGroup>
- {error ? <p className="text-error">{t(error)}</p> : null}
- <div>
- {process ? (
- <Spinner />
- ) : (
- <Button color="primary" onClick={onSubmit}>
- {t("user.login")}
- </Button>
- )}
- </div>
- </Form>
- </div>
- </Fragment>
- );
-};
-
-export default Login;