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

REFACTOR: Repositioning of Components in Project Structure

Browse Source
This commit is contained in:
Chris-1010
2025-02-16 19:36:34 +00:00
parent bd091b079a
commit b3de7ba238
17 changed files with 356 additions and 311 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,10 @@
import React, { useState } from "react";
import { ToggleButton } from "../Layout/Button";
import { LogIn as LogInIcon, User as UserIcon, CircleHelp as ForgotIcon } from "lucide-react";
import { ToggleButton } from "../Input/Button";
import {
LogIn as LogInIcon,
User as UserIcon,
CircleHelp as ForgotIcon,
} from "lucide-react";
import LoginForm from "./LoginForm";
import RegisterForm from "./RegisterForm";
import ForgotPasswordForm from "./ForgotPasswordForm";
@@ -23,14 +27,19 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
};
const authSwitch = () => {
const formMap: { [key: string]: JSX.Element } = {
Login: <LoginForm onSubmit={(handleSubmit)} onForgotPassword={() => setSelectedTab("Forgot")} />,
Register: <RegisterForm onSubmit={(handleSubmit)} />,
Forgot: <ForgotPasswordForm onSubmit={(handleSubmit)} />
Login: (
<LoginForm
onSubmit={handleSubmit}
onForgotPassword={() => setSelectedTab("Forgot")}
/>
),
Register: <RegisterForm onSubmit={handleSubmit} />,
Forgot: <ForgotPasswordForm onSubmit={handleSubmit} />,
};
return formMap[selectedTab] || <div>Please select a valid option</div>;
{/*
{
/*
if (selectedTab === "Login") {
return <LoginForm onSubmit={(handleSubmit)}/>
} else if (selectedTab === "Register") {
@@ -39,9 +48,9 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
return <ForgotPasswordForm onSubmit={(handleSubmit)}/>
} else
return <div> Please select a valid icon</div>
*/}
}
*/
}
};
return (
<>
@@ -52,7 +61,8 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
></div>
{/*Container*/}
<div id="auth-modal"
<div
id="auth-modal"
className="fixed inset-0 flex flex-col items-center justify-around z-[9000]
h-[95vh] m-auto min-w-[65vw] w-fit py-[80px] rounded-[5rem] transition-all animate-floating "
>
@@ -78,8 +88,6 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
<UserIcon className=" w-[3em] sm:w-[1em] mr-1" />
Register
</ToggleButton>
</div>
<div
@@ -104,18 +112,10 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
✕
</button>
</div>
<>
{authSwitch()}
</>
<>{authSwitch()}</>
</div>
</div>
</div>
</>
);
};

163
frontend/src/components/Auth/ForgotPasswordForm.tsx
View File

