Edwin van den Houdt
f3de30b72c
Wires text-input's aria-describedby to the form-field description div (the BSN hint was rendered but never announced), pins desc-before-error ordering, and switches alert to role=alert for errors vs role=status for info/ok/warning. Composition contract enforced by story play tests (form-field+text-input, alert per variant) run in the WP-01 CI gate. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
import { Component, output } from '@angular/core';
|
|
import { FormsModule } from '@angular/forms';
|
|
import { FormFieldComponent } from '@shared/ui/form-field/form-field.component';
|
|
import { TextInputComponent } from '@shared/ui/text-input/text-input.component';
|
|
import { ButtonComponent } from '@shared/ui/button/button.component';
|
|
|
|
/** Organism: DigiD-style mock login. No real auth — just composes atoms/molecules. */
|
|
@Component({
|
|
selector: 'app-login-form',
|
|
imports: [FormsModule, FormFieldComponent, TextInputComponent, ButtonComponent],
|
|
template: `
|
|
<form (ngSubmit)="submitted.emit(bsn)" class="form-horizontal">
|
|
<div class="form-header">
|
|
<div class="form-action">
|
|
<span class="meta" i18n="@@form.verplichteVelden">* verplichte velden</span>
|
|
</div>
|
|
</div>
|
|
|
|
<app-form-field
|
|
i18n-label="@@login.bsnLabel"
|
|
label="BSN"
|
|
fieldId="bsn"
|
|
required
|
|
i18n-description="@@login.bsnDescription"
|
|
description="9 cijfers (demo: vul iets in)"
|
|
>
|
|
<app-text-input
|
|
inputId="bsn"
|
|
hasDescription
|
|
[(ngModel)]="bsn"
|
|
name="bsn"
|
|
placeholder="123456789"
|
|
/>
|
|
</app-form-field>
|
|
|
|
<app-form-field i18n-label="@@login.wachtwoordLabel" label="Wachtwoord" fieldId="pw" required>
|
|
<app-text-input inputId="pw" type="password" [(ngModel)]="password" name="pw" />
|
|
</app-form-field>
|
|
|
|
<app-button type="submit" variant="primary" i18n="@@login.submit"
|
|
>Inloggen met DigiD</app-button
|
|
>
|
|
</form>
|
|
`,
|
|
})
|
|
export class LoginFormComponent {
|
|
bsn = '';
|
|
password = '';
|
|
submitted = output<string>();
|
|
}
|