diff --git a/frontend/components/Login/Login.jsx b/frontend/components/Login/Login.jsx
index f41bfb8..d1dbb78 100644
--- a/frontend/components/Login/Login.jsx
+++ b/frontend/components/Login/Login.jsx
@@ -9,6 +9,9 @@ import Link from 'next/link'
import { useContext } from 'react'
import { useRouter } from 'next/router'
+import {PopupMain} from "../Pop_up/Popup.jsx"
+import style from "../../styles/popup_style.module.css"
+
function Login() {
const router = useRouter()
const user = useContext(UserContext)
@@ -24,18 +27,31 @@ function Login() {
setUserData({ ...userData, [name]: value })
}
- const handleLogin = (evt) => {
+ const handleLogin =async (evt) => {
evt.preventDefault()
- user.login(userData)
+ await user.login(userData)
+ user.popupHandler(true)
}
// disable submit button is any input has not been filled
const disabledSubmitBtn = Object.values(userData).some((val) => val === '')
if (user.user) {
- router.push('/dashboard')
+
+ setTimeout(() => {
+ router.push('/dashboard')
+ }, 4400);
}
- return (
+ return <>
+
+
+ {
+ (user.showPopUp) ? (user.user) ?
:
+
: ""
+ }
+
+
+
- )
+ >
+
}
export default Login
diff --git a/frontend/components/Pop_up/Popup.jsx b/frontend/components/Pop_up/Popup.jsx
new file mode 100644
index 0000000..6f30b9b
--- /dev/null
+++ b/frontend/components/Pop_up/Popup.jsx
@@ -0,0 +1,59 @@
+
+import style from "../../styles/popup_style.module.css"
+import { useRef,useState,useEffect,useCallback,useContext } from "react"
+import UserAuth from '../../helpers/user/usercontext'
+
+
+export const PopupMain = ({message,mode})=>{
+
+ const context = useContext(UserAuth)
+ const containerRef = useRef()
+
+ //* a state to trigger the exit animation for popup
+ const [unmount,setUnmount] = useState(false)
+
+
+ const cb = useCallback(()=>{
+
+ setTimeout(() => {
+ setUnmount(true)
+
+ }, 3500)
+
+ if(unmount){
+ const className = containerRef.current?.classList[0];
+ const cont = document.querySelector(`.${className}`)
+ cont.classList.add(`${style["container-exit"]}`)
+
+ setTimeout(() => {
+
+ //* No popup active currently
+ context.popupHandler(false)
+ // containerRef.current.remove()
+ },2000);
+ }
+
+ },[unmount])
+
+ useEffect(()=>{
+ cb()
+
+
+ },[cb])
+
+ return <>
+
+
+
+ {(mode == "accept")? :}
+
{message}
+
+
+
+
+
+
+
+
+ >
+}
\ No newline at end of file
diff --git a/frontend/components/Reg/Reg.jsx b/frontend/components/Reg/Reg.jsx
index e08d9b6..21c9995 100644
--- a/frontend/components/Reg/Reg.jsx
+++ b/frontend/components/Reg/Reg.jsx
@@ -6,6 +6,8 @@ import { useState, useContext } from 'react'
import { Link } from '@mui/material'
import UserAuth from 'helpers/user/usercontext'
import { useRouter } from 'next/router'
+import {PopupMain} from "../Pop_up/Popup.jsx"
+import style from "../../styles/popup_style.module.css"
function Reg() {
const router = useRouter()
@@ -16,25 +18,39 @@ function Reg() {
password: '',
repassword: '',
})
+
const handleInput = (event) => {
const name = event.target.name
const value = event.target.value
setUserData({ ...userData, [name]: value })
}
- const handleSubmit = (e) => {
+ const handleSubmit = async (e) => {
e.preventDefault()
setUserData(userData)
- context.createAcc(userData)
+ await context.createAcc(userData)
+ context.popupHandler(true) //* state change to spwan a popUp
}
// disable submit button is any input has not been filled
const disabledSubmitBtn = Object.values(userData).some((val) => val === '')
- if (context.user) {
- router.push('/dashboard')
+ if (context.user ) {
+
+ setTimeout(() => {
+ router.push('/dashboard')
+ }, 4400);
}
- return (
+ return <>
+
+
+ {
+ (context.showPopUp) ? (context.user) ?
:
+
: ""
+ }
+
+
+
- )
+
+ >
+
+
}
export default Reg
diff --git a/frontend/helpers/user/userState.js b/frontend/helpers/user/userState.js
index a48f974..aba899d 100644
--- a/frontend/helpers/user/userState.js
+++ b/frontend/helpers/user/userState.js
@@ -32,6 +32,12 @@ const UserAuthProvider = ({ children }) => {
const [mode,setMode] = useState('light')
const [user, setUser] = useState(null)
const [jwt, setJwt] = useState(null)
+ const [showPopUp,setPopUp] = useState(false)
+
+ const popupHandler = (bool)=>{
+ setPopUp(bool)
+ }
+
const login = async ({ email, password }) => {
let login = true
await axios
@@ -95,7 +101,7 @@ const UserAuthProvider = ({ children }) => {
setJwt(null)
storeJWT(null)
}
- const context = { jwt, user, mode, login, logout, createAcc, handleLightMode, handleDarkMode,fetchUser }
+ const context = { jwt, user, mode, login, logout, createAcc, handleLightMode, handleDarkMode,fetchUser,popupHandler,showPopUp }
useEffect(() => {
let jwt = fetchJWT()
if (jwt) {
diff --git a/frontend/pages/_app.js b/frontend/pages/_app.js
index 314a53e..b14770a 100644
--- a/frontend/pages/_app.js
+++ b/frontend/pages/_app.js
@@ -3,17 +3,23 @@ import '../styles/logostyles.css'
import '../styles/formStyles.css'
import '../styles/index.css'
import '../styles/404.css'
+
import UserAuthProvider from 'helpers/user/userState'
import Page from 'react-page-loading'
function MyApp({ Component, pageProps }) {
- return (
+ return <>
+
- )
+
+
+ >
+
+
}
export default MyApp
diff --git a/frontend/pages/signup.js b/frontend/pages/signup.js
index eccecee..d270450 100644
--- a/frontend/pages/signup.js
+++ b/frontend/pages/signup.js
@@ -8,11 +8,14 @@ import UserAuth, { UserContext } from '../helpers/user/usercontext'
export default function signup() {
const { mode } = useContext(UserAuth)
- return (
-
-
-
-
-
- )
+ return <>
+
+
+
+
+
+
+
+
+ >
}
diff --git a/frontend/styles/popup_style.module.css b/frontend/styles/popup_style.module.css
new file mode 100644
index 0000000..a7e66b8
--- /dev/null
+++ b/frontend/styles/popup_style.module.css
@@ -0,0 +1,85 @@
+.container-modal-main{
+
+ width: 20em;
+ position: absolute;
+ right: 0;
+ display: flex;
+ flex-direction: column-reverse;
+ justify-content: flex-start;
+ gap: 0.7em;
+ height: 100%;
+
+ z-index: 2;
+}
+.container{
+ width: 19em;
+ height: 3.9em;
+ box-shadow: -3px 0px 15px rgba(0, 0, 0, 0.459);
+ background: white;
+ /* left: 76%; */
+ transform: translateX(105%);
+ /* display: none; */
+ overflow: hidden;
+ animation: container 400ms ease-out 1 forwards ;
+ margin-bottom: 0.9em;
+}
+@keyframes container{
+ 25%{
+
+ transform: translateX(-1.5%);
+ }
+ 50%{
+ transform: translateX(-3%);
+ }
+ 100%{
+
+ transform: translateX(-1.5%);
+ }
+
+}
+.container.container-exit{
+
+ transform: translateX(-1.5%);
+ animation: container-exit 400ms ease-out 1 forwards ;
+
+}
+@keyframes container-exit{
+
+ 50%{
+ transform: translateX(-3%);
+ }
+ 100%{
+
+ transform: translateX(108%);
+ }
+
+}
+.container .text-container{
+
+ padding: 0.9em 0.65em;
+ font-size: 1.2em;
+ font-family: sans-serif;
+
+ align-items: center;
+ display: flex;
+ gap: 0.6em;
+}
+.container .text-container ion-icon{
+ transform: translate(0);
+ font-size:1.2em;
+}
+.loading-bar{
+ background: rgb(222, 146, 4);
+ height: calc(3.5em - 2em);
+ transform-origin: left;
+ transform: scaleX(1);
+ animation: loading 3s 100ms linear 1 forwards ;
+}
+
+@keyframes loading{
+
+ 100%{
+ transform: scaleX(0);
+ }
+
+}
\ No newline at end of file