first

frontend/src/app/Hello.ts

@@ -0,0 +1,6 @@
+export class Hello {
+  constructor(public id?: number,
+              public message?: string,
+             ) {
+  }
+}

frontend/src/app/app.component.html

@@ -0,0 +1,8 @@
+<h1>LF12 Starter</h1>
+
+<a href="/hello">hello</a>
+
+<router-outlet></router-outlet>
+
+
+

frontend/src/app/app.component.ts

@@ -0,0 +1,22 @@
+import {APP_INITIALIZER, Component} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterOutlet } from '@angular/router';
+import {HelloListComponent} from "./hello-list/hello-list.component";
+import {KeycloakAngularModule} from "keycloak-angular";
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [CommonModule, HelloListComponent, RouterOutlet, KeycloakAngularModule],
+  providers: [ ],
+  templateUrl: './app.component.html',
+  styleUrl: './app.component.css'
+})
+export class AppComponent{
+
+  constructor() {
+    }
+
+
+
+}

frontend/src/app/app.config.ts

@@ -0,0 +1,48 @@
+import {APP_INITIALIZER, ApplicationConfig} from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+import { routes } from './app.routes';
+import {KeycloakAngularModule, KeycloakBearerInterceptor, KeycloakService} from "keycloak-angular";
+import {HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi} from "@angular/common/http";
+
+export const initializeKeycloak = (keycloak: KeycloakService) => async () =>
+  keycloak.init({
+    config: {
+      url: 'http://localhost:9090',
+      realm: 'LF12',
+      clientId: 'lf12',
+    },
+    loadUserProfileAtStartUp: true,
+    initOptions: {
+      onLoad: 'check-sso',
+      silentCheckSsoRedirectUri:
+        window.location.origin + '/silent-check-sso.html',
+      checkLoginIframe: false,
+      redirectUri: 'http://localhost:4200',
+    },
+  });
+
+
+function initializeApp(keycloak: KeycloakService): () => Promise<boolean> {
+  return () => initializeKeycloak(keycloak)();
+}
+
+export const appConfig: ApplicationConfig = {
+  providers: [provideRouter(routes),
+      KeycloakAngularModule,
+      {
+        provide: APP_INITIALIZER,
+        useFactory: initializeApp,
+        multi: true,
+        deps: [KeycloakService]
+      },
+      KeycloakService,
+      provideHttpClient(withInterceptorsFromDi()),
+      {
+        provide: HTTP_INTERCEPTORS,
+        useClass: KeycloakBearerInterceptor,
+        multi: true
+      }
+    ]
+  };
+

frontend/src/app/app.routes.ts

@@ -0,0 +1,7 @@
+import { Routes } from '@angular/router';
+import {HelloListComponent} from "./hello-list/hello-list.component";
+import {authGuard} from "./auth.guard";
+
+export const routes: Routes = [
+  { path: 'hello', component: HelloListComponent , canActivate: [authGuard] }
+];

frontend/src/app/auth.guard.ts

@@ -0,0 +1,17 @@
+
+import { CanActivateFn } from '@angular/router';
+import { inject } from '@angular/core';
+import {KeycloakService} from "keycloak-angular";
+
+export const authGuard: CanActivateFn = async (route, state) => {
+  const keycloakService = inject(KeycloakService);
+
+  const isLoggedIn = keycloakService.isLoggedIn();
+
+  if (isLoggedIn) {
+    return true;
+  } else {
+    keycloakService.login();
+    return false;
+  }
+};

frontend/src/app/hello-list/hello-list.component.html

@@ -0,0 +1,8 @@
+<h3>List of Hellos</h3>
+<ul>
+  @for(e of employees$ | async; track e.id) {
+    <li>
+      {{e.id }}, {{e.message}}
+    </li>
+  }
+</ul>

frontend/src/app/hello-list/hello-list.component.ts

@@ -0,0 +1,31 @@
+import { Component } from '@angular/core';
+import {Observable, of} from "rxjs";
+import {Hello} from "../Hello";
+import {HttpClient, HttpClientModule, HttpHeaders, provideHttpClient} from "@angular/common/http";
+import {AsyncPipe} from "@angular/common";
+import {KeycloakService} from "keycloak-angular";
+
+@Component({
+  selector: 'app-hello-list',
+  standalone: true,
+  imports: [
+    AsyncPipe
+  ],
+  providers: [KeycloakService],
+  templateUrl: './hello-list.component.html',
+  styleUrl: './hello-list.component.css'
+})
+export class HelloListComponent {
+  employees$: Observable<Hello[]>;
+
+  constructor(private http: HttpClient) {
+    this.employees$ = of([]);
+    this.fetchData();
+  }
+
+  fetchData() {
+    this.employees$ = this.http.get<Hello[]>('/backend/hellos');
+  }
+
+
+}

frontend/src/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Lf10StarterNew</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>

frontend/src/main.ts

@@ -0,0 +1,11 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { AppComponent } from './app/app.component';
+
+
+
+bootstrapApplication(AppComponent, appConfig)
+  .catch((err) => console.error(err));
+
+
+

frontend/src/proxy.conf.json

@@ -0,0 +1,11 @@
+{
+  "/backend": {
+    "target": "http://localhost:8080/",
+    "secure": false,
+    "logLevel": "debug",
+    "pathRewrite": {
+      "^/backend": ""
+    },
+    "changeOrigin": true
+  }
+}

frontend/src/styles.css

@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */