Add frontend.

frontend/src/app/pages/home/home.component.html

@@ -0,0 +1 @@
+<p>home works!</p>

frontend/src/app/pages/home/home.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomeComponent } from './home.component';
+
+describe('HomeComponent', () => {
+  let component: HomeComponent;
+  let fixture: ComponentFixture<HomeComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HomeComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(HomeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-home',
+  standalone: true,
+  imports: [],
+  templateUrl: './home.component.html',
+  styleUrl: './home.component.scss'
+})
+export class HomeComponent {
+
+}

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

@@ -0,0 +1,16 @@
+<form [formGroup]="loginForm" (submit)="performLogin()" ngNativeValidate>
+    <h1>Login</h1>
+    <div>
+        <label for="email">
+            Email address
+        </label>
+        <input type="email" formControlName="email" required />
+    </div>
+    <div>
+        <label for="password">
+            Password
+        </label>
+        <input type="password" formControlName="password" required />
+    </div>
+    <button type="submit">Send</button>
+</form>

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginComponent } from './login.component';
+
+describe('LoginComponent', () => {
+  let component: LoginComponent;
+  let fixture: ComponentFixture<LoginComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [LoginComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(LoginComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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();
+    }
+  }
+}

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

@@ -0,0 +1,76 @@
+import { Injectable, inject } from "@angular/core";
+import { BehaviorSubject, Observable } from "rxjs";
+import { copy } from "../../core/utils/ObjectUtils";
+import { FormError } from "../../core/model/FormError";
+import { UserRestService } from "../../core/rest-services/user.rest-service";
+import { LoginRequest } from "../../core/rest-services/model/login.model";
+import { AuthenticationService } from "../../core/service/authentication.service";
+import { MatSnackBar } from "@angular/material/snack-bar";
+import { Router } from "@angular/router";
+
+export interface LoginState {
+    request: LoginRequest;
+    errors: FormError[]
+}
+
+const DEFAULT_STATE: LoginState = {
+    request: {
+        email: undefined,
+        password: undefined
+    },
+    errors: []
+}
+
+@Injectable()
+export class LoginService {
+    private stateSubject = new BehaviorSubject<LoginState>(copy(DEFAULT_STATE));
+    private userRestService = inject(UserRestService);
+    private authenticationService = inject(AuthenticationService);
+    private snackBar = inject(MatSnackBar);
+    private router = inject(Router);
+    
+    get state$(): Observable<LoginState> {
+        return this.stateSubject.asObservable();
+    }
+
+    private get state(): LoginState {
+        return this.stateSubject.value;
+    }
+
+    private save(newState: LoginState): void {
+        this.stateSubject.next(newState);
+    }
+
+    editEmail(newEmail: string): void {
+        const state = this.state;
+
+        state.request.email = newEmail;
+
+        this.save(state);
+    }
+
+    editPassword(newPassword: string): void {
+        const state = this.state;
+
+        state.request.password = newPassword;
+
+        this.save(state);
+    }
+
+    performLogin(): void {
+        const state = this.state;
+
+        // Check state is valid
+
+        this.userRestService.login(state.request)
+                .then(response => {
+                    this.authenticationService.authenticate(response.accessToken);
+                    this.snackBar.open('Authentication succeeded!', 'Close', { duration: 5000 });
+                    this.router.navigate(['/home']);
+                })
+                .catch(error => {
+                    console.error(error)
+                    this.snackBar.open('Authentication failed.', 'Close', { duration: 5000 });
+                });
+    }
+}