feat(system): implement 404 page with activity logging and change profile route format

Backend Changes: - Added public API endpoint /api/public/log-404 (no auth required) - Created backend/src/routes/public.js for public endpoints - Added ACTIONS.SYSTEM_404 and CATEGORIES.system to activity log service - Registered public routes in app.js Frontend Changes: - Created NotFoundPage.jsx with standalone layout (no auth required) - Added publicAPI.log404() to log 404 access attempts - Logs both authenticated and anonymous users - Changed profile route from /@:username to /u/:username - Made profile route public (removed ProtectedRoute wrapper) - Updated all profile links from /@${username} to /u/${username} in: - ChatMessage.jsx - DashboardMatchCard.jsx - MatchRequestCards.jsx - MatchCard.jsx - UserListItem.jsx - MatchChatPage.jsx - PublicProfilePage.jsx Fixes: - React Router doesn't support @ in path segments - 404 page now accessible to non-authenticated users without redirect - Profile route no longer catches all unmatched routes
2025-12-03 20:27:51 +01:00
parent eb5aacd797
commit 948c694ed6
13 changed files with 172 additions and 23 deletions
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -19,6 +19,7 @@ import HistoryPage from './pages/HistoryPage';
 import ProfilePage from './pages/ProfilePage';
 import PublicProfilePage from './pages/PublicProfilePage';
 import ActivityLogsPage from './pages/admin/ActivityLogsPage';
+import NotFoundPage from './pages/NotFoundPage';
 import VerificationBanner from './components/common/VerificationBanner';
 import InstallPWA from './components/pwa/InstallPWA';

@@ -210,18 +211,15 @@ function App() {
            }
          />

-          {/* Public Profile - must be before home route */}
-          <Route
-            path="/:username"
-            element={
-              <ProtectedRoute>
-                <PublicProfilePage />
-              </ProtectedRoute>
-            }
-          />

          {/* Home Page */}
          <Route path="/" element={<HomePage />} />
+
+          {/* Public Profile - /u/username format (no auth required) */}
+          <Route path="/u/:username" element={<PublicProfilePage />} />
+
+          {/* 404 Not Found - Catch all unmatched routes */}
+          <Route path="*" element={<NotFoundPage />} />
        </Routes>
      </AuthProvider>
    </BrowserRouter>
--- a/frontend/src/components/chat/ChatMessage.jsx
+++ b/frontend/src/components/chat/ChatMessage.jsx
@@ -119,7 +119,7 @@ const ChatMessage = ({ message, user, participant, isOwn, formatTime }) => {
                </span>
              )}
              <Link
-                to={`/@${user.username}`}
+                to={`/u/${user.username}`}
                className="hover:underline hover:text-primary-600"
              >
                {user.username}
