From 7f520507a042799bc1f6ce507b35bb7fa5edd123 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20B=C3=B6hlke?= <ab@bcoding.de>
Date: Wed, 9 Oct 2024 15:08:05 +0200
Subject: [PATCH] Use client login mask as keycloak login theme

---
 .../openslides-main/keycloak-login.ts         | 14 +++
 .../openslides-main.component.ts              | 10 ++-
 .../account-button.component.ts               |  1 +
 .../site/pages/login/login-routing.module.ts  |  8 ++
 .../login-mask/login-mask.component.html      | 22 +++--
 .../login-mask/login-mask.component.ts        | 86 +++++++++++++++----
 .../pages/login-mask/login-mask.module.ts     |  5 +-
 client/src/app/site/services/auth.service.ts  |  1 +
 .../services/openslides-router.service.ts     |  1 +
 .../app/site/services/openslides.service.ts   |  4 -
 client/src/app/site/site-routing.module.ts    |  2 +-
 11 files changed, 117 insertions(+), 37 deletions(-)
 create mode 100644 client/src/app/openslides-main-module/components/openslides-main/keycloak-login.ts

diff --git a/client/src/app/openslides-main-module/components/openslides-main/keycloak-login.ts b/client/src/app/openslides-main-module/components/openslides-main/keycloak-login.ts
new file mode 100644
index 0000000000..e5c7ab29a1
--- /dev/null
+++ b/client/src/app/openslides-main-module/components/openslides-main/keycloak-login.ts
@@ -0,0 +1,14 @@
+export type KeycloakLoginConfig = {
+    bootAsKeycloakPage: boolean;
+    jumpToRoute: string;
+    loginAction: string;
+    fieldErrors: {
+        password: string;
+        username: string;
+    };
+};
+
+export function getKeycloakLoginConfig(): KeycloakLoginConfig {
+    // @ts-expect-error bootAsKeycloakPage is a global variable
+    return window.keycloakLoginConfig ? (window.keycloakLoginConfig as KeycloakLoginConfig) : null;
+}
diff --git a/client/src/app/openslides-main-module/components/openslides-main/openslides-main.component.ts b/client/src/app/openslides-main-module/components/openslides-main/openslides-main.component.ts
index d4217ada8b..338959031e 100644
--- a/client/src/app/openslides-main-module/components/openslides-main/openslides-main.component.ts
+++ b/client/src/app/openslides-main-module/components/openslides-main/openslides-main.component.ts
@@ -19,8 +19,14 @@ import { OpenSlidesService } from 'src/app/site/services/openslides.service';
 import { OpenSlidesStatusService } from 'src/app/site/services/openslides-status.service';
 import { ViewModelStoreService } from 'src/app/site/services/view-model-store.service';
 
+import { getKeycloakLoginConfig } from './keycloak-login';
+
 const CURRENT_LANGUAGE_STORAGE_KEY = `currentLanguage`;
 
