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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

2
client/src/app/site/login/components/login-mask/login-mask.component.scss
View File

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

25
client/src/app/site/login/components/login-mask/login-mask.component.ts
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 { BaseComponent } from 'app/base.component';
import { AuthService } from 'app/core/services/auth.service';
import { OperatorService } from 'app/core/services/operator.service';
import { MatSnackBar, MatSnackBarRef, SimpleSnackBar } from '@angular/material';
import { FormGroup, Validators, FormBuilder } from '@angular/forms';
import { TranslateService } from '@ngx-translate/core';
import { environment } from 'environments/environment';
@ -23,7 +22,7 @@ import { HttpService } from '../../../../core/services/http.service';
templateUrl: './login-mask.component.html',
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
*/
@ -32,7 +31,7 @@ export class LoginMaskComponent extends BaseComponent implements OnInit, OnDestr
/**
* Reference to the SnackBarEntry for the installation notice send by the server.
*/
private installationNotice: MatSnackBarRef<SimpleSnackBar>;
public installationNotice: string;
/**
* 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 router forward to start page
* @param formBuilder To build the form and validate
* @param http used to get information before the login
* @param matSnackBar Display information
* @param httpService used to get information before the login
* @param OpenSlides The Service for OpenSlides
* @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 route: ActivatedRoute,
private formBuilder: FormBuilder,
private http: HttpService,
private matSnackBar: MatSnackBar,
private httpService: HttpService,
private OpenSlides: OpenSlidesService,
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
// error, ignore it.
// 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 => {
if (response.info_text) {
this.installationNotice = this.matSnackBar.open(response.info_text, this.translate.instant('OK'), {
duration: 5000
});
this.installationNotice = response.info_text;
}
this.loginDataService.setPrivacyPolicy(response.privacy_policy);
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
*/