ag-admin/OpenSlides
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add better login page

Browse Source 
Themes now cover the login page
more responsive on both large, small and smalest screens
the footer behaves like a footer
This commit is contained in:
Sean 2020-06-12 10:23:10 +02:00
parent f590994875
commit 5ed9c88ae4
5 changed files with 79 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -27,14 +27,14 @@
[type]="!hide ? 'password' : 'text'" [type]="!hide ? 'password' : 'text'"
[errorStateMatcher]="parentErrorStateMatcher" [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-error>{{ loginErrorMsg | translate }}</mat-error>
</mat-form-field> </mat-form-field>
<!-- forgot password button --> <!-- forgot password button -->
<br /> <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 }} {{ 'Forgot Password?' | translate }}
</button> </button>

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

@ -1,17 +1,16 @@
<!-- 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">
@ -21,4 +20,6 @@
<a routerLink="/login/privacypolicy"> <a routerLink="/login/privacypolicy">
{{ 'Privacy policy' | translate }} {{ 'Privacy policy' | translate }}
</a> </a>
</div>
</div>
</div> </div>

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

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

9
client/src/app/site/login/components/login-wrapper/login-wrapper.component.scss-theme.scss Normal file
View File

@ -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);
}
}

4
client/src/styles.scss
View File

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