Merge pull request #194 from VishalGaurav01/main

Added Modal to Signout Button in Home and Navbar

client/package.json

@@ -15,8 +15,8 @@
     "@gsap/react": "^2.1.1",
     "axios": "^1.4.0",
     "d3": "^7.8.5",
-    "flowbite": "^1.7.0",
-    "flowbite-react": "^0.4.10",
+    "flowbite": "^1.8.1",
+    "flowbite-react": "^0.4.11",
     "framer-motion": "^10.16.4",
     "gsap": "^3.12.5",
     "locomotive-scroll": "^5.0.0-beta.12",

client/src/Components/Auth/Feature.jsx

@@ -23,8 +23,8 @@ export default function Feature() {
   })
   return (
     <div>
-      <section class="bg-white dark:bg-gray-900 min-h-screen">
-        <div class="container px-6 py-10 mx-auto features mx-auto">
+      <section class=" bg-gray-900 lg:pb-16">
+        <div class="container px-6 py-10 features mx-auto mt-0">
           <h1 class="text-3xl text-center font-sans text-gray-800 capitalize lg:text-4xl dark:text-white">
             explore our awesome {" "}
             <span class="underline decoration-white text-underline dark:text-primary-400 underline-offset-[10px] r-8">

client/src/Components/Navbar.jsx

@@ -3,6 +3,8 @@
 import React, { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import Cookies from "universal-cookie";
+import {Modal , Button} from "flowbite-react";
+import { HiOutlineExclamationCircle } from 'react-icons/hi';
 import axios from "axios";
 import { useContext } from "react";
 import { AuthContext } from "./Auth/AuthContext"; 
@@ -16,6 +18,7 @@ export default function Navbar() {
   const { token, isLoggedIn, logout } = useContext(AuthContext);
   const [username, setUsername] = useState("");
   const [openNav, setOpenNav] = useState(false);
+  const [showmodal, setModal] = useState(null);
 
   useEffect(() => {
     const fetchUser = async () => {
@@ -234,7 +237,9 @@ export default function Navbar() {
                       to="/"
                       className="block py-2 pl-3 pr-4 text-white bg-primary-700 rounded md:bg-transparent md:text-primary-700 md:p-0 md:dark:text-primary-400 dark:bg-primary-600 md:dark:bg-transparent"
                       aria-current="page"
-                      onClick={handleLogout}
+                      onClick={() => {
+                        setModal(true);
+                      }}
                     >
                       Logout
                     </Link>
@@ -290,6 +295,30 @@ export default function Navbar() {
           </div>
         </div>
       </nav>
+      <Modal
+        show={showmodal}
+        onClose={() => setModal(false)}
+        popup
+        size='md'
+      >
+        <Modal.Header />
+        <Modal.Body>
+          <div className='text-center'>
+            <HiOutlineExclamationCircle className='h-14 w-14 text-gray-400 dark:text-gray-200 mb-4 mx-auto' />
+            <h3 className='mb-5 text-lg text-gray-500 dark:text-gray-400'>
+              Are you sure you want to SignOut?
+            </h3>
+            <div className='flex justify-center gap-4'>
+              <Button color='failure' onClick={handleLogout}>
+                Yes, I'm sure
+              </Button>
+              <Button color='gray' onClick={() => setModal(false)}>
+                No, cancel
+              </Button>
+            </div>
+          </div>
+        </Modal.Body>
+      </Modal>
     </div>
   );
 }

client/src/Pages/Home.jsx

@@ -1,6 +1,8 @@
 import React, { useEffect, useState } from "react";
+import {Modal , Button} from "flowbite-react";
 import { useNavigate, Link } from "react-router-dom";
 import { useCookies } from "react-cookie";
+import { HiOutlineExclamationCircle } from 'react-icons/hi';
 import axios from "axios";
 import { useContext } from "react";
 import { AuthContext } from "../Components/Auth/AuthContext";
@@ -69,6 +71,7 @@ const Home = () => {
   const navigate = useNavigate();
 
   const [user, setUser] = useState(null);
+  const [showmodal, setModal] = useState(null);
   const [showStudentFunctionality, setShowStudentFunctionality] =
     useState(false);
   const [showSubjectFunctionality, setShowSubjectFunctionality] =
@@ -223,7 +226,7 @@ const Home = () => {
                   )}
                 </ul>
               </div>
-            </div>
+            </div> 
           ) : (
             <div>
               <h3 className="text-2xl text-white ml-6 mt-10 font-bold mb-2">
@@ -260,7 +263,9 @@ const Home = () => {
           </div>
           <button
             className="bg-red-400 text-white rounded px-4 py-2 mt-6"
-            onClick={handleLogout}
+            onClick={() => {
+                        setModal(true);
+                      }}
           >
             Logout
           </button>
@@ -270,6 +275,30 @@ const Home = () => {
         <img src="wlcmbg.png" className="w-full hidden md:block mr-36" />
       </div>
       <BackToTopButton />
+      <Modal
+        show={showmodal}
+        onClose={() => setModal(false)}
+        popup
+        size='md'
+      >
+        <Modal.Header />
+        <Modal.Body>
+          <div className='text-center'>
+            <HiOutlineExclamationCircle className='h-14 w-14 text-gray-400 dark:text-gray-200 mb-4 mx-auto' />
+            <h3 className='mb-5 text-lg text-gray-500 dark:text-gray-400'>
+              Are you sure you want to SignOut?
+            </h3>
+            <div className='flex justify-center gap-4'>
+              <Button color='failure' onClick={handleLogout}>
+                Yes, I'm sure
+              </Button>
+              <Button color='gray' onClick={() => setModal(false)}>
+                No, cancel
+              </Button>
+            </div>
+          </div>
+        </Modal.Body>
+      </Modal>
     </div>
   );
 };

client/src/Pages/HomePage.jsx

@@ -87,7 +87,7 @@ export default function Homepage() {
     <div className="min-h-screen">
       <Navbar></Navbar>
 
-      <section class="bg-white dark:bg-gray-900 min-h-screen">
+      <section class="bg-white dark:bg-gray-900 ">
 
         <div class="grid max-w-screen-xl px-4 py-8 mx-auto my-auto lg:gap-8 xl:gap-0 lg:py-16 lg:grid-cols-12">
           <div class="mr-auto place-self-center lg:col-span-7  home-section  ">
@@ -132,7 +132,7 @@ export default function Homepage() {
           </div>
         </div>
       </section>
-      <Feature></Feature>
+      <Feature/>
       <Stats />
 
       {/* ------------------------------- Newsletter section ------------------------------- */}
@@ -158,7 +158,7 @@ export default function Homepage() {
             <div className="flex flex-col lg:flex-row justify-between relative mb-3 w-full md:mr-3 md:mb-0">
               <input
                 type="text"
-                className="peer block min-h-[auto] w-full rounded border-2 mr-2 bg-transparent py-[0.32rem] px-3 leading-[2.15] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none text-neutral-200 placeholder:text-neutral-200 peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
+                className="peer block min-h-[auto] w-full rounded border-2 mr-2 mb-5 bg-transparent py-[0.32rem] px-3 leading-[2.15] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none text-neutral-200 placeholder:text-neutral-200 peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
                 id="emailInput"
                 placeholder={placeHolder ? "" : "Enter your email"}
                 onFocus={() => setPlaceHolder(false)}

client/tailwind.config.js

@@ -4,6 +4,8 @@ export default {
     "./index.html",
     "./src/**/*.{js,ts,jsx,tsx}",
     "node_modules/flowbite-react/**/*.{js,jsx,ts,tsx}",
+    'node_modules/flowbite-react/lib/esm/**/*.js'
+
   ],
   theme: {
     extend: {