+function bootAsKeycloakPage(): boolean {
+    return getKeycloakLoginConfig()?.bootAsKeycloakPage || false;
+}
+
 @Component({
     selector: `os-root`,
     templateUrl: `./openslides-main.component.html`,
@@ -47,7 +53,9 @@ export class OpenSlidesMainComponent implements OnInit {
         private modelStore: ViewModelStoreService,
         private authService: AuthService
     ) {
-        authService.startOidcWorkflow();
+        if (!bootAsKeycloakPage()) {
+            authService.startOidcWorkflow();
+        }
 
         overloadJsFunctions();
         this.addDebugFunctions();
diff --git a/client/src/app/site/modules/global-headbar/components/account-button/account-button.component.ts b/client/src/app/site/modules/global-headbar/components/account-button/account-button.component.ts
index caf54e5f22..79c5bb5919 100644
--- a/client/src/app/site/modules/global-headbar/components/account-button/account-button.component.ts
+++ b/client/src/app/site/modules/global-headbar/components/account-button/account-button.component.ts
@@ -135,6 +135,7 @@ export class AccountButtonComponent extends BaseUiComponent implements OnInit {
     }
 
     public async login(): Promise<void> {
+        debugger;
         this.router.navigate([`/`, this.activeMeetingId, `login`]);
     }
 
diff --git a/client/src/app/site/pages/login/login-routing.module.ts b/client/src/app/site/pages/login/login-routing.module.ts
index 96857656a7..8c6da07303 100644
--- a/client/src/app/site/pages/login/login-routing.module.ts
+++ b/client/src/app/site/pages/login/login-routing.module.ts
@@ -8,6 +8,14 @@ const routes: Routes = [
         path: ``,
         component: LoginWrapperComponent,
         children: [
+            {
+                path: `realms/:realm/protocol/openid-connect/auth`,
+                loadChildren: () => import(`./pages/login-mask/login-mask.module`).then(m => m.LoginMaskModule)
+            },
+            {
+                path: `realms/:realm/login-actions/authenticate`,
+                loadChildren: () => import(`./pages/login-mask/login-mask.module`).then(m => m.LoginMaskModule)
+            },
             {
                 path: `legalnotice`,
                 loadChildren: () => import(`./pages/legal-notice/legal-notice.module`).then(m => m.LegalNoticeModule)
diff --git a/client/src/app/site/pages/login/pages/login-mask/components/login-mask/login-mask.component.html b/client/src/app/site/pages/login/pages/login-mask/components/login-mask/login-mask.component.html
index aa9f04cc68..a0a4c2bec8 100644
--- a/client/src/app/site/pages/login/pages/login-mask/components/login-mask/login-mask.component.html
+++ b/client/src/app/site/pages/login/pages/login-mask/components/login-mask/login-mask.component.html
@@ -29,18 +29,6 @@ <h1>
     }
     @if (samlEnabled && !loading) {
         <div class="login-container">
-            @if (samlEnabled) {
-                <button
-                    class="login-button"
-                    color="primary"
-                    mat-raised-button
-                    osAutofocus
-                    type="button"
-                    (click)="samlLogin()"
-                >
-                    {{ samlLoginButtonText || 'SAML Login' | translate }}
-                </button>
-            }
             <br />
             @if (guestsEnabled) {
                 <button class="login-button" mat-stroked-button type="button" (click)="guestLogin()">
@@ -74,6 +62,11 @@ <h1>
         <mat-form-field>
             <mat-label>{{ 'Username' | translate }}</mat-label>
             <input data-cy="loginUsernameInput" formControlName="username" matInput osAutofocus required />
+            @if (hasUsernameError()) {
+                <mat-error>
+                    {{ loginForm.get('username')?.errors?.['customError'] }}
+                </mat-error>
+            }
         </mat-form-field>
         <br />
         <mat-form-field>
@@ -88,6 +81,11 @@ <h1>
             <mat-icon color="primary" matSuffix (click)="hide = !hide">
                 {{ hide ? 'visibility_off' : 'visibility_on' }}
             </mat-icon>
+            @if (hasPasswordError()) {
+                <mat-error>
+                    {{ loginForm.get('password')?.errors?.['customError'] }}
+                </mat-error>
+            }
         </mat-form-field>
         <mat-error>{{ loginErrorMsg | translate }}</mat-error>
 
diff --git a/client/src/app/site/pages/login/pages/login-mask/components/login-mask/login-mask.component.ts b/client/src/app/site/pages/login/pages/login-mask/components/login-mask/login-mask.component.ts
index 947a4af760..984aebea41 100644
--- a/client/src/app/site/pages/login/pages/login-mask/components/login-mask/login-mask.component.ts
+++ b/client/src/app/site/pages/login/pages/login-mask/components/login-mask/login-mask.component.ts
@@ -10,11 +10,12 @@ import { ViewMeeting } from 'src/app/site/pages/meetings/view-models/view-meetin
 import { OrganizationService } from 'src/app/site/pages/organization/services/organization.service';
 import { OrganizationSettingsService } from 'src/app/site/pages/organization/services/organization-settings.service';
 import { ViewOrganization } from 'src/app/site/pages/organization/view-models/view-organization';
-import { AuthService } from 'src/app/site/services/auth.service';
 import { OpenSlidesRouterService } from 'src/app/site/services/openslides-router.service';
 import { OperatorService } from 'src/app/site/services/operator.service';
 import { ParentErrorStateMatcher } from 'src/app/ui/modules/search-selector/validators';
 
+import { getKeycloakLoginConfig } from '../../../../../../../openslides-main-module/components/openslides-main/keycloak-login';
+import { SpinnerService } from '../../../../../../modules/global-spinner';
 import { BrowserSupportService } from '../../../../services/browser-support.service';
 
 const HTTP_WARNING = _(`Using OpenSlides over HTTP is not supported. Enable HTTPS to continue.`);
@@ -92,18 +93,26 @@ export class LoginMaskComponent extends BaseMeetingComponent implements OnInit,
 
     public constructor(
         protected override translate: TranslateService,
-        private authService: AuthService,
         private operator: OperatorService,
         private route: ActivatedRoute,
         private osRouter: OpenSlidesRouterService,
         private formBuilder: UntypedFormBuilder,
         private orgaService: OrganizationService,
         private orgaSettings: OrganizationSettingsService,
-        private browserSupport: BrowserSupportService // private spinnerService: SpinnerService
+        private browserSupport: BrowserSupportService,
+        private spinnerService: SpinnerService
     ) {
         super();
         // Hide the spinner if the user is at `login-mask`
         this.loginForm = this.createForm();
+        this.loginForm.valueChanges.subscribe(() => {
+            this.clearFieldError();
+        });
+    }
+
+    private clearFieldError(): void {
+        const usernameControl = this.loginForm.get(`username`);
+        usernameControl?.setErrors(null);
     }
 
     /**
@@ -132,10 +141,6 @@ export class LoginMaskComponent extends BaseMeetingComponent implements OnInit,
             }
         });
 
-        if (this.checkBrowser) {
-            this.checkDevice();
-        }
-
         // check if global saml auth is enabled
         this.subscriptions.push(
             this.orgaSettings.getSafe(`saml_enabled`).subscribe(enabled => {
@@ -167,23 +172,68 @@ export class LoginMaskComponent extends BaseMeetingComponent implements OnInit,
         this.isWaitingOnLogin = true;
         this.loginErrorMsg = ``;
         try {
-            // this.spinnerService.show(this.loginMessage, { hideWhenStable: true });
-            const { username, password } = this.formatLoginInputValues(this.loginForm.value);
-            await this.authService.login(username, password);
+            this.spinnerService.show(this.loginMessage, { hideWhenStable: true });
+            const url = getKeycloakLoginConfig()?.loginAction;
+            if (url) {
+                const { username, password } = this.formatLoginInputValues(this.loginForm.value);
+                const formData = new FormData();
+                formData.append(`username`, username);
+                formData.append(`password`, password);
+
+                const response = await fetch(url, {
+                    method: `POST`,
+                    body: formData
+                });
+
+                if (!response.url.startsWith(`https://localhost:8000/idp`)) {
+                    window.location.href = response.url;
+                }
+                const htmlContent = await response.text();
+                const parser = new DOMParser();
+                const doc = parser.parseFromString(htmlContent, `text/html`);
+                const scriptElement = doc.getElementById(`keycloak-config`);
+
+                if (scriptElement) {
+                    const scriptContent = scriptElement.textContent || ``;
+
+                    try {
+                        eval(scriptContent);
+                        const updatedConfig = getKeycloakLoginConfig();
+                        console.log(`Keycloak Config:`, updatedConfig);
+                        if (updatedConfig?.fieldErrors.username) {
+                            const usernameControl = this.loginForm.get(`username`);
+                            usernameControl?.setErrors({ customError: updatedConfig?.fieldErrors.username });
+                            usernameControl?.markAsTouched();
+                        }
+                    } catch (error) {
+                        console.error(`Failed to parse/evaluate script content:`, error);
+                    }
+                } else {
+                    console.error(`Script element with id "keycloak-config" not found`);
+                }
+            }
         } catch (e: any) {
-            this.isWaitingOnLogin = false;
-            // this.spinnerService.hide();
             this.loginErrorMsg = `${this.translate.instant(`Error`)}: ${this.translate.instant(e.message)}`;
+        } finally {
+            this.isWaitingOnLogin = false;
+            this.spinnerService.hide();
         }
     }
 
-    public async guestLogin(): Promise<void> {
-        this.router.navigate([`${this.currentMeetingId}/`]);
+    public formAction(): string {
+        return getKeycloakLoginConfig()?.loginAction;
+    }
+
+    public hasUsernameError(): boolean {
+        return this.loginForm.get(`username`)?.hasError(`customError`);
+    }
+
+    public hasPasswordError(): boolean {
+        return this.loginForm.get(`password`)?.hasError(`customError`);
     }
 
-    public async samlLogin(): Promise<void> {
-        const redirectUrl = await this.authService.startSamlLogin();
-        location.replace(redirectUrl);
+    public async guestLogin(): Promise<void> {
+        this.router.navigate([`${this.currentMeetingId}/`]);
     }
 
     /**
@@ -245,4 +295,6 @@ export class LoginMaskComponent extends BaseMeetingComponent implements OnInit,
             password: [``, [Validators.required, Validators.maxLength(128)]]
         });
     }
+
+    protected readonly console = console;
 }
diff --git a/client/src/app/site/pages/login/pages/login-mask/login-mask.module.ts b/client/src/app/site/pages/login/pages/login-mask/login-mask.module.ts
index d46e129b18..562ba6b324 100644
--- a/client/src/app/site/pages/login/pages/login-mask/login-mask.module.ts
+++ b/client/src/app/site/pages/login/pages/login-mask/login-mask.module.ts
@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { ReactiveFormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatExpansionModule } from '@angular/material/expansion';
@@ -28,7 +28,8 @@ import { LoginMaskRoutingModule } from './login-mask-routing.module';
         SpinnerModule,
         MatExpansionModule,
         ReactiveFormsModule,
-        OpenSlidesTranslationModule.forChild()
+        OpenSlidesTranslationModule.forChild(),
+        FormsModule
     ]
 })
 export class LoginMaskModule {}
diff --git a/client/src/app/site/services/auth.service.ts b/client/src/app/site/services/auth.service.ts
index 0c44fd2a52..3aa9ed7560 100644
--- a/client/src/app/site/services/auth.service.ts
+++ b/client/src/app/site/services/auth.service.ts
@@ -124,6 +124,7 @@ export class AuthService {
                 this.DS.deleteCollections(...this.DS.getCollections());
                 await this.DS.clear();
                 this.lifecycleService.bootup();
+                debugger;
                 this.oauthService.logOut();
             }
         } catch (e) {
diff --git a/client/src/app/site/services/openslides-router.service.ts b/client/src/app/site/services/openslides-router.service.ts
index 089313bfa0..4c6cb63b85 100644
--- a/client/src/app/site/services/openslides-router.service.ts
+++ b/client/src/app/site/services/openslides-router.service.ts
@@ -90,6 +90,7 @@ export class OpenSlidesRouterService {
     }
 
     public navigateToLogin(): void {
+        debugger;
         const url = this.router.getCurrentNavigation()?.extractedUrl.toString() || this.router.routerState.snapshot.url;
 
         // Navigate to login if the user is not already there
diff --git a/client/src/app/site/services/openslides.service.ts b/client/src/app/site/services/openslides.service.ts
index c7bd0ed858..18f43f135c 100644
--- a/client/src/app/site/services/openslides.service.ts
+++ b/client/src/app/site/services/openslides.service.ts
@@ -34,10 +34,6 @@ export class OpenSlidesService {
             return;
         }
 
-        if (!this.authService.isAuthenticated()) {
-            this.osRouter.navigateToLogin();
-        }
-
         this.lifecycleService.reboot();
     }
 }
diff --git a/client/src/app/site/site-routing.module.ts b/client/src/app/site/site-routing.module.ts
index f71c250c0f..2af9da4cf4 100644
--- a/client/src/app/site/site-routing.module.ts
+++ b/client/src/app/site/site-routing.module.ts
@@ -7,7 +7,7 @@ import { SiteWrapperComponent } from './modules/site-wrapper/components/site-wra
 
 const routes: Routes = [
     {
-        path: `login`,
+        path: `idp`,
         loadChildren: () => import(`./pages/login/login.module`).then(m => m.LoginModule)
     },
     {