fix signin & signup

Author: tobyleye

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/Login/Field.js renamed to client/src/components/Auth/Field.js

@@ -1,26 +1,3 @@
-// import React from 'react'
-// import styles from './Login.module.css'
-
-// const Field = ({ name, placeholder, type, handleChange }) => {
-
-//     return (
-//         <div>
-//             <input 
-//                 className={styles.inputField} 
-//                 type={type}
-//                 name={name}
-//                 placeholder={placeholder}
-//                 onChange={handleChange} 
-//                 required = {true}
-//             />
-//         </div>
-//     )
-// }
-
-// export default Field
-
-
-
 import React from 'react';
 import { TextField, Grid, InputAdornment, IconButton } from '@material-ui/core';
 

client/src/components/Login/Google.js renamed to client/src/components/Auth/Google.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 In" : "Sign Up"}
+              </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/Login/Icon.js renamed to client/src/components/Auth/Icon.js

@@ -0,0 +1,26 @@
+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";
+
+const Auth = () => {
+  const history = useHistory();
+  // eslint-disable-next-line
+  const user = JSON.parse(localStorage.getItem("profile"));
+
+  if (user) {
+    history.push("/dashboard");
+  }
+
+  return (
+    <Container component="main" maxWidth="xs">
+      <Switch>
+        <Route path="/login" component={LoginForm} />
+        <Route path="/signup" component={SignupForm} />
+      </Switch>
+    </Container>
+  );
+};
+
+export default Auth;

client/src/components/Login/Login.module.css renamed to client/src/components/Auth/Login.module.css

@@ -0,0 +1,14 @@
+import AuthForm from "./auth-form";
+import { useDispatch } from "react-redux";
+import { signin } from "../../actions/auth";
+
+const LoginForm = () => {
+  const dispatch = useDispatch();
+
+  const handleSubmit = (formData) => dispatch(signin(formData));
+
+
+  return <AuthForm onSubmit={handleSubmit} />;
+};
+
+export default LoginForm;

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

@@ -0,0 +1,13 @@
+import AuthForm from "./auth-form";
+import { signup } from "../../actions/auth";
+import { useDispatch } from "react-redux";
+
+const SignupForm = () => {
+    const dispatch = useDispatch();
+
+  const handleSubmit = (formData) => dispatch(signup(formData))
+
+  return <AuthForm isSignup onSubmit={handleSubmit} />;
+};
+
+export default SignupForm;