Aniket/logout modal

client/src/components/AnimatedRoutes.jsx

@@ -1,33 +1,39 @@
-import React from 'react'
-import { BrowserRouter as Router, Routes, Route, useLocation } from 'react-router-dom';
-import Landing from '../pages/landing/Landing';
-import Signin from '../pages/signin/Signin';
-import Main from '../pages/main/Main';
-import Home from '../pages/home/Home';
-import MyFiles from '../pages/myFiles/MyFiles';
-import Callback from '../pages/Callback';
-import Error from '../pages/error/Error';
-import Desc from '../components/file-desc/Desc';
-import { AnimatePresence } from 'framer-motion'
-
+import React, { useState } from "react";
+import {
+  BrowserRouter as Router,
+  Routes,
+  Route,
+  useLocation,
+} from "react-router-dom";
+import Landing from "../pages/landing/Landing";
+import Signin from "../pages/signin/Signin";
+import Main from "../pages/main/Main";
+import Home from "../pages/home/Home";
+import MyFiles from "../pages/myFiles/MyFiles";
+import Callback from "../pages/Callback";
+import Error from "../pages/error/Error";
+import Desc from "../components/file-desc/Desc";
+import { AnimatePresence } from "framer-motion";
 
 function AnimatedRoutes() {
   const location = useLocation();
+  const [logoutModal, setLogoutModal] = useState(false);
+
   return (
     <AnimatePresence exitBeforeEnter>
       <Routes location={location} key={location.pathname}>
         <Route path="*" element={<Error />} />
         <Route path="/" element={<Landing />} />
         <Route path="/signin" element={<Signin />} />
         <Route path="/callback" element={<Callback />} />
-        <Route path="/app" element={<Main />}>
-          <Route path="/app/home" element={<Home />} />
-          <Route path="/app/myFiles" element={<MyFiles />} />
+        <Route path="/app" element={<Main setLogoutModal={setLogoutModal} logoutModal={logoutModal} />} >
+          <Route path="/app/home" element={<Home logoutModal={logoutModal} />} />
+          <Route path="/app/myFiles" element={<MyFiles logoutModal={logoutModal} />} />
           <Route path="/app/myFiles/desc" element={<Desc />} />
         </Route>
       </Routes>
     </AnimatePresence>
-  )
+  );
 }
 
-export default AnimatedRoutes
+export default AnimatedRoutes;

client/src/components/navbar/Navbar.css

@@ -66,8 +66,91 @@
     color: #C8C8C8;
 }
 
