added Popup modal for login and signup page (#155)
This commit is contained in:
parent
ef76047a10
commit
1b2006edcb
|
@ -9,6 +9,9 @@ import Link from 'next/link'
|
||||||
import { useContext } from 'react'
|
import { useContext } from 'react'
|
||||||
import { useRouter } from 'next/router'
|
import { useRouter } from 'next/router'
|
||||||
|
|
||||||
|
import {PopupMain} from "../Pop_up/Popup.jsx"
|
||||||
|
import style from "../../styles/popup_style.module.css"
|
||||||
|
|
||||||
function Login() {
|
function Login() {
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const user = useContext(UserContext)
|
const user = useContext(UserContext)
|
||||||
|
@ -24,18 +27,31 @@ function Login() {
|
||||||
setUserData({ ...userData, [name]: value })
|
setUserData({ ...userData, [name]: value })
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleLogin = (evt) => {
|
const handleLogin =async (evt) => {
|
||||||
evt.preventDefault()
|
evt.preventDefault()
|
||||||
user.login(userData)
|
await user.login(userData)
|
||||||
|
user.popupHandler(true)
|
||||||
}
|
}
|
||||||
|
|
||||||
// disable submit button is any input has not been filled
|
// disable submit button is any input has not been filled
|
||||||
const disabledSubmitBtn = Object.values(userData).some((val) => val === '')
|
const disabledSubmitBtn = Object.values(userData).some((val) => val === '')
|
||||||
|
|
||||||
if (user.user) {
|
if (user.user) {
|
||||||
router.push('/dashboard')
|
|
||||||
|
setTimeout(() => {
|
||||||
|
router.push('/dashboard')
|
||||||
|
}, 4400);
|
||||||
}
|
}
|
||||||
return (
|
return <>
|
||||||
|
|
||||||
|
<div className={style["container-modal-main"]}>
|
||||||
|
{
|
||||||
|
(user.showPopUp) ? (user.user) ? <PopupMain message="Successfully Logged In" mode="accept" /> :
|
||||||
|
<PopupMain message="Invalid Credentials" mode="error" /> : ""
|
||||||
|
}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
<LoginStyle>
|
<LoginStyle>
|
||||||
<form className="form-wrapper" onSubmit={handleLogin}>
|
<form className="form-wrapper" onSubmit={handleLogin}>
|
||||||
<p className="reg-title">Sign in</p>
|
<p className="reg-title">Sign in</p>
|
||||||
|
@ -88,6 +104,7 @@ function Login() {
|
||||||
</p>
|
</p>
|
||||||
</form>
|
</form>
|
||||||
</LoginStyle>
|
</LoginStyle>
|
||||||
)
|
</>
|
||||||
|
|
||||||
}
|
}
|
||||||
export default Login
|
export default Login
|
||||||
|
|
|
@ -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 <>
|
||||||
|
|
||||||
|
<div className={style["container"]} ref={containerRef}>
|
||||||
|
<div className={style["text-container"]} style={{color:(mode== "accept")?"green":"red"}}>
|
||||||
|
{(mode == "accept")?<ion-icon name="checkmark-circle-outline" ></ion-icon> :<ion-icon name="alert-circle-outline" ></ion-icon>}
|
||||||
|
<h4>{message}</h4>
|
||||||
|
</div>
|
||||||
|
<div className={style["loading-bar"]}></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</>
|
||||||
|
}
|
|
@ -6,6 +6,8 @@ import { useState, useContext } from 'react'
|
||||||
import { Link } from '@mui/material'
|
import { Link } from '@mui/material'
|
||||||
import UserAuth from 'helpers/user/usercontext'
|
import UserAuth from 'helpers/user/usercontext'
|
||||||
import { useRouter } from 'next/router'
|
import { useRouter } from 'next/router'
|
||||||
|
import {PopupMain} from "../Pop_up/Popup.jsx"
|
||||||
|
import style from "../../styles/popup_style.module.css"
|
||||||
|
|
||||||
function Reg() {
|
function Reg() {
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
@ -16,25 +18,39 @@ function Reg() {
|
||||||
password: '',
|
password: '',
|
||||||
repassword: '',
|
repassword: '',
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
const handleInput = (event) => {
|
const handleInput = (event) => {
|
||||||
const name = event.target.name
|
const name = event.target.name
|
||||||
const value = event.target.value
|
const value = event.target.value
|
||||||
setUserData({ ...userData, [name]: value })
|
setUserData({ ...userData, [name]: value })
|
||||||
}
|
}
|
||||||
const handleSubmit = (e) => {
|
const handleSubmit = async (e) => {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
setUserData(userData)
|
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
|
// disable submit button is any input has not been filled
|
||||||
const disabledSubmitBtn = Object.values(userData).some((val) => val === '')
|
const disabledSubmitBtn = Object.values(userData).some((val) => val === '')
|
||||||
|
|
||||||
if (context.user) {
|
if (context.user ) {
|
||||||
router.push('/dashboard')
|
|
||||||
|
setTimeout(() => {
|
||||||
|
router.push('/dashboard')
|
||||||
|
}, 4400);
|
||||||
}
|
}
|
||||||
return (
|
return <>
|
||||||
|
|
||||||
|
<div className={style["container-modal-main"]}>
|
||||||
|
{
|
||||||
|
(context.showPopUp) ? (context.user) ? <PopupMain message="Successfully Registered" mode="accept" /> :
|
||||||
|
<PopupMain message="Invalid Credentials" mode="error" /> : ""
|
||||||
|
}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
<RegStyle>
|
<RegStyle>
|
||||||
<form onSubmit={handleSubmit} className="form-wrapper">
|
<form onSubmit={handleSubmit} className="form-wrapper">
|
||||||
<p className="reg-title">Sign Up</p>
|
<p className="reg-title">Sign Up</p>
|
||||||
|
@ -115,6 +131,9 @@ function Reg() {
|
||||||
</p>
|
</p>
|
||||||
</form>
|
</form>
|
||||||
</RegStyle>
|
</RegStyle>
|
||||||
)
|
|
||||||
|
</>
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
export default Reg
|
export default Reg
|
||||||
|
|
|
@ -32,6 +32,12 @@ const UserAuthProvider = ({ children }) => {
|
||||||
const [mode,setMode] = useState('light')
|
const [mode,setMode] = useState('light')
|
||||||
const [user, setUser] = useState(null)
|
const [user, setUser] = useState(null)
|
||||||
const [jwt, setJwt] = useState(null)
|
const [jwt, setJwt] = useState(null)
|
||||||
|
const [showPopUp,setPopUp] = useState(false)
|
||||||
|
|
||||||
|
const popupHandler = (bool)=>{
|
||||||
|
setPopUp(bool)
|
||||||
|
}
|
||||||
|
|
||||||
const login = async ({ email, password }) => {
|
const login = async ({ email, password }) => {
|
||||||
let login = true
|
let login = true
|
||||||
await axios
|
await axios
|
||||||
|
@ -95,7 +101,7 @@ const UserAuthProvider = ({ children }) => {
|
||||||
setJwt(null)
|
setJwt(null)
|
||||||
storeJWT(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(() => {
|
useEffect(() => {
|
||||||
let jwt = fetchJWT()
|
let jwt = fetchJWT()
|
||||||
if (jwt) {
|
if (jwt) {
|
||||||
|
|
|
@ -3,17 +3,23 @@ import '../styles/logostyles.css'
|
||||||
import '../styles/formStyles.css'
|
import '../styles/formStyles.css'
|
||||||
import '../styles/index.css'
|
import '../styles/index.css'
|
||||||
import '../styles/404.css'
|
import '../styles/404.css'
|
||||||
|
|
||||||
import UserAuthProvider from 'helpers/user/userState'
|
import UserAuthProvider from 'helpers/user/userState'
|
||||||
import Page from 'react-page-loading'
|
import Page from 'react-page-loading'
|
||||||
|
|
||||||
function MyApp({ Component, pageProps }) {
|
function MyApp({ Component, pageProps }) {
|
||||||
return (
|
return <>
|
||||||
<UserAuthProvider>
|
<UserAuthProvider>
|
||||||
<Page loader={'bar'} color={'#03b1fc'} size={10}>
|
<Page loader={'bar'} color={'#03b1fc'} size={10}>
|
||||||
<Component {...pageProps} />
|
<Component {...pageProps} />
|
||||||
</Page>
|
</Page>
|
||||||
|
|
||||||
</UserAuthProvider>
|
</UserAuthProvider>
|
||||||
)
|
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
|
||||||
|
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
|
||||||
|
</>
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default MyApp
|
export default MyApp
|
||||||
|
|
|
@ -8,11 +8,14 @@ import UserAuth, { UserContext } from '../helpers/user/usercontext'
|
||||||
|
|
||||||
export default function signup() {
|
export default function signup() {
|
||||||
const { mode } = useContext(UserAuth)
|
const { mode } = useContext(UserAuth)
|
||||||
return (
|
return <>
|
||||||
<div className={mode == 'light' ? 'flex-column' : 'dark-bg'}>
|
|
||||||
<NavBar />
|
<div className={mode == 'light' ? 'flex-column' : 'dark-bg'}>
|
||||||
<Reg />
|
<NavBar />
|
||||||
<Footer />
|
<Reg />
|
||||||
</div>
|
<Footer />
|
||||||
)
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</>
|
||||||
}
|
}
|
||||||
|
|
|
@ -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);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
Loading…
Reference in New Issue