File
Implements
Metadata
styles |
mat-card {margin: 10px;},.mat-card-box {background-color: var(--tc-box-background)} |
templateUrl |
./code-input.component.html |
codeInputControl
|
Type : FormControl
|
Decorators :
@ViewChild('codeInputControl')
|
|
codeinputform
|
Default value : new FormGroup({
code: new FormControl('', [Validators.required, Validators.minLength(2)])
})
|
|
Public
cts
|
Type : CustomtextService
|
|
Public
messageDialog
|
Type : MatDialog
|
|
problemText
|
Type : string
|
Default value : ''
|
|
import { Component, OnInit, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import {
CustomtextService, MessageDialogComponent, MessageDialogData, MessageType
} from 'iqb-components';
import { MatDialog } from '@angular/material/dialog';
import { MainDataService } from '../../maindata.service';
import { AuthData } from '../../app.interfaces';
import { BackendService } from '../../backend.service';
@Component({
templateUrl: './code-input.component.html',
styles: [
'mat-card {margin: 10px;}',
'.mat-card-box {background-color: var(--tc-box-background)}'
]
})
export class CodeInputComponent implements OnInit {
@ViewChild('codeInputControl') codeInputControl: FormControl;
problemText = '';
codeinputform = new FormGroup({
code: new FormControl('', [Validators.required, Validators.minLength(2)])
});
constructor(
private router: Router,
public messageDialog: MatDialog,
public cts: CustomtextService,
public bs: BackendService,
public mds: MainDataService
) { }
// eslint-disable-next-line class-methods-use-this
ngOnInit(): void {
setTimeout(() => {
this.mds.appSubTitle$.next('Bitte Code eingeben');
const element = <HTMLElement>document.querySelector('.mat-input-element[formControlName="code"]');
if (element) {
element.focus();
}
});
}
codeinput(): void {
const codeData = this.codeinputform.value;
if (codeData.code.length === 0) {
this.messageDialog.open(MessageDialogComponent, {
width: '400px',
data: <MessageDialogData>{
title: `${this.cts.getCustomText('login_codeInputTitle')}: Leer`,
content: this.cts.getCustomText('login_codeInputPrompt'),
type: MessageType.error
}
});
} else {
this.mds.setSpinnerOn();
this.bs.codeLogin(codeData.code).subscribe(
authData => {
this.mds.setSpinnerOff();
this.problemText = '';
if (typeof authData === 'number') {
const errCode = authData as number;
if (errCode === 400) {
this.problemText = 'Der Code ist leider nicht gültig. Bitte noch einmal versuchen';
} else {
this.problemText = 'Problem bei der Anmeldung.';
// app.interceptor will show error message
}
} else {
const authDataTyped = authData as AuthData;
this.mds.setAuthData(authDataTyped);
this.router.navigate(['/r']);
}
}
);
}
}
resetLogin(): void {
this.mds.setAuthData();
this.router.navigate(['/']);
}
}
<div fxLayout="row wrap" fxLayoutAlign="center stretch">
<mat-card fxFlex="0 0 400px">
<form [formGroup]="codeinputform" (ngSubmit)="codeinput()">
<mat-card-title>{{ 'login_codeInputTitle' | customtext:'login_codeInputTitle' | async }}</mat-card-title>
<mat-card-subtitle>{{ 'login_codeInputPrompt' | customtext:'login_codeInputPrompt' | async }}</mat-card-subtitle>
<mat-card-content>
<mat-form-field>
<input matInput formControlName="code"> <!-- no placeholder! -->
</mat-form-field>
<p style="color: chocolate"><b>{{ problemText }}</b></p>
</mat-card-content>
<mat-card-actions>
<button mat-raised-button type="submit" [disabled]="codeinputform.invalid" color="primary">Weiter</button>
<button mat-raised-button color="foreground" (click)="resetLogin()">Neu anmelden</button>
</mat-card-actions>
</form>
</mat-card>
<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>
<status-card></status-card>
</mat-card-content>
<mat-card-actions>
<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-color: var(--tc-box-background)}
Legend
Html element with directive