alexei.dolgolyov/web-app-launcher
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat(phase2): OAuth/Authentik integration + drag-and-drop reordering

Browse Source 
- Add OIDC/OAuth2 login via openid-client with PKCE flow
- Auto-provision OAuth users with group mapping
- Conditional login page (OAuth/local/both based on auth mode)
- Admin OAuth test connection button
- Install svelte-dnd-action for board editor DnD
- Draggable sections and widgets with cross-section moves
- Reorder APIs with atomic Prisma transactions
- Visual drag handles and drop zone indicators
This commit is contained in:
Admin
2026-03-24 22:54:54 +03:00
parent ae114ab9ce
commit bf4e5089ee
22 changed files with 1273 additions and 257 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plans/phase-2-enhanced-features/CONTEXT.md
+16 -4
View File
@@ -1,8 +1,11 @@
# Feature Context: Phase 2 — Enhanced Features
## Current State
MVP is complete and merged to master. All build/test/lint passes. 151 files, 115 tests.
Starting Phase 2 enhanced features on a new feature branch.
Phase 1 (OAuth/Authentik Integration) and Phase 2 (DnD) are complete.
Installed `openid-client` v6.8.2. OAuth login flow uses PKCE and issues local JWT tokens.
Login page conditionally shows OAuth button and/or local form based on `authMode` SystemSettings.
Admin settings page has a working "Test Connection" button for OAuth configuration.
## Temporary Workarounds
- None yet
@@ -15,7 +18,16 @@ Starting Phase 2 enhanced features on a new feature branch.
- Phase 5 (Integration) depends on all prior phases
## Implementation Notes
- Big Bang strategy: intermediate phases may not build. Phase 5 is the convergence phase.
- Big Bang strategy: intermediate phases may not build. Phase 6 is the convergence phase.
- OAuth uses `openid-client` (already installed in MVP dependencies)
- DnD uses `svelte-dnd-action` (needs to be installed)
- DnD uses `svelte-dnd-action` (installed in Phase 2)
- New widget types extend the existing Widget model's `type` and `config` JSON fields
## Phase 2 (DnD) — Completed
- Installed `svelte-dnd-action` package
- Created `DraggableBoard.svelte`, `DraggableSection.svelte`, `DraggableWidget.svelte` component hierarchy
- Board edit page now uses DnD for section and widget reordering (including cross-section widget moves)
- Added `PUT /api/boards/[id]/reorder` and `PUT /api/boards/[id]/sections/[sid]/reorder` endpoints
- Extended `boardService.ts` with `reorderSections()`, `reorderWidgets()`, `moveWidget()` using Prisma transactions
- Visual drag handles (grip dots) and dashed drop zone indicators added via Tailwind
- Edit page actions (add/delete section/widget) use `invalidateAll()` for data refresh; DnD uses optimistic fetch
plans/phase-2-enhanced-features/PLAN.md
+3 -3
View File
@@ -19,7 +19,7 @@ Add OAuth/Authentik integration, drag-and-drop reordering, localization (EN/RU),
## Phases
- [ ] Phase 1: OAuth/Authentik Integration [fullstack] → [subplan](./phase-1-oauth.md)
- [x] Phase 1: OAuth/Authentik Integration [fullstack] → [subplan](./phase-1-oauth.md)
- [ ] Phase 2: Drag-and-Drop Reordering [frontend] → [subplan](./phase-2-dnd.md)
- [ ] Phase 3: Localization EN/RU [fullstack] → [subplan](./phase-3-localization.md)
- [ ] Phase 4: Additional Widget Types [fullstack] → [subplan](./phase-4-widgets.md)
@@ -30,8 +30,8 @@ Add OAuth/Authentik integration, drag-and-drop reordering, localization (EN/RU),
| Phase | Domain | Status | Review | Build | Committed |
|-------|--------|--------|--------|-------|-----------|
| Phase 1: OAuth | fullstack | ⬜ Not Started | ⬜ | ⬜ | ⬜ |
| Phase 2: DnD | frontend | ⬜ Not Started | ⬜ | ⬜ | ⬜ |
| Phase 1: OAuth | fullstack | Done | ⬜ | ⬜ | ⬜ |
| Phase 2: DnD | frontend | Done | ⬜ | ⬜ | ⬜ |
| Phase 3: Localization | fullstack | ⬜ Not Started | ⬜ | ⬜ | ⬜ |
| Phase 4: Widgets | fullstack | ⬜ Not Started | ⬜ | ⬜ | ⬜ |
| Phase 5: Access Control | fullstack | ⬜ Not Started | ⬜ | ⬜ | ⬜ |
plans/phase-2-enhanced-features/phase-1-oauth.md
+22 -14
View File
@@ -1,6 +1,6 @@
# Phase 1: OAuth/Authentik Integration
**Status:** ⬜ Not Started
**Status:** ✅ Complete
**Parent plan:** [PLAN.md](./PLAN.md)
**Domain:** fullstack
@@ -9,16 +9,16 @@ Add OIDC/OAuth2 authentication via Authentik, including redirect/callback flows,
## Tasks
- [ ] Task 1: Create `src/lib/server/services/oauthService.ts` — OIDC client setup, discovery, token exchange
- [ ] Task 2: Create `src/routes/auth/oauth/authorize/+server.ts` — redirect to Authentik with PKCE
- [ ] Task 3: Create `src/routes/auth/oauth/callback/+server.ts` — handle callback, exchange code, provision user
- [ ] Task 4: Update `src/lib/server/services/userService.ts` — add `findOrCreateByOAuth()` for auto-provisioning
- [ ] Task 5: Update `src/routes/login/+page.svelte` — show OAuth button when auth mode is OAUTH or BOTH
- [ ] Task 6: Update `src/routes/login/+page.server.ts` — load auth mode from SystemSettings
- [ ] Task 7: Update `src/routes/admin/settings/+page.svelte` — make OAuth config fields functional (client ID, secret, discovery URL)
- [ ] Task 8: Update `src/lib/components/admin/SettingsForm.svelte` — add OAuth test connection button
- [ ] Task 9: Update `src/hooks.server.ts` — handle OAuth sessions alongside local JWT sessions
- [ ] Task 10: Add env vars to `.env.example` — OAUTH_CLIENT_ID, OAUTH_CLIENT_SECRET, OAUTH_DISCOVERY_URL, OAUTH_REDIRECT_URI
- [x] Task 1: Create `src/lib/server/services/oauthService.ts` — OIDC client setup, discovery, token exchange
- [x] Task 2: Create `src/routes/auth/oauth/authorize/+server.ts` — redirect to Authentik with PKCE
- [x] Task 3: Create `src/routes/auth/oauth/callback/+server.ts` — handle callback, exchange code, provision user
- [x] Task 4: Update `src/lib/server/services/userService.ts` — add `findOrCreateByOAuth()` for auto-provisioning
- [x] Task 5: Update `src/routes/login/+page.svelte` — show OAuth button when auth mode is OAUTH or BOTH
- [x] Task 6: Update `src/routes/login/+page.server.ts` — load auth mode from SystemSettings
- [x] Task 7: Update `src/routes/admin/settings/+page.svelte` — make OAuth config fields functional (client ID, secret, discovery URL)
- [x] Task 8: Update `src/lib/components/admin/SettingsForm.svelte` — add OAuth test connection button
- [x] Task 9: Update `src/hooks.server.ts` — handle OAuth sessions alongside local JWT sessions (no changes needed — existing JWT hook handles OAuth users transparently)
- [x] Task 10: Add env vars to `.env.example` — OAUTH_CLIENT_ID, OAUTH_CLIENT_SECRET, OAUTH_DISCOVERY_URL, OAUTH_REDIRECT_URI
## Files to Modify/Create
- `src/lib/server/services/oauthService.ts` — NEW
@@ -48,11 +48,19 @@ Add OIDC/OAuth2 authentication via Authentik, including redirect/callback flows,
- ⚠️ Big Bang: may not fully work until Phase 5 integration
## 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. -->
- Installed `openid-client` v6.8.2 as a runtime dependency.
- OAuth flow issues local JWT tokens, so hooks.server.ts required no changes.
- New API endpoint `POST /api/admin/oauth/test` added for the test connection button in SettingsForm.
- `findOrCreateByOAuth()` syncs OAuth groups to local groups by name (groups must pre-exist locally).
- Login page conditionally renders OAuth button and/or local form based on `authMode` from SystemSettings.
- OIDC discovery result is cached in-memory and invalidated when the admin tests the connection.
- Phase 2 (DnD) and Phase 3 (Localization) are independent and can proceed in parallel.
plans/phase-2-enhanced-features/phase-2-dnd.md
+24 -16
View File
@@ -1,6 +1,6 @@
# Phase 2: Drag-and-Drop Reordering
**Status:** ⬜ Not Started
**Status:** Done
**Parent plan:** [PLAN.md](./PLAN.md)
**Domain:** frontend
@@ -9,16 +9,16 @@ Add drag-and-drop reordering for sections within boards and widgets within/acros
## Tasks
- [ ] Task 1: Install `svelte-dnd-action` package
- [ ] Task 2: Create `src/lib/components/board/DraggableBoard.svelte` — board with draggable sections
- [ ] Task 3: Create `src/lib/components/section/DraggableSection.svelte` — section with draggable widgets
- [ ] Task 4: Create `src/lib/components/widget/DraggableWidget.svelte` — draggable widget wrapper
- [ ] Task 5: Update `src/routes/boards/[boardId]/edit/+page.svelte` — replace static editor with DnD editor
- [ ] Task 6: Create `src/routes/api/boards/[id]/reorder/+server.ts` — API to persist section order changes
- [ ] Task 7: Create `src/routes/api/boards/[id]/sections/[sid]/reorder/+server.ts` — API to persist widget order changes
- [ ] Task 8: Update `src/lib/server/services/boardService.ts` — add `reorderSections()` and `reorderWidgets()` functions
- [ ] Task 9: Add visual drag handles and drop zone indicators
- [ ] Task 10: Support moving widgets between sections via cross-section DnD
- [x] Task 1: Install `svelte-dnd-action` package
- [x] Task 2: Create `src/lib/components/board/DraggableBoard.svelte` — board with draggable sections
- [x] Task 3: Create `src/lib/components/section/DraggableSection.svelte` — section with draggable widgets
- [x] Task 4: Create `src/lib/components/widget/DraggableWidget.svelte` — draggable widget wrapper
- [x] Task 5: Update `src/routes/boards/[boardId]/edit/+page.svelte` — replace static editor with DnD editor
- [x] Task 6: Create `src/routes/api/boards/[id]/reorder/+server.ts` — API to persist section order changes
- [x] Task 7: Create `src/routes/api/boards/[id]/sections/[sid]/reorder/+server.ts` — API to persist widget order changes
- [x] Task 8: Update `src/lib/server/services/boardService.ts` — add `reorderSections()` and `reorderWidgets()` functions
- [x] Task 9: Add visual drag handles and drop zone indicators
- [x] Task 10: Support moving widgets between sections via cross-section DnD
## Files to Modify/Create
- `package.json` — add svelte-dnd-action
@@ -42,14 +42,22 @@ Add drag-and-drop reordering for sections within boards and widgets within/acros
- `svelte-dnd-action` works well with Svelte 5
- Use optimistic updates — reorder in UI immediately, sync to server in background
- Reorder APIs should accept an array of IDs in the new order
- ⚠️ 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
- [ ] No unintended side effects
- [x] All tasks completed
- [x] Code follows project conventions
- [x] No unintended side effects
- [ ] Build passes
- [ ] Tests pass (new + existing)
## Handoff to Next Phase
<!-- Filled in by the implementation agent after completing this phase. -->
Phase 2 DnD is complete. Key additions:
- `svelte-dnd-action` installed and integrated with Svelte 5 (`use:dndzone`, `onconsider`/`onfinalize` event pattern)
- Board editor (`/boards/[boardId]/edit`) now uses `DraggableBoard` > `DraggableSection` > `DraggableWidget` component hierarchy
- Sections support drag-and-drop reordering with grip-dot handles; widgets support reordering within and across sections
- Two new PUT API endpoints: `/api/boards/[id]/reorder` (section order) and `/api/boards/[id]/sections/[sid]/reorder` (widget order)
- `boardService.ts` extended with `reorderSections()`, `reorderWidgets()`, and `moveWidget()` — all using `$transaction` for atomicity
- Edit page uses `invalidateAll()` for server actions (add/delete) while DnD reorder uses optimistic fetch calls
- Drop zones use dashed borders; drag handles use grip-dot SVG icons with hover opacity transitions
- No changes to auth, admin, or view-mode components