login system fully functionnal

frontend/package-lock.json

@@ -16,6 +16,7 @@
         "@angular/platform-browser": "^16.0.0",
         "@angular/platform-browser-dynamic": "^16.0.0",
         "@angular/router": "^16.0.0",
+        "jwt-decode": "^3.1.2",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
         "zone.js": "~0.13.0"
@@ -7093,6 +7094,11 @@
         "node >= 0.2.0"
       ]
     },
+    "node_modules/jwt-decode": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz",
+      "integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A=="
+    },
     "node_modules/karma": {
       "version": "6.4.2",
       "resolved": "https://registry.npmjs.org/karma/-/karma-6.4.2.tgz",

frontend/package.json

@@ -18,6 +18,7 @@
     "@angular/platform-browser": "^16.0.0",
     "@angular/platform-browser-dynamic": "^16.0.0",
     "@angular/router": "^16.0.0",
+    "jwt-decode": "^3.1.2",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.13.0"

frontend/src/app/admin/admin.component.html

@@ -7,6 +7,7 @@
         <tr *ngFor="let user of users">
             <td>{{user.username}}</td>
             <td>{{user.type}}</td>
+            <td><button>UPDATE</button></td>
             <td><button (click)="deleteUser(user)">DELETE</button></td>
         </tr>
     </tbody>
@@ -21,6 +22,8 @@
         <tr *ngFor="let question of questions">
             <td>{{question.question}}</td>
             <td>{{question.category}}</td>
+            <td>UPDATE</td>
+            <td>DELETE</td>
         </tr>
     </tbody>
 </table>
\ No newline at end of file

frontend/src/app/admin/admin.component.ts

 import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
-import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { HttpClient } from '@angular/common/http';
 import { Answer, QandA, Question, User } from '../Types/types';
 import { UsersService } from '../services/users.service';
 
-
 @Component({
   selector: 'app-admin',
   templateUrl: './admin.component.html',
@@ -17,13 +15,11 @@ export class AdminComponent implements OnInit {
     public answers: Answer[] = [];
 
     constructor(
-      private router: Router,
       private http: HttpClient,
       private userController: UsersService) { }
 
     ngOnInit(): void {
       
-      
       this.http.get("http://0.0.0.0:30992/API/v1/user")
       .subscribe(users => {
         this.users = users as User[];
@@ -37,5 +33,7 @@ export class AdminComponent implements OnInit {
       });
     }
 
-    deleteUser(user:User) {this.userController.deleteUser(user)}
+    deleteUser(user:User) {
+      this.userController.deleteUser(user);
+    }
 }

frontend/src/app/app.component.css

+nav {
+    position: sticky;
+    top: 0;
+    width: 100%;
+    background-color: #3f51b5;
+    color: #fff;
+    display: flex;
+    padding: 0 16px;
+    align-items: center;
+    height: 56px;
+    font: 500 20px/32px Roboto, "Helvetica Neue", sans-serif;
+  }
\ No newline at end of file

frontend/src/app/app.component.html

 <nav>
-    <button (click)="loginButton()">Login</button>
-    <button (click)="logoutButton()">Logout</button>
-    <button (click)="signupButton()">Sign Up</button>
+    NAVBAR
+    <button (click)="router.navigateByUrl('/');">Home</button>
+    <button *ngIf="auth.isAdmin()" (click)="router.navigateByUrl('/admin')">Dashboard</button>
+    <button *ngIf="!auth.isLoggedIn()" (click)="router.navigateByUrl('/login')">Login</button>
+    <button *ngIf="auth.isLoggedIn()" (click)="auth.logout()">Logout</button>
+    <button *ngIf="!auth.isLoggedIn()" (click)="router.navigateByUrl('/signup')">Sign Up</button>
+    <label >{{auth.getUsername()}}</label>
 </nav>
 
 <router-outlet>

frontend/src/app/app.component.ts

@@ -11,20 +11,6 @@ export class AppComponent {
   title = 'frontend';
 
   constructor(
-    private router: Router,
-    private auth: AuthenticationService) {}
-
-  loginButton() {
-    this.router.navigateByUrl("/login");
-  }
-
-  logoutButton() {
-    this.auth.logout();
-    this.router.navigateByUrl("/");
-  }
-
-  signupButton() {
-    this.router.navigateByUrl("/signup");
-  }
-
+    public router: Router,
+    public auth: AuthenticationService) {}
 }

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

 import { Injectable } from '@angular/core';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Router } from '@angular/router';
+import jwtDecode from 'jwt-decode';
+import { User } from '../Types/types';
 
 @Injectable({
   providedIn: 'root'
@@ -43,4 +45,29 @@ export class AuthenticationService {
     localStorage.removeItem("token");
     this.router.navigateByUrl("/");
   }
+
+  private getDecodedAccessToken(): User {
+    try {
+      return jwtDecode(localStorage.getItem("token")) as User;
+    } catch(Error) {
+      return null;
+    }
+  }
+
+  isAdmin(): Boolean {
+    const user = this.getDecodedAccessToken() as User;
+    
+    if (user === null)
+      return false;
+    return user.type === 'admin';
+  }
+
+  getUsername(): string {
+    const user = this.getDecodedAccessToken() as User;
+
+    if(user === null)
+      return "Guest";
+    return user.username;
+  }
+
 }