feat: share resource

Author: PreciousOritsedere

.cssconfig.json

@@ -0,0 +1,36 @@
+{
+  "@context": "https://linkedsoftwaredependencies.org/bundles/npm/@solid/community-server/^8.0.0/components/context.jsonld",
+  "import": [
+    "css:config/app/init/default.json",
+    "css:config/app/main/default.json",
+    "css:config/app/variables/default.json",
+    "css:config/http/handler/default.json",
+    "css:config/http/middleware/default.json",
+    "css:config/http/notifications/all.json",
+    "css:config/http/server-factory/http.json",
+    "css:config/http/static/default.json",
+    "css:config/identity/access/public.json",
+    "css:config/identity/email/default.json",
+    "css:config/identity/handler/no-accounts.json",
+    "css:config/identity/oidc/default.json",
+    "css:config/identity/ownership/token.json",
+    "css:config/identity/pod/static.json",
+    "css:config/ldp/authentication/dpop-bearer.json",
+    "css:config/ldp/authorization/acp.json",
+    "css:config/ldp/handler/default.json",
+    "css:config/ldp/metadata-parser/default.json",
+    "css:config/ldp/metadata-writer/default.json",
+    "css:config/ldp/modes/default.json",
+    "css:config/storage/backend/file.json",
+    "css:config/storage/key-value/memory.json",
+    "css:config/storage/location/root.json",
+    "css:config/storage/middleware/default.json",
+    "css:config/util/auxiliary/acr.json",
+    "css:config/util/identifiers/suffix.json",
+    "css:config/util/index/default.json",
+    "css:config/util/logging/winston.json",
+    "css:config/util/representation-conversion/default.json",
+    "css:config/util/resource-locker/memory.json",
+    "css:config/util/variables/default.json"
+  ]
+}

.gitignore

@@ -33,6 +33,10 @@ yarn-error.log*
 # env files (can opt-in for committing if needed)
 .env*
 
+# seed config (contains passwords)
+seed-config.json
+src/ldo/
+
 # vercel
 .vercel
 

README-CSS.md

@@ -0,0 +1,107 @@
+# Running Local Community Solid Server with ACP
+
+## Setup
+
+The project is configured to run a local Community Solid Server (CSS) with ACP (Access Control Policy) enabled.
+
+## Configuration
+
+- **Config file**: `.cssconfig.json` - Has ACP enabled via `css:config/ldp/authorization/acp.json`
+- **Seed config**: `seed-config.json` - Contains your account credentials (create from `seed-config.json.example`)
+- **Data directory**: `data/` - Where the server stores pod data
+
+### Setting up your account
+
+1. Copy the example seed config:
+   ```bash
+   cp seed-config.json.example seed-config.json
+   ```
+
+2. Edit `seed-config.json` and replace with your real email, password, and pod name:
+   ```json
+   [
+     {
+       "email": "your-email@example.com",
+       "password": "your-password",
+       "pods": [
+         { "name": "your-pod-name" }
+       ]
+     }
+   ]
+   ```
+
+**Note**: `seed-config.json` is in `.gitignore` to prevent committing your password.
+
+## Running the Server
+
+### Option 1: Run CSS only
+```bash
+npm run start:css
+```
+
+This will start CSS on port **3000** with:
+- ACP authorization enabled
+- Seeded accounts (alice and bob)
+- Data stored in `data/` directory
+
+### Option 2: Run CSS + Next.js together
+```bash
+npm run start:dev
+```
+
+This runs both:
+- CSS on port **3000**
+- Next.js dev server on port **3001**
+
+## Test Accounts
+
+After seeding, you can log in with any of these accounts:
+
+1. **Ruky** (your account):
+   - Email: `rukyjacob@gmail.com`
+   - Password: `Test123$`
+   - Pod URL: `http://localhost:3000/ruky/`
+   - WebID: `http://localhost:3000/ruky/profile/card#me`
+
+2. **Alice**:
+   - Email: `alice@example.com`
+   - Password: `alice123`
+   - Pod URL: `http://localhost:3000/alice/`
+   - WebID: `http://localhost:3000/alice/profile/card#me`
+
+3. **Bob**:
+   - Email: `bob@example.com`
+   - Password: `bob123`
+   - Pod URL: `http://localhost:3000/bob/`
+   - WebID: `http://localhost:3000/bob/profile/card#me`
+
+4. **Charlie**:
+   - Email: `charlie@example.com`
+   - Password: `charlie123`
+   - Pod URL: `http://localhost:3000/charlie/`
+   - WebID: `http://localhost:3000/charlie/profile/card#me`
+
+## Testing ACP Sharing
+
+The seed config includes 4 test accounts (ruky, alice, bob, charlie) for testing sharing.
+
+**Steps to test:**
+1. Start the server: `npm run start:css`
+2. In your Next.js app (port 3001), log in as **ruky** (`rukyjacob@gmail.com` / `Test123$`)
+3. Navigate to ruky's pod storage
+4. Create a folder or file
+5. Click "Share" on the resource
+6. Add a WebID to share with (e.g., `http://localhost:3000/alice/profile/card#me`)
+7. Select access level (Editor/Viewer) and click "Done"
+
+**Quick WebIDs for sharing:**
+- Alice: `http://localhost:3000/alice/profile/card#me`
+- Bob: `http://localhost:3000/bob/profile/card#me`
+- Charlie: `http://localhost:3000/charlie/profile/card#me`
+
+## Notes
+
+- The server uses ACP (not WAC), so ACRs should be at `.acr` location
+- Make sure to use `http://localhost:3000` as the OIDC issuer in your app
+- The server will create pods automatically when accounts are seeded
+

