Skip to main content

Phase 2: Landing Page & Auth

Build the public-facing landing page at app.redactedworld.com with three switchable themes, wire up user registration and login through Keycloak, and redirect authenticated users to the admin portal.

Prerequisites

  • Phase 1 -- Traefik must be routing traffic and Keycloak must be deployed with the redactedworld realm and client registrations.

Blocks

IDBlockDescriptionAcceptance Criteria
2.1Landing page -- Dark Hacker themeBuild the default landing page theme with a dark background, terminal-style typography, neon green accents, and glitch/matrix animations. Sections: hero, features, pricing, footer.Page loads at app.redactedworld.com with the dark hacker visual treatment; all sections render correctly on desktop and mobile.
2.2Landing page -- Clean Professional themeCreate an alternate light/corporate theme with the same layout structure but muted colors, sans-serif typography, and subtle transitions.Switching to this theme re-renders the page with the professional look; layout and content remain identical.
2.3Landing page -- Hybrid themeCreate a third theme that blends dark backgrounds with clean typography and selective neon highlights.Theme renders correctly and sits visually between the other two; no style conflicts or missing tokens.
2.4Theme switcher componentAdd a floating or nav-bar-embedded toggle that cycles through the three themes, persists the choice in localStorage, and applies it instantly without a page reload.Clicking the toggle cycles themes; refreshing the page retains the selected theme; there is no flash of unstyled content.
2.5Registration flow via KeycloakIntegrate the Angular frontend with Keycloak OIDC for self-service registration: sign-up form, email verification, and account activation.A new user can register, receive a verification email, activate, and land on the login screen.
2.6Login redirect to admin.redactedworld.comAfter a successful Keycloak login from the landing page, redirect the user to admin.redactedworld.com with a valid access token stored in an HTTP-only cookie or Authorization header.Logging in redirects to the admin portal; the admin portal receives a valid JWT; unauthenticated access to admin redirects back to login.

Estimated Scope

AreaFiles / Resources
Angular appfrontend/src/app/landing/, frontend/src/app/themes/
Theme tokensfrontend/src/styles/themes/dark-hacker.scss, clean-professional.scss, hybrid.scss
Auth modulefrontend/src/app/auth/, Keycloak JS adapter configuration
Keycloak realmredactedworld realm client settings (redirect URIs, web origins)
Kubernetesk8s/frontend/ (Deployment, Service, IngressRoute for app.redactedworld.com)