From 892e45363ec7ef82449e129ec77cf32f19fac411 Mon Sep 17 00:00:00 2001
From: M9nx <mohvmedzaki1@gmail.com>
Date: Tue, 9 Sep 2025 23:37:53 +0300
Subject: [PATCH 1/4] Add avatar upload functionality to settings page

Introduces avatar upload and preview features in the user settings page. Users can now select and upload a new profile photo, with immediate preview and feedback on upload status. Updates are integrated with the authentication context to reflect changes.
---
 resources/js/pages/SettingsPage.tsx | 122 +++++++++++++++++++++++++++-
 1 file changed, 120 insertions(+), 2 deletions(-)

diff --git a/resources/js/pages/SettingsPage.tsx b/resources/js/pages/SettingsPage.tsx
index f24d09d..237e7e6 100644
--- a/resources/js/pages/SettingsPage.tsx
+++ b/resources/js/pages/SettingsPage.tsx
@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import { useAuth } from '../contexts/AuthContext';
-import { User, Lock, Eye, Trash2 } from 'lucide-react';
+import { User, Lock, Eye, Trash2, Upload } from 'lucide-react';
 
 export const SettingsPage: React.FC = () => {
   const { user, updateUser } = useAuth();
@@ -11,6 +11,10 @@ export const SettingsPage: React.FC = () => {
     username: user?.username || '',
     bio: user?.bio || '',
   });
