aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/components/PollCard/PollCard.tsx26
-rw-r--r--src/index.tsx10
-rw-r--r--src/pages/AuthPage/AuthPage.tsx6
-rw-r--r--src/pages/AuthPage/SignInForm.tsx25
-rw-r--r--src/pages/AuthPage/SignUpForm.tsx33
5 files changed, 62 insertions, 38 deletions
diff --git a/src/components/PollCard/PollCard.tsx b/src/components/PollCard/PollCard.tsx
index 40f5fd7..f82091c 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<PropTypes> = ({ 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<PropTypes> = ({ initialPoll, navigate }) => {
className={classes.images}
image={left.url}
/>
- <PercentageBar value={percentage.left} which="left" like={userChoice === 'left'} />
+ <PercentageBar value={leftPercentage} which="left" like={userChoice === 'left'} />
</CardActionArea>
<CardActionArea onDoubleClick={handleRight}>
<CardMedia
className={classes.images}
image={right.url}
/>
- <PercentageBar value={percentage.right} which="right" like={userChoice === 'right'} />
+ <PercentageBar value={rightPercentage} which="right" like={userChoice === 'right'} />
</CardActionArea>
</div>
- <div className={classes.rateLine}>
+ <div className={`${classes.rateLine} ${dominant === 'right' ? classes.highlight : ''}`}>
<div
- className={classes.fillRateLine}
- style={{
- width: `${percentage[dominant]}%`,
- float: dominant
- }}
+ className={`${classes.fillRateLine} ${dominant === 'left' ? classes.highlight : ''}`}
+ style={{ width: `${leftPercentage}%` }}
/>
</div>
</Card>
diff --git a/src/index.tsx b/src/index.tsx
index 50b19f7..a321cf4 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 = true): Promise<boolean> => {
return post('/authentication', {
strategy: 'local',
username,
@@ -64,21 +64,23 @@ const App: React.FC = () => {
const me = response.data.user;
const token = response.data.accessToken;
setUser(me);
+ navigate('profile', me._id);
localStorage.setItem('userId', me._id);
localStorage.setItem('token', token);
- navigate('profile', me._id);
+ 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 => {
diff --git a/src/pages/AuthPage/AuthPage.tsx b/src/pages/AuthPage/AuthPage.tsx
index dc90c01..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({
@@ -29,8 +29,8 @@ const AuthPage: React.FC<PropTypes> = ({ 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/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>
</>
);
diff --git a/src/pages/AuthPage/SignUpForm.tsx b/src/pages/AuthPage/SignUpForm.tsx
index 0e3d0c7..25b79ff 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,42 @@ const useStyles = makeStyles(theme => ({
}));
const SignUpForm: React.FC<PropTypes> = ({ logIn }) => {
+ const [error, setError] = useState<boolean>(false);
const classes = useStyles();
- const inputRef = useRef<HTMLInputElement>();
- const inputRefPassword = useRef<HTMLInputElement>();
+ const usernameRef = useRef<HTMLInputElement>();
+ const emailRef = useRef<HTMLInputElement>();
+ const passwordRef = useRef<HTMLInputElement>();
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(() => {
+ post('/users', { username, password, email }).then(() => {
logIn(username, password);
});
- }
+ } else setError(true);
};
return (
<>
<div className={classes.formHeader}>Sign Up</div>
<form className={classes.root} noValidate autoComplete="off">
- <TextField inputRef={inputRef} id="standard-basic" label="Name" />
- <TextField id="standard-basic" label="Email" />
<TextField
- inputRef={inputRefPassword}
- id="standard-password-input"
+ inputRef={usernameRef}
+ label="Username"
+ error={error}
+ helperText={error && 'This field is required!'}
+ required
+ />
+ <TextField inputRef={emailRef} label="Email" />
+ <TextField
+ inputRef={passwordRef}
label="Password"
type="password"
+ required
+ error={error}
+ helperText={error && 'This field is required!'}
/>
<Button variant="contained" onClick={onClick}>submit</Button>
</form>
generated by cgit v1.2.3 (git 2.25.1) at 2025-10-31 11:18:24 +0000