README.md

@@ -147,7 +147,6 @@ solid-file-manager/
 │   │   ├── RenameDialog.tsx  # Dialog for renaming resources
 │   │   ├── MoveDialog.tsx   # Dialog for moving files
 │   │   ├── PreviewModal.tsx # Modal for previewing files
-│   │   ├── PermissionsDialog.tsx # Sharing/permissions dialog
 │   │   ├── FileUploadHandler.tsx # File upload component
 │   │   ├── ProfileIcon.tsx  # User profile icon and logout
 │   │   ├── LoginPage.tsx   # Login page

app/components/FileManager.tsx

@@ -19,13 +19,13 @@ import Header from "./Header";
 import Sidebar from "./Sidebar";
 import Breadcrumb from "./Breadcrumb";
 import FileList from "./FileList";
-import PermissionsDialog, { Permission } from "./PermissionsDialog";
 import NewFolderDialog from "./NewFolderDialog";
 import RenameDialog from "./RenameDialog";
 import PreviewModal from "./PreviewModal";
 import MoveDialog from "./MoveDialog";
 import DeleteConfirmDialog from "./DeleteConfirmDialog";
 import ShareDialog, { AccessLevel } from "./ShareDialog";
+import ShareSuccessModal from "./ShareSuccessModal";
 import FileUploadHandler from "./FileUploadHandler";
 import ContextMenu, { ContextMenuAction } from "./ContextMenu";
 import { FileItemData } from "./FileItem";
@@ -48,6 +48,7 @@ import {
   hasFiles as hasFilesInDrag,
   isUnsupportedFolderDrag,
 } from "../lib/helpers";
