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.
57 lines
3.1 KiB
Markdown
57 lines
3.1 KiB
Markdown
# Phase 10: Quick Deploy & Settings Pages
|
|
|
|
**Status:** ⬜ Not Started
|
|
**Parent plan:** [PLAN.md](./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.svelte` or 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 deploy
|
|
- `web/src/routes/settings/+layout.svelte` — settings layout
|
|
- `web/src/routes/settings/+page.svelte` — global settings
|
|
- `web/src/routes/settings/registries/+page.svelte` — registry management
|
|
- `web/src/routes/settings/credentials/+page.svelte` — credential management
|
|
- `web/src/lib/components/Toast.svelte` — toast notifications
|
|
- `web/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
|
|
|
|
## Handoff to Next Phase
|
|
<!-- Filled in by the implementation agent after completing this phase. -->
|