<div class="frame">
  <app-logo></app-logo>
  <div class="login">
    <div [formGroup]="form" class="form">
      <mat-form-field appearance="outline">
        <mat-label>E-Mail Addresse</mat-label>
        <input (keyup.enter)="onLogin()" formControlName="user" matInput />
      </mat-form-field>

      <mat-form-field appearance="outline">
        <mat-label>Passwort</mat-label>
        <input (keyup.enter)="onLogin()" formControlName="pass" matInput type="password" />
      </mat-form-field>
      @if (errorMessage) {
        <p class="error">{{ errorMessage | authMessage }}</p>
      }
      <div class="buttons">
        <app-button class="full-width" (click)="onLogin()">Anmelden</app-button>
        <app-button class="full-width" routerLink="/user/password">Passwort zurücksetzen</app-button>
        <app-button class="full-width" routerLink="/user/new">neuen Benutzer anlegen</app-button>
      </div>
    </div>
  </div>
</div>
