fix signin & signup

client/src/App.js

@@ -7,7 +7,7 @@ import Invoices from './components/Invoices/Invoices';
 import InvoiceDetails from './components/InvoiceDetails/InvoiceDetails'
 import ClientList from './components/Clients/ClientList'
 import NavBar from './components/NavBar/NavBar';
-import Login from './components/Login/Login'
+import Auth from './components/Auth'
 import Dashboard from './components/Dashboard/Dashboard';
 import Footer from './components/Footer/Footer';
 import Header from './components/Header/Header';
@@ -31,7 +31,7 @@ function App() {
           <Route path="/edit/invoice/:id" exact component={Invoice} />
           <Route path="/invoice/:id" exact component={InvoiceDetails} />
           <Route path="/invoices" exact component={Invoices} />
-          <Route path="/login" exact component={Login} />
+          <Route path={['/signup', '/login']} exact component={Auth} />
           <Route path="/settings" exact component={Settings} />
           <Route path="/dashboard" exact component={Dashboard} />
           <Route path="/customers" exact component={ClientList} />

client/src/components/Auth/Field.js

@@ -0,0 +1,52 @@
+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";
+
+const Field = ({
+  name,
+  handleChange,
+  label,
+  half,
+  autoFocus,
+  type,
+  placeholder,
+}) => {
+  const [showPass, setShowPass] = useState(false);
+
+  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

@@ -0,0 +1,182 @@
+import { Grid, Typography, Avatar, Paper, Button } from "@material-ui/core";
+import { useState } from "react";
+import Field from "./Field";
+import { GoogleLogin } from "react-google-login";
+// import ProgressButton from "react-progress-button";
+import LockOutlinedIcon from "@material-ui/icons/LockOutlined";
+import { Link } from "react-router-dom";
+import useStyles from "./styles";
+import styles from "./Login.module.css";
+import { createProfile } from "../../actions/profile";
+import { useDispatch } from "react-redux";
+import CircularProgress from "@material-ui/core/CircularProgress";
+
+const initialState = {
+  firstName: "",
+  lastName: "",
+  email: "",
+  password: "",
+  confirmPassword: "",
+  profilePicture: "",
+  bio: "",
+};
+
+const AuthForm = ({ isSignup = false, onSubmit }) => {
+  const classes = useStyles();
+  const [formData, setFormData] = useState(initialState);
+
+  const handleChange = (e) => {
+    setFormData({ ...formData, [e.target.name]: e.target.value });
+  };
+
+  const dispatch = useDispatch();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const googleSuccess = async (res) => {
+    console.log(res);
+    const result = res?.profileObj;
+    const token = res?.tokenId;
+    dispatch(
+      createProfile({
+        name: result?.name,
+        email: result?.email,
+        userId: result?.googleId,
+        phoneNumber: "",
+        businessName: "",
+        contactAddress: "",
+        logo: result?.imageUrl,
+        website: "",
+      })
+    );
+
+    try {
+      dispatch({ type: "AUTH", data: { result, token } });
+
+      window.location.href = "/dashboard";
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  const googleError = (error) => {
+    console.log(error);
+    console.log("Google Sign In was unseccassful. Try again later");
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    if (typeof onSubmit === "function") {
+      try {
+        setIsLoading(true);
+        await Promise.resolve(onSubmit(formData));
+        setIsLoading(false);
+      } catch (err) {
+        // handle error
+        setIsLoading(false);
+      }
+    }
+  };
+
+  return (
+    <Paper className={classes.paper} elevation={2}>
+      <Avatar className={classes.avatar}>
+        <LockOutlinedIcon />
+      </Avatar>
+      <Typography component="h1" variant="h5">
+        {isSignup ? "Sign up" : "Sign in"}
+      </Typography>
+      <form className={classes.form} onSubmit={handleSubmit}>
+        <Grid container spacing={2}>
+          {isSignup && (
+            <>
+              <Field
+                name="firstName"
+                label="First Name"
+                handleChange={handleChange}
+                autoFocus
+                half
+              />
+              <Field
+                name="lastName"
+                label="Last Name"
+                handleChange={handleChange}
+                half
+              />
+            </>
+          )}
+          <Field
+            name="email"
+            label="Email Address"
+            handleChange={handleChange}
+            type="email"
+          />
+          <Field
+            name="password"
+            label="Password"
+            handleChange={handleChange}
+            type={"password"}
+          />
+          {isSignup && (
+            <Field
+              name="confirmPassword"
+              label="Repeat Password"
+              handleChange={handleChange}
+              type="password"
+            />
+          )}
+        </Grid>
+        <div className={styles.buttons}>
+          <div>
+            {isLoading ? (
+              <CircularProgress />
+            ) : (
+              <button
+                disabled={isLoading}
+                type="submit"
+                className={styles.submitBtn}
+              >
+                {isSignup ? "Sign Up" : "Sign In"}
+              </button>
+            )}
+          </div>
+          <div>
+            <GoogleLogin
+              clientId={process.env.REACT_APP_GOOGLE_CLIENT_ID}
+              render={(renderProps) => (
+                <button
+                  className={styles.googleBtn}
+                  onClick={renderProps.onClick}
+                  disabled={renderProps.disabled}
+                >
+                  Google
+                </button>
+              )}
+              onSuccess={googleSuccess}
+              onFailure={googleError}
+              cookiePolicy="single_host_origin"
+            />
+          </div>
+        </div>
+        <Grid container justifyContent="center">
+          <Grid item>
+            {isSignup ? (
+              <Link to="/login">Already have an account? Sign in</Link>
+            ) : (
+              <Link to="/signup">Don't have an account? Sign Up</Link>
+            )}
+          </Grid>
+        </Grid>
+        <Link to="forgot">
+          <p
+            style={{ textAlign: "center", color: "#1d7dd6", marginTop: "20px" }}
+          >
+            Forgotten Password?
+          </p>
+        </Link>
+      </form>
+    </Paper>
+  );
+};
+
+export default AuthForm;

client/src/components/Auth/index.js

@@ -0,0 +1,33 @@
+import React from "react";
+import { Container } from "@material-ui/core";
+import { Switch, Route, useHistory } from "react-router-dom";
+import AuthForm from "./auth-form";
+import { useDispatch } from "react-redux";
+import { signin, signup } from "../../actions/auth";
+
+const Auth = () => {
+  const history = useHistory();
+  // eslint-disable-next-line
+  const user = JSON.parse(localStorage.getItem("profile"));
+
+  if (user) {
+    history.push("/dashboard");
+  }
+
+  const dispatch = useDispatch();
+
+  return (
+    <Container component="main" maxWidth="xs">
+      <Switch>
+        <Route path="/login">
+          <AuthForm onSubmit={() => dispatch(signin())} />
+        </Route>
+        <Route path="/signup">
+          <AuthForm isSignup onSubmit={() => dispatch(signup())} />
+        </Route>
+      </Switch>
+    </Container>
+  );
+};
+
+export default Auth;