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 +++++++++++++++++++++++-- src/pages/AuthPage/Registration.tsx | 60 +++++++++++++++++++++++++++++++++++++ src/pages/AuthPage/SignInForm.tsx | 1 - 3 files changed, 98 insertions(+), 4 deletions(-) create mode 100644 src/pages/AuthPage/Registration.tsx (limited to 'src/pages') 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; diff --git a/src/pages/AuthPage/Registration.tsx b/src/pages/AuthPage/Registration.tsx new file mode 100644 index 0000000..1884a8a --- /dev/null +++ b/src/pages/AuthPage/Registration.tsx @@ -0,0 +1,60 @@ +import React, {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 {User} from '../../types'; +import {get, post} from '../../requests'; + +interface PropTypes { + logIn: (name: string, password: string) => Promise; +} + +const useStyles = makeStyles(theme => ({ + root: { + '& > *': { + margin: theme.spacing(1), + width: '25ch' + }, + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + textAlign: 'center' + } +})); + +const Registration: React.FC = ({logIn}) => { + const classes = useStyles(); + const inputRef = useRef(); + const inputRefPassword = useRef(); + + + const onClick = () => { + const name = inputRef.current?.value; + const password = inputRefPassword.current?.value; + const newUser = { + name: name, + password: password, + avatarUrl: '', + }; + if (name && password) { + post(`/users`,newUser).then(response => { + logIn(name, password); + }); + } + }; + + return ( +
+ + + + + + ); +}; + +export default Registration; diff --git a/src/pages/AuthPage/SignInForm.tsx b/src/pages/AuthPage/SignInForm.tsx index 1d4ce0e..e2ae8b7 100644 --- a/src/pages/AuthPage/SignInForm.tsx +++ b/src/pages/AuthPage/SignInForm.tsx @@ -38,7 +38,6 @@ const SignInForm: React.FC = ({ logIn }) => { return (
-

Sign In