LLM/DocsGPT
1
0
Fork 0
mirror of https://github.com/arc53/DocsGPT.git synced 2025-11-30 17:13:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Minor_update

Browse Source
This commit is contained in:
Hemant2335
2023-11-27 18:20:15 +05:30
parent b6b3e455de
commit 98a0bb24bd
1 changed files with 57 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
frontend/src/Login/Signup.tsx
View File

@@ -1,11 +1,15 @@
import React, { useState } from 'react';
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();
@@ -29,6 +33,27 @@ export default function Signup() {
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">
@@ -57,15 +82,37 @@ export default function Signup() {
}}
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]"
/>
<input
type="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]"
/>
<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>