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

- Added Chat frontend, interfaces with backend;

Browse Source 
- Updated styles for VideoPage;
- Added StreamerRoute component;
- Remove unused Login and Signup pages;
- Update to Navbar and Logo components for new structure on different pages;
- Update to auth flow to display error messages to user;
This commit is contained in:
Chris-1010
2025-01-25 02:34:06 +00:00
parent 5c16092b1c
commit a409e74992
23 changed files with 625 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -13,10 +13,10 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
return (
<>
<div className="blurring-layer fixed z-10 inset-0 w-screen h-screen backdrop-blur-sm group-has-[input:focus]:backdrop-blur-[5px]"></div>
<div id="blurring-layer" className="fixed z-10 inset-0 w-screen h-screen backdrop-blur-sm group-has-[input:focus]:backdrop-blur-[5px]"></div>
<div className="modal-container fixed inset-0 bg-black/30 has-[input:focus]:bg-black/40 flex flex-col items-center justify-around z-50 h-[70vh] m-auto min-w-[40vw] w-fit py-[50px] rounded-[2rem] transition-all">
<div className="login-methods w-full flex flex-row items-center justify-evenly">
<div id="modal-container" className="fixed inset-0 bg-black/30 has-[input:focus]:bg-black/40 flex flex-col items-center justify-around z-50 h-[70vh] m-auto min-w-[40vw] w-fit py-[50px] rounded-[2rem] transition-all">
<div id="login-methods" className="w-full flex flex-row items-center justify-evenly">
<button
onClick={onClose}
className="absolute top-[1rem] right-[2rem] text-[2rem] text-white hover:text-red-500 font-black hover:text-[2.5rem] transition-all"

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

@@ -61,27 +61,30 @@ const LoginForm: React.FC = () => {
const data = await response.json();
if (!response.ok) {
throw new Error(data.message || "Login failed");
}
if (data.logged_in) {
//TODO: Handle successful login (e.g., redirect to home page)
console.log("Login successful");
setIsLoggedIn(true);
window.location.reload();
} else {
// Handle authentication errors
if (data.errors) {
// Handle authentication errors from server
if (data.error_fields) {
const newErrors: FormErrors = {};
for (const field of data.error_fields) {
newErrors[field as keyof FormErrors] = data.message;
}
setErrors(newErrors);
} else {
// If no specific fields are indicated, set a general error
setErrors({
general: "Invalid username or password",
general: data.message || "An error occurred during login",
});
}
}
} catch (error) {
console.error("Login error:", error);
console.error("Error logging in:", error);
setErrors({
general: "An error occurred during login. Please try again.",
general: "An error occurred during login",
});
}
}
@@ -90,7 +93,8 @@ const LoginForm: React.FC = () => {
return (
<form
onSubmit={handleSubmit}
className="login-form h-[100%] flex flex-col h-full justify-evenly items-center"
id="login-form"
className="h-[100%] flex flex-col h-full justify-evenly items-center"
>
{errors.general && (
<p className="text-red-500 text-sm text-center">{errors.general}</p>

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

@@ -15,6 +15,7 @@ interface FormErrors {
email?: string;
password?: string;
confirmPassword?: string;
general?: string; // For general authentication errors
}
const RegisterForm: React.FC = () => {
@@ -68,14 +69,8 @@ const RegisterForm: React.FC = () => {
credentials: "include",
body: JSON.stringify(formData),
});
console.log(`sending data: ${JSON.stringify(formData)}`);
const data = await response.json();
if (!response.ok) {
throw new Error(
data.message || `Registration failed. ${response.body}`
);
}
const data = await response.json();
if (data.account_created) {
//TODO Handle successful registration (e.g., redirect or show success message)
@@ -84,17 +79,24 @@ const RegisterForm: React.FC = () => {
window.location.reload();
} else {
// Handle validation errors from server
const serverErrors: FormErrors = {};
if (data.errors) {
Object.entries(data.errors).forEach(([field, message]) => {
serverErrors[field as keyof FormErrors] = message as string;
if (data.error_fields) {
const newErrors: FormErrors = {};
for (const field of data.error_fields) {
newErrors[field as keyof FormErrors] = data.message;
}
setErrors(newErrors);
} else {
// If no specific fields are indicated, set a general error
setErrors({
general: data.message || "An error occurred during registration",
});
setErrors(serverErrors);
}
}
} catch (error) {
console.error("Registration error:", error);
//TODO Show user-friendly error message via Alert component maybe
console.error("Error Registering:", error);
setErrors({
general: "An error occurred during registration",
});
}
}
};
@@ -102,8 +104,13 @@ const RegisterForm: React.FC = () => {
return (
<form
onSubmit={handleSubmit}
className="register-form h-[100%] flex flex-col h-full justify-evenly items-center"
id="register-form"
className="h-[100%] flex flex-col h-full 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>
)}