few fixes

Author: Dave3130

CODEOWNERS

@@ -0,0 +1 @@
+* @browserstack/ctooffice

package-lock.json

@@ -4,6 +4,7 @@ import { Link, useLocation } from 'react-router-dom';
 import { useCart } from '../contexts/CartContext';
 import { useUser } from '../contexts/UserContext';
 import { getAssetPath } from '../lib/assetUtils';
+import { sanitizeAvatarUrl } from '../lib/avatar';
 
 const Navbar: React.FC = () => {
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
@@ -80,7 +81,7 @@ const Navbar: React.FC = () => {
             >
               {user ? (
                 <>
-                  <img src={user.avatar} alt={user.name} className="w-7 h-7 rounded-full border border-gray-300 shrink-0" />
+                  <img src={sanitizeAvatarUrl(user.avatar)} alt={user.name} className="w-7 h-7 rounded-full border border-gray-300 shrink-0" />
                   <span className="hidden md:inline lg:inline xl:inline 2xl:inline text-sm font-medium text-ellipsis overflow-hidden max-w-[80px] lg:max-w-[120px] xl:max-w-[160px] 2xl:max-w-[200px] ipad:hidden">{user.name || user.email}</span>
                 </>
               ) : (

src/components/Navbar.tsx

@@ -1,5 +1,6 @@
 import React, { createContext, useContext, useState, ReactNode, useEffect } from 'react';
 import { userProfiles } from '../data/userProfiles';
+import { sanitizeAvatarUrl } from '../lib/avatar';
 
 export interface User {
   id: number;
@@ -19,21 +20,38 @@ interface UserContextType {
   user: User | null;
   login: (userId: string, email: string) => Promise<boolean>;
   logout: () => void;
+  updateUser: (updates: Partial<User>) => void;
 }
 
 const UserContext = createContext<UserContextType | undefined>(undefined);
 
+const sanitizeUser = (value: User): User => ({
+  ...value,
+  avatar: sanitizeAvatarUrl(value.avatar),
+});
+
 export const UserProvider = ({ children }: { children: ReactNode }) => {
   const [user, setUser] = useState<User | null>(null);
 
   useEffect(() => {
     const stored = localStorage.getItem('user');
-    if (stored) setUser(JSON.parse(stored));
+    if (!stored) return;
+    try {
+      const parsed = JSON.parse(stored);
+      setUser(sanitizeUser(parsed));
+    } catch {
+      localStorage.removeItem('user');
+    }
   }, []);
 
   useEffect(() => {
-    if (user) localStorage.setItem('user', JSON.stringify(user));
-    else localStorage.removeItem('user');
+    // NOTE: This sandbox only stores mock profiles used for demos; no real PII is persisted.
+    if (user) {
+      const safeUser = sanitizeUser(user);
+      localStorage.setItem('user', JSON.stringify(safeUser));
+    } else {
+      localStorage.removeItem('user');
+    }
   }, [user]);
 
   const login = async (userId: string, email: string) => {
@@ -42,7 +60,7 @@ export const UserProvider = ({ children }: { children: ReactNode }) => {
       p => String(p.userId) === String(userId) && p.email === email
     );
     if (profile) {
-      setUser({
+      setUser(sanitizeUser({
         id: profile.userId,
         email: profile.email,
         username: profile.email.split('@')[0],
@@ -54,16 +72,20 @@ export const UserProvider = ({ children }: { children: ReactNode }) => {
         gender: 'other',
         company: 'Demo Inc.',
         website: 'https://example.com'
-      });
+      }));
       return true;
     }
     return false;
   };
 
   const logout = () => setUser(null);
 
+  const updateUser = (updates: Partial<User>) => {
+    setUser(prev => (prev ? sanitizeUser({ ...prev, ...updates }) : prev));
+  };
+
   return (
-    <UserContext.Provider value={{ user, login, logout }}>
+    <UserContext.Provider value={{ user, login, logout, updateUser }}>
       {children}
     </UserContext.Provider>
   );

src/contexts/UserContext.tsx

@@ -0,0 +1,23 @@
+import { getAssetPath } from './assetUtils';
+
+const DEFAULT_AVATAR = getAssetPath('/static/avatars/demo1.svg');
+
+const HTTP_URL_REGEX = /^(https?:\/\/)[^\s]+$/i;
+const DATA_URI_REGEX = /^data:image\/(png|jpeg|jpg|gif|webp|svg\+xml);base64,[A-Za-z0-9+/=]+$/i;
+
+export const sanitizeAvatarUrl = (avatar?: string | null): string => {
+  if (!avatar || typeof avatar !== 'string') {
+    return DEFAULT_AVATAR;
+  }
+  const trimmed = avatar.trim();
+
+  if (trimmed.startsWith('/')) {
+    return trimmed;
+  }
+
+  if (HTTP_URL_REGEX.test(trimmed) || DATA_URI_REGEX.test(trimmed)) {
+    return trimmed;
+  }
+
+  return DEFAULT_AVATAR;
+};

src/lib/avatar.ts

@@ -26,16 +26,24 @@ const Checkout: React.FC = () => {
     );
   }
 
+  const buildUserSummary = () => {
+    if (!user) return null;
+    const { id, email, name, username } = user;
+    return { id, email, name, username };
+  };
+
   const handlePlaceOrder = () => {
     const order = {
       id: Date.now().toString(),
       date: new Date().toLocaleString(),
       items: cart.items,
       total: cart.items.reduce((sum, item) => sum + item.price * item.quantity, 0),
-      user,
+      user: buildUserSummary(),
     };
     // Use user id if available, else fallback to email
-    const userKey = user.id ? `order-history-${user.id}` : `order-history-${user.email}`;
+    const userKey = user?.id
+      ? `order-history-${user.id}`
+      : `order-history-${user?.email ?? 'guest'}`;
     const prev = localStorage.getItem(userKey);
     const orders = prev ? JSON.parse(prev) : [];
     orders.push(order);

src/pages/Checkout.tsx

@@ -1,12 +1,12 @@
-import React, { useImperativeHandle, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useUser } from '../contexts/UserContext';
-import { useNavigate } from 'react-router-dom';
 import EmptyState from '../components/ui/EmptyState';
 import { Input } from '../components/ui/input';
 import { Button } from '../components/ui/button';
+import { sanitizeAvatarUrl } from '../lib/avatar';
 
 const Profile: React.FC = () => {
-  const { user, login, logout } = useUser();
+  const { user, login, logout, updateUser } = useUser();
   const [email, setEmail] = useState('');
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState('');
@@ -19,7 +19,6 @@ const Profile: React.FC = () => {
     company: user?.company || '',
     website: user?.website || ''
   });
-  const navigate = useNavigate();
 
   const handleLogin = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -35,12 +34,22 @@ const Profile: React.FC = () => {
   };
 
   const handleSave = () => {
-    // Update user context and localStorage
-    Object.assign(user!, form);
-    localStorage.setItem('user', JSON.stringify(user));
+    if (!user) return;
+    updateUser(form);
     setEditMode(false);
   };
 
+  useEffect(() => {
+    setForm({
+      phone: user?.phone || '',
+      address: user?.address || '',
+      birthdate: user?.birthdate || '',
+      gender: user?.gender || '',
+      company: user?.company || '',
+      website: user?.website || ''
+    });
+  }, [user]);
+
   if (!user) {
     return (
       <div className="min-h-screen flex flex-col items-center justify-center py-8">
@@ -70,7 +79,7 @@ const Profile: React.FC = () => {
   return (
     <div className="min-h-screen flex flex-col items-center justify-center py-8">
       <div className="bg-white rounded-lg shadow p-8 flex flex-col items-center">
-        <img src={user.avatar} alt={user.name} className="w-24 h-24 rounded-full mb-4" />
+        <img src={sanitizeAvatarUrl(user.avatar)} alt={user.name} className="w-24 h-24 rounded-full mb-4" />
         <h2 className="text-xl font-bold mb-2">{user.name}</h2>
         <div className="text-gray-600 mb-2">{user.email}</div>
         <div className="text-gray-600 mb-2">@{user.username}</div>