From eb9716d39b6932b2990ab33c59214e1f276a3c68 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Thu, 25 Jun 2020 15:29:40 +0300 Subject: feat: transition rateline nicely --- src/components/PollCard/PollCard.tsx | 26 ++++++++++++-------------- 1 file changed, 12 insertions(+), 14 deletions(-) (limited to 'src') diff --git a/src/components/PollCard/PollCard.tsx b/src/components/PollCard/PollCard.tsx index 40f5fd7..65b3da1 100644 --- a/src/components/PollCard/PollCard.tsx +++ b/src/components/PollCard/PollCard.tsx @@ -37,11 +37,15 @@ const useStyles = makeStyles(theme => ({ position: 'relative', width: '100%', height: theme.spacing(2), - backgroundColor: theme.palette.primary.light + backgroundColor: theme.palette.primary.light, + transitionDuration: '0.5s' + }, + highlight: { + backgroundColor: theme.palette.primary.main + ' !important' }, fillRateLine: { height: theme.spacing(2), - backgroundColor: theme.palette.primary.main, + backgroundColor: theme.palette.primary.light, transitionDuration: '0.5s' } })); @@ -68,11 +72,8 @@ const PollCard: React.FC = ({ initialPoll, navigate }) => { const handleRight = () => vote('right'); const leftPercentage = Math.round(100 * (left.votes / (left.votes + right.votes))); + const rightPercentage = 100 - leftPercentage - const percentage = { - left: leftPercentage, - right: 100 - leftPercentage - }; const dominant: Which = left.votes >= right.votes ? 'left' : 'right'; return ( @@ -95,23 +96,20 @@ const PollCard: React.FC = ({ initialPoll, navigate }) => { className={classes.images} image={left.url} /> - + - + -
+
-- cgit v1.2.3 From 802b7417c8b16cc8922c0a1526e9b769ca2cc28f Mon Sep 17 00:00:00 2001 From: eug-vs Date: Thu, 25 Jun 2020 15:49:06 +0300 Subject: feat: validate form --- src/pages/AuthPage/AuthPage.tsx | 4 ++-- src/pages/AuthPage/SignUpForm.tsx | 36 ++++++++++++++++++++++++------------ 2 files changed, 26 insertions(+), 14 deletions(-) (limited to 'src') diff --git a/src/pages/AuthPage/AuthPage.tsx b/src/pages/AuthPage/AuthPage.tsx index dc90c01..0938bce 100644 --- a/src/pages/AuthPage/AuthPage.tsx +++ b/src/pages/AuthPage/AuthPage.tsx @@ -29,8 +29,8 @@ const AuthPage: React.FC = ({ logIn }) => { }; const footerInfo = { - signIn: ['Don\'t have an account?', 'Sign in'], - signUp: ['Already have an account?', 'Sign up'] + signIn: ['Don\'t have an account?', 'Sign up'], + signUp: ['Already have an account?', 'Sign in'] }; return ( diff --git a/src/pages/AuthPage/SignUpForm.tsx b/src/pages/AuthPage/SignUpForm.tsx index 0e3d0c7..4a84830 100644 --- a/src/pages/AuthPage/SignUpForm.tsx +++ b/src/pages/AuthPage/SignUpForm.tsx @@ -1,4 +1,4 @@ -import React, { useRef } from 'react'; +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'; @@ -26,31 +26,43 @@ const useStyles = makeStyles(theme => ({ })); const SignUpForm: React.FC = ({ logIn }) => { + const [error, setError] = useState(false); const classes = useStyles(); - const inputRef = useRef(); - const inputRefPassword = useRef(); + const usernameRef = useRef(); + const emailRef = useRef(); + const passwordRef = useRef(); const onClick = () => { - const username = inputRef.current?.value; - const password = inputRefPassword.current?.value; + const username = usernameRef.current?.value; + const password = passwordRef.current?.value; + const email = emailRef.current?.value; if (username && password) { - post('/users', { username, password }).then(() => { - logIn(username, password); + post('/users', { username, password, email }).then(() => { + logIn(username, password).then(success => { + }); }); - } + } else setError(true); }; return ( <>
Sign Up
- - + + -- cgit v1.2.3 From f24ea161fd2aef6ba75418c965d444ccbfd53fac Mon Sep 17 00:00:00 2001 From: eug-vs Date: Thu, 25 Jun 2020 15:51:51 +0300 Subject: style: fix linting erros --- src/components/PollCard/PollCard.tsx | 4 ++-- src/pages/AuthPage/SignUpForm.tsx | 3 +-- 2 files changed, 3 insertions(+), 4 deletions(-) (limited to 'src') diff --git a/src/components/PollCard/PollCard.tsx b/src/components/PollCard/PollCard.tsx index 65b3da1..f82091c 100644 --- a/src/components/PollCard/PollCard.tsx +++ b/src/components/PollCard/PollCard.tsx @@ -41,7 +41,7 @@ const useStyles = makeStyles(theme => ({ transitionDuration: '0.5s' }, highlight: { - backgroundColor: theme.palette.primary.main + ' !important' + backgroundColor: `${theme.palette.primary.main} !important` }, fillRateLine: { height: theme.spacing(2), @@ -72,7 +72,7 @@ const PollCard: React.FC = ({ initialPoll, navigate }) => { const handleRight = () => vote('right'); const leftPercentage = Math.round(100 * (left.votes / (left.votes + right.votes))); - const rightPercentage = 100 - leftPercentage + const rightPercentage = 100 - leftPercentage; const dominant: Which = left.votes >= right.votes ? 'left' : 'right'; diff --git a/src/pages/AuthPage/SignUpForm.tsx b/src/pages/AuthPage/SignUpForm.tsx index 4a84830..25b79ff 100644 --- a/src/pages/AuthPage/SignUpForm.tsx +++ b/src/pages/AuthPage/SignUpForm.tsx @@ -38,8 +38,7 @@ const SignUpForm: React.FC = ({ logIn }) => { const email = emailRef.current?.value; if (username && password) { post('/users', { username, password, email }).then(() => { - logIn(username, password).then(success => { - }); + logIn(username, password); }); } else setError(true); }; -- cgit v1.2.3 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(-) (limited to 'src') 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 From 2c6946b35aa2a756230bb96e69302c08fd8068ee Mon Sep 17 00:00:00 2001 From: eug-vs Date: Thu, 25 Jun 2020 21:56:33 +0300 Subject: fix: clear storage correctly --- src/index.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) (limited to 'src') diff --git a/src/index.tsx b/src/index.tsx index 2747bfa..a321cf4 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -55,7 +55,7 @@ const App: React.FC = () => { } }; - const logIn = (username: string, password: string, remember?: boolean): Promise => { + const logIn = (username: string, password: string, remember = true): Promise => { return post('/authentication', { strategy: 'local', username, @@ -65,22 +65,22 @@ const App: React.FC = () => { const token = response.data.accessToken; setUser(me); navigate('profile', me._id); - if (remember) { - localStorage.setItem('userId', me._id); - localStorage.setItem('token', token); - } + localStorage.setItem('userId', me._id); + localStorage.setItem('token', token); + if (!remember) localStorage.setItem('shouldClear', 'true'); return true; }).catch(() => false); }; - const logOut = () => { + const logOut = (redirect = true) => { setUser(undefined); localStorage.removeItem('userId'); localStorage.removeItem('token'); - navigate('auth'); + if (redirect) navigate('auth'); }; useEffect(() => { + if (localStorage.getItem('shouldClear')) logOut(false); const userId = localStorage.getItem('userId'); if (userId) { get(`/users/${userId}`).then(response => { -- cgit v1.2.3