Files
atomic-design-poc/src/app/pages/login/login.page.ts
Claude f1f4f982a6 Full-width layout, page-shell template, httpResource async states, README
- Fix full-bleed header/footer (align-items:stretch + block hosts; centered
  content column via shared --app-content-max).
- New templates/page-shell (back-link + heading + intro + content, narrow mode);
  all pages refactored to compose it.
- Async state management with native httpResource + <app-async> wrapper that
  renders exactly one of loading/empty/error/loaded (impossible states
  unrepresentable); delayed spinner + skeleton atoms for slow/fast connections.
- Scenario interceptor (?scenario=slow|loading|empty|error) to demo every state.
- Storybook: spinner/skeleton/page-shell/async-states stories.
- README rewritten as a guide (atomic design, reuse benefits, state handling).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-25 14:53:28 +02:00

20 lines
682 B
TypeScript

import { Component, inject } from '@angular/core';
import { Router } from '@angular/router';
import { PageShellComponent } from '../../templates/page-shell/page-shell.component';
import { LoginFormComponent } from '../../organisms/login-form/login-form.component';
@Component({
selector: 'app-login-page',
imports: [PageShellComponent, LoginFormComponent],
template: `
<app-page-shell heading="Inloggen" width="narrow"
intro="Log in op uw persoonlijke BIG-register omgeving.">
<app-login-form (submit)="login()" />
</app-page-shell>
`,
})
export class LoginPage {
private router = inject(Router);
login() { this.router.navigate(['/dashboard']); }
}