Merge pull request 'Merge from Dev' (#8) from dev into loaf-prod

Reviewed-on: #8

src/App.js

@@ -51,6 +51,7 @@ import ContactUs from './pages/ContactUs';
 import TermsOfService from './pages/TermsOfService';
 import PrivacyPolicy from './pages/PrivacyPolicy';
 import AcceptInvitation from './pages/AcceptInvitation';
+import NotFound from './pages/NotFound';
 
 const PrivateRoute = ({ children, adminOnly = false }) => {
   const { user, loading } = useAuth();
@@ -280,6 +281,9 @@ function App() {
               </AdminLayout>
             </PrivateRoute>
           } />
+
+          {/* 404 - Catch all undefined routes */}
+          <Route path="*" element={<NotFound />} />
         </Routes>
         <Toaster position="top-right" />
       </BrowserRouter>

src/context/AuthContext.js

@@ -3,7 +3,14 @@ import axios from 'axios';
 
 const AuthContext = createContext();
 
-const API_URL = process.env.REACT_APP_BACKEND_URL;
+const API_URL = process.env.REACT_APP_BACKEND_URL || window.location.origin;
+
+// Log environment on module load for debugging
+console.log('[AuthContext] Module initialized with:', {
+  REACT_APP_BACKEND_URL: process.env.REACT_APP_BACKEND_URL,
+  REACT_APP_BASENAME: process.env.REACT_APP_BASENAME,
+  API_URL: API_URL
+});
 
 export const AuthProvider = ({ children }) => {
   const [user, setUser] = useState(null);
@@ -54,21 +61,79 @@ export const AuthProvider = ({ children }) => {
   };
 
   const login = async (email, password) => {
-    const response = await axios.post(`${API_URL}/api/auth/login`, { email, password });
+    try {
+      console.log('[AuthContext] Starting login request...', {
+        API_URL: API_URL,
+        envBackendUrl: process.env.REACT_APP_BACKEND_URL,
+        fullUrl: `${API_URL}/api/auth/login`
+      });
+
+      const response = await axios.post(
+        `${API_URL}/api/auth/login`,
+        { email, password },
+        {
+          timeout: 30000, // 30 second timeout
+          headers: {
+            'Content-Type': 'application/json'
+          }
+        }
+      );
+
+      console.log('[AuthContext] Login response received:', {
+        status: response.status,
+        hasToken: !!response.data?.access_token,
+        hasUser: !!response.data?.user
+      });
+
       const { access_token, user: userData } = response.data;
+
+      // Store token first
       localStorage.setItem('token', access_token);
+      console.log('[AuthContext] Token stored in localStorage');
+
+      // Update state
       setToken(access_token);
       setUser(userData);
+      console.log('[AuthContext] User state updated:', {
+        email: userData.email,
+        role: userData.role
+      });
 
       // Fetch user permissions (don't let this fail the login)
+      // Use setTimeout to defer permission fetching slightly
+      setTimeout(async () => {
         try {
+          console.log('[AuthContext] Fetching permissions...');
           await fetchPermissions(access_token);
+          console.log('[AuthContext] Permissions fetched successfully');
         } catch (error) {
-      console.error('Failed to fetch permissions during login, will retry later:', error);
+          console.error('[AuthContext] Failed to fetch permissions (non-critical):', {
+            message: error.message,
+            response: error.response?.data,
+            status: error.response?.status
+          });
           // Don't throw - permissions can be fetched later if needed
         }
+      }, 100); // Small delay to ensure state is settled
 
       return userData;
+    } catch (error) {
+      // Enhanced error logging
+      console.error('[AuthContext] Login failed:', {
+        message: error.message,
+        response: error.response?.data,
+        status: error.response?.status,
+        code: error.code,
+        config: {
+          url: error.config?.url,
+          method: error.config?.method,
+          timeout: error.config?.timeout
+        }
+      });
+
+      // Re-throw to let Login component handle the error
+      throw error;
+    }
   };
 
   const logout = () => {

src/pages/AcceptInvitation.js

@@ -19,6 +19,8 @@ const AcceptInvitation = () => {
   const [invitation, setInvitation] = useState(null);
   const [loading, setLoading] = useState(true);
   const [submitting, setSubmitting] = useState(false);
+  const [success, setSuccess] = useState(false);
+  const [successUser, setSuccessUser] = useState(null);
   const [error, setError] = useState(null);
   const [formData, setFormData] = useState({
     password: '',
@@ -134,19 +136,23 @@ const AcceptInvitation = () => {
       const { access_token, user } = response.data;
       localStorage.setItem('token', access_token);
 
-      toast.success('Welcome to LOAF! Your account has been created successfully.');
-
       // Call login to update auth context
       if (login) {
         await login(invitation.email, formData.password);
       }
 
-      // Redirect based on role
+      // Show success state
+      setSuccessUser(user);
+      setSuccess(true);
+
+      // Auto-redirect after 3 seconds
+      setTimeout(() => {
         if (user.role === 'admin' || user.role === 'superadmin') {
-        navigate('/admin/dashboard');
+          navigate('/admin');
         } else {
           navigate('/dashboard');
         }
+      }, 3000);
     } catch (error) {
       const errorMessage = error.response?.data?.detail || 'Failed to accept invitation';
       toast.error(errorMessage);
@@ -206,6 +212,83 @@ const AcceptInvitation = () => {
     );
   }
 
+  if (success) {
+    const redirectPath = successUser?.role === 'admin' || successUser?.role === 'superadmin' ? '/admin' : '/dashboard';
+
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-[#F9F8FB] to-white flex items-center justify-center p-4">
+        <Card className="w-full max-w-2xl p-12 bg-white rounded-2xl border border-[#ddd8eb] text-center">
+          {/* Success Animation */}
+          <div className="mb-8">
+            <div className="h-24 w-24 mx-auto rounded-full bg-gradient-to-br from-[#81B29A] to-[#6DA085] flex items-center justify-center animate-bounce">
+              <CheckCircle className="h-12 w-12 text-white" />
+            </div>
+          </div>
+
+          {/* Success Message */}
+          <h1 className="text-4xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+            Welcome to LOAF! 🎉
+          </h1>
+          <p className="text-xl text-[#664fa3] mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            Your account has been created successfully.
+          </p>
+
+          {/* User Info Card */}
+          <div className="mb-8 p-6 bg-gradient-to-r from-[#DDD8EB] to-[#F9F8FB] rounded-xl">
+            <div className="grid md:grid-cols-2 gap-4 text-left">
+              <div>
+                <p className="text-sm text-[#664fa3] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  Name
+                </p>
+                <p className="font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                  {successUser?.first_name} {successUser?.last_name}
+                </p>
+              </div>
+              <div>
+                <p className="text-sm text-[#664fa3] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  Email
+                </p>
+                <p className="font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                  {successUser?.email}
+                </p>
+              </div>
+              <div>
+                <p className="text-sm text-[#664fa3] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  Role
+                </p>
+                <div>{getRoleBadge(successUser?.role)}</div>
+              </div>
+              <div>
+                <p className="text-sm text-[#664fa3] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  Status
+                </p>
+                <Badge className="bg-[#81B29A] text-white px-4 py-2 rounded-full text-sm">
+                  {successUser?.status}
+                </Badge>
+              </div>
+            </div>
+          </div>
+
+          {/* Redirect Info */}
+          <div className="mb-8 p-4 bg-blue-50 border border-blue-200 rounded-xl">
+            <p className="text-sm text-blue-800" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <Loader2 className="h-4 w-4 inline mr-2 animate-spin" />
+              Redirecting you to your dashboard in 3 seconds...
+            </p>
+          </div>
+
+          {/* Manual Continue Button */}
+          <Button
+            onClick={() => navigate(redirectPath)}
+            className="w-full h-14 rounded-xl bg-gradient-to-r from-[#81B29A] to-[#6DA085] hover:from-[#6DA085] hover:to-[#5A8F72] text-white text-lg font-semibold"
+          >
+            Continue to Dashboard
+          </Button>
+        </Card>
+      </div>
+    );
+  }
+
   return (
     <div className="min-h-screen bg-gradient-to-br from-[#F9F8FB] to-white flex items-center justify-center p-4">
       <Card className="w-full max-w-3xl p-8 md:p-12 bg-white rounded-2xl border border-[#ddd8eb]">

src/pages/NotFound.js

@@ -0,0 +1,81 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Button } from '../components/ui/button';
+import { Card } from '../components/ui/card';
+import { Home, ArrowLeft, Search } from 'lucide-react';
+
+const NotFound = () => {
+  const navigate = useNavigate();
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-[#F9F8FB] to-white flex items-center justify-center p-4">
+      <Card className="w-full max-w-2xl p-12 bg-white rounded-2xl border border-[#ddd8eb] text-center">
+        {/* 404 Illustration */}
+        <div className="mb-8">
+          <div className="relative">
+            <h1
+              className="text-[180px] font-bold text-transparent bg-clip-text bg-gradient-to-br from-[#ddd8eb] to-[#f9f8fb] leading-none"
+              style={{ fontFamily: "'Inter', sans-serif" }}
+            >
+              404
+            </h1>
+            <div className="absolute inset-0 flex items-center justify-center">
+              <Search className="h-24 w-24 text-[#664fa3] opacity-30" />
+            </div>
+          </div>
+        </div>
+
+        {/* Message */}
+        <h2
+          className="text-3xl font-semibold text-[#422268] mb-4"
+          style={{ fontFamily: "'Inter', sans-serif" }}
+        >
+          Page Not Found
+        </h2>
+        <p
+          className="text-lg text-[#664fa3] mb-8 max-w-md mx-auto"
+          style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+        >
+          Oops! The page you're looking for doesn't exist. It might have been moved or deleted.
+        </p>
+
+        {/* Action Buttons */}
+        <div className="flex flex-col sm:flex-row gap-4 justify-center">
+          <Button
+            onClick={() => navigate(-1)}
+            variant="outline"
+            className="rounded-xl border-2 border-[#664fa3] text-[#664fa3] hover:bg-[#f9f8fb] px-6 py-6"
+          >
+            <ArrowLeft className="h-5 w-5 mr-2" />
+            Go Back
+          </Button>
+          <Button
+            onClick={() => navigate('/')}
+            className="rounded-xl bg-gradient-to-r from-[#664fa3] to-[#422268] hover:from-[#422268] hover:to-[#664fa3] text-white px-6 py-6"
+          >
+            <Home className="h-5 w-5 mr-2" />
+            Back to Home
+          </Button>
+        </div>
+
+        {/* Help Text */}
+        <div className="mt-8 pt-8 border-t border-[#ddd8eb]">
+          <p
+            className="text-sm text-[#664fa3]"
+            style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+          >
+            Need help? Contact us at{' '}
+            <a
+              href="mailto:support@loaftx.org"
+              className="text-[#664fa3] hover:text-[#422268] font-semibold underline"
+            >
+              support@loaftx.org
+            </a>
+          </p>
+        </div>
+      </Card>
+    </div>
+  );
+};
+
+export default NotFound;

src/utils/api.js

@@ -4,14 +4,60 @@ const API_URL = process.env.REACT_APP_BACKEND_URL;
 
 export const api = axios.create({
   baseURL: `${API_URL}/api`,
+  timeout: 30000, // 30 second timeout for all requests
 });
 
-api.interceptors.request.use((config) => {
+// Request interceptor - add auth token
+api.interceptors.request.use(
+  (config) => {
     const token = localStorage.getItem('token');
     if (token) {
       config.headers.Authorization = `Bearer ${token}`;
     }
     return config;
-});
+  },
+  (error) => {
+    console.error('[API] Request error:', error);
+    return Promise.reject(error);
+  }
+);
+
+// Response interceptor - handle errors and retries
+api.interceptors.response.use(
+  (response) => {
+    return response;
+  },
+  async (error) => {
+    const config = error.config;
+
+    // Don't retry if we've already retried or if it's a client error (4xx)
+    if (!config || config.__isRetry || (error.response && error.response.status < 500)) {
+      console.error('[API] Request failed:', {
+        url: config?.url,
+        method: config?.method,
+        status: error.response?.status,
+        message: error.message,
+        data: error.response?.data
+      });
+      return Promise.reject(error);
+    }
+
+    // Mark as retry to prevent infinite loops
+    config.__isRetry = true;
+
+    // Retry after 1 second for server errors or network issues
+    console.warn('[API] Retrying request after 1s:', {
+      url: config.url,
+      method: config.method,
+      error: error.message
+    });
+
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve(api.request(config));
+      }, 1000);
+    });
+  }
+);
 
 export default api;