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

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

@@ -80,16 +80,17 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
</div>
<div
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}
>
{/*Border Container*/}
<div
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
z-50 h-[70vh] mr-0.5 mb-0.5 m-auto min-w-[40vw] w-fit py-[50px] rounded-[2rem] transition-all"
className="front-content fixed ml-[1px] mt-[0.5px] inset-0 bg-authForm flex flex-col justify-center
z-50 h-[70vh] min-w-[30vw] w-fit py-[50px] rounded-[2rem] transition-all"
>
<div
id="login-methods"
@@ -108,9 +109,12 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
</div>
</div>
</div>
</>
);
};

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

@@ -101,53 +101,71 @@ const LoginForm: React.FC<SubmitProps> = ({ onSubmit, onForgotPassword }) => {
return (
<>
<div className="h-[100%] flex flex-col justify-evenly items-center">
<h1 className="text-white text-[2.5em] font-[800]"> Login </h1>
<div className="h-[100%] 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] h-[27.5em] border border-white/10">
<form
onSubmit={handleSubmit}
id="login-form"
className="h-[100%] flex flex-col items-center"
className="flex flex-col"
>
{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 && (
<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
name="username"
placeholder="Username"
value={formData.username}
onChange={handleInputChange}
extraClasses={`${errors.username ? "border-red-500" : ""}`}
extraClasses={`w-full mb-[2em] p-3 ${errors.username ? "border-red-500" : ""}`}
/>
{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
name="password"
type="password"
placeholder="Password"
value={formData.password}
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
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}>
<ForgotIcon className="flex flex-row justify-content "/>
Forgot Password
<ForgotIcon size={16} className="flex flex-row mr-1" />
<span> Forgot Password </span>
</button>
</div>
</div>
<Button type="submit">Login</Button>
</form>
<div className="flex flex-col flex-items justify-evenly items-center w-full h-[5em]">
<GoogleLogin />
</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 Button from "../Layout/Button";
import { useAuth } from "../../context/AuthContext";
import GoogleLogin from "./OAuth";
interface RegisterFormData {
username: string;
@@ -107,28 +108,38 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
};
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
onSubmit={handleSubmit}
id="register-form"
className="h-[100%] flex flex-col justify-evenly items-center"
className="flex flex-col"
>
<div className="relative w-full">
{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 && (
<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
name="username"
placeholder="Username"
value={formData.username}
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 && (
<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
name="email"
@@ -136,11 +147,13 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
placeholder="Email"
value={formData.email}
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 && (
<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
name="password"
@@ -148,11 +161,13 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
placeholder="Password"
value={formData.password}
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 && (
<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
name="confirmPassword"
@@ -160,11 +175,21 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
placeholder="Confirm Password"
value={formData.confirmPassword}
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>
</form>
</div>
<div className="flex flex-col flex-items justify-evenly items-center w-full h-[5em]">
<GoogleLogin />
</div>
</div>
</div>
</>
);
};

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

@@ -2,6 +2,7 @@ import React from "react";
interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
extraClasses?: string;
children?: React.ReactNode;
}
const Input: React.FC<InputProps> = ({
@@ -11,9 +12,12 @@ const Input: React.FC<InputProps> = ({
value = "",
extraClasses = "",
onChange = () => { },
children,
...props // all other HTML input props
}) => {
return (
<>
<div className="flex flex-col items-center">
<input
name={name}
type={type}
@@ -21,8 +25,12 @@ const Input: React.FC<InputProps> = ({
value={value}
onChange={onChange}
{...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 nextTheme = themes[nextIndex];
setTheme(nextTheme);
document.body.setAttribute("data-theme", nextTheme); // Update globally
document.body.setAttribute("data-theme", nextTheme);
};
return (

6
frontend/tailwind.config.js
View File

@@ -21,6 +21,8 @@ export default {
backgroundImage: {
logo: "linear-gradient(45deg, #60A5FA, #8B5CF6, #EC4899, #FACC15,#60A5FA, #8B5CF6, #EC4899, #FACC15)",
'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: {
@@ -56,6 +58,10 @@ export default {
'50%' : { opacity: '0.8'},
'100%' : { opacity: '1'},
},
fontSize: {
forgotPasswordResponsive: "clamp(0.3em, 3vw, 5em)",
}
},
},
plugins: [