@@ -1,95 +1,102 @@
import React, { useState } from "react";
import Input from "../Layout/Input";
import Button from "../Layout/Button";
import Input from "../Input/Input";
import Button from "../Input/Button";
interface ForgotPasswordProps {
email?: string;
email?: string;
}
interface SubmitProps {
onSubmit: () => void;
}
onSubmit: () => void;
}
const ForgotPasswordForm: React.FC<SubmitProps> = ( {onSubmit} ) => {
const [email, setEmail] = useState<string>("");
const [errors, setErrors] = useState<ForgotPasswordProps>({});
const ForgotPasswordForm: React.FC<SubmitProps> = ({ onSubmit }) => {
const [email, setEmail] = useState<string>("");
const [errors, setErrors] = useState<ForgotPasswordProps>({});
const confirmPasswordReset = () => {
alert(`Email has been sent`);
const confirmPasswordReset = () => {
alert(`Email has been sent`);
};
};
const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setEmail(e.target.value);
if (errors.email) {
setErrors((prev) => ({ ...prev, email: undefined }));
}
};
const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setEmail(e.target.value);
if (errors.email) {
setErrors((prev) => ({ ...prev, email: undefined }));
const validateEmail = (): boolean => {
const newErrors: ForgotPasswordProps = {};
if (!email) {
newErrors.email = "Email is required.";
} else if (!/\S+@\S+\.\S+/.test(email)) {
newErrors.email = "Please enter a valid email address.";
}
setErrors(newErrors);
return Object.keys(newErrors).length === 0;
};
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (validateEmail()) {
try {
const response = await fetch(`/api/user/forgot_password/${email}`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
credentials: "include",
});
if (!response.ok) {
const data = await response.json();
throw new Error(
data.message || "An error has occurred while resetting"
);
} else {
confirmPasswordReset();
}
};
} catch (error: any) {
console.error("Password reset error:", error.message);
setErrors((prev) => ({
...prev,
general: error.message || "An unexpected error occurred.",
}));
}
}
};
return (
<div className="h-screen flex items-center justify-center">
<div className="h-[25em] w-[20em] flex flex-col items-center justify-center bg-white shadow-md rounded-lg p-6">
<h2 className="text-2xl font-bold text-center mb-4">Forgot Password</h2>
<form
onSubmit={handleSubmit}
className="flex flex-col items-center space-y-4 w-full m-6"
>
<Input
name="email"
type="email"
placeholder="Enter your email"
value={email}
onChange={handleEmailChange}
extraClasses={`appearance-none bg-transparent text-black m-5 ${
errors.email ? "border-red-500" : ""
}`}
/>
const validateEmail = (): boolean => {
const newErrors: ForgotPasswordProps = {};
if (!email) {
newErrors.email = "Email is required.";
} else if (!/\S+@\S+\.\S+/.test(email)) {
newErrors.email = "Please enter a valid email address.";
}
setErrors(newErrors);
return Object.keys(newErrors).length === 0;
};
{errors.email && (
<p className="text-red-500 mt-2 text-sm">{errors.email}</p>
)}
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (validateEmail()) {
try {
const response = await fetch(`/api/user/forgot_password/${email}`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
credentials: "include",
});
if (!response.ok) {
const data = await response.json();
throw new Error(data.message || "An error has occurred while resetting");
} else {
confirmPasswordReset();
}
} catch (error: any) {
console.error("Password reset error:", error.message);
setErrors((prev) => ({
...prev,
general: error.message || "An unexpected error occurred.",
}));
}
}
};
return (
<div className="h-screen flex items-center justify-center">
<div className="h-[25em] w-[20em] flex flex-col items-center justify-center bg-white shadow-md rounded-lg p-6">
<h2 className="text-2xl font-bold text-center mb-4">Forgot Password</h2>
<form onSubmit={handleSubmit} className="flex flex-col items-center space-y-4 w-full m-6">
<Input
name="email"
type="email"
placeholder="Enter your email"
value={email}
onChange={handleEmailChange}
extraClasses={`appearance-none bg-transparent text-black m-5 ${errors.email ? "border-red-500" : ""}`}
/>
{errors.email && <p className="text-red-500 mt-2 text-sm">{errors.email}</p>}
<Button type="submit" extraClasses="text-black">Send Reset Link</Button>
</form>
</div>
</div>
);
<Button type="submit" extraClasses="text-black">
Send Reset Link
</Button>
</form>
</div>
</div>
);
};
export default ForgotPasswordForm;

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

