Add better login page

Themes now cover the login page
more responsive on both large, small and smalest screens
the footer behaves like a footer

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

@@ -27,14 +27,14 @@
                 [type]="!hide ? 'password' : 'text'"
                 [errorStateMatcher]="parentErrorStateMatcher"
             />
-            <mat-icon matSuffix (click)="hide = !hide">{{ hide ? 'visibility_off' : 'visibility_on' }}</mat-icon>
+            <mat-icon color="primary" matSuffix (click)="hide = !hide">{{ hide ? 'visibility_off' : 'visibility_on' }}</mat-icon>
 
             <mat-error>{{ loginErrorMsg | translate }}</mat-error>
         </mat-form-field>
 
         <!-- forgot password button -->
         <br />
-        <button type="button" class="forgot-password-button" (click)="resetPassword()" mat-button>
+        <button mat-button color="primary" type="button" class="forgot-password-button" (click)="resetPassword()" >
             {{ 'Forgot Password?' | translate }}
         </button>
 

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

@@ -1,24 +1,25 @@
-<!-- The actual form -->
+<div class="main-login-wrapper">
-<header>
+    <div class="content-wrapper">
-    <mat-toolbar class="login-logo-bar" color="primary">
+        <mat-toolbar class="login-logo-bar" color="primary">
-        <a routerLink="/login" [queryParams]="{ checkBrowser: false }"
+            <a routerLink="/login" [queryParams]="{ checkBrowser: false }">
-            ><img src="assets/img/openslides-logo-dark.svg" alt="OpenSlides-logo"
+                <img src="assets/img/openslides-logo-dark.svg" alt="OpenSlides-logo" />
-        /></a>
+            </a>
-    </mat-toolbar>
+        </mat-toolbar>
-</header>
 
-<main>
+        <div class="main-router">
-    <router-outlet></router-outlet>
+            <router-outlet></router-outlet>
-</main>
+        </div>
 
-<div class="footer">
+        <div class="footer">
-    <a href="https://openslides.com" target="_bank">© Copyright by OpenSlides</a>
+            <a href="https://openslides.com" target="_bank">© Copyright by OpenSlides</a>
-    &middot;
+            &middot;
-    <a routerLink="/login/legalnotice">
+            <a routerLink="/login/legalnotice">
-        {{ 'Legal notice' | translate }}
+                {{ 'Legal notice' | translate }}
-    </a>
+            </a>
-    &middot;
+            &middot;
-    <a routerLink="/login/privacypolicy">
+            <a routerLink="/login/privacypolicy">
-        {{ 'Privacy policy' | translate }}
+                {{ 'Privacy policy' | translate }}
-    </a>
+            </a>
+        </div>
+    </div>
 </div>

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

@@ -1,25 +1,46 @@
-header {
+html,
-    width: 100%;
+body {
-    flex: 1;
+    height: 100%;
-    mat-toolbar {
+}
-        min-height: 200px !important;
-    }
-    .login-logo-bar a {
-        margin-left: auto;
-        margin-right: auto;
 
-        img {
+.main-login-wrapper {
-            width: 90%;
+    position: fixed;
-            height: 90%;
+    width: 100%;
-            max-width: 400px;
+    height: 100%;
+
+    .content-wrapper {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        overflow: auto;
+
+        .login-logo-bar {
+            min-height: 80px !important;
+            max-height: 200px !important;
+            height: 20vh !important;
+
+            a {
+                margin-left: auto;
+                margin-right: auto;
+
+                img {
+                    width: 100%;
+                    max-width: 400px;
+                    display: block;
+                }
+            }
+        }
+
+        .main-router {
+            flex: 1 0 auto;
+        }
+
+        .footer {
+            flex-shrink: 0;
+            margin-left: auto;
+            margin-right: auto;
+            font-size: 12px;
+            text-align: center;
         }
     }
 }
-
-.footer {
-    margin-left: auto;
-    margin-right: auto;
-    margin-top: 80px;
-    font-size: 12px;
-    text-align: center;
-}

client/src/app/site/login/components/login-wrapper/login-wrapper.component.scss-theme.scss

@@ -0,0 +1,9 @@
+@import '~@angular/material/theming';
+
+@mixin os-login-wrapper-theme($theme) {
+    $background: map-get($theme, background);
+
+    .main-login-wrapper {
+        background-color: mat-color($background, background);
+    }
+}

client/src/styles.scss

@@ -35,6 +35,7 @@
 @import './app/shared/components/jitsi/jitsi.component.scss-theme.scss';
 @import './app/shared/components/list-view-table/list-view-table.component.scss-theme.scss';
 @import './app/site/common/components/user-statistics/user-statistics.component.scss-theme.scss';
+@import './app/site/login/components/login-wrapper/login-wrapper.component.scss-theme.scss';
 
 /** fonts */
 @import './assets/styles/fonts.scss';
@@ -73,6 +74,8 @@ $narrow-spacing: (
     @include os-jitsi-theme($theme);
     @include os-list-view-table-theme($theme);
     @include os-user-statistics-style($theme);
+    @include os-user-statistics-style($theme);
+    @include os-login-wrapper-theme($theme);
 }
 
 /** Load projector specific SCSS values */
@@ -104,6 +107,7 @@ $narrow-spacing: (
 
 .openslides-dark-theme,
 .openslides-developer-dark-theme {
+    color: white;
     .logo-container {
         img.dark {
             display: inherit;