added signup and forget password in Login pages

grim-firefly · Nov 3, 2022 · 7a9d23f · 7a9d23f
1 parent 48e8c42
commit 7a9d23f
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 153 deletions.
diff --git a/illus1onctf/src/Common/Frontend/Login/Index.js b/illus1onctf/src/Common/Frontend/Login/Index.js
@@ -1,13 +1,24 @@
-import React from 'react';
+import React, { useState } from 'react';
 import Input from './../Common/Input/Index';
 import { TfiUser } from 'react-icons/tfi';
-import { RiLockPasswordLine } from 'react-icons/ri';
+import { RiLockPasswordLine, RiLockPasswordFill } from 'react-icons/ri';
+import { TfiEmail } from 'react-icons/tfi';
+
 import { FcGoogle } from 'react-icons/fc';
 import { BsFacebook, BsGithub } from 'react-icons/bs';
 import s from './style.module.css';
 import formlogo from './../../../Assets/Images/illus1onCTF.png';
 import { Link } from 'react-router-dom';
 const Login = () => {
+	const [signup, setSignup] = useState(false);
+	const [forgotPassword, setForgotPassword] = useState(false);
+	const changeLaout = () => {
+		setForgotPassword(false);
+		setSignup(!signup);
+	}
+	const changeForgotPassword = () => {
+		setForgotPassword(!forgotPassword);
+	}
 	return (
 		<div className='container'>
 			<div className='row mt-5'>
@@ -17,21 +28,31 @@ const Login = () => {
 					</div>
 					<form action="" method="post" className='' >
 						<div className='mb-3'>
-							<Input type="email" name="email" placeholder="username or email" icon={TfiUser} />
+							<Input type="text" name="username" placeholder={(!signup || forgotPassword) ? "username or email" : 'username'} icon={TfiUser} />
 						</div>
-						<div className='mb-3'>
+						{signup && <div className='mb-3'>
+							<Input type="email" name="email" placeholder="Email" icon={TfiEmail} />
+						</div>}
+						{!forgotPassword && <div className='mb-3'>
 							<Input type="password" name="password" placeholder="Password" icon={RiLockPasswordLine} />
 						</div>
-						<div className='d-flex justify-content-center '>
-							<button className='btn btn-primary px-5' >Login</button>
-
+						}
+						{signup && <div className='mb-3'>
+							<Input type="password" name="confim_password" placeholder="Confirm Password" icon={RiLockPasswordFill} />
 						</div>
-						<div className='d-flex flex-row-reverse mt-1'>
-							<Link className={`${s.fogotpassword}`}>Forgot Password ?</Link>
+						}
+
+						<div className='d-flex justify-content-center mb-3'>
+							<button className='btn btn-primary px-5' >{forgotPassword ?'Reset' :(signup ? 'Sign Up' : 'Login')}  </button>
+
 						</div>
 
+						{ (!signup && !forgotPassword) && <div className='d-flex flex-row-reverse'>
+							<Link className={`${s.fogotpassword}`} onClick={changeForgotPassword}>Forgot Password ?</Link>
+						</div>}
+
 					</form>
-					<div className='mt-2'>
+					<div className={`${(signup || forgotPassword) ? 'mt-4' : 'mt-2'}`}>
 						<p className={`${s.separator}`}><span className={`${s.separatortext}`}>OR</span></p>
 					</div>
 
@@ -41,7 +62,7 @@ const Login = () => {
 						<Link to="/" className={`${s.socialmedia}`}><BsGithub /> </Link>
 					</div>
 					<div className={`${s.reference}`}>
-						<p>Need an account ? <Link to='/signup' className={`${s.formFooterLink}`}>Sign Up</Link></p>
+						<p>{signup ? 'Already a User ?' : 'Need an account ?'} <button onClick={changeLaout} className={`${s.formFooterLink}`}>{signup ? 'Log In' : 'Sign Up'}</button></p>
 					</div>
 				</div>
 

diff --git a/illus1onctf/src/Common/Frontend/Login/style.module.css b/illus1onctf/src/Common/Frontend/Login/style.module.css
@@ -75,7 +75,9 @@
 	color: var(--bs-secondary);
 }
 .formFooterLink{
-	text-decoration: none;
+	background-color: transparent;
+	border: none;
+
 	color: var(--bs-primary);
 }
 .formFooterLink:hover{

diff --git a/illus1onctf/src/Common/Frontend/Signup/Index.js b/illus1onctf/src/Common/Frontend/Signup/Index.js
diff --git a/illus1onctf/src/Common/Frontend/Signup/style.module.css b/illus1onctf/src/Common/Frontend/Signup/style.module.css
diff --git a/illus1onctf/src/Routes/FrontendRoutes.js b/illus1onctf/src/Routes/FrontendRoutes.js
@@ -3,11 +3,9 @@ import { Route } from 'react-router-dom';
 import Home from './../Pages/Frontend/Home/Index';
 import About from './../Pages/Frontend/About/Index';
 import Login from './../Common/Frontend/Login/Index';
-import Signup from '../Common/Frontend/Signup/Index';
 export let FrontendRoutes = (
 	<Route path='/' element={<Home />}>
 		<Route path='about' element={<About />}/>
 		<Route path='login' element={<Login />}/>
-		<Route path='signup' element={<Signup />}/>
 	</Route>
 );