src/app/app-root/login/login.component.ts
styles | mat-card {margin: 10px;},.mat-card-box {background: var(--tc-box-background)},#toggle-show-password {cursor: pointer},.mat-form-field {display: block},.mat-card {display: flex; justify-content: start; flex-direction: column; flex-wrap: wrap},.mat-card-content {flex-grow: 1; overflow: auto} |
templateUrl | ./login.component.html |
Properties |
|
Methods |
constructor(mds: MainDataService, bs: BackendService, router: Router, route: ActivatedRoute)
|
|||||||||||||||
Defined in src/app/app-root/login/login.component.ts:31
|
|||||||||||||||
Parameters :
|
login |
login()
|
Defined in src/app/app-root/login/login.component.ts:47
|
Returns :
void
|
ngOnDestroy |
ngOnDestroy()
|
Defined in src/app/app-root/login/login.component.ts:86
|
Returns :
void
|
ngOnInit |
ngOnInit()
|
Defined in src/app/app-root/login/login.component.ts:40
|
Returns :
void
|
loginForm |
Default value : new FormGroup({
name: new FormControl(LoginComponent.oldLoginName, [Validators.required, Validators.minLength(3)]),
pw: new FormControl('')
})
|
Defined in src/app/app-root/login/login.component.ts:28
|
Public mds |
Type : MainDataService
|
Defined in src/app/app-root/login/login.component.ts:34
|
Static oldLoginName |
Type : string
|
Default value : ''
|
Defined in src/app/app-root/login/login.component.ts:22
|
problemText |
Type : string
|
Default value : ''
|
Defined in src/app/app-root/login/login.component.ts:25
|
returnTo |
Type : string
|
Default value : ''
|
Defined in src/app/app-root/login/login.component.ts:24
|
Private routingSubscription |
Type : Subscription
|
Default value : null
|
Defined in src/app/app-root/login/login.component.ts:23
|
showPassword |
Default value : false
|
Defined in src/app/app-root/login/login.component.ts:26
|
import { Component, OnDestroy, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { Subscription } from 'rxjs';
import { MainDataService } from '../../maindata.service';
import { AuthData } from '../../app.interfaces';
import { BackendService } from '../../backend.service';
@Component({
templateUrl: './login.component.html',
styles: [
'mat-card {margin: 10px;}',
'.mat-card-box {background: var(--tc-box-background)}',
'#toggle-show-password {cursor: pointer}',
'.mat-form-field {display: block}',
'.mat-card {display: flex; justify-content: start; flex-direction: column; flex-wrap: wrap}',
'.mat-card-content {flex-grow: 1; overflow: auto}'
]
})
export class LoginComponent implements OnInit, OnDestroy {
static oldLoginName = '';
private routingSubscription: Subscription = null;
returnTo = '';
problemText = '';
showPassword = false;
loginForm = new FormGroup({
name: new FormControl(LoginComponent.oldLoginName, [Validators.required, Validators.minLength(3)]),
pw: new FormControl('')
});
constructor(
public mds: MainDataService,
private bs: BackendService,
private router: Router,
private route: ActivatedRoute
) { }
ngOnInit(): void {
this.mds.setSpinnerOff();
this.mds.appSubTitle$.next('Bitte anmelden');
this.routingSubscription = this.route.params
.subscribe(params => { this.returnTo = params.returnTo; });
}
login(): void {
const loginData = this.loginForm.value;
LoginComponent.oldLoginName = loginData.name;
this.mds.setSpinnerOn();
this.bs.login(loginData.name, loginData.pw).subscribe(
authData => {
this.mds.setSpinnerOff();
this.problemText = '';
if (typeof authData === 'number') {
const errCode = authData as number;
if (errCode === 400) {
this.problemText = 'Anmeldedaten sind nicht gültig. Bitte noch einmal versuchen!';
} else if (errCode === 401) {
this.problemText = 'Anmeldung abgelehnt. Anmeldedaten sind noch nicht freigeben.';
} else if (errCode === 204) {
this.problemText = 'Anmeldedaten sind gültig, aber es sind keine Arbeitsbereiche oder Tests freigegeben.';
} else if (errCode === 410) {
this.problemText = 'Anmeldedaten sind abgelaufen';
} else {
this.problemText = 'Problem bei der Anmeldung.';
// app.interceptor will show error message
}
} else {
const authDataTyped = authData as AuthData;
this.mds.setAuthData(authDataTyped);
if (this.returnTo) {
this.router.navigateByUrl(this.returnTo).then(navOk => {
if (!navOk) {
this.router.navigate(['/r']);
}
});
} else {
this.router.navigate(['/r']);
}
}
}
);
}
ngOnDestroy(): void {
if (this.routingSubscription !== null) {
this.routingSubscription.unsubscribe();
}
}
}
<div fxLayout="row wrap" fxLayoutAlign="center stretch">
<form [formGroup]="loginForm" (ngSubmit)="login()">
<mat-card fxFlex="0 0 400px">
<mat-card-title>Anmelden</mat-card-title>
<mat-card-content *ngIf="mds.appConfig?.isValidApiVersion">
<mat-form-field>
<input matInput formControlName="name" placeholder="Anmeldename" (keyup.enter)="pw.focus()">
</mat-form-field>
<mat-form-field>
<input matInput #pw [type]="showPassword ? 'text' : 'password'" formControlName="pw" placeholder="Kennwort">
<mat-icon
id="toggle-show-password"
(click)="showPassword = !showPassword"
[style]="!showPassword ? 'color:silver' : ''"
matSuffix
>
visibility
</mat-icon>
</mat-form-field>
<alert level="error" *ngIf="problemText" [text]="problemText"></alert>
<alert *ngIf="mds.globalWarning" level="warning" [text]="mds.globalWarning"></alert>
</mat-card-content>
<mat-card-content *ngIf="!mds.appConfig?.isValidApiVersion">
<alert level="error" text="Die Verbindung mit dem Server ist nicht möglich."></alert>
</mat-card-content>
<mat-card-actions>
<button mat-raised-button type="submit" [disabled]="loginForm.invalid" color="primary">Weiter</button>
</mat-card-actions>
</mat-card>
</form>
<mat-card fxFlex="0 0 400px" class="mat-card-box">
<mat-card-title>{{mds.appTitle$ | async}}</mat-card-title>
<mat-card-subtitle>{{mds.appSubTitle$ | async}}</mat-card-subtitle>
<mat-card-content>
<div [innerHTML]="mds.appConfig?.trustedIntroHtml"></div>
<status-card></status-card>
</mat-card-content>
<mat-card-actions>
<button *ngIf="this.mds.sysCheckAvailable" [routerLink]="['/r/check-starter']" mat-raised-button color="primary">System-Check</button>
<button [routerLink]="['/legal-notice']" mat-raised-button color="primary">Impressum/Datenschutz</button>
</mat-card-actions>
</mat-card>
</div>
mat-card {margin: 10px;}
.mat-card-box {background: var(--tc-box-background)}
#toggle-show-password {cursor: pointer}
.mat-form-field {display: block}
.mat-card {display: flex; justify-content: start; flex-direction: column; flex-wrap: wrap}
.mat-card-content {flex-grow: 1; overflow: auto}