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'"
[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>

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

@ -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>

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

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

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/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;