From e2cd36666279ca36b4869e9606a07e367af5c6b1 Mon Sep 17 00:00:00 2001
From: Armando Bermudez Martinez <armando.bermudez.martinez@desy.de>
Date: Fri, 13 Jun 2025 12:25:46 +0200
Subject: [PATCH 1/2] Add footer for privacyUrl and imrprintUrl

---
 .../_layout/app-footer/_app-footer-theme.scss | 26 +++++++++++++++
 .../app-footer/app-footer.component.html      | 33 +++++++++++++++++++
 .../app-footer/app-footer.component.scss      | 27 +++++++++++++++
 .../app-footer/app-footer.component.spec.ts   | 21 ++++++++++++
 .../app-footer/app-footer.component.ts        | 23 +++++++++++++
 .../app-layout/app-layout.component.html      |  1 +
 src/app/_layout/layout.module.ts              |  2 ++
 src/app/app-config.service.spec.ts            |  2 ++
 src/app/app-config.service.ts                 |  2 ++
 src/styles.scss                               |  2 ++
 10 files changed, 139 insertions(+)
 create mode 100644 src/app/_layout/app-footer/_app-footer-theme.scss
 create mode 100644 src/app/_layout/app-footer/app-footer.component.html
 create mode 100644 src/app/_layout/app-footer/app-footer.component.scss
 create mode 100644 src/app/_layout/app-footer/app-footer.component.spec.ts
 create mode 100644 src/app/_layout/app-footer/app-footer.component.ts