+import { shareResourceWithAcp } from "../lib/helpers/acpUtils";
 import {
   getUrlFromSearchParams,
   getUrlFromStorage,
@@ -76,10 +77,6 @@ export default function FileManager() {
   const [selectedFileIds, setSelectedFileIds] = useState<string[]>([]);
   const [isInitialized, setIsInitialized] = useState(false);
   const [refreshKey, setRefreshKey] = useState(0);
-  const [permissionsDialogOpen, setPermissionsDialogOpen] = useState(false);
-  const [selectedFileForPermissions, setSelectedFileForPermissions] =
-    useState<FileItemData | null>(null);
-  const [permissions, setPermissions] = useState<Permission[]>([]);
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const [showNewFolderDialog, setShowNewFolderDialog] = useState(false);
   const [fileUploadTrigger, setFileUploadTrigger] = useState(0);
@@ -99,6 +96,9 @@ export default function FileManager() {
   const [showShareDialog, setShowShareDialog] = useState(false);
   const [fileToShare, setFileToShare] = useState<FileItemData | null>(null);
   const [contextMenuState, setContextMenuState] = useState<ContextMenuState | null>(null);
+  const [showShareSuccessModal, setShowShareSuccessModal] = useState(false);
+  const [sharedResourceUrl, setSharedResourceUrl] = useState<string>("");
+  const [sharedResourceName, setSharedResourceName] = useState<string>("");
 
   const closeContextMenu = () => setContextMenuState(null);
 
@@ -401,10 +401,38 @@ export default function FileManager() {
     setShowShareDialog(true);
   };
 
-  const handleShareConfirm = async (webId: string, accessLevel: AccessLevel) => {
-    // TODO: Implement actual sharing logic
-    console.log(`Sharing ${fileToShare?.name} with ${webId} as ${accessLevel}`);
-    toast.success(`Shared with ${webId} as ${accessLevel}`);
+  const handleShareConfirm = async (webIds: string[], accessLevel: AccessLevel) => {
+    if (!fileToShare) {
+      return;
+    }
+
+    const toastId = toast.loading(`Sharing "${fileToShare.name}"...`);
+    try {
+      // Get the resource URL - ensure it has a trailing slash for containers
+      let resourceUrl = fileToShare.url;
+      if (fileToShare.type === "folder" && !resourceUrl.endsWith("/")) {
+        resourceUrl += "/";
+      }
+
+      await shareResourceWithAcp(resourceUrl, webIds, accessLevel);
+
+      toast.success(`Successfully shared "${fileToShare.name}"`, { id: toastId });
+      setShowShareDialog(false);
+      
+      // Show success modal with resource URL
+      setSharedResourceUrl(resourceUrl);
+      setSharedResourceName(fileToShare.name);
+      setShowShareSuccessModal(true);
+      setFileToShare(null);
+    } catch (error) {
+      console.error("Failed to share resource:", error);
+      toast.error(
+        error instanceof Error
+          ? `Failed to share: ${error.message}`
+          : "Failed to share resource",
+        { id: toastId }
+      );
+    }
   };
 
   const handleDragEnter = (event: React.DragEvent<HTMLElement>) => {
@@ -711,41 +739,6 @@ export default function FileManager() {
     }
   };
 
-  const handleShareClickForFile = (file: FileItemData) => {
-    setSelectedFileForPermissions(file);
-    setPermissionsDialogOpen(true);
-    setPermissions([
-      {
-        id: "1",
-        type: "user",
-        webId: "https://id.inrupt.com/user",
-        name: "You",
-        role: "owner",
-      },
-    ]);
-  };
-
-  const handleAddPermission = async (webId: string, role: "viewer" | "editor") => {
-    const newPermission: Permission = {
-      id: Date.now().toString(),
-      type: "user",
-      webId,
-      name: webId.split("/").pop() || webId,
-      role,
-    };
-    setPermissions((prev) => [...prev, newPermission]);
-  };
-
-  const handleRemovePermission = (permissionId: string) => {
-    setPermissions((prev) => prev.filter((p) => p.id !== permissionId));
-  };
-
-  const handleUpdatePermission = (permissionId: string, role: "viewer" | "editor") => {
-    setPermissions((prev) =>
-      prev.map((p) => (p.id === permissionId ? { ...p, role } : p))
-    );
-  };
-
   if (isLoadingStorages) {
     return (
       <AuthWrapper>
@@ -831,7 +824,7 @@ export default function FileManager() {
             </div>
             {isBrowsing ? (
               <div className="flex flex-1 items-center justify-center">
-                <LoadingSpinner size="md" text="Loading folder contents..." />
+                    <LoadingSpinner size="md" text="Loading folder contents..." />
               </div>
             ) : (
               <div className="flex-1 min-h-0 overflow-hidden">
@@ -854,20 +847,7 @@ export default function FileManager() {
             )}
           </main>
         </div>
-        {selectedFileForPermissions && (
-          <PermissionsDialog
-            isOpen={permissionsDialogOpen}
-            onClose={() => {
-              setPermissionsDialogOpen(false);
-              setSelectedFileForPermissions(null);
-            }}
-            fileName={selectedFileForPermissions.name}
-            permissions={permissions}
-            onAddPermission={handleAddPermission}
-            onRemovePermission={handleRemovePermission}
-            onUpdatePermission={handleUpdatePermission}
-          />
-        )}
+        
         <NewFolderDialog
           isOpen={showNewFolderDialog}
           onClose={() => setShowNewFolderDialog(false)}
@@ -921,6 +901,16 @@ export default function FileManager() {
           file={fileToShare}
           onShare={handleShareConfirm}
         />
+        <ShareSuccessModal
+          isOpen={showShareSuccessModal}
+          onClose={() => setShowShareSuccessModal(false)}
+          resourceUrl={sharedResourceUrl}
+          resourceName={sharedResourceName}
+          onOpenInApp={(url) => {
+            // Navigate to the resource URL in the file manager
+            updateUrl(url);
+          }}
+        />
         {isDragActive && (
           <div className="pointer-events-none fixed inset-0 z-40 flex flex-col items-center justify-center bg-purple-500/10">
             <div className="rounded-2xl border border-purple-400 bg-white/90 px-8 py-6 text-center shadow-lg">

app/components/LoginPage.tsx

@@ -8,6 +8,7 @@ import Button from "./shared/Button";
 const OIDC_ISSUERS = [
   { label: "Solid Community", value: "https://solidcommunity.net/" },
   { label: "Inrupt", value: "https://login.inrupt.com" },
+  { label: "Local CSS (ACP)", value: "http://localhost:3000/" },
 ] as const;
 
 export default function LoginPage() {