Merge pull request #10 from pesto-students/feature/auth

Feature/auth

.eslintrc

@@ -1,3 +1,4 @@
 {
-    "extends": ["react-app"]
+    "extends": ["react-app"],
+
 }

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@apollo/client": "^3.4.17",
     "@babel/core": "7.15.8",
     "@babel/preset-env": "^7.16.0",
     "@babel/preset-flow": "^7.16.0",
@@ -12,12 +13,13 @@
     "@testing-library/user-event": "^12.1.10",
     "axios": "^0.24.0",
     "bcryptjs": "^2.4.3",
-    "dotenv": "^10.0.0",
     "feather-icons-react": "^0.5.0",
     "firebase": "^9.4.0",
+    "graphql": "^16.0.1",
     "moment": "^2.29.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-google-recaptcha": "^2.1.0",
     "react-redux": "^7.2.6",
     "react-router-dom": "^5.3.0",
     "react-scripts": "4.0.3",

src/components/auth/signin/signinComponent.jsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Input } from '../../common';
+import useSigninContainer from './signinContainer';
+import { SignInContainer, SignInFormContainer } from './styledComponents';
+import { Button } from '../../common';
+import FeatherIcon from 'feather-icons-react';
+import { Link } from 'react-router-dom';
+
+const SignIn = (props) => {
+  const { handleStateChange, componentState, handleSignin } = useSigninContainer();
+  return (
+    <SignInContainer>
+      <SignInFormContainer>
+        <h2>Login</h2>
+        <form className="login-form">
+          <div className="login-inputs">
+            <Input
+              style={{border:'1px solid'}}
+              type="text"
+              label="Email"
+              placeholder="Enter Email"
+              error=""
+              name="email"
+              onChange={(e) => handleStateChange(e.target.name, e.target.value)}
+              value={componentState?.email}
+            />
+          </div>
+          <div className="login-inputs">
+            <Input
+              style={{border:'1px solid'}}
+              type="password"
+              label="Password"
+              placeholder="Enter password"
+              error=""
+              name="password"
+              onChange={(e) => handleStateChange(e.target.name, e.target.value)}
+              value={componentState?.password}
+            />
+          </div>
+          <Button onClick={(e)=>{handleSignin('self', e)}} style={{ width: '100%', margin: '10px 0' }} text="Login" />
+          <Button
+            onClick={(e)=>{handleSignin('google', e)}}
+            style={{ width: '100%', margin: '10px 0' }}
+            text="Google Login"
+          />
+          <div className="login-social-container">
+            <FeatherIcon
+              className="login-social-icon-github"
+              icon="github"
+              size="30"
+            />
+            <FeatherIcon
+              className="login-social-icon-facebook"
+              icon="facebook"
+              size="30"
+            />
+          </div>
+        </form>
+        <div>
+          <span>
+            {`don't have account? `}
+            <Link to="/SignUp">SignUp</Link>
+          </span>
+        </div>
+      </SignInFormContainer>
+    </SignInContainer>
+  );
+};
+
+SignIn.propTypes = {};
+
+export default SignIn;

src/components/auth/signin/signinContainer.js

@@ -0,0 +1,67 @@
+import firebase from 'firebase/compat/app';
+import 'firebase/compat/auth';
+import { useState } from 'react';
+import { googleAuthProvider } from '../../../config/firebase/authProviders';
+import useErrorContext from '../../../hooks/useErrorContext';
+
+const useSigninContainer = (props) => {
+  const errorContext = useErrorContext();
+  const [componentState, setComponentState] = useState({
+    email: '',
+    password: '',
+    error: null,
+    isLoading: false,
+    isSuccess: false,
+    isError: false
+  });
+
+  const handleStateChange = (name, value) => {
+    setComponentState({
+      ...componentState,
+      [name]: value
+    });
+  };
+
+  const handleSignin = async (providerName, event) => {
+    event?.preventDefault();
+    setComponentState({ ...componentState, isLoading: true });
+    if (providerName === 'google') {
+      const userCred = await firebase
+        .auth()
+        .signInWithPopup(googleAuthProvider);
+    } else if (providerName === 'self') {
+      try {
+        const userCred = await firebase
+          .auth()
+          .signInWithEmailAndPassword(
+            componentState.email,
+            componentState.password
+          );
+        setComponentState({
+          ...componentState,
+          isLoading: false,
+          isSuccess: true,
+          isError: false
+        });
+      } catch (err) {
+        console.log(err.code, err.message);
+        errorContext.showError(err.code, err.message);
+        setComponentState({
+          ...componentState,
+          isLoading: false,
+          isSuccess: false,
+          isError: true,
+          error: err
+        });
+      }
+    }
+  };
+
+  return {
+    componentState,
+    handleStateChange,
+    handleSignin
+  };
+};
+
+export default useSigninContainer;

src/components/auth/signin/styledComponents.js