@@ -1,6 +1,6 @@
import React, { useState } from "react";
import Input from "../Layout/Input";
import Button, { ToggleButton } from "../Layout/Button";
import Input from "../Input/Input";
import Button, { ToggleButton } from "../Input/Button";
import { useAuth } from "../../context/AuthContext";
import GoogleLogin from "./OAuth";
import { CircleHelp as ForgotIcon } from "lucide-react";
@@ -101,8 +101,8 @@ const LoginForm: React.FC<SubmitProps> = ({ onSubmit, onForgotPassword }) => {
return (
<>
<div className=" flex flex-col items-center p-10">
<h1 className="flex flex-col text-white text-[2.5em] font-[800]"> Login </h1>
<div className="flex flex-col items-center p-10">
<h1 className="flex flex-col text-white text-[2.5em] font-[800]">Login</h1>
<div className="mt-10 bg-white/10 backdrop-blur-md p-6 md:p-16 rounded-xl shadow-lg w-full
md:max-w-[20em] lg:max-w-[27.5em] min-w-[10em] border border-white/10">
@@ -112,22 +112,30 @@ const LoginForm: React.FC<SubmitProps> = ({ onSubmit, onForgotPassword }) => {
className="flex flex-col"
>
{errors.general && (
<p className="text-red-500 text-sm text-center text-[0.75em]">{errors.general}</p>
<p className="text-red-500 text-sm text-center text-[0.75em]">
{errors.general}
</p>
)}
{errors.username && (
<p className="text-red-500 text-center text-[0.75em]">{errors.username}</p>
<p className="text-red-500 text-center text-[0.75em]">
{errors.username}
</p>
)}
<Input
name="username"
placeholder="Username"
value={formData.username}
onChange={handleInputChange}
extraClasses={`w-full mb-[2em] p-3 ${errors.username ? "border-red-500" : ""}`}
extraClasses={`w-full mb-[2em] p-3 ${
errors.username ? "border-red-500" : ""
}`}
/>
{errors.password && (
<p className="text-red-500 text-center text-[0.75em]">{errors.password}</p>
<p className="text-red-500 text-center text-[0.75em]">
{errors.password}
</p>
)}
<div className="mb-[2em]">
@@ -137,25 +145,28 @@ const LoginForm: React.FC<SubmitProps> = ({ onSubmit, onForgotPassword }) => {
placeholder="Password"
value={formData.password}
onChange={handleInputChange}
extraClasses={`w-full p-3 ${errors.password ? "border-red-500" : ""}`}
>
</Input>
extraClasses={`w-full p-3 ${
errors.password ? "border-red-500" : ""
}`}
></Input>
<div className="flex flex-row">
<label className="flex w-full items-center justify-start cursor-pointer w-10px">
<input
type="checkbox"
className="accent-purple-600 w-3 h-3 mr-1"
/>
<span className="sm:text-[0.5em] md:text-[0.8em]">Remember me</span>
</label>
<button
type="button"
className="flex w-full justify-end items-center justify-items-end sm:text-[0.5em] md:text-[0.8em] text-white font-semibold hover:scale-[1.05] transition-all ease-in"
onClick={onForgotPassword}>
<ForgotIcon size={16} className="flex flex-row mr-1" />
<span> Forgot Password </span>
</button>
<label className="flex w-full items-center justify-start cursor-pointer w-10px">
<input
type="checkbox"
className="accent-purple-600 w-3 h-3 mr-1"
/>
<span className="sm:text-[0.5em] md:text-[0.8em]">
Remember me
</span>
</label>
<button
type="button"
className="flex w-full justify-end items-center justify-items-end sm:text-[0.5em] md:text-[0.8em] text-white font-semibold hover:scale-[1.05] transition-all ease-in"
onClick={onForgotPassword}
>
<ForgotIcon size={16} className="flex flex-row mr-1" />
<span> Forgot Password </span>
</button>
</div>
</div>
<Button type="submit">Login</Button>

209
frontend/src/components/Auth/PasswordResetForm.tsx
View File

@@ -1,122 +1,125 @@
import React, { useState } from "react";
import Input from "../Layout/Input";
import Button from "../Layout/Button";
import Input from "../Input/Input";
import Button from "../Input/Button";
import { useAuth } from "../../context/AuthContext";
interface ResetPasswordData {
newPassword: string;
confirmNewPassword: string;
newPassword: string;
confirmNewPassword: string;
}
interface ResetPasswordErrors {
newPasswordError?: string;
confirmNewPasswordError?: string;
newPasswordError?: string;
confirmNewPasswordError?: string;
}
interface SubmitProps {
onSubmit: () => void;
token: string;
onSubmit: () => void;
token: string;
}
const PasswordResetForm: React.FC<SubmitProps> = ({ onSubmit, token }) => {
const [errors, setErrors] = useState<ResetPasswordErrors>({});
const [errors, setErrors] = useState<ResetPasswordErrors>({});
const [resetData, setResetData] = useState<ResetPasswordData>({
newPassword: "",
confirmNewPassword: "",
});
const [resetData, setResetData] = useState<ResetPasswordData>({
newPassword: "",
confirmNewPassword: "",
const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const { name, value } = e.target;
setResetData((prev) => ({
...prev,
[name]: value,
}));
};
const validateResetForm = (): boolean => {
const newErrors: ResetPasswordErrors = {};
Object.keys(resetData).forEach((key) => {
if (!resetData[key as keyof ResetPasswordData]) {
newErrors[key as keyof ResetPasswordErrors] = "Confirm your password";
}
});
const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const { name, value } = e.target;
setResetData((prev) => ({
...prev,
[name]: value,
}));
};
const validateResetForm = (): boolean => {
const newErrors: ResetPasswordErrors = {};
Object.keys(resetData).forEach((key) => {
if (!resetData[key as keyof ResetPasswordData]) {
newErrors[key as keyof ResetPasswordErrors] = "Confirm your password";
}
});
if (resetData.newPassword.length < 8) {
newErrors.newPasswordError = "Password must be at least 8 characters long";
}
if (resetData.newPassword !== resetData.confirmNewPassword) {
newErrors.confirmNewPasswordError = "Passwords do not match";
}
setErrors(newErrors);
return Object.keys(newErrors).length === 0;
};
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
onSubmit();
if (validateResetForm()) {
try {
const response = await fetch(`/api/user/reset_password/${token}/${resetData.newPassword}`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
credentials: "include",
body: JSON.stringify(resetData),
});
if (!response.ok) {
const data = await response.json();
throw new Error(data.error || "An error has occurred while resetting");
} else {
onSubmit(true)
}
} catch (error: any) {
console.error("Password reset error:", error.message);
setErrors((prev) => ({
...prev,
general: error.message || "An unexpected error occurred.",
}));
}
if (resetData.newPassword.length < 8) {
newErrors.newPasswordError =
"Password must be at least 8 characters long";
}
if (resetData.newPassword !== resetData.confirmNewPassword) {
newErrors.confirmNewPasswordError = "Passwords do not match";
}
setErrors(newErrors);
return Object.keys(newErrors).length === 0;
};
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
onSubmit();
if (validateResetForm()) {
try {
const response = await fetch(
`/api/user/reset_password/${token}/${resetData.newPassword}`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
credentials: "include",
body: JSON.stringify(resetData),
}
);
if (!response.ok) {
const data = await response.json();
throw new Error(
data.error || "An error has occurred while resetting"
);
} else {
onSubmit(true);
}
} catch (error: any) {
console.error("Password reset error:", error.message);
setErrors((prev) => ({
...prev,
general: error.message || "An unexpected error occurred.",
}));
}
}
};
return (
<form onSubmit={handleSubmit}>
<Input
name="newPassword"
type="password"
placeholder="New Password"
value={resetData.newPassword}
onChange={handlePasswordChange}
extraClasses={`${errors.newPasswordError ? "border-red-500" : ""}`}
/>
{errors.confirmNewPasswordError && (
<p className="text-red-500 mt-3 text-sm">
{errors.confirmNewPasswordError}
</p>
)}
<Input
name="confirmNewPassword"
type="password"
placeholder="Confirm Password"
value={resetData.confirmNewPassword}
onChange={handlePasswordChange}
extraClasses={`${
errors.confirmNewPasswordError ? "border-red-500" : ""
}`}
/>
<Button type="submit">Reset Password</Button>
</form>
);
};
return (
<form onSubmit={handleSubmit}>
<Input
name="newPassword"
type="password"
placeholder='New Password'
value={resetData.newPassword}
onChange={handlePasswordChange}
extraClasses={`${errors.newPasswordError ? "border-red-500" : ""}`}
/>
{errors.confirmNewPasswordError && (
<p className="text-red-500 mt-3 text-sm">{errors.confirmNewPasswordError}</p>
)}
<Input
name="confirmNewPassword"
type="password"
placeholder="Confirm Password"
value={resetData.confirmNewPassword}
onChange={handlePasswordChange}
extraClasses={`${errors.confirmNewPasswordError ? "border-red-500" : ""}`}
/>
<Button type="submit">Reset Password</Button>
</form>
);
};
export default PasswordResetForm
export default PasswordResetForm;

56
frontend/src/components/Auth/RegisterForm.tsx
View File

@@ -1,6 +1,6 @@
import React, { useState } from "react";
import Input from "../Layout/Input";
import Button from "../Layout/Button";
import Input from "../Input/Input";
import Button from "../Input/Button";
import { useAuth } from "../../context/AuthContext";
import GoogleLogin from "./OAuth";
@@ -111,10 +111,13 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
<>
<div className="mb-2">
<div className="flex flex-col items-center p-[2.5rem]">
<h1 className="flex flex-col text-white text-[2.5em] font-[800]"> Register </h1>
<div className="mt-5 bg-white/10 backdrop-blur-md p-[2.5rem] md:px-16 rounded-xl shadow-lg w-full
md:max-w-[20em] lg:max-w-[27.5em] min-w-[10em] border border-white/10">
<h1 className="flex flex-col text-white text-[2.5em] font-[800]">
Register
</h1>
<div
className="mt-5 bg-white/10 backdrop-blur-md p-[2.5rem] md:px-16 rounded-xl shadow-lg w-full
md:max-w-[20em] lg:max-w-[27.5em] min-w-[10em] border border-white/10"
>
<form
onSubmit={handleSubmit}
id="register-form"
@@ -122,24 +125,32 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
>
<div className="relative w-full">
{errors.general && (
<p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full">{errors.general}</p>
<p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full">
{errors.general}
</p>
)}
{errors.username && (
<p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full">{errors.username}</p>
<p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full">
{errors.username}
</p>
)}
<Input
name="username"
placeholder="Username"
value={formData.username}
onChange={handleInputChange}
extraClasses={`w-full mb-[1.5em] p-[0.5rem] ${errors.username ? "border-red-500" : ""}`}
extraClasses={`w-full mb-[1.5em] p-[0.5rem] ${
errors.username ? "border-red-500" : ""
}`}
/>
</div>
<div className="relative w-full">
{errors.email && (
<p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full">{errors.email}</p>
<p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full">
{errors.email}
</p>
)}
<Input
name="email"
@@ -147,13 +158,17 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
placeholder="Email"
value={formData.email}
onChange={handleInputChange}
extraClasses={`w-full mb-[1.5em] p-[0.5rem] ${errors.email ? "border-red-500" : ""}`}
extraClasses={`w-full mb-[1.5em] p-[0.5rem] ${
errors.email ? "border-red-500" : ""
}`}
/>
</div>
<div className="relative w-full">
{errors.password && (
<p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full">{errors.password}</p>
<p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full">
{errors.password}
</p>
)}
<Input
name="password"
@@ -161,13 +176,16 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
placeholder="Password"
value={formData.password}
onChange={handleInputChange}
extraClasses={`w-full mb-[1.5em] p-[0.5rem] ${errors.password ? "border-red-500" : ""}`}
extraClasses={`w-full mb-[1.5em] p-[0.5rem] ${
errors.password ? "border-red-500" : ""
}`}
/>
</div>
<div className="relative w-full">
{errors.confirmPassword && (
<p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full">{errors.confirmPassword}</p>
<p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full">
{errors.confirmPassword}
</p>
)}
<Input
name="confirmPassword"
@@ -175,17 +193,17 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
placeholder="Confirm Password"
value={formData.confirmPassword}
onChange={handleInputChange}
extraClasses={`w-full mb-[1.5em] p-[0.5rem] ${errors.confirmPassword ? "border-red-500" : ""}`}
extraClasses={`w-full mb-[1.5em] p-[0.5rem] ${
errors.confirmPassword ? "border-red-500" : ""
}`}
/>
</div>
<Button type="submit" >Register</Button>
<Button type="submit">Register</Button>
</form>
</div>
</div>
</div>
</>
);
};