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

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

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