From 802b7417c8b16cc8922c0a1526e9b769ca2cc28f Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Thu, 25 Jun 2020 15:49:06 +0300
Subject: feat: validate form

---
 src/pages/AuthPage/AuthPage.tsx   |  4 ++--
 src/pages/AuthPage/SignUpForm.tsx | 36 ++++++++++++++++++++++++------------
 2 files changed, 26 insertions(+), 14 deletions(-)

(limited to 'src/pages/AuthPage')

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>
-- 
cgit v1.2.3


From f24ea161fd2aef6ba75418c965d444ccbfd53fac Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Thu, 25 Jun 2020 15:51:51 +0300
Subject: style: fix linting erros

---
 src/pages/AuthPage/SignUpForm.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

(limited to 'src/pages/AuthPage')

diff --git a/src/pages/AuthPage/SignUpForm.tsx b/src/pages/AuthPage/SignUpForm.tsx
index 4a84830..25b79ff 100644
--- a/src/pages/AuthPage/SignUpForm.tsx
+++ b/src/pages/AuthPage/SignUpForm.tsx
@@ -38,8 +38,7 @@ const SignUpForm: React.FC<PropTypes> = ({ logIn }) => {
     const email = emailRef.current?.value;
     if (username && password) {
       post('/users', { username, password, email }).then(() => {
-        logIn(username, password).then(success => {
-        });
+        logIn(username, password);
       });
     } else setError(true);
   };
-- 
cgit v1.2.3


From cc91abb0ca403b7d7180b0e24fe126bd35ce20ab Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Thu, 25 Jun 2020 21:46:06 +0300
Subject: feat: add rememberMe switch

---
 src/pages/AuthPage/AuthPage.tsx   |  2 +-
 src/pages/AuthPage/SignInForm.tsx | 25 +++++++++++++++++++------
 2 files changed, 20 insertions(+), 7 deletions(-)

(limited to 'src/pages/AuthPage')

diff --git a/src/pages/AuthPage/AuthPage.tsx b/src/pages/AuthPage/AuthPage.tsx
index 0938bce..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({
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>
     </>
   );
-- 
cgit v1.2.3