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

Merge branch 'main' of https://github.com/john-david3/cs3305-team11

Browse Source
This commit is contained in:
Dylan De Faoite
2025-02-12 01:29:57 +00:00
parent 55fed8a778 9d08c5b58f
commit 3130314ffa
6 changed files with 172 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -54,7 +54,7 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
{/*Container*/} {/*Container*/}
<div id="auth-modal" <div id="auth-modal"
className="fixed inset-0 flex flex-col items-center justify-around z-[9000] 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" h-[95vh] m-auto min-w-[65vw] w-fit py-[80px] rounded-[5rem] transition-all animate-floating "
> >
{/* Login/Register Buttons Container */} {/* Login/Register Buttons Container */}
<div className="absolute top-[60px] left-1/2 transform -translate-x-1/2 w-[300px] flex justify-center gap-8 transition-transform overflow-visible "> <div className="absolute top-[60px] left-1/2 transform -translate-x-1/2 w-[300px] flex justify-center gap-8 transition-transform overflow-visible ">
@@ -80,16 +80,17 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
</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]
h-[75vh] m-auto min-w-[45vw] w-fit py-[50px] rounded-[5rem]" h-auto max-h-[75vh] m-auto max-w-[350px] min-w-[34vw] py-[50px] rounded-[5rem]"
style={{ "--spin-duration": spinDuration } as React.CSSProperties} style={{ "--spin-duration": spinDuration } as React.CSSProperties}
> >
{/*Border Container*/} {/*Border Container*/}
<div <div
id="border-container" id="border-container"
className="front-content fixed inset-0 bg-gradient-to-br from-blue-950 via-purple-500 to-violet-800 flex flex-col justify-center className="front-content fixed ml-[1px] mt-[0.5px] inset-0 bg-authForm flex flex-col justify-center
z-50 h-[70vh] mr-0.5 mb-0.5 m-auto min-w-[40vw] w-fit py-[50px] rounded-[2rem] transition-all" z-50 h-[70vh] min-w-[30vw] w-fit py-[50px] rounded-[2rem] transition-all"
> >
<div <div
id="login-methods" id="login-methods"
@@ -108,9 +109,12 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
</div> </div>
</div> </div>
</div> </div>
</> </>
); );
}; };

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

