From e6e84c8637cb5626e9ab91e5f79d5c8f65099a52 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C3=A9ter=20Szrnka?= <szrnka.peter@gmail.com>
Date: Fri, 13 Dec 2024 09:43:20 +0100
Subject: [PATCH] GMS-181 All HTML templates replaced with the reusable
 component

---
 .../announcement-detail.component.html        |  2 +-
 .../announcement-list.component.html          |  2 +-
 .../announcement/announcement-module.ts       | 20 ++++++++++---------
 .../api_testing/api-testing.component.html    |  2 +-
 .../apikey/apikey-detail.component.html       |  2 +-
 .../apikey/apikey-list.component.html         |  2 +-
 .../event/event-list.component.html           |  2 +-
 .../app/components/help/help.component.html   |  2 +-
 .../app/components/help/help.compontent.ts    |  3 ++-
 .../src/app/components/home/home-module.ts    |  2 ++
 .../app/components/home/home.component.html   |  8 +++-----
 .../ip-restriction-detail.component.html      |  2 +-
 .../ip-restriction-list.component.html        |  2 +-
 .../job/job-detail-list.component.html        |  4 ++--
 .../job/job-detail-list.component.ts          |  3 ++-
 .../keystore/keystore-detail.component.html   | 10 +++-------
 .../keystore/keystore-list.component.html     |  2 +-
 .../messages/message-list.component.html      |  2 +-
 .../secret/secret-list.component.html         |  2 +-
 .../components/settings/settings-module.ts    | 10 +++++-----
 .../settings/settings-summary.component.html  |  8 ++------
 .../app/components/setup/setup.component.html | 17 ++++------------
 .../user/user-detail.component.html           |  2 +-
 .../components/user/user-list.component.html  |  4 ++--
 .../src/app/components/user/user-module.ts    | 18 ++++++++---------
 .../app/components/verify/verify-module.ts    |  2 ++
 .../components/verify/verify.component.html   |  2 +-
 27 files changed, 63 insertions(+), 74 deletions(-)

