@ichgamer999/wmctest 1.0.2 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ichgamer999/wmctest",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "Minimalist Angular authentication template with signals, JWT token handling, and HTTP interceptors",
   "keywords": [
     "angular",

package/src/app-ostbahn/app.component.html

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

package/src/app-ostbahn/app.component.ts

@@ -0,0 +1,14 @@
+import {Component, signal} from '@angular/core';
+import {Router, RouterOutlet} from '@angular/router';
+import {AuthService} from './auth.service';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  imports: [
+    RouterOutlet
+  ],
+  styleUrl: './app.component.css'
+})
+export class AppComponent {
+}

package/src/app-ostbahn/app.config.ts

@@ -0,0 +1,12 @@
+import { ApplicationConfig } from '@angular/core';
+import {provideRouter, withComponentInputBinding} from '@angular/router';
+
+import { routes } from './app.routes';
+import {provideHttpClient, withInterceptors} from '@angular/common/http';
+import {authInterceptor} from './auth.interceptor';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideRouter(routes,withComponentInputBinding()),
+    provideHttpClient(withInterceptors([authInterceptor]))]
+};

package/src/app-ostbahn/app.routes.ts

@@ -0,0 +1,12 @@
+import { Routes } from '@angular/router';
+import {LoginComponent} from './login/login.component';
+import {OverviewComponent} from './overview/overview.component';
+import {ReservationComponent} from './reservation/reservation.component';
+import {AuthGuard} from './auth.guard';
+
+export const routes: Routes = [
+  {path: 'login', component: LoginComponent},
+  {path: 'book/:id', component: ReservationComponent, canActivate: [AuthGuard]},
+  {path: '', component: OverviewComponent},
+  {path: '**', redirectTo:'', pathMatch: "full"}
+];

package/src/app-ostbahn/auth.guard.ts

@@ -0,0 +1,29 @@
+import {
+  ActivatedRouteSnapshot,
+  CanActivate,
+  CanActivateFn,
+  GuardResult,
+  MaybeAsync, Router,
+  RouterStateSnapshot
+} from '@angular/router';
+import {AuthService} from './auth.service';
+import {Injectable} from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+
+export class AuthGuard implements CanActivate{
+  constructor(private router: Router, private auth:AuthService) {
+  }
+  canActivate() {
+    if (this.auth.isLoggedIn()){
+      return true;
+    }
+    else {
+      this.router.navigate(['/login'])
+      return false;
+    }
+  }
+
+}

package/src/app-ostbahn/auth.interceptor.ts

@@ -0,0 +1,14 @@
+import { HttpInterceptorFn } from '@angular/common/http';
+import {inject} from '@angular/core';
+import {AuthService} from './auth.service';
+
+export const authInterceptor: HttpInterceptorFn = (req, next) => {
+  const authService = inject(AuthService);
+  if (!authService.isLoggedIn())
+    return next(req);
+  const cloned = req.clone({
+    headers: req.headers.set('Authorization',
+      `Bearer ${authService.getToken()}`)
+  });
+  return next(cloned);
+};

package/src/app-ostbahn/auth.service.ts

@@ -0,0 +1,41 @@
+import {Injectable, signal} from '@angular/core';
+import {HttpService} from './http.service';
+import {HttpClient} from '@angular/common/http';
+import {tap} from 'rxjs';
+import {Router} from '@angular/router';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AuthService {
+  _user = signal('')
+  private baseUrl = 'http://localhost:3000'
+  private static tokenKey: string = "token";
+  constructor(private httpClient : HttpClient, private router : Router) {
+  }
+  login(username: string, password: string) {
+    return this.httpClient
+      .post<{ token: string }>(`${this.baseUrl}/login`,
+        { username: username, password: password })
+      .pipe(
+        tap(response => {
+          localStorage.setItem(AuthService.tokenKey, response.token);
+          this._user.set(username);
+        })
+      );
+  }
+
+  logout(): void {
+    localStorage.removeItem(AuthService.tokenKey);
+    this._user.set('');
+    this.router.navigate(['/login']);
+  }
+
+  isLoggedIn(){
+    return !!localStorage.getItem(AuthService.tokenKey)
+  }
+
+  getToken() {
+    return localStorage.getItem(AuthService.tokenKey)
+  }
+}

