033d6f0317
Atoms/molecules/organisms/templates/pages composing the NL Design System (Utrecht) CSS themed Rijkshuisstijl via @rijkshuisstijl-community tokens. Login -> dashboard -> registration detail, mock JSON over HttpClient, Storybook organized by atomic layer. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
36 lines
1.5 KiB
TypeScript
36 lines
1.5 KiB
TypeScript
import { Component, output } from '@angular/core';
|
|
import { FormsModule } from '@angular/forms';
|
|
import { FormFieldComponent } from '../../molecules/form-field/form-field.component';
|
|
import { TextInputComponent } from '../../atoms/text-input/text-input.component';
|
|
import { ButtonComponent } from '../../atoms/button/button.component';
|
|
import { HeadingComponent } from '../../atoms/heading/heading.component';
|
|
|
|
/** Organism: DigiD-style mock login. No real auth — just composes atoms/molecules. */
|
|
@Component({
|
|
selector: 'app-login-form',
|
|
imports: [FormsModule, FormFieldComponent, TextInputComponent, ButtonComponent, HeadingComponent],
|
|
template: `
|
|
<form (ngSubmit)="submit.emit()" style="max-width:24rem">
|
|
<app-heading [level]="1">Inloggen</app-heading>
|
|
<p class="rhc-paragraph">Log in op uw persoonlijke BIG-register omgeving.</p>
|
|
|
|
<app-form-field label="BSN" fieldId="bsn" description="9 cijfers (demo: vul iets in)">
|
|
<app-text-input inputId="bsn" [(ngModel)]="bsn" name="bsn" placeholder="123456789" />
|
|
</app-form-field>
|
|
|
|
<app-form-field label="Wachtwoord" fieldId="pw">
|
|
<app-text-input inputId="pw" type="password" [(ngModel)]="password" name="pw" />
|
|
</app-form-field>
|
|
|
|
<div style="margin-top:1rem">
|
|
<app-button type="submit" variant="primary">Inloggen met DigiD</app-button>
|
|
</div>
|
|
</form>
|
|
`,
|
|
})
|
|
export class LoginFormComponent {
|
|
bsn = '';
|
|
password = '';
|
|
submit = output<void>();
|
|
}
|