+  
+  const [avatarFile, setAvatarFile] = useState<File | null>(null);
+  const [avatarPreview, setAvatarPreview] = useState<string | null>(user?.avatar || null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
 
   const [passwordData, setPasswordData] = useState({
     current_password: '',
@@ -21,6 +25,73 @@ export const SettingsPage: React.FC = () => {
   const [isLoading, setIsLoading] = useState(false);
   const [message, setMessage] = useState('');
 
+  const handleAvatarChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files[0]) {
+      const file = e.target.files[0];
+      setAvatarFile(file);
+      
+      // Create a preview URL
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        setAvatarPreview(reader.result as string);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  const handleAvatarUpload = async () => {
+    if (!avatarFile) {
+      setMessage('Please select an image file');
+      return;
+    }
+
+    setIsLoading(true);
+    setMessage('');
+
+    try {
+      const formData = new FormData();
+      formData.append('avatar', avatarFile);
+
+      const response = await fetch('/api/user/avatar', {
+        method: 'POST',
+        headers: {
+          'Authorization': `Bearer ${localStorage.getItem('auth_token')}`,
+          'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
+        },
+        body: formData,
+      });
+
+      if (response.ok) {
+        const result = await response.json();
+        if (result.success) {
+          // Update user avatar in auth context
+          if (user) {
+            updateUser({
+              ...user,
+              avatar: result.data.avatar
+            });
+          }
+          setMessage('Avatar updated successfully!');
+        } else {
+          setMessage(result.message || 'Failed to update avatar');
+        }
+      } else {
+        const error = await response.json();
+        if (response.status === 422 && error.errors) {
+          const errorMessages = Object.values(error.errors).flat().join(', ');
+          setMessage(`Validation error: ${errorMessages}`);
+        } else {
+          setMessage(error.message || 'Failed to update avatar');
+        }
+      }
+    } catch (err) {
+      console.error('Avatar upload error:', err);
+      setMessage('An error occurred while uploading your avatar');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   const handleProfileUpdate = async (e: React.FormEvent) => {
     e.preventDefault();
     setIsLoading(true);
@@ -170,6 +241,53 @@ export const SettingsPage: React.FC = () => {
               {activeTab === 'profile' && (
                 <div>
                   <h3 className="text-xl font-bold mb-6">Profile Information</h3>
+                  
+                  {/* Avatar Upload Section */}
+                  <div className="mb-8">
+                    <label className="block text-sm font-medium text-gray-700 mb-3">
+                      Profile Photo
+                    </label>
+                    <div className="flex items-center space-x-6">
+                      {avatarPreview ? (
+                        <div className="w-24 h-24 rounded-full overflow-hidden">
+                          <img
+                            src={avatarPreview}
+                            alt="Avatar preview"
+                            className="w-full h-full object-cover"
+                          />
+                        </div>
+                      ) : (
+                        <div className="w-24 h-24 rounded-full bg-gray-200 flex items-center justify-center">
+                          <span className="text-gray-500 text-xl">
+                            {user?.name ? user.name.charAt(0).toUpperCase() : 'U'}
+                          </span>
+                        </div>
+                      )}
+                      
+                      <div className="flex flex-col space-y-2">
+                        <label className="cursor-pointer bg-white py-2 px-3 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50">
+                          Select New Photo
+                          <input
+                            type="file"
+                            className="hidden"
+                            ref={fileInputRef}
+                            onChange={handleAvatarChange}
+                            accept="image/*"
+                          />
+                        </label>
+                        
+                        <button 
+                          type="button"
+                          onClick={handleAvatarUpload}
+                          disabled={!avatarFile || isLoading}
+                          className="py-2 px-3 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed"
+                        >
+                          {isLoading ? 'Uploading...' : 'Upload Avatar'}
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                  
                   <form onSubmit={handleProfileUpdate} className="space-y-6">
                     <div>
                       <label htmlFor="name" className="block text-sm font-medium text-gray-700">

From 601e569b5697270735c331cedc0841b650025479 Mon Sep 17 00:00:00 2001
From: M9nx <mohvmedzaki1@gmail.com>
Date: Tue, 9 Sep 2025 23:54:30 +0300
Subject: [PATCH 2/4] Improve auth token validation and settings error handling

AuthContext now verifies the stored token with the server and logs out if invalid. SettingsPage improves user update logic and handles validation errors more consistently for both profile and password updates.
---
 resources/js/contexts/AuthContext.tsx | 22 +++++++++++++++++++---
 resources/js/pages/SettingsPage.tsx   | 27 ++++++++++++++++++---------
 2 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/resources/js/contexts/AuthContext.tsx b/resources/js/contexts/AuthContext.tsx
index f602c64..52acdc8 100644
--- a/resources/js/contexts/AuthContext.tsx
+++ b/resources/js/contexts/AuthContext.tsx
@@ -35,9 +35,25 @@ export const AuthProvider = ({ children }: AuthProviderProps) => {
           setToken(storedToken);
           setUser(JSON.parse(storedUser));
           
-          // Optional: Verify token is still valid (comment out if causing issues)
-          // const response = await api.get('/user');
-          // setUser(response.data);
+          // Verify token is still valid with the server
+          const response = await fetch('/api/user', {
+            headers: {
+              'Authorization': `Bearer ${storedToken}`,
+              'Accept': 'application/json',
+            }
+          });
+          
+          if (response.ok) {
+            const userData = await response.json();
+            setUser(userData);
+          } else {
+            // Token invalid, log out
+            console.log('Auth token invalid, logging out');
+            setToken(null);
+            setUser(null);
+            localStorage.removeItem('auth_token');
+            localStorage.removeItem('user');
+          }
         } catch (error) {
           console.error('Auth initialization failed:', error);
           logout();
diff --git a/resources/js/pages/SettingsPage.tsx b/resources/js/pages/SettingsPage.tsx
index 237e7e6..14b5fe8 100644
--- a/resources/js/pages/SettingsPage.tsx
+++ b/resources/js/pages/SettingsPage.tsx
@@ -114,21 +114,25 @@ export const SettingsPage: React.FC = () => {
       console.log('Response data:', result);
 
       if (response.ok) {
-        const result = await response.json();
         if (result.success) {
-          updateUser(result.data);
+          // Check if user exists and update it
+          if (user && result.data) {
+            updateUser({
+              ...user,
+              ...result.data
+            });
+          }
           setMessage('Profile updated successfully!');
         } else {
           setMessage(result.message || 'Failed to update profile');
         }
       } else {
-        const error = await response.json();
         // Handle validation errors properly
-        if (response.status === 422 && error.errors) {
-          const errorMessages = Object.values(error.errors).flat().join(', ');
+        if (response.status === 422 && result.errors) {
+          const errorMessages = Object.values(result.errors).flat().join(', ');
           setMessage(`Validation error: ${errorMessages}`);
         } else {
-          setMessage(error.message || 'Failed to update profile');
+          setMessage(result.message || 'Failed to update profile');
         }
       }
     } catch (err) {
@@ -164,8 +168,9 @@ export const SettingsPage: React.FC = () => {
         }),
       });
 
+      const result = await response.json();
+      
       if (response.ok) {
-        const result = await response.json();
         if (result.success) {
           setMessage('Password updated successfully!');
           setPasswordData({
@@ -177,8 +182,12 @@ export const SettingsPage: React.FC = () => {
           setMessage(result.message || 'Failed to update password');
         }
       } else {
-        const error = await response.json();
-        setMessage(error.message || 'Failed to update password');
+        if (response.status === 422 && result.errors) {
+          const errorMessages = Object.values(result.errors).flat().join(', ');
+          setMessage(`Validation error: ${errorMessages}`);
+        } else {
+          setMessage(result.message || 'Failed to update password');
+        }
       }
     } catch (err) {
       console.error('Password update error:', err);

From f28981a3c1ad2f1f8ef91cff861172eb3edaa166 Mon Sep 17 00:00:00 2001
From: M9nx <mohvmedzaki1@gmail.com>
Date: Wed, 10 Sep 2025 00:06:27 +0300
Subject: [PATCH 3/4] Improve auth flow and navigation handling

Refines ProtectedRoute to check for stored tokens and redirects unauthenticated users to the home page instead of login. Updates AuthContext to avoid logging out on token validation failure and to reduce UI flicker by setting user/token immediately. Removes the Profile link from Sidebar and ensures LoginPage always navigates to home after successful login.
---
 resources/js/components/ProtectedRoute.tsx | 12 +++++---
 resources/js/components/Sidebar.tsx        |  1 -
 resources/js/contexts/AuthContext.tsx      | 34 ++++++++++++----------
 resources/js/pages/auth/LoginPage.tsx      |  2 ++
 4 files changed, 29 insertions(+), 20 deletions(-)

diff --git a/resources/js/components/ProtectedRoute.tsx b/resources/js/components/ProtectedRoute.tsx
index 6d0bc90..b322c4e 100644
--- a/resources/js/components/ProtectedRoute.tsx
+++ b/resources/js/components/ProtectedRoute.tsx
@@ -10,14 +10,18 @@ interface ProtectedRouteProps {
 export const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ children }) => {
   const { isAuthenticated, isLoading } = useAuth();
   const location = useLocation();
+  
+  // Check if we have a token in localStorage (even if not validated yet)
+  const hasStoredToken = !!localStorage.getItem('auth_token');
 
   if (isLoading) {
-    return <LoadingPage message="Checking authentication..." />;
+    return <LoadingPage message="Loading..." />;
   }
 
-  if (!isAuthenticated) {
-    // Redirect to login page with return url
-    return <Navigate to="/login" state={{ from: location }} replace />;
+  // Only redirect if definitely not authenticated AND no token in storage
+  if (!isAuthenticated && !hasStoredToken) {
+    // Go to home page instead of login
+    return <Navigate to="/" replace />;
   }
 
   return <>{children}</>;
diff --git a/resources/js/components/Sidebar.tsx b/resources/js/components/Sidebar.tsx
index 20e2a60..0755cb8 100644
--- a/resources/js/components/Sidebar.tsx
+++ b/resources/js/components/Sidebar.tsx
@@ -32,7 +32,6 @@ export const Sidebar: React.FC<SidebarProps> = ({ isOpen, onClose }) => {
   const menuItems = [
     { icon: Home, label: 'Home', path: '/', show: true },
     { icon: BookOpen, label: 'Library', path: '/library', show: isAuthenticated },
-    { icon: User, label: 'Profile', path: user ? `/profile/${user.id}` : '/profile', show: isAuthenticated },
     { icon: FileText, label: 'Stories', path: '/stories', show: isAuthenticated },
     { icon: BarChart3, label: 'Stats', path: '/stats', show: isAuthenticated },
     { icon: Edit3, label: 'Write', path: '/posts/create', show: isAuthenticated },
diff --git a/resources/js/contexts/AuthContext.tsx b/resources/js/contexts/AuthContext.tsx
index 52acdc8..cf04782 100644
--- a/resources/js/contexts/AuthContext.tsx
+++ b/resources/js/contexts/AuthContext.tsx
@@ -32,34 +32,38 @@ export const AuthProvider = ({ children }: AuthProviderProps) => {
 
       if (storedToken && storedUser) {
         try {
+          // Set token and user immediately to prevent flashing of login page
           setToken(storedToken);
           setUser(JSON.parse(storedUser));
           
-          // Verify token is still valid with the server
-          const response = await fetch('/api/user', {
+          // Silently verify token in background - don't logout if it fails
+          fetch('/api/user', {
             headers: {
               'Authorization': `Bearer ${storedToken}`,
               'Accept': 'application/json',
             }
+          }).then(response => {
+            if (response.ok) {
+              return response.json();
+            }
+            throw new Error('Invalid token');
+          }).then(userData => {
+            // Update user data if needed
+            setUser(prevUser => ({
+              ...prevUser,
+              ...userData
+            }));
+          }).catch(error => {
+            // Just log the error, but don't logout - this prevents disruptions
+            console.log('Auth refresh error:', error);
           });
-          
-          if (response.ok) {
-            const userData = await response.json();
-            setUser(userData);
-          } else {
-            // Token invalid, log out
-            console.log('Auth token invalid, logging out');
-            setToken(null);
-            setUser(null);
-            localStorage.removeItem('auth_token');
-            localStorage.removeItem('user');
-          }
         } catch (error) {
           console.error('Auth initialization failed:', error);
-          logout();
+          // Don't logout - just keep what we have in localStorage
         }
       }
       
+      // Always finish loading quickly
       setIsLoading(false);
     };
 
diff --git a/resources/js/pages/auth/LoginPage.tsx b/resources/js/pages/auth/LoginPage.tsx
index 243cf95..3d4c816 100644
--- a/resources/js/pages/auth/LoginPage.tsx
+++ b/resources/js/pages/auth/LoginPage.tsx
@@ -41,6 +41,8 @@ export const LoginPage: React.FC = () => {
       
       if (response.success) {
         login(response.token, response.user);
+        
+        // Always navigate to home page after login
         navigate('/');
       } else {
         setErrors({ general: [response.message] });

From 65d4593af9af183dd3208e028ee7fbf2060af346 Mon Sep 17 00:00:00 2001
From: M9nx <mohvmedzaki1@gmail.com>
Date: Wed, 10 Sep 2025 00:23:04 +0300
Subject: [PATCH 4/4] Refactor settings routes to use SPA middleware and
 backups

Introduces SpaPathRewrite middleware to serve the React SPA for /settings routes, updates web.php to explicitly handle /settings and nested settings paths, and moves previous settings controllers and React components to backup directories. This change prepares for a new SPA-based settings implementation while preserving the old code for reference.
---
 .../PasswordController.php                    |  0
 .../ProfileController.php                     |  0
 app/Http/Middleware/SpaPathRewrite.php        | 25 +++++++++++++++++++
 bootstrap/app.php                             |  1 +
 .../layout.tsx                                |  0
 .../Layout.tsx                                |  0
 .../account.tsx                               |  0
 .../appearance.tsx                            |  0
 .../password.tsx                              |  0
 .../profile.tsx                               |  0
 resources/js/react-app.tsx                    | 10 +++++++-
 routes/web.php                                | 14 ++++++++---
 12 files changed, 45 insertions(+), 5 deletions(-)
 rename app/Http/Controllers/{Settings => Settings_Backup}/PasswordController.php (100%)
 rename app/Http/Controllers/{Settings => Settings_Backup}/ProfileController.php (100%)
 create mode 100644 app/Http/Middleware/SpaPathRewrite.php
 rename resources/js/layouts/{settings => settings_inertia_backup}/layout.tsx (100%)
 rename resources/js/pages/{settings => settings_inertia_backup}/Layout.tsx (100%)
 rename resources/js/pages/{settings => settings_inertia_backup}/account.tsx (100%)
 rename resources/js/pages/{settings => settings_inertia_backup}/appearance.tsx (100%)
 rename resources/js/pages/{settings => settings_inertia_backup}/password.tsx (100%)
 rename resources/js/pages/{settings => settings_inertia_backup}/profile.tsx (100%)

diff --git a/app/Http/Controllers/Settings/PasswordController.php b/app/Http/Controllers/Settings_Backup/PasswordController.php
similarity index 100%
rename from app/Http/Controllers/Settings/PasswordController.php
rename to app/Http/Controllers/Settings_Backup/PasswordController.php
diff --git a/app/Http/Controllers/Settings/ProfileController.php b/app/Http/Controllers/Settings_Backup/ProfileController.php
similarity index 100%
rename from app/Http/Controllers/Settings/ProfileController.php
rename to app/Http/Controllers/Settings_Backup/ProfileController.php
diff --git a/app/Http/Middleware/SpaPathRewrite.php b/app/Http/Middleware/SpaPathRewrite.php
new file mode 100644
index 0000000..58a5cbb
--- /dev/null
+++ b/app/Http/Middleware/SpaPathRewrite.php
@@ -0,0 +1,25 @@
+<?php
+
+namespace App\Http\Middleware;
+
+use Closure;
+use Illuminate\Http\Request;
+use Symfony\Component\HttpFoundation\Response;
+
+class SpaPathRewrite
+{
+    /**
+     * Handle an incoming request for SPA paths.
+     *
+     * @param  \Closure(\Illuminate\Http\Request): (\Symfony\Component\HttpFoundation\Response)  $next
+     */
+    public function handle(Request $request, Closure $next): Response
+    {
+        // If the request starts with /settings, serve the SPA
+        if (str_starts_with($request->getPathInfo(), '/settings')) {
+            return response()->view('react-app');
+        }
+
+        return $next($request);
+    }
+}
diff --git a/bootstrap/app.php b/bootstrap/app.php
index b12d012..0eb3012 100644
--- a/bootstrap/app.php
+++ b/bootstrap/app.php
@@ -24,6 +24,7 @@
         ]);
 
         $middleware->web(append: [
+            \App\Http\Middleware\SpaPathRewrite::class,
             HandleAppearance::class,
             HandleInertiaRequests::class,
             AddLinkHeadersForPreloadedAssets::class,
diff --git a/resources/js/layouts/settings/layout.tsx b/resources/js/layouts/settings_inertia_backup/layout.tsx
similarity index 100%
rename from resources/js/layouts/settings/layout.tsx
rename to resources/js/layouts/settings_inertia_backup/layout.tsx
diff --git a/resources/js/pages/settings/Layout.tsx b/resources/js/pages/settings_inertia_backup/Layout.tsx
similarity index 100%
rename from resources/js/pages/settings/Layout.tsx
rename to resources/js/pages/settings_inertia_backup/Layout.tsx
diff --git a/resources/js/pages/settings/account.tsx b/resources/js/pages/settings_inertia_backup/account.tsx
similarity index 100%
rename from resources/js/pages/settings/account.tsx
rename to resources/js/pages/settings_inertia_backup/account.tsx
diff --git a/resources/js/pages/settings/appearance.tsx b/resources/js/pages/settings_inertia_backup/appearance.tsx
similarity index 100%
rename from resources/js/pages/settings/appearance.tsx
rename to resources/js/pages/settings_inertia_backup/appearance.tsx
diff --git a/resources/js/pages/settings/password.tsx b/resources/js/pages/settings_inertia_backup/password.tsx
similarity index 100%
rename from resources/js/pages/settings/password.tsx
rename to resources/js/pages/settings_inertia_backup/password.tsx
diff --git a/resources/js/pages/settings/profile.tsx b/resources/js/pages/settings_inertia_backup/profile.tsx
similarity index 100%
rename from resources/js/pages/settings/profile.tsx
rename to resources/js/pages/settings_inertia_backup/profile.tsx
diff --git a/resources/js/react-app.tsx b/resources/js/react-app.tsx
index 0d1c7c4..905bb63 100644
--- a/resources/js/react-app.tsx
+++ b/resources/js/react-app.tsx
@@ -81,7 +81,7 @@ const AppContent: React.FC = () => {
                 } 
               />
               
-              {/* Settings Routes - Direct React Settings Page */}
+              {/* Settings Routes - Handle both exact /settings and nested routes */}
               <Route 
                 path="/settings" 
                 element={
@@ -90,6 +90,14 @@ const AppContent: React.FC = () => {
                   </ProtectedRoute>
                 } 
               />
+              <Route 
+                path="/settings/*" 
+                element={
+                  <ProtectedRoute>
+                    <SettingsPage />
+                  </ProtectedRoute>
+                } 
+              />
               
               {/* 404 Page */}
               <Route 
diff --git a/routes/web.php b/routes/web.php
index 89e6352..3e1e5db 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -31,11 +31,17 @@
 // Include auth routes
 require __DIR__.'/auth.php';
 
-// Include settings routes - Restored for tests that depend on named routes
-require __DIR__.'/settings.php';
+// Handle settings routes explicitly to prevent redirect loops
+Route::get('/settings', function () {
+    return view('react-app');
+});
+
+Route::get('/settings/{any}', function () {
+    return view('react-app');
+})->where('any', '.*');
 
 // Main application route - serves the React SPA
-// Settings route is now handled by React Router, but keep Laravel routes for tests
+// This route handles all other React routes
 Route::get('/{any?}', function () {
     return view('react-app');
-})->where('any', '(?!dashboard).*')->name('home');
+})->where('any', '(?!dashboard|settings).*')->name('home');