package/src/app-ostbahn/domains/child.ts

@@ -0,0 +1,11 @@
+
+export class Child{
+  name: string;
+  age: number;
+
+
+  constructor(name: string, age: number) {
+    this.name = name;
+    this.age = age;
+  }
+}

package/src/app-ostbahn/domains/connection.ts

@@ -0,0 +1,22 @@
+export class Connection{
+  id: number;
+  fromStationId: number;
+  toStationId: number;
+  fromStationName: string;
+  toStationName:string;
+  date: string;
+  departureTime:string;
+  arrivalTime:string;
+
+
+  constructor(id: number, fromStationId: number, toStationId: number, fromStationName: string, toStationName: string, date: string, departureTime: string, arrivalTime: string) {
+    this.id = id;
+    this.fromStationId = fromStationId;
+    this.toStationId = toStationId;
+    this.fromStationName = fromStationName;
+    this.toStationName = toStationName;
+    this.date = date;
+    this.departureTime = departureTime;
+    this.arrivalTime = arrivalTime;
+  }
+}

package/src/app-ostbahn/domains/customer.ts

@@ -0,0 +1,17 @@
+
+export class Customer{
+  id:number
+  username:string
+  name:string
+  password:string
+  role:string
+
+
+  constructor(id: number, username: string, name: string, password: string, role: string) {
+    this.id = id;
+    this.username = username;
+    this.name = name;
+    this.password = password;
+    this.role = role;
+  }
+}

package/src/app-ostbahn/domains/reservationRequest.ts

@@ -0,0 +1,14 @@
+import {Child} from './child';
+
+export class ReservationRequest{
+  connectionId:number;
+  firstClass:boolean;
+  children:Child[]
+
+
+  constructor(connectionId: number, firstClass: boolean, children: Child[]) {
+    this.connectionId = connectionId;
+    this.firstClass = firstClass;
+    this.children = children;
+  }
+}

package/src/app-ostbahn/domains/reservationResponse.ts

@@ -0,0 +1,16 @@
+import {Child} from './child';
+
+export class ReservationResponse{
+  id:number;
+  connectionId:number;
+  firstClass:boolean;
+  children:Child[];
+
+
+  constructor(id: number, connectionId: number, firstClass: boolean, children: Child[]) {
+    this.id = id;
+    this.connectionId = connectionId;
+    this.firstClass = firstClass;
+    this.children = children;
+  }
+}

package/src/app-ostbahn/domains/station.ts

@@ -0,0 +1,10 @@
+export class Station{
+  id:number;
+  name:string
+
+
+  constructor(id: number, name: string) {
+    this.id = id;
+    this.name = name;
+  }
+}

package/src/app-ostbahn/http.service.ts

@@ -0,0 +1,34 @@
+import { Injectable } from '@angular/core';
+import {HttpClient} from '@angular/common/http';
+import {Connection} from './domains/connection';
+import {ReservationRequest} from './domains/reservationRequest';
+import {ReservationResponse} from './domains/reservationResponse';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class HttpService {
+  baseurl = 'http://localhost:3000/'
+  constructor(private http:HttpClient) {
+  }
+
+  getAllConnections(){
+    return this.http.get<Connection[]>(this.baseurl + "connections")
+  }
+
+  getConnection(connectionId: number) {
+    return this.http.get<Connection>(this.baseurl + "connections/" + connectionId)
+  }
+
+  postReservation(reservation:ReservationRequest){
+    return this.http.post(this.baseurl + "reservations", reservation)
+  }
+
+  getAllReservations(){
+    return this.http.get<ReservationResponse[]>(this.baseurl+"reservations")
+  }
+
+  getReservationById(id:number){
+    return this.http.get<ReservationResponse>(this.baseurl+ "reservations/"+id)
+  }
+}

