From 5ed9c88ae4a232470775496c445b349951ff17e5 Mon Sep 17 00:00:00 2001
From: Sean <sean.f.t.engelhardt@gmail.com>
Date: Fri, 12 Jun 2020 10:23:10 +0200
Subject: [PATCH] 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
---
 .../login-mask/login-mask.component.html      |  4 +-
 .../login-wrapper.component.html              | 43 ++++++-------
 .../login-wrapper.component.scss              | 63 ++++++++++++-------
 .../login-wrapper.component.scss-theme.scss   |  9 +++
 client/src/styles.scss                        |  4 ++
 5 files changed, 79 insertions(+), 44 deletions(-)
 create mode 100644 client/src/app/site/login/components/login-wrapper/login-wrapper.component.scss-theme.scss

diff --git a/client/src/app/site/login/components/login-mask/login-mask.component.html b/client/src/app/site/login/components/login-mask/login-mask.component.html
index b51af06e4..d8df26e3f 100644
--- a/client/src/app/site/login/components/login-mask/login-mask.component.html
+++ b/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>
 
diff --git a/client/src/app/site/login/components/login-wrapper/login-wrapper.component.html b/client/src/app/site/login/components/login-wrapper/login-wrapper.component.html
index 6c493032f..dd67b0661 100644
--- a/client/src/app/site/login/components/login-wrapper/login-wrapper.component.html
+++ b/client/src/app/site/login/components/login-wrapper/login-wrapper.component.html
@@ -1,24 +1,25 @@
-<!-- The actual form -->
-<header>
-    <mat-toolbar class="login-logo-bar" color="primary">
-        <a routerLink="/login" [queryParams]="{ checkBrowser: false }"
-            ><img src="assets/img/openslides-logo-dark.svg" alt="OpenSlides-logo"
-        /></a>
-    </mat-toolbar>
-</header>
+<div class="main-login-wrapper">
+    <div class="content-wrapper">
+        <mat-toolbar class="login-logo-bar" color="primary">
+            <a routerLink="/login" [queryParams]="{ checkBrowser: false }">
+                <img src="assets/img/openslides-logo-dark.svg" alt="OpenSlides-logo" />
+            </a>
+        </mat-toolbar>
 
-<main>
-    <router-outlet></router-outlet>
-</main>
+        <div class="main-router">
+            <router-outlet></router-outlet>
+        </div>
 
-<div class="footer">
-    <a href="https://openslides.com" target="_bank">© Copyright by OpenSlides</a>
-    &middot;
-    <a routerLink="/login/legalnotice">
-        {{ 'Legal notice' | translate }}
-    </a>
-    &middot;
-    <a routerLink="/login/privacypolicy">
-        {{ 'Privacy policy' | translate }}
-    </a>
+        <div class="footer">
+            <a href="https://openslides.com" target="_bank">© Copyright by OpenSlides</a>
+            &middot;
+            <a routerLink="/login/legalnotice">
+                {{ 'Legal notice' | translate }}
+            </a>
+            &middot;
+            <a routerLink="/login/privacypolicy">
+                {{ 'Privacy policy' | translate }}
+            </a>
+        </div>
+    </div>
 </div>
diff --git a/client/src/app/site/login/components/login-wrapper/login-wrapper.component.scss b/client/src/app/site/login/components/login-wrapper/login-wrapper.component.scss
index 152660595..69bbb7363 100644
--- a/client/src/app/site/login/components/login-wrapper/login-wrapper.component.scss
+++ b/client/src/app/site/login/components/login-wrapper/login-wrapper.component.scss
@@ -1,25 +1,46 @@
-header {
-    width: 100%;
-    flex: 1;
-    mat-toolbar {
-        min-height: 200px !important;
-    }
-    .login-logo-bar a {
-        margin-left: auto;
-        margin-right: auto;
+html,
+body {
+    height: 100%;
+}
 
-        img {
-            width: 90%;
-            height: 90%;
-            max-width: 400px;
+.main-login-wrapper {
+    position: fixed;
+    width: 100%;
+    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;
-}
diff --git a/client/src/app/site/login/components/login-wrapper/login-wrapper.component.scss-theme.scss b/client/src/app/site/login/components/login-wrapper/login-wrapper.component.scss-theme.scss
new file mode 100644
index 000000000..d9098c0db
--- /dev/null
+++ b/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);
+    }
+}
diff --git a/client/src/styles.scss b/client/src/styles.scss
index c1229a129..2920d54d9 100644
--- a/client/src/styles.scss
+++ b/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;