feat: Authentication login screen (#24)

Author: marciomyst

.gitignore

@@ -2,10 +2,12 @@
 bin/
 obj/
 dist/
+build/
 out/
 .artifacts/
 .dotnet-cli-home/
 restore*.log
+*.log
 
 # .NET
 *.user

.prettierignore

@@ -0,0 +1,10 @@
+node_modules/
+dist/
+build/
+coverage/
+.angular/cache/
+bin/
+obj/
+package-lock.json
+yarn.lock
+pnpm-lock.yaml

.specify/inputs/github-issues/23-authentication-login-screen.md

@@ -0,0 +1,142 @@
+# GitHub Issue Context
+
+## Source
+
+- Repository: marciomyst/SmartMovieCatalog
+- Issue: #23
+- URL: https://github.com/marciomyst/SmartMovieCatalog/issues/23
+- State: OPEN
+- Created: 05/03/2026 19:37:28
+- Updated: 05/03/2026 19:44:54
+- Milestone: M1 — Core Movie Catalog
+
+## Title
+
+Authentication login screen
+
+## Labels
+
+- type:feature
+- priority:high
+- area:api
+- area:frontend
+- area:ui
+- area:security
+- v1
+
+## Assignees
+
+_No assignees_
+
+
+
+## Issue Body
+
+## Summary
+
+Implement and document the Angular authentication login screen for Smart Movie Catalog.
+
+<img width="1338" height="737" alt="Image" src="https://github.com/user-attachments/assets/1580050b-6599-47c0-b4bd-a2fc7736ca96" />
+
+This issue covers the first frontend authentication surface: a dark cinematic login page that authenticates against the existing backend auth API and creates an in-memory frontend session.
+
+## Goal
+
+Allow users to authenticate from the Angular SPA using local email/password credentials and load their current user context before entering authenticated product flows.
+
+## Scope
+
+- Add the authentication login screen as the current SPA entry surface.
+- Keep the UI aligned with `frontend/DESIGN.md`: dark mode, cinematic visual direction, responsive layout, and Material Symbols icons.
+- Use an Angular reactive form with client-side validation for email and password.
+- Consume `POST /api/auth/authenticate` through a typed frontend API service.
+- After successful authentication, call `GET /api/auth/me` using the returned bearer token.
+- Keep `HttpClient` calls isolated outside UI components.
+- Store the authenticated session in memory only through an auth session store.
+- Map backend `400 ValidationProblemDetails` to field-level frontend validation feedback.
+- Keep backend `401 Unauthorized` responses generic in the UI to avoid account enumeration.
+- Update documentation for frontend auth structure, security posture, API consumption, testing, and ADR coverage.
+
+## API Usage
+
+```http
+POST /api/auth/authenticate
+```
+
+Request:
+
+```json
+{ "email": "user@example.com", "password": "Password123!" }
+```
+
+Successful login then calls:
+
+```http
+GET /api/auth/me
+Authorization: Bearer <accessToken>
+```
+
+Local Angular development should use same-origin `/api` paths through `frontend/src/proxy.conf.js`.
+
+## Acceptance Criteria
+
+- Login screen renders as the SPA entry screen.
+- The page is responsive on mobile and desktop.
+- Email and password fields use Angular reactive form validation.
+- Password visibility can be toggled with an accessible icon button.
+- Submit calls `POST /api/auth/authenticate` with `email` and `password`.
+- Successful authentication calls `GET /api/auth/me` with the bearer token.
+- Successful authentication stores `accessToken`, `accessTokenExpiresAtUtc`, and current user data in memory.
+- Bearer token is not persisted in `localStorage` or `sessionStorage`.
+- `400 ValidationProblemDetails` displays field-level feedback.
+- `401 Unauthorized` displays a generic authentication error.
+- UI components do not call `HttpClient` directly.
+- Frontend auth contracts stay aligned with `SmartMovieCatalog.Contracts.Auth`.
+- Tests cover rendering, validation, password visibility, API calls, bearer header behavior, and unauthorized errors.
+- Documentation reflects the implemented auth screen and in-memory session strategy.
+
+## Technical Notes
+
+- Frontend auth code should live under `frontend/src/app/auth`.
+- Use typed API boundaries such as `AuthApi` and `auth.models.ts`.
+- Use an in-memory session store rather than browser storage.
+- Keep `/api` as the frontend request base so the same code works with Angular proxy locally and ASP.NET Core SPA hosting in runtime.
+- Any persistent session or refresh-token behavior requires a separate security decision.
+
+## Out of Scope
+
+- Refresh tokens.
+- Persistent browser sessions.
+- Route guards and authenticated app shell navigation.
+- Logout flow.
+- Registration.
+- Password recovery.
+- External identity providers.
+- Role-specific authorization UI.
+
+
+## Comments
+
+_No comments_
+
+## Instructions for Spec Kit
+
+Use this GitHub issue as the primary source of truth.
+
+Convert the issue into a Spec Kit feature specification before creating the implementation plan.
+
+Preserve:
+
+- business goal;
+- user stories;
+- acceptance criteria;
+- technical constraints;
+- non-goals;
+- dependencies;
+- open questions.
+
+If information is missing, add it under a clearly marked **Clarifications Needed** section instead of inventing requirements.
+
+If the issue conflicts with existing project documentation, explicitly call out the conflict.
+
+Prefer a small, incremental implementation plan aligned with the repository's existing architecture, folder structure, language, framework, and conventions.

AGENTS.md

@@ -127,7 +127,7 @@ Do not read, modify, or base analysis on generated/vendor output unless explicit
   - `test:`
 
 <!-- SPECKIT START -->
-Current Spec Kit plan: `specs/021-backend-authentication-with-jwt-and-current-user-context/plan.md`.
+Current Spec Kit plan: `specs/023-authentication-login-screen/plan.md`.
 
 Before using Spec Kit skills, read `.specify/memory/constitution.md`.
 If the spec, plan, or implementation touches backend, API, contracts, domain,

CONTEXT.md

@@ -1,4 +1,4 @@
-# AI Flix - Global Monorepo Context
+# Smart Movie Catalog - Global Monorepo Context
 
 This repository contains an ASP.NET Core backend and an Angular frontend.
 
@@ -8,7 +8,7 @@ Use this file to prevent context bleeding between backend and frontend work.
 - Backend files live under `backend/src`.
 - Before changing backend behavior, inspect the relevant C# project and layer.
 - The backend uses Clean Architecture projects: Api, Application, Domain, Infrastructure, and Contracts.
-- Do not assume CQRS, EF Core, PostgreSQL, or messaging infrastructure unless they exist in the codebase or the user explicitly requests that architecture.
+- EF Core/PostgreSQL persistence, JWT authentication, and Wolverine in-process CQRS exist in the backend. Do not assume distributed messaging, additional persistence stores, or external services unless they exist in the codebase or the user explicitly requests that architecture.
 - Keep backend code focused on explicit boundaries, clear request handling, dependency injection, configuration hygiene, and nullable-safe C#.
 - Do not put secrets in `appsettings*.json`, Dockerfiles, source files, or committed documentation.
 
@@ -17,6 +17,7 @@ Use this file to prevent context bleeding between backend and frontend work.
 - Before changing UI, HTML, CSS, or TypeScript components, read `frontend/DESIGN.md`.
 - Follow the existing Angular project conventions and dependencies in `frontend/package.json`.
 - Do not introduce external component libraries, custom palettes, or unrelated visual systems without explicit approval.
+- Auth UI and API access live under `frontend/src/app/auth`; components must not call `HttpClient` directly.
 
 ## 3. Generated And Vendor Paths
 Do not read or modify these paths unless explicitly required:

DESIGN.md

@@ -1,6 +1,6 @@
 # Design
 
-This file defines the root-level product design policy for AI Flix / SmartMovieCatalog.
+This file defines the root-level product design policy for Smart Movie Catalog / SmartMovieCatalog.
 
 For implementation-level frontend tokens and component rules, read:
 
@@ -32,7 +32,7 @@ If these documents conflict, prefer the most specific document:
 
 ## Visual Rules
 - Use dark mode as the default and only supported visual mode unless a light theme is explicitly added.
-- Follow the Tailwind-based palette and token rules in `frontend/DESIGN.md`.
+- Follow the Tailwind-inspired palette and token rules in `frontend/DESIGN.md`. The current Angular project uses local CSS for those tokens until Tailwind is added as a project dependency.
 - Do not introduce a separate color palette, component library, or visual framework without approval.
 - Prefer real movie/media imagery or durable product assets over abstract decorative graphics.
 - Avoid visual clutter, excessive gradients, nested cards, and ornamental backgrounds.

README.md

@@ -1,14 +1,14 @@
-# AI Flix / SmartMovieCatalog
+# Smart Movie Catalog / SmartMovieCatalog
 
-AI Flix is an early-stage movie catalog application with an ASP.NET Core backend and an Angular frontend.
+Smart Movie Catalog is an early-stage movie catalog application with an ASP.NET Core backend and an Angular frontend.
 
 ## Stack
 - Backend: ASP.NET Core 10 / C# in `backend/src/SmartMovieCatalog.Api`.
 - Frontend: Angular 21 / TypeScript in `frontend`.
 - SPA integration: ASP.NET Core SpaProxy.
 - Solution: `SmartMovieCatalog.slnx`.
 
-Do not assume persistence, CQRS, DDD layers, messaging, authentication, or AI-provider integration until those choices are implemented or documented through an architecture decision.
+Persistence, local JWT authentication, Clean Architecture layers, and Wolverine-based in-process CQRS are implemented and documented. Do not assume external messaging, refresh tokens, registration, password recovery, or AI-provider integration until those choices are implemented or documented through an architecture decision.
 
 ## Repository Layout
 ```text
@@ -93,6 +93,8 @@ The backend auth endpoints are:
 - `POST /api/auth/authenticate`
 - `GET /api/auth/me`
 
+The Angular login screen is available at the SPA root. It calls `POST /api/auth/authenticate`, then `GET /api/auth/me`, through same-origin `/api` routes. In local frontend development, `frontend/src/proxy.conf.js` proxies `/api` to the backend.
+
 Health check:
 
 ```bash
@@ -103,7 +105,7 @@ From `frontend`:
 
 ```bash
 npm run build
-npm test
+npm test -- --watch=false
 npm start
 ```
 
@@ -156,6 +158,7 @@ docker compose up -d --force-recreate api
 - Backend HTTP endpoints: Minimal API feature slices under `backend/src/SmartMovieCatalog.Api/Features`.
 - Auth endpoint mapping: `backend/src/SmartMovieCatalog.Api/Features/Auth`.
 - Frontend application: `frontend/src/app`.
+- Frontend auth module: `frontend/src/app/auth`.
 - Frontend visual system: `frontend/DESIGN.md`.
 - Root design policy: `DESIGN.md`.
 

SmartMovieCatalog.slnx

@@ -1,15 +1,19 @@
 <Solution>
-  <Project Path="frontend/Smartmoviecatalog.Angular.esproj">
-    <Build />
-    <Deploy />
-  </Project>
-  <Project Path="backend/src/SmartMovieCatalog.Application/SmartMovieCatalog.Application.csproj" />
-  <Project Path="backend/src/SmartMovieCatalog.Api/SmartMovieCatalog.Api.csproj" />
-  <Project Path="backend/src/SmartMovieCatalog.Contracts/SmartMovieCatalog.Contracts.csproj" />
-  <Project Path="backend/src/SmartMovieCatalog.Domain/SmartMovieCatalog.Domain.csproj" />
-  <Project Path="backend/src/SmartMovieCatalog.Infrastructure/SmartMovieCatalog.Infrastructure.csproj" />
-  <Project Path="backend/tests/SmartMovieCatalog.Api.Tests/SmartMovieCatalog.Api.Tests.csproj" />
-  <Project Path="backend/tests/SmartMovieCatalog.Application.Tests/SmartMovieCatalog.Application.Tests.csproj" />
-  <Project Path="backend/tests/SmartMovieCatalog.Domain.Tests/SmartMovieCatalog.Domain.Tests.csproj" />
-  <Project Path="backend/tests/SmartMovieCatalog.Infrastructure.Tests/SmartMovieCatalog.Infrastructure.Tests.csproj" />
+  <Folder Name="/src/">
+    <Project Path="backend/src/SmartMovieCatalog.Api/SmartMovieCatalog.Api.csproj" />
+    <Project Path="backend/src/SmartMovieCatalog.Application/SmartMovieCatalog.Application.csproj" />
+    <Project Path="backend/src/SmartMovieCatalog.Contracts/SmartMovieCatalog.Contracts.csproj" />
+    <Project Path="backend/src/SmartMovieCatalog.Domain/SmartMovieCatalog.Domain.csproj" />
+    <Project Path="backend/src/SmartMovieCatalog.Infrastructure/SmartMovieCatalog.Infrastructure.csproj" />
+  </Folder>
+  <Folder Name="/tests/">
+    <Project Path="backend/tests/SmartMovieCatalog.Api.Tests/SmartMovieCatalog.Api.Tests.csproj" />
+    <Project Path="backend/tests/SmartMovieCatalog.Application.Tests/SmartMovieCatalog.Application.Tests.csproj" />
+    <Project Path="backend/tests/SmartMovieCatalog.Domain.Tests/SmartMovieCatalog.Domain.Tests.csproj" />
+    <Project Path="backend/tests/SmartMovieCatalog.Infrastructure.Tests/SmartMovieCatalog.Infrastructure.Tests.csproj" />
+    <Project Path="frontend/Smartmoviecatalog.Angular.esproj">
+      <Build />
+      <Deploy />
+    </Project>
+  </Folder>
 </Solution>

backend/src/SmartMovieCatalog.Api/Dockerfile

@@ -35,6 +35,9 @@ COPY ["frontend/Smartmoviecatalog.Angular.esproj", "frontend/"]
 COPY ["frontend/package.json", "frontend/"]
 COPY ["frontend/package-lock.json", "frontend/"]
 
+COPY ["Directory.Packages.props", "."]
+COPY ["Directory.Build.props", "."]
+
 RUN dotnet restore "./backend/src/SmartMovieCatalog.Api/SmartMovieCatalog.Api.csproj" --disable-parallel
 COPY . .
 

docs/API.md

@@ -57,6 +57,12 @@ Returns `200 OK` with:
 
 Missing, malformed, expired, incorrectly signed, missing-user, inactive-user, and removed-user tokens return `401 Unauthorized` as `ProblemDetails`.
 
+## Frontend Consumption
+- The Angular login module calls `POST /api/auth/authenticate` with `email` and `password`.
+- On successful authentication, it calls `GET /api/auth/me` using the returned bearer token.
+- The frontend relies on same-origin `/api` paths. During local `ng serve`, `frontend/src/proxy.conf.js` forwards `/api` to the backend.
+- The frontend maps `400 ValidationProblemDetails` to field-level validation and keeps `401 ProblemDetails` generic to avoid account enumeration.
+
 ## API Design Rules
 - Keep endpoint contracts explicit and stable.
 - Use request and response DTOs for public API contracts when behavior grows beyond scaffold examples.