@@ -0,0 +1,47 @@
+import styled from 'styled-components';
+
+export const SignInContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100vw;
+  height: 100vh;
+  color: ${(props) => props.theme.colors.primary};
+`;
+
+export const SignInFormContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 320px;
+  text-align: center;
+  color: ${(props) => props.theme.colors.primary};
+  .login-social-container {
+    display: flex;
+    justify-content: space-around;
+    width: 80%;
+    margin: 10px auto;
+    .login-social-icon-github {
+      &:hover {
+        color: #9845a5;
+        cursor: pointer;
+      }
+    }
+    .login-social-icon-facebook {
+      &:hover {
+        color: #3b5998;
+        cursor: pointer;
+      }
+    }
+  }
+  .login-inputs {
+    margin: 10px 0px;
+  }
+  form {
+    box-sizing: border-box;
+    width: 100%;
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+`;

src/components/auth/signup/signupComponent.jsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import ReCAPTCHA from "react-google-recaptcha";
+import { Button, Input } from '../../common';
+import useSignupContainer from './signupContainer';
+import { InputContainer, SignupComponentTitle, SignUpContainer } from './styledComponents';
+
+const SignupComponent = props => {
+    const {componentState, handleChange, handleCreateAccount} = useSignupContainer();
+    return (
+        <SignUpContainer>
+            <SignupComponentTitle>SignUp</SignupComponentTitle>
+            <form className='signup-form'>
+                <InputContainer>
+                    <Input
+                        style={{marginRight: '5px'}}
+                        type='text'
+                        name='firstName'
+                        placeholder='First Name'
+                        label='First Name'
+                        value={componentState.firstName}
+                        onChange={(e)=>handleChange(e.target.name, e.target.value)}
+                    />
+                      <Input
+                        className='signup-input'
+                        type='text'
+                        name='lastName'
+                        placeholder='Last Name'
+                        label='Last Name'
+                        value={componentState.lastName}
+                        onChange={(e)=>handleChange(e.target.name, e.target.value)}
+                    />
+                </InputContainer>
+                <InputContainer >
+                    <Input
+                        style={{width: '320px'}}
+                        type='email'
+                        name='email'
+                        placeholder='Email'
+                        label='Email'
+                        value={componentState.email}
+                        onChange={(e)=>handleChange(e.target.name, e.target.value)}
+                    />
+                </InputContainer>
+                <InputContainer >
+                    <Input
+                        style={{width: '320px'}}
+                        type='password'
+                        name='password'
+                        placeholder='Password'
+                        label='Password'
+                        value={componentState.password}
+                        onChange={(e)=>handleChange(e.target.name, e.target.value)}
+                    />
+                </InputContainer>
+                <InputContainer >
+                    <Input
+                        style={{width: '320px'}}
+                        type='password'
+                        name='confirmPassword'
+                        placeholder='Email'
+                        label='Confirm Password'
+                        value={componentState.confirmPassword}
+                        onChange={(e)=>handleChange(e.target.name, e.target.value)}
+                    />
+                </InputContainer>
+
+            </form>
+            <Button 
+                onClick={handleCreateAccount} 
+                disabled={!componentState.isSuccess}
+                style={{margin:'10px 0', width:'320px'}} text='SignUp'
+            />
+            <ReCAPTCHA
+                sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"
+                onChange={(e)=>{e? handleChange('isSuccess', true): handleChange('isSuccess', false)}}
+            />
+        </SignUpContainer>        
+    );
+};
+
+SignupComponent.propTypes = {
+
+};
+
+export default SignupComponent;

src/components/auth/signup/signupContainer.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import firebase from 'firebase/compat/app';
+import 'firebase/compat/auth';
+
+const useSignupContainer = (props) => {
+  const [componentState, setComponentState] = React.useState({
+    email: '',
+    password: '',
+    confirmPassword: '',
+    firstName: '',
+    lastName: '',
+    error: null,
+    isLoading: false,
+    isSuccess: false,
+    isError: false
+  });
+
+  const handleCreateAccount = async () => {
+    setComponentState({ ...componentState, isLoading: true });
+    const userCred = await firebase
+      .auth()
+      .createUserWithEmailAndPassword(
+        componentState.email,
+        componentState.password
+      );
+    // .catch((error) => {
+    //   setComponentState({
+    //     ...componentState,
+    //     isLoading: false,
+    //     isSuccess: false,
+    //     isError: true,
+    //     error
+    //   });
+    // });
+    if (userCred) {
+      console.log(userCred);
+      userCred.user?.sendEmailVerification();
+      setComponentState({
+        ...componentState,
+        isLoading: false,
+        isSuccess: true,
+        isError: false
+      });
+    }
+  };
+
+  const handleChange = (key, value) => {
+    if (typeof key === 'object') {
+      key = key.target.name;
+      value = key.target.value;
+    }
+    setComponentState({ ...componentState, [key]: value });
+  };
+
+  return {
+    handleChange,
+    componentState,
+    handleCreateAccount
+  };
+};
+
+useSignupContainer.propTypes = {};
+
+export default useSignupContainer;

src/components/auth/signup/styledComponents.js

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+
+export const SignUpContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  color: ${(props) => props.theme.colors.primary};
+  .signup-form {
+    display: flex;
+    flex-direction: column;
+    width: 320px;
+    padding: 10px;
+  }
+`;
+
+export const InputContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+`;
+
+export const SignupComponentTitle = styled.h2`
+  ${(props) => ({ ...props.theme.fonts.h2 })};
+`;