Adding form to the login screen

webapp/package.json

@@ -16,14 +16,15 @@
 		"@angular/forms": "^20.0.0",
 		"@angular/platform-browser": "^20.0.0",
 		"@angular/router": "^20.0.0",
+		"@ngrx/signals": "^19.2.1",
 		"rxjs": "~7.8.0",
 		"tslib": "^2.3.0",
 		"uuid": "^11.1.0"
 	},
 	"devDependencies": {
-		"@angular/build": "^20.0.1",
+		"@angular/build": "^20.0.5",
-		"@angular/cli": "^20.0.1",
+		"@angular/cli": "^20.0.5",
-		"@angular/compiler-cli": "^20.0.0",
+		"@angular/compiler-cli": "^20.0.6",
 		"@types/jasmine": "~5.1.0",
 		"jasmine-core": "~5.8.0",
 		"karma": "~6.4.0",

webapp/src/app/routes/login/login.html

@@ -1,6 +1,8 @@
 <app-card>
     <h3 class="card-header">Login</h3>
     <div>
-        I'm the body!
+        <form [formGroup]="form">
+
+        </form>
     </div>
 </app-card>

webapp/src/app/routes/login/login.ts

@@ -1,10 +1,16 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
+import { FormBuilder, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
 import { Card } from 'components/card/card';
 
 @Component({
 	selector: 'app-login',
 	templateUrl: './login.html',
 	styleUrl: './login.scss',
-	imports: [Card],
+	imports: [Card, FormsModule, ReactiveFormsModule],
 })
-export class Login {}
+export class Login {
+	readonly form = inject(FormBuilder).group({
+		username: ['', Validators.required],
+		password: ['', Validators.required],
+	});
+}