feat: validate form

2 files changed, 26 insertions, 14 deletions

diff --git a/src/pages/AuthPage/AuthPage.tsx b/src/pages/AuthPage/AuthPage.tsx
index dc90c01..0938bce 100644
--- a/src/pages/AuthPage/AuthPage.tsx
+++ b/src/pages/AuthPage/AuthPage.tsx
@@ -29,8 +29,8 @@ const AuthPage: React.FC<PropTypes> = ({ logIn }) => {
   };
 
   const footerInfo = {
-    signIn: ['Don\'t have an account?', 'Sign in'],
-    signUp: ['Already have an account?', 'Sign up']
+    signIn: ['Don\'t have an account?', 'Sign up'],
+    signUp: ['Already have an account?', 'Sign in']
   };
 
   return (
diff --git a/src/pages/AuthPage/SignUpForm.tsx b/src/pages/AuthPage/SignUpForm.tsx
index 0e3d0c7..4a84830 100644
--- a/src/pages/AuthPage/SignUpForm.tsx
+++ b/src/pages/AuthPage/SignUpForm.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+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';
@@ -26,31 +26,43 @@ const useStyles = makeStyles(theme => ({
 }));
 
 const SignUpForm: React.FC<PropTypes> = ({ logIn }) => {
+  const [error, setError] = useState<boolean>(false);
   const classes = useStyles();
-  const inputRef = useRef<HTMLInputElement>();
-  const inputRefPassword = useRef<HTMLInputElement>();
+  const usernameRef = useRef<HTMLInputElement>();
+  const emailRef = useRef<HTMLInputElement>();
+  const passwordRef = useRef<HTMLInputElement>();
 
   const onClick = () => {
-    const username = inputRef.current?.value;
-    const password = inputRefPassword.current?.value;
+    const username = usernameRef.current?.value;
+    const password = passwordRef.current?.value;
+    const email = emailRef.current?.value;
     if (username && password) {
-      post('/users', { username, password }).then(() => {
-        logIn(username, password);
+      post('/users', { username, password, email }).then(() => {
+        logIn(username, password).then(success => {
+        });
       });
-    }
+    } else setError(true);
   };
 
   return (
     <>
       <div className={classes.formHeader}>Sign Up</div>
       <form className={classes.root} noValidate autoComplete="off">
-        <TextField inputRef={inputRef} id="standard-basic" label="Name" />
-        <TextField id="standard-basic" label="Email" />
         <TextField
-          inputRef={inputRefPassword}
-          id="standard-password-input"
+          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>