diff options
author | crupest <crupest@outlook.com> | 2020-07-13 20:59:52 +0800 |
---|---|---|
committer | crupest <crupest@outlook.com> | 2020-07-13 20:59:52 +0800 |
commit | e69190abb09661caa19fa3905a0d8f3b7e72648b (patch) | |
tree | 8030e6a2539347ccb12f0a6bbd31a1f390c6a7b7 /Timeline/ClientApp/src/app/user/Login.tsx | |
parent | 0a7c884be668267003d7666b444f1022c99a7148 (diff) | |
download | timeline-e69190abb09661caa19fa3905a0d8f3b7e72648b.tar.gz timeline-e69190abb09661caa19fa3905a0d8f3b7e72648b.tar.bz2 timeline-e69190abb09661caa19fa3905a0d8f3b7e72648b.zip |
Move front end to a submodule.
Diffstat (limited to 'Timeline/ClientApp/src/app/user/Login.tsx')
-rw-r--r-- | Timeline/ClientApp/src/app/user/Login.tsx | 147 |
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 f8b3f0e7..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 { AxiosError } from 'axios'; - -import AppBar from '../common/AppBar'; - -import { userLogin, useUser } from '../data/user'; -import { - Label, - FormGroup, - Input, - Form, - FormFeedback, - Spinner, - Button, -} from 'reactstrap'; - -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); - userLogin( - { - username: username, - password: password, - }, - rememberMe - ).then( - (_) => { - if (history.length === 0) { - history.push('/'); - } else { - history.goBack(); - } - }, - (e: AxiosError | 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; |