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

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

Add better login page
This commit is contained in:
Emanuel Schütze 2020-06-12 15:13:41 +02:00 committed by GitHub
parent 2ea95937d7 5ed9c88ae4
commit c1605929e9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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>

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

@ -1,15 +1,14 @@
<!-- 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>
@ -22,3 +21,5 @@
{{ 'Privacy policy' | translate }} {{ 'Privacy policy' | translate }}
</a> </a>
</div> </div>
</div>
</div>

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

@ -1,25 +1,46 @@
header { html,
width: 100%; body {
flex: 1; height: 100%;
mat-toolbar {
min-height: 200px !important;
} }
.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-left: auto;
margin-right: auto; margin-right: auto;
img { img {
width: 90%; width: 100%;
height: 90%;
max-width: 400px; max-width: 400px;
display: block;
} }
} }
} }
.main-router {
flex: 1 0 auto;
}
.footer { .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;