+.hide {
+    display: none;
+}
+
+.logout {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    height: 200px;
+    width: 450px;
+    z-index: 999;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    background:
+    linear-gradient(rgb(32, 31, 31) 0 0) padding-box,
+    linear-gradient(to right, #00939c, #00ffa8) border-box;
+    border: 2px solid transparent;
+    border-radius: 10px;
+}
+
+.logout >p {
+    color: azure;
+    text-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
+    font-family: PolySans Bulky;
+    font-size: 24px;
+    text-align: center;
+    color: #fff;
+    padding-top: 30px;
+}
+
+.logout >div{
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    padding-bottom: 25px;
+}
+
+.log-out_button {
+    align-items: center;
+    border-radius: 8px !important;
+    color:#00ffa8;
+    font-size: 16px;
+    width: 105px;
+    height: 40px;
+    background:
+    linear-gradient(rgb(32,31,31) 0 0) padding-box,    
+    linear-gradient(to right, #00939c, #00ffa8) border-box;
+    border: 1.5px solid transparent;
+    border-radius: 3px;
+    display: inline-block;
+    font-weight: 750;
+    word-spacing: 0px;
+}
+
+.cancel_button {
+    border-radius: 8px;
+    border: solid 1.5px #999;
+    font-size: 16px;
+    width: 105px;
+    color: #999;
+    height: 40px;
+    background-color: rgb(32, 31, 31);
+    font-weight: 600;
+}
+
 /* Ipad */
 
-@media screen and (max-width: 820px) {
-
+@media screen and (max-width: 460px) {
+    .logout{
+       width: 280px;
+       height: 150px;
+    }
+
+    .logout >p{
+        font-size: 16px;
+    }
+
+    .cancel_button,.log-out_button {
+        font-size: 10px;
+        width: 75px;
+        height: 25px;
+        border-radius: 5px;
+    }
 }

client/src/components/navbar/Navbar.jsx

@@ -1,77 +1,121 @@
-import React, { useContext } from 'react'
-import './Navbar.css'
-import { NavLink, useNavigate } from 'react-router-dom'
-import app_logo from '../../assets/icons/app-logo.png'
-import home_icon from '../../assets/icons/home.png'
-import files_icon from '../../assets/icons/files.png'
-import shared_icon from '../../assets/icons/shared.png'
-import logout_icon from '../../assets/icons/logout.png'
-import { UserContext } from '../../utils/UserContext'
-import { magic } from '../../utils/magic'
+import React, { useContext, useState } from 'react';
+import './Navbar.css';
+import { NavLink, useNavigate } from 'react-router-dom';
+import app_logo from '../../assets/icons/app-logo.png';
+import home_icon from '../../assets/icons/home.png';
+import files_icon from '../../assets/icons/files.png';
+import shared_icon from '../../assets/icons/shared.png';
+import logout_icon from '../../assets/icons/logout.png';
+import { UserContext } from '../../utils/UserContext';
+import { magic } from '../../utils/magic';
 import Cookies from 'universal-cookie';
 import Axios from 'axios';
-import Tippy from '@tippyjs/react'
-import 'tippy.js/dist/tippy.css'
+import Tippy from '@tippyjs/react';
+import 'tippy.js/dist/tippy.css';
 
-function Navbar() {
-    const navigate = useNavigate();
-    const cookie = new Cookies();
+function Navbar({ setLogoutModal, logoutModal }) {
+  const navigate = useNavigate();
+  const cookie = new Cookies();
 
-    const [user, setUser] = useContext(UserContext);
+  const [user, setUser] = useContext(UserContext);
 
-    const logout = () => {
-        magic.user.logout().then(() => {
-            setUser({ user: null });
-            window.localStorage.removeItem("didToken");
-            // cookie.remove("didToken");
-            navigate('/');
-        })
-    }
+  const logout = () => {
+    magic.user.logout().then(() => {
+      setUser({ user: null });
+      window.localStorage.removeItem("didToken");
+      // cookie.remove("didToken");
+      navigate("/");
+    });
+    setLogoutModal(false);
+  };
 
-    const testApi = async () => {
-        Axios.post(`${process.env.REACT_APP_SERVER_URL}/test`, {}, { headers: { Authorization: 'Bearer ' + window.localStorage.getItem("didToken") } }).then((res) => {
-            alert(res.data);
-        }).catch((err) => {
-            alert(err);
-        })
-    }
+  const logoutPopup = () => {
+    setLogoutModal(true);
+  };
 
-    return (
-        <nav>
-            <div className='Navbar'>
-                <div className="navbar-content">
-                    <div className="logo-box" onClick={() => { navigate('/') }}>
-                        <img src={app_logo} alt="" />
-                        <p>Storz</p>
-                    </div>
-                    <div className="right-con">
-                        <div className="link-box">
-                            <div className="link-con">
-                                {/* <img src={home_icon} alt="" /> */}
-                                <NavLink to="/app/home" style={({ isActive }) => ({
-                                    color: isActive ? '#FFFFFF' : '#C8C8C8',
-                                })}>Home</NavLink>
-                            </div>
-                            <div className="link-con">
-                                {/* <img src={files_icon} alt="" /> */}
-                                <NavLink to="/app/myFiles" style={({ isActive }) => ({
-                                    color: isActive ? '#FFFFFF' : '#C8C8C8',
-                                })}>Files</NavLink>
-                            </div>
-                            <div></div>
-                        </div>
-                        {/* <button onClick={testApi}>Test API</button> */}
-                        <Tippy content="Logout" placement='right'>
-                        <div className="logout-btn" onClick={logout}>
-                            <img src={logout_icon} alt="" />
-                        </div>
-                        </Tippy>
-
-                    </div>
-                </div>
-            </div>
-        </nav>
+  const cancelLogout = () => {
+    setLogoutModal(false);
+  };
+
+  const testApi = async () => {
+    Axios.post(
+      `${process.env.REACT_APP_SERVER_URL}/test`,
+      {},
+      {
+        headers: {
+          Authorization: "Bearer " + window.localStorage.getItem("didToken"),
+        },
+      }
     )
+      .then((res) => {
+        alert(res.data);
+      })
+      .catch((err) => {
+        alert(err);
+      });
+  };
+
+  return (
+    <nav>
+      <div className="Navbar">
+        <div className={`navbar-content ${logoutModal ? "bg-blur" : ""}`}>
+          <div
+            className="logo-box"
+            onClick={() => {
+              navigate("/");
+            }}
+          >
+            <img src={app_logo} alt="" />
+            <p>Storz</p>
+          </div>
+          <div className="right-con">
+            <div className="link-box">
+              <div className="link-con">
+                {/* <img src={home_icon} alt="" /> */}
+                <NavLink
+                  to="/app/home"
+                  style={({ isActive }) => ({
+                    color: isActive ? "#FFFFFF" : "#C8C8C8",
+                  })}
+                >
+                  Home
+                </NavLink>
+              </div>
+              <div className="link-con">
+                {/* <img src={files_icon} alt="" /> */}
+                <NavLink
+                  to="/app/myFiles"
+                  style={({ isActive }) => ({
+                    color: isActive ? "#FFFFFF" : "#C8C8C8",
+                  })}
+                >
+                  Files
+                </NavLink>
+              </div>
+              <div></div>
+            </div>
+            {/* <button onClick={testApi}>Test API</button> */}
+            <Tippy content="Logout" placement="right">
+              <div className="logout-btn" onClick={logoutPopup}>
+                <img src={logout_icon} alt="" />
+              </div>
+            </Tippy>
+          </div>
+        </div>
+        <div className={`${logoutModal ? "logout" : "hide"}`}>
+          <p>Are you sure you want to log out?</p>
+          <div>
+            <button className="cancel_button" onClick={cancelLogout}>
+              CANCEL
+            </button>
+            <button className="log-out_button" onClick={logout}>
+              LOG OUT
+            </button>
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
 }
 
-export default Navbar
+export default Navbar;

client/src/pages/home/Home.css

@@ -228,6 +228,13 @@
     background-color: var(--primary-color-dark);
 }
 
+.bg-blur {
+    opacity: 0.4;
+}
+
+.bg-opaque{
+    opacity: 1;
+
 .confirmation-btn{ 
     margin: unset;
     margin-left: 1rem;

client/src/pages/home/Home.jsx

@@ -16,7 +16,7 @@ import right_glass_triangle from '../../assets/images/right-glass-triangle.svg'
 import toast, { Toaster } from 'react-hot-toast';
 import Modal from '../../components/modal/Modal'
 
-function Home() {
+function Home({logoutModal}) {
   const userName = window.localStorage.getItem('userName');
   const navigate = useNavigate();
   const [files, setFiles] = useState([]);
@@ -116,8 +116,7 @@ function Home() {
   }
 
   return (
-    <motion.div className='Home' initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
+    <motion.div className={`Home ${logoutModal ? 'bg-blur':'bg-opaque'}`}
       transition={{ duration: 0.2 }}>
       <Toaster/>
       <img src={gradient_triangle} alt="" className='gradient-triangle' />