Add disconnection and minor improvements on login page.

frontend/src/app/app.component.scss

@@ -4,5 +4,6 @@
 
     app-header {
         width: 100%;
+        margin-bottom: 1em;
     }
 }

frontend/src/app/app.routes.ts

@@ -1,6 +1,16 @@
 import { Routes } from '@angular/router';
 
 export const routes: Routes = [
-    { path: 'login', loadComponent: () => import('./pages/login/login.component').then(module => module.LoginComponent) },
+    { 
-    { path: '**', loadComponent: () => import('./pages/home/home.component').then(module => module.HomeComponent) }
+        path: 'login', 
+        loadComponent: () => import('./pages/login/login.component').then(module => module.LoginComponent)
+    },
+    { 
+        path: 'disconnect', 
+        loadComponent: () => import('./pages/disconnection/disconnection.component').then(module => module.DisconnectionComponent)
+    },
+    { 
+        path: '**', 
+        loadComponent: () => import('./pages/home/home.component').then(module => module.HomeComponent)
+    }
 ];

frontend/src/app/components/header/header.component.html

@@ -2,8 +2,10 @@
     <button type="button">
         <mat-icon>menu</mat-icon>
     </button>
+    <a [routerLink]="['/home']">
         <img src="assets/images/codiki.png" alt="logo"/>
         <span class="title">Codiki</span>
+    </a>
 </div>
 <div>
     <input name="search-query" placeholder="Search something..." />
@@ -12,5 +14,10 @@
     </button>
 </div>
 <div>
+    <ng-container *ngIf="isAuthenticated; else anonymousRightMenu">
+        <a [routerLink]="['/disconnect']">Disconnect</a>
+    </ng-container>
+    <ng-template #anonymousRightMenu>
         <a [routerLink]="['/login']">Login</a>
+    </ng-template>
 </div>

frontend/src/app/components/header/header.component.scss

@@ -25,6 +25,15 @@ $headerHeight: 3.5em;
             gap: 1em;
             padding: 0 1em;
 
+            a {
+                display: flex;
+                flex-direction: row;
+                justify-content: center;
+                align-items: center;
+                color: white;
+                text-decoration: none;
+                gap: .5em;
+
                 img {
                     $imageSize: 2em;
                     width: $imageSize;
@@ -35,6 +44,7 @@ $headerHeight: 3.5em;
                     font-size: 1.5em;
                 }
             }
+        }
 
         &:nth-child(2) {
             flex: 1;
@@ -76,6 +86,7 @@ $headerHeight: 3.5em;
                 align-items: center;
                 min-width: 5em;
                 color: white;
+                margin: 0 .5em;
             }
         }
     }

frontend/src/app/components/header/header.component.ts

@@ -1,13 +1,21 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
+import { AuthenticationService } from '../../core/service/authentication.service';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-header',
   standalone: true,
-  imports: [MatButtonModule, MatIconModule, RouterModule],
+  imports: [CommonModule, MatButtonModule, MatIconModule, RouterModule],
   templateUrl: './header.component.html',
   styleUrl: './header.component.scss',
 })
-export class HeaderComponent {}
+export class HeaderComponent {
+  private authenticationService = inject(AuthenticationService);
+
+  get isAuthenticated(): boolean {
+    return this.authenticationService.isAuthenticated();
+  }
+}

frontend/src/app/core/service/authentication.service.ts

@@ -55,7 +55,8 @@ export class AuthenticationService {
 
         const tokenParts = token?.split('.');
         if (tokenParts?.length === 3 && tokenParts[1].length) {
-            const userDetails: UserDetails = JSON.parse(tokenParts[1]);
+            const decodedTokenPart = atob(tokenParts[1]);
+            const userDetails: UserDetails = JSON.parse(decodedTokenPart);
             result = userDetails;
         }
 

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

@@ -0,0 +1,2 @@
+<h1>Disconnection...</h1>
+<mat-spinner></mat-spinner>

frontend/src/app/pages/disconnection/disconnection.component.scss

@@ -0,0 +1,6 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}

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

