spt-crm-frontend/httpdocs/src/app/views/login/login.component.html

<h1>Login</h1>
<form [formGroup]="loginForm" (ngSubmit)="onFormSubmit()" class="form form--small">
    <div class="row row--full">
        <div class="column">
            <p class="error" *ngIf="errorMsg != ''">{{ errorMsg }}</p>
            <p class="error-msg" *ngIf="email.invalid && email.touched && email?.errors?.required">
                E-Mail ist ein Pflichtfeld.
            </p>
            <p class="error-msg" *ngIf="email.invalid && email.touched && email?.errors?.pattern">
                Bitte gültige E-Mail Adresse eingeben.
            </p>
            <p *ngIf="password.invalid && password.touched && password?.errors?.required" class="error-msg">
                Passwort ist ein Pflichtfeld.
            </p>
            <p *ngIf="password.invalid && password.touched && password?.errors?.minlength" class="error-msg">
                Passwort benötigt mindestens {{ password.getError('minlength').requiredLength }} Zeichen.
            </p>
        </div>
    </div>
    <p *ngIf="loginFailed" class="error-msg">
        Fehler beim Login.
    </p>
    <div class="row">
        <label for="email" [class.error]="email.invalid && email.touched && email?.errors?.required">E-Mail</label>
        <input type="email" [class.error]="email.invalid && email.touched && email?.errors?.required" id="email" required name="email" placeholder="E-Mail"
               formControlName="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$"/>
    </div>
    <div class="row">
        <label for="password" [class.error]="password.invalid && password.touched && password?.errors?.required">Passwort</label>
        <input type="password" [class.error]="password.invalid && password.touched && password?.errors?.required" required id="password" name="password" placeholder="Passwort"
               formControlName="password"/>
    </div>
    <div>
        <button type="submit" class="button" [disabled]="!loginForm.valid" title="Log in">Anmelden</button>
    </div>
</form>
<span (click)="forgotPassword()" id="forgot-pw">Passwort vergessen</span>