dylan/gander
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

UPDATE: Forgot Password Set in Login Page

Browse Source
This commit is contained in:
EvanLin3141
2025-02-11 09:20:15 +00:00
parent a8ed15f3a4
commit 3b9fef6a4d
2 changed files with 50 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/components/Auth/AuthModal.tsx
View File

@@ -25,7 +25,7 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
const authSwitch = () => { const authSwitch = () => {
const formMap: { [key: string]: JSX.Element} = { const formMap: { [key: string]: JSX.Element} = {
Login: <LoginForm onSubmit={(handleSubmit)}/>, Login: <LoginForm onSubmit={(handleSubmit)} onForgotPassword={() => setSelectedTab("Forgot")}/>,
Register: <RegisterForm onSubmit={(handleSubmit)}/>, Register: <RegisterForm onSubmit={(handleSubmit)}/>,
Forgot: <ForgotPasswordForm onSubmit={(handleSubmit)}/> Forgot: <ForgotPasswordForm onSubmit={(handleSubmit)}/>
}; };
@@ -78,13 +78,7 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
Register Register
</ToggleButton> </ToggleButton>
<ToggleButton
toggled={selectedTab==="Forgot"}
extraClasses="flex flex-col items-center px-8 duration-250 transition-transform hover:translate-y-[-50px] z-[9001]"
onClick={() => setSelectedTab("Forgot")}>
<ForgotIcon />
Forgot Password
</ToggleButton>
</div> </div>
<div <div
className="container fixed inset-0 flex flex-col items-center justify-around z-[9999] className="container fixed inset-0 flex flex-col items-center justify-around z-[9999]

84
frontend/src/components/Auth/LoginForm.tsx
View File

@@ -1,8 +1,9 @@
import React, { useState } from "react"; import React, { useState } from "react";
import Input from "../Layout/Input"; import Input from "../Layout/Input";
import Button from "../Layout/Button"; import Button, { ToggleButton } from "../Layout/Button";
import { useAuth } from "../../context/AuthContext"; import { useAuth } from "../../context/AuthContext";
import GoogleLogin from "./OAuth"; import GoogleLogin from "./OAuth";
import { CircleHelp as ForgotIcon} from "lucide-react";
interface LoginFormData { interface LoginFormData {
username: string; username: string;
@@ -18,9 +19,10 @@ interface FormErrors {
//Speed up border animation //Speed up border animation
interface SubmitProps { interface SubmitProps {
onSubmit: () => void; onSubmit: () => void;
onForgotPassword: () => void;
} }
const LoginForm: React.FC<SubmitProps> = ({ onSubmit }) => { const LoginForm: React.FC<SubmitProps> = ({ onSubmit, onForgotPassword }) => {
const { setIsLoggedIn } = useAuth(); const { setIsLoggedIn } = useAuth();
const [formData, setFormData] = useState<LoginFormData>({ const [formData, setFormData] = useState<LoginFormData>({
@@ -99,44 +101,52 @@ const LoginForm: React.FC<SubmitProps> = ({ onSubmit }) => {
return ( return (
<> <>
<div className="h-[100%] flex flex-col justify-evenly items-center"> <div className="h-[100%] flex flex-col justify-evenly items-center">
<h1 className="text-white text-lg"> Login </h1> <h1 className="text-white text-lg"> Login </h1>
<form <form
onSubmit={handleSubmit} onSubmit={handleSubmit}
id="login-form" id="login-form"
className="h-[100%] flex flex-col justify-evenly items-center" className="h-[100%] flex flex-col justify-evenly items-center"
> >
{errors.general && ( {errors.general && (
<p className="text-red-500 text-sm text-center">{errors.general}</p> <p className="text-red-500 text-sm text-center">{errors.general}</p>
)} )}
{errors.username && ( {errors.username && (
<p className="text-red-500 mt-3 text-sm">{errors.username}</p> <p className="text-red-500 mt-3 text-sm">{errors.username}</p>
)} )}
<Input <Input
name="username" name="username"
placeholder="Username" placeholder="Username"
value={formData.username} value={formData.username}
onChange={handleInputChange} onChange={handleInputChange}
extraClasses={`${errors.username ? "border-red-500" : ""}`} extraClasses={`${errors.username ? "border-red-500" : ""}`}
/> />
{errors.password && ( {errors.password && (
<p className="text-red-500 mt-3 text-sm">{errors.password}</p> <p className="text-red-500 mt-3 text-sm">{errors.password}</p>
)} )}
<Input <Input
name="password" name="password"
type="password" type="password"
placeholder="Password" placeholder="Password"
value={formData.password} value={formData.password}
onChange={handleInputChange} onChange={handleInputChange}
extraClasses={`${errors.password ? "border-red-500" : ""}`} extraClasses={`${errors.password ? "border-red-500" : ""}`}
/> />
<Button type="submit">Login</Button> <Button type="submit">Login</Button>
<GoogleLogin />
</form> <Button
</div> type="button"
extraClasses="flex flex-row items-center px-3"
onClick={onForgotPassword}>
<ForgotIcon />
Forgot Password
</Button>
<GoogleLogin />
</form>
</div>
</> </>
); );
}; };