@@ -0,0 +1,21 @@
+import { Component, OnInit, inject } from '@angular/core';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; 
+import { AuthenticationService } from '../../core/service/authentication.service';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-disconnection',
+  standalone: true,
+  imports: [MatProgressSpinnerModule],
+  templateUrl: './disconnection.component.html',
+  styleUrl: './disconnection.component.scss'
+})
+export class DisconnectionComponent implements OnInit {
+  private authenticationService = inject(AuthenticationService);
+  private router = inject(Router);
+
+  ngOnInit(): void {
+    this.authenticationService.unauthenticate();
+    this.router.navigate(['/home']);
+  }
+}

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

@@ -1 +1 @@
-<p>home works!</p>
+<h1>Welcome to Codiki application!</h1>

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

@@ -0,0 +1,6 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}

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

@@ -4,7 +4,7 @@
         <label for="email">
             Email address
         </label>
-        <input type="email" formControlName="email" required />
+        <input type="email" formControlName="email" autocomplete="email" required />
     </div>
     <div>
         <label for="password">
@@ -12,5 +12,7 @@
         </label>
         <input type="password" formControlName="password" required />
     </div>
+    <div class="actions">
         <button type="submit">Send</button>
+    </div>
 </form>

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

@@ -0,0 +1,37 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    form {
+        min-width: 40em;
+        max-width: 90%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        gap: .5em;
+
+        div {
+            display: flex;
+            gap: .5em;
+
+            &.actions {
+                justify-content: end;
+
+                button {
+                    width: 10em;
+                    height: 2em;
+                }
+            }
+
+            label {
+                flex: 1 30%;
+            }
+
+            input {
+                flex: 1 70%;
+            }
+        }
+    }
+}

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

@@ -1,25 +1,25 @@
-import { Injectable, inject } from "@angular/core";
+import { Injectable, inject } from '@angular/core';
-import { BehaviorSubject, Observable } from "rxjs";
+import { BehaviorSubject, Observable } from 'rxjs';
-import { copy } from "../../core/utils/ObjectUtils";
+import { copy } from '../../core/utils/ObjectUtils';
-import { FormError } from "../../core/model/FormError";
+import { FormError } from '../../core/model/FormError';
-import { UserRestService } from "../../core/rest-services/user.rest-service";
+import { UserRestService } from '../../core/rest-services/user.rest-service';
-import { LoginRequest } from "../../core/rest-services/model/login.model";
+import { LoginRequest } from '../../core/rest-services/model/login.model';
-import { AuthenticationService } from "../../core/service/authentication.service";
+import { AuthenticationService } from '../../core/service/authentication.service';
-import { MatSnackBar } from "@angular/material/snack-bar";
+import { MatSnackBar } from '@angular/material/snack-bar';
-import { Router } from "@angular/router";
+import { Router } from '@angular/router';
 
 export interface LoginState {
   request: LoginRequest;
-    errors: FormError[]
+  errors: FormError[];
 }
 
 const DEFAULT_STATE: LoginState = {
   request: {
     email: undefined,
-        password: undefined
+    password: undefined,
   },
-    errors: []
+  errors: [],
-}
+};
 
 @Injectable()
 export class LoginService {
@@ -62,15 +62,20 @@ export class LoginService {
 
     // Check state is valid
 
-        this.userRestService.login(state.request)
+    this.userRestService
-                .then(response => {
+      .login(state.request)
+      .then((response) => {
         this.authenticationService.authenticate(response.accessToken);
-                    this.snackBar.open('Authentication succeeded!', 'Close', { duration: 5000 });
+        this.snackBar.open('Authentication succeeded!', 'Close', {
+          duration: 5000,
+        });
         this.router.navigate(['/home']);
       })
-                .catch(error => {
+      .catch((error) => {
-                    console.error(error)
+        console.error(error);
-                    this.snackBar.open('Authentication failed.', 'Close', { duration: 5000 });
+        this.snackBar.open('Authentication failed.', 'Close', {
+          duration: 5000,
+        });
       });
   }
 }