From cc91abb0ca403b7d7180b0e24fe126bd35ce20ab Mon Sep 17 00:00:00 2001 From: eug-vs Date: Thu, 25 Jun 2020 21:46:06 +0300 Subject: feat: add rememberMe switch --- src/index.tsx | 8 +++++--- src/pages/AuthPage/AuthPage.tsx | 2 +- 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 => { + const logIn = (username: string, password: string, remember?: boolean): Promise => { 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; + logIn: (name: string, password: string, remember?: boolean) => Promise; } 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; + logIn: (name: string, password: string, remember?: boolean) => Promise; } const useStyles = makeStyles(theme => ({ @@ -26,15 +30,20 @@ const useStyles = makeStyles(theme => ({ const SignInForm: React.FC = ({ logIn }) => { const [error, setError] = useState(false); + const [remember, setRemember] = useState(true); const classes = useStyles(); const nameRef = useRef(); const passwordRef = useRef(); - 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 = ({ logIn }) => { label="Password" type="password" /> - + } + label="Remember me" + /> + ); -- cgit v1.2.3