mirror of https://github.com/arc53/DocsGPT
Merge pull request #799 from Hemant2335/Demo
Creating a Seprate Page for Signup and Signinfeature/login-menu
commit
02b28cb212
@ -0,0 +1,66 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import DocsGPT3 from '../assets/cute_docsgpt3.svg';
|
||||||
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
export default function ForgotPass() {
|
||||||
|
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
|
||||||
|
e.preventDefault();
|
||||||
|
console.log('login');
|
||||||
|
};
|
||||||
|
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="z-30 flex h-full min-h-screen w-full items-center justify-center bg-[#1D1D1D]">
|
||||||
|
<div className=" flex flex-col items-center px-[5vw] md:w-fit md:p-0">
|
||||||
|
<div className=" cursor-pointer" onClick={() => navigate('/')}>
|
||||||
|
<img src={DocsGPT3} alt="Logo" className="h-[10vh]" />
|
||||||
|
</div>
|
||||||
|
<div className="font-bold md:flex md:gap-2 ">
|
||||||
|
<h1 className="text-white">Log in to </h1>
|
||||||
|
<h1 className="bg-gradient-to-r from-[#56B3CB] via-[#CD2AA0] to-[#EA635C] bg-clip-text text-transparent">
|
||||||
|
DocsGPT
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
<form
|
||||||
|
onSubmit={handleSubmit}
|
||||||
|
className="flex w-full flex-col gap-[3vh] rounded-2xl border-2 border-[#383838] bg-[#222222] py-[2vh] px-[5vh] text-white md:w-fit"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<h1 className=" text-xl font-semibold">Password reset</h1>
|
||||||
|
<p className="text-md font-semibold text-[#888888] md:max-w-[25vw]">
|
||||||
|
Enter the email address associated with your account and we will
|
||||||
|
send you a link to reset your password.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
name="Name"
|
||||||
|
placeholder="Email"
|
||||||
|
className="w-full rounded-lg border-none bg-[#2B2B2B] p-4 text-sm font-medium text-white focus:outline-none "
|
||||||
|
// onChange={onchange}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<button
|
||||||
|
className="h-[7vh] rounded-lg bg-[#7D54D1] text-sm font-medium text-white hover:bg-[#8A62DC]"
|
||||||
|
onClick={() => {
|
||||||
|
navigate('/ResetPassword');
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Request password reset
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
<div className="mt-[2vh] flex w-full justify-center text-sm">
|
||||||
|
<h2 className="gap-1 text-right text-[#5F5F5F] md:flex">
|
||||||
|
Don't have an account?
|
||||||
|
<h2
|
||||||
|
className="text-center font-medium text-white hover:cursor-pointer hover:underline"
|
||||||
|
onClick={() => navigate('/register')}
|
||||||
|
>
|
||||||
|
Sign up
|
||||||
|
</h2>
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
@ -0,0 +1,173 @@
|
|||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import DocsGPT3 from '../assets/cute_docsgpt3.svg';
|
||||||
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
import { IoEye } from 'react-icons/io5';
|
||||||
|
import { IoMdEyeOff } from 'react-icons/io';
|
||||||
|
export default function Login() {
|
||||||
|
const [showalert, setshowalert] = useState<string>('');
|
||||||
|
const [email, setemail] = useState('');
|
||||||
|
const [password, setpassword] = useState('');
|
||||||
|
const [isVisible, setisVisible] = useState(false);
|
||||||
|
const [ispasswordVisible, setispasswordVisible] = useState(false);
|
||||||
|
|
||||||
|
const handleSubmit = () => {
|
||||||
|
//email validation
|
||||||
|
if (email.length === 0 || password.length === 0) {
|
||||||
|
if (password.length === 0) {
|
||||||
|
setshowalert('Password is required');
|
||||||
|
return;
|
||||||
|
} else {
|
||||||
|
setshowalert('Email is required');
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
} else {
|
||||||
|
setshowalert('');
|
||||||
|
}
|
||||||
|
if (password.length === 0) {
|
||||||
|
setshowalert('Password is required');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// const response = await fetch(`http://localhost:5000/api/auth/login`, {
|
||||||
|
// method: "POST",
|
||||||
|
// headers: {
|
||||||
|
// "Content-Type": "application/json",
|
||||||
|
// },
|
||||||
|
// body: JSON.stringify({
|
||||||
|
// Email: user.Email,
|
||||||
|
// Password: user.Password,
|
||||||
|
// }),
|
||||||
|
// });
|
||||||
|
// const json = await response.json();
|
||||||
|
// console.log(json);
|
||||||
|
// if (json.Check) {
|
||||||
|
// localStorage.setItem("token", json.authtoken);
|
||||||
|
// if (json?.status)
|
||||||
|
// {
|
||||||
|
// localStorage.setItem("isadmin" , true);
|
||||||
|
// }
|
||||||
|
// navigate("/");
|
||||||
|
// }
|
||||||
|
// else if (!json.Check)
|
||||||
|
// {
|
||||||
|
// alert("Invalid Login Credentials")
|
||||||
|
// console.log("Invalid Login Cred")
|
||||||
|
// }
|
||||||
|
|
||||||
|
alert('Login Successful ');
|
||||||
|
|
||||||
|
navigate('/');
|
||||||
|
};
|
||||||
|
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
// Toogle Password
|
||||||
|
|
||||||
|
const togglePassword = () => {
|
||||||
|
setispasswordVisible(!ispasswordVisible);
|
||||||
|
|
||||||
|
const el = document.getElementById('password') as HTMLInputElement;
|
||||||
|
if (el.type === 'password') {
|
||||||
|
el.type = 'text';
|
||||||
|
} else {
|
||||||
|
el.type = 'password';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (password) {
|
||||||
|
setisVisible(true);
|
||||||
|
} else {
|
||||||
|
setisVisible(false);
|
||||||
|
}
|
||||||
|
}, [password]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="z-30 flex h-full min-h-screen w-full items-center justify-center bg-[#1D1D1D]">
|
||||||
|
<div className="flex flex-col items-center md:w-fit">
|
||||||
|
<div className="text- cursor-pointer" onClick={() => navigate('/')}>
|
||||||
|
<img src={DocsGPT3} alt="Logo" className="h-[10vh]" />
|
||||||
|
</div>
|
||||||
|
<div className="mt-[2vh] flex w-full flex-wrap items-center justify-center gap-2 font-bold ">
|
||||||
|
<h1 className="mt-0 text-[3vh] text-white md:text-[3.5vh]">
|
||||||
|
Log in to
|
||||||
|
</h1>
|
||||||
|
<h1 className="mt-0 bg-gradient-to-r from-[#56B3CB] via-[#CD2AA0] to-[#EA635C] bg-clip-text text-[3vh] text-transparent md:text-[3.5vh]">
|
||||||
|
DocsGPT
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
<form className="flex w-full flex-col gap-[3vh] md:w-fit">
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
name="Name"
|
||||||
|
placeholder="Email"
|
||||||
|
onChange={(e) => {
|
||||||
|
setemail(e.target.value);
|
||||||
|
}}
|
||||||
|
className="w-[90vw] cursor-pointer rounded-lg border-red-400 bg-[#2B2B2B] p-4 text-sm font-medium text-white hover:bg-[#383838] focus:border-2 focus:border-[#715c9d] focus:outline-none md:w-full md:min-w-[25vw]"
|
||||||
|
// onChange={onchange}
|
||||||
|
/>
|
||||||
|
<div className="relative flex">
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
id="password"
|
||||||
|
name="Name"
|
||||||
|
placeholder="Password"
|
||||||
|
onChange={(e) => {
|
||||||
|
setpassword(e.target.value);
|
||||||
|
}}
|
||||||
|
className="w-[90vw] cursor-pointer rounded-lg border-red-400 bg-[#2B2B2B] p-4 text-sm font-medium text-white hover:bg-[#383838] focus:border-2 focus:border-[#715c9d] focus:outline-none md:w-full md:min-w-[25vw]"
|
||||||
|
// onChange={onchange}
|
||||||
|
/>
|
||||||
|
{isVisible &&
|
||||||
|
(!ispasswordVisible ? (
|
||||||
|
<button
|
||||||
|
onClick={() => togglePassword()}
|
||||||
|
type="button"
|
||||||
|
className="absolute top-[2.2vh] right-[2vh] text-[2vh] text-white md:text-[3vh]"
|
||||||
|
>
|
||||||
|
<IoEye />
|
||||||
|
</button>
|
||||||
|
) : (
|
||||||
|
<button
|
||||||
|
onClick={() => togglePassword()}
|
||||||
|
type="button"
|
||||||
|
className="absolute top-[2.2vh] right-[2vh] text-[2vh] text-white md:text-[3vh]"
|
||||||
|
>
|
||||||
|
<IoMdEyeOff />
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2
|
||||||
|
className="text-right text-sm text-[#5F5F5F] hover:cursor-pointer hover:text-gray-400"
|
||||||
|
onClick={() => navigate('/Forgot')}
|
||||||
|
>
|
||||||
|
Forgot your password?
|
||||||
|
</h2>
|
||||||
|
<button
|
||||||
|
onClick={() => handleSubmit()}
|
||||||
|
type="button"
|
||||||
|
className="h-[7vh] rounded-lg bg-[#7D54D1] font-semibold text-white hover:bg-[#8A62DC]"
|
||||||
|
>
|
||||||
|
Log in
|
||||||
|
</button>
|
||||||
|
{showalert.length > 0 && (
|
||||||
|
<div className="text-red-500">{showalert}</div>
|
||||||
|
)}
|
||||||
|
<div className="flex w-full justify-center text-sm">
|
||||||
|
<h2 className="flex gap-1 text-right text-[#5F5F5F]">
|
||||||
|
Don't have an account?
|
||||||
|
<h2
|
||||||
|
className="text-center font-bold text-white hover:cursor-pointer hover:underline"
|
||||||
|
onClick={() => navigate('/register')}
|
||||||
|
>
|
||||||
|
Sign up
|
||||||
|
</h2>
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
@ -0,0 +1,63 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import DocsGPT3 from '../assets/cute_docsgpt3.svg';
|
||||||
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
export default function ResetCode() {
|
||||||
|
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
|
||||||
|
e.preventDefault();
|
||||||
|
console.log('login');
|
||||||
|
};
|
||||||
|
|
||||||
|
const navigate = useNavigate();
|
||||||
|
return (
|
||||||
|
<div className="z-30 flex h-full min-h-screen w-full items-center justify-center bg-[#1D1D1D]">
|
||||||
|
<div className=" flex flex-col items-center px-[5vw] md:w-fit md:p-0">
|
||||||
|
<div className=" cursor-pointer" onClick={() => navigate('/')}>
|
||||||
|
<img src={DocsGPT3} alt="Logo" className="h-[10vh]" />
|
||||||
|
</div>
|
||||||
|
<div className="font-bold md:flex md:gap-2 ">
|
||||||
|
<h1 className="text-white">Log in to </h1>
|
||||||
|
<h1 className="bg-gradient-to-r from-[#56B3CB] via-[#CD2AA0] to-[#EA635C] bg-clip-text text-transparent">
|
||||||
|
DocsGPT
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
<form
|
||||||
|
onSubmit={handleSubmit}
|
||||||
|
className="flex w-full flex-col gap-[3vh] rounded-2xl border-2 border-[#383838] bg-[#222222] py-[2vh] px-[5vh] text-white md:w-fit"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<h1 className=" text-xl font-semibold md:max-w-[25vw]">
|
||||||
|
We've sent you instructions to reset your password. Please
|
||||||
|
check your inbox.
|
||||||
|
</h1>
|
||||||
|
<p className="text-md text-[#888888] md:max-w-[25vw]">
|
||||||
|
If you haven't received an email in 5 minutes, check your
|
||||||
|
spam, resend, or try a different email.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
name="Name"
|
||||||
|
placeholder="Email"
|
||||||
|
className="w-full rounded-lg border-none bg-[#2B2B2B] p-4 text-sm font-medium text-white focus:outline-none "
|
||||||
|
// onChange={onchange}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<button className="h-[7vh] rounded-lg bg-[#7D54D1] text-sm font-medium text-white hover:bg-[#8A62DC]">
|
||||||
|
Request password reset
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
<div className="mt-[2vh] flex w-full justify-center text-sm">
|
||||||
|
<h2 className="gap-1 text-right text-[#5F5F5F] md:flex">
|
||||||
|
Don't have an account?
|
||||||
|
<h2
|
||||||
|
className="text-center font-medium text-white hover:cursor-pointer hover:underline"
|
||||||
|
onClick={() => navigate('/register')}
|
||||||
|
>
|
||||||
|
Sign up
|
||||||
|
</h2>
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
@ -0,0 +1,137 @@
|
|||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import DocsGPT3 from '../assets/cute_docsgpt3.svg';
|
||||||
|
import { IoEye } from 'react-icons/io5';
|
||||||
|
import { IoMdEyeOff } from 'react-icons/io';
|
||||||
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
|
||||||
|
export default function Signup() {
|
||||||
|
const [showalert, setshowalert] = useState<string>('');
|
||||||
|
const [email, setemail] = useState('');
|
||||||
|
const [password, setpassword] = useState('');
|
||||||
|
const [isVisible, setisVisible] = useState(false);
|
||||||
|
const [ispasswordVisible, setispasswordVisible] = useState(false);
|
||||||
|
|
||||||
|
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
if (email.length === 0 || password.length === 0) {
|
||||||
|
setshowalert('Both fields are required');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
//email validation
|
||||||
|
if (!email.match(/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/)) {
|
||||||
|
setshowalert('Please enter a valid email address');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setshowalert('');
|
||||||
|
alert('Signup Successful ');
|
||||||
|
|
||||||
|
navigate('/login');
|
||||||
|
};
|
||||||
|
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
// Toogle Password
|
||||||
|
|
||||||
|
const togglePassword = () => {
|
||||||
|
setispasswordVisible(!ispasswordVisible);
|
||||||
|
|
||||||
|
const el = document.getElementById('password') as HTMLInputElement;
|
||||||
|
if (el.type === 'password') {
|
||||||
|
el.type = 'text';
|
||||||
|
} else {
|
||||||
|
el.type = 'password';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (password) {
|
||||||
|
setisVisible(true);
|
||||||
|
} else {
|
||||||
|
setisVisible(false);
|
||||||
|
}
|
||||||
|
}, [password]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="z-30 flex h-full min-h-screen w-full items-center justify-center bg-[#1D1D1D]">
|
||||||
|
<div className=" flex flex-col items-center px-[5vh] md:w-fit md:px-0">
|
||||||
|
<div className=" cursor-pointer" onClick={() => navigate('/')}>
|
||||||
|
<img src={DocsGPT3} alt="Logo" className="h-[10vh]" />
|
||||||
|
</div>
|
||||||
|
<div className="mt-[2vh] flex flex-wrap items-center justify-center gap-2 font-bold ">
|
||||||
|
<h1 className="mt-0 text-[3vh] text-white md:text-[3.5vh]">Create</h1>
|
||||||
|
<h1 className="mt-0 bg-gradient-to-r from-[#56B3CB] via-[#CD2AA0] to-[#EA635C] bg-clip-text text-[3vh] text-transparent md:text-[3.5vh]">
|
||||||
|
DocsGPT
|
||||||
|
</h1>
|
||||||
|
<h1 className="mt-0 text-[3vh] text-white md:text-[3.5vh]">
|
||||||
|
Account
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
<form
|
||||||
|
onSubmit={handleSubmit}
|
||||||
|
className="flex flex-col gap-[3vh] px-[2vh] md:w-fit"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
name="Name"
|
||||||
|
placeholder="Email"
|
||||||
|
onChange={(e) => {
|
||||||
|
setemail(e.target.value);
|
||||||
|
}}
|
||||||
|
className="w-[90vw] cursor-pointer rounded-lg border-red-400 bg-[#2B2B2B] p-4 text-sm font-medium text-white hover:bg-[#383838] focus:border-2 focus:border-[#715c9d] focus:outline-none md:w-full md:min-w-[25vw]"
|
||||||
|
/>
|
||||||
|
<div className="relative flex">
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
id="password"
|
||||||
|
name="Name"
|
||||||
|
placeholder="Password"
|
||||||
|
onChange={(e) => {
|
||||||
|
setpassword(e.target.value);
|
||||||
|
}}
|
||||||
|
className="w-[90vw] cursor-pointer rounded-lg border-red-400 bg-[#2B2B2B] p-4 text-sm font-medium text-white hover:bg-[#383838] focus:border-2 focus:border-[#715c9d] focus:outline-none md:w-full md:min-w-[25vw]"
|
||||||
|
// onChange={onchange}
|
||||||
|
/>
|
||||||
|
{isVisible &&
|
||||||
|
(!ispasswordVisible ? (
|
||||||
|
<button
|
||||||
|
onClick={() => togglePassword()}
|
||||||
|
type="button"
|
||||||
|
className="absolute top-[2.2vh] right-[2vh] text-[2vh] text-white md:text-[3vh]"
|
||||||
|
>
|
||||||
|
<IoEye />
|
||||||
|
</button>
|
||||||
|
) : (
|
||||||
|
<button
|
||||||
|
onClick={() => togglePassword()}
|
||||||
|
type="button"
|
||||||
|
className="absolute top-[2.2vh] right-[2vh] text-[2vh] text-white md:text-[3vh]"
|
||||||
|
>
|
||||||
|
<IoMdEyeOff />
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<button className="h-[7vh] rounded-lg bg-[#7D54D1] font-semibold text-white hover:bg-[#8A62DC]">
|
||||||
|
Create Account
|
||||||
|
</button>
|
||||||
|
{showalert.length > 0 && (
|
||||||
|
<div className="text-red-500">{showalert}</div>
|
||||||
|
)}
|
||||||
|
<div className="flex w-full justify-center text-sm">
|
||||||
|
<h2 className="flex gap-1 text-right text-[#5F5F5F]">
|
||||||
|
Already have an account?
|
||||||
|
<h2
|
||||||
|
className="text-center font-bold text-white hover:cursor-pointer hover:underline"
|
||||||
|
onClick={() => navigate('/login')}
|
||||||
|
>
|
||||||
|
Log in
|
||||||
|
</h2>
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
Loading…
Reference in New Issue