package/src/app-ostbahn/login/login.component.html

@@ -0,0 +1,14 @@
+<form [formGroup] = "loginForm" (ngSubmit)="login()">
+  @if (errorMessage() !== '') {
+    <p>{{errorMessage()}}</p>
+  }
+
+  <label for="username">Nutzername: </label>
+  <input type="text" id="username" formControlName="username">
+
+  <label for="password">Password: </label>
+  <input type="password" id="password" formControlName="password">
+
+  <button type="submit">Login</button>
+
+</form>

package/src/app-ostbahn/login/login.component.ts

@@ -0,0 +1,32 @@
+import {Component, signal} from '@angular/core';
+import {AuthService} from '../auth.service';
+import {Router} from '@angular/router';
+import {FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
+
+@Component({
+  selector: 'app-login',
+  imports: [
+    ReactiveFormsModule
+  ],
+  templateUrl: './login.component.html',
+  styleUrl: './login.component.css',
+})
+export class LoginComponent {
+  errorMessage = signal('')
+  loginForm: FormGroup;
+  constructor(private auth:AuthService, private router: Router, private fb: FormBuilder) {
+    this.loginForm = new FormGroup({
+      username: new FormControl('demo@demo.com', Validators.required),
+      password: new FormControl('demo', Validators.required)
+    })
+  }
+
+
+  login() {
+    this.auth.login(this.loginForm.value.username, this.loginForm.value.password).subscribe({
+      next: () => {this.router.navigate(['/overview'])},
+      error: () => {this.errorMessage.set("Fehlerhafte Logindaten")}
+      }
+    )
+  }
+}

package/src/app-ostbahn/overview/overview.component.html

@@ -0,0 +1,14 @@
+<h1>Connection overview</h1>
+@if (logined()){
+  <button  (click)="logout()">Logout</button>
+} @else {
+  <button (click)="login()">Login</button>
+}
+<div>
+  @for (connection of connections(); track connection) {
+    <h5>Connection {{$index+1}}</h5>
+    <p>{{connection.fromStationName}} ===> {{connection.toStationName}}</p>
+    <a [routerLink]="['/book/', connection.id]">Buchen</a>
+  }
+</div>
+

package/src/app-ostbahn/overview/overview.component.ts

@@ -0,0 +1,41 @@
+import {Component, OnInit, signal} from '@angular/core';
+import {HttpService} from '../http.service';
+import {Connection} from '../domains/connection';
+import {Router, RouterLink} from '@angular/router';
+import {AuthService} from '../auth.service';
+
+@Component({
+  selector: 'app-overview',
+  imports: [
+    RouterLink
+  ],
+  templateUrl: './overview.component.html',
+  styleUrl: './overview.component.css',
+})
+export class OverviewComponent implements OnInit{
+  logined = signal(false)
+  connections = signal<Connection[]>([])
+  constructor(private http:HttpService, private auth:AuthService, private router: Router) {
+    this.logined.set(auth.isLoggedIn())
+  }
+
+  ngOnInit() {
+        this.http.getAllConnections().subscribe(cs => {
+          this.connections.set(cs)
+        })
+    }
+
+  logout(){
+    this.auth.logout();
+    this.router.navigate(['login'])
+    this.logined.set(false)
+  }
+
+  login() {
+    this.router.navigate(['login'])
+    this.logined.set(true)
+  }
+
+
+
+}

package/src/app-ostbahn/reservation/reservation.component.html

@@ -0,0 +1,33 @@
+@if (detailTab()) {
+  <p>{{neuReservation().id}}</p>
+  <p>From: {{connection().fromStationName}}</p>
+  <p>TO: {{connection().toStationName}}</p>
+  <p>Date: {{connection().date}}</p>
+  <p>Children: {{neuReservation().children?.length}}</p>
+  <button (click)="renew()">Make Another Reservation</button>
+} @else {
+
+<h1>Train reservation</h1>
+<p>Username</p>
+<p>{{user()}}</p>
+<form [formGroup]="reservationGroup" (ngSubmit)="reserve()">
+  <input type="checkbox" id="firstClassBox" formControlName="firstClassBox">
+  <label for="firstClassBox">First Class?</label>
+
+  <button type="button" (click)="addChild()">Add Child</button>
+  <div formArrayName="childrenArray">
+  @for (child of childrenArray.controls; track child){
+    <div [formGroupName]="$index">
+    <h5>Child {{$index+1}}</h5> <button type="button" (click)="removeChild($index)">Remove</button>
+      <label for="childName">Child Name</label>
+      <input id="childName" type="text" formControlName="name">
+
+      <label for="childAge">Child Age</label>
+      <input id="childAge" type="number" formControlName="age">
+    </div>
+  }
+  </div>
+  <button type="submit">Reserve</button>
+
+</form>
+}

package/src/app-ostbahn/reservation/reservation.component.ts

@@ -0,0 +1,94 @@
+import {Component, OnInit, signal} from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
+import {HttpService} from '../http.service';
+import {Connection} from '../domains/connection';
+import {AuthService} from '../auth.service';
+import {FormArray, FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
+import {ReservationRequest} from '../domains/reservationRequest';
+import {ReservationResponse} from '../domains/reservationResponse';
+
+@Component({
+  selector: 'app-reservation',
+  imports: [
+    ReactiveFormsModule
+  ],
+  templateUrl: './reservation.component.html',
+  styleUrl: './reservation.component.css',
+})
+export class ReservationComponent implements OnInit {
+  detailTab = signal(false)
+  connectionId = -1;
+  connection = signal<Connection>({} as Connection)
+  user = signal('')
+  reservationGroup: FormGroup;
+  neuReservation = signal<ReservationResponse>({} as ReservationResponse)
+
+  constructor(private route: ActivatedRoute, private api: HttpService, private auth: AuthService) {
+    this.user.set(this.auth._user())
+    this.reservationGroup = new FormGroup({
+      firstClassBox: new FormControl(false) ?? false,
+      childrenArray: new FormArray([]) ?? []
+    })
+  }
+
+  get childrenArray() {
+    return this.reservationGroup.get('childrenArray') as FormArray
+  }
+
+  ngOnInit(): void {
+    this.route.paramMap.subscribe(params => {
+      this.connectionId = Number(params.get('id'));
+
+      if (this.connectionId) {
+        this.api.getConnection(this.connectionId).subscribe(
+          conn => this.connection.set(conn)
+        );
+      }
+    })
+  }
+
+  addChild() {
+    this.childrenArray.push(new FormGroup({
+      name: new FormControl(''),
+      age: new FormControl(0)
+    }))
+  }
+
+  protected removeChild($index: number) {
+    this.childrenArray.removeAt($index)
+  }
+
+  reserve() {
+    let reservation: ReservationRequest = {
+      connectionId: this.connectionId,
+      firstClass: this.reservationGroup.get('firstClassBox')?.value ?? false,
+      children: this.childrenArray.value ?? []
+    }
+    console.log(reservation)
+    this.api.postReservation(reservation).subscribe(
+      {
+        next: () => {
+          let reservations: ReservationResponse[] = []
+          this.detailTab.set(true)
+          this.api.getAllReservations().subscribe(res => {
+            reservations = res;
+            if (reservations[reservations.length - 1]) {
+              this.api.getReservationById(reservations[reservations.length - 1].id).subscribe(reser => {
+                this.neuReservation.set(reser)
+              })
+            }
+          })
+        }
+      }
+    )
+
+
+  }
+
+  renew() {
+    this.reservationGroup.reset()
+    this.childrenArray.clear()
+    this.detailTab.set(false)
+
+  }
+}

package/src/app-sokrates/app.component.html

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

package/src/app-sokrates/app.component.ts

@@ -0,0 +1,14 @@
+import {Component, signal} from '@angular/core';
+import {Router, RouterOutlet} from '@angular/router';
+import {AuthService} from './auth.service';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  imports: [
+    RouterOutlet
+  ],
+  styleUrl: './app.component.css'
+})
+export class AppComponent {
+}

