feat(phase2): per-board access control UI

- BoardAccessControl component with user/group autocomplete
- BoardShareDialog modal with copy link, guest toggle, quick add
- Board permissions REST API (GET/POST/DELETE)
- Access indicators on BoardCard (lock, globe, shared icons)
- Guest access toggle in board editor with status preview
- Enhanced PermissionEditor with search autocomplete
- i18n translations for all new strings (EN/RU)
This commit is contained in:
2026-03-24 23:29:19 +03:00
parent 477c0e4d52
commit 5bb4fbcedf
16 changed files with 1166 additions and 57 deletions
@@ -61,3 +61,19 @@ Admin settings page has a working "Test Connection" button for OAuth configurati
- Translation key structure uses dot-notation grouped by feature: `nav.*`, `auth.*`, `board.*`, `section.*`, `widget.*`, `app.*`, `admin.*`, `search.*`, `common.*`, `status.*`, `theme.*`, `bg.*`, `sidebar.*`, `home.*`
- All status labels (online/offline/degraded/unknown) are now translated via `$t('status.*')` in AppHealthBadge
- Phase 4 widget type form labels (bookmark, note, embed, status fields) are partially untranslated — can be addressed in Phase 6
## Phase 5 (Per-Board Access Control UI) — Completed
- Created `src/lib/components/board/BoardAccessControl.svelte` — self-contained board permission manager with search/autocomplete for users and groups, fetches permissions from `/api/boards/[id]/permissions`
- Created `src/lib/components/board/BoardShareDialog.svelte` — modal dialog with copy link, guest access toggle, quick permission grant, and current access list
- Created `src/routes/api/boards/[id]/permissions/+server.ts` — REST endpoint for GET (list), POST (grant), DELETE (revoke) board permissions with proper auth checks
- Enhanced `src/lib/components/admin/PermissionEditor.svelte` — replaced plain select dropdowns with search/autocomplete inputs (onfocus/onblur managed dropdowns)
- Updated `src/lib/components/board/BoardCard.svelte` — added globe icon for guest-accessible boards, lock icon for private boards, users icon for boards with shared permissions
- Updated `src/routes/boards/+page.server.ts` — computes `hasSharedPermissions` flag per board for access indicators
- Updated `src/routes/boards/[boardId]/edit/+page.svelte` — added dedicated "Guest Access" section with status preview and "Permissions" section with `BoardAccessControl` component
- Updated `src/routes/boards/[boardId]/edit/+page.server.ts` — loads users and groups for permission editor, computes `canManagePermissions` flag
- Updated `src/lib/components/board/BoardHeader.svelte` — added "Share" button that triggers share dialog callback
- Updated `src/routes/boards/[boardId]/+page.svelte` — integrated `BoardShareDialog` with guest toggle via PATCH API
- Updated `src/routes/boards/[boardId]/+page.server.ts` — loads users/groups for share dialog when user can edit
- Added ~20 new i18n keys (`board.access_*`, `board.share_*`, `board.guest_access_*`, `board.permissions_*`, `admin.perm_search_placeholder`) to both `en.json` and `ru.json`
- Big Bang strategy: no build/test verification performed — Phase 6 integration may be needed
+1 -1
View File
@@ -34,7 +34,7 @@ Add OAuth/Authentik integration, drag-and-drop reordering, localization (EN/RU),
| Phase 2: DnD | frontend | Done | ⬜ | ⬜ | ⬜ |
| Phase 3: Localization | fullstack | Done | ⬜ | ⬜ | ⬜ |
| Phase 4: Widgets | fullstack | Done | ⬜ | ⬜ | ⬜ |
| Phase 5: Access Control | fullstack | ⬜ Not Started | ⬜ | ⬜ | ⬜ |
| Phase 5: Access Control | fullstack | Done | ⬜ | ⬜ | ⬜ |
| Phase 6: Integration | fullstack | ⬜ Not Started | ⬜ | ⬜ | ⬜ |
## Final Review
@@ -1,6 +1,6 @@
# Phase 4: Per-Board Access Control UI
**Status:** ⬜ Not Started
**Status:** Done
**Parent plan:** [PLAN.md](./PLAN.md)
**Domain:** fullstack
@@ -9,14 +9,14 @@ Add a user-friendly access control interface for boards, allowing admins to mana
## Tasks
- [ ] Task 1: Create `src/lib/components/board/BoardAccessControl.svelte` — inline permission editor for boards
- [ ] Task 2: Add access control tab/section to board editor page
- [ ] Task 3: Create `src/routes/api/boards/[id]/permissions/+server.ts` — GET/POST/DELETE permissions for a board
- [ ] Task 4: Update `src/lib/components/admin/PermissionEditor.svelte` — enhance with user/group search/autocomplete
- [ ] Task 5: Update `src/lib/components/board/BoardCard.svelte` — show access level indicator (icon/badge)
- [ ] Task 6: Update `src/routes/boards/+page.svelte` — show access indicators on board list
- [ ] Task 7: Add guest access toggle with preview description to board editor
- [ ] Task 8: Create `src/lib/components/board/BoardShareDialog.svelte` — quick share dialog for boards
- [x] Task 1: Create `src/lib/components/board/BoardAccessControl.svelte` — inline permission editor for boards
- [x] Task 2: Add access control tab/section to board editor page
- [x] Task 3: Create `src/routes/api/boards/[id]/permissions/+server.ts` — GET/POST/DELETE permissions for a board
- [x] Task 4: Update `src/lib/components/admin/PermissionEditor.svelte` — enhance with user/group search/autocomplete
- [x] Task 5: Update `src/lib/components/board/BoardCard.svelte` — show access level indicator (icon/badge)
- [x] Task 6: Update `src/routes/boards/+page.svelte` — show access indicators on board list
- [x] Task 7: Add guest access toggle with preview description to board editor
- [x] Task 8: Create `src/lib/components/board/BoardShareDialog.svelte` — quick share dialog for boards
## Files to Modify/Create
- `src/lib/components/board/BoardAccessControl.svelte` — NEW
@@ -26,7 +26,12 @@ Add a user-friendly access control interface for boards, allowing admins to mana
- `src/routes/boards/[boardId]/edit/+page.server.ts` — MODIFY
- `src/lib/components/admin/PermissionEditor.svelte` — MODIFY
- `src/lib/components/board/BoardCard.svelte` — MODIFY
- `src/routes/boards/+page.svelte` — MODIFY
- `src/routes/boards/+page.svelte` — MODIFY (server only — +page.server.ts)
- `src/routes/boards/[boardId]/+page.svelte` — MODIFY
- `src/routes/boards/[boardId]/+page.server.ts` — MODIFY
- `src/lib/components/board/BoardHeader.svelte` — MODIFY
- `src/lib/i18n/en.json` — MODIFY
- `src/lib/i18n/ru.json` — MODIFY
## Acceptance Criteria
- Board editor has a permissions section for managing access
@@ -38,14 +43,24 @@ Add a user-friendly access control interface for boards, allowing admins to mana
## Notes
- The permission system already exists from MVP (permissionService)
- This phase adds the UI layer on top of existing backend
- ⚠️ Big Bang: may need integration fixes in Phase 5
- ⚠️ Big Bang: may need integration fixes in Phase 6
## Review Checklist
- [ ] All tasks completed
- [ ] Code follows project conventions
- [x] All tasks completed
- [x] Code follows project conventions
- [ ] No unintended side effects
- [ ] Build passes
- [ ] Tests pass (new + existing)
## Handoff to Next Phase
<!-- Filled in by the implementation agent after completing this phase. -->
- Created `BoardAccessControl.svelte` — self-contained board permission manager with search/autocomplete, fetches from `/api/boards/[id]/permissions`
- Created `BoardShareDialog.svelte` — modal dialog for quick sharing with copy link, guest toggle, and permission management
- Created `/api/boards/[id]/permissions` API endpoint with GET/POST/DELETE for board-scoped permissions
- Enhanced `PermissionEditor.svelte` with search/autocomplete inputs replacing plain dropdowns
- Updated `BoardCard.svelte` with globe (guest), lock (private), and users (shared) icons
- Updated board editor with dedicated Guest Access and Permissions sections
- Updated `BoardHeader.svelte` with Share button that opens the share dialog
- Updated board view page (`[boardId]/+page.svelte`) and its server load to support share dialog with user/group data
- Updated boards list server to compute `hasSharedPermissions` flag per board
- Added ~20 new i18n keys in both `en.json` and `ru.json` for all new UI strings
- Big Bang strategy: no build/test verification — Phase 6 integration may be needed