Skip to content

Commit b38a90b

Browse files
gitcommitshowgitcommitshow
committed
fix: backend integration bugs and status messages
1 parent f87b04f commit b38a90b

19 files changed

+226
-63
lines changed

‎app.js

+2
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,8 @@ app.use(function(req, res, next){
4242
} else {
4343
req.wantsJson = true;
4444
}
45+
console.debug(new Date().toString() + "Requested :: ", req.method, req.url);
46+
console.debug(req.headers)
4547
next();
4648
})
4749

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

+4-4
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,19 @@ <h1 class="mb-5 heading">{{ "generate-token.create" | transloco }}</h1>
22

33
<hr>
44

5-
<p class="justify-content-sm-between d-flex algo">
5+
<div class="justify-content-sm-between d-flex algo">
66
<span>{{ "generate-token.algorithm" | transloco }}</span>
77
<a target="_blank" href="https://tools.ietf.org/html/rfc7518#section-3">Recommend algorithms</a>
8-
</p>
8+
</div>
99

1010
<form #postForm="ngForm" (ngSubmit)="onCreateToken(postForm.value)">
1111
<select [(ngModel)]="algo" name="algo" class="rectangle">
1212
<option>HS256</option>
1313
<option [selected]="true">RS256</option>
1414
<option>ES256</option>
1515
</select>
16-
17-
<p class="font-grey algo">{{"generate-token.data" | transloco}}</p>
16+
<br/>
17+
<div class="font-grey algo">{{"generate-token.data" | transloco}}</div>
1818

1919
<textarea [(ngModel)]="payloadValue" name="payload" class="rectangle-1 data1"></textarea>
2020

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

+3-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,9 @@ import { StepService } from '../shared/services/step.service';
1111
export class GenerateTokenComponent implements OnInit {
1212

1313
payloadValue = '{ "data" : "We raised series A" }'
14-
algo ="RS256"
14+
//TODO Update payload to {"data":"This is Pradeep with id xyz and he can access files owned by xyz","iat":1646252217,"exp":1646338617,"aud":"supertokens.com","iss":"Supertokens Inc","sub":"auth@supertokens.com"}
15+
16+
algo ="HS256"
1517

1618
@Input() token = ""
1719

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

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

55
<hr>
66

7-
<div *ngIf="successToken" class="rectangle">
7+
<div *ngIf="successText" class="rectangle">
88
<img src="assets/images/icon-check-square.png"/>
9-
<span>{{ "send-jwt1.authenticated" | transloco | uppercase }}</span>
9+
<span>{{ successText | transloco | uppercase }}</span>
10+
</div>
11+
12+
<div *ngIf="errorText" class="rectangle error">
13+
<img src="assets/images/icon-error.svg"/>
14+
<span>{{ errorText | transloco | uppercase }}</span>
1015
</div>
1116

1217
<div class="rectangle1">

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

+6-1
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,11 @@
2020
}
2121
}
2222

23+
.rectangle.error {
24+
border: solid 1px rgba(255, 5, 5, 0.75);
25+
background-color: rgba(209, 66, 31, 0.15);
26+
}
27+
2328
.rectangle1 {
2429
width: 668px;
2530
height: 405px;
@@ -29,7 +34,7 @@
2934
border: dashed 1px #505255;
3035

3136
.box {
32-
width: 331.1px;
37+
width: fit-content;
3338
height: 30.5px;
3439
padding: 6px 12.2px 8.5px 12.3px;
3540
border-radius: 6px;

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

+16-5
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { HttpErrorResponse } from '@angular/common/http';
12
import { Component, OnInit } from '@angular/core';
23
import { Router } from '@angular/router';
34
import { DemoService } from '../shared/services/demo.service';
@@ -17,16 +18,26 @@ export class SendJwt1Component implements OnInit {
1718
) {
1819
this.stepService.setStep(7)
1920
}
21+
2022
ngOnInit(): void {
2123
}
22-
successToken = false
24+
25+
successText = "";
26+
errorText = "";
27+
2328
sendJwtThroughRequestParameter(){
2429
var myToken = localStorage.getItem('token')
25-
this.demoService.remote().getFromRequestParameter(myToken).subscribe({
30+
this.demoService.remote().sendTokenViaRequestParam(myToken).subscribe({
2631
next: (success: any)=>{
27-
this.successToken = true
28-
}, error: (error: any) => {
29-
console.error('error:', error);
32+
console.log("success")
33+
this.errorText = ""
34+
this.successText = success && success.statusText ? success.statusText : "Authenticated"
35+
},
36+
complete: () => console.log("Sent token in request parameter"),
37+
error: (error: HttpErrorResponse) => {
38+
this.successText = "";
39+
this.errorText = error.statusText || "Unsuccessful"
40+
console.error('error:', error)
3041
},
3142
})
3243
}

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

+8-3
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,14 @@ <h1 class="mb-3 heading">{{ "send-jwt2.introduction" | transloco }}</h1>
44

55
<hr>
66

7-
<div class="rectangle">
8-
<img src="assets/images/icon-check-square.png"/>
9-
<span>{{ "send-jwt2.authenticated" | transloco | uppercase }}</span>
7+
<div *ngIf="successText" class="rectangle">
8+
<img src="assets/images/icon-check-square.png"/>
9+
<span>{{ successText | transloco | uppercase }}</span>
10+
</div>
11+
12+
<div *ngIf="errorText" class="rectangle error">
13+
<img src="assets/images/icon-error.svg"/>
14+
<span>{{ errorText | transloco | uppercase }}</span>
1015
</div>
1116

1217
<div class="rectangle1">

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

+5
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,11 @@
2020
}
2121
}
2222

23+
.rectangle.error {
24+
border: solid 1px rgba(255, 5, 5, 0.75);
25+
background-color: rgba(209, 66, 31, 0.15);
26+
}
27+
2328
.rectangle1 {
2429
width: 668px;
2530
height: 419px;

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

+9-3
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,9 @@ export class SendJwt2Component implements OnInit {
1212

1313
token: any | null
1414

15+
successText = "";
16+
errorText = "";
17+
1518
constructor(
1619
private router : Router,
1720
private demoService : DemoService,
@@ -26,12 +29,15 @@ export class SendJwt2Component implements OnInit {
2629
}
2730

2831
sendJwtThroughBody(value: string){
29-
this.token = value
30-
this.demoService.remote().postFromBody(value).subscribe({
32+
this.demoService.remote().sendTokenViaWebFormBody(value).subscribe({
3133
next: (success: any)=>{
32-
console.log('yes')
34+
console.log('Authenticated')
35+
this.errorText = "";
36+
this.successText = success && success.statusText ? success.statusText : "You have been successfully authenticated"
3337
}, error: (error: any) => {
3438
console.error('error:', error);
39+
this.successText = "";
40+
this.errorText = error && error.statusText ? error.statusText : "Authentication failed"
3541
},
3642
})
3743
}

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

+14-14
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,14 @@ <h1 class="mb-3">{{ "send-jwt3.introduction" | transloco }}</h1>
44

55
<hr>
66

7-
<div class="rectangle">
7+
<div *ngIf="successText" class="rectangle">
88
<img src="assets/images/icon-check-square.png"/>
9-
<span>{{ "send-jwt3.authenticated" | transloco | uppercase }}</span>
9+
<span>{{ successText }}</span>
10+
</div>
11+
12+
<div *ngIf="errorText" class="rectangle error">
13+
<img src="assets/images/icon-error.svg"/>
14+
<span>{{ errorText | transloco | uppercase }}</span>
1015
</div>
1116

1217
<div class="rectangle1">
@@ -17,18 +22,13 @@ <h1>{{ "send-jwt3.request" | transloco }}</h1>
1722
<div class="innerRectangle">
1823
<div class="sampleContent">
1924
<pre id="responseText">
20-
<b>Sample Response</b>
21-
HTTP/1.1 200 OK
22-
Content-Type: application/json;charset=UTF-8
23-
Cache-Control: no-store
24-
Pragma: no-cache
25-
26-
{{'send-jwt3.openBracket' | transloco}}
27-
"access_token":"mF_9.B5f-4.1JqM",
28-
"token_type":"Bearer",
29-
"expires_in":3600,
30-
"refresh_token":"tGzv3JOkF0XG5Qx2TlKWIA"
31-
{{ 'send-jwt3.closeBracket' | transloco}}
25+
<b>Sample Request</b>
26+
Request URL: /demo/protected/api/bearer
27+
Request Method: GET
28+
29+
--Headers--
30+
Content-Type: application/json
31+
Authorization: "Bearer thetoken"
3232
</pre>
3333
</div>
3434
<a href="#" class="edit">

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

+7-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.rectangle {
22
width: 667px;
3-
height: 53px;
3+
height: fit-content;
44
padding: 16.5px 223.1px 15.5px 19.9px;
55
border-radius: 12px;
66
border: solid 1px rgba(0, 195, 15, 0.75);
@@ -20,6 +20,11 @@
2020
}
2121
}
2222

23+
.rectangle.error {
24+
border: solid 1px rgba(255, 5, 5, 0.75);
25+
background-color: rgba(209, 66, 31, 0.15);
26+
}
27+
2328
.rectangle1 {
2429
width: 668px;
2530
height: 721px;
@@ -29,7 +34,7 @@
2934
border: dashed 1px #505255;
3035
.innerRectangle {
3136
width: 604px;
32-
height: 346px;
37+
height: fit-content;
3338
border-top-left-radius: 12px;
3439
border-top-right-radius: 12px;
3540
border: solid 1px #3c4053;

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

+16-3
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
22
import { Router } from '@angular/router';
33
import { StepService } from '../shared/services/step.service';
44
import { DemoService } from '../shared/services/demo.service'
5-
import { HttpClient, HttpHeaders } from '@angular/common/http';
5+
import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http';
66

77
@Component({
88
selector: 'app-send-jwt3',
@@ -11,6 +11,9 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
1111
})
1212
export class SendJwt3Component implements OnInit {
1313

14+
successText = "";
15+
errorText = "";
16+
1417
constructor(
1518
private router: Router,
1619
private demoService: DemoService,
@@ -27,8 +30,18 @@ export class SendJwt3Component implements OnInit {
2730
var headers = new HttpHeaders()
2831
.set("Content-Type", "application\/json")
2932
.set("Authorization", "Bearer " + token)
30-
this.demoService.remote().getFromRequestHeader(headers).subscribe((response)=>{
31-
console.log(response)
33+
this.demoService.remote().sendTokenViaRequestHeader(headers).subscribe({
34+
next: (success: any)=>{
35+
console.log("success")
36+
this.errorText = ""
37+
this.successText = JSON.stringify(success, null, 4)
38+
},
39+
complete: () => console.log("Sent token in header"),
40+
error: (error: HttpErrorResponse) => {
41+
this.successText = ""
42+
this.errorText = error.statusText || "Unsuccessful"
43+
console.error('error:', error)
44+
}
3245
})
3346
}
3447

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

+8-3
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,14 @@ <h1 class="mb-3">{{ "send-jwt4.introduction" | transloco }}</h1>
44

55
<hr>
66

7-
<div class="rectangle">
8-
<img src="assets/images/icon-check-square.png"/>
9-
<span>{{ "send-jwt4.authenticated" | transloco | uppercase }}</span>
7+
<div *ngIf="successText" class="rectangle">
8+
<img src="assets/images/icon-check-square.png"/>
9+
<span>{{ successText }}</span>
10+
</div>
11+
12+
<div *ngIf="errorText" class="rectangle error">
13+
<img src="assets/images/icon-error.svg"/>
14+
<span>{{ errorText | transloco | uppercase }}</span>
1015
</div>
1116

1217
<div class="rectangle1">

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

+16-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { HttpHeaders } from '@angular/common/http';
1+
import { HttpErrorResponse, HttpHeaders } from '@angular/common/http';
22
import { Component, OnInit } from '@angular/core';
33
import { Router } from '@angular/router';
44
import { DemoService } from '../shared/services/demo.service';
@@ -11,6 +11,9 @@ import { StepService } from '../shared/services/step.service';
1111
})
1212
export class SendJwt4Component implements OnInit {
1313

14+
successText = "";
15+
errorText = "";
16+
1417
constructor(
1518
private router : Router,
1619
private demoService: DemoService,
@@ -27,8 +30,18 @@ export class SendJwt4Component implements OnInit {
2730
}
2831

2932
getProtectedUserData(){
30-
this.demoService.remote().webCookies().subscribe((success)=>{
31-
console.log(success)
33+
this.demoService.remote().webCookies().subscribe({
34+
next: (success: any)=>{
35+
console.log("success")
36+
this.errorText = ""
37+
this.successText = JSON.stringify(success, null, 4)
38+
},
39+
complete: () => console.log("Sent token in header"),
40+
error: (error: HttpErrorResponse) => {
41+
this.successText = ""
42+
this.errorText = error.statusText || "Unsuccessful"
43+
console.error('error:', error)
44+
}
3245
})
3346
}
3447

‎frontend/src/app/shared/services/demo.service.ts

+5-5
Original file line numberDiff line numberDiff line change
@@ -22,26 +22,26 @@ export class DemoService {
2222
}
2323
let httpRequest = this.http
2424
return {
25-
getFromRequestParameter(accessToken: any): Observable<any> {
25+
sendTokenViaRequestParam(accessToken: any): Observable<any> {
2626
let url = REMOTE_SERVER+ENDPOINTS.protected
2727
let params = {
2828
access_token: accessToken
2929
}
3030
return httpRequest.get<any>(url, {params: params});
3131
},
32-
postFromBody(body: any): Observable<any> {
32+
sendTokenViaWebFormBody(body: any): Observable<any> {
3333
let url = REMOTE_SERVER+ENDPOINTS.webForm
34-
return httpRequest.post<any>(url, body.access_token);
34+
return httpRequest.post<any>(url, body);
3535
},
36-
getFromRequestHeader(headers: any): Observable<any> {
36+
sendTokenViaRequestHeader(headers: any): Observable<any> {
3737
let url = REMOTE_SERVER+ENDPOINTS.bearer
3838
return httpRequest.get<any>(url, {headers: headers});
3939
},
4040
login(body: any): Observable<any> {
4141
let url = REMOTE_SERVER+ENDPOINTS.login
4242
return httpRequest.post<any>(url, body);
4343
},
44-
webCookies(): Observable<any> {
44+
sendTokenViaWebCookies(): Observable<any> {
4545
let url = REMOTE_SERVER+ENDPOINTS.webCookies
4646
return httpRequest.get<any>(url);
4747
},

0 commit comments

Comments
 (0)