package/src/app-sokrates/app.config.ts

@@ -0,0 +1,12 @@
+import { ApplicationConfig } from '@angular/core';
+import {provideRouter, withComponentInputBinding} from '@angular/router';
+
+import { routes } from './app.routes';
+import {provideHttpClient, withInterceptors} from '@angular/common/http';
+import {authInterceptor} from './auth.interceptor';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideRouter(routes,withComponentInputBinding()),
+    provideHttpClient(withInterceptors([authInterceptor]))]
+};

package/src/app-sokrates/app.routes.ts

@@ -0,0 +1,12 @@
+import { Routes } from '@angular/router';
+import {LoginComponent} from './login/login.component';
+import {OverviewComponent} from './overview/overview.component';
+import {ReservationComponent} from './reservation/reservation.component';
+import {AuthGuard} from './auth.guard';
+
+export const routes: Routes = [
+  {path: 'login', component: LoginComponent},
+  {path: 'book/:id', component: ReservationComponent, canActivate: [AuthGuard]},
+  {path: '', component: OverviewComponent},
+  {path: '**', redirectTo:'', pathMatch: "full"}
+];

package/src/app-sokrates/auth.guard.ts

@@ -0,0 +1,29 @@
+import {
+  ActivatedRouteSnapshot,
+  CanActivate,
+  CanActivateFn,
+  GuardResult,
+  MaybeAsync, Router,
+  RouterStateSnapshot
+} from '@angular/router';
+import {AuthService} from './auth.service';
+import {Injectable} from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+
+export class AuthGuard implements CanActivate{
+  constructor(private router: Router, private auth:AuthService) {
+  }
+  canActivate() {
+    if (this.auth.isLoggedIn()){
+      return true;
+    }
+    else {
+      this.router.navigate(['/login'])
+      return false;
+    }
+  }
+
+}

