feat: Improve authentication error handling and add file upload validation in profile settings

Author: Devasy

web/pages/Auth.tsx

@@ -8,9 +8,9 @@ import { THEMES } from '../constants';
 import { useAuth } from '../contexts/AuthContext';
 import { useTheme } from '../contexts/ThemeContext';
 import {
-    login as apiLogin,
-    signup as apiSignup,
-    loginWithGoogle,
+  login as apiLogin,
+  signup as apiSignup,
+  loginWithGoogle,
 } from '../services/api';
 import { signInWithGoogle } from '../services/firebase';
 
@@ -34,16 +34,22 @@ export const Auth = () => {
     try {
       const idToken = await signInWithGoogle();
       const res = await loginWithGoogle(idToken);
-      const { access_token, user } = res.data;
+      const { access_token, user } = res.data ?? {};
+      if (!access_token || !user) {
+        throw new Error('Invalid response from server');
+      }
       login(access_token, user);
       navigate('/dashboard');
     } catch (err: any) {
       console.error('Google login error:', err);
       if (err.code === 'auth/popup-closed-by-user') {
         setError('');
       } else if (err.response) {
+        const detail = err.response.data?.detail;
         setError(
-          err.response.data?.detail || 'Google authentication failed'
+          typeof detail === 'string'
+            ? detail
+            : detail?.[0]?.msg || 'Google authentication failed'
         );
       } else {
         setError(err.message || 'Google authentication failed. Please try again.');
@@ -71,8 +77,11 @@ export const Auth = () => {
       navigate('/dashboard');
     } catch (err: any) {
       if (err.response) {
+        const detail = err.response.data?.detail;
         setError(
-          err.response.data?.detail?.[0]?.msg || 'Authentication failed'
+          typeof detail === 'string'
+            ? detail
+            : detail?.[0]?.msg || 'Authentication failed'
         );
       } else {
         setError('Something went wrong');
@@ -161,7 +170,11 @@ export const Auth = () => {
                 }`}
             >
               {googleLoading ? (
-                <div className="w-5 h-5 border-2 border-black/20 border-t-black rounded-full animate-spin" />
+                <div 
+                  className="w-5 h-5 border-2 border-black/20 border-t-black rounded-full animate-spin"
+                  role="status"
+                  aria-label="Signing in with Google"
+                />
               ) : (
                 <svg className="w-5 h-5" viewBox="0 0 24 24" role="img" aria-labelledby="google-logo-title">
                   <title id="google-logo-title">Google logo</title>

web/pages/Friends.tsx

@@ -239,7 +239,7 @@ export const Friends = () => {
                         ? 'text-orange-500'
                         : 'opacity-30'
                     }`}>
-                    {formatCurrency(friend.netBalance)}
+                    {friend.netBalance > 0 ? '+' : friend.netBalance < 0 ? '-' : ''}{formatCurrency(friend.netBalance)}
                   </p>
                 </div>
 

web/pages/GroupDetails.tsx

@@ -26,6 +26,14 @@ import { Expense, Group, GroupMember, SplitType } from '../types';
 
 type UnequalMode = 'amount' | 'percentage' | 'shares';
 
+interface Settlement {
+    fromUserId: string;
+    fromUserName: string;
+    toUserId: string;
+    toUserName: string;
+    amount: number;
+}
+
 export const GroupDetails = () => {
     const { id } = useParams<{ id: string }>();
     const navigate = useNavigate();
@@ -35,7 +43,7 @@ export const GroupDetails = () => {
     const [group, setGroup] = useState<Group | null>(null);
     const [expenses, setExpenses] = useState<Expense[]>([]);
     const [members, setMembers] = useState<GroupMember[]>([]);
-    const [settlements, setSettlements] = useState<any[]>([]);
+    const [settlements, setSettlements] = useState<Settlement[]>([]);
     const [loading, setLoading] = useState(true);
     const [activeTab, setActiveTab] = useState<'expenses' | 'settlements'>('expenses');
 
@@ -178,7 +186,7 @@ export const GroupDetails = () => {
             setSelectedUsers(new Set(expense.splits.map(s => s.userId)));
         } else {
             setUnequalMode('amount');
-            const vals: any = {};
+            const vals: Record<string, string> = {};
             expense.splits.forEach(s => vals[s.userId] = s.amount.toString());
             setSplitValues(vals);
         }

web/pages/Profile.tsx

@@ -26,6 +26,17 @@ export const Profile = () => {
         const file = e.target.files?.[0];
         if (!file) return;
 
+        const maxSize = 5 * 1024 * 1024; // 5MB
+        if (file.size > maxSize) {
+            setSaveError('Image must be less than 5MB');
+            return;
+        }
+
+        if (!file.type.startsWith('image/')) {
+            setSaveError('Please select a valid image file');
+            return;
+        }
+
         const reader = new FileReader();
         reader.onload = () => {
             const result = reader.result as string;