Revert "Added Google Authentication (#97)" (#99)

This reverts commit 968a645.

Author: riturajjain2000

package-lock.json

@@ -14,14 +14,11 @@
         "@testing-library/react": "^11.2.6",
         "@testing-library/user-event": "^12.8.3",
         "bootstrap": "^5.1.3",
-        "firebase": "^9.6.11",
         "font-awesome": "^4.7.0",
         "react": "^17.0.2",
         "react-bootstrap": "^2.2.0",
         "react-dom": "^17.0.2",
-        "react-google-login": "^5.2.2",
         "react-helmet": "^6.1.0",
-        "react-icons": "^4.3.1",
         "react-router": "^5.2.0",
         "react-router-dom": "^5.2.0",
         "react-scripts": "^5.0.1",

package.json

@@ -1,4 +1,4 @@
-import React, {useState, lazy, Suspense } from "react";
+import React, { lazy, Suspense } from "react";
 import { Route, Switch, Redirect } from "react-router-dom";
 import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
 import { withRouter } from "react-router";
@@ -8,8 +8,7 @@ import NotFound from "./pages/404/NotFound";
 import "./index.scss";
 import Preloader from "./components/Preloader/Preloader";
 import Scroll from "./components/Scroll/Scroll";
-import { authentication } from "./firebase-config";
-import { Router } from "react-router-dom";
+
 const Home = lazy(() => import("./pages/Home/Home"));
 const Explore = lazy(() => import("./pages/Explore/Explore"));
 const DetailPage = lazy(() => import("./pages/DetailPage/DetailPage"));
@@ -20,70 +19,31 @@ const Reset = lazy(() => import("./pages/ResetPassword/Reset"));
 const Report = lazy(() => import("./pages/ReportaBug/Report"));
 const Signup = lazy(() => import("./pages/SignupPage/Signup"));
 function App({ location }) {
-
-  const [userLoggedIn, setUserLoggedIn] = useState(true);
-  
- authentication.onAuthStateChanged((user)=> {
-   if(user){
-     return setUserLoggedIn(true);
-   }
-   setUserLoggedIn(false);
-   
- })
-
-  if(userLoggedIn === true){
-    
-    return (
-      
-      <Suspense fallback={<Preloader />}>
-        {location.pathname !== "/404" && (
-          <Header  currentRoute={location.pathname} />
-        )}
-        <Scroll showBelow={200} />
-        <Switch>
-          <Route path="/" exact component={Home} />
-          <Route path="/contact" exact component={ContactUs} />
-          <Route path="/explore" exact component={Explore} />
-          <Route path="/e/:slug" exact component={DetailPage} />
-          <Route path="/jobs" exact component={ContactUs} />
-          <Route path="/feed" exact component={ContactUs} />
-          <Route path="/report" component={Report} />
-          <Route path="/404" exact component={NotFound} />
-          <Redirect to="/" component={Home} />
-        </Switch>
-        {location.pathname !== "/404" && <Footer fill={"#0D1017"} />}
-      </Suspense>
-    );
-  }else{
-    return (
-      <Suspense fallback={<Preloader />}>
+  return (
+    <Suspense fallback={<Preloader />}>
       {location.pathname !== "/404" && (
         <Header currentRoute={location.pathname} />
       )}
       <Scroll showBelow={200} />
       <Switch>
         <Route path="/" exact component={Home} />
-        <Route path="/signin" exact component={Login} />
         <Route path="/contact" exact component={ContactUs} />
+        <Route path="/explore" exact component={Explore} />
         <Route path="/e/:slug" exact component={DetailPage} />
         <Route path="/jobs" exact component={ContactUs} />
         <Route path="/feed" exact component={ContactUs} />
+        <Route path="/signin" exact component={Login} />
         <Route path="/signup" exact component={Signup} />
         <Route path="/forget" component={Forget} />
         <Route path="/reset" component={Reset} />
+        <Route path="/report" component={Report} />
         <Route path="/404" exact component={NotFound} />
-        <Redirect to="/explore" />
+
+        <Redirect to="/404" />
       </Switch>
       {location.pathname !== "/404" && <Footer fill={"#0D1017"} />}
     </Suspense>
-
-    )
-    
-  }
-
-  
- 
-  
+  );
 }
 
 export default withRouter(App);

src/App.jsx

@@ -3,7 +3,6 @@ import { Link } from "react-router-dom";
 import styles from "./header.module.scss";
 import Logo from "./../../assets/_logo/logo.png";
 import { AccountCircle, Add, ExitToApp, Settings } from "@material-ui/icons";
-import { authentication } from "../../firebase-config";
 import {
   IconButton,
   makeStyles,
@@ -15,14 +14,6 @@ import {
 } from "@material-ui/core";
 
 function Header(props) {
-
-  
-
-  
-  
-  
-
-
   const { currentRoute } = props;
   const header = useRef(null);
 
@@ -204,7 +195,7 @@ function Header(props) {
               to={"/signin"}
               onClick={() => setLoggedin(true)}
             >
-              Signin
+              Sign in
             </Link>
           )}
         </div>

src/components/Header/Header.jsx

@@ -2,26 +2,8 @@ import React from 'react';
 import 'font-awesome/css/font-awesome.min.css';
 import './login.css';
 import loginIllustartion from '../../assets/socialmedia/login.png';
-import { authentication } from '../../firebase-config';
-import { signInWithPopup, GoogleAuthProvider } from "firebase/auth";
-import {ImGoogle} from "react-icons/im"
-import {ImGithub} from "react-icons/im"
-export default function Login() {
-
-
-    const handleGoogleLogin = () => {
-        const provider = new GoogleAuthProvider();
-        signInWithPopup(authentication, provider)
-        .then((res) => {
-            console.log(res);
-        })
-        .catch((err)=>{
-            console.log(err);
-        })
-    }
-
-
 
+export default function Login() {
     return (
         <div className="container-ctm-login container">
             <div className="illustration_img">
@@ -81,15 +63,10 @@ export default function Login() {
                         <a href="/signup"> Create your account! </a>
                     </div>
 
-                    <div className="authBtns">
-                        <button id="googlebutton" onClick={handleGoogleLogin}>
-                            <ImGoogle className='icon' /> 
-                            Continue with Google
-                        </button>
-                        <button id="githubbutton" >
-                            <ImGithub className='icon' /> 
-                            Continue with Github
-                        </button>
+                    <div className="icons">
+                        <a href="#" id="facebookIcon"></a>
+                        <a href="#" id="twitterIcon"></a>
+                        <a href="#" id="googleIcon"></a>
                     </div>
                 </form>
             </div>

src/firebase-config.js

@@ -248,40 +248,3 @@ a:hover {
         box-shadow: none;
     }
 }
-
-
-#googlebutton{
-    padding: 1em 2em;
-    border-radius: 100px;
-    border: none;
-    background-color: #24a0ed;
-    color: white;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 1em;
-}
-#githubbutton{
-    padding: 1em 2em;
-    border-radius: 100px;
-    border: none;
-    background-color: #24a0ed;
-    color: white;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 1em;
-}
-
-.authBtns{
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    gap: 1em;
-    margin: 1em;
-}
-
-.icon{
-    transform: scale(1.2);
-}

src/pages/Login/Login.jsx

@@ -7,7 +7,7 @@ export default function Signup() {
     return (
         <div className="container-ctm-signup container">
             <div className="illustration_img">
-                {/* <img src={signupIllustartion}></img> */}
+                <img src={signupIllustartion}></img>
             </div>
             <div className="signup-content">
                 <form>