import React, { useState } from 'react'
const LoginPage = () => {
const [isLogin, setIsLogin] = useState(true);
const [isSignUp, setIsSignUp] = useState(true);
const [isAdmin, setIsAdmin] = useState(true);
// const [loginEmail, setLoginEmail] = useState("");
// const [loginPassword, setLoginPassword] = useState("");
// const [registerEmail, setRegisterEmail] = useState("");
// const [registerPassword, setRegisterPassword] = useState("");
// const [registerName, setRegisterName] = useState("");
const LoginForm = () => {
return (
<div className="bg-white rounded-2xl shadow-2xl flex flex-col w-full md:w-1/3 items-center max-w-4xl transition duration-1000 ease-out">
<h2 className='p-3 text-3xl font-bold text-pink-400'>Jupiter Review Hub</h2>
<div className="inline-block border-[1px] justify-center w-20 border-blue-400 border-solid"></div>
<h3 className='text-xl font-semibold text-blue-400 pt-2'>Log in</h3>
{/* Inputs */}
<div className='flex flex-col items-center justify-center'>
<input type='email' className='rounded-2xl px-2 py-1 w-4/5 text-blue-500 md:w-full border-[1px] border-blue-400 m-1 focus:shadow-md focus:border-pink-400 focus:outline-none focus:ring-0' placeholder='Email'></input>
<input type="password" className='rounded-2xl px-2 py-1 w-4/5 text-blue-500 md:w-full border-[1px] border-blue-400 m-1 focus:shadow-md focus:border-pink-400 focus:outline-none focus:ring-0' placeholder='Password'></input>
<button className='rounded-2xl m-2 text-white bg-blue-400 w-2/5 px-4 py-2 shadow-md hover:text-blue-400 hover:bg-white transition duration-200 ease-in'>
Log in
</button>
</div>
<div className="inline-block border-[1px] justify-center w-20 border-blue-400 border-solid"></div>
<p className='text-blue-400 mt-4 text-sm'>Don't have an account?</p>
<p className='text-blue-400 mb-4 text-sm font-medium cursor-pointer' onClick={() => setIsLogin(false) && setIsSignUp(true)}>Register here</p>
<p className='text-blue-400 mt-4 text-sm'>OR</p>
<p className='text-blue-400 mb-4 text-sm font-medium cursor-pointer' onClick={() => setIsLogin(false) && setIsAdmin(true) && setIsSignUp(false) }>Login as an Admin</p>
</div>
)
}
const SignUpForm = () => {
return (
<div className="bg-blue-400 text-white rounded-2xl shadow-2xl flex flex-col w-full md:w-1/3 items-center max-w-4xl transition duration-1000 ease-in">
<h2 className='p-3 text-3xl font-bold text-white'>Jupiter Review Hub</h2>
<div className="inline-block border-[1px] justify-center w-20 border-white border-solid"></div>
<h3 className='text-xl font-semibold text-white pt-2'>Create account</h3>
{/* Inputs */}
<div className='flex flex-col items-center justify-center mt-2'>
<input type="text" className='rounded-2xl px-2 py-1 w-4/5 text-blue-500 md:w-full border-[1px] border-blue-400 m-1 focus:shadow-md focus:border-pink-400 focus:outline-none focus:ring-0' placeholder='Name'></input>
<input type='email' className='rounded-2xl px-2 py-1 w-4/5 text-blue-500 md:w-full border-[1px] border-blue-400 m-1 focus:shadow-md focus:border-pink-400 focus:outline-none focus:ring-0' placeholder='Email'></input>
<input type="password" className='rounded-2xl px-2 py-1 w-4/5 text-blue-500 md:w-full border-[1px] border-blue-400 m-1 focus:shadow-md focus:border-pink-400 focus:outline-none focus:ring-0' placeholder='Password'></input>
<button className='rounded-2xl m-4 text-blue-400 bg-white w-3/5 px-4 py-2 shadow-md hover:text-white hover:bg-blue-400 transition duration-200 ease-in'>
Register
</button>
</div>
<div className="inline-block border-[1px] justify-center w-20 border-white border-solid"></div>
<p className='text-white mt-4 text-sm'>Already have an account?</p>
<p className='text-white mb-4 text-sm font-medium cursor-pointer' onClick={() => setIsLogin(true)}>Click here to Log in</p>
</div>
)
}
const AdminLoginForm = () => {
return (
<div className="bg-white rounded-2xl shadow-2xl flex flex-col w-full md:w-1/3 items-center max-w-4xl transition duration-1000 ease-out">
<h2 className='p-3 text-3xl font-bold text-pink-400'>Jupiter Review Hub</h2>
<div className="inline-block border-[1px] justify-center w-20 border-blue-400 border-solid"></div>
<h3 className='text-xl font-semibold text-blue-400 pt-2'>Admin Log in</h3>
{/* Inputs */}
<div className='flex flex-col items-center justify-center'>
<input type='email' className='rounded-2xl px-2 py-1 w-4/5 text-blue-500 md:w-full border-[1px] border-blue-400 m-1 focus:shadow-md focus:border-pink-400 focus:outline-none focus:ring-0' placeholder='Email'></input>
<input type="password" className='rounded-2xl px-2 py-1 w-4/5 text-blue-500 md:w-full border-[1px] border-blue-400 m-1 focus:shadow-md focus:border-pink-400 focus:outline-none focus:ring-0' placeholder='Password'></input>
<button className='rounded-2xl m-2 text-white bg-blue-400 w-2/5 px-4 py-2 shadow-md hover:text-blue-400 hover:bg-white transition duration-200 ease-in'>
Log in
</button>
</div>
<div className="inline-block border-[1px] justify-center w-20 border-blue-400 border-solid"></div>
<p className='text-blue-400 mt-4 text-sm'>Don't have an account?</p>
<p className='text-blue-400 mb-4 text-sm font-medium cursor-pointer' onClick={() => setIsAdmin(false) && setIsLogin(false) && setIsSignUp(true)}>Register here</p>
</div>
)
}
return (
<div className="bg-gray-100 flex flex-col items-center justify-center min-h-screen md:py-2">
<main className="flex items-center w-full px-2 md:px-20">
<div className="hidden md:inline-flex flex-col flex-1 space-y-1">
<p className='text-6xl text-blue-500 font-bold'>Jupiter Review Hub</p>
<p className='font-medium text-lg leading-1 text-pink-400'>Your voice matters - Rate your Jupiter hostel stay with | Jupiter Review Hub |</p>
</div>
{/* {isLogin && <LoginForm />}
{isAdmin && <AdminLoginForm />}
{isSignUp && <SignUpForm />} */}
{
isLogin ? (
<LoginForm />
) : (
isSignUp ? (
<SignUpForm />
) : (
isAdmin ? (
<AdminLoginForm />
) : null
)
)
}
</main>
</div>
)
}
export default LoginPage
In this code when i try to "Login as admin" it going to Signup page...and no errors showing on, can anyone please help me with this, coz im stuck with this issue for two days.
The below code works, but you should not use p elements for clicking. Using a or button would be better.
import React, {useState} from 'react'
const signupStates = {
login: "login",
signup: "signup",
adminLogin: "adminLogin"
}
const LoginPage = () => {
const [signupState, setSignupState] = useState(signupStates.login);
const LoginForm = () => {
return (
<div className="bg-white rounded-2xl shadow-2xl flex flex-col w-full md:w-1/3 items-center max-w-4xl transition duration-1000 ease-out">
<h2 className='p-3 text-3xl font-bold text-pink-400'>Jupiter Review Hub</h2>
<div className="inline-block border-[1px] justify-center w-20 border-blue-400 border-solid"></div>
<h3 className='text-xl font-semibold text-blue-400 pt-2'>Log in</h3>
{/* Inputs */}
<div className='flex flex-col items-center justify-center'>
<input type='email' className='rounded-2xl px-2 py-1 w-4/5 text-blue-500 md:w-full border-[1px] border-blue-400 m-1 focus:shadow-md focus:border-pink-400 focus:outline-none focus:ring-0' placeholder='Email'></input>
<input type="password" className='rounded-2xl px-2 py-1 w-4/5 text-blue-500 md:w-full border-[1px] border-blue-400 m-1 focus:shadow-md focus:border-pink-400 focus:outline-none focus:ring-0' placeholder='Password'></input>
<button className='rounded-2xl m-2 text-white bg-blue-400 w-2/5 px-4 py-2 shadow-md hover:text-blue-400 hover:bg-white transition duration-200 ease-in'>
Log in
</button>
</div>
<div className="inline-block border-[1px] justify-center w-20 border-blue-400 border-solid"></div>
<p className='text-blue-400 mt-4 text-sm'>Don't have an account?</p>
<p className='text-blue-400 mb-4 text-sm font-medium cursor-pointer' onClick={() => setSignupState(signupStates.signup)}>Register here</p>
<p className='text-blue-400 mt-4 text-sm'>OR</p>
<p className='text-blue-400 mb-4 text-sm font-medium cursor-pointer' onClick={() => setSignupState(signupStates.adminLogin)}>Login as an Admin</p>
</div>
)
}
const SignUpForm = () => {
return (
<div className="bg-blue-400 text-white rounded-2xl shadow-2xl flex flex-col w-full md:w-1/3 items-center max-w-4xl transition duration-1000 ease-in">
<h2 className='p-3 text-3xl font-bold text-white'>Jupiter Review Hub</h2>
<div className="inline-block border-[1px] justify-center w-20 border-white border-solid"></div>
<h3 className='text-xl font-semibold text-white pt-2'>Create account</h3>
{/* Inputs */}
<div className='flex flex-col items-center justify-center mt-2'>
<input type="text" className='rounded-2xl px-2 py-1 w-4/5 text-blue-500 md:w-full border-[1px] border-blue-400 m-1 focus:shadow-md focus:border-pink-400 focus:outline-none focus:ring-0' placeholder='Name'></input>
<input type='email' className='rounded-2xl px-2 py-1 w-4/5 text-blue-500 md:w-full border-[1px] border-blue-400 m-1 focus:shadow-md focus:border-pink-400 focus:outline-none focus:ring-0' placeholder='Email'></input>
<input type="password" className='rounded-2xl px-2 py-1 w-4/5 text-blue-500 md:w-full border-[1px] border-blue-400 m-1 focus:shadow-md focus:border-pink-400 focus:outline-none focus:ring-0' placeholder='Password'></input>
<button className='rounded-2xl m-4 text-blue-400 bg-white w-3/5 px-4 py-2 shadow-md hover:text-white hover:bg-blue-400 transition duration-200 ease-in'>
Register
</button>
</div>
<div className="inline-block border-[1px] justify-center w-20 border-white border-solid"></div>
<p className='text-white mt-4 text-sm'>Already have an account?</p>
<p className='text-white mb-4 text-sm font-medium cursor-pointer' onClick={() => setSignupState(signupStates.login)}>Click here to Log in</p>
</div>
)
}
const AdminLoginForm = () => {
return (
<div className="bg-white rounded-2xl shadow-2xl flex flex-col w-full md:w-1/3 items-center max-w-4xl transition duration-1000 ease-out">
<h2 className='p-3 text-3xl font-bold text-pink-400'>Jupiter Review Hub</h2>
<div className="inline-block border-[1px] justify-center w-20 border-blue-400 border-solid"></div>
<h3 className='text-xl font-semibold text-blue-400 pt-2'>Admin Log in</h3>
{/* Inputs */}
<div className='flex flex-col items-center justify-center'>
<input type='email' className='rounded-2xl px-2 py-1 w-4/5 text-blue-500 md:w-full border-[1px] border-blue-400 m-1 focus:shadow-md focus:border-pink-400 focus:outline-none focus:ring-0' placeholder='Email'></input>
<input type="password" className='rounded-2xl px-2 py-1 w-4/5 text-blue-500 md:w-full border-[1px] border-blue-400 m-1 focus:shadow-md focus:border-pink-400 focus:outline-none focus:ring-0' placeholder='Password'></input>
<button className='rounded-2xl m-2 text-white bg-blue-400 w-2/5 px-4 py-2 shadow-md hover:text-blue-400 hover:bg-white transition duration-200 ease-in'>
Log in
</button>
</div>
<div className="inline-block border-[1px] justify-center w-20 border-blue-400 border-solid"></div>
<p className='text-blue-400 mt-4 text-sm'>Don't have an account?</p>
<p className='text-blue-400 mb-4 text-sm font-medium cursor-pointer' onClick={() => setSignupState(signupStates.signup)}>Register here</p>
</div>
)
}
const UserAuth = () => {
if (signupState === signupStates.login) {
return <LoginForm />
}
if (signupState === signupStates.signup) {
return <SignUpForm />
}
if (signupState === signupStates.adminLogin) {
return <AdminLoginForm />
}
return null;
}
return (
<div className="bg-gray-100 flex flex-col items-center justify-center min-h-screen md:py-2">
<main className="flex items-center w-full px-2 md:px-20">
<div className="hidden md:inline-flex flex-col flex-1 space-y-1">
<p className='text-6xl text-blue-500 font-bold'>Jupiter Review Hub</p>
<p className='font-medium text-lg leading-1 text-pink-400'>Your voice matters - Rate your Jupiter hostel stay with | Jupiter Review Hub |</p>
</div>
<UserAuth />
</main>
</div>
)
}
export default LoginPage