File

src/app/app-root/login/login.component.ts

Implements

OnInit OnDestroy

Metadata

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

Index

Properties
Methods

Constructor

constructor(mds: MainDataService, bs: BackendService, router: Router, route: ActivatedRoute)
Parameters :
Name Type Optional
mds MainDataService No
bs BackendService No
router Router No
route ActivatedRoute No

Methods

login
login()
Returns : void
ngOnDestroy
ngOnDestroy()
Returns : void
ngOnInit
ngOnInit()
Returns : void

Properties

loginForm
Default value : new FormGroup({ name: new FormControl(LoginComponent.oldLoginName, [Validators.required, Validators.minLength(3)]), pw: new FormControl('') })
Public mds
Type : MainDataService
Static oldLoginName
Type : string
Default value : ''
problemText
Type : string
Default value : ''
returnTo
Type : string
Default value : ''
Private routingSubscription
Type : Subscription
Default value : null
showPassword
Default value : false
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}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""