Merge pull request #2 from damienbod/dev

Update UI

bff/server/appsettings.Development.json

@@ -9,10 +9,40 @@
   "UiDevServerUrl": "https://localhost:4201",
   "ReverseProxy": {
     "Routes": {
-      "route1": {
+      "assets": {
         "ClusterId": "cluster1",
         "Match": {
-          "Path": "{**catch-all}"
+          "Path": "assets/{**catch-all}"
+        }
+      },
+      "routealljs": {
+        "ClusterId": "cluster1",
+        "Match": {
+          "Path": "{nomatterwhat}.js"
+        }
+      },
+      "routeallcss": {
+        "ClusterId": "cluster1",
+        "Match": {
+          "Path": "{nomatterwhat}.css"
+        }
+      },
+      "webpacklazyloadingsources": {
+        "ClusterId": "cluster1",
+        "Match": {
+          "Path": "/src_{nomatterwhat}_ts.js"
+        }
+      },
+      "signalr": {
+        "ClusterId": "cluster1",
+        "Match": {
+          "Path": "/ng-cli-ws"
+        }
+      },
+      "webpacknodesrcmap": {
+        "ClusterId": "cluster1",
+        "Match": {
+          "Path": "/{nomatterwhat}.js.map"
         }
       }
     },

bff/ui/nx.json

@@ -61,5 +61,5 @@
     }
   },
   "defaultProject": "ui",
-  "nxCloudAccessToken": "YzEwYmYxZDgtMmZiZS00OTAwLThhZDMtNTFkM2VlOWExMGNlfHJlYWQtd3JpdGU="
+  "nxCloudAccessToken": "NGJmZDYwYzItOTg1NS00ZTYyLWFkMmYtMDk1YWRlN2EzNjJifHJlYWQtd3JpdGU="
 }

bff/ui/package.json

@@ -18,6 +18,7 @@
     "@angular/platform-browser-dynamic": "17.3.4",
     "@angular/router": "17.3.4",
     "@nx/angular": "18.2.4",
+    "bootstrap": "^5.3.3",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "0.14.4"
@@ -32,6 +33,7 @@
     "@angular/cli": "~17.0.0",
     "@angular/compiler-cli": "17.3.4",
     "@angular/language-service": "17.3.4",
+    "@nx/eslint": "18.2.4",
     "@nx/eslint-plugin": "18.2.4",
     "@nx/jest": "18.2.4",
     "@nx/js": "18.2.4",
@@ -53,8 +55,6 @@
     "prettier": "^2.6.2",
     "ts-jest": "^29.1.0",
     "ts-node": "10.9.1",
-    "typescript": "5.4.5",
-    "@nx/eslint": "18.2.4"
+    "typescript": "5.4.5"
   }
 }
-

bff/ui/project.json

@@ -16,8 +16,13 @@
         "polyfills": ["zone.js"],
         "tsConfig": "./tsconfig.app.json",
         "assets": ["./src/favicon.ico", "./src/assets"],
-        "styles": ["./src/styles.scss"],
-        "scripts": []
+        "styles": [
+			"node_modules/bootstrap/dist/css/bootstrap.min.css",
+			"./src/styles.scss"
+			],
+        "scripts": [
+			"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
+		]
       },
       "configurations": {
         "production": {

bff/ui/src/app/app.routes.ts

@@ -1,3 +1,9 @@
 import { Route } from '@angular/router';
+import { CallApiComponent } from './call-api/call-api.component';
 
-export const appRoutes: Route[] = [];
+export const appRoutes: Route[] =  [
+  {
+    path: 'call-api',
+    component: CallApiComponent
+  }
+];

bff/ui/src/app/call-api/call-api.component.html

@@ -0,0 +1,9 @@
+<h2>Data from API:</h2>
+
+<div>
+<button class="btn btn-link" (click)="getDirectApiData()">Get data from API direct</button>
+</div>
+
+<hr />
+
+<pre>{{ dataFromAzureProtectedApi$ | async | json }}</pre>

bff/ui/src/app/call-api/call-api.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CallApiComponent } from './call-api.component';
+
+describe('CallApiComponent', () => {
+  let component: CallApiComponent;
+  let fixture: ComponentFixture<CallApiComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CallApiComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CallApiComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

bff/ui/src/app/call-api/call-api.component.ts

@@ -0,0 +1,31 @@
+import { CommonModule } from '@angular/common';
+import { HttpClient } from '@angular/common/http';
+import { Component, OnInit, inject } from '@angular/core';
+import { Observable } from 'rxjs';
+
+@Component({
+  selector: 'app-call-api',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './call-api.component.html',
+  styleUrl: './call-api.component.scss',
+})
+
+export class CallApiComponent {
+
+  private readonly httpClient = inject(HttpClient);
+  dataFromAzureProtectedApi$: Observable<string[]>;
+
+  getDirectApiData() {
+    this.dataFromAzureProtectedApi$ = this.httpClient.get<string[]>(
+      `${this.getCurrentHost()}/api/DirectApi`
+    );
+  }
+
+  private getCurrentHost() {
+    const host = window.location.host;
+    const url = `${window.location.protocol}//${host}`;
+
+    return url;
+  }
+}

bff/ui/src/app/home.component.html

@@ -1,26 +1,27 @@
 <h2>BFF OpenIddict Security architecture with Angular nx</h2>
 
-<ng-container
-  *ngIf="userProfileClaims$ | async as userProfileClaims; else noAuth"
->
+<ng-container *ngIf="userProfileClaims$ | async as userProfileClaims; else noAuth">
   <div *ngIf="userProfileClaims?.isAuthenticated; else noAuth">
-    <button (click)="getDirectApiData()">get data from API direct</button>
-    <form method="post" action="api/Account/Logout">
-      <button class="btn btn-link" type="submit">Sign out</button>
-    </form>
+	  <nav class="navbar navbar-expand-lg navbar-light bg-light">
+		<a class="btn btn-link" href="./call-api">Call API</a>
+
+		<form method="post" action="api/Account/Logout">
+		  <button class="btn btn-link" type="submit">Sign out</button>
+		</form>
+	  </nav>
   </div>
 
   <hr />
 
   <h2>User profile:</h2>
   <pre>{{ userProfileClaims | json }}</pre>
 
-  <hr />
-
-  <h2>get direct data using API:</h2>
-  <pre>{{ dataFromAzureProtectedApi$ | async | json }}</pre>
 </ng-container>
 
 <ng-template #noAuth>
-  <a class="btn btn-link" href="api/Account/Login">Log in</a>
+	<nav class="navbar navbar-expand-lg navbar-light bg-light">
+	  <a class="btn btn-link" href="api/Account/Login">Log in</a>
+	</nav>
 </ng-template>
+
+ <hr />