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>
-    <img src="assets/images/codiki.png" alt="logo"/>
+    <a [routerLink]="['/home']">
-    <span class="title">Codiki</span>
+        <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>
-    <a [routerLink]="['/login']">Login</a>
+    <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,14 +25,24 @@ $headerHeight: 3.5em;
             gap: 1em;
             padding: 0 1em;
 
-            img {
+            a {
-                $imageSize: 2em;
+                display: flex;
-                width: $imageSize;
+                flex-direction: row;
-                height: $imageSize;
+                justify-content: center;
-            }
+                align-items: center;
+                color: white;
+                text-decoration: none;
+                gap: .5em;
 
-            .title {
+                img {
-                font-size: 1.5em;
+                    $imageSize: 2em;
+                    width: $imageSize;
+                    height: $imageSize;
+                }
+    
+                .title {
+                    font-size: 1.5em;
+                }
             }
         }
 
@@ -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>
-    <button type="submit">Send</button>
+    <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,76 +1,81 @@
-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;
+  request: LoginRequest;
-    errors: FormError[]
+  errors: FormError[];
 }
 
 const DEFAULT_STATE: LoginState = {
-    request: {
+  request: {
-        email: undefined,
+    email: undefined,
-        password: undefined
+    password: undefined,
-    },
+  },
-    errors: []
+  errors: [],
-}
+};
 
 @Injectable()
 export class LoginService {
-    private stateSubject = new BehaviorSubject<LoginState>(copy(DEFAULT_STATE));
+  private stateSubject = new BehaviorSubject<LoginState>(copy(DEFAULT_STATE));
-    private userRestService = inject(UserRestService);
+  private userRestService = inject(UserRestService);
-    private authenticationService = inject(AuthenticationService);
+  private authenticationService = inject(AuthenticationService);
-    private snackBar = inject(MatSnackBar);
+  private snackBar = inject(MatSnackBar);
-    private router = inject(Router);
+  private router = inject(Router);
-    
-    get state$(): Observable<LoginState> {
-        return this.stateSubject.asObservable();
-    }
 
-    private get state(): LoginState {
+  get state$(): Observable<LoginState> {
-        return this.stateSubject.value;
+    return this.stateSubject.asObservable();
-    }
+  }
 
-    private save(newState: LoginState): void {
+  private get state(): LoginState {
-        this.stateSubject.next(newState);
+    return this.stateSubject.value;
-    }
+  }
 
-    editEmail(newEmail: string): void {
+  private save(newState: LoginState): void {
-        const state = this.state;
+    this.stateSubject.next(newState);
+  }
 
-        state.request.email = newEmail;
+  editEmail(newEmail: string): void {
+    const state = this.state;
 
-        this.save(state);
+    state.request.email = newEmail;
-    }
 
-    editPassword(newPassword: string): void {
+    this.save(state);
-        const state = this.state;
+  }
 
-        state.request.password = newPassword;
+  editPassword(newPassword: string): void {
+    const state = this.state;
 
-        this.save(state);
+    state.request.password = newPassword;
-    }
 
-    performLogin(): void {
+    this.save(state);
-        const state = this.state;
+  }
 
-        // Check state is valid
+  performLogin(): void {
+    const state = this.state;
 
-        this.userRestService.login(state.request)
+    // Check state is valid
-                .then(response => {
+
-                    this.authenticationService.authenticate(response.accessToken);
+    this.userRestService
-                    this.snackBar.open('Authentication succeeded!', 'Close', { duration: 5000 });
+      .login(state.request)
-                    this.router.navigate(['/home']);
+      .then((response) => {
-                })
+        this.authenticationService.authenticate(response.accessToken);
-                .catch(error => {
+        this.snackBar.open('Authentication succeeded!', 'Close', {
-                    console.error(error)
+          duration: 5000,
-                    this.snackBar.open('Authentication failed.', 'Close', { duration: 5000 });
+        });
-                });
+        this.router.navigate(['/home']);
-    }
+      })
-}
+      .catch((error) => {
+        console.error(error);
+        this.snackBar.open('Authentication failed.', 'Close', {
+          duration: 5000,
+        });
+      });
+  }
+}