Skip to content

Commit 5e1be1a

Browse files
gitcommitshowgitcommitshow
authored
Merge pull request #24 from khajatakreemulla/feat-backend-integration
Backend Integration
2 parents b68c995 + 38ae8e9 commit 5e1be1a

29 files changed

+368
-53
lines changed

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

+4
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,10 @@ const routes: Routes = [
6767
path: 'reference',
6868
loadChildren: () => import('./reference/reference.module').then(mod => mod.ReferenceModule),
6969
},
70+
{
71+
path: 'authorize',
72+
loadChildren: () => import('./login/login.module').then(mod => mod.LoginModule),
73+
},
7074
{
7175
path: '**',
7276
redirectTo: 'home',

‎frontend/src/app/generate-token/generate-token.component.html

+24-23
Original file line numberDiff line numberDiff line change
@@ -7,31 +7,32 @@ <h1 class="mb-5 heading">{{ "generate-token.create" | transloco }}</h1>
77
<a target="_blank" href="https://tools.ietf.org/html/rfc7518#section-3">Recommend algorithms</a>
88
</p>
99

10-
<p class="rectangle">
11-
HS256
12-
<span></span>
13-
</p>
10+
<form #postForm="ngForm" (ngSubmit)="onCreateToken(postForm.value)">
11+
<select ngModel name="algo" class="rectangle">
12+
<option selected>HS256</option>
13+
<option>RS256</option>
14+
<option>ES256</option>
15+
</select>
1416

15-
<p class="font-grey algo">{{"generate-token.data" | transloco}}</p>
17+
<p class="font-grey algo">{{"generate-token.data" | transloco}}</p>
1618

17-
<p class="rectangle-1 data1">
18-
{{ "generate-token.data1" | transloco }}
19-
</p>
19+
<textarea [(ngModel)]="payloadValue" name="payload" class="rectangle-1 data1"></textarea>
2020

21-
<p class="font-grey flex-column note">
22-
<span>
23-
{{ "generate-token.note" | transloco }}
24-
</span>
25-
<span>
26-
{{ "generate-token.note1" | transloco }}
27-
</span>
28-
<span>
29-
{{ "generate-token.note2" | transloco }}
30-
</span>
31-
</p>
21+
<p class="font-grey flex-column note">
22+
<span>
23+
{{ "generate-token.note" | transloco }}
24+
</span>
25+
<span>
26+
{{ "generate-token.note1" | transloco }}
27+
</span>
28+
<span>
29+
{{ "generate-token.note2" | transloco }}
30+
</span>
31+
</p>
3232

33-
<div class="row">
34-
<div class="col-auto text-end">
35-
<button type="button" (click)="nextStep()" class="btn btn-warning mt-5" innerHTML="{{ 'generate-token.generateToken' | transloco }}"></button>
33+
<div class="row">
34+
<div class="col-auto text-end">
35+
<button type="submit" (click)="nextStep()" class="btn btn-warning mt-5" innerHTML="{{ 'generate-token.generateToken' | transloco }}"></button>
36+
</div>
3637
</div>
37-
</div>
38+
</form>

‎frontend/src/app/generate-token/generate-token.component.scss

+5-2
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,8 @@
3333
color: #7292ff;
3434
display: flex;
3535
align-items: center;
36-
36+
-webkit-appearance : none
37+
3738
span {
3839
width: 0;
3940
height: 0;
@@ -47,10 +48,12 @@
4748
.rectangle-1{
4849
width: 668px;
4950
height: 110px;
50-
padding: 17px 397px 72px 24px;
51+
padding: 17px 17px;
52+
font-weight: bold;
5153
border-radius: 6px;
5254
border: solid 1px #3a3f51;
5355
background-color: #272f48;
56+
color: #fff
5457
}
5558
.data1 {
5659
font-family: Helvetica;

‎frontend/src/app/generate-token/generate-token.component.ts

+19-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import { Component, OnInit } from '@angular/core';
1+
import { Component, Input, OnInit } from '@angular/core';
22
import { Router } from '@angular/router';
3+
import { JwtService } from '../shared/services/jwt.service';
34
import { StepService } from '../shared/services/step.service';
45

56
@Component({
@@ -9,15 +10,32 @@ import { StepService } from '../shared/services/step.service';
910
})
1011
export class GenerateTokenComponent implements OnInit {
1112

13+
payloadValue = '{ "data" : "We raised series A" }'
14+
15+
@Input() token = ""
16+
1217
constructor(private router: Router,
18+
private jwtService: JwtService,
1319
private stepService: StepService) {
1420
this.stepService.setStep(5)
1521
}
1622

1723
ngOnInit(): void {
1824
}
1925

26+
onCreateToken(postData: {algo: string, payload: string}){
27+
this.jwtService.post(postData).subscribe({
28+
next: (success: any)=>{
29+
this.token = success.token
30+
localStorage.setItem('token', this.token)
31+
}, error: (error: any) => {
32+
console.error('error:', error);
33+
},
34+
})
35+
}
36+
2037
nextStep(){
38+
this.onCreateToken
2139
this.stepService.setStep(5)
2240
this.router.navigate(['generate-token1'])
2341
}

‎frontend/src/app/generate-token/generate-token.module.ts

+2
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { CommonModule } from '@angular/common';
44
import { GenerateTokenRoutingModule } from './generate-token-routing.module';
55
import { TranslocoModule } from '@ngneat/transloco';
66
import { GenerateTokenComponent } from './generate-token.component';
7+
import { FormsModule } from '@angular/forms';
78

89

910
@NgModule({
@@ -13,6 +14,7 @@ import { GenerateTokenComponent } from './generate-token.component';
1314
imports: [
1415
CommonModule,
1516
TranslocoModule,
17+
FormsModule,
1618
GenerateTokenRoutingModule
1719
]
1820
})

‎frontend/src/app/generate-token1/generate-token1.component.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ <h1 class="mb-5">{{ "generate-token1.create" | transloco }}</h1>
1414
</div>
1515
</div>
1616
<div class="card-body">
17-
<span class="jwt-decoded">{{ "From backend" }}</span>
17+
<span class="jwt-decoded">{{ generatedToken }}</span>
1818
</div>
1919
</div>
2020

‎frontend/src/app/generate-token1/generate-token1.component.ts

+5
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Component, OnInit } from '@angular/core';
22
import { Router } from '@angular/router';
3+
import { DemoService } from '../shared/services/demo.service';
34
import { StepService } from '../shared/services/step.service';
45

56
@Component({
@@ -9,13 +10,17 @@ import { StepService } from '../shared/services/step.service';
910
})
1011
export class GenerateToken1Component implements OnInit {
1112

13+
generatedToken: string | null = ""
1214
constructor(private router: Router,
15+
private demoService: DemoService,
1316
private stepService: StepService,
1417
) {
1518
this.stepService.setStep(5)
1619
}
1720

1821
ngOnInit(): void {
22+
var myToken = localStorage.getItem('token')
23+
this.generatedToken = myToken
1924
}
2025

2126

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

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { NgModule } from '@angular/core';
2+
import { RouterModule, Routes } from '@angular/router';
3+
import { LoginComponent } from './login.component';
4+
5+
const routes: Routes = [
6+
{
7+
path: '',
8+
component: LoginComponent
9+
}
10+
];
11+
12+
@NgModule({
13+
imports: [RouterModule.forChild(routes)],
14+
exports: [RouterModule]
15+
})
16+
export class LoginRoutingModule { }

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

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<h1>SignUp</h1>
2+
3+
<form #loginForm="ngForm" (ngSubmit)="login(loginForm.value)">
4+
<div class="form_group">
5+
<input ngModel="user" name="username" class="login_input" type="text">
6+
<input ngModel="pass" name="password" class="login_input" type="password">
7+
</div>
8+
<button class="login_button" type="submit">Login</button>
9+
</form>

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

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
.login_input{
2+
background-color: #161f27;
3+
color: #fff;
4+
border: none;
5+
padding: 8px;
6+
border-radius: 4px;
7+
margin-bottom: 10px ;
8+
width: 250px;
9+
}
10+
.form_group{
11+
display: flex;
12+
flex-direction: column;
13+
}
14+
.login_button{
15+
background-color: #161f27;
16+
padding: 10px 20px;
17+
border: none;
18+
color: #fff;
19+
border-radius: 4px;
20+
}

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

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { LoginComponent } from './login.component';
4+
5+
describe('LoginComponent', () => {
6+
let component: LoginComponent;
7+
let fixture: ComponentFixture<LoginComponent>;
8+
9+
beforeEach(async () => {
10+
await TestBed.configureTestingModule({
11+
declarations: [ LoginComponent ]
12+
})
13+
.compileComponents();
14+
});
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(LoginComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should create', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

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

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { Component, OnInit } from '@angular/core';
2+
import { Router } from '@angular/router';
3+
import { DemoService } from '../shared/services/demo.service';
4+
5+
@Component({
6+
selector: 'app-login',
7+
templateUrl: './login.component.html',
8+
styleUrls: ['./login.component.scss']
9+
})
10+
export class LoginComponent implements OnInit {
11+
12+
success : any
13+
14+
constructor(
15+
private router: Router,
16+
private demoService: DemoService
17+
) { }
18+
19+
ngOnInit(): void {
20+
}
21+
22+
login(value: any){
23+
this.demoService.remote().login(value).subscribe((success: any)=>{
24+
this.success = success
25+
this.router.navigate(['send-jwt4'])
26+
})
27+
}
28+
29+
}

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

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { NgModule } from '@angular/core';
2+
import { CommonModule } from '@angular/common';
3+
4+
import { LoginRoutingModule } from './login-routing.module';
5+
import { FormsModule } from '@angular/forms';
6+
import { LoginComponent } from './login.component';
7+
8+
9+
@NgModule({
10+
declarations: [
11+
LoginComponent
12+
],
13+
imports: [
14+
CommonModule,
15+
LoginRoutingModule,
16+
FormsModule
17+
]
18+
})
19+
export class LoginModule { }

‎frontend/src/app/send-jwt1/send-jwt1.component.html

+5-4
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,23 @@ <h1 class="mb-3 heading">{{ "send-jwt1.introduction" | transloco }}</h1>
44

55
<hr>
66

7-
<div class="rectangle">
7+
<div *ngIf="successToken" class="rectangle">
88
<img src="assets/images/icon-check-square.png"/>
99
<span>{{ "send-jwt1.authenticated" | transloco | uppercase }}</span>
1010
</div>
1111

1212
<div class="rectangle1">
1313
<h1>{{ "send-jwt1.request" | transloco }}</h1>
1414
<div class="box">
15-
<a href="#" class="font-grey">{{ "send-jwt1.request1" | transloco | uppercase }}</a>
15+
<button (click)="sendJwtThroughRequestParameter()" class="font-grey">{{ "send-jwt1.request1" | transloco | uppercase }}</button>
1616
<img src="assets/images/icon-arrow-right.svg"/>
1717
</div>
1818

1919
<p class="font-grey">{{ "send-jwt1.request2" | transloco}}</p>
2020

21-
<div class="box1">
22-
21+
<div class="box1" style="margin-bottom: 20px;">
22+
<code>
23+
{{ "send-jwt1.code" | transloco }}</code>
2324
</div>
2425

2526
<a class="query" target="_blank" href="#">{{ "send-jwt1.queryParameter" | transloco}}</a>

‎frontend/src/app/send-jwt1/send-jwt1.component.scss

+3-2
Original file line numberDiff line numberDiff line change
@@ -40,12 +40,13 @@
4040
display: flex;
4141
align-items: center;
4242

43-
a {
43+
button {
4444
font-size: 13px;
4545
font-weight: bold;
4646
font-stretch: normal;
4747
font-style: normal;
48-
letter-spacing: 0.13px;
48+
border: none;
49+
background: transparent;
4950
color: #2a2f44;
5051
text-decoration: none;
5152
}

‎frontend/src/app/send-jwt1/send-jwt1.component.ts

+13-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Component, OnInit } from '@angular/core';
22
import { Router } from '@angular/router';
3+
import { DemoService } from '../shared/services/demo.service';
34
import { StepService } from '../shared/services/step.service';
45

56
@Component({
@@ -11,13 +12,24 @@ export class SendJwt1Component implements OnInit {
1112

1213
constructor(
1314
private router: Router,
15+
private demoService: DemoService,
1416
private stepService: StepService
1517
) {
1618
this.stepService.setStep(7)
1719
}
18-
1920
ngOnInit(): void {
2021
}
22+
successToken = false
23+
sendJwtThroughRequestParameter(){
24+
var myToken = localStorage.getItem('token')
25+
this.demoService.remote().getFromRequestParameter(myToken).subscribe({
26+
next: (success: any)=>{
27+
this.successToken = true
28+
}, error: (error: any) => {
29+
console.error('error:', error);
30+
},
31+
})
32+
}
2133

2234
backStep() {
2335
this.stepService.setStep(6)

0 commit comments

Comments
 (0)