File

src/app/app-root/code-input/code-input.component.ts

Implements

OnInit

Metadata

styles mat-card {margin: 10px;},.mat-card-box {background-color: var(--tc-box-background)}
templateUrl ./code-input.component.html

Index

Properties
Methods

Constructor

constructor(router: Router, messageDialog: MatDialog, cts: CustomtextService, bs: BackendService, mds: MainDataService)
Parameters :
Name Type Optional
router Router No
messageDialog MatDialog No
cts CustomtextService No
bs BackendService No
mds MainDataService No

Methods

codeinput
codeinput()
Returns : void
ngOnInit
ngOnInit()
Returns : void
resetLogin
resetLogin()
Returns : void

Properties

Public bs
Type : BackendService
codeInputControl
Type : FormControl
Decorators :
@ViewChild('codeInputControl')
codeinputform
Default value : new FormGroup({ code: new FormControl('', [Validators.required, Validators.minLength(2)]) })
Public cts
Type : CustomtextService
Public mds
Type : MainDataService
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
Component
Html element with directive

result-matching ""

    No results matching ""