package/src/app-sokrates/auth.interceptor.ts

@@ -0,0 +1,14 @@
+import { HttpInterceptorFn } from '@angular/common/http';
+import {inject} from '@angular/core';
+import {AuthService} from './auth.service';
+
+export const authInterceptor: HttpInterceptorFn = (req, next) => {
+  const authService = inject(AuthService);
+  if (!authService.isLoggedIn())
+    return next(req);
+  const cloned = req.clone({
+    headers: req.headers.set('Authorization',
+      `Bearer ${authService.getToken()}`)
+  });
+  return next(cloned);
+};

package/src/app-sokrates/auth.service.ts

@@ -0,0 +1,41 @@
+import {Injectable, signal} from '@angular/core';
+import {HttpService} from './http.service';
+import {HttpClient} from '@angular/common/http';
+import {tap} from 'rxjs';
+import {Router} from '@angular/router';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AuthService {
+  _user = signal('')
+  private baseUrl = 'http://localhost:3000'
+  private static tokenKey: string = "token";
+  constructor(private httpClient : HttpClient, private router : Router) {
+  }
+  login(username: string, password: string) {
+    return this.httpClient
+      .post<{ token: string }>(`${this.baseUrl}/login`,
+        { username: username, password: password })
+      .pipe(
+        tap(response => {
+          localStorage.setItem(AuthService.tokenKey, response.token);
+          this._user.set(username);
+        })
+      );
+  }
+
+  logout(): void {
+    localStorage.removeItem(AuthService.tokenKey);
+    this._user.set('');
+    this.router.navigate(['/login']);
+  }
+
+  isLoggedIn(){
+    return !!localStorage.getItem(AuthService.tokenKey)
+  }
+
+  getToken() {
+    return localStorage.getItem(AuthService.tokenKey)
+  }
+}

