diff options
-rw-r--r-- | src/index.tsx | 8 | ||||
-rw-r--r-- | src/pages/AuthPage/AuthPage.tsx | 2 | ||||
-rw-r--r-- | src/pages/AuthPage/SignInForm.tsx | 25 |
3 files changed, 25 insertions, 10 deletions
diff --git a/src/index.tsx b/src/index.tsx index 50b19f7..2747bfa 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -55,7 +55,7 @@ const App: React.FC = () => { } }; - const logIn = (username: string, password: string): Promise<boolean> => { + const logIn = (username: string, password: string, remember?: boolean): Promise<boolean> => { return post('/authentication', { strategy: 'local', username, @@ -64,9 +64,11 @@ const App: React.FC = () => { const me = response.data.user; const token = response.data.accessToken; setUser(me); - localStorage.setItem('userId', me._id); - localStorage.setItem('token', token); navigate('profile', me._id); + if (remember) { + localStorage.setItem('userId', me._id); + localStorage.setItem('token', token); + } return true; }).catch(() => false); }; diff --git a/src/pages/AuthPage/AuthPage.tsx b/src/pages/AuthPage/AuthPage.tsx index 0938bce..d2c2eec 100644 --- a/src/pages/AuthPage/AuthPage.tsx +++ b/src/pages/AuthPage/AuthPage.tsx @@ -5,7 +5,7 @@ import SignUpForm from './SignUpForm'; interface PropTypes { - logIn: (name: string, password: string) => Promise<boolean>; + logIn: (name: string, password: string, remember?: boolean) => Promise<boolean>; } const useStyles = makeStyles({ diff --git a/src/pages/AuthPage/SignInForm.tsx b/src/pages/AuthPage/SignInForm.tsx index c521abf..1dad153 100644 --- a/src/pages/AuthPage/SignInForm.tsx +++ b/src/pages/AuthPage/SignInForm.tsx @@ -1,10 +1,14 @@ import React, { useState, useRef } from 'react'; import { makeStyles } from '@material-ui/core/styles'; -import TextField from '@material-ui/core/TextField'; -import Button from '@material-ui/core/Button'; +import { + TextField, + Button, + FormControlLabel, + Switch +} from '@material-ui/core'; interface PropTypes { - logIn: (name: string, password: string) => Promise<boolean>; + logIn: (name: string, password: string, remember?: boolean) => Promise<boolean>; } const useStyles = makeStyles(theme => ({ @@ -26,15 +30,20 @@ const useStyles = makeStyles(theme => ({ const SignInForm: React.FC<PropTypes> = ({ logIn }) => { const [error, setError] = useState<boolean>(false); + const [remember, setRemember] = useState<boolean>(true); const classes = useStyles(); const nameRef = useRef<HTMLInputElement>(); const passwordRef = useRef<HTMLInputElement>(); - const onClick = async () => { + const handleCheck = () => { + setRemember(!remember); + }; + + const handleSubmit = async () => { const name = nameRef.current?.value; const password = passwordRef.current?.value; if (name && password) { - logIn(name, password).then(success => { + logIn(name, password, remember).then(success => { if (!success) setError(true); }); } @@ -56,7 +65,11 @@ const SignInForm: React.FC<PropTypes> = ({ logIn }) => { label="Password" type="password" /> - <Button variant="contained" onClick={onClick}>submit</Button> + <FormControlLabel + control={<Switch color="primary" onClick={handleCheck} checked={remember} size="small" />} + label="Remember me" + /> + <Button variant="contained" onClick={handleSubmit}>submit</Button> </form> </> ); |