Add loginNotice as div

Remove the snackbar, restructure the template code for login mask
and adds a div with the login notice

client/src/app/site/login/components/login-mask/login-mask.component.html

@@ -1,29 +1,58 @@
 <div class="form-wrapper">
+    <!-- Spinner -->
     <mat-spinner *ngIf="inProcess"></mat-spinner>
-    <form [formGroup]="loginForm" class="login-form" (ngSubmit)="formLogin()">
+
+    <!-- Install notice -->
+    <div class="login-container" *ngIf="installationNotice">
+        <mat-card [innerHTML]="installationNotice"></mat-card>
+    </div>
+
+    <!-- login form -->
+    <form [formGroup]="loginForm" class="login-container" (ngSubmit)="formLogin()">
         <mat-form-field>
-            <input matInput osAutofocus required placeholder="User name"
+            <input
-                formControlName="username" [errorStateMatcher]="parentErrorStateMatcher">
+                matInput
+                osAutofocus
+                required
+                placeholder="User name"
+                formControlName="username"
+                [errorStateMatcher]="parentErrorStateMatcher"
+            />
         </mat-form-field>
-        <br>
+        <br />
         <mat-form-field>
-            <input matInput required placeholder="Password" formControlName="password" [type]="!hide ? 'password' : 'text'"
+            <input
-                [errorStateMatcher]="parentErrorStateMatcher">
+                matInput
-            <mat-icon matSuffix (click)="hide = !hide">{{ hide ? "visibility_off" : "visibility_on" }}</mat-icon>
+                required
+                placeholder="Password"
+                formControlName="password"
+                [type]="!hide ? 'password' : 'text'"
+                [errorStateMatcher]="parentErrorStateMatcher"
+            />
+            <mat-icon matSuffix (click)="hide = !hide">{{ hide ? 'visibility_off' : 'visibility_on' }}</mat-icon>
 
             <mat-error>{{ loginErrorMsg }}</mat-error>
         </mat-form-field>
 
         <!-- forgot password button -->
-        <br>
+        <br />
-        <button type="button" class="forgot-password-button" (click)="resetPassword()" mat-button>Forgot Password?</button>
+        <button type="button" class="forgot-password-button" (click)="resetPassword()" mat-button>
+            Forgot Password?
+        </button>
 
         <!-- login button -->
-        <br>
+        <br />
         <!-- TODO: Next to each other...-->
         <button mat-raised-button color="primary" class="login-button" type="submit" translate>Login</button>
-        <button mat-raised-button *ngIf="areGuestsEnabled()" color="primary" class="login-button" type="button"
+        <button
-            (click)="guestLogin()" translate>
+            mat-raised-button
+            *ngIf="areGuestsEnabled()"
+            color="primary"
+            class="login-button"
+            type="button"
+            (click)="guestLogin()"
+            translate
+        >
             Login as Guest
         </button>
     </form>

client/src/app/site/login/components/login-mask/login-mask.component.scss

@@ -27,7 +27,7 @@ mat-form-field {
     }
 }
 
-.login-form {
+.login-container {
     padding-top: 50px;
     margin: 0 auto;
     max-width: 400px;

client/src/app/site/login/components/login-mask/login-mask.component.ts

@@ -1,10 +1,9 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
 
 import { BaseComponent } from 'app/base.component';
 import { AuthService } from 'app/core/services/auth.service';
 import { OperatorService } from 'app/core/services/operator.service';
-import { MatSnackBar, MatSnackBarRef, SimpleSnackBar } from '@angular/material';
 import { FormGroup, Validators, FormBuilder } from '@angular/forms';
 import { TranslateService } from '@ngx-translate/core';
 import { environment } from 'environments/environment';
@@ -23,7 +22,7 @@ import { HttpService } from '../../../../core/services/http.service';
     templateUrl: './login-mask.component.html',
     styleUrls: ['./login-mask.component.scss']
 })
-export class LoginMaskComponent extends BaseComponent implements OnInit, OnDestroy {
+export class LoginMaskComponent extends BaseComponent implements OnInit {
     /**
      * Show or hide password and change the indicator accordingly
      */
@@ -32,7 +31,7 @@ export class LoginMaskComponent extends BaseComponent implements OnInit, OnDestr
     /**
      * Reference to the SnackBarEntry for the installation notice send by the server.
      */
-    private installationNotice: MatSnackBarRef<SimpleSnackBar>;
+    public installationNotice: string;
 
     /**
      * Login Error Message if any
@@ -61,8 +60,7 @@ export class LoginMaskComponent extends BaseComponent implements OnInit, OnDestr
      * @param operator The representation of the current user
      * @param router forward to start page
      * @param formBuilder To build the form and validate
-     * @param http used to get information before the login
+     * @param httpService used to get information before the login
-     * @param matSnackBar Display information
      * @param OpenSlides The Service for OpenSlides
      * @param loginDataService provide information about the legal notice and privacy policy
      */
@@ -73,8 +71,7 @@ export class LoginMaskComponent extends BaseComponent implements OnInit, OnDestr
         private router: Router,
         private route: ActivatedRoute,
         private formBuilder: FormBuilder,
-        private http: HttpService,
+        private httpService: HttpService,
-        private matSnackBar: MatSnackBar,
         private OpenSlides: OpenSlidesService,
         private loginDataService: LoginDataService
     ) {
@@ -92,12 +89,10 @@ export class LoginMaskComponent extends BaseComponent implements OnInit, OnDestr
         // Get the login data. Save information to the login data service. If there is an
         // error, ignore it.
         // TODO: This has to be caught by the offline service
-        this.http.get<any>(environment.urlPrefix + '/users/login/').then(
+        this.httpService.get<any>(environment.urlPrefix + '/users/login/').then(
             response => {
                 if (response.info_text) {
-                    this.installationNotice = this.matSnackBar.open(response.info_text, this.translate.instant('OK'), {
+                    this.installationNotice = response.info_text;
-                        duration: 5000
-                    });
                 }
                 this.loginDataService.setPrivacyPolicy(response.privacy_policy);
                 this.loginDataService.setLegalNotice(response.legal_notice);
@@ -106,12 +101,6 @@ export class LoginMaskComponent extends BaseComponent implements OnInit, OnDestr
         );
     }
 
-    public ngOnDestroy(): void {
-        if (this.installationNotice) {
-            this.installationNotice.dismiss();
-        }
-    }
-
     /**
      * Create the login Form
      */