From 8b57cdd86145d6e17c651b3646133641e65270e2 Mon Sep 17 00:00:00 2001 From: ilyayudovin Date: Mon, 15 Jun 2020 18:41:33 +0300 Subject: fix: resolve conflicts --- src/pages/AuthPage/AuthPage.tsx | 41 ++++++++++++++++++++++++++++++++++++++--- 1 file changed, 38 insertions(+), 3 deletions(-) (limited to 'src/pages/AuthPage/AuthPage.tsx') diff --git a/src/pages/AuthPage/AuthPage.tsx b/src/pages/AuthPage/AuthPage.tsx index 72733f0..9b8040c 100644 --- a/src/pages/AuthPage/AuthPage.tsx +++ b/src/pages/AuthPage/AuthPage.tsx @@ -1,12 +1,47 @@ -import React from 'react'; +import React, {useState} from 'react'; +import { Authorization} from '../../types'; import SignInForm from './SignInForm'; +import {makeStyles} from "@material-ui/core"; +import Registration from "./Registration"; interface PropTypes { logIn: (name: string, password: string) => Promise; } -const AuthPage: React.FC = ({ logIn }) => { - return ; +const useStyles = makeStyles(theme => ({ + authorize: { + display: 'flex', + width: 200, + justifyContent: 'space-around', + margin: '0 auto' + } +})); + +const AuthPage: React.FC = ({logIn}) => { + const classes = useStyles(); + const[authorization,setAuthorization] = useState({authorize: 'signUp'}); + + const handleSignUp = () => { + setAuthorization({authorize: 'signUp'}); + console.log(authorization.authorize); + }; + + const handleRegistration = () => { + setAuthorization({authorize: 'registration'}); + console.log(authorization.authorize); + }; + + return ( + <> +
+
SignUp
+
or
+
Registrate
+
+ { authorization.authorize === 'signUp' && } + { authorization.authorize === 'registration' && } + + ); }; export default AuthPage; -- cgit v1.2.3 From 181d40fab14c9170a7bbd9fe1782db727f5b19d6 Mon Sep 17 00:00:00 2001 From: ilyayudovin Date: Tue, 16 Jun 2020 15:14:40 +0300 Subject: add form transfer to signIn and signUp --- src/pages/AuthPage/AuthPage.tsx | 27 ++++++--------------------- 1 file changed, 6 insertions(+), 21 deletions(-) (limited to 'src/pages/AuthPage/AuthPage.tsx') diff --git a/src/pages/AuthPage/AuthPage.tsx b/src/pages/AuthPage/AuthPage.tsx index 9b8040c..c490078 100644 --- a/src/pages/AuthPage/AuthPage.tsx +++ b/src/pages/AuthPage/AuthPage.tsx @@ -1,8 +1,8 @@ import React, {useState} from 'react'; -import { Authorization} from '../../types'; +import {Authorization} from '../../types'; import SignInForm from './SignInForm'; import {makeStyles} from "@material-ui/core"; -import Registration from "./Registration"; +import SignUpForm from "./SignUpForm"; interface PropTypes { logIn: (name: string, password: string) => Promise; @@ -19,28 +19,13 @@ const useStyles = makeStyles(theme => ({ const AuthPage: React.FC = ({logIn}) => { const classes = useStyles(); - const[authorization,setAuthorization] = useState({authorize: 'signUp'}); - - const handleSignUp = () => { - setAuthorization({authorize: 'signUp'}); - console.log(authorization.authorize); - }; - - const handleRegistration = () => { - setAuthorization({authorize: 'registration'}); - console.log(authorization.authorize); - }; + const [authorization, setAuthorization] = useState({authorize: 'signIn'}); return ( <> -
-
SignUp
-
or
-
Registrate
-
- { authorization.authorize === 'signUp' && } - { authorization.authorize === 'registration' && } - + {authorization.authorize === 'signIn' && } + {authorization.authorize === 'signUp' && } + ); }; -- cgit v1.2.3 From ad91510c6d0a600cb19678e6f3dd64f66656e01a Mon Sep 17 00:00:00 2001 From: ilyayudovin Date: Tue, 16 Jun 2020 17:24:29 +0300 Subject: fix: clear eslint errors --- src/pages/AuthPage/AuthPage.tsx | 24 +++++++----------------- 1 file changed, 7 insertions(+), 17 deletions(-) (limited to 'src/pages/AuthPage/AuthPage.tsx') diff --git a/src/pages/AuthPage/AuthPage.tsx b/src/pages/AuthPage/AuthPage.tsx index c490078..fc7f404 100644 --- a/src/pages/AuthPage/AuthPage.tsx +++ b/src/pages/AuthPage/AuthPage.tsx @@ -1,29 +1,19 @@ -import React, {useState} from 'react'; -import {Authorization} from '../../types'; +import React, { useState } from 'react'; import SignInForm from './SignInForm'; -import {makeStyles} from "@material-ui/core"; -import SignUpForm from "./SignUpForm"; +import SignUpForm from './SignUpForm'; +import { Authorization } from '../../types'; + interface PropTypes { logIn: (name: string, password: string) => Promise; } -const useStyles = makeStyles(theme => ({ - authorize: { - display: 'flex', - width: 200, - justifyContent: 'space-around', - margin: '0 auto' - } -})); - -const AuthPage: React.FC = ({logIn}) => { - const classes = useStyles(); - const [authorization, setAuthorization] = useState({authorize: 'signIn'}); +const AuthPage: React.FC = ({ logIn }) => { + const [authorization, setAuthorization] = useState({ authorize: 'signIn' }); return ( <> - {authorization.authorize === 'signIn' && } + {authorization.authorize === 'signIn' && } {authorization.authorize === 'signUp' && } ); -- cgit v1.2.3 From 171af45318b3c27c232fc7d1aee99976dfb3046e Mon Sep 17 00:00:00 2001 From: ilyayudovin Date: Tue, 16 Jun 2020 18:52:58 +0300 Subject: replace interface with simple string for authorization --- src/pages/AuthPage/AuthPage.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) (limited to 'src/pages/AuthPage/AuthPage.tsx') diff --git a/src/pages/AuthPage/AuthPage.tsx b/src/pages/AuthPage/AuthPage.tsx index fc7f404..0072686 100644 --- a/src/pages/AuthPage/AuthPage.tsx +++ b/src/pages/AuthPage/AuthPage.tsx @@ -1,7 +1,6 @@ import React, { useState } from 'react'; import SignInForm from './SignInForm'; import SignUpForm from './SignUpForm'; -import { Authorization } from '../../types'; interface PropTypes { @@ -9,12 +8,12 @@ interface PropTypes { } const AuthPage: React.FC = ({ logIn }) => { - const [authorization, setAuthorization] = useState({ authorize: 'signIn' }); + const [auth, setAuth] = useState('signIn'); return ( <> - {authorization.authorize === 'signIn' && } - {authorization.authorize === 'signUp' && } + {auth === 'signIn' && } + {auth === 'signUp' && } ); }; -- cgit v1.2.3 From e68d60d60880f4b1e847f7b092210fadfe5d6ab5 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Tue, 16 Jun 2020 20:08:01 +0300 Subject: refactor: restructure components --- src/pages/AuthPage/AuthPage.tsx | 39 ++++++++++++++++++++++++++++++++++++--- 1 file changed, 36 insertions(+), 3 deletions(-) (limited to 'src/pages/AuthPage/AuthPage.tsx') diff --git a/src/pages/AuthPage/AuthPage.tsx b/src/pages/AuthPage/AuthPage.tsx index 0072686..dc90c01 100644 --- a/src/pages/AuthPage/AuthPage.tsx +++ b/src/pages/AuthPage/AuthPage.tsx @@ -1,4 +1,5 @@ import React, { useState } from 'react'; +import { makeStyles } from '@material-ui/core/styles'; import SignInForm from './SignInForm'; import SignUpForm from './SignUpForm'; @@ -7,13 +8,45 @@ interface PropTypes { logIn: (name: string, password: string) => Promise; } +const useStyles = makeStyles({ + formTransfer: { + display: 'flex', + justifyContent: 'center' + }, + transferButton: { + marginLeft: 10, + color: 'green', + cursor: 'pointer' + } +}); + const AuthPage: React.FC = ({ logIn }) => { - const [auth, setAuth] = useState('signIn'); + 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 in'], + signUp: ['Already have an account?', 'Sign up'] + }; return ( <> - {auth === 'signIn' && } - {auth === 'signUp' && } + {auth === 'signIn' && } + {auth === 'signUp' && } +
+
{footerInfo[auth][0]}
+ + {footerInfo[auth][1]} + +
); }; -- cgit v1.2.3