From 5ba6455b2aa6c75c336628bda59e70b46e3b1d6b Mon Sep 17 00:00:00 2001 From: eug-vs Date: Fri, 7 Aug 2020 22:42:50 +0300 Subject: refactor: separate Auth pages --- src/pages/AuthPage/AuthPage.tsx | 50 ------------------------ src/pages/AuthPage/SignInForm.tsx | 80 --------------------------------------- src/pages/AuthPage/SignUpForm.tsx | 73 ----------------------------------- 3 files changed, 203 deletions(-) delete mode 100644 src/pages/AuthPage/AuthPage.tsx delete mode 100644 src/pages/AuthPage/SignInForm.tsx delete mode 100644 src/pages/AuthPage/SignUpForm.tsx (limited to 'src/pages/AuthPage') diff --git a/src/pages/AuthPage/AuthPage.tsx b/src/pages/AuthPage/AuthPage.tsx deleted file mode 100644 index ad93463..0000000 --- a/src/pages/AuthPage/AuthPage.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import React, { useState } from 'react'; -import { makeStyles } from '@material-ui/core/styles'; -import SignInForm from './SignInForm'; -import SignUpForm from './SignUpForm'; - -const useStyles = makeStyles({ - formTransfer: { - display: 'flex', - justifyContent: 'center' - }, - transferButton: { - marginLeft: 10, - color: 'green', - cursor: 'pointer' - } -}); - -const AuthPage: React.FC = () => { - const [auth, setAuth] = useState<'signIn' | 'signUp'>('signIn'); - const classes = useStyles(); - - const handleRedirect = () => { - setAuth(auth === 'signIn' ? 'signUp' : 'signIn'); - }; - - const footerInfo = { - signIn: ['Don\'t have an account?', 'Sign up'], - signUp: ['Already have an account?', 'Sign in'] - }; - - return ( - <> - {auth === 'signIn' && } - {auth === 'signUp' && } -
-
{footerInfo[auth][0]}
- - {footerInfo[auth][1]} - -
- - ); -}; - -export default AuthPage; - diff --git a/src/pages/AuthPage/SignInForm.tsx b/src/pages/AuthPage/SignInForm.tsx deleted file mode 100644 index e68483b..0000000 --- a/src/pages/AuthPage/SignInForm.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import React, { useState, useRef } from 'react'; -import { makeStyles } from '@material-ui/core/styles'; -import { - TextField, - Button, - FormControlLabel, - Switch -} from '@material-ui/core'; -import { useAuth } from '../../hooks/useAuth'; -import { useNavigate } from '../../hooks/useNavigate'; - -const useStyles = makeStyles(theme => ({ - root: { - '& > *': { - margin: theme.spacing(1), - width: theme.spacing(35) - }, - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - textAlign: 'center' - }, - formHeader: { - textAlign: 'center', - fontSize: 25 - } -})); - -const SignInForm: React.FC = () => { - const [error, setError] = useState(false); - const [remember, setRemember] = useState(true); - const classes = useStyles(); - const nameRef = useRef(); - const passwordRef = useRef(); - const { login } = useAuth(); - const { navigate } = useNavigate(); - - const handleCheck = () => { - setRemember(!remember); - }; - - const handleSubmit = async () => { - const name = nameRef.current?.value; - const password = passwordRef.current?.value; - if (name && password) { - login(name, password, remember).then(success => { - if (success) navigate('profile'); - else setError(true); - }); - } - }; - - return ( - <> -
Sign In
-
- - - } - label="Remember me" - /> - - - - ); -}; - -export default SignInForm; - diff --git a/src/pages/AuthPage/SignUpForm.tsx b/src/pages/AuthPage/SignUpForm.tsx deleted file mode 100644 index 1dacd45..0000000 --- a/src/pages/AuthPage/SignUpForm.tsx +++ /dev/null @@ -1,73 +0,0 @@ -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 { post } from '../../requests'; -import { useAuth } from '../../hooks/useAuth'; -import { useNavigate } from '../../hooks/useNavigate'; - - -const useStyles = makeStyles(theme => ({ - root: { - '& > *': { - margin: theme.spacing(1), - width: theme.spacing(35) - }, - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - textAlign: 'center' - }, - formHeader: { - textAlign: 'center', - fontSize: 25 - } -})); - -const SignUpForm: React.FC = () => { - const [error, setError] = useState(false); - const classes = useStyles(); - const usernameRef = useRef(); - const emailRef = useRef(); - const passwordRef = useRef(); - 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)) - .then(() => navigate('profile')); - } else setError(true); - }; - - return ( - <> -
Sign Up
-
- - - - - - - ); -}; - -export default SignUpForm; -- cgit v1.2.3