Changeset c1d2f07 for frontend/src

Timestamp:

01/27/26 15:56:00 (6 months ago)

Author:

Dimitar Arsov <dimitararsov04@…>

Branches:

main

Children:

6de2873

Parents:

77e572b (diff), 16aed54 (diff)
Note: this is a merge changeset, the changes displayed below correspond to the merge itself.
Use the (diff) links above to see all the changes relative to each parent.

Message:

Merge branch 'main' into follow-user

Location:

frontend/src

Files:

• App.tsx (modified) (2 diffs)
• api/axiosInstance.ts (modified) (1 diff)
• pages/Login.tsx (modified) (2 diffs)
• pages/Nav.tsx (modified) (2 diffs)
• pages/Register.tsx (modified) (6 diffs)

frontend/src/App.tsx

@@ -1 +1 @@
 import { createBrowserRouter, Outlet, RouterProvider } from "react-router-dom";
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 import AllUsers from "./pages/AllUsers";
 import LandingPage from "./pages/LandingPage";
@@ -11 +13 @@
                 <div className="flex flex-col min-h-screen">
                         <Nav />
+                        <ToastContainer
+                                position="top-right"
+                                autoClose={2000}
+                                hideProgressBar={false}
+                                newestOnTop={false}
+                                closeOnClick
+                                rtl={false}
+                                pauseOnFocusLoss
+                                draggable
+                                pauseOnHover
+                                theme="light"
+                        />
                         <main className="grow">
                                 <Outlet />

frontend/src/api/axiosInstance.ts

@@ -70 +70 @@
                         [401, 403].includes(error.response?.status) &&
                         !originalConfig._retry &&
-                        originalConfig.url !== "/auth/refresh"
+                        originalConfig.url !== "/auth/refresh" &&
+                        originalConfig.url !== "/auth/login" &&
+                        originalConfig.url !== "/auth/register"
                 ) {
                         originalConfig._retry = true;

frontend/src/pages/Login.tsx

@@ -1 +1 @@
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
+import { toast } from "react-toastify";
 import axiosInstance, { scheduleTokenRefresh } from "../api/axiosInstance";
 import { useAuth } from "../context/authContext";
@@ -22 +23 @@
                         setUser(response.data.user);
                         navigate("/");
-                } catch (error) {
-                        setError("Login failed. Please check your credentials.");
+                        toast.success("Login successful!");
+                } catch (error: any) {
+                        const errorMessage =
+                                error.response?.data?.error ||
+                                "Login failed. Please check your credentials.";
+                        setError(`Login failed: ${errorMessage}`);
                 }
         };

frontend/src/pages/Nav.tsx

@@ -1 +1 @@
 import { Link } from "react-router-dom";
+import { toast } from "react-toastify";
 import axiosInstance, { baseURL } from "../api/axiosInstance";
 import Logo from "../assets/logo-finkwave.png";
@@ -12 +13 @@
                         await axiosInstance.post("/auth/logout");
                         setUser(undefined);
+                        toast.success("Logout successful!");
                 } catch (error) {
                         console.error("Logout failed:", error);
+                        toast.error("Logout failed!");
                 }
         };

frontend/src/pages/Register.tsx

@@ -1 +1 @@
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router";
+import { toast } from "react-toastify";
 import axiosInstance, { scheduleTokenRefresh } from "../api/axiosInstance";
 import { useAuth } from "../context/authContext";
@@ -15 +16 @@
                 null,
         );
+        const [error, setError] = useState<string | null>(null);
 
         const navigate = useNavigate();
@@ -26 +28 @@
         }, [previewProfilePhoto]);
 
+        const handleRemoveFile = () => {
+                if (previewProfilePhoto) {
+                        URL.revokeObjectURL(previewProfilePhoto);
+                }
+                setProfilePhotoFile(null);
+                setPreviewProfilePhoto(null);
+        };
+
         const handleRegister = async (e: React.FormEvent) => {
                 e.preventDefault();
-                // todo: add proper error handling
                 if (profilePhotoFile && profilePhotoFile.size > 5 * 1024 * 1024) {
                         alert("Max file size is 5MB");
+                        return;
+                }
+
+                if (username === "" || password === "" || fullname === "" || email === "") {
+                        setError("Please fill in all required fields.");
                         return;
                 }
@@ -53 +67 @@
                         setUser(response.data.user);
                         navigate("/");
-                } catch (error) {
-                        console.error("Registration failed:", error);
+                        toast.success("Registration successful!");
+                } catch (error: any) {
+                        const errorMessage = error.response?.data?.error || "Please try again.";
+                        setError(`Registration failed: ${errorMessage}`);
                 }
         };
@@ -61 +77 @@
                 <div className="flex flex-col items-center justify-center min-h-[90vh] bg-gray-100">
                         <h2 className="text-2xl mb-4">Register</h2>
-                        <form className="bg-white p-6 rounded shadow-md w-80">
+                        <form className="bg-white p-6 rounded shadow-md w-full max-w-md">
+                                {error && <p className="text-red-500 mb-4">{error}</p>}
                                 <div className="mb-4">
                                         <label className="block text-gray-700 mb-2" htmlFor="username">
@@ -115 +132 @@
                                                 <label
                                                         htmlFor="profilePhoto"
-                                                        className="px-4 py-2 bg-blue-500 text-white rounded cursor-pointer hover:bg-blue-600 transition-colors text-sm font-medium"
+                                                        className="px-4 py-2 bg-blue-500 text-white rounded cursor-pointer hover:bg-blue-600 transition-colors text-sm font-medium text-center"
                                                 >
                                                         Choose File
                                                 </label>
-                                                <span className="text-gray-600 text-sm">
+                                                <span className="text-gray-600 text-sm flex-1">
                                                         {profilePhotoFile ? profilePhotoFile.name : "No file chosen"}
                                                 </span>
+                                                {profilePhotoFile && (
+                                                        <button
+                                                                type="button"
+                                                                onClick={handleRemoveFile}
+                                                                className="px-3 py-2 bg-red-500 text-white rounded hover:bg-red-600 transition-colors text-sm font-medium"
+                                                        >
+                                                                Remove
+                                                        </button>
+                                                )}
                                         </div>
                                         <input