@@ -3,7 +3,7 @@ import Input from "../Layout/Input";
import Button, { ToggleButton } 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"; import { CircleHelp as ForgotIcon } from "lucide-react";
interface LoginFormData { interface LoginFormData {
username: string; username: string;
@@ -101,53 +101,71 @@ const LoginForm: React.FC<SubmitProps> = ({ onSubmit, onForgotPassword }) => {
return ( return (
<> <>
<div className="h-[100%] flex flex-col justify-evenly items-center"> <div className="h-[100%] flex flex-col items-center p-10">
<h1 className="text-white text-[2.5em] font-[800]"> Login </h1> <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] h-[27.5em] border border-white/10">
<form <form
onSubmit={handleSubmit} onSubmit={handleSubmit}
id="login-form" id="login-form"
className="h-[100%] flex flex-col items-center" className="flex flex-col"
> >
{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 text-[0.75em]">{errors.general}</p>
)} )}
{errors.username && ( {errors.username && (
<p className="text-red-500 mt-3 text-sm">{errors.username}</p> <p className="text-red-500 text-center text-[0.75em]">{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={`w-full mb-[2em] p-3 ${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 text-center text-[0.75em]">{errors.password}</p>
)} )}
<div className="mb-[2em]">
<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={`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 <button
type="button" type="button"
className="flex items-center justify-start bg-white text-gray-600 font-semibold py-1 px-2 rounded shadow-md w-[220px] hover:bg-gray-100 active:bg-gray-200" 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}> onClick={onForgotPassword}>
<ForgotIcon className="flex flex-row justify-content "/> <ForgotIcon size={16} className="flex flex-row mr-1" />
Forgot Password <span> Forgot Password </span>
</button> </button>
</div>
</div>
<Button type="submit">Login</Button> <Button type="submit">Login</Button>
</form> </form>
<div className="flex flex-col flex-items justify-evenly items-center w-full h-[5em]"> <div className="flex flex-col flex-items justify-evenly items-center w-full h-[5em]">
<GoogleLogin /> <GoogleLogin />
</div> </div>
</div> </div>
</div>
</> </>
); );
}; };

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

@@ -2,6 +2,7 @@ import React, { useState } from "react";
import Input from "../Layout/Input"; import Input from "../Layout/Input";
import Button from "../Layout/Button"; import Button from "../Layout/Button";
import { useAuth } from "../../context/AuthContext"; import { useAuth } from "../../context/AuthContext";
import GoogleLogin from "./OAuth";
interface RegisterFormData { interface RegisterFormData {
username: string; username: string;
@@ -107,28 +108,38 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
}; };
return ( return (
<>
<div className="mb-2">
<div className="h-[100%] flex flex-col items-center p-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-10 md:px-16 rounded-xl shadow-lg w-full
md:max-w-[20em] lg:max-w-[27.5em] min-w-[10em] h-[31em] border border-white/10">
<form <form
onSubmit={handleSubmit} onSubmit={handleSubmit}
id="register-form" id="register-form"
className="h-[100%] flex flex-col justify-evenly items-center" className="flex flex-col"
> >
<div className="relative w-full">
{errors.general && ( {errors.general && (
<p className="text-red-500 text-sm text-center">{errors.general}</p> <p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full">{errors.general}</p>
)} )}
{errors.username && ( {errors.username && (
<p className="text-red-500 mt-3 text-sm">{errors.username}</p> <p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full">{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={`w-full mb-[2em] p-3 ${errors.username ? "border-red-500" : ""}`}
/> />
</div>
<div className="relative w-full">
{errors.email && ( {errors.email && (
<p className="text-red-500 mt-3 text-sm">{errors.email}</p> <p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full">{errors.email}</p>
)} )}
<Input <Input
name="email" name="email"
@@ -136,11 +147,13 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
placeholder="Email" placeholder="Email"
value={formData.email} value={formData.email}
onChange={handleInputChange} onChange={handleInputChange}
extraClasses={`${errors.email ? "border-red-500" : ""}`} extraClasses={`w-full mb-[2em] p-3 ${errors.email ? "border-red-500" : ""}`}
/> />
</div>
<div className="relative w-full">
{errors.password && ( {errors.password && (
<p className="text-red-500 mt-3 text-sm">{errors.password}</p> <p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full">{errors.password}</p>
)} )}
<Input <Input
name="password" name="password"
@@ -148,11 +161,13 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
placeholder="Password" placeholder="Password"
value={formData.password} value={formData.password}
onChange={handleInputChange} onChange={handleInputChange}
extraClasses={`${errors.password ? "border-red-500" : ""}`} extraClasses={`w-full mb-[2em] p-3 ${errors.password ? "border-red-500" : ""}`}
/> />
</div>
<div className="relative w-full">
{errors.confirmPassword && ( {errors.confirmPassword && (
<p className="text-red-500 mt-3 text-sm">{errors.confirmPassword}</p> <p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full">{errors.confirmPassword}</p>
)} )}
<Input <Input
name="confirmPassword" name="confirmPassword"
@@ -160,11 +175,21 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
placeholder="Confirm Password" placeholder="Confirm Password"
value={formData.confirmPassword} value={formData.confirmPassword}
onChange={handleInputChange} onChange={handleInputChange}
extraClasses={`${errors.confirmPassword ? "border-red-500" : ""}`} extraClasses={`w-full mb-[2em] p-3 ${errors.confirmPassword ? "border-red-500" : ""}`}
/> />
</div>
<Button type="submit">Register</Button> <Button type="submit">Register</Button>
</form> </form>
</div>
<div className="flex flex-col flex-items justify-evenly items-center w-full h-[5em]">
<GoogleLogin />
</div>
</div>
</div>
</>
); );
}; };

12
frontend/src/components/Layout/Input.tsx
View File

@@ -2,6 +2,7 @@ import React from "react";
interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> { interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
extraClasses?: string; extraClasses?: string;
children?: React.ReactNode;
} }
const Input: React.FC<InputProps> = ({ const Input: React.FC<InputProps> = ({
@@ -10,10 +11,13 @@ const Input: React.FC<InputProps> = ({
placeholder = "", placeholder = "",
value = "", value = "",
extraClasses = "", extraClasses = "",
onChange = () => {}, onChange = () => { },
children,
...props // all other HTML input props ...props // all other HTML input props
}) => { }) => {
return ( return (
<>
<div className="flex flex-col items-center">
<input <input
name={name} name={name}
type={type} type={type}
@@ -21,8 +25,12 @@ const Input: React.FC<InputProps> = ({
value={value} value={value}
onChange={onChange} onChange={onChange}
{...props} {...props}
className={`${extraClasses} p-2 rounded-[1rem] w-[20vw] focus:w-[30vw] bg-black/40 border border-gray-300 focus:border-purple-500 focus:outline-purple-500 text-center text-white text-xl transition-all`} className={`${extraClasses} relative p-2 rounded-[1rem] w-[20vw] focus:w-[21vw] bg-black/40 border border-gray-300 focus:border-purple-500 focus:outline-purple-500 text-center text-white text-xl transition-all`}
/> />
</div>
</>
); );
}; };

2
frontend/src/components/Layout/Theme.tsx
View File

@@ -20,7 +20,7 @@ const Theme: React.FC = () => {
const nextIndex = (currentIndex + 1) % themes.length; const nextIndex = (currentIndex + 1) % themes.length;
const nextTheme = themes[nextIndex]; const nextTheme = themes[nextIndex];
setTheme(nextTheme); setTheme(nextTheme);
document.body.setAttribute("data-theme", nextTheme); // Update globally document.body.setAttribute("data-theme", nextTheme);
}; };
return ( return (

6
frontend/tailwind.config.js
View File

@@ -21,6 +21,8 @@ export default {
backgroundImage: { backgroundImage: {
logo: "linear-gradient(45deg, #60A5FA, #8B5CF6, #EC4899, #FACC15,#60A5FA, #8B5CF6, #EC4899, #FACC15)", logo: "linear-gradient(45deg, #60A5FA, #8B5CF6, #EC4899, #FACC15,#60A5FA, #8B5CF6, #EC4899, #FACC15)",
'gradient-radial': 'radial-gradient(circle, var(--tw-gradient-stops))', 'gradient-radial': 'radial-gradient(circle, var(--tw-gradient-stops))',
authForm: "linear-gradient(45deg, #1A0B33, #240046, #3C096C, #5A189A)",
authFormBorder: "linear-gradient(45deg, #3A0CA3, #7209B7, #B5179E, #F72585)",
}, },
keyframes: { keyframes: {
@@ -56,6 +58,10 @@ export default {
'50%' : { opacity: '0.8'}, '50%' : { opacity: '0.8'},
'100%' : { opacity: '1'}, '100%' : { opacity: '1'},
}, },
fontSize: {
forgotPasswordResponsive: "clamp(0.3em, 3vw, 5em)",
}
}, },
}, },
plugins: [ plugins: [