Add frontend.

frontend/src/app/pages/login/login.component.ts

@@ -0,0 +1,63 @@
+import { Component, OnDestroy, OnInit, inject } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { Subscription, debounceTime, map } from 'rxjs';
+import { LoginService } from './login.service';
+
+@Component({
+  selector: 'app-login',
+  standalone: true,
+  templateUrl: './login.component.html',
+  styleUrl: './login.component.scss',
+  imports: [ ReactiveFormsModule ],
+  providers: [LoginService, MatSnackBarModule]
+})
+export class LoginComponent implements OnInit, OnDestroy {
+  private loginService = inject(LoginService);
+  private formBuilder = inject(FormBuilder);
+  private subscriptions: Subscription[] = [];
+  emailValue: string | undefined;
+  loginForm: FormGroup = this.formBuilder.group({
+    email: new FormControl<string | undefined>('', [Validators.required, Validators.email]),
+    password: new FormControl<string | undefined>('', [Validators.required])
+  });
+
+  ngOnInit(): void {
+    const emailSubscription = this.loginForm.controls['email'].valueChanges
+      .pipe(
+        debounceTime(300),
+        map(value => value?.length ? value as string : '')
+      )
+      .subscribe(email => {
+        this.loginService.editEmail(email);
+      });
+    this.subscriptions.push(emailSubscription);
+
+    const passwordSubscription = this.loginForm.controls['password'].valueChanges
+      .pipe(
+        debounceTime(300),
+        map(value => value?.length ? value as string : '')
+      )
+      .subscribe(password => {
+        this.loginService.editPassword(password);
+      });
+    this.subscriptions.push(passwordSubscription)
+
+    const stateSubscription = this.loginService.state$
+        .subscribe(state => {
+          this.loginForm.controls['email'].setValue(state.request.email, { emitEvent: false });
+          this.loginForm.controls['password'].setValue(state.request.password, { emitEvent: false });
+        });
+    this.subscriptions.push(stateSubscription);
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptions.forEach(subscription => subscription.unsubscribe());
+  }
+
+  performLogin(): void {
+    if (this.loginForm.valid) {
+      this.loginService.performLogin();
+    }
+  }
+}