mirror of https://github.com/arc53/DocsGPT
Merge pull request #799 from Hemant2335/Demo
Creating a Seprate Page for Signup and Signinfeature/login-menu
Alex
5 months ago
committed by
GitHub
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