Add loginNotice as div

Remove the snackbar, restructure the template code for login mask
and adds a div with the login notice
This commit is contained in:
Sean Engelhardt 2019-01-31 10:33:37 +01:00
parent eb21ae0136
commit 92fab5102a
3 changed files with 53 additions and 35 deletions

View File

@ -1,29 +1,58 @@
<div class="form-wrapper"> <div class="form-wrapper">
<!-- Spinner -->
<mat-spinner *ngIf="inProcess"></mat-spinner> <mat-spinner *ngIf="inProcess"></mat-spinner>
<form [formGroup]="loginForm" class="login-form" (ngSubmit)="formLogin()">
<!-- Install notice -->
<div class="login-container" *ngIf="installationNotice">
<mat-card [innerHTML]="installationNotice"></mat-card>
</div>
<!-- login form -->
<form [formGroup]="loginForm" class="login-container" (ngSubmit)="formLogin()">
<mat-form-field> <mat-form-field>
<input matInput osAutofocus required placeholder="User name" <input
formControlName="username" [errorStateMatcher]="parentErrorStateMatcher"> matInput
osAutofocus
required
placeholder="User name"
formControlName="username"
[errorStateMatcher]="parentErrorStateMatcher"
/>
</mat-form-field> </mat-form-field>
<br> <br />
<mat-form-field> <mat-form-field>
<input matInput required placeholder="Password" formControlName="password" [type]="!hide ? 'password' : 'text'" <input
[errorStateMatcher]="parentErrorStateMatcher"> matInput
<mat-icon matSuffix (click)="hide = !hide">{{ hide ? "visibility_off" : "visibility_on" }}</mat-icon> required
placeholder="Password"
formControlName="password"
[type]="!hide ? 'password' : 'text'"
[errorStateMatcher]="parentErrorStateMatcher"
/>
<mat-icon matSuffix (click)="hide = !hide">{{ hide ? 'visibility_off' : 'visibility_on' }}</mat-icon>
<mat-error>{{ loginErrorMsg }}</mat-error> <mat-error>{{ loginErrorMsg }}</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>Forgot Password?</button> <button type="button" class="forgot-password-button" (click)="resetPassword()" mat-button>
Forgot Password?
</button>
<!-- login button --> <!-- login button -->
<br> <br />
<!-- TODO: Next to each other...--> <!-- TODO: Next to each other...-->
<button mat-raised-button color="primary" class="login-button" type="submit" translate>Login</button> <button mat-raised-button color="primary" class="login-button" type="submit" translate>Login</button>
<button mat-raised-button *ngIf="areGuestsEnabled()" color="primary" class="login-button" type="button" <button
(click)="guestLogin()" translate> mat-raised-button
*ngIf="areGuestsEnabled()"
color="primary"
class="login-button"
type="button"
(click)="guestLogin()"
translate
>
Login as Guest Login as Guest
</button> </button>
</form> </form>

View File

@ -27,7 +27,7 @@ mat-form-field {
} }
} }
.login-form { .login-container {
padding-top: 50px; padding-top: 50px;
margin: 0 auto; margin: 0 auto;
max-width: 400px; max-width: 400px;

View File

@ -1,10 +1,9 @@
import { Component, OnInit, OnDestroy } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router'; import { Router, ActivatedRoute } from '@angular/router';
import { BaseComponent } from 'app/base.component'; import { BaseComponent } from 'app/base.component';
import { AuthService } from 'app/core/services/auth.service'; import { AuthService } from 'app/core/services/auth.service';
import { OperatorService } from 'app/core/services/operator.service'; import { OperatorService } from 'app/core/services/operator.service';
import { MatSnackBar, MatSnackBarRef, SimpleSnackBar } from '@angular/material';
import { FormGroup, Validators, FormBuilder } from '@angular/forms'; import { FormGroup, Validators, FormBuilder } from '@angular/forms';
import { TranslateService } from '@ngx-translate/core'; import { TranslateService } from '@ngx-translate/core';
import { environment } from 'environments/environment'; import { environment } from 'environments/environment';
@ -23,7 +22,7 @@ import { HttpService } from '../../../../core/services/http.service';
templateUrl: './login-mask.component.html', templateUrl: './login-mask.component.html',
styleUrls: ['./login-mask.component.scss'] styleUrls: ['./login-mask.component.scss']
}) })
export class LoginMaskComponent extends BaseComponent implements OnInit, OnDestroy { export class LoginMaskComponent extends BaseComponent implements OnInit {
/** /**
* Show or hide password and change the indicator accordingly * Show or hide password and change the indicator accordingly
*/ */
@ -32,7 +31,7 @@ export class LoginMaskComponent extends BaseComponent implements OnInit, OnDestr
/** /**
* Reference to the SnackBarEntry for the installation notice send by the server. * Reference to the SnackBarEntry for the installation notice send by the server.
*/ */
private installationNotice: MatSnackBarRef<SimpleSnackBar>; public installationNotice: string;
/** /**
* Login Error Message if any * Login Error Message if any
@ -61,8 +60,7 @@ export class LoginMaskComponent extends BaseComponent implements OnInit, OnDestr
* @param operator The representation of the current user * @param operator The representation of the current user
* @param router forward to start page * @param router forward to start page
* @param formBuilder To build the form and validate * @param formBuilder To build the form and validate
* @param http used to get information before the login * @param httpService used to get information before the login
* @param matSnackBar Display information
* @param OpenSlides The Service for OpenSlides * @param OpenSlides The Service for OpenSlides
* @param loginDataService provide information about the legal notice and privacy policy * @param loginDataService provide information about the legal notice and privacy policy
*/ */
@ -73,8 +71,7 @@ export class LoginMaskComponent extends BaseComponent implements OnInit, OnDestr
private router: Router, private router: Router,
private route: ActivatedRoute, private route: ActivatedRoute,
private formBuilder: FormBuilder, private formBuilder: FormBuilder,
private http: HttpService, private httpService: HttpService,
private matSnackBar: MatSnackBar,
private OpenSlides: OpenSlidesService, private OpenSlides: OpenSlidesService,
private loginDataService: LoginDataService private loginDataService: LoginDataService
) { ) {
@ -92,12 +89,10 @@ export class LoginMaskComponent extends BaseComponent implements OnInit, OnDestr
// Get the login data. Save information to the login data service. If there is an // Get the login data. Save information to the login data service. If there is an
// error, ignore it. // error, ignore it.
// TODO: This has to be caught by the offline service // TODO: This has to be caught by the offline service
this.http.get<any>(environment.urlPrefix + '/users/login/').then( this.httpService.get<any>(environment.urlPrefix + '/users/login/').then(
response => { response => {
if (response.info_text) { if (response.info_text) {
this.installationNotice = this.matSnackBar.open(response.info_text, this.translate.instant('OK'), { this.installationNotice = response.info_text;
duration: 5000
});
} }
this.loginDataService.setPrivacyPolicy(response.privacy_policy); this.loginDataService.setPrivacyPolicy(response.privacy_policy);
this.loginDataService.setLegalNotice(response.legal_notice); this.loginDataService.setLegalNotice(response.legal_notice);
@ -106,12 +101,6 @@ export class LoginMaskComponent extends BaseComponent implements OnInit, OnDestr
); );
} }
public ngOnDestroy(): void {
if (this.installationNotice) {
this.installationNotice.dismiss();
}
}
/** /**
* Create the login Form * Create the login Form
*/ */