diff options
Diffstat (limited to 'src/pages/AuthPage')
-rw-r--r-- | src/pages/AuthPage/AuthPage.tsx | 11 | ||||
-rw-r--r-- | src/pages/AuthPage/SignInForm.tsx | 15 | ||||
-rw-r--r-- | src/pages/AuthPage/SignUpForm.tsx | 15 |
3 files changed, 19 insertions, 22 deletions
diff --git a/src/pages/AuthPage/AuthPage.tsx b/src/pages/AuthPage/AuthPage.tsx index d2c2eec..ad93463 100644 --- a/src/pages/AuthPage/AuthPage.tsx +++ b/src/pages/AuthPage/AuthPage.tsx @@ -3,11 +3,6 @@ import { makeStyles } from '@material-ui/core/styles'; import SignInForm from './SignInForm'; import SignUpForm from './SignUpForm'; - -interface PropTypes { - logIn: (name: string, password: string, remember?: boolean) => Promise<boolean>; -} - const useStyles = makeStyles({ formTransfer: { display: 'flex', @@ -20,7 +15,7 @@ const useStyles = makeStyles({ } }); -const AuthPage: React.FC<PropTypes> = ({ logIn }) => { +const AuthPage: React.FC = () => { const [auth, setAuth] = useState<'signIn' | 'signUp'>('signIn'); const classes = useStyles(); @@ -35,8 +30,8 @@ const AuthPage: React.FC<PropTypes> = ({ logIn }) => { return ( <> - {auth === 'signIn' && <SignInForm logIn={logIn} />} - {auth === 'signUp' && <SignUpForm logIn={logIn} />} + {auth === 'signIn' && <SignInForm />} + {auth === 'signUp' && <SignUpForm />} <div className={classes.formTransfer}> <div>{footerInfo[auth][0]}</div> <span diff --git a/src/pages/AuthPage/SignInForm.tsx b/src/pages/AuthPage/SignInForm.tsx index 1dad153..e68483b 100644 --- a/src/pages/AuthPage/SignInForm.tsx +++ b/src/pages/AuthPage/SignInForm.tsx @@ -6,10 +6,8 @@ import { FormControlLabel, Switch } from '@material-ui/core'; - -interface PropTypes { - logIn: (name: string, password: string, remember?: boolean) => Promise<boolean>; -} +import { useAuth } from '../../hooks/useAuth'; +import { useNavigate } from '../../hooks/useNavigate'; const useStyles = makeStyles(theme => ({ root: { @@ -28,12 +26,14 @@ const useStyles = makeStyles(theme => ({ } })); -const SignInForm: React.FC<PropTypes> = ({ logIn }) => { +const SignInForm: React.FC = () => { const [error, setError] = useState<boolean>(false); const [remember, setRemember] = useState<boolean>(true); const classes = useStyles(); const nameRef = useRef<HTMLInputElement>(); const passwordRef = useRef<HTMLInputElement>(); + const { login } = useAuth(); + const { navigate } = useNavigate(); const handleCheck = () => { setRemember(!remember); @@ -43,8 +43,9 @@ const SignInForm: React.FC<PropTypes> = ({ logIn }) => { const name = nameRef.current?.value; const password = passwordRef.current?.value; if (name && password) { - logIn(name, password, remember).then(success => { - if (!success) setError(true); + login(name, password, remember).then(success => { + if (success) navigate('profile'); + else setError(true); }); } }; diff --git a/src/pages/AuthPage/SignUpForm.tsx b/src/pages/AuthPage/SignUpForm.tsx index 25b79ff..1dacd45 100644 --- a/src/pages/AuthPage/SignUpForm.tsx +++ b/src/pages/AuthPage/SignUpForm.tsx @@ -3,10 +3,9 @@ import { makeStyles } from '@material-ui/core/styles'; import TextField from '@material-ui/core/TextField'; import Button from '@material-ui/core/Button'; import { post } from '../../requests'; +import { useAuth } from '../../hooks/useAuth'; +import { useNavigate } from '../../hooks/useNavigate'; -interface PropTypes { - logIn: (name: string, password: string) => Promise<boolean>; -} const useStyles = makeStyles(theme => ({ root: { @@ -25,21 +24,23 @@ const useStyles = makeStyles(theme => ({ } })); -const SignUpForm: React.FC<PropTypes> = ({ logIn }) => { +const SignUpForm: React.FC = () => { const [error, setError] = useState<boolean>(false); const classes = useStyles(); const usernameRef = useRef<HTMLInputElement>(); const emailRef = useRef<HTMLInputElement>(); const passwordRef = useRef<HTMLInputElement>(); + const { login } = useAuth(); + const { navigate } = useNavigate(); const onClick = () => { const username = usernameRef.current?.value; const password = passwordRef.current?.value; const email = emailRef.current?.value; if (username && password) { - post('/users', { username, password, email }).then(() => { - logIn(username, password); - }); + post('/users', { username, password, email }) + .then(() => login(username, password)) + .then(() => navigate('profile')); } else setError(true); }; |