diff options
author | crupest <crupest@outlook.com> | 2023-07-29 22:58:37 +0800 |
---|---|---|
committer | crupest <crupest@outlook.com> | 2023-07-29 22:58:37 +0800 |
commit | 307ea9fb838e9a26e8df5218407bb3627391f34f (patch) | |
tree | d9ff78cbdaa53190f5e2a03ac83e7db9311f2efb /FrontEnd/src/views | |
parent | 77b03b17a59655c1eeb00e0a818c81f8ea5e326e (diff) | |
download | timeline-307ea9fb838e9a26e8df5218407bb3627391f34f.tar.gz timeline-307ea9fb838e9a26e8df5218407bb3627391f34f.tar.bz2 timeline-307ea9fb838e9a26e8df5218407bb3627391f34f.zip |
...
Diffstat (limited to 'FrontEnd/src/views')
-rw-r--r-- | FrontEnd/src/views/login/index.css | 8 | ||||
-rw-r--r-- | FrontEnd/src/views/login/index.tsx | 159 |
2 files changed, 0 insertions, 167 deletions
diff --git a/FrontEnd/src/views/login/index.css b/FrontEnd/src/views/login/index.css deleted file mode 100644 index aefe57e8..00000000 --- a/FrontEnd/src/views/login/index.css +++ /dev/null @@ -1,8 +0,0 @@ -.login-container {
- max-width: 25em;
-}
-
-.login-container input[type="text"],
-.login-container input[type="password"] {
- width: 100%;
-}
diff --git a/FrontEnd/src/views/login/index.tsx b/FrontEnd/src/views/login/index.tsx deleted file mode 100644 index cc1d9865..00000000 --- a/FrontEnd/src/views/login/index.tsx +++ /dev/null @@ -1,159 +0,0 @@ -import * as React from "react"; -import { Link, useNavigate } from "react-router-dom"; -import { useTranslation, Trans } from "react-i18next"; - -import { useUser, userService } from "@/services/user"; - -import AppBar from "../common/AppBar"; -import LoadingButton from "../common/button/LoadingButton"; - -import "./index.css"; - -const LoginPage: React.FC = () => { - const { t } = useTranslation(); - - const navigate = useNavigate(); - - const [username, setUsername] = React.useState<string>(""); - const [usernameDirty, setUsernameDirty] = React.useState<boolean>(false); - const [password, setPassword] = React.useState<string>(""); - const [passwordDirty, setPasswordDirty] = React.useState<boolean>(false); - const [rememberMe, setRememberMe] = React.useState<boolean>(true); - const [process, setProcess] = React.useState<boolean>(false); - const [error, setError] = React.useState<string | null>(null); - - const user = useUser(); - - React.useEffect(() => { - if (user != null) { - const id = setTimeout(() => navigate("/"), 3000); - return () => { - clearTimeout(id); - }; - } - }, [navigate, user]); - - if (user != null) { - return ( - <> - <AppBar /> - <p>{t("login.alreadyLogin")}</p> - </> - ); - } - - const submit = (): void => { - if (username === "" || password === "") { - setUsernameDirty(true); - setPasswordDirty(true); - return; - } - - setProcess(true); - userService - .login( - { - username: username, - password: password, - }, - rememberMe - ) - .then( - () => { - if (history.length === 0) { - navigate("/"); - } else { - navigate(-1); - } - }, - (e: Error) => { - setProcess(false); - setError(e.message); - } - ); - }; - - const onEnterPressInPassword: React.KeyboardEventHandler = (e) => { - if (e.key === "Enter") { - submit(); - } - }; - - return ( - <div className="login-container container-fluid mt-2"> - <h1 className="cru-text-center cru-color-primary">{t("welcome")}</h1> - <div className="cru-operation-dialog-group"> - <label className="cru-operation-dialog-label" htmlFor="username"> - {t("user.username")} - </label> - <input - id="username" - type="text" - disabled={process} - onChange={(e) => { - setUsername(e.target.value); - setUsernameDirty(true); - }} - value={username} - /> - {usernameDirty && username === "" && ( - <div className="cru-operation-dialog-error-text"> - {t("login.emptyUsername")} - </div> - )} - </div> - <div className="cru-operation-dialog-group"> - <label className="cru-operation-dialog-label" htmlFor="password"> - {t("user.password")} - </label> - <input - id="password" - type="password" - disabled={process} - onChange={(e) => { - setPassword(e.target.value); - setPasswordDirty(true); - }} - value={password} - onKeyDown={onEnterPressInPassword} - /> - {passwordDirty && password === "" && ( - <div className="cru-operation-dialog-error-text"> - {t("login.emptyPassword")} - </div> - )} - </div> - <div className="cru-operation-dialog-group"> - <input - id="remember-me" - type="checkbox" - checked={rememberMe} - onChange={(e) => { - setRememberMe(e.currentTarget.checked); - }} - /> - <label className="cru-operation-dialog-inline-label"> - {t("user.rememberMe")} - </label> - </div> - {error ? <p className="cru-color-danger">{t(error)}</p> : null} - <div className="cru-text-end"> - <LoadingButton - loading={process} - onClick={(e) => { - submit(); - e.preventDefault(); - }} - disabled={username === "" || password === "" ? true : undefined} - > - {t("user.login")} - </LoadingButton> - </div> - <Trans i18nKey="login.noAccount"> - 0<Link to="/register">1</Link>2 - </Trans> - </div> - ); -}; - -export default LoginPage; |