clean up

client/src/components/Auth/Field.js

@@ -1,32 +1,52 @@
-import React from 'react';
-import { TextField, Grid, InputAdornment, IconButton } from '@material-ui/core';
+import React, { useState } from "react";
+import { TextField, Grid, InputAdornment, IconButton } from "@material-ui/core";
 
-import Visibility from '@material-ui/icons/Visibility';
-import VisibilityOff from '@material-ui/icons/VisibilityOff';
+import Visibility from "@material-ui/icons/Visibility";
+import VisibilityOff from "@material-ui/icons/VisibilityOff";
 
-const Field = ({ name, handleChange, label, half, autoFocus, type, handleShowPassword, placeholder }) => (
-  <Grid item xs={12} sm={half ? 6 : 12}>
-    <TextField
-      name={name}
-      onChange={handleChange}
-      placeholder={placeholder}
-      variant="outlined"
-      required
-      fullWidth
-      label={label}
-      autoFocus={autoFocus}
-      type={type}
-      InputProps={name === 'password' ? {
-        endAdornment: (
-          <InputAdornment position="end">
-            <IconButton onClick={handleShowPassword}>
-              {type === 'password' ? <Visibility /> : <VisibilityOff />}
-            </IconButton>
-          </InputAdornment>
-        ),
-      } : null}
-    />
-  </Grid>
-);
+const Field = ({
+  name,
+  handleChange,
+  label,
+  half,
+  autoFocus,
+  type,
+  placeholder,
+}) => {
+  const [showPass, setShowPass] = useState(false);
 
-export default Field
+  const togglePasswordVisibility = () => {
+    setShowPass((show) => !show);
+  };
+
+  return (
+    <Grid item xs={12} sm={half ? 6 : 12}>
+      <TextField
+        name={name}
+        onChange={handleChange}
+        placeholder={placeholder}
+        variant="outlined"
+        required
+        fullWidth
+        label={label}
+        autoFocus={autoFocus}
+        type={showPass ? "text" : type}
+        InputProps={
+          name === "password"
+            ? {
+                endAdornment: (
+                  <InputAdornment position="end">
+                    <IconButton onClick={togglePasswordVisibility}>
+                      {!showPass ? <Visibility /> : <VisibilityOff />}
+                    </IconButton>
+                  </InputAdornment>
+                ),
+              }
+            : null
+        }
+      />
+    </Grid>
+  );
+};
+
+export default Field;

client/src/components/Auth/auth-form.js

@@ -136,7 +136,7 @@ const AuthForm = ({ isSignup = false, onSubmit }) => {
                 type="submit"
                 className={styles.submitBtn}
               >
-                {isSignup ? "Sign In" : "Sign Up"}
+                {isSignup ? "Sign Up" : "Sign In"}
               </button>
             )}
           </div>

client/src/components/Auth/index.js

@@ -1,8 +1,9 @@
 import React from "react";
 import { Container } from "@material-ui/core";
 import { Switch, Route, useHistory } from "react-router-dom";
-import SignupForm from "./signup-form";
-import LoginForm from "./login-form";
+import AuthForm from "./auth-form";
+import { useDispatch } from "react-redux";
+import { signin, signup } from "../../actions/auth";
 
 const Auth = () => {
   const history = useHistory();
@@ -13,11 +14,17 @@ const Auth = () => {
     history.push("/dashboard");
   }
 
+  const dispatch = useDispatch();
+
   return (
     <Container component="main" maxWidth="xs">
       <Switch>
-        <Route path="/login" component={LoginForm} />
-        <Route path="/signup" component={SignupForm} />
+        <Route path="/login">
+          <AuthForm onSubmit={() => dispatch(signin())} />
+        </Route>
+        <Route path="/signup">
+          <AuthForm isSignup onSubmit={() => dispatch(signup())} />
+        </Route>
       </Switch>
     </Container>
   );