package/src/app-sokrates/domains/child.ts

@@ -0,0 +1,11 @@
+
+export class Child{
+  name: string;
+  age: number;
+
+
+  constructor(name: string, age: number) {
+    this.name = name;
+    this.age = age;
+  }
+}

package/src/app-sokrates/domains/connection.ts

@@ -0,0 +1,22 @@
+export class Connection{
+  id: number;
+  fromStationId: number;
+  toStationId: number;
+  fromStationName: string;
+  toStationName:string;
+  date: string;
+  departureTime:string;
+  arrivalTime:string;
+
+
+  constructor(id: number, fromStationId: number, toStationId: number, fromStationName: string, toStationName: string, date: string, departureTime: string, arrivalTime: string) {
+    this.id = id;
+    this.fromStationId = fromStationId;
+    this.toStationId = toStationId;
+    this.fromStationName = fromStationName;
+    this.toStationName = toStationName;
+    this.date = date;
+    this.departureTime = departureTime;
+    this.arrivalTime = arrivalTime;
+  }
+}

package/src/app-sokrates/domains/customer.ts

@@ -0,0 +1,17 @@
+
+export class Customer{
+  id:number
+  username:string
+  name:string
+  password:string
+  role:string
+
+
+  constructor(id: number, username: string, name: string, password: string, role: string) {
+    this.id = id;
+    this.username = username;
+    this.name = name;
+    this.password = password;
+    this.role = role;
+  }
+}

package/src/app-sokrates/domains/reservationRequest.ts

@@ -0,0 +1,14 @@
+import {Child} from './child';
+
+export class ReservationRequest{
+  connectionId:number;
+  firstClass:boolean;
+  children:Child[]
+
+
+  constructor(connectionId: number, firstClass: boolean, children: Child[]) {
+    this.connectionId = connectionId;
+    this.firstClass = firstClass;
+    this.children = children;
+  }
+}

package/src/app-sokrates/domains/reservationResponse.ts

@@ -0,0 +1,16 @@
+import {Child} from './child';
+
+export class ReservationResponse{
+  id:number;
+  connectionId:number;
+  firstClass:boolean;
+  children:Child[];
+
+
+  constructor(id: number, connectionId: number, firstClass: boolean, children: Child[]) {
+    this.id = id;
+    this.connectionId = connectionId;
+    this.firstClass = firstClass;
+    this.children = children;
+  }
+}

package/src/app-sokrates/domains/station.ts

@@ -0,0 +1,10 @@
+export class Station{
+  id:number;
+  name:string
+
+
+  constructor(id: number, name: string) {
+    this.id = id;
+    this.name = name;
+  }
+}

package/src/app-sokrates/http.service.ts

@@ -0,0 +1,34 @@
+import { Injectable } from '@angular/core';
+import {HttpClient} from '@angular/common/http';
+import {Connection} from './domains/connection';
+import {ReservationRequest} from './domains/reservationRequest';
+import {ReservationResponse} from './domains/reservationResponse';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class HttpService {
+  baseurl = 'http://localhost:3000/'
+  constructor(private http:HttpClient) {
+  }
+
+  getAllConnections(){
+    return this.http.get<Connection[]>(this.baseurl + "connections")
+  }
+
+  getConnection(connectionId: number) {
+    return this.http.get<Connection>(this.baseurl + "connections/" + connectionId)
+  }
+
+  postReservation(reservation:ReservationRequest){
+    return this.http.post(this.baseurl + "reservations", reservation)
+  }
+
+  getAllReservations(){
+    return this.http.get<ReservationResponse[]>(this.baseurl+"reservations")
+  }
+
+  getReservationById(id:number){
+    return this.http.get<ReservationResponse>(this.baseurl+ "reservations/"+id)
+  }
+}

