chore(deps): update devdependencies (non-major)

Reviewed-on: #56
Reviewed-by: Jan Gleytenhoover <jan@kjan.email>

src/app/app.routes.ts

@@ -1,10 +1,10 @@
-import { Routes } from '@angular/router';
-import { LoginViewComponent } from './components/login-view/login-view.component';
-import { MitarbeiterverwaltungViewComponent } from './components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component';
-import { EmployeeDetailComponent } from './components/employee-detail/employee-detail.component';
-import { QualifikatonBearbeitenViewComponent } from './components/qualifikaton-bearbeiten-view/qualifikaton-bearbeiten-view.component';
-import { KeycloakAuthGuard } from 'keycloak-angular';
-import { AuthGuard } from './service/auth.service';
+import { Routes } from "@angular/router";
+import { LoginViewComponent } from "./components/login-view/login-view.component";
+import { MitarbeiterverwaltungViewComponent } from "./components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component";
+import { EmployeeDetailComponent } from "./components/employee-detail/employee-detail.component";
+import { QualifikatonBearbeitenViewComponent } from "./components/qualifikaton-bearbeiten-view/qualifikaton-bearbeiten-view.component";
+import { KeycloakAuthGuard } from "keycloak-angular";
+import { AuthGuard } from "./service/auth.service";
 
 export const routes: Routes = [
   {
@@ -26,6 +26,6 @@ export const routes: Routes = [
   },
   {
     path: "**",
-    redirectTo: '',
-  }
+    redirectTo: "",
+  },
 ];

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

@@ -1,15 +1,8 @@
-
-<div class="container" style="width: 100%;">
+<div class="container" style="width: 100%">
   <h1>Hi-Tec GmbH</h1>
-  <img src="img.png" alt="Logout Icon" class="logo-image">
+  <img src="img.png" alt="Logout Icon" class="logo-image" />
 
   <form>
-    <label for="username">Username</label>
-    <input type="text" id="username" name="username"><br>
-
-    <label for="password">Password</label>
-    <input type="password" id="password" name="password"><br><br>
-
-    <button type="submit">Anmelden</button>
+    <button (click)="login()" type="submit">Mit KeyCLoak anmelden</button>
   </form>
 </div>

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

@@ -1,12 +1,22 @@
-import { Component } from '@angular/core';
-import { KeycloakService } from 'keycloak-angular';
+import { Component } from "@angular/core";
+import { Router } from "@angular/router";
+import { KeycloakService } from "keycloak-angular";
 
 @Component({
-  selector: 'app-login-view',
+  selector: "app-login-view",
   standalone: true,
   imports: [],
-  templateUrl: './login-view.component.html',
-  styleUrl: './login-view.component.css'
+  templateUrl: "./login-view.component.html",
+  styleUrl: "./login-view.component.css",
 })
 export class LoginViewComponent {
+  constructor(
+    private keyCloak: KeycloakService,
+    private router: Router,
+  ) {}
+
+  login(): void {
+    this.keyCloak.login();
+    this.router.navigate(["/mitarbeiter"]);
+  }
 }

src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.html

@@ -1,8 +1,26 @@
 <div class="container">
   <div class="header">
-    <button class="logout-button">
-      <img src="user.svg" alt="User Icon">
+    <div class="dropdown position-absolute top-0 end-0 m-3">
+      <button
+        class="btn align-items-center d-flex"
+        type="button"
+        id="userDropdown"
+        data-bs-toggle="dropdown"
+        aria-expanded="false"
+      >
+        <img
+          src="user.svg"
+          alt="User Icon"
+          class="rounded-circle"
+          style="width: 30px; height: 30px;"
+        >
       </button>
+      <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userDropdown">
+        <li>
+          <a class="dropdown-item" href="/logout">Log out</a>
+        </li>
+      </ul>
+    </div>
     <h1>Employees</h1>
   </div>
   <div class="header-actions">

src/app/components/qualifikaton-bearbeiten-view/qualifikaton-bearbeiten-view.component.css

@@ -70,7 +70,7 @@ input[type="text"] {
 }
 
 .add-employee-button {
-  background-color: #007bff;
+  background-color: #06a63b;
   color: #fff;
   padding: 10px 15px;
   border: none;
@@ -96,7 +96,8 @@ input[type="text"] {
   padding: 5px 8px;
   border: none;
   cursor: pointer;
-  margin-left: 10px;
+  margin-left: 4px;
+  margin-right: 4px;
   border-radius: 3px;
 }
 

src/app/components/qualifikaton-bearbeiten-view/qualifikaton-bearbeiten-view.component.html

@@ -11,16 +11,22 @@
 
     <ul class="employee-list">
       <li>
-        <span class="employee-name">Employee 1</span>
         <button class="delete-skill-button">
           <img src="Delete-button.svg" alt="Delete">
         </button>
+        <span class="employee-name">Max Mustermann</span>
+      </li>
+      <li>
+        <button class="delete-skill-button">
+          <img src="Delete-button.svg" alt="Delete">
+        </button>
+        <span class="employee-name">Mehdi Boudjoudi</span>
       </li>
     </ul>
 
     <div class="add-employee-section">
       <label for="employeeSearch">Search for employee</label>
-      <input type="text" id="employeeSearch" placeholder="Lastname of employee">
+      <input type="text" id="employeeSearch" placeholder="Last name of employee">
       <button class="add-employee-button">Add employee</button>
     </div>
   </div>