Skip to content

Commit 38ae8e9

Browse files
khajatakreemullakhajatakreemulla
committed
Backend Integration
1 parent 7f78798 commit 38ae8e9

29 files changed

+368
-53
lines changed

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

Lines changed: 4 additions & 0 deletions
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‎

Lines changed: 24 additions & 23 deletions
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‎

Lines changed: 5 additions & 2 deletions
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‎

Lines changed: 19 additions & 1 deletion
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‎

Lines changed: 2 additions & 0 deletions
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‎

Lines changed: 1 addition & 1 deletion
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‎

Lines changed: 5 additions & 0 deletions
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‎

Lines changed: 16 additions & 0 deletions
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‎

Lines changed: 9 additions & 0 deletions
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‎

Lines changed: 20 additions & 0 deletions
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+
}

0 commit comments

Comments
 (0)