package/src/app-sokrates/login/login.component.html

@@ -0,0 +1,14 @@
+<form [formGroup] = "loginForm" (ngSubmit)="login()">
+  @if (errorMessage() !== '') {
+    <p>{{errorMessage()}}</p>
+  }
+
+  <label for="username">Nutzername: </label>
+  <input type="text" id="username" formControlName="username">
+
+  <label for="password">Password: </label>
+  <input type="password" id="password" formControlName="password">
+
+  <button type="submit">Login</button>
+
+</form>

package/src/app-sokrates/login/login.component.ts

@@ -0,0 +1,32 @@
+import {Component, signal} from '@angular/core';
+import {AuthService} from '../auth.service';
+import {Router} from '@angular/router';
+import {FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
+
+@Component({
+  selector: 'app-login',
+  imports: [
+    ReactiveFormsModule
+  ],
+  templateUrl: './login.component.html',
+  styleUrl: './login.component.css',
+})
+export class LoginComponent {
+  errorMessage = signal('')
+  loginForm: FormGroup;
+  constructor(private auth:AuthService, private router: Router, private fb: FormBuilder) {
+    this.loginForm = new FormGroup({
+      username: new FormControl('demo@demo.com', Validators.required),
+      password: new FormControl('demo', Validators.required)
+    })
+  }
+
+
+  login() {
+    this.auth.login(this.loginForm.value.username, this.loginForm.value.password).subscribe({
+      next: () => {this.router.navigate(['/overview'])},
+      error: () => {this.errorMessage.set("Fehlerhafte Logindaten")}
+      }
+    )
+  }
+}

package/src/app-sokrates/overview/overview.component.html

@@ -0,0 +1,14 @@
+<h1>Connection overview</h1>
+@if (logined()){
+  <button  (click)="logout()">Logout</button>
+} @else {
+  <button (click)="login()">Login</button>
+}
+<div>
+  @for (connection of connections(); track connection) {
+    <h5>Connection {{$index+1}}</h5>
+    <p>{{connection.fromStationName}} ===> {{connection.toStationName}}</p>
+    <a [routerLink]="['/book/', connection.id]">Buchen</a>
+  }
+</div>
+

package/src/app-sokrates/overview/overview.component.ts

@@ -0,0 +1,41 @@
+import {Component, OnInit, signal} from '@angular/core';
+import {HttpService} from '../http.service';
+import {Connection} from '../domains/connection';
+import {Router, RouterLink} from '@angular/router';
+import {AuthService} from '../auth.service';
+
+@Component({
+  selector: 'app-overview',
+  imports: [
+    RouterLink
+  ],
+  templateUrl: './overview.component.html',
+  styleUrl: './overview.component.css',
+})
+export class OverviewComponent implements OnInit{
+  logined = signal(false)
+  connections = signal<Connection[]>([])
+  constructor(private http:HttpService, private auth:AuthService, private router: Router) {
+    this.logined.set(auth.isLoggedIn())
+  }
+
+  ngOnInit() {
+        this.http.getAllConnections().subscribe(cs => {
+          this.connections.set(cs)
+        })
+    }
+
+  logout(){
+    this.auth.logout();
+    this.router.navigate(['login'])
+    this.logined.set(false)
+  }
+
+  login() {
+    this.router.navigate(['login'])
+    this.logined.set(true)
+  }
+
+
+
+}

package/src/app-sokrates/reservation/reservation.component.html

@@ -0,0 +1,33 @@
+@if (detailTab()) {
+  <p>{{neuReservation().id}}</p>
+  <p>From: {{connection().fromStationName}}</p>
+  <p>TO: {{connection().toStationName}}</p>
+  <p>Date: {{connection().date}}</p>
+  <p>Children: {{neuReservation().children?.length}}</p>
+  <button (click)="renew()">Make Another Reservation</button>
+} @else {
+
+<h1>Train reservation</h1>
+<p>Username</p>
+<p>{{user()}}</p>
+<form [formGroup]="reservationGroup" (ngSubmit)="reserve()">
+  <input type="checkbox" id="firstClassBox" formControlName="firstClassBox">
+  <label for="firstClassBox">First Class?</label>
+
+  <button type="button" (click)="addChild()">Add Child</button>
+  <div formArrayName="childrenArray">
+  @for (child of childrenArray.controls; track child){
+    <div [formGroupName]="$index">
+    <h5>Child {{$index+1}}</h5> <button type="button" (click)="removeChild($index)">Remove</button>
+      <label for="childName">Child Name</label>
+      <input id="childName" type="text" formControlName="name">
+
+      <label for="childAge">Child Age</label>
+      <input id="childAge" type="number" formControlName="age">
+    </div>
+  }
+  </div>
+  <button type="submit">Reserve</button>
+
+</form>
+}

package/src/app-sokrates/reservation/reservation.component.ts

@@ -0,0 +1,94 @@
+import {Component, OnInit, signal} from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
+import {HttpService} from '../http.service';
+import {Connection} from '../domains/connection';
+import {AuthService} from '../auth.service';
+import {FormArray, FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
+import {ReservationRequest} from '../domains/reservationRequest';
+import {ReservationResponse} from '../domains/reservationResponse';
+
+@Component({
+  selector: 'app-reservation',
+  imports: [
+    ReactiveFormsModule
+  ],
+  templateUrl: './reservation.component.html',
+  styleUrl: './reservation.component.css',
+})
+export class ReservationComponent implements OnInit {
+  detailTab = signal(false)
+  connectionId = -1;
+  connection = signal<Connection>({} as Connection)
+  user = signal('')
+  reservationGroup: FormGroup;
+  neuReservation = signal<ReservationResponse>({} as ReservationResponse)
+
+  constructor(private route: ActivatedRoute, private api: HttpService, private auth: AuthService) {
+    this.user.set(this.auth._user())
+    this.reservationGroup = new FormGroup({
+      firstClassBox: new FormControl(false) ?? false,
+      childrenArray: new FormArray([]) ?? []
+    })
+  }
+
+  get childrenArray() {
+    return this.reservationGroup.get('childrenArray') as FormArray
+  }
+
+  ngOnInit(): void {
+    this.route.paramMap.subscribe(params => {
+      this.connectionId = Number(params.get('id'));
+
+      if (this.connectionId) {
+        this.api.getConnection(this.connectionId).subscribe(
+          conn => this.connection.set(conn)
+        );
+      }
+    })
+  }
+
+  addChild() {
+    this.childrenArray.push(new FormGroup({
+      name: new FormControl(''),
+      age: new FormControl(0)
+    }))
+  }
+
+  protected removeChild($index: number) {
+    this.childrenArray.removeAt($index)
+  }
+
+  reserve() {
+    let reservation: ReservationRequest = {
+      connectionId: this.connectionId,
+      firstClass: this.reservationGroup.get('firstClassBox')?.value ?? false,
+      children: this.childrenArray.value ?? []
+    }
+    console.log(reservation)
+    this.api.postReservation(reservation).subscribe(
+      {
+        next: () => {
+          let reservations: ReservationResponse[] = []
+          this.detailTab.set(true)
+          this.api.getAllReservations().subscribe(res => {
+            reservations = res;
+            if (reservations[reservations.length - 1]) {
+              this.api.getReservationById(reservations[reservations.length - 1].id).subscribe(reser => {
+                this.neuReservation.set(reser)
+              })
+            }
+          })
+        }
+      }
+    )
+
+
+  }
+
+  renew() {
+    this.reservationGroup.reset()
+    this.childrenArray.clear()
+    this.detailTab.set(false)
+
+  }
+}