--- a/frontend/src/components/dashboard/DashboardMatchCard.jsx
+++ b/frontend/src/components/dashboard/DashboardMatchCard.jsx
@@ -57,7 +57,7 @@ const DashboardMatchCard = ({ match }) => {
    <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4 hover:shadow-md transition-shadow">
      <div className="flex items-start gap-4">
        {/* Avatar */}
-        <Link to={`/@${partner.username}`} className="flex-shrink-0 relative">
+        <Link to={`/u/${partner.username}`} className="flex-shrink-0 relative">
          <img
            src={partner.avatar || `https://api.dicebear.com/7.x/avataaars/svg?seed=${partner.username}`}
            alt={partner.username}
@@ -74,7 +74,7 @@ const DashboardMatchCard = ({ match }) => {
        <div className="flex-1 min-w-0">
          <div className="flex items-start justify-between">
            <div>
-              <Link to={`/@${partner.username}`}>
+              <Link to={`/u/${partner.username}`}>
                <h3 className="font-semibold text-gray-900 hover:text-primary-600 transition-colors">
                  {partner.firstName && partner.lastName
                    ? `${partner.firstName} ${partner.lastName}`
--- a/frontend/src/components/dashboard/MatchRequestCards.jsx
+++ b/frontend/src/components/dashboard/MatchRequestCards.jsx
@@ -11,7 +11,7 @@ export const IncomingRequestCard = ({ request, onAccept, onReject, processing })
  return (
    <div className="bg-white rounded-lg shadow-sm border border-amber-200 p-4">
      <div className="flex items-start gap-4">
-        <Link to={`/@${requester.username}`} className="flex-shrink-0">
+        <Link to={`/u/${requester.username}`} className="flex-shrink-0">
          <img
            src={requester.avatar || `https://api.dicebear.com/7.x/avataaars/svg?seed=${requester.username}`}
            alt={requester.username}
@@ -20,7 +20,7 @@ export const IncomingRequestCard = ({ request, onAccept, onReject, processing })
        </Link>

        <div className="flex-1 min-w-0">
-          <Link to={`/@${requester.username}`}>
+          <Link to={`/u/${requester.username}`}>
            <h4 className="font-medium text-gray-900 hover:text-primary-600 transition-colors">
              {requester.firstName && requester.lastName
                ? `${requester.firstName} ${requester.lastName}`
@@ -69,7 +69,7 @@ export const OutgoingRequestCard = ({ request, onCancel, processing }) => {
  return (
    <div className="bg-white rounded-lg shadow-sm border border-blue-200 p-4">
      <div className="flex items-start gap-4">
-        <Link to={`/@${recipient.username}`} className="flex-shrink-0">
+        <Link to={`/u/${recipient.username}`} className="flex-shrink-0">
          <img
            src={recipient.avatar || `https://api.dicebear.com/7.x/avataaars/svg?seed=${recipient.username}`}
            alt={recipient.username}
@@ -78,7 +78,7 @@ export const OutgoingRequestCard = ({ request, onCancel, processing }) => {
        </Link>

        <div className="flex-1 min-w-0">
-          <Link to={`/@${recipient.username}`}>
+          <Link to={`/u/${recipient.username}`}>
            <h4 className="font-medium text-gray-900 hover:text-primary-600 transition-colors">
              {recipient.firstName && recipient.lastName
                ? `${recipient.firstName} ${recipient.lastName}`
--- a/frontend/src/components/matches/MatchCard.jsx
+++ b/frontend/src/components/matches/MatchCard.jsx
@@ -16,7 +16,7 @@ const MatchCard = ({ match, onAccept, onReject, onOpenChat, processing }) => {
      <div className="flex items-start justify-between">
        <div className="flex-1">
          <div className="flex items-center gap-3 mb-2">
-            <Link to={`/@${match.partner.username}`} className="flex-shrink-0">
+            <Link to={`/u/${match.partner.username}`} className="flex-shrink-0">
              <img
                src={match.partner.avatar || `https://api.dicebear.com/7.x/avataaars/svg?seed=${match.partner.username}`}
                alt={match.partner.username}
@@ -24,7 +24,7 @@ const MatchCard = ({ match, onAccept, onReject, onOpenChat, processing }) => {
              />
            </Link>
            <div>
-              <Link to={`/@${match.partner.username}`}>
+              <Link to={`/u/${match.partner.username}`}>
                <h3 className="font-semibold text-gray-900 hover:text-primary-600 transition-colors">
                  {match.partner.firstName && match.partner.lastName
                    ? `${match.partner.firstName} ${match.partner.lastName}`
--- a/frontend/src/components/users/UserListItem.jsx
+++ b/frontend/src/components/users/UserListItem.jsx
@@ -46,7 +46,7 @@ const UserListItem = ({

  const usernameContent = linkToProfile ? (
    <Link
-      to={`/@${user.username}`}
+      to={`/u/${user.username}`}
      className={`${usernameClasses} hover:text-primary-600`}
    >
      {user.username}
--- a/frontend/src/pages/MatchChatPage.jsx
+++ b/frontend/src/pages/MatchChatPage.jsx
@@ -219,7 +219,7 @@ const MatchChatPage = () => {
        <div className="bg-primary-600 text-white p-4">
            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-4">
-                <Link to={`/@${partner.username}`} className="flex-shrink-0">
+                <Link to={`/u/${partner.username}`} className="flex-shrink-0">
                  <Avatar
                    src={partner.avatar}
                    username={partner.username}
@@ -229,7 +229,7 @@ const MatchChatPage = () => {
                  />
                </Link>
                <div>
-                  <Link to={`/@${partner.username}`}>
+                  <Link to={`/u/${partner.username}`}>
                    <h2 className="text-xl font-bold hover:text-primary-100 transition-colors">
                      {partner.firstName && partner.lastName
                        ? `${partner.firstName} ${partner.lastName}`
--- a/frontend/src/pages/NotFoundPage.jsx
+++ b/frontend/src/pages/NotFoundPage.jsx
@@ -0,0 +1,83 @@
+import { useEffect } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { Home, ArrowLeft } from 'lucide-react';
+import { publicAPI } from '../services/api';
+
+export default function NotFoundPage() {
+  const location = useLocation();
+
+  useEffect(() => {
+    // Log 404 access to activity logs (works for both logged in and non-logged in users)
+    const log404 = async () => {
+      try {
+        await publicAPI.log404(location.pathname, location.search);
+      } catch (err) {
+        // Silently fail - logging should never break user experience
+        console.debug('Failed to log 404:', err);
+      }
+    };
+
+    log404();
+  }, [location.pathname, location.search]);
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      {/* Simple header */}
+      <header className="bg-white shadow-sm">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+          <Link to="/" className="flex items-center gap-2 text-primary-600 hover:text-primary-700">
+            <Home size={24} />
+            <span className="text-xl font-bold">spotlight.cam</span>
+          </Link>
+        </div>
+      </header>
+
+      <div className="min-h-screen flex items-center justify-center px-4 -mt-16">
+        <div className="max-w-md w-full text-center">
+          {/* 404 Icon */}
+          <div className="mb-8">
+            <div className="text-9xl font-bold text-primary-600 mb-4">404</div>
+            <h1 className="text-3xl font-bold text-gray-900 mb-2">
+              Page Not Found
+            </h1>
+            <p className="text-gray-600">
+              The page you're looking for doesn't exist or has been moved.
+            </p>
+          </div>
+
+          {/* Current Path */}
+          <div className="mb-8 p-4 bg-gray-100 rounded-lg">
+            <p className="text-sm text-gray-500 mb-1">Requested URL:</p>
+            <code className="text-sm text-gray-800 break-all">
+              {location.pathname}
+              {location.search}
+            </code>
+          </div>
+
+          {/* Action Buttons */}
+          <div className="flex flex-col sm:flex-row gap-3 justify-center">
+            <button
+              onClick={() => window.history.back()}
+              className="inline-flex items-center justify-center gap-2 px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
+            >
+              <ArrowLeft size={20} />
+              Go Back
+            </button>
+            <Link
+              to="/"
+              className="inline-flex items-center justify-center gap-2 px-6 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors"
+            >
+              <Home size={20} />
+              Go Home
+            </Link>
+          </div>
+
+          {/* Help Text */}
+          <div className="mt-8 text-sm text-gray-500">
+            <p>If you believe this is an error, please contact support.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/pages/PublicProfilePage.jsx
+++ b/frontend/src/pages/PublicProfilePage.jsx
@@ -267,7 +267,7 @@ const PublicProfilePage = () => {
                    <div key={rating.id} className="border-b pb-4 last:border-b-0">
                      <div className="flex items-start gap-4">
                        {/* Rater Info */}
-                        <Link to={`/@${rating.rater.username}`} className="flex-shrink-0">
+                        <Link to={`/u/${rating.rater.username}`} className="flex-shrink-0">
                          <Avatar
                            src={rating.rater.avatar}
                            username={rating.rater.username}
@@ -282,7 +282,7 @@ const PublicProfilePage = () => {
                          <div className="flex items-start justify-between mb-2">
                            <div>
                              <Link
-                                to={`/@${rating.rater.username}`}
+                                to={`/u/${rating.rater.username}`}
                                className="font-semibold text-gray-900 hover:text-primary-600"
                              >
                                {rating.rater.firstName && rating.rater.lastName
--- a/frontend/src/services/api.js
+++ b/frontend/src/services/api.js
@@ -495,4 +495,16 @@ export const adminAPI = {
  },
 };

+// Public API (no authentication required)
+export const publicAPI = {
+  async log404(path, search) {
+    const data = await fetchAPI('/public/log-404', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ path, search }),
+    });
+    return data;
+  },
+};
+
 export { ApiError };