regirstation works but shared links broken

public/src/components/auth/Login.tsx

@@ -1,5 +1,5 @@
 import { useState, FormEvent } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, Link } from 'react-router-dom';
 import { useAuthStore } from '../../stores/authStore';
 
 export function Login() {
@@ -71,6 +71,13 @@ export function Login() {
           >
             {isLoading ? 'Logging in...' : 'Login'}
           </button>
+
+          <div className="text-center mt-4">
+            <span className="text-gray-600">Don't have an account? </span>
+            <Link to="/register" className="text-blue-600 hover:text-blue-700 font-medium">
+              Register
+            </Link>
+          </div>
         </form>
       </div>
     </div>

public/src/components/auth/Register.tsx

@@ -0,0 +1,133 @@
+import { useState, FormEvent } from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import { useAuthStore } from '../../stores/authStore';
+
+export function Register() {
+  const [username, setUsername] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const { register, isLoading, error, clearError } = useAuthStore();
+  const navigate = useNavigate();
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    clearError();
+
+    if (password !== confirmPassword) {
+      alert('Passwords do not match');
+      return;
+    }
+
+    if (password.length < 6) {
+      alert('Password must be at least 6 characters');
+      return;
+    }
+
+    try {
+      await register(username, email, password);
+      navigate('/');
+    } catch (err) {
+      // Error is handled by the store
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-100">
+      <div className="bg-white p-8 rounded-lg shadow-md w-full max-w-md">
+        <h1 className="text-2xl font-bold mb-2 text-center text-gray-800">
+          Create Account
+        </h1>
+        <p className="text-center text-gray-600 mb-6">
+          Join ISP Wiremap
+        </p>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          {error && (
+            <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded">
+              {error}
+            </div>
+          )}
+
+          <div>
+            <label htmlFor="username" className="block text-sm font-medium text-gray-700 mb-1">
+              Username
+            </label>
+            <input
+              id="username"
+              type="text"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              required
+              minLength={3}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+              disabled={isLoading}
+            />
+          </div>
+
+          <div>
+            <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
+              Email
+            </label>
+            <input
+              id="email"
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+              disabled={isLoading}
+            />
+          </div>
+
+          <div>
+            <label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-1">
+              Password
+            </label>
+            <input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+              minLength={6}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+              disabled={isLoading}
+            />
+          </div>
+
+          <div>
+            <label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-700 mb-1">
+              Confirm Password
+            </label>
+            <input
+              id="confirmPassword"
+              type="password"
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(e.target.value)}
+              required
+              minLength={6}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+              disabled={isLoading}
+            />
+          </div>
+
+          <button
+            type="submit"
+            disabled={isLoading}
+            className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {isLoading ? 'Creating account...' : 'Register'}
+          </button>
+
+          <div className="text-center mt-4">
+            <span className="text-gray-600">Already have an account? </span>
+            <Link to="/login" className="text-blue-600 hover:text-blue-700 font-medium">
+              Login
+            </Link>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

public/src/components/map/MapView.tsx

@@ -5,6 +5,8 @@ import { Toolbar } from './Toolbar';
 import { LayerSwitcher } from './LayerSwitcher';
 import { DrawingHandler } from './DrawingHandler';
 import { MapItemsLayer } from './MapItemsLayer';
+import { ShareDialog } from './ShareDialog';
+import { useMapWebSocket } from '../../hooks/useMapWebSocket';
 
 interface MapViewProps {
   mapId: string | null;
@@ -50,12 +52,33 @@ function MapController() {
 export function MapView({ mapId }: MapViewProps) {
   const [activeLayer, setActiveLayer] = useState<MapLayer>('osm');
   const [refreshTrigger, setRefreshTrigger] = useState(0);
+  const [showShareDialog, setShowShareDialog] = useState(false);
 
   const handleItemCreated = () => {
     // Trigger refresh of map items
     setRefreshTrigger((prev) => prev + 1);
   };
 
+  // WebSocket connection for real-time updates
+  const { isConnected, permission } = useMapWebSocket({
+    mapId: mapId || '',
+    onItemCreated: (item) => {
+      console.log('Real-time item created:', item);
+      setRefreshTrigger((prev) => prev + 1);
+    },
+    onItemUpdated: (item) => {
+      console.log('Real-time item updated:', item);
+      setRefreshTrigger((prev) => prev + 1);
+    },
+    onItemDeleted: (itemId) => {
+      console.log('Real-time item deleted:', itemId);
+      setRefreshTrigger((prev) => prev + 1);
+    },
+    onConnected: (data) => {
+      console.log('WebSocket connected to map:', data);
+    },
+  });
+
   if (!mapId) {
     return (
       <div className="flex-1 flex items-center justify-center bg-gray-100">
@@ -73,7 +96,7 @@ export function MapView({ mapId }: MapViewProps) {
     <>
       {/* Toolbar for drawing tools */}
       <div style={{ position: 'fixed', left: '220px', top: '70px', zIndex: 9999 }}>
-        <Toolbar mapId={mapId} />
+        <Toolbar mapId={mapId} onShare={() => setShowShareDialog(true)} />
       </div>
 
       {/* Layer switcher */}
@@ -108,6 +131,14 @@ export function MapView({ mapId }: MapViewProps) {
           <MapItemsLayer mapId={mapId} refreshTrigger={refreshTrigger} />
         </MapContainer>
       </div>
+
+      {/* Share dialog */}
+      {showShareDialog && (
+        <ShareDialog
+          mapId={mapId}
+          onClose={() => setShowShareDialog(false)}
+        />
+      )}
     </>
   );
 }

public/src/components/map/ShareDialog.tsx

@@ -0,0 +1,286 @@
+import { useState, useEffect } from 'react';
+import { mapShareService, type MapShare, type MapShareLink } from '../../services/mapShareService';
+
+interface ShareDialogProps {
+  mapId: string;
+  onClose: () => void;
+}
+
+export function ShareDialog({ mapId, onClose }: ShareDialogProps) {
+  const [activeTab, setActiveTab] = useState<'users' | 'links'>('users');
+  const [userShares, setUserShares] = useState<MapShare[]>([]);
+  const [shareLinks, setShareLinks] = useState<MapShareLink[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  // User share form
+  const [newUserId, setNewUserId] = useState('');
+  const [newUserPermission, setNewUserPermission] = useState<'read' | 'edit'>('read');
+
+  // Link form
+  const [newLinkPermission, setNewLinkPermission] = useState<'read' | 'edit'>('read');
+
+  useEffect(() => {
+    loadShares();
+    loadLinks();
+  }, [mapId]);
+
+  const loadShares = async () => {
+    try {
+      const shares = await mapShareService.getUserShares(mapId);
+      setUserShares(shares);
+    } catch (error) {
+      console.error('Failed to load shares:', error);
+    }
+  };
+
+  const loadLinks = async () => {
+    try {
+      const links = await mapShareService.getShareLinks(mapId);
+      setShareLinks(links);
+    } catch (error) {
+      console.error('Failed to load share links:', error);
+    }
+  };
+
+  const handleShareWithUser = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!newUserId.trim()) return;
+
+    setLoading(true);
+    try {
+      await mapShareService.shareWithUser(mapId, {
+        user_id: newUserId,
+        permission: newUserPermission,
+      });
+      setNewUserId('');
+      await loadShares();
+    } catch (error: any) {
+      alert(error.response?.data?.detail || 'Failed to share map');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleCreateLink = async () => {
+    setLoading(true);
+    try {
+      await mapShareService.createShareLink(mapId, {
+        permission: newLinkPermission,
+      });
+      await loadLinks();
+    } catch (error: any) {
+      alert(error.response?.data?.detail || 'Failed to create share link');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleRevokeShare = async (shareId: string) => {
+    if (!confirm('Are you sure you want to revoke this share?')) return;
+
+    try {
+      await mapShareService.revokeShare(mapId, shareId);
+      await loadShares();
+    } catch (error: any) {
+      alert(error.response?.data?.detail || 'Failed to revoke share');
+    }
+  };
+
+  const handleDeleteLink = async (linkId: string) => {
+    if (!confirm('Are you sure you want to delete this share link?')) return;
+
+    try {
+      await mapShareService.deleteShareLink(mapId, linkId);
+      await loadLinks();
+    } catch (error: any) {
+      alert(error.response?.data?.detail || 'Failed to delete link');
+    }
+  };
+
+  const copyLinkToClipboard = (token: string) => {
+    const url = `${window.location.origin}/shared/${token}`;
+    navigator.clipboard.writeText(url);
+    alert('Link copied to clipboard!');
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center" style={{ zIndex: 10001 }}>
+      <div className="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-[80vh] overflow-hidden">
+        {/* Header */}
+        <div className="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
+          <h2 className="text-xl font-bold text-gray-800">Share Map</h2>
+          <button
+            onClick={onClose}
+            className="text-gray-400 hover:text-gray-600 text-2xl"
+          >
+            ×
+          </button>
+        </div>
+
+        {/* Tabs */}
+        <div className="flex border-b border-gray-200">
+          <button
+            onClick={() => setActiveTab('users')}
+            className={`flex-1 px-6 py-3 font-medium ${
+              activeTab === 'users'
+                ? 'border-b-2 border-blue-600 text-blue-600'
+                : 'text-gray-600 hover:text-gray-800'
+            }`}
+          >
+            Share with Users
+          </button>
+          <button
+            onClick={() => setActiveTab('links')}
+            className={`flex-1 px-6 py-3 font-medium ${
+              activeTab === 'links'
+                ? 'border-b-2 border-blue-600 text-blue-600'
+                : 'text-gray-600 hover:text-gray-800'
+            }`}
+          >
+            Public Links
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="p-6 overflow-y-auto" style={{ maxHeight: 'calc(80vh - 200px)' }}>
+          {activeTab === 'users' && (
+            <div>
+              {/* Add user form */}
+              <form onSubmit={handleShareWithUser} className="mb-6">
+                <label className="block text-sm font-medium text-gray-700 mb-2">
+                  Share with User (by User ID)
+                </label>
+                <div className="flex gap-2">
+                  <input
+                    type="text"
+                    value={newUserId}
+                    onChange={(e) => setNewUserId(e.target.value)}
+                    placeholder="Enter user ID"
+                    className="flex-1 px-3 py-2 border border-gray-300 rounded-md"
+                    disabled={loading}
+                  />
+                  <select
+                    value={newUserPermission}
+                    onChange={(e) => setNewUserPermission(e.target.value as 'read' | 'edit')}
+                    className="px-3 py-2 border border-gray-300 rounded-md"
+                    disabled={loading}
+                  >
+                    <option value="read">Read-only</option>
+                    <option value="edit">Can Edit</option>
+                  </select>
+                  <button
+                    type="submit"
+                    disabled={loading || !newUserId.trim()}
+                    className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50"
+                  >
+                    Share
+                  </button>
+                </div>
+              </form>
+
+              {/* Existing shares */}
+              <div>
+                <h3 className="font-medium text-gray-700 mb-3">Current Shares</h3>
+                {userShares.length === 0 ? (
+                  <p className="text-gray-500 text-sm">No users have access to this map yet.</p>
+                ) : (
+                  <div className="space-y-2">
+                    {userShares.map((share) => (
+                      <div
+                        key={share.id}
+                        className="flex items-center justify-between p-3 border border-gray-200 rounded-md"
+                      >
+                        <div>
+                          <div className="font-medium text-sm">{share.user_id}</div>
+                          <div className="text-xs text-gray-500">
+                            {share.permission === 'read' ? 'Read-only' : 'Can edit'}
+                          </div>
+                        </div>
+                        <button
+                          onClick={() => handleRevokeShare(share.id)}
+                          className="px-3 py-1 text-sm text-red-600 hover:bg-red-50 rounded"
+                        >
+                          Revoke
+                        </button>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+
+          {activeTab === 'links' && (
+            <div>
+              {/* Create link form */}
+              <div className="mb-6">
+                <label className="block text-sm font-medium text-gray-700 mb-2">
+                  Create Public Share Link
+                </label>
+                <div className="flex gap-2">
+                  <select
+                    value={newLinkPermission}
+                    onChange={(e) => setNewLinkPermission(e.target.value as 'read' | 'edit')}
+                    className="flex-1 px-3 py-2 border border-gray-300 rounded-md"
+                    disabled={loading}
+                  >
+                    <option value="read">Read-only</option>
+                    <option value="edit">Can Edit</option>
+                  </select>
+                  <button
+                    onClick={handleCreateLink}
+                    disabled={loading}
+                    className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50"
+                  >
+                    Create Link
+                  </button>
+                </div>
+              </div>
+
+              {/* Existing links */}
+              <div>
+                <h3 className="font-medium text-gray-700 mb-3">Active Share Links</h3>
+                {shareLinks.length === 0 ? (
+                  <p className="text-gray-500 text-sm">No public share links created yet.</p>
+                ) : (
+                  <div className="space-y-3">
+                    {shareLinks.map((link) => (
+                      <div
+                        key={link.id}
+                        className="p-3 border border-gray-200 rounded-md"
+                      >
+                        <div className="flex items-start justify-between mb-2">
+                          <div className="flex-1">
+                            <div className="text-xs text-gray-500 mb-1">
+                              {link.permission === 'read' ? 'Read-only' : 'Can edit'} •
+                              Created {new Date(link.created_at).toLocaleDateString()}
+                            </div>
+                            <div className="font-mono text-xs bg-gray-100 p-2 rounded break-all">
+                              {window.location.origin}/shared/{link.token}
+                            </div>
+                          </div>
+                          <button
+                            onClick={() => handleDeleteLink(link.id)}
+                            className="ml-2 text-red-600 hover:bg-red-50 p-1 rounded text-sm"
+                          >
+                            Delete
+                          </button>
+                        </div>
+                        <button
+                          onClick={() => copyLinkToClipboard(link.token)}
+                          className="text-sm text-blue-600 hover:text-blue-700"
+                        >
+                          Copy Link
+                        </button>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

public/src/components/map/Toolbar.tsx

@@ -4,6 +4,7 @@ import { CABLE_COLORS, CABLE_LABELS } from '../../types/mapItem';
 
 interface ToolbarProps {
   mapId: string;
+  onShare: () => void;
 }
 
 interface ToolButton {
@@ -69,11 +70,23 @@ const TOOLS: ToolButton[] = [
   },
 ];
 
-export function Toolbar({ mapId }: ToolbarProps) {
+export function Toolbar({ mapId, onShare }: ToolbarProps) {
   const { activeTool, setActiveTool } = useDrawingStore();
 
   return (
     <div className="bg-white shadow-lg rounded-lg p-2 space-y-1" style={{ minWidth: '150px' }}>
+      {/* Share button */}
+      <button
+        onClick={onShare}
+        className="w-full px-3 py-2 rounded text-left flex items-center gap-2 transition-colors bg-green-100 text-green-700 hover:bg-green-200 font-medium mb-2"
+        title="Share this map"
+      >
+        <span className="text-lg">🔗</span>
+        <span className="text-sm">Share</span>
+      </button>
+
+      <div className="border-t border-gray-200 my-2"></div>
+
       {TOOLS.map((tool) => (
         <button
           key={tool.id}