From 5ba6455b2aa6c75c336628bda59e70b46e3b1d6b Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
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' && <SignInForm />}
- {auth === 'signUp' && <SignUpForm />}
- <div className={classes.formTransfer}>
- <div>{footerInfo[auth][0]}</div>
- <span
- onClick={handleRedirect}
- className={classes.transferButton}
- role="presentation"
- >
- {footerInfo[auth][1]}
- </span>
- </div>
- </>
- );
-};
-
-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<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);
- };
-
- 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 (
- <>
- <div className={classes.formHeader}>Sign In</div>
- <form className={classes.root} noValidate autoComplete="off">
- <TextField
- inputRef={nameRef}
- error={error}
- label="Login"
- />
- <TextField
- inputRef={passwordRef}
- error={error}
- helperText={error && 'Invalid credentials'}
- label="Password"
- type="password"
- />
- <FormControlLabel
- control={<Switch color="primary" onClick={handleCheck} checked={remember} size="small" />}
- label="Remember me"
- />
- <Button variant="contained" onClick={handleSubmit}>submit</Button>
- </form>
- </>
- );
-};
-
-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<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))
- .then(() => navigate('profile'));
- } else setError(true);
- };
-
- return (
- <>
- <div className={classes.formHeader}>Sign Up</div>
- <form className={classes.root} noValidate autoComplete="off">
- <TextField
- 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>
- </>
- );
-};
-
-export default SignUpForm;
--
cgit v1.2.3