sign-up-bug

components/Layout.jsx

@@ -14,23 +14,23 @@ const Layout = ({ children }) => {
         <title>Picture and ToDo Manager</title>
       </Head>
 
-      <ToastContainer
-        theme="dark"
-        position="bottom-right"
-        limit={5}
-        draggablePercent={60}
-        autoClose={2000}
-        pauseOnFocusLoss={false}
-      />
-
       {isModelLoaded && (
         <div>
           <Navbar />
           {children}
           <ParticleBackground />
+
+          <ToastContainer
+            theme="dark"
+            position="bottom-right"
+            limit={5}
+            draggablePercent={60}
+            autoClose={2000}
+            pauseOnFocusLoss={false}
+          />
         </div>
       )}
-      
+
       {!isModelLoaded && (
         <div className=" h-screen flex flex-col justify-center items-center">
           <h1 className="text-5xl font-bold tracking-wide text-black ">
@@ -42,7 +42,10 @@ const Layout = ({ children }) => {
         </div>
       )}
 
-      <LoadModel isModelLoaded={isModelLoaded} setIsModelLoaded={setIsModelLoaded} />
+      <LoadModel
+        isModelLoaded={isModelLoaded}
+        setIsModelLoaded={setIsModelLoaded}
+      />
     </div>
   );
 };

components/sign-up/modal.jsx

@@ -13,7 +13,7 @@ import {
   waitToast,
   updateToast,
 } from "../../components/toast";
-import { toast } from "react-toastify";
+import {ToastContainer, toast } from "react-toastify";
 import { useRouter } from "next/router";
 
 const SignUpModal = ({ username, setUsername, modalIsOpen, setModalsOpen }) => {
@@ -75,10 +75,10 @@ const SignUpModal = ({ username, setUsername, modalIsOpen, setModalsOpen }) => {
 
         if (res.data.error.face) errorToast(res.data.error.face);
         else {
-          setToken(res.data.token);
-          setModalsOpen(false);
-          router.push("/");
-          sucsessToast("Signed-up");
+            setModalsOpen(false);
+            setToken(res.data.token);
+            router.push("/");
+            sucsessToast("Signed-up");
         }
       })
 
@@ -96,6 +96,7 @@ const SignUpModal = ({ username, setUsername, modalIsOpen, setModalsOpen }) => {
   };
 
   return (
+    <div>
     <div
       className={`sm:m-2 absolute top-28 bottom-0 left-0 right-0 flex justify-center items-center`}
     >
@@ -193,6 +194,7 @@ const SignUpModal = ({ username, setUsername, modalIsOpen, setModalsOpen }) => {
         </div>
       </div>
     </div>
+    </div>
   );
 };
 

pages/index.jsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import styles from "../styles/Home.module.css";
 import { useAuth } from "../context/auth";
 import axios from "../utils/axios";
+import {ToastContainer, toast } from "react-toastify";
 
 export default function Home() {
   const [user, setUser] = useState("");
@@ -10,8 +11,7 @@ export default function Home() {
 
   useEffect(() => {
 
-    if (token) {
-
+    const getUser = () =>{
       axios({
         url: "api/auth/profile",
         method: "GET",
@@ -27,14 +27,19 @@ export default function Home() {
         .catch(function (err) {
           // console.log(err);
         }); 
-
+    }
+
+    if (token) {
+      getUser()  
     }
 
   }, [token]);
+
 
   return (
-    <div className={styles.container}>
-      <div className={`${styles.main} flex justify-center items-center`}>
+    <div>
+
+      <div className={`${styles.main} m-2 flex justify-center items-center`}>
         <div
           className={`${styles.heading} text-center flex flex-col justify-center items-center`}
         >

styles/Home.module.css

@@ -1,3 +1,4 @@
 .main{
-  height: 84vh;
+  /* height: 84vh; */
+  border: 2px solid red;
 }

styles/sign-in/signin.module.css

@@ -1,5 +1,6 @@
 .above {
   height: 84vh;
+  border: 2px solid red;
 }
 .main {
   background-color: rgba(0, 0, 0, 0.6);

styles/signup/modalsignup.module.css

@@ -1,5 +1,6 @@
 .modal {
   background: rgba(0, 0, 0, 0.5);
+  border:  2px solid red;
 }
 
 .closeButton {