Skip to content

Commit c014654

Browse files
gitcommitshowgitcommitshow
authored
Merge pull request #15 from rodrigokamada/feature/screen2
Thank you. Love the use Transloco from the start.
2 parents a26c09c + 17664ed commit c014654

22 files changed

+421
-31
lines changed

‎frontend/package.json‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,14 @@
1313
"test:headless": "ng test --watch=false --browsers=ChromeHeadless"
1414
},
1515
"dependencies": {
16-
"@angular/animations": "~13.3.6",
17-
"@angular/common": "~13.3.6",
18-
"@angular/compiler": "~13.3.6",
19-
"@angular/core": "~13.3.6",
20-
"@angular/forms": "~13.3.6",
21-
"@angular/platform-browser": "~13.3.6",
22-
"@angular/platform-browser-dynamic": "~13.3.6",
23-
"@angular/router": "~13.3.6",
16+
"@angular/animations": "~13.3.8",
17+
"@angular/common": "~13.3.8",
18+
"@angular/compiler": "~13.3.8",
19+
"@angular/core": "~13.3.8",
20+
"@angular/forms": "~13.3.8",
21+
"@angular/platform-browser": "~13.3.8",
22+
"@angular/platform-browser-dynamic": "~13.3.8",
23+
"@angular/router": "~13.3.8",
2424
"@fortawesome/fontawesome-free": "^6.1.1",
2525
"@ngneat/transloco": "^4.0.0",
2626
"bootstrap": "^5.1.3",
@@ -31,7 +31,7 @@
3131
"devDependencies": {
3232
"@angular-devkit/build-angular": "~13.3.5",
3333
"@angular/cli": "~13.3.5",
34-
"@angular/compiler-cli": "~13.3.6",
34+
"@angular/compiler-cli": "~13.3.8",
3535
"@types/jasmine": "~4.0.3",
3636
"@types/node": "^16.11.32",
3737
"jasmine-core": "~4.1.0",

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { NgModule } from '@angular/core';
2+
import { Routes, RouterModule } from '@angular/router';
3+
4+
import { AnatomyComponent } from './anatomy.component';
5+
6+
const routes: Routes = [
7+
{
8+
path: '',
9+
component: AnatomyComponent,
10+
},
11+
];
12+
13+
@NgModule({
14+
imports: [
15+
RouterModule.forChild(routes),
16+
],
17+
exports: [
18+
RouterModule,
19+
],
20+
})
21+
export class AnatomyRoutingModule {
22+
}

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

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
2+
<h1 class="mb-5">{{ "anatomy.anatomyJwt" | transloco }}</h1>
3+
4+
<hr>
5+
6+
<div class="card card-jwt my-5">
7+
<div class="card-header">
8+
<div class="row">
9+
<div class="col">
10+
<img src="assets/images/icon-check-square.png" class="icon-check-square me-2" />
11+
{{ "anatomy.tokenNew" | transloco | uppercase }}
12+
</div>
13+
<div class="col-auto">
14+
<button type="button" class="btn btn-sm btn-outline-primary btn-jwt">
15+
{{ "anatomy.edit" | transloco }}
16+
<img src="assets/images/icon-pencil.svg" class="ms-1" />
17+
</button>
18+
</div>
19+
</div>
20+
</div>
21+
<div class="card-body">
22+
<span class="jwt-header">{{ jwtHeader }}</span>.<br>
23+
<span class="jwt-payload">{{ jwtPayload }}</span>.<br>
24+
<span class="jwt-signature">{{ jwtSignature }}</span>
25+
</div>
26+
</div>
27+
28+
<p class="font-grey">{{ "anatomy.anatomyJwt1" | transloco }}</p>
29+
30+
<p class="font-grey">{{ "anatomy.anatomyJwt2" | transloco }}</p>
31+
32+
<p class="font-grey">{{ "anatomy.anatomyJwt3" | transloco }}</p>
33+
34+
<h2 class="my-5">{{ "anatomy.tokenSchema" | transloco }}</h2>
35+
36+
<p class="font-grey">{{ "anatomy.tokenSchema1" | transloco }}</p>
37+
38+
<div class="card card-jwt">
39+
<div class="card-header">
40+
&#123;<span class="jwt-header">header</span>&#125;.&#123;<span class="jwt-payload">payload</span>&#125;.&#123;<span class="jwt-signature">signature</span>&#125;
41+
</div>
42+
</div>
43+
44+
<h6 class="my-5">1. {{ "anatomy.header" | transloco }} (<span class="jwt-header">eyJhbG...pXVCJ9</span>):</h6>
45+
46+
<p class="font-grey">{{ "anatomy.header1" | transloco }}</p>
47+
48+
<p class="font-grey">{{ "anatomy.header2" | transloco }}</p>
49+
50+
<p class="font-grey" innerHTML="{{ 'anatomy.header3' | transloco }}"></p>
51+
52+
<button type="button" class="btn btn-primary btn-decode my-2">
53+
{{ "anatomy.decodeHeader" | transloco }}
54+
<img src="assets/images/icon-arrow-right.svg" class="ms-1" />
55+
</button>
56+
57+
<p class="font-grey fst-italic"><small>{{ "anatomy.decodedHeader" | transloco }}</small></p>
58+
59+
<h6 class="my-5">2. {{ "anatomy.payload" | transloco }} (<span class="jwt-payload">eyJkYX...b20ifQ</span>):</h6>
60+
61+
<p class="font-grey">{{ "anatomy.payload1" | transloco }}</p>
62+
63+
<p class="font-grey" innerHTML="{{ 'anatomy.payload2' | transloco }}"></p>
64+
65+
<button type="button" class="btn btn-primary btn-decode my-2">
66+
{{ "anatomy.decodePayload" | transloco }}
67+
<img src="assets/images/icon-arrow-right.svg" class="ms-1" />
68+
</button>
69+
70+
<p class="font-grey fst-italic"><small>{{ "anatomy.decodedPayload" | transloco }}</small></p>
71+
72+
<h6 class="my-5">3. {{ "anatomy.signature" | transloco }} (<span class="jwt-payload">rvOx0i...7Jo0_A</span>):</h6>
73+
74+
<p class="font-grey">{{ "anatomy.signature1" | transloco }}</p>
75+
76+
<p class="font-grey">{{ "anatomy.signature2" | transloco }}</p>
77+
78+
<p class="font-grey">{{ "anatomy.signature3" | transloco }}</p>
79+
80+
<p class="font-grey"><strong>{{ "anatomy.signature4" | transloco }}</strong></p>
81+
82+
<div class="card my-5">
83+
<div class="card-body">
84+
<div class="row">
85+
<div class="col-auto"><i class="fa-solid" [ngClass]="{'fa-caret-right': !showToken, 'fa-caret-down': showToken}" (click)="showToken = !showToken"></i></div>
86+
<div class="col">{{ showToken ? token : token.substring(0, 20) + '...' }}</div>
87+
</div>
88+
</div>
89+
</div>
90+
91+
<button type="button" class="btn btn-primary btn-decode my-2">
92+
{{ "anatomy.verifyJwt" | transloco }}
93+
<img src="assets/images/icon-arrow-right.svg" class="ms-1" />
94+
</button>

‎frontend/src/app/anatomy/anatomy.component.scss‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
.icon-check-square {
2+
width: 18px;
3+
}
4+
5+
.card-jwt {
6+
color: #ffffff;
7+
}
8+
9+
.jwt-header {
10+
color: #f7b885;
11+
}
12+
.jwt-payload {
13+
color: #a3cdfe;
14+
}
15+
.jwt-signature {
16+
color: #84d996;
17+
}
18+
19+
.btn-jwt {
20+
border: solid 1px rgba(255, 255, 255, 0.4);
21+
background-color: rgba(255, 255, 255, 0.2);
22+
color: #ffffff;
23+
font-weight: bold;
24+
}
25+
26+
.btn-decode {
27+
border: solid 1px #3865ff;
28+
background-color: #7292ff;
29+
}

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-anatomy',
5+
templateUrl: './anatomy.component.html',
6+
styleUrls: ['./anatomy.component.scss'],
7+
})
8+
export class AnatomyComponent {
9+
10+
showToken: boolean;
11+
jwtHeader: string;
12+
jwtPayload: string;
13+
jwtSignature: string;
14+
token: string;
15+
16+
constructor() {
17+
this.showToken = false;
18+
this.jwtHeader = 'eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9';
19+
this.jwtPayload = 'eyJkYXRhIjoiSSBzZWNyZXRseSBsaWtlIE1vbWluYSBNdXN0ZWhhbiIsImlhdCI6MTY0NjA1NjEzOCwiZXhwIjoxNjQ2MTQyNTM4LCJhdWQiOiJtaWNyb3NvZnQuY29tIiwiaXNzIjoiTWljcm9zb2Z0IEluYyIsInN1YiI6InNvbWVAdXNlci5jb20ifQ';
20+
this.jwtSignature = 'rvOx0iNIzDLkVvJaiM_nU7fmrE8Zh9RbR_lh9iCryOYjYmxuHviYVOOdScNJ-exmjDXssxZ84TWV34KJNUA36EHs3Ew5Pcn5N6_UechJ2MTvUaXyR6JrqdWjw8RuXBmAfkEpizST9jPKybTRWzJlqmr-QErpluTIJyonvHmd8FXCcaNzYJDuQ5T56zI7beuEiSL1tyOwx9AQhr4Q1qF28Ek8RRUg1JMlaGs0d5c4YMaNz8xJE6-YkTIr6LSH3gwXKtbY3qgJxzFwXRqmvxnkBTya9Ji1tu1OYso4NffHZHatU4F7xjex3VzQfwM9uVrsWvsspL5ZyKzJcCa67Jo0_A';
21+
this.token = 'b3NvZnQuY29tIiwiaXNzIjoiTWljcm9zb2Z0IEluYyIsInN1YiI6ISsexmjDXssxZ84TWV34KJNUA36EHs3Ew5Pcn5N6_UechJ2MTvUaXyR6JrqdWjw8RuXBmAfkEpizST9jPKybTRWzJlqmr-QErpluTIJyonvHmd8FXACADS';
22+
}
23+
24+
}

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { NgModule } from '@angular/core';
2+
import { CommonModule } from '@angular/common';
3+
import { TranslocoModule } from '@ngneat/transloco';
4+
5+
// Routes
6+
import { AnatomyRoutingModule } from './anatomy-routing.module';
7+
8+
// Components
9+
import { AnatomyComponent } from './anatomy.component';
10+
11+
@NgModule({
12+
declarations: [
13+
// Components
14+
AnatomyComponent,
15+
],
16+
imports: [
17+
CommonModule,
18+
TranslocoModule,
19+
// Routes
20+
AnatomyRoutingModule,
21+
],
22+
providers: [
23+
],
24+
exports: [
25+
],
26+
})
27+
export class AnatomyModule {
28+
}

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@ const routes: Routes = [
77
redirectTo: 'home',
88
pathMatch: 'full',
99
},
10+
{
11+
path: 'anatomy',
12+
loadChildren: () => import('./anatomy/anatomy.module').then(mod => mod.AnatomyModule),
13+
},
1014
{
1115
path: 'home',
1216
loadChildren: () => import('./home/home.module').then(mod => mod.HomeModule),

‎frontend/src/app/app.component.html‎

Lines changed: 48 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,54 @@
1010
</nav>
1111

1212
<div class="container-fluid">
13-
<router-outlet></router-outlet>
13+
<div class="row">
14+
<div class="col">
15+
</div>
16+
<div class="col-8">
17+
<router-outlet></router-outlet>
18+
</div>
19+
<div class="col">
20+
<ul class="nav flex-column nav-right">
21+
<li class="nav-item m-2">
22+
<img src="assets/images/icon-checked.svg" class="position-fixed" *ngIf="step > 1" />
23+
<img src="assets/images/icon-check.svg" class="position-fixed" *ngIf="step === 1" />
24+
<span class="ms-4">{{ "app.mainPage" | transloco }}</span>
25+
</li>
26+
<li class="nav-item m-2">
27+
<img src="assets/images/icon-checked.svg" class="position-fixed" *ngIf="step > 2" />
28+
<img src="assets/images/icon-check.svg" class="position-fixed" *ngIf="step === 2" />
29+
<span class="ms-4">{{ "app.anatomyJwt" | transloco }}</span>
30+
</li>
31+
<li class="nav-item m-2">
32+
<span class="ms-4">{{ "app.verifyingToken" | transloco }}</span>
33+
</li>
34+
<li class="nav-item m-2">
35+
<span class="ms-4">{{ "app.generatingToken" | transloco }}</span>
36+
</li>
37+
<li class="nav-item m-2">
38+
<span class="ms-4">{{ "app.tokenAuthenticate" | transloco }}</span>
39+
</li>
40+
<li class="nav-item m-2">
41+
<span class="ms-5">{{ "app.tokenAuthenticate1" | transloco }}</span>
42+
</li>
43+
<li class="nav-item m-2">
44+
<span class="ms-5">{{ "app.tokenAuthenticate2" | transloco }}</span>
45+
</li>
46+
<li class="nav-item m-2">
47+
<span class="ms-5">{{ "app.tokenAuthenticate3" | transloco }}</span>
48+
</li>
49+
<li class="nav-item m-2">
50+
<span class="ms-4">{{ "app.bestMethod" | transloco }}</span>
51+
</li>
52+
<li class="nav-item m-2">
53+
<span class="ms-4">{{ "app.logout" | transloco }}</span>
54+
</li>
55+
<li class="nav-item m-2">
56+
<span class="ms-4">{{ "app.finishTutorial" | transloco }}</span>
57+
</li>
58+
</ul>
59+
</div>
60+
</div>
1461
</div>
1562

1663
<nav class="nav justify-content-center py-3 mt-5 nav-footer">

‎frontend/src/app/app.component.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,8 @@ nav a {
1414
border-width: 1px 0 0 0;
1515
border-color: rgba(255, 255, 255, 0.16);
1616
}
17+
18+
.nav-right {
19+
font-size: 12px;
20+
color: #c1c9d2;
21+
}

‎frontend/src/app/app.component.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,23 @@
11
import { Component } from '@angular/core';
22

3+
import { StepService } from './shared/services/step.service';
4+
35
@Component({
46
selector: 'app-root',
57
templateUrl: './app.component.html',
68
styleUrls: ['./app.component.scss'],
79
})
810
export class AppComponent {
11+
12+
public step: number;
13+
14+
constructor(private stepService: StepService) {
15+
this.step = 1;
16+
this.stepService.step.subscribe((step: number) => {
17+
if (step) {
18+
this.step = step;
19+
}
20+
});
21+
}
22+
923
}

0 commit comments

Comments
 (0)