Implement authentication system with access control UI

frontend/src/pages/ProjectPage.tsx

@@ -1,13 +1,15 @@
 import { useState, useEffect, useCallback } from 'react';
-import { useParams, Link, useSearchParams, useNavigate } from 'react-router-dom';
-import { Project, Package, PaginatedResponse } from '../types';
-import { getProject, listPackages, createPackage } from '../api';
+import { useParams, Link, useSearchParams, useNavigate, useLocation } from 'react-router-dom';
+import { Project, Package, PaginatedResponse, AccessLevel } from '../types';
+import { getProject, listPackages, createPackage, getMyProjectAccess, UnauthorizedError, ForbiddenError } from '../api';
 import { Breadcrumb } from '../components/Breadcrumb';
 import { Badge } from '../components/Badge';
 import { SearchInput } from '../components/SearchInput';
 import { SortDropdown, SortOption } from '../components/SortDropdown';
 import { FilterChip, FilterChipGroup } from '../components/FilterChip';
 import { Pagination } from '../components/Pagination';
+import { AccessManagement } from '../components/AccessManagement';
+import { useAuth } from '../contexts/AuthContext';
 import './Home.css';
 
 const SORT_OPTIONS: SortOption[] = [
@@ -29,15 +31,24 @@ function formatBytes(bytes: number): string {
 function ProjectPage() {
   const { projectName } = useParams<{ projectName: string }>();
   const navigate = useNavigate();
+  const location = useLocation();
   const [searchParams, setSearchParams] = useSearchParams();
+  const { user } = useAuth();
 
   const [project, setProject] = useState<Project | null>(null);
   const [packagesData, setPackagesData] = useState<PaginatedResponse<Package> | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [accessDenied, setAccessDenied] = useState(false);
   const [showForm, setShowForm] = useState(false);
   const [newPackage, setNewPackage] = useState({ name: '', description: '', format: 'generic', platform: 'any' });
   const [creating, setCreating] = useState(false);
+  const [accessLevel, setAccessLevel] = useState<AccessLevel | null>(null);
+  const [isOwner, setIsOwner] = useState(false);
+
+  // Derived permissions
+  const canWrite = accessLevel === 'write' || accessLevel === 'admin';
+  const canAdmin = accessLevel === 'admin';
 
   // Get params from URL
   const page = parseInt(searchParams.get('page') || '1', 10);
@@ -66,19 +77,33 @@ function ProjectPage() {
 
     try {
       setLoading(true);
-      const [projectData, packagesResult] = await Promise.all([
+      setAccessDenied(false);
+      const [projectData, packagesResult, accessResult] = await Promise.all([
         getProject(projectName),
         listPackages(projectName, { page, search, sort, order, format: format || undefined }),
+        getMyProjectAccess(projectName),
       ]);
       setProject(projectData);
       setPackagesData(packagesResult);
+      setAccessLevel(accessResult.access_level);
+      setIsOwner(accessResult.is_owner);
       setError(null);
     } catch (err) {
+      if (err instanceof UnauthorizedError) {
+        navigate('/login', { state: { from: location.pathname } });
+        return;
+      }
+      if (err instanceof ForbiddenError) {
+        setAccessDenied(true);
+        setError('You do not have access to this project');
+        setLoading(false);
+        return;
+      }
       setError(err instanceof Error ? err.message : 'Failed to load data');
     } finally {
       setLoading(false);
     }
-  }, [projectName, page, search, sort, order, format]);
+  }, [projectName, page, search, sort, order, format, navigate, location.pathname]);
 
   useEffect(() => {
     loadData();
@@ -139,6 +164,23 @@ function ProjectPage() {
     return <div className="loading">Loading...</div>;
   }
 
+  if (accessDenied) {
+    return (
+      <div className="home">
+        <Breadcrumb items={[{ label: 'Projects', href: '/' }]} />
+        <div className="error-message" style={{ textAlign: 'center', padding: '48px 24px' }}>
+          <h2>Access Denied</h2>
+          <p>You do not have permission to view this project.</p>
+          {!user && (
+            <p style={{ marginTop: '16px' }}>
+              <a href="/login" className="btn btn-primary">Sign in</a>
+            </p>
+          )}
+        </div>
+      </div>
+    );
+  }
+
   if (!project) {
     return <div className="error-message">Project not found</div>;
   }
@@ -159,6 +201,11 @@ function ProjectPage() {
             <Badge variant={project.is_public ? 'public' : 'private'}>
               {project.is_public ? 'Public' : 'Private'}
             </Badge>
+            {accessLevel && (
+              <Badge variant={accessLevel === 'admin' ? 'success' : accessLevel === 'write' ? 'info' : 'default'}>
+                {isOwner ? 'Owner' : accessLevel.charAt(0).toUpperCase() + accessLevel.slice(1)}
+              </Badge>
+            )}
           </div>
           {project.description && <p className="description">{project.description}</p>}
           <div className="page-header__meta">
@@ -169,14 +216,20 @@ function ProjectPage() {
             <span className="meta-item">by {project.created_by}</span>
           </div>
         </div>
-        <button className="btn btn-primary" onClick={() => setShowForm(!showForm)}>
-          {showForm ? 'Cancel' : '+ New Package'}
-        </button>
+        {canWrite ? (
+          <button className="btn btn-primary" onClick={() => setShowForm(!showForm)}>
+            {showForm ? 'Cancel' : '+ New Package'}
+          </button>
+        ) : user ? (
+          <span className="text-muted" title="You have read-only access to this project">
+            Read-only access
+          </span>
+        ) : null}
       </div>
 
       {error && <div className="error-message">{error}</div>}
 
-      {showForm && (
+      {showForm && canWrite && (
         <form className="form card" onSubmit={handleCreatePackage}>
           <h3>Create New Package</h3>
           <div className="form-row">
@@ -316,6 +369,10 @@ function ProjectPage() {
           )}
         </>
       )}
+
+      {canAdmin && projectName && (
+        <AccessManagement projectName={projectName} />
+      )}
     </div>
   );
 }