diff --git a/code/gms-frontend/src/app/components/announcement/announcement-detail.component.html b/code/gms-frontend/src/app/components/announcement/announcement-detail.component.html
index e54ad575..44bae576 100644
--- a/code/gms-frontend/src/app/components/announcement/announcement-detail.component.html
+++ b/code/gms-frontend/src/app/components/announcement/announcement-detail.component.html
@@ -3,7 +3,7 @@
   <nav-back [buttonConfig]="[{url:'/announcement/list', label:'navback.back2List', primary : true}]"></nav-back>
 
   @if (error) {
-    <div class="warning"><b>{{ 'messages.error' | translate }}:</b> {{error}}</div>
+    <information-message severity="warning">{{ 'messages.error' | translate }}: {{error}}</information-message>
   }
   @if (!error) {
     <form #form="ngForm">
diff --git a/code/gms-frontend/src/app/components/announcement/announcement-list.component.html b/code/gms-frontend/src/app/components/announcement/announcement-list.component.html
index 355e807b..980d8f9c 100644
--- a/code/gms-frontend/src/app/components/announcement/announcement-list.component.html
+++ b/code/gms-frontend/src/app/components/announcement/announcement-list.component.html
@@ -4,7 +4,7 @@ <h2>{{ 'announcements.title' | translate }}</h2>
   <nav-back [buttonConfig]="[{url:'/announcement/new', label:'navback.create', primary : true}]"></nav-back>
 
   @if (error) {
-    <div class="warning"><b>{{ 'messages.error' | translate }}:</b> {{error}}</div>
+    <information-message severity="warning">{{ 'messages.error' | translate }}: {{error}}</information-message>
   }
   @if (!error) {
     <mat-card class="margin-top">
diff --git a/code/gms-frontend/src/app/components/announcement/announcement-module.ts b/code/gms-frontend/src/app/components/announcement/announcement-module.ts
index 9cccec62..e4276426 100644
--- a/code/gms-frontend/src/app/components/announcement/announcement-module.ts
+++ b/code/gms-frontend/src/app/components/announcement/announcement-module.ts
@@ -13,6 +13,7 @@ import { AnnouncementDetailResolver } from "./resolver/announcement-detail.resol
 import { AnnouncementListResolver } from "./resolver/announcement-list.resolver";
 import { AnnouncementService } from "./service/announcement-service";
 import { TranslatorModule } from "../../common/components/pipes/translator/translator.module";
+import { GmsComponentsModule } from "../../common/components/gms-components-module";
 
 /**
  * @author Peter Szrnka
@@ -21,15 +22,16 @@ import { TranslatorModule } from "../../common/components/pipes/translator/trans
         AnnouncementListComponent, AnnouncementDetailComponent
     ],
     schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [
-        AngularMaterialModule,
-        FormsModule,
-        BrowserModule,
-        AppRoutingModule,
-        MomentPipe,
-        NavBackComponent,
-        NavButtonVisibilityPipe,
-        TranslatorModule
-    ], providers: [
+    AngularMaterialModule,
+    FormsModule,
+    BrowserModule,
+    AppRoutingModule,
+    MomentPipe,
+    NavBackComponent,
+    NavButtonVisibilityPipe,
+    TranslatorModule,
+    GmsComponentsModule
+], providers: [
         AnnouncementService, AnnouncementListResolver, AnnouncementDetailResolver,
         provideHttpClient(withInterceptorsFromDi())
     ] })
diff --git a/code/gms-frontend/src/app/components/api_testing/api-testing.component.html b/code/gms-frontend/src/app/components/api_testing/api-testing.component.html
index 2125af18..99ceea32 100644
--- a/code/gms-frontend/src/app/components/api_testing/api-testing.component.html
+++ b/code/gms-frontend/src/app/components/api_testing/api-testing.component.html
@@ -6,7 +6,7 @@ <h2>{{ 'apitesting.title' | translate }}</h2>
   <form #form="ngForm" novalidate class="form-control">
     <mat-card class="margin-top">
       <mat-card-content>
-        <div class="information">{{ 'apitesting.description' | translate }}</div>
+        <information-message severity="information">{{ 'apitesting.description' | translate }}</information-message>
 
         <p>
           <mat-form-field appearance="fill" class="full-width">
diff --git a/code/gms-frontend/src/app/components/apikey/apikey-detail.component.html b/code/gms-frontend/src/app/components/apikey/apikey-detail.component.html
index efd3ffc3..a95ad150 100644
--- a/code/gms-frontend/src/app/components/apikey/apikey-detail.component.html
+++ b/code/gms-frontend/src/app/components/apikey/apikey-detail.component.html
@@ -2,7 +2,7 @@
   <nav-back [buttonConfig]="buttonConfig"></nav-back>
 
   @if (error) {
-    <div class="warning"><b>{{ 'messages.error' | translate }}:</b> {{error}}</div>
+    <information-message severity="warning">{{ 'messages.error' | translate }}: {{error}}</information-message>
   }
   @if (!error) {
     <form #form="ngForm" class="form-control">
diff --git a/code/gms-frontend/src/app/components/apikey/apikey-list.component.html b/code/gms-frontend/src/app/components/apikey/apikey-list.component.html
index 4b27908d..9898f7ab 100644
--- a/code/gms-frontend/src/app/components/apikey/apikey-list.component.html
+++ b/code/gms-frontend/src/app/components/apikey/apikey-list.component.html
@@ -4,7 +4,7 @@ <h2>{{ 'sidemenu.apiKeys' | translate }}</h2>
   <nav-back [buttonConfig]="[{url:'/apikey/new', label:'navback.create', primary : true}]"></nav-back>
 
   @if (error) {
-    <div class="warning"><b>{{ 'messages.error' | translate }}:</b> {{error}}</div>
+    <information-message severity="warning">{{ 'messages.error' | translate }}: {{error}}</information-message>
   }
   @if (!error) {
     <mat-card class="margin-top">
diff --git a/code/gms-frontend/src/app/components/event/event-list.component.html b/code/gms-frontend/src/app/components/event/event-list.component.html
index 8bf4acaf..4b370975 100644
--- a/code/gms-frontend/src/app/components/event/event-list.component.html
+++ b/code/gms-frontend/src/app/components/event/event-list.component.html
@@ -4,7 +4,7 @@ <h2>{{ 'event.title' | translate }}</h2>
   <nav-back></nav-back>
 
   @if (error) {
-    <div class="warning"><b>{{ 'messages.error' | translate }}:</b> {{error}}</div>
+    <information-message severity="warning">{{ 'messages.error' | translate }}: {{error}}</information-message>
   }
   @if (!error) {
     <mat-card class="margin-top">
diff --git a/code/gms-frontend/src/app/components/help/help.component.html b/code/gms-frontend/src/app/components/help/help.component.html
index b651ece8..d99217f2 100644
--- a/code/gms-frontend/src/app/components/help/help.component.html
+++ b/code/gms-frontend/src/app/components/help/help.component.html
@@ -1,7 +1,7 @@
 <mat-card class="help-card">
     <mat-card-title>{{ 'help.errorCodes.title' | translate }}</mat-card-title>
     <mat-card-content>
-        <div class="information">{{ 'help.errorCodes' | translate }}</div>
+        <information-message severity="information">{{ 'help.errorCodes' | translate }}</information-message>
 
         <table mat-table [dataSource]="datasource" (load)="true">
             <tr mat-header-row *matHeaderRowDef="columns"></tr>
diff --git a/code/gms-frontend/src/app/components/help/help.compontent.ts b/code/gms-frontend/src/app/components/help/help.compontent.ts
index 5f95f91b..0f6e1621 100644
--- a/code/gms-frontend/src/app/components/help/help.compontent.ts
+++ b/code/gms-frontend/src/app/components/help/help.compontent.ts
@@ -4,13 +4,14 @@ import { ActivatedRoute } from "@angular/router";
 import { AngularMaterialModule } from "../../angular-material-module";
 import { ErrorCode } from "./model/error-code.model";
 import { TranslatorModule } from "../../common/components/pipes/translator/translator.module";
+import { GmsComponentsModule } from "../../common/components/gms-components-module";
 
 /**
  * @author Peter Szrnka
  */
 @Component({
     standalone: true,
-    imports: [ AngularMaterialModule, TranslatorModule ],
+    imports: [ AngularMaterialModule, TranslatorModule, GmsComponentsModule ],
     selector: 'help',
     templateUrl: './help.component.html',
     styleUrls: ['./help.component.scss']
diff --git a/code/gms-frontend/src/app/components/home/home-module.ts b/code/gms-frontend/src/app/components/home/home-module.ts
index 3680f365..3d8400b1 100644
--- a/code/gms-frontend/src/app/components/home/home-module.ts
+++ b/code/gms-frontend/src/app/components/home/home-module.ts
@@ -8,6 +8,7 @@ import { MomentPipe } from "../../common/components/pipes/date-formatter.pipe";
 import { HomeComponent } from "./home.component";
 import { HomeService } from "./service/home.service";
 import { TranslatorModule } from "../../common/components/pipes/translator/translator.module";
+import { GmsComponentsModule } from "../../common/components/gms-components-module";
 
 /**
  * @author Peter Szrnka
@@ -20,6 +21,7 @@ import { TranslatorModule } from "../../common/components/pipes/translator/trans
         BrowserAnimationsModule,
         AppRoutingModule,
         MomentPipe,
+        GmsComponentsModule,
         TranslatorModule
     ], providers: [HomeService, provideHttpClient(withInterceptorsFromDi())] })
   export class HomeModule { }
\ No newline at end of file
diff --git a/code/gms-frontend/src/app/components/home/home.component.html b/code/gms-frontend/src/app/components/home/home.component.html
index 21146c67..62a3f29e 100644
--- a/code/gms-frontend/src/app/components/home/home.component.html
+++ b/code/gms-frontend/src/app/components/home/home.component.html
@@ -1,5 +1,5 @@
 @if (pageStatus === 2) {
-  <div class="warning"><b>{{ 'messages.error' | translate }}:</b> {{error}}</div>
+  <information-message severity="warning">{{ 'messages.error' | translate }}: {{error}}</information-message>
 }
 
 @if (pageStatus === 0) {
@@ -38,7 +38,7 @@
             @if (data.announcements.resultList.length === 0) {
               <mat-card class="gms-card-right">
                 <mat-card-content>
-                  <div class="information">{{ 'home.noAnnouncements' | translate }}</div>
+                  <information-message severity="information">{{ 'home.noAnnouncements' | translate }}</information-message>
                 </mat-card-content>
               </mat-card>
             }
@@ -70,9 +70,7 @@
               <mat-card-title>{{ 'home.users' | translate }}</mat-card-title>
               <mat-card-subtitle>{{ 'home.users.subtitle' | translate }}</mat-card-subtitle>
               @if (data.userCount === 0) {
-                <div class="warning">
-                  <b>{{ 'label.warning' | translate }}:</b> {{ 'home.noUsersRegistered' | translate }}
-                </div>
+                <information-message severity="warning"><b>{{ 'label.warning' | translate }}:</b> {{ 'home.noUsersRegistered' | translate }}</information-message>
               }
               @if (data.userCount > 0) {
                 <p>
diff --git a/code/gms-frontend/src/app/components/ip_restriction/ip-restriction-detail.component.html b/code/gms-frontend/src/app/components/ip_restriction/ip-restriction-detail.component.html
index dae1aa5e..50184bbc 100644
--- a/code/gms-frontend/src/app/components/ip_restriction/ip-restriction-detail.component.html
+++ b/code/gms-frontend/src/app/components/ip_restriction/ip-restriction-detail.component.html
@@ -2,7 +2,7 @@
   <nav-back [buttonConfig]="buttonConfig"></nav-back>
 
   @if (error) {
-    <div class="warning"><b>{{ 'messages.error' | translate }}:</b> {{error}}</div>
+    <information-message severity="warning">{{ 'messages.error' | translate }}: {{error}}</information-message>
   }
   @if (!error) {
     <form #form="ngForm" class="form-control">
diff --git a/code/gms-frontend/src/app/components/ip_restriction/ip-restriction-list.component.html b/code/gms-frontend/src/app/components/ip_restriction/ip-restriction-list.component.html
index 4845e212..2ad7a07e 100644
--- a/code/gms-frontend/src/app/components/ip_restriction/ip-restriction-list.component.html
+++ b/code/gms-frontend/src/app/components/ip_restriction/ip-restriction-list.component.html
@@ -4,7 +4,7 @@ <h2>{{ 'sidemenu.ipRestrictions' | translate }}</h2>
   <nav-back [buttonConfig]="[{url:'/ip_restriction/new', label:'navback.create', primary : true}]"></nav-back>
 
   @if (error) {
-    <div class="warning"><b>{{ 'messages.error' | translate }}:</b> {{error}}</div>
+    <information-message severity="warning">{{ 'messages.error' | translate }}: {{error}}</information-message>
   }
   @if (!error) {
     <mat-card class="margin-top">
diff --git a/code/gms-frontend/src/app/components/job/job-detail-list.component.html b/code/gms-frontend/src/app/components/job/job-detail-list.component.html
index 0ed939d3..0625e87a 100644
--- a/code/gms-frontend/src/app/components/job/job-detail-list.component.html
+++ b/code/gms-frontend/src/app/components/job/job-detail-list.component.html
@@ -5,7 +5,7 @@ <h2>{{ 'job.title' | translate }}</h2>
 
   <mat-card class="margin-top">
     <mat-card-content>
-      <div class="information">{{ 'job.execution.info' | translate }}</div>
+      <information-message severity="information">{{ 'job.execution.info' | translate }}</information-message>
       @for (item of job_execution_config; track $index) {
       <button mat-button mat-raised-button color="primary" (click)="executeJob(item.url)" class="margin-r10">{{item.label | translate}}</button>
       }
@@ -17,7 +17,7 @@ <h2>{{ 'job.title' | translate }}</h2>
   </mat-card>
 
   @if (error) {
-  <div class="warning"><b>{{ 'messages.error' | translate }}:</b> {{error}}</div>
+  <information-message severity="warning">{{ 'messages.error' | translate }}: {{error}}</information-message>
   }
   @if (!error) {
   <mat-card class="margin-top">
diff --git a/code/gms-frontend/src/app/components/job/job-detail-list.component.ts b/code/gms-frontend/src/app/components/job/job-detail-list.component.ts
index c84b9d32..81d88d42 100644
--- a/code/gms-frontend/src/app/components/job/job-detail-list.component.ts
+++ b/code/gms-frontend/src/app/components/job/job-detail-list.component.ts
@@ -12,6 +12,7 @@ import { SharedDataService } from "../../common/service/shared-data-service";
 import { TranslatorService } from "../../common/service/translator-service";
 import { JobDetail } from "./model/job-detail.model";
 import { JobDetailService } from "./service/job-detail.service";
+import { GmsComponentsModule } from "../../common/components/gms-components-module";
 
 const MANUAL_JOB_EXECUTION_CONFIG = [
     { label: 'job.button.event.maintenance', url : 'event_maintenance' },
@@ -28,7 +29,7 @@ const MANUAL_JOB_EXECUTION_CONFIG = [
  */
 @Component({
     standalone: true,
-    imports: [AngularMaterialModule, CommonModule, NavBackComponent, MomentPipe, TranslatorModule],
+    imports: [AngularMaterialModule, CommonModule, NavBackComponent, MomentPipe, TranslatorModule, GmsComponentsModule],
     selector: 'job-detail-list',
     templateUrl: './job-detail-list.component.html'
 })
diff --git a/code/gms-frontend/src/app/components/keystore/keystore-detail.component.html b/code/gms-frontend/src/app/components/keystore/keystore-detail.component.html
index 70a6e59a..12180eb0 100644
--- a/code/gms-frontend/src/app/components/keystore/keystore-detail.component.html
+++ b/code/gms-frontend/src/app/components/keystore/keystore-detail.component.html
@@ -2,7 +2,7 @@
   <nav-back [buttonConfig]="[{ primary: true, label : 'navback.back2List', url : '/keystore/list' }]"></nav-back>
 
   @if (error) {
-    <div class="warning"><b>{{ 'messages.error' | translate }}:</b> {{error}}</div>
+    <information-message severity="warning">{{ 'messages.error' | translate }}: {{error}}</information-message>
   }
   @if (!error) {
     <form #form="ngForm" novalidate class="example-form" autocomplete="off">
@@ -29,9 +29,7 @@
                 }
               }
               @if (data.generated === true) {
-                <div class="information">
-                  {{ 'keystores.newInfo' | translate }}
-                </div>
+                <information-message severity="information">{{ 'keystores.newInfo' | translate }}</information-message>
               }
             </mat-card-content>
           </mat-card>
@@ -68,9 +66,7 @@
                   <button mat-button mat-raised-button color="primary" (click)="addNewAlias()">{{ 'keystores.addNewAlias' | translate }}</button>
                 }
                 @if (allAliasesAreValid === false) {
-                  <div class="warning">
-                    {{ 'keystores.aliasWarning' | translate }}
-                  </div>
+                  <information-message severity="warning">{{ 'keystores.aliasWarning' | translate }}</information-message>
                 }
                 <table mat-table [dataSource]="datasource" class="mat-elevation-z1 full-width">
                   <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
diff --git a/code/gms-frontend/src/app/components/keystore/keystore-list.component.html b/code/gms-frontend/src/app/components/keystore/keystore-list.component.html
index 823b0434..3186776a 100644
--- a/code/gms-frontend/src/app/components/keystore/keystore-list.component.html
+++ b/code/gms-frontend/src/app/components/keystore/keystore-list.component.html
@@ -4,7 +4,7 @@ <h2>{{ 'sidemenu.keystores' | translate }}</h2>
   <nav-back [buttonConfig]="[{url:'/keystore/new', label:'navback.create', primary : true}]"></nav-back>
 
   @if (error) {
-    <div class="warning"><b>{{ 'messages.error' | translate }}:</b> {{error}}</div>
+    <information-message severity="warning">{{ 'messages.error' | translate }}: {{error}}</information-message>
   }
   @if (!error) {
     <mat-card class="margin-top">
diff --git a/code/gms-frontend/src/app/components/messages/message-list.component.html b/code/gms-frontend/src/app/components/messages/message-list.component.html
index 547f2e7f..354eb1e3 100644
--- a/code/gms-frontend/src/app/components/messages/message-list.component.html
+++ b/code/gms-frontend/src/app/components/messages/message-list.component.html
@@ -4,7 +4,7 @@ <h2>{{ 'messages.title' | translate }}</h2>
   <nav-back></nav-back>
 
   @if (error) {
-    <div class="warning"><b>{{ 'messages.error' | translate }}:</b> {{error}}</div>
+    <information-message severity="warning">{{ 'messages.error' | translate }}: {{error}}</information-message>
   }
   @if (!error) {
     <mat-card class="margin-top">
diff --git a/code/gms-frontend/src/app/components/secret/secret-list.component.html b/code/gms-frontend/src/app/components/secret/secret-list.component.html
index 07834241..25c8a465 100644
--- a/code/gms-frontend/src/app/components/secret/secret-list.component.html
+++ b/code/gms-frontend/src/app/components/secret/secret-list.component.html
@@ -5,7 +5,7 @@ <h2>{{ 'sidemenu.secrets' | translate }}</h2>
     <nav-back [buttonConfig]="[{url:'/secret/new', label:'navback.create', primary : true}]"></nav-back>
 
     @if (error) {
-      <div class="warning"><b>{{ 'messages.error' | translate }}:</b> {{error}}</div>
+      <information-message severity="warning">{{ 'messages.error' | translate }}: {{error}}</information-message>
     }
     @if (!error) {
       <mat-card class="margin-top">
diff --git a/code/gms-frontend/src/app/components/settings/settings-module.ts b/code/gms-frontend/src/app/components/settings/settings-module.ts
index 20a48933..9aea3144 100644
--- a/code/gms-frontend/src/app/components/settings/settings-module.ts
+++ b/code/gms-frontend/src/app/components/settings/settings-module.ts
@@ -6,6 +6,7 @@ import { AngularMaterialModule } from "../../angular-material-module";
 import { AppRoutingModule } from "../../app-routing.module";
 import { SettingsSummaryComponent } from "./settings-summary.component";
 import { TranslatorModule } from "../../common/components/pipes/translator/translator.module";
+import { GmsComponentsModule } from "../../common/components/gms-components-module";
 
 /**
  * @author Peter Szrnka
@@ -14,11 +15,10 @@ import { TranslatorModule } from "../../common/components/pipes/translator/trans
         SettingsSummaryComponent
     ],
     schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [AngularMaterialModule,
-        FormsModule,
-        BrowserModule,
-        AppRoutingModule,
-        TranslatorModule
-    ], providers: [
+    FormsModule,
+    BrowserModule,
+    AppRoutingModule,
+    TranslatorModule, GmsComponentsModule], providers: [
         provideHttpClient(withInterceptorsFromDi())
     ] })
 export class SettingsModule {}
\ No newline at end of file
diff --git a/code/gms-frontend/src/app/components/settings/settings-summary.component.html b/code/gms-frontend/src/app/components/settings/settings-summary.component.html
index c90435e9..b17d2330 100644
--- a/code/gms-frontend/src/app/components/settings/settings-summary.component.html
+++ b/code/gms-frontend/src/app/components/settings/settings-summary.component.html
@@ -4,14 +4,10 @@ <h2>{{ 'settings.title' | translate }}</h2>
   <form #form="ngForm">
     <mat-accordion>
       @if (authMode === 'ldap') {
-      <div class="information">
-        {{ 'settings.info.ldap' | translate }}
-      </div>
+      <information-message severity="information">{{ 'settings.info.ldap' | translate }}</information-message>
       }
       @if (authMode === 'sso') {
-      <div class="information">
-        {{ 'settings.info.sso' | translate }}
-      </div>
+      <information-message severity="information">{{ 'settings.info.sso' | translate }}</information-message>
       }
       <mat-expansion-panel hideToggle [disabled]="authMode !== 'db'">
         <mat-expansion-panel-header>
diff --git a/code/gms-frontend/src/app/components/setup/setup.component.html b/code/gms-frontend/src/app/components/setup/setup.component.html
index bf8d6993..353adb9d 100644
--- a/code/gms-frontend/src/app/components/setup/setup.component.html
+++ b/code/gms-frontend/src/app/components/setup/setup.component.html
@@ -15,10 +15,7 @@
           <div [class]="'step' + (currentStep === 4 ? ' step-active': (currentStep < 4) ? ' step-upcoming':  ' step-passed')">{{ 'setup.step5' | translate }}</div>
         </div>
         @if(systemStatus === 'NEED_SETUP') {
-        <div class="information">
-          {{ 'setup.intro' | translate }}
-        </div>
-
+        <information-message severity="information">{{ 'setup.intro' | translate }}</information-message>
         <mat-accordion>
           @for (vmOption of vmOptions; track $index) {
           <mat-expansion-panel [hideToggle]="vmOption.value.length <= 100">
@@ -42,16 +39,12 @@
         }
         @else if(systemStatus === 'NEED_ADMIN_USER') {
         @if (errorMessage) {
-        <div class="warning">
-          {{ 'setup.failed' | translate: errorMessage }}
-        </div>
+        <information-message severity="warning">{{ 'setup.failed' | translate: errorMessage }}</information-message>
         }
 
         @if (errorMessage === undefined) {
         <div>
-          <p class="information">
-            {{ 'setup.description' | translate }}
-          </p>
+          <information-message severity="information">{{ 'setup.description' | translate }}</information-message>
           <mat-form-field appearance="fill" class="full-width">
             <mat-label>{{ 'setup.fullName' | translate }}</mat-label>
             <input matInput name="name" [(ngModel)]="userData.name" required>
@@ -109,9 +102,7 @@
           </mat-form-field>
         </div>
         } @else if(systemStatus === 'COMPLETE') {
-          <div class="information">
-            {{ 'setup.succeeded' | translate }}
-          </div>
+          <information-message severity="information">{{ 'setup.succeeded' | translate }}</information-message>
         }
       }
     </mat-card-content>
diff --git a/code/gms-frontend/src/app/components/user/user-detail.component.html b/code/gms-frontend/src/app/components/user/user-detail.component.html
index 0831b398..9eda4d68 100644
--- a/code/gms-frontend/src/app/components/user/user-detail.component.html
+++ b/code/gms-frontend/src/app/components/user/user-detail.component.html
@@ -3,7 +3,7 @@
   <nav-back [buttonConfig]="[{url:'/user/list', label:'navback.back2List', primary : true}]"></nav-back>
 
   @if (error) {
-    <div class="warning"><b>{{ 'messages.error' | translate }}:</b> {{error}}</div>
+    <information-message severity="warning">{{ 'messages.error' | translate }}: {{error}}</information-message>
   }
   @if (!error) {
     <mat-tab-group mat-stretch-tabs="false" mat-align-tabs="start">
diff --git a/code/gms-frontend/src/app/components/user/user-list.component.html b/code/gms-frontend/src/app/components/user/user-list.component.html
index 960e458e..0935cc01 100644
--- a/code/gms-frontend/src/app/components/user/user-list.component.html
+++ b/code/gms-frontend/src/app/components/user/user-list.component.html
@@ -7,11 +7,11 @@ <h2>{{ 'sidemenu.users' | translate }}</h2>
   }
 
   @if (authMode === 'ldap') {
-    <div class="information">{{ 'users.managedByLdap' | translate }}</div>
+    <information-message severity="information">{{ 'users.managedByLdap' | translate }}</information-message>
   }
 
   @if (error) {
-    <div class="warning"><b>{{ 'messages.error' | translate }}:</b> {{error}}</div>
+    <information-message severity="warning">{{ 'messages.error' | translate }}: {{error}}</information-message>
   }
   @if (!error) {
     <mat-card class="margin-top">
diff --git a/code/gms-frontend/src/app/components/user/user-module.ts b/code/gms-frontend/src/app/components/user/user-module.ts
index 7d61d1e7..e6414835 100644
--- a/code/gms-frontend/src/app/components/user/user-module.ts
+++ b/code/gms-frontend/src/app/components/user/user-module.ts
@@ -14,6 +14,7 @@ import { UserService } from "./service/user-service";
 import { UserDetailComponent } from "./user-detail.component";
 import { UserListComponent } from "./user-list.component";
 import { TranslatorModule } from "../../common/components/pipes/translator/translator.module";
+import { GmsComponentsModule } from "../../common/components/gms-components-module";
 
 /**
  * @author Peter Szrnka
@@ -23,15 +24,14 @@ import { TranslatorModule } from "../../common/components/pipes/translator/trans
     ],
     schemas: [CUSTOM_ELEMENTS_SCHEMA], 
     imports: [AngularMaterialModule,
-        FormsModule,
-        BrowserModule,
-        AppRoutingModule,
-        SplashComponent,
-        MomentPipe,
-        NavBackComponent,
-        StatusToggleComponent,
-        TranslatorModule
-    ], 
+    FormsModule,
+    BrowserModule,
+    AppRoutingModule,
+    SplashComponent,
+    MomentPipe,
+    NavBackComponent,
+    StatusToggleComponent,
+    TranslatorModule, GmsComponentsModule], 
     providers: [
         UserService, UserListResolver, UserDetailResolver,
         provideHttpClient(withInterceptorsFromDi())
diff --git a/code/gms-frontend/src/app/components/verify/verify-module.ts b/code/gms-frontend/src/app/components/verify/verify-module.ts
index 10abaf51..8c7439ca 100644
--- a/code/gms-frontend/src/app/components/verify/verify-module.ts
+++ b/code/gms-frontend/src/app/components/verify/verify-module.ts
@@ -7,6 +7,7 @@ import { AngularMaterialModule } from "../../angular-material-module";
 import { AppRoutingModule } from "../../app-routing.module";
 import { VerifyComponent } from "./verify.component";
 import { TranslatorModule } from "../../common/components/pipes/translator/translator.module";
+import { GmsComponentsModule } from "../../common/components/gms-components-module";
 
 /**
  * @author Peter Szrnka
@@ -19,5 +20,6 @@ import { TranslatorModule } from "../../common/components/pipes/translator/trans
         BrowserAnimationsModule,
         AppRoutingModule,
         FormsModule,
+        GmsComponentsModule,
     TranslatorModule], providers: [provideHttpClient(withInterceptorsFromDi())] })
   export class VerifyModule { }
\ No newline at end of file
diff --git a/code/gms-frontend/src/app/components/verify/verify.component.html b/code/gms-frontend/src/app/components/verify/verify.component.html
index 6aef0cf7..ef00372b 100644
--- a/code/gms-frontend/src/app/components/verify/verify.component.html
+++ b/code/gms-frontend/src/app/components/verify/verify.component.html
@@ -6,7 +6,7 @@
       </mat-card-header>
 
       <mat-card-content>
-        <div class="information">{{ 'verify.description' | translate }}</div>
+        <information-message severity="information">{{ 'verify.description' | translate }}</information-message>
         <mat-form-field appearance="fill" class="form-control">
           <mat-label>{{ 'verify.code' | translate }}</mat-label>
           <input type="number" maxlength="6" matInput name="verificationCode" required [(ngModel)]="formModel.verificationCode">