feat(web): migrate Projects, Schemas, Settings, and Login pages to React #9

Closed
opened 2026-02-06 20:44:11 +00:00 by forbes · 0 comments
Owner

Phase 3 of #6 — Frontend Migration

Goal

Migrate the remaining 4 pages from Go templates to React components. These are all simpler than Items — the heaviest is schemas.html at 399 lines. Most of the infrastructure (API client, auth, theme, router) is already in place from Phase 1.

Pages to Migrate

Login Page (~222 lines in login.html)

  • Username/password form
  • OIDC login button (when OIDC is enabled)
  • Error message display
  • Redirect to previous page after login
  • Note: LoginPage component may already exist from #7 — enhance if needed

Projects Page (~300 lines in projects.html)

  • Project list table with code, name, description, item count
  • Create project dialog
  • Edit project inline or via dialog
  • Delete project with confirmation
  • Click project code to navigate to Items page filtered by that project

Schemas Page (~399 lines in schemas.html)

  • Schema browser — list schemas, show segments and category codes
  • Enum value management — add, edit, delete segment values
  • Property definitions display
  • Schema detail panel

Settings Page (~291 lines in settings.html)

  • User profile display (username, role, email)
  • API token management (list, create, revoke)
  • Token display on creation (show-once pattern)
  • Password change form (local auth only)

Shared Components to Extract

During migration, identify and extract reusable components:

  • DataTable — sortable table with optional pagination (used by Projects, Schemas)
  • ConfirmDialog — confirmation modal for destructive actions
  • FormField — labeled input with validation state
  • Toast / notification system for success/error messages

Acceptance Criteria

  • All 4 pages fully functional in React — feature parity with Go template versions
  • Login flow works with all 3 auth backends (local, LDAP, OIDC)
  • Project CRUD works, navigation to filtered Items page works
  • Schema browsing and enum editing works
  • API token create/revoke works
  • Consistent styling with Items page (Catppuccin Mocha theme)
  • No Go template pages remain in active use

Dependencies

Requires #7 (scaffold) and #8 (Items page — establishes component patterns).

## Phase 3 of #6 — Frontend Migration ### Goal Migrate the remaining 4 pages from Go templates to React components. These are all simpler than Items — the heaviest is schemas.html at 399 lines. Most of the infrastructure (API client, auth, theme, router) is already in place from Phase 1. ### Pages to Migrate #### Login Page (~222 lines in login.html) - [ ] Username/password form - [ ] OIDC login button (when OIDC is enabled) - [ ] Error message display - [ ] Redirect to previous page after login - [ ] Note: LoginPage component may already exist from #7 — enhance if needed #### Projects Page (~300 lines in projects.html) - [ ] Project list table with code, name, description, item count - [ ] Create project dialog - [ ] Edit project inline or via dialog - [ ] Delete project with confirmation - [ ] Click project code to navigate to Items page filtered by that project #### Schemas Page (~399 lines in schemas.html) - [ ] Schema browser — list schemas, show segments and category codes - [ ] Enum value management — add, edit, delete segment values - [ ] Property definitions display - [ ] Schema detail panel #### Settings Page (~291 lines in settings.html) - [ ] User profile display (username, role, email) - [ ] API token management (list, create, revoke) - [ ] Token display on creation (show-once pattern) - [ ] Password change form (local auth only) ### Shared Components to Extract During migration, identify and extract reusable components: - [ ] `DataTable` — sortable table with optional pagination (used by Projects, Schemas) - [ ] `ConfirmDialog` — confirmation modal for destructive actions - [ ] `FormField` — labeled input with validation state - [ ] `Toast` / notification system for success/error messages ### Acceptance Criteria - All 4 pages fully functional in React — feature parity with Go template versions - Login flow works with all 3 auth backends (local, LDAP, OIDC) - Project CRUD works, navigation to filtered Items page works - Schema browsing and enum editing works - API token create/revoke works - Consistent styling with Items page (Catppuccin Mocha theme) - No Go template pages remain in active use ### Dependencies Requires #7 (scaffold) and #8 (Items page — establishes component patterns).
Sign in to join this conversation.
No Label
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: kindred/silo#9