diff --git a/src/app/_layout/app-footer/_app-footer-theme.scss b/src/app/_layout/app-footer/_app-footer-theme.scss
new file mode 100644
index 000000000..f7f4e0a40
--- /dev/null
+++ b/src/app/_layout/app-footer/_app-footer-theme.scss
@@ -0,0 +1,26 @@
+@use "@angular/material" as mat;
+
+@mixin color($theme) {
+  $color-config: map-get($theme, "color");
+  $primary: map-get($color-config, "primary");
+
+  .footer {
+    // Invert colors: background gets contrast color, text gets main color
+    background-color: mat.get-color-from-palette($primary, "default-contrast");
+    color: mat.get-color-from-palette($primary);
+
+    a,
+    .toplink,
+    .footer-copy,
+    mat-icon {
+      color: mat.get-color-from-palette($primary);
+    }
+  }
+}
+
+@mixin theme($theme) {
+  $color-config: mat.get-color-config($theme);
+  @if $color-config != null {
+    @include color($theme);
+  }
+}
diff --git a/src/app/_layout/app-footer/app-footer.component.html b/src/app/_layout/app-footer/app-footer.component.html
new file mode 100644
index 000000000..f66a91b5e
--- /dev/null
+++ b/src/app/_layout/app-footer/app-footer.component.html
@@ -0,0 +1,33 @@
+<div class="footer">
+  <mat-toolbar class="mat-elevation-z1">
+    <span class="spacer"></span>
+
+    <span>
+      <h6>
+        <a
+          class="toplink"
+          href="{{ imprintUrl }}"
+          target="_blank"
+          rel="noopener"
+        >
+          <mat-icon>description</mat-icon>
+          <span class="large-screen-text">Imprint</span>
+        </a>
+      </h6>
+    </span>
+
+    <span>
+      <h6>
+        <a
+          class="toplink"
+          href="{{ privacyUrl }}"
+          target="_blank"
+          rel="noopener"
+        >
+          <mat-icon>lock</mat-icon>
+          <span class="large-screen-text">Privacy</span>
+        </a>
+      </h6>
+    </span>
+  </mat-toolbar>
+</div>
diff --git a/src/app/_layout/app-footer/app-footer.component.scss b/src/app/_layout/app-footer/app-footer.component.scss
new file mode 100644
index 000000000..405a4ad43
--- /dev/null
+++ b/src/app/_layout/app-footer/app-footer.component.scss
@@ -0,0 +1,27 @@
+.footer {
+  // background: white;
+  // width: 100%;
+  // padding: 1rem;
+  // text-align: center;
+
+  background-color: white;
+
+  mat-toolbar {
+    background: white !important;
+    height: 3.5rem;
+
+    .spacer {
+      flex: 1 1 auto;
+    }
+
+    .toplink {
+      padding: 0.5rem 1rem;
+      font: bold;
+      font-size: 11pt;
+
+      mat-icon {
+        vertical-align: middle;
+      }
+    }
+  }
+}
diff --git a/src/app/_layout/app-footer/app-footer.component.spec.ts b/src/app/_layout/app-footer/app-footer.component.spec.ts
new file mode 100644
index 000000000..c5dc558d4
--- /dev/null
+++ b/src/app/_layout/app-footer/app-footer.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AppFooterComponent } from './app-footer.component';
+
+describe('AppFooterComponent', () => {
+  let component: AppFooterComponent;
+  let fixture: ComponentFixture<AppFooterComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [AppFooterComponent]
+    });
+    fixture = TestBed.createComponent(AppFooterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/_layout/app-footer/app-footer.component.ts b/src/app/_layout/app-footer/app-footer.component.ts
new file mode 100644
index 000000000..e58d05b38
--- /dev/null
+++ b/src/app/_layout/app-footer/app-footer.component.ts
@@ -0,0 +1,23 @@
+import { Component, OnInit } from "@angular/core";
+import { AppConfigService } from "app-config.service";
+
+@Component({
+  selector: "app-app-footer",
+  templateUrl: "./app-footer.component.html",
+  styleUrls: ["./app-footer.component.scss"],
+})
+export class AppFooterComponent implements OnInit {
+  appConfig = this.appConfigService.getConfig();
+
+  imprintUrl = "";
+  privacyUrl = "";
+
+  constructor(public appConfigService: AppConfigService) {}
+
+  ngOnInit() {
+    this.imprintUrl =
+      this.appConfig.imprintUrl || "https://example.com/imprint";
+    this.privacyUrl =
+      this.appConfig.privacyUrl || "https://example.com/privacy";
+  }
+}
diff --git a/src/app/_layout/app-layout/app-layout.component.html b/src/app/_layout/app-layout/app-layout.component.html
index 22e872007..343229592 100644
--- a/src/app/_layout/app-layout/app-layout.component.html
+++ b/src/app/_layout/app-layout/app-layout.component.html
@@ -3,4 +3,5 @@
   <div class="main">
     <router-outlet></router-outlet>
   </div>
+  <app-app-footer></app-app-footer>
 </div>
diff --git a/src/app/_layout/layout.module.ts b/src/app/_layout/layout.module.ts
index d9ed0af58..0c8ac1878 100644
--- a/src/app/_layout/layout.module.ts
+++ b/src/app/_layout/layout.module.ts
@@ -12,12 +12,14 @@ import { AppMainLayoutComponent } from "./app-main-layout/app-main-layout.compon
 import { BatchCardModule } from "datasets/batch-card/batch-card.module";
 import { BreadcrumbModule } from "shared/modules/breadcrumb/breadcrumb.module";
 import { UsersModule } from "../users/users.module";
+import { AppFooterComponent } from './app-footer/app-footer.component';
 
 @NgModule({
   declarations: [
     AppLayoutComponent,
     AppHeaderComponent,
     AppMainLayoutComponent,
+    AppFooterComponent,
   ],
   imports: [
     CommonModule,
diff --git a/src/app/app-config.service.spec.ts b/src/app/app-config.service.spec.ts
index 8ca39f261..5325d16d4 100644
--- a/src/app/app-config.service.spec.ts
+++ b/src/app/app-config.service.spec.ts
@@ -55,6 +55,8 @@ const appConfig: AppConfigInterface = {
   multipleDownloadAction: "http://localhost:3012/zip",
   multipleDownloadEnabled: true,
   multipleDownloadUseAuthToken: false,
+  imprintUrl = "https://example.com/imprint",
+  privacyUrl = "https://example.com/privacy",
   oAuth2Endpoints: [],
   policiesEnabled: true,
   retrieveDestinations: [],
diff --git a/src/app/app-config.service.ts b/src/app/app-config.service.ts
index e20f86898..0eda705d3 100644
--- a/src/app/app-config.service.ts
+++ b/src/app/app-config.service.ts
@@ -143,6 +143,8 @@ export interface AppConfigInterface {
   mainMenu?: MainMenuConfiguration;
   supportEmail?: string;
   checkBoxFilterClickTrigger?: boolean;
+  imprintUrl?: string;
+  privacyUrl?: string;
 }
 
 function isMainPageConfiguration(obj: any): obj is MainPageConfiguration {
diff --git a/src/styles.scss b/src/styles.scss
index b21134000..32a5b5cd2 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -4,6 +4,7 @@
 @use "@angular/material" as mat;
 @use "./app/app-theme" as app;
 @use "./app/_layout/app-header/app-header-theme" as app-header;
+@use "./app/_layout/app-footer/app-footer-theme" as app-footer;
 @use "./app/datasets/batch-view/batch-view-theme" as batch-view;
 @use "./app/datasets/dashboard/dashboard-theme" as dashboard;
 @use "./app/datasets/datafiles/datafiles-theme" as datafiles;
@@ -229,6 +230,7 @@ $theme: map.merge(
 @include mat.all-component-themes($theme);
 @include app.theme($theme);
 @include app-header.theme($theme);
+@include app-footer.theme($theme);
 @include batch-view.theme($theme);
 @include dashboard.theme($theme);
 @include datafiles.theme($theme);

From 731e9e0c23be0e59bccc319efab8ad33a07a3ebc Mon Sep 17 00:00:00 2001
From: Johannes Reppin <johannes.reppin@desy.de>
Date: Tue, 24 Jun 2025 08:29:24 +0200
Subject: [PATCH 2/2] changes for angular 19

---
 .../_layout/app-footer/_app-footer-theme.scss | 26 +++++++++++++------
 .../app-footer/app-footer.component.ts        |  3 ++-
 src/app/_layout/layout.module.ts              |  2 +-
 3 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/src/app/_layout/app-footer/_app-footer-theme.scss b/src/app/_layout/app-footer/_app-footer-theme.scss
index f7f4e0a40..bde2fc9ee 100644
--- a/src/app/_layout/app-footer/_app-footer-theme.scss
+++ b/src/app/_layout/app-footer/_app-footer-theme.scss
@@ -1,26 +1,36 @@
 @use "@angular/material" as mat;
+@use "sass:map";
 
 @mixin color($theme) {
-  $color-config: map-get($theme, "color");
-  $primary: map-get($color-config, "primary");
+  $color-config: map.get($theme, "color");
+  $primary: map.get($color-config, "primary");
 
   .footer {
-    // Invert colors: background gets contrast color, text gets main color
-    background-color: mat.get-color-from-palette($primary, "default-contrast");
-    color: mat.get-color-from-palette($primary);
+    background-color: mat.m2-get-color-from-palette($primary, "default-contrast");
+    color: mat.m2-get-color-from-palette($primary);
 
     a,
     .toplink,
     .footer-copy,
     mat-icon {
-      color: mat.get-color-from-palette($primary);
+      color: mat.m2-get-color-from-palette($primary);
+
+    }
+
+    mat-toolbar {
+      background-color: mat.m2-get-color-from-palette($primary, "darker");
+    }
+
+    a {
+      color: mat.m2-get-color-from-palette($primary, "default-contrast");
     }
   }
 }
 
 @mixin theme($theme) {
-  $color-config: mat.get-color-config($theme);
-  @if $color-config != null {
+
+  // Check if the 'color' key exists in the theme map
+  @if map.has-key($theme, "color") {
     @include color($theme);
   }
 }
diff --git a/src/app/_layout/app-footer/app-footer.component.ts b/src/app/_layout/app-footer/app-footer.component.ts
index e58d05b38..b95f940a0 100644
--- a/src/app/_layout/app-footer/app-footer.component.ts
+++ b/src/app/_layout/app-footer/app-footer.component.ts
@@ -5,6 +5,7 @@ import { AppConfigService } from "app-config.service";
   selector: "app-app-footer",
   templateUrl: "./app-footer.component.html",
   styleUrls: ["./app-footer.component.scss"],
+  standalone: false,
 })
 export class AppFooterComponent implements OnInit {
   appConfig = this.appConfigService.getConfig();
@@ -12,7 +13,7 @@ export class AppFooterComponent implements OnInit {
   imprintUrl = "";
   privacyUrl = "";
 
-  constructor(public appConfigService: AppConfigService) {}
+  constructor(public appConfigService: AppConfigService) { }
 
   ngOnInit() {
     this.imprintUrl =
diff --git a/src/app/_layout/layout.module.ts b/src/app/_layout/layout.module.ts
index 0c8ac1878..a3f6a570f 100644
--- a/src/app/_layout/layout.module.ts
+++ b/src/app/_layout/layout.module.ts
@@ -35,4 +35,4 @@ import { AppFooterComponent } from './app-footer/app-footer.component';
   ],
   exports: [],
 })
-export class LayoutModule {}
+export class LayoutModule { }