RED-6713: fix headings & dont remove tenant on logout

src/lib/filtering/filter-card/filter-card.component.html

@@ -61,7 +61,7 @@
 
 <!--TODO: move to separate component-->
 <ng-template #defaultFilterTemplate let-atLeastOneIsExpandable="atLeastOneIsExpandable" let-filter="filter" let-filterGroup="filterGroup">
-    <div (click)="toggleFilterExpanded(filter)" class="mat-menu-item flex" stopPropagation>
+    <div (click)="toggleFilterExpanded(filter)" class="mat-mdc-menu-item flex" stopPropagation>
         <div *ngIf="filter.children?.length > 0" class="arrow-wrapper">
             <mat-icon *ngIf="filter.expanded" color="accent" svgIcon="iqser:arrow-down"></mat-icon>
             <mat-icon *ngIf="!filter.expanded" color="accent" svgIcon="iqser:arrow-right"></mat-icon>
@@ -87,7 +87,7 @@
     </div>
 
     <div *ngIf="filter.children?.length && filter.expanded">
-        <div *ngFor="let child of filter.children" class="padding-left mat-menu-item" stopPropagation>
+        <div *ngFor="let child of filter.children" class="padding-left mat-mdc-menu-item" stopPropagation>
             <mat-checkbox (click)="filterCheckboxClicked(child, filterGroup, filter)" [checked]="child.checked" stopPropagation>
                 <ng-container
                     [ngTemplateOutletContext]="{ filter: child }"

src/lib/tenants/services/tenants.service.ts

@@ -179,6 +179,10 @@ export class TenantsService {
         this.#logger.info('[TENANTS] Stored tenants at logout: ', storedTenants);
     }
 
+    has(tenantId: string) {
+        return !!this.tenants()?.some(t => t.tenantId === tenantId);
+    }
+
     #setActiveTenantId(tenantId: string) {
         this.#logger.info('[TENANTS] Set current tenant id: ', tenantId);
         this.#activeTenantId.set(tenantId);

src/lib/tenants/tenant-select/tenant-select.component.html

@@ -1,4 +1,4 @@
-<div class="tenant-section">
+<div class="tenant-section flex-column">
     <a class="logo">
         <div class="actions">
             <iqser-logo icon="red:logo"></iqser-logo>
@@ -8,18 +8,22 @@
 
     <iqser-spacer [height]="100"></iqser-spacer>
 
+    <div *ngIf="isLoggedOut" class="heading-xl" translate="tenant-resolve.header.youre-logged-out"></div>
+
+    <iqser-spacer [height]="75"></iqser-spacer>
+
     <div *ngIf="storedTenants.length" class="pb-30 subheading" translate="tenant-resolve.header.sign-in-previous-domain"></div>
 
-    <div *ngIf="storedTenants.length" style="display: flex; flex-direction: column">
+    <div *ngIf="storedTenants.length">
         <div
             *ngFor="let stored of storedTenants"
             [queryParams]="{ username: stored.email }"
             [routerLink]="[stored.tenant.tenantId]"
-            class="pointer mat-elevation-z2 card stored-tenant-card mt-10"
+            class="d-flex pointer mat-elevation-z2 card stored-tenant-card mt-10"
         >
             <iqser-logo class="card-icon" icon="red:logo" mat-card-image></iqser-logo>
 
-            <div class="card-content">
+            <div class="card-content flex-column">
                 <span class="heading">{{ stored.tenant.displayName }}</span>
                 <span>{{ stored.email }}</span>
             </div>
@@ -35,21 +39,15 @@
         <div class="pb-30 subheading" translate="tenant-resolve.header.join-another-domain"></div>
     </ng-container>
 
-    <div class="mat-elevation-z16 card input-card">
-        <span class="heading url">{{ url }}</span>
+    <form (submit)="updateTenantSelection()" [formGroup]="form" class="mat-elevation-z16 card input-card d-flex">
+        <mat-form-field class="iqser-input-group w-full ml-20">
+            <input [placeholder]="'tenant-resolve.input-placeholder' | translate" formControlName="tenantId" matInput />
+        </mat-form-field>
 
-        <form (submit)="updateTenantSelection()" [formGroup]="form" class="w-full">
-            <div class="iqser-input-group required w-full">
-                <mat-form-field>
-                    <input [placeholder]="'tenant-resolve.input-placeholder' | translate" formControlName="tenantId" matInput />
-                </mat-form-field>
-            </div>
-
-            <button class="card-icon upside-down" mat-icon-button type="submit">
-                <mat-icon svgIcon="iqser:expand"></mat-icon>
-            </button>
-        </form>
-    </div>
+        <button class="card-icon upside-down" mat-icon-button type="submit">
+            <mat-icon svgIcon="iqser:expand"></mat-icon>
+        </button>
+    </form>
 
     <iqser-spacer [height]="50"></iqser-spacer>
     <div [innerHTML]="'tenant-resolve.contact-administrator' | translate"></div>

src/lib/tenants/tenant-select/tenant-select.component.scss

@@ -1,65 +1,61 @@
-.tenant-section {
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    width: 100vw;
-    height: 100vh;
+.d-flex {
+  display: flex;
+}
 
-    margin-top: 32px;
+.flex-column {
+  @extend .d-flex;
+  flex-direction: column;
+}
+
+.tenant-section {
+  align-items: center;
+  width: 100vw;
+  height: 100vh;
+
+  margin-top: 32px;
 }
 
 .actions {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
+  align-items: center;
+  justify-content: flex-end;
 }
 
 .stored-tenant-card {
-    width: 450px;
-    height: 90px;
+  width: 450px;
+  height: 90px;
 }
 
 .card {
-    display: flex;
-    align-items: center;
-    border-radius: 10px;
+  align-items: center;
+  border-radius: 10px;
 }
 
 .card-icon {
-    margin-right: 20px;
-    margin-left: 20px;
+  margin-right: 20px;
+  margin-left: 20px;
 }
 
 .upside-down {
-    transform: rotate(180deg);
+  transform: rotate(180deg);
 }
 
 .card-content {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
+  flex-grow: 1;
 }
 
 .pb-30 {
-    padding-bottom: 30px;
+  padding-bottom: 30px;
 }
 
 .input-card {
-    width: 600px;
-    height: 65px;
+  width: 600px;
+  height: 65px;
 }
 
-.url {
-    margin-left: 20px;
-    margin-right: 10px;
-}
-
-form {
-    display: flex;
-    align-items: center;
-    flex-grow: 1;
+.ml-20 {
+  margin-left: 20px;
 }
 
 .subheading {
-    font-size: 17px;
+  font-size: 17px;
 }

src/lib/tenants/tenant-select/tenant-select.component.ts

@@ -1,38 +1,53 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { Component, inject, Input } from '@angular/core';
 import { Router } from '@angular/router';
 import { FormBuilder, Validators } from '@angular/forms';
 import { TenantsService } from '../services';
-import { IconButtonTypes } from '../../buttons';
 import { LoadingService } from '../../loading';
 import { Title } from '@angular/platform-browser';
-import { getConfig } from '../../services';
-import { BASE_HREF } from '../../utils';
+import { Toaster } from '../../services';
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 
 @Component({
     templateUrl: './tenant-select.component.html',
     styleUrls: ['./tenant-select.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TenantSelectComponent {
+    @Input() isLoggedOut = false;
+
     readonly loadingService = inject(LoadingService);
-    readonly iconButtonTypes = IconButtonTypes;
     readonly form = inject(FormBuilder).group({
         // eslint-disable-next-line @typescript-eslint/unbound-method
         tenantId: ['', Validators.required],
     });
-    readonly url = getConfig().OAUTH_URL.replace('https://', '').replace('/auth', '') + inject(BASE_HREF) + '/';
     protected readonly _tenantsService = inject(TenantsService);
     protected readonly storedTenants = this._tenantsService.getStoredTenants();
     protected readonly titleService = inject(Title);
+    protected readonly toaster = inject(Toaster);
     readonly #router = inject(Router);
 
     updateTenantSelection() {
-        const tenant = this.form.controls.tenantId.value;
-        if (!tenant) {
+        const tenantId = this.form.controls.tenantId.value;
+        if (!tenantId) {
             throw new Error('No tenant selected!');
         }
 
+        if (!this._tenantsService.has(tenantId)) {
+            this.toaster.error(_('tenant-resolve.tenant-does-not-exist'));
+            return;
+        }
+
         this.loadingService.start();
-        return this.#router.navigate([tenant]);
+
+        const queryParams = this.#getQueryParams(tenantId);
+        return this.#router.navigate([tenantId], { queryParams });
+    }
+
+    #getQueryParams(tenantId: string) {
+        const existingStored = this.storedTenants.find(s => s.tenant.tenantId === tenantId);
+        if (existingStored) {
+            return { username: existingStored.email };
+        }
+
+        return {};
     }
 }

src/lib/users/services/iqser-user.service.ts

@@ -16,7 +16,7 @@ import { IqserUser } from '../iqser-user.model';
 import { IqserPermissionsService, IqserRolesService } from '../../permissions';
 import { HttpErrorResponse, HttpStatusCode } from '@angular/common/http';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { KeycloakStatusService, TenantsService } from '../../tenants';
+import { KeycloakStatusService } from '../../tenants';
 
 @Injectable()
 export abstract class IqserUserService<
@@ -35,7 +35,6 @@ export abstract class IqserUserService<
     protected readonly _keycloakStatusService = inject(KeycloakStatusService);
     protected readonly _permissionsService = inject(IqserPermissionsService, { optional: true });
     protected readonly _rolesService = inject(IqserRolesService, { optional: true });
-    protected readonly _tenantsService = inject(TenantsService);
     protected readonly _baseHref = inject(BASE_HREF);
 
     constructor() {
@@ -60,10 +59,10 @@ export abstract class IqserUserService<
 
     async logout() {
         try {
-            this._tenantsService.removeStored(this.currentUser?.email ?? '');
             await this._keycloakService.loadUserProfile(true);
             await this._cacheApiService.wipeCaches();
-            await this._keycloakService.logout(window.location.origin + this._baseHref);
+            const redirectUri = window.location.origin + this._baseHref + '/?isLoggedOut=true';
+            await this._keycloakService.logout(redirectUri);
         } catch (e) {
             console.log('Logout failed: ', e);
             await this.redirectToLogin();