Implement React GUI

.gitignore

@@ -127,3 +127,5 @@ dmypy.json
 
 # Pyre type checker
 .pyre/
+node_modules/
+package-lock.json

docker-compose.yml

@@ -1,7 +1,7 @@
 version: "3.9"
 services:
-  app:
-    hostname: app
+  api:
+    hostname: api
     build: .
     restart: unless-stopped
     volumes:
@@ -14,13 +14,32 @@ services:
     environment:
        IVT_OPENID_DISCOVERY_URL: 'http://keycloak:8080/auth/realms/master/.well-known/openid-configuration'
        IVT_OPENID_DISCOVERY_EXTERNAL_URL: 'http://keycloak.localhost/auth/realms/master/.well-known/openid-configuration'
-      #  IVT_ENABLE_AUTH: 'true'
+       IVT_ENABLE_AUTH: 'true'
+    labels:
+      - "traefik.enable=true"
+      - "traefik.http.routers.api.rule=Host(`api.localhost`)"
+      - "traefik.http.routers.api.entrypoints=web"
+      - "traefik.docker.network=web"
+      - "traefik.http.services.api.loadbalancer.server.port=8090"
+    ports:
+      - "8090:8090"
+
+  app:
+    hostname: app
+    build: 
+      dockerfile: Dockerfile
+      context: web
+    restart: unless-stopped
+    networks:
+      - web
+    depends_on:
+      - "api"
     labels:
       - "traefik.enable=true"
-      - "traefik.http.routers.invitease.rule=Host(`invitease.localhost`)"
-      - "traefik.http.routers.invitease.entrypoints=web"
+      - "traefik.http.routers.app.rule=Host(`app.localhost`)"
+      - "traefik.http.routers.app.entrypoints=web"
       - "traefik.docker.network=web"
-      - "traefik.http.services.invitease.loadbalancer.server.port=8090"
+      - "traefik.http.services.app.loadbalancer.server.port=80"    
 
   dbmanager:
     image: dpage/pgadmin4
@@ -60,15 +79,17 @@ services:
       - pg_data:/var/lib/postgresql/data
 
   keycloak:
-    image: jboss/keycloak:latest
     hostname: keycloak
     restart: unless-stopped
     networks:
       - web
     depends_on:
       - db
-    volumes:
-      - ./init/keycloak:/opt/jboss/startup-scripts
+    build: 
+      dockerfile: Dockerfile
+      context: keycloak
+    ports:
+      - "8081:8080"
     environment:
       - DB_VENDOR=POSTGRES
       - DB_ADDR=db
@@ -97,6 +118,7 @@ services:
       - "--entrypoints.web.address=:80"
     depends_on:
       - "app"
+      - "dbmanager"
     restart: unless-stopped
     labels:
       - "traefik.enable=true"

keycloak/Dockerfile

@@ -0,0 +1,4 @@
+FROM jboss/keycloak:latest
+
+ADD kc-seed.sh /opt/jboss/startup-scripts/kc-seed.sh
+ADD standalone.xml /opt/jboss/keycloak/standalone/configuration/standalone.xml

web/Dockerfile

@@ -0,0 +1,17 @@
+FROM node:18-bullseye-slim as builder
+
+RUN mkdir /source
+
+WORKDIR /source
+
+ADD src/ /source/src
+ADD public/ /source/public
+ADD package.json tsconfig.json /source/
+
+RUN npm install \
+  && npm run build
+
+FROM nginx:1.21.6-alpine
+
+ADD nginx.conf /etc/nginx/nginx.conf
+COPY --from=builder /source/build /var/www/

web/nginx.conf

@@ -0,0 +1,19 @@
+worker_processes  5;  ## Default: 1
+
+events {
+    worker_connections  4096;  ## Default: 1024
+}
+
+http {
+    server {
+    listen 80;
+    listen [::]:80;
+
+    root /var/www/;
+    index index.html index.htm;
+
+    location / {
+            try_files $uri $uri/ /index.html;
+        }
+    }
+}

web/package.json

@@ -0,0 +1,37 @@
+{
+    "name": "invitease",
+    "version": "0.1.0",
+    "private": true,
+    "dependencies": {
+        "oidc-client-ts": "^2.0.3",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0",
+        "react-router-dom": "^6.3.0",
+        "react-scripts": "^5.0.0"
+    },
+    "scripts": {
+        "start": "react-scripts --max_old_space_size=8128 start",
+        "build": "react-scripts build",
+        "test": "react-scripts test",
+        "eject": "react-scripts eject"
+    },
+    "eslintConfig": {
+        "extends": "react-app"
+    },
+    "browserslist": {
+        "production": [
+            ">0.2%",
+            "not dead",
+            "not op_mini all"
+        ],
+        "development": [
+            "last 1 chrome version",
+            "last 1 firefox version",
+            "last 1 safari version"
+        ]
+    },
+    "devDependencies": {
+        "@types/react": "^18.0.6",
+        "@types/react-dom": "^18.0.2"
+    }
+}

web/public/config.js

@@ -0,0 +1,9 @@
+config = {
+    'serverUrl': 'http://invitease.localhost/',
+    'applicationRoot':'http://localhost:3000/',
+    'authentication': {
+        'clientId': 'invitease',
+        'serviceUrl': 'http://keycloak.localhost/auth/realms/master/',
+        'scope': 'openid profile email phone'
+    }
+}

web/public/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <script src="./config.js"></script>
+</head>
+
+<body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+</body>
+
+</html>

web/src/app.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { Routes, Route, Navigate } from "react-router-dom";
+import Example from './components/example';
+import SecureRoute from './components/secureRoute';
+import { SigninCallback } from "./components/signinCallback";
+
+function App() {
+
+  return (
+    <Routes>
+      <Route path='/' element={<Navigate to='index' />}>
+      </Route>
+      <Route path="signin-callback" element={<SigninCallback />} />
+      <Route path='index' element={<SecureRoute><Example /></SecureRoute>} />
+    </Routes>
+  );
+}
+
+export default App;

web/src/components/example.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { User } from 'oidc-client-ts';
+import { AuthenticationService } from '../services/authenticationService';
+import { SettingsService } from '../services/settingsService';
+
+export default function Example() {
+    let authSettings = new SettingsService().getAuthenticationSettings();
+    let authService = new AuthenticationService(authSettings);
+    const [user, setUser] = useState<User | undefined>();
+    React.useEffect(() => {
+        if (!user) {
+            authService.getUser()
+                .then(user => setUser(user));
+        }
+    }, [user]);
+    return (<pre>
+        {JSON.stringify(user, null, 2)}
+    </pre>);
+}

web/src/components/secureRoute.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { useEffect } from 'react';
+import { AuthenticationService } from '../services/authenticationService';
+import { SettingsService } from '../services/settingsService';
+
+export default function SecureRoute(props: any) {
+    let authSettings = new SettingsService().getAuthenticationSettings();
+    let authService = new AuthenticationService(authSettings);
+    useEffect(() => {
+        authService.getUser().then(user => {
+            if (!user) {
+                authService.login();
+            } 
+        });
+    });
+    return (<>{props.children}</>);
+}

web/src/components/signinCallback.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { AuthenticationService } from '../services/authenticationService';
+import { SettingsService } from '../services/settingsService';
+
+export function SigninCallback() {
+    let authSettings = new SettingsService().getAuthenticationSettings();
+    let authService = new AuthenticationService(authSettings);
+    React.useEffect(() => {
+        authService.handleSignin()
+            .then(user => (window as any).location.href = authSettings.applicationRoot + "index");
+    });
+    return (<></>);
+}

web/src/index.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import App from './app';
+import { BrowserRouter } from "react-router-dom";
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+    <React.StrictMode>
+        <BrowserRouter>
+            <App />
+        </BrowserRouter>
+    </React.StrictMode>
+);

web/src/services/authenticationService.ts

@@ -0,0 +1,40 @@
+import { Log, User, UserManager } from 'oidc-client-ts';
+import { AuthenticationSettings } from '../settings/AuthenticationSettings';
+
+export class AuthenticationService {
+    public userManager: UserManager;
+
+    constructor(settings: AuthenticationSettings) {
+        const oidcSettings = {
+            authority: settings.serviceUrl,
+            client_id: settings.clientId,
+            redirect_uri: settings.applicationRoot + `signin-callback`,
+            response_type: 'code',
+            scope: settings.scope
+        };
+        this.userManager = new UserManager(oidcSettings);
+
+        Log.setLogger(console);
+        Log.setLevel(Log.INFO);
+    }
+
+    public getUser(): Promise<User | null> {
+        return this.userManager.getUser();
+    }
+
+    public login(): Promise<void> {
+        return this.userManager.signinRedirect();
+    }
+
+    public renewToken(): Promise<User> {
+        return this.userManager.signinSilent();
+    }
+
+    public logout(): Promise<void> {
+        return this.userManager.signoutRedirect();
+    }
+
+    public async handleSignin(): Promise<void> {
+        await this.userManager.signinRedirectCallback();
+    }
+}

web/src/services/settingsService.ts

@@ -0,0 +1,14 @@
+import { AuthenticationSettings } from '../settings/AuthenticationSettings';
+
+export class SettingsService {
+    public getAuthenticationSettings(): AuthenticationSettings {
+        let settings = new AuthenticationSettings();
+
+        settings.clientId = (window as any).config.authentication.clientId;
+        settings.serviceUrl = (window as any).config.authentication.serviceUrl;
+        settings.scope = (window as any).config.authentication.clientScope;
+        settings.applicationRoot = (window as any).config.applicationRoot;
+
+        return settings;
+    }
+}

web/src/settings/AuthenticationSettings.ts

@@ -0,0 +1,6 @@
+export class AuthenticationSettings {
+    clientId: string
+    serviceUrl: string
+    scope: string
+    applicationRoot: string
+}

web/tsconfig.json

@@ -0,0 +1,16 @@
+{
+    "compilerOptions": {
+        "noImplicitAny": true,
+        "removeComments": true,
+        "declaration": true,
+        "sourceMap": true,
+        "jsx": "react"
+    },
+    "include": [
+        "./src/**/*.tsx",
+        "./src/**/*.ts"
+    ],
+    "exclude": [
+        "node_modules"
+    ]
+}