Merge branch 'master' of https://github.com/gitcommitshow/auth-jwt

Author: gitcommitshow

frontend/package.json

@@ -22,6 +22,7 @@
     "@angular/platform-browser-dynamic": "~13.3.8",
     "@angular/router": "~13.3.8",
     "@fortawesome/fontawesome-free": "^6.1.1",
+    "@ng-bootstrap/ng-bootstrap": "^12.1.2",
     "@ngneat/transloco": "^4.0.0",
     "bootstrap": "^5.1.3",
     "rxjs": "~7.5.5",

frontend/src/app/anatomy/anatomy.component.html

@@ -93,7 +93,7 @@ <h6 class="my-5">3. {{ "anatomy.signature" | transloco }} (<span class="jwt-sign
 
 <p class="font-grey">{{ "anatomy.signature1" | transloco }}</p>
 
-<p class="font-grey">{{ "anatomy.signature2" | transloco }}</p>
+<p class="font-grey">{{ "anatomy.signature2" | transloco }} <span triggers="hover focus" ngbPopover="{{ 'anatomy.signature2Tooltip' | transloco }}" class="c-pointer">(?)</span></p>
 
 <p class="font-grey">{{ "anatomy.signature3" | transloco }}</p>
 
@@ -102,13 +102,13 @@ <h6 class="my-5">3. {{ "anatomy.signature" | transloco }} (<span class="jwt-sign
 <div class="card my-5">
   <div class="card-body">
     <div class="row">
-      <div class="col-auto"><i class="fa-solid" [ngClass]="{'fa-caret-right': !showToken, 'fa-caret-down': showToken}" (click)="showToken = !showToken"></i></div>
+      <div class="col-auto"><i class="fa-solid c-pointer" [ngClass]="{'fa-caret-right': !showToken, 'fa-caret-down': showToken}" (click)="showToken = !showToken"></i></div>
       <div class="col">{{ showToken ? token : token.substring(0, 20) + '...' }}</div>
     </div>
   </div>
 </div>
 
-<button type="button" class="btn btn-primary btn-decode my-2">
+<button type="button" (click)="nextStep()" class="btn btn-primary btn-decode my-2">
   {{ "anatomy.verifyJwt" | transloco }}
   <img src="assets/images/icon-arrow-right.svg" class="ms-1" />
 </button>

frontend/src/app/anatomy/anatomy.component.ts

@@ -1,6 +1,8 @@
 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
 
 import { JwtService } from '../shared/services/jwt.service';
+import { StepService } from '../shared/services/step.service';
 
 @Component({
   selector: 'app-anatomy',
@@ -22,7 +24,10 @@ export class AnatomyComponent implements OnInit {
   jwtSignatureShort: string;
   token: string;
 
-  constructor(private jwtService: JwtService) {
+  constructor(private router: Router,
+              private jwtService: JwtService,
+              private stepService: StepService) {
+    this.stepService.setStep(2);
     this.showToken = false;
     this.jwtHeader = '';
     this.jwtHeaderShort = '';
@@ -45,7 +50,6 @@ export class AnatomyComponent implements OnInit {
     this.jwtService.get()
     .subscribe({
       next: (success: any) => {
-        console.debug('success:', success);
         if (success && success.token) {
           const tokenSplitted = success.token.split('.');
           this.jwtHeader = tokenSplitted[0];
@@ -63,4 +67,9 @@ export class AnatomyComponent implements OnInit {
     });
   }
 
+  public nextStep(): void {
+    this.stepService.setStep(3);
+    this.router.navigate(['/verify']);
+  }
+
 }

frontend/src/app/anatomy/anatomy.module.ts

@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { TranslocoModule } from '@ngneat/transloco';
 
 // Routes
@@ -15,6 +16,7 @@ import { AnatomyComponent } from './anatomy.component';
   ],
   imports: [
     CommonModule,
+    NgbModule,
     TranslocoModule,
     // Routes
     AnatomyRoutingModule,

frontend/src/app/app-routing.module.ts

@@ -15,6 +15,10 @@ const routes: Routes = [
     path: 'home',
     loadChildren: () => import('./home/home.module').then(mod => mod.HomeModule),
   },
+  {
+    path: 'verify',
+    loadChildren: () => import('./verify/verify.module').then(mod => mod.VerifyModule),
+  },
   {
     path: '**',
     redirectTo: 'home',

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

@@ -47,4 +47,4 @@ <h2 class="my-5">{{ "home.knowledge" | transloco }}</h2>
       {{ "home.knowledge5" | transloco }}
     </p>
 
-<button type="button" (click)="nextStep()" class="btn btn-primary btn-start mt-5">{{ "home.startInteractive" | transloco }}</button>
+<button type="button" (click)="nextStep()" class="btn btn-warning mt-5">{{ "home.startInteractive" | transloco }}</button>

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

@@ -7,12 +7,3 @@
 .time-mins {
   color: #a3acb9;
 }
-
-.btn-start {
-  font-size: 18px;
-  font-weight: bold;
-  color: #1a2035;
-  padding: 20px;
-  border: solid 1px #eab500;
-  background-color: #ffd852;
-}

frontend/src/app/shared/services/jwt.service.ts

@@ -19,4 +19,8 @@ export class JwtService {
     return this.http.get<any>(this.url);
   }
 
+  public verifyToken(token: string): Observable<any> {
+    return this.http.get<any>(`${this.url}/verify/${token}`);
+  }
+
 }

frontend/src/app/verify/verify-routing.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { VerifyComponent } from './verify.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: VerifyComponent,
+  },
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(routes),
+  ],
+  exports: [
+    RouterModule,
+  ],
+})
+export class VerifyRoutingModule {
+}

frontend/src/app/verify/verify.component.html

@@ -0,0 +1,35 @@
+
+<h1 class="mb-5">{{ "verify.verifyingToken" | transloco }}</h1>
+
+<hr>
+
+<div class="card card-jwt my-5">
+  <div class="card-header">
+    <div class="row">
+      <div class="col">
+        <img src="assets/images/icon-check-square.png" class="icon-check-square me-2" />
+        {{ "verify.verifiedToken" | transloco | uppercase }}
+      </div>
+      <div class="col-auto">
+      </div>
+    </div>
+  </div>
+  <div class="card-body">
+    <span class="jwt-decoded">{{ jwtDecoded }}</span>
+  </div>
+</div>
+
+<p class="font-grey">{{ "verify.verified1" | transloco }}</p>
+
+<p class="font-grey" innerHTML="{{ 'verify.verified2' | transloco }}"></p>
+
+<p class="font-grey">{{ "verify.verified3" | transloco }}</p>
+
+<div class="row">
+  <div class="col text-end">
+    <button type="button" (click)="nextStep()" class="btn btn-outline-light mt-5">{{ "verify.back" | transloco }}</button>
+  </div>
+  <div class="col-auto text-end">
+    <button type="button" (click)="nextStep()" class="btn btn-warning mt-5" innerHTML="{{ 'verify.createMore' | transloco }}"></button>
+  </div>
+</div>