fixed firebase authentication

yaratul · Nov 18, 2021 · d594776 · d594776
1 parent ba02b13
commit d594776
Show file tree

Hide file tree

Showing 6 changed files with 102 additions and 27 deletions.
diff --git a/src/component/Login/SignInForm.jsx b/src/component/Login/SignInForm.jsx
@@ -31,16 +31,16 @@ const SignInForm = ({handleResponse}) => {
         })
     }
     return (
-        <form onSubmit={handleSubmit(onSubmit)} class="sign-in-form">
+        <form onSubmit={handleSubmit(onSubmit)} className="sign-in-form">
             <Toast show={show} onClose={() => setShow(!show)} className="signInToast">
                 <Toast.Header>
                     <img src={`${ifoIcon}`} className="circle mr-2 toastIcon" alt=""/>
                     <strong className="mr-auto">Important Info</strong>
                 </Toast.Header>
                 <Toast.Body>Use this account to sign in as a admin, to test admin panel. Sign in with different account as a user</Toast.Body>
             </Toast>
-            <h2 class="title">Sign in</h2>
-            <div class="input-field">
+            <h2 className="title">Sign in</h2>
+            <div className="input-field">
                 <span className="fIcon"><FontAwesomeIcon icon={faEnvelope}/></span>
                 <input defaultValue='[email protected]' placeholder="Email" {...register("email", { required: true })} />
             </div>
@@ -51,7 +51,7 @@ const SignInForm = ({handleResponse}) => {
             </div>
             {errors.password && <span className="text-warning">This field is required</span>}
             <input className="iBtn" type="submit" value="sign In"/>
-            <p class="social-text">Or Sign in with social platforms</p>
+            <p className="social-text">Or Sign in with social platforms</p>
             <SocialMedia handleResponse={handleResponse}/>
         </form>
     );

diff --git a/src/component/Login/SignUpForm.jsx b/src/component/Login/SignUpForm.jsx
@@ -22,18 +22,18 @@ const SignUpForm = ({handleResponse}) => {
         })
     }
     return (
-        <form onSubmit={handleSubmit(onSubmit)} class="sign-up-form">
+        <form onSubmit={handleSubmit(onSubmit)} className="sign-up-form">
             <h2 className="title">Sign Up</h2>
-            <div class="input-field">
+            <div className="input-field">
                 <span className="fIcon"><FontAwesomeIcon icon={faUser}/></span>
                 <input placeholder="Name" {...register("email", { required: true })} />
             </div>
-            <div class="input-field">
+            <div className="input-field">
                 <span className="fIcon"><FontAwesomeIcon icon={faEnvelope}/></span>
                 <input placeholder="Email" {...register("email", { required: true })} />
             </div>
             {errors.email && <span className="text-warning">This field is required</span>}
-            <div class="input-field">
+            <div className="input-field">
                 <span className="fIcon"><FontAwesomeIcon icon={faLock}/></span>
                 <input type="password" placeholder="Password" {...register("password", { required: true })} />
             </div>

diff --git a/src/component/Login/SocialMedia.jsx b/src/component/Login/SocialMedia.jsx
@@ -23,7 +23,7 @@ const SocialMedia = ({handleResponse}) => {
         })
     }
     return (
-        <div class="social-media">
+        <div className="social-media">
             <div onClick={() => handleSignIn(googleProvider)} className="social-icon">
                 <FontAwesomeIcon icon={faGoogle}/>
             </div>

diff --git a/src/component/Shared/Navbar/Navbar.jsx b/src/component/Shared/Navbar/Navbar.jsx
@@ -1,16 +1,16 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { Link } from "react-router-dom";
-// import { UserContext } from '../../../App';
 import './Navbar.css';
-// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-// import { faBuffer } from '@fortawesome/free-brands-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faBuffer } from '@fortawesome/free-brands-svg-icons';
 import { useState } from 'react';
 import { useEffect } from 'react';
 import { Container, Nav, Navbar } from 'react-bootstrap';
-// import PopOver from '../PopOver/PopOver';
+import PopOver from '../PopOver/PopOver';
+import { UserContext } from '../../../App';
 
 const NavBar = () => {
-    // const { user } = useContext(UserContext)
+    const { user } = useContext(UserContext)
     const [isSticky, setSticky] = useState(false)
 
     useEffect(() => {
@@ -23,19 +23,19 @@ const NavBar = () => {
         })
     }, [])
 
-    const scrollTop = () => window['scrollTo']({top: 0, behavior: 'smooth'});
+    const scrollTop = () => window['scrollTo']({ top: 0, behavior: 'smooth' });
     return (
-        <Navbar className={`navbar navbar-expand-lg navbar-light ${isSticky ? "navStyle": "navDefault"}`} expand="lg">
+        <Navbar className={`navbar navbar-expand-lg navbar-light ${isSticky ? "navStyle" : "navDefault"}`} expand="lg">
             <Container>
                 <Navbar.Brand as={Link} exact to="/" onClick={scrollTop} className="navBrn">
-                    {/* <FontAwesomeIcon icon={faBuffer} className="brnIcon"/> Trusted <span className="navHighlight">Tech</span> */}
+                    <FontAwesomeIcon icon={faBuffer} className="brnIcon" /> Trusted <span className="navHighlight">Tech</span>
                 </Navbar.Brand>
                 <Navbar.Toggle aria-controls="basic-navbar-nav" />
-                <Navbar.Collapse id="basic-navbar-nav"/>
+                <Navbar.Collapse id="basic-navbar-nav" />
                 <Navbar.Collapse id="basic-navbar-nav">
                     <Nav className="ms-auto mainNav" activeKey="/home">
                         <Nav.Item>
-                            <Nav.Link as={Link} exact to="/" className="nav-link" onClick={() =>  window['scrollTo']({top: 0, behavior: 'smooth'})}>Home</Nav.Link>
+                            <Nav.Link as={Link} exact to="/" className="nav-link" onClick={() => window['scrollTo']({ top: 0, behavior: 'smooth' })}>Home</Nav.Link>
                         </Nav.Item>
                         <Nav.Item>
                             <Nav.Link href="#services" className="nav-link">Services</Nav.Link>
@@ -49,15 +49,15 @@ const NavBar = () => {
                         <Nav.Item>
                             <Nav.Link as={Link} to="/dashboard/profile" className="nav-link">Dashboard</Nav.Link>
                         </Nav.Item>
-                        {/* <Nav.Item>
+                        <Nav.Item>
                             {
-                            user.email ? 
-                                <PopOver/> :
-                                <Link to="/login">
-                                    <button className="loginBtn">Login</button>
-                                </Link>
+                                user.email ?
+                                    <PopOver /> :
+                                    <Link to="/login">
+                                        <button className="loginBtn">Login</button>
+                                    </Link>
                             }
-                        </Nav.Item> */}
+                        </Nav.Item>
                     </Nav>
                 </Navbar.Collapse>
             </Container>

diff --git a/src/component/Shared/PopOver/PopOver.css b/src/component/Shared/PopOver/PopOver.css
@@ -0,0 +1,23 @@
+.popImg {
+    height: 45px;
+    border-radius: 50%;
+    cursor: pointer!important;
+    margin: 0.2rem 0 0 0.7rem;
+}
+.popUserImg {
+    height: 60px;
+    border-radius: 50%;
+    margin-bottom: 8px;
+}
+.userName, 
+.userEmail{
+    margin-bottom: 0;
+    font-size: 1rem;
+    font-weight: 700;
+}
+.userEmail {
+    margin: 0.1rem 0 0.5rem;
+    font-weight: 600;
+    font-size: 0.9rem;
+    color: rgba(0,0,0,.7);
+}
diff --git a/src/component/Shared/PopOver/PopOver.jsx b/src/component/Shared/PopOver/PopOver.jsx
@@ -0,0 +1,52 @@
+import React, { useContext } from 'react';
+import { useState } from 'react';
+import { useRef } from 'react';
+import { Button, Overlay } from 'react-bootstrap';
+import Popover from 'react-bootstrap/Popover'
+import './PopOver.css';
+import toast from 'react-hot-toast';
+import { UserContext } from '../../../App';
+import { handleSignOut } from '../../Login/LoginManager';
+
+const PopOver = () => {
+    const { user: {name,email, img}, setUser} = useContext(UserContext);
+    const [show, setShow] = useState(false);
+    const [target, setTarget] = useState(null);
+    const ref = useRef(null);
+    const handleClick = (event) => {
+        setShow(!show);
+        setTarget(event.target);
+    };
+    const signOut = () => {
+        const loading = toast.loading('Please wait...');
+        handleSignOut()
+        .then(res => {
+            toast.dismiss(loading);
+            setUser(res)
+            toast.error('Logged Out!');
+        })
+    }
+    return (
+        <div ref={ref}>
+            <img src={img} alt="" onClick={handleClick} className="popImg"/>
+            <Overlay
+                show={show}
+                target={target}
+                placement="bottom"
+                container={ref.current}
+                containerPadding={50}
+            >
+                <Popover id="popover-contained">
+                    <Popover.Content className="text-center">
+                        <img src={img} alt="" className="popUserImg"/>
+                        <p className="userName">{`${name}`}</p>
+                        <p className="userEmail">{email}</p>
+                        <Button variant="outline-danger" size="sm" onClick={signOut}>Log out</Button>
+                    </Popover.Content>
+                </Popover>
+            </Overlay>
+        </div>
+    );
+};
+
+export default PopOver;