Merge pull request #5410 from tsiegleauq/better-login-page

Add better login page

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,15 +1,14 @@
-<!-- The actual form -->
-<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>
+            <a routerLink="/login" [queryParams]="{ checkBrowser: false }">
+                <img src="assets/img/openslides-logo-dark.svg" alt="OpenSlides-logo" />
+            </a>
         </mat-toolbar>
-</header>
 
-<main>
+        <div class="main-router">
             <router-outlet></router-outlet>
-</main>
+        </div>
 
         <div class="footer">
             <a href="https://openslides.com" target="_bank">© Copyright by OpenSlides</a>
@@ -22,3 +21,5 @@
                 {{ 'Privacy policy' | translate }}
             </a>
         </div>
+    </div>
+</div>

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;
+html,
+body {
+    height: 100%;
 }
-    .login-logo-bar a {
+
+.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: 90%;
-            height: 90%;
+                    width: 100%;
                     max-width: 400px;
+                    display: block;
                 }
             }
         }
 
+        .main-router {
+            flex: 1 0 auto;
+        }
+
         .footer {
+            flex-shrink: 0;
             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;