alexei.dolgolyov
0bb52f9ec6
Create structured plan files with 12 phases covering the full implementation: scaffold, store, crypto, Docker/NPM clients, registry poller, webhook, deployer, API layer, SvelteKit frontend, embedding, and hardening.
3.1 KiB
3.1 KiB
Phase 10: Quick Deploy & Settings Pages
Status: ⬜ Not Started Parent plan: PLAN.md Domain: frontend
Objective
Build the Quick Deploy page (paste image, auto-inspect, one-click deploy) and all Settings pages (registries, credentials, global settings, webhook URL).
Tasks
- Task 1: Quick Deploy page (
routes/deploy/+page.svelte) — image URL input, inspect button - Task 2: Quick Deploy inspect flow — call /api/deploy/inspect, display auto-filled form (project name, port, stage, subdomain)
- Task 3: Quick Deploy submit — user reviews defaults, clicks Deploy, calls /api/deploy/quick
- Task 4: Settings layout (
routes/settings/+layout.svelte) — sub-navigation for settings sections - Task 5: Global settings page (
routes/settings/+page.svelte) — domain, server IP, network, subdomain pattern, polling interval - Task 6: Registries page (
routes/settings/registries/+page.svelte) — list, add, edit, delete, test connection - Task 7: Credentials page (
routes/settings/credentials/+page.svelte) — NPM credentials, registry tokens (masked display) - Task 8: Webhook URL display and regenerate button in settings
- Task 9: Projects config page (
routes/projects/config/+page.svelteor integrated into project detail) — add/edit/delete projects, configure stages - Task 10: Stage configuration form — tag patterns, auto_deploy toggle, max_instances, subdomain override
- Task 11: Form validation on all input pages — required fields, URL format, port range
- Task 12: Success/error toast notifications for all form submissions
Files to Modify/Create
web/src/routes/deploy/+page.svelte— quick deployweb/src/routes/settings/+layout.svelte— settings layoutweb/src/routes/settings/+page.svelte— global settingsweb/src/routes/settings/registries/+page.svelte— registry managementweb/src/routes/settings/credentials/+page.svelte— credential managementweb/src/lib/components/Toast.svelte— toast notificationsweb/src/lib/components/FormField.svelte— reusable form field with validation
Acceptance Criteria
- Quick Deploy: paste image URL → inspect → review defaults → deploy works end-to-end
- All settings are editable and saved via API
- Registry test connection shows success/failure
- Credentials are masked in display (
••••••••) - Webhook URL is shown with copy button and regenerate option
- Form validation prevents bad submissions
Notes
- Quick Deploy is the zero-config entry point — should be dead simple UX
- Credential fields: show mask, edit replaces entirely (no partial edit)
- Registry test: calls POST /api/registries/:id/test, shows connection result
- Toast component: appears top-right, auto-dismiss after 5s, color-coded (green/red)
Review Checklist
- All tasks completed
- Quick deploy flow is intuitive (minimal clicks)
- Credentials never shown in plaintext in UI
- Form validation covers required fields and formats
- Error states are handled with user-friendly messages