- 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>
20 lines
682 B
TypeScript
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']); }
|
|
}
|