Merge pull request #44 from which-ecosystem/forms

Forms

3 files changed, 44 insertions, 20 deletions

diff --git a/src/pages/AuthPage/AuthPage.tsx b/src/pages/AuthPage/AuthPage.tsx
index dc90c01..d2c2eec 100644
--- a/src/pages/AuthPage/AuthPage.tsx
+++ b/src/pages/AuthPage/AuthPage.tsx
@@ -5,7 +5,7 @@ import SignUpForm from './SignUpForm';
 
 
 interface PropTypes {
-  logIn: (name: string, password: string) => Promise<boolean>;
+  logIn: (name: string, password: string, remember?: boolean) => Promise<boolean>;
 }
 
 const useStyles = makeStyles({
@@ -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/SignInForm.tsx b/src/pages/AuthPage/SignInForm.tsx
index c521abf..1dad153 100644
--- a/src/pages/AuthPage/SignInForm.tsx
+++ b/src/pages/AuthPage/SignInForm.tsx
@@ -1,10 +1,14 @@
 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 {
+  TextField,
+  Button,
+  FormControlLabel,
+  Switch
+} from '@material-ui/core';
 
 interface PropTypes {
-  logIn: (name: string, password: string) => Promise<boolean>;
+  logIn: (name: string, password: string, remember?: boolean) => Promise<boolean>;
 }
 
 const useStyles = makeStyles(theme => ({
@@ -26,15 +30,20 @@ const useStyles = makeStyles(theme => ({
 
 const SignInForm: React.FC<PropTypes> = ({ logIn }) => {
   const [error, setError] = useState<boolean>(false);
+  const [remember, setRemember] = useState<boolean>(true);
   const classes = useStyles();
   const nameRef = useRef<HTMLInputElement>();
   const passwordRef = useRef<HTMLInputElement>();
 
-  const onClick = async () => {
+  const handleCheck = () => {
+    setRemember(!remember);
+  };
+
+  const handleSubmit = async () => {
     const name = nameRef.current?.value;
     const password = passwordRef.current?.value;
     if (name && password) {
-      logIn(name, password).then(success => {
+      logIn(name, password, remember).then(success => {
         if (!success) setError(true);
       });
     }
@@ -56,7 +65,11 @@ const SignInForm: React.FC<PropTypes> = ({ logIn }) => {
           label="Password"
           type="password"
         />
-        <Button variant="contained" onClick={onClick}>submit</Button>
+        <FormControlLabel
+          control={<Switch color="primary" onClick={handleCheck} checked={remember} size="small" />}
+          label="Remember me"
+        />
+        <Button variant="contained" onClick={handleSubmit}>submit</Button>
       </form>
     </>
   );
diff --git a/src/pages/AuthPage/SignUpForm.tsx b/src/pages/AuthPage/SignUpForm.tsx
index 0e3d0c7..25b79ff 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,42 @@ 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(() => {
+      post('/users', { username, password, email }).then(() => {
         logIn(username, password);
       });
-    }
+    } 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>