About
+ ++ This application is a show-case for an Angular app consuming a REST + API through an OAuth2 BFF. +
++ This application is a show-case for an Angular app consuming a REST API + through an OAuth2 BFF. +
`, + styles: ``, +}) +export class AboutView {} diff --git a/spring-security-modules/spring-security-oauth2-bff/angular-ui/src/app/app.component.ts b/spring-security-modules/spring-security-oauth2-bff/angular-ui/src/app/app.component.ts new file mode 100644 index 0000000000..24ecc942df --- /dev/null +++ b/spring-security-modules/spring-security-oauth2-bff/angular-ui/src/app/app.component.ts @@ -0,0 +1,27 @@ +import { CommonModule } from '@angular/common'; +import { HttpClientModule } from '@angular/common/http'; +import { Component } from '@angular/core'; +import { RouterOutlet } from '@angular/router'; +import { AuthenticationComponent } from './auth/authentication.component'; + +@Component({ + selector: 'app-root', + standalone: true, + imports: [ + CommonModule, + RouterOutlet, + HttpClientModule, + AuthenticationComponent, + ], + template: `{{ message }}
`, + styles: [], +}) +export class HomeView { + message = ''; + + private userSubscription?: Subscription; + + constructor(user: UserService) { + this.userSubscription = user.valueChanges.subscribe((u) => { + this.message = u.isAuthenticated + ? `Hi ${u.name}, you are granted with ${HomeView.rolesStr(u)}.` + : 'You are not authenticated.'; + }); + } + + static rolesStr(user: User) { + if(!user?.roles?.length) { + return '[]' + } + return `["${user.roles.join('", "')}"]` + } + + ngOnDestroy() { + this.userSubscription?.unsubscribe(); + } +} diff --git a/spring-security-modules/spring-security-oauth2-bff/angular-ui/src/app/navigation.component.ts b/spring-security-modules/spring-security-oauth2-bff/angular-ui/src/app/navigation.component.ts new file mode 100644 index 0000000000..e5432798a6 --- /dev/null +++ b/spring-security-modules/spring-security-oauth2-bff/angular-ui/src/app/navigation.component.ts @@ -0,0 +1,30 @@ +import { Component, Input } from '@angular/core'; +import { Router } from '@angular/router'; +import { Subscription } from 'rxjs'; + +@Component({ + selector: 'app-navigation', + standalone: true, + imports: [], + template: ``, + styles: ``, +}) +export class NavigationComponent { + @Input() + label!: string; + + @Input() + destination!: string[]; + + private userSubscription?: Subscription; + + constructor(private router: Router) {} + + ngOnDestroy() { + this.userSubscription?.unsubscribe(); + } + + navigate() { + this.router.navigate(this.destination); + } +} diff --git a/spring-security-modules/spring-security-oauth2-bff/angular-ui/src/assets/.gitkeep b/spring-security-modules/spring-security-oauth2-bff/angular-ui/src/assets/.gitkeep new file mode 100644 index 0000000000..e69de29bb2 diff --git a/spring-security-modules/spring-security-oauth2-bff/angular-ui/src/favicon.ico b/spring-security-modules/spring-security-oauth2-bff/angular-ui/src/favicon.ico new file mode 100644 index 0000000000..e2bb6fa626 Binary files /dev/null and b/spring-security-modules/spring-security-oauth2-bff/angular-ui/src/favicon.ico differ diff --git a/spring-security-modules/spring-security-oauth2-bff/angular-ui/src/index.html b/spring-security-modules/spring-security-oauth2-bff/angular-ui/src/index.html new file mode 100644 index 0000000000..ed8ba6954f --- /dev/null +++ b/spring-security-modules/spring-security-oauth2-bff/angular-ui/src/index.html @@ -0,0 +1,13 @@ + + + + ++ This application is a show-case for an Angular app consuming a REST + API through an OAuth2 BFF. +
+{message}
+This application is a show-case for an Angular app consuming a REST API + through an OAuth2 BFF.
+{{ message(user.current.value) }}
+