fix: backend integration bugs and status messages

gitcommitshow · gitcommitshow · commit b38a90b23fcb · 2022-08-01T09:17:31.000+05:30
diff --git a/app.js b/app.js
@@ -42,6 +42,8 @@ app.use(function(req, res, next){
     } else  {
         req.wantsJson = true;
     }
+    console.debug(new Date().toString() + "Requested :: ", req.method, req.url);
+    console.debug(req.headers)
     next();
 })
 
diff --git a/frontend/src/app/generate-token/generate-token.component.html b/frontend/src/app/generate-token/generate-token.component.html
@@ -2,19 +2,19 @@ <h1 class="mb-5 heading">{{ "generate-token.create" | transloco }}</h1>
 
 <hr>
 
-<p class="justify-content-sm-between d-flex algo">
+<div class="justify-content-sm-between d-flex algo">
     <span>{{ "generate-token.algorithm" | transloco }}</span>
     <a target="_blank" href="https://tools.ietf.org/html/rfc7518#section-3">Recommend algorithms</a>
-</p>
+</div>
 
 <form #postForm="ngForm" (ngSubmit)="onCreateToken(postForm.value)">
     <select [(ngModel)]="algo" name="algo" class="rectangle">
         <option>HS256</option>
         <option [selected]="true">RS256</option>
         <option>ES256</option>
     </select>
-
-    <p class="font-grey algo">{{"generate-token.data" | transloco}}</p>
+    <br/>
+    <div class="font-grey algo">{{"generate-token.data" | transloco}}</div>
 
     <textarea [(ngModel)]="payloadValue" name="payload" class="rectangle-1 data1"></textarea>
 
diff --git a/frontend/src/app/generate-token/generate-token.component.ts b/frontend/src/app/generate-token/generate-token.component.ts
@@ -11,7 +11,9 @@ import { StepService } from '../shared/services/step.service';
 export class GenerateTokenComponent implements OnInit {
 
   payloadValue = '{ "data" : "We raised series A" }'
-  algo ="RS256"
+  //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"}
+
+  algo ="HS256"
 
   @Input() token = ""
   
diff --git a/frontend/src/app/send-jwt1/send-jwt1.component.html b/frontend/src/app/send-jwt1/send-jwt1.component.html
@@ -4,9 +4,14 @@ <h1 class="mb-3 heading">{{ "send-jwt1.introduction" | transloco }}</h1>
 
 <hr>
 
-<div *ngIf="successToken" class="rectangle">
+<div *ngIf="successText" class="rectangle">
         <img src="assets/images/icon-check-square.png"/>
-        <span>{{ "send-jwt1.authenticated" | transloco | uppercase }}</span>
+        <span>{{ successText | transloco | uppercase }}</span>
+</div>
+
+<div *ngIf="errorText" class="rectangle error">
+  <img src="assets/images/icon-error.svg"/>
+  <span>{{ errorText | transloco | uppercase }}</span>
 </div>
 
 <div class="rectangle1">
diff --git a/frontend/src/app/send-jwt1/send-jwt1.component.scss b/frontend/src/app/send-jwt1/send-jwt1.component.scss
@@ -20,6 +20,11 @@
     }
 }
 
+.rectangle.error {
+    border: solid 1px rgba(255, 5, 5, 0.75);
+    background-color: rgba(209, 66, 31, 0.15);
+}
+
 .rectangle1 {
     width: 668px;
     height: 405px;
@@ -29,7 +34,7 @@
     border: dashed 1px #505255;
 
     .box {
-        width: 331.1px;
+        width: fit-content;
         height: 30.5px;
         padding: 6px 12.2px 8.5px 12.3px;
         border-radius: 6px;
diff --git a/frontend/src/app/send-jwt1/send-jwt1.component.ts b/frontend/src/app/send-jwt1/send-jwt1.component.ts
@@ -1,3 +1,4 @@
+import { HttpErrorResponse } from '@angular/common/http';
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { DemoService } from '../shared/services/demo.service';
@@ -17,16 +18,26 @@ export class SendJwt1Component implements OnInit {
   ) { 
     this.stepService.setStep(7)
   }
+  
   ngOnInit(): void {
   }
-  successToken = false
+
+  successText = "";
+  errorText = "";
+
   sendJwtThroughRequestParameter(){
     var myToken = localStorage.getItem('token')
-    this.demoService.remote().getFromRequestParameter(myToken).subscribe({
+    this.demoService.remote().sendTokenViaRequestParam(myToken).subscribe({
       next: (success: any)=>{
-        this.successToken = true
-      }, error: (error: any) => {
-        console.error('error:', error);
+        console.log("success")
+        this.errorText = ""
+        this.successText = success && success.statusText ? success.statusText : "Authenticated"
+      },
+      complete: () => console.log("Sent token in request parameter"),
+      error: (error: HttpErrorResponse) => {
+        this.successText = "";
+        this.errorText = error.statusText || "Unsuccessful"
+        console.error('error:', error)
       },
     })
   }
diff --git a/frontend/src/app/send-jwt2/send-jwt2.component.html b/frontend/src/app/send-jwt2/send-jwt2.component.html
@@ -4,9 +4,14 @@ <h1 class="mb-3 heading">{{ "send-jwt2.introduction" | transloco }}</h1>
 
 <hr>
 
-<div class="rectangle">
-        <img src="assets/images/icon-check-square.png"/>
-        <span>{{ "send-jwt2.authenticated" | transloco | uppercase }}</span>
+<div *ngIf="successText" class="rectangle">
+  <img src="assets/images/icon-check-square.png"/>
+  <span>{{ successText | transloco | uppercase }}</span>
+</div>
+
+<div *ngIf="errorText" class="rectangle error">
+  <img src="assets/images/icon-error.svg"/>
+  <span>{{ errorText | transloco | uppercase }}</span>
 </div>
 
 <div class="rectangle1">
diff --git a/frontend/src/app/send-jwt2/send-jwt2.component.scss b/frontend/src/app/send-jwt2/send-jwt2.component.scss
@@ -20,6 +20,11 @@
     }
 }
 
+.rectangle.error {
+    border: solid 1px rgba(255, 5, 5, 0.75);
+    background-color: rgba(209, 66, 31, 0.15);
+}
+
 .rectangle1 { 
     width: 668px;
     height: 419px;
diff --git a/frontend/src/app/send-jwt2/send-jwt2.component.ts b/frontend/src/app/send-jwt2/send-jwt2.component.ts
@@ -12,6 +12,9 @@ export class SendJwt2Component implements OnInit {
 
   token: any | null
 
+  successText = "";
+  errorText = "";
+
   constructor(
     private router : Router,
     private demoService : DemoService,
@@ -26,12 +29,15 @@ export class SendJwt2Component implements OnInit {
   }
 
   sendJwtThroughBody(value: string){
-    this.token = value
-    this.demoService.remote().postFromBody(value).subscribe({
+    this.demoService.remote().sendTokenViaWebFormBody(value).subscribe({
       next: (success: any)=>{
-        console.log('yes')
+        console.log('Authenticated')
+        this.errorText = "";
+        this.successText = success && success.statusText ? success.statusText : "You have been successfully authenticated"
       }, error: (error: any) => {
         console.error('error:', error);
+        this.successText = "";
+        this.errorText = error && error.statusText ? error.statusText : "Authentication failed"
       },
     })
   }
diff --git a/frontend/src/app/send-jwt3/send-jwt3.component.html b/frontend/src/app/send-jwt3/send-jwt3.component.html
@@ -4,9 +4,14 @@ <h1 class="mb-3">{{ "send-jwt3.introduction" | transloco }}</h1>
 
 <hr>
 
-<div class="rectangle">
+<div *ngIf="successText" class="rectangle">
         <img src="assets/images/icon-check-square.png"/>
-        <span>{{ "send-jwt3.authenticated" | transloco | uppercase }}</span>
+        <span>{{ successText }}</span>
+</div>
+
+<div *ngIf="errorText" class="rectangle error">
+  <img src="assets/images/icon-error.svg"/>
+  <span>{{ errorText | transloco | uppercase }}</span>
 </div>
 
 <div class="rectangle1">
@@ -17,18 +22,13 @@ <h1>{{ "send-jwt3.request" | transloco }}</h1>
     <div class="innerRectangle">
         <div class="sampleContent">
           <pre id="responseText">
-            <b>Sample Response</b>
-            HTTP/1.1 200 OK
-            Content-Type: application/json;charset=UTF-8
-            Cache-Control: no-store
-            Pragma: no-cache
-            
-            {{'send-jwt3.openBracket' | transloco}}
-            "access_token":"mF_9.B5f-4.1JqM",
-            "token_type":"Bearer",
-            "expires_in":3600,
-            "refresh_token":"tGzv3JOkF0XG5Qx2TlKWIA"
-            {{ 'send-jwt3.closeBracket' | transloco}}
+            <b>Sample Request</b>
+            Request URL: /demo/protected/api/bearer
+            Request Method: GET
+
+            --Headers--
+            Content-Type: application/json
+            Authorization: "Bearer thetoken"
           </pre>
         </div>
         <a href="#" class="edit">
diff --git a/frontend/src/app/send-jwt3/send-jwt3.component.scss b/frontend/src/app/send-jwt3/send-jwt3.component.scss
@@ -1,6 +1,6 @@
 .rectangle {
     width: 667px;
-    height: 53px;
+    height: fit-content;
     padding: 16.5px 223.1px 15.5px 19.9px;
     border-radius: 12px;
     border: solid 1px rgba(0, 195, 15, 0.75);
@@ -20,6 +20,11 @@
     }
 }
 
+.rectangle.error {
+    border: solid 1px rgba(255, 5, 5, 0.75);
+    background-color: rgba(209, 66, 31, 0.15);
+}
+
 .rectangle1 { 
     width: 668px;
     height: 721px;
@@ -29,7 +34,7 @@
     border: dashed 1px #505255;
     .innerRectangle {
        width: 604px;
-        height: 346px;
+        height: fit-content;
         border-top-left-radius: 12px;
         border-top-right-radius: 12px;
         border: solid 1px #3c4053; 
diff --git a/frontend/src/app/send-jwt3/send-jwt3.component.ts b/frontend/src/app/send-jwt3/send-jwt3.component.ts
@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { StepService } from '../shared/services/step.service';
 import { DemoService } from '../shared/services/demo.service'
-import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http';
 
 @Component({
   selector: 'app-send-jwt3',
@@ -11,6 +11,9 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
 })
 export class SendJwt3Component implements OnInit {
 
+  successText = "";
+  errorText = "";
+
   constructor(
     private router: Router,
     private demoService: DemoService,
@@ -27,8 +30,18 @@ export class SendJwt3Component implements OnInit {
     var headers = new HttpHeaders()
     .set("Content-Type", "application\/json")
     .set("Authorization", "Bearer " + token)
-    this.demoService.remote().getFromRequestHeader(headers).subscribe((response)=>{
-      console.log(response)
+    this.demoService.remote().sendTokenViaRequestHeader(headers).subscribe({
+      next: (success: any)=>{
+        console.log("success")
+        this.errorText = ""
+        this.successText = JSON.stringify(success, null, 4)
+      },
+      complete: () => console.log("Sent token in header"),
+      error: (error: HttpErrorResponse) => {
+        this.successText = ""
+        this.errorText = error.statusText || "Unsuccessful"
+        console.error('error:', error)
+      }
     })
   }
 
diff --git a/frontend/src/app/send-jwt4/send-jwt4.component.html b/frontend/src/app/send-jwt4/send-jwt4.component.html
@@ -4,9 +4,14 @@ <h1 class="mb-3">{{ "send-jwt4.introduction" | transloco }}</h1>
 
 <hr>
 
-<div class="rectangle">
-        <img src="assets/images/icon-check-square.png"/>
-        <span>{{ "send-jwt4.authenticated" | transloco | uppercase }}</span>
+<div *ngIf="successText" class="rectangle">
+    <img src="assets/images/icon-check-square.png"/>
+    <span>{{ successText }}</span>
+</div>
+
+<div *ngIf="errorText" class="rectangle error">
+<img src="assets/images/icon-error.svg"/>
+<span>{{ errorText | transloco | uppercase }}</span>
 </div>
 
 <div class="rectangle1">
diff --git a/frontend/src/app/send-jwt4/send-jwt4.component.ts b/frontend/src/app/send-jwt4/send-jwt4.component.ts
@@ -1,4 +1,4 @@
-import { HttpHeaders } from '@angular/common/http';
+import { HttpErrorResponse, HttpHeaders } from '@angular/common/http';
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { DemoService } from '../shared/services/demo.service';
@@ -11,6 +11,9 @@ import { StepService } from '../shared/services/step.service';
 })
 export class SendJwt4Component implements OnInit {
 
+  successText = "";
+  errorText = "";
+
   constructor(
     private router : Router,
     private demoService: DemoService,
@@ -27,8 +30,18 @@ export class SendJwt4Component implements OnInit {
   }
 
   getProtectedUserData(){
-    this.demoService.remote().webCookies().subscribe((success)=>{
-      console.log(success)
+    this.demoService.remote().webCookies().subscribe({
+      next: (success: any)=>{
+        console.log("success")
+        this.errorText = ""
+        this.successText = JSON.stringify(success, null, 4)
+      },
+      complete: () => console.log("Sent token in header"),
+      error: (error: HttpErrorResponse) => {
+        this.successText = ""
+        this.errorText = error.statusText || "Unsuccessful"
+        console.error('error:', error)
+      }
     })
   }
 
diff --git a/frontend/src/app/shared/services/demo.service.ts b/frontend/src/app/shared/services/demo.service.ts
@@ -22,26 +22,26 @@ export class DemoService {
     }
     let httpRequest = this.http
     return {
-      getFromRequestParameter(accessToken: any): Observable<any> {
+      sendTokenViaRequestParam(accessToken: any): Observable<any> {
         let url = REMOTE_SERVER+ENDPOINTS.protected
         let params = {
           access_token: accessToken
         }
         return httpRequest.get<any>(url, {params: params});
       },
-      postFromBody(body: any): Observable<any> {
+      sendTokenViaWebFormBody(body: any): Observable<any> {
         let url = REMOTE_SERVER+ENDPOINTS.webForm
-        return httpRequest.post<any>(url, body.access_token);
+        return httpRequest.post<any>(url, body);
       },
-      getFromRequestHeader(headers: any): Observable<any> {
+      sendTokenViaRequestHeader(headers: any): Observable<any> {
         let url = REMOTE_SERVER+ENDPOINTS.bearer
         return httpRequest.get<any>(url, {headers: headers});
       },
       login(body: any): Observable<any> {
         let url = REMOTE_SERVER+ENDPOINTS.login
         return httpRequest.post<any>(url, body);
       },
-      webCookies(): Observable<any> {
+      sendTokenViaWebCookies(): Observable<any> {
         let url = REMOTE_SERVER+ENDPOINTS.webCookies
         return httpRequest.get<any>(url);
       },
diff --git a/frontend/src/assets/i18n/en.json b/frontend/src/assets/i18n/en.json
diff --git a/frontend/src/assets/images/icon-error.svg b/frontend/src/assets/images/icon-error.svg
diff --git a/routes/demo.js b/routes/demo.js
diff --git a/services/DemoAuthService.js b/services/DemoAuthService.js

Original file line number	Diff line number	Diff line change
`@@ -42,6 +42,8 @@ app.use(function(req, res, next){`
`42`	`42`	`} else {`
`43`	`43`	`req.wantsJson = true;`
`44`	`44`	`}`
	`45`	`+ console.debug(new Date().toString() + "Requested :: ", req.method, req.url);`
	`46`	`+ console.debug(req.headers)`
`45`	`47`	`next();`
`46`	`48`	`})`
`47`	`49`
Original file line number	Diff line number	Diff line change
`@@ -20,6 +20,11 @@`
`20`	`20`	`}`
`21`	`21`	`}`
`22`	`22`
	`23`	`+.rectangle.error {`
	`24`	`+ border: solid 1px rgba(255, 5, 5, 0.75);`
	`25`	`+ background-color: rgba(209, 66, 31, 0.15);`
	`26`	`+}`
	`27`	`+`
`23`	`28`	`.rectangle1 {`
`24`	`29`	`width: 668px;`
`25`	`30`	`height: 419px;`