Implement createSession and store it in localStorage

src/app/app-routing.module.ts

@@ -1,8 +1,10 @@
 import {NgModule} from '@angular/core';
 import {RouterModule, Routes} from '@angular/router';
-import {HelloComponent} from './hello/hello.component';
+import {HelloComponent} from './components/hello/hello.component';
+import {LoginComponent} from './components/login/login.component';
 
 const routes: Routes = [
+  {path: "login", component: LoginComponent},
   {path: "", component: HelloComponent}
 ];
 

src/app/app.component.html

@@ -1,4 +0,0 @@
-<app-navbar />
-<div class="flex justify-center">
-  <router-outlet />
-</div>

src/app/app.module.ts

@@ -2,22 +2,24 @@ import {NgModule} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
 
 import {AppRoutingModule} from './app-routing.module';
-import {AppComponent} from './app.component';
+import {AppComponent} from './components/app.component';
-import {HelloComponent} from './hello/hello.component';
+import {HelloComponent} from './components/hello/hello.component';
-import {NavbarComponent} from './navbar/navbar.component';
 import {BASE_PATH} from '../gen';
 import {environment} from '../environments/environment';
 import {provideHttpClient, withInterceptorsFromDi} from '@angular/common/http';
+import { LoginComponent } from './components/login/login.component';
+import {FormsModule} from '@angular/forms';
 
 @NgModule({
   declarations: [
     AppComponent,
-    HelloComponent
+    HelloComponent,
+    LoginComponent
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
-    NavbarComponent
+    FormsModule
   ],
   providers: [
     {provide: BASE_PATH, useValue: environment.apiBasePath},

src/app/components/app.component.html

@@ -0,0 +1 @@
+<router-outlet />

src/app/components/hello/hello.component.ts

@@ -1,5 +1,5 @@
 import {Component, OnInit} from '@angular/core';
-import {HelloResponse, HelloService} from '../../gen';
+import {HelloResponse, HelloService} from '../../../gen';
 
 @Component({
   selector: 'app-hello',

src/app/components/login/login.component.html

@@ -0,0 +1,23 @@
+<div class="flex h-screen items-center justify-center bg-gray-100">
+  <div class="w-full max-w-sm p-6 bg-white rounded-lg shadow-lg">
+    <div class="flex justify-center mb-4">
+      <h2 class="text-xl font-semibold">Log in to Swiss Post</h2>
+    </div>
+    <form (ngSubmit)="onSubmit()">
+      <div class="mb-4">
+        <label class="block text-gray-700 text-sm font-bold mb-2">E-mail address</label>
+        <input type="email" placeholder="lisa.muster@example.com"
+               [(ngModel)]="createSessionRequest.username" name="email"
+               class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400">
+      </div>
+      <div class="mb-4">
+        <label class="block text-gray-700 text-sm font-bold mb-2">Password</label>
+        <input type="password" placeholder="Password"
+               [(ngModel)]="createSessionRequest.password" name="password"
+               class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400">
+      </div>
+      <button type="submit"
+              class="w-full bg-red-600 text-white py-2 rounded-lg hover:bg-red-700 transition">Next</button>
+    </form>
+  </div>
+</div>

src/app/components/login/login.component.spec.ts

@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { NavbarComponent } from './navbar.component';
+import { LoginComponent } from './login.component';
 
-describe('NavbarComponent', () => {
+describe('LoginComponent', () => {
-  let component: NavbarComponent;
+  let component: LoginComponent;
-  let fixture: ComponentFixture<NavbarComponent>;
+  let fixture: ComponentFixture<LoginComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [NavbarComponent]
+      declarations: [LoginComponent]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(NavbarComponent);
+    fixture = TestBed.createComponent(LoginComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/components/login/login.component.ts

@@ -0,0 +1,31 @@
+import {Component} from '@angular/core';
+import {CreateSessionRequest, CreateSessionResponse, SessionService} from '../../../gen';
+import {AuthService} from '../../services/auth.service';
+
+@Component({
+  selector: 'app-login',
+  standalone: false,
+
+  templateUrl: './login.component.html',
+  styleUrl: './login.component.css'
+})
+export class LoginComponent {
+  createSessionRequest: CreateSessionRequest = {
+    username: "",
+    password: ""
+  }
+
+  constructor(private sessionService: SessionService, private authService: AuthService) {
+  }
+
+  onSubmit(): void {
+    this.sessionService.createToken(this.createSessionRequest).subscribe({
+      next: (response: CreateSessionResponse): void => {
+        this.authService.setToken(response.token);
+      },
+      error: (err: Error): void => {
+        console.log(err);
+      }
+    });
+  }
+}

src/app/navbar/navbar.component.html

@@ -1,54 +0,0 @@
-<nav class="bg-gray-800 text-white">
-  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-    <div class="flex justify-between h-16 items-center">
-      <!-- Logo -->
-      <div class="flex-shrink-0">
-        <a href="/" class="text-xl font-bold">MyApp</a>
-      </div>
-
-      <!-- Navigation Links -->
-      <div class="hidden md:flex space-x-4">
-        <a routerLink="/" routerLinkActive="font-bold" class="hover:text-gray-300">Home</a>
-        <a routerLink="/about" routerLinkActive="font-bold" class="hover:text-gray-300">About</a>
-        <a routerLink="/services" routerLinkActive="font-bold" class="hover:text-gray-300">Services</a>
-        <a routerLink="/contact" routerLinkActive="font-bold" class="hover:text-gray-300">Contact</a>
-      </div>
-
-      <!-- Mobile Menu Button -->
-      <div class="-mr-2 flex md:hidden">
-        <button
-          (click)="toggleMobileMenu()"
-          type="button"
-          class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none"
-          aria-expanded="false"
-        >
-          <span class="sr-only">Open main menu</span>
-          <svg
-            class="h-6 w-6"
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              [attr.d]="mobileMenuOpen ? 'M6 18L18 6M6 6l12 12' : 'M4 6h16M4 12h16m-7 6h7'"
-            />
-          </svg>
-        </button>
-      </div>
-    </div>
-  </div>
-
-  <!-- Mobile Menu -->
-  <div *ngIf="mobileMenuOpen" class="md:hidden">
-    <div class="px-2 pt-2 pb-3 space-y-1">
-      <a routerLink="/" routerLinkActive="font-bold" class="block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-700">Home</a>
-      <a routerLink="/about" routerLinkActive="font-bold" class="block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-700">About</a>
-      <a routerLink="/services" routerLinkActive="font-bold" class="block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-700">Services</a>
-      <a routerLink="/contact" routerLinkActive="font-bold" class="block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-700">Contact</a>
-    </div>
-  </div>
-</nav>

src/app/navbar/navbar.component.ts

@@ -1,21 +0,0 @@
-import { Component } from '@angular/core';
-import {NgIf} from '@angular/common';
-import {RouterLink, RouterLinkActive} from '@angular/router';
-
-@Component({
-  selector: 'app-navbar',
-  templateUrl: './navbar.component.html',
-  imports: [
-    NgIf,
-    RouterLink,
-    RouterLinkActive
-  ],
-  styleUrls: ['./navbar.component.css']
-})
-export class NavbarComponent {
-  mobileMenuOpen = false;
-
-  toggleMobileMenu() {
-    this.mobileMenuOpen = !this.mobileMenuOpen;
-  }
-}

src/app/services/auth.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AuthService } from './auth.service';
+
+describe('AuthService', () => {
+  let service: AuthService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(AuthService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/auth.service.ts

@@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthService {
+  private tokenKey = 'authToken';
+
+  setToken(token: string): void {
+    localStorage.setItem(this.tokenKey, token);
+  }
+
+  getToken(): string | null {
+    return localStorage.getItem(this.tokenKey);
+  }
+
+  clearToken(): void {
+    localStorage.removeItem(this.tokenKey);
+  }
+}