Files
SkydiveLogs/Front/skydivelogs-app/src/app/login-user/login-user.component.html
2021-05-10 19:03:14 +02:00

36 lines
1.5 KiB
HTML

<form [formGroup]="loginForm" (ngSubmit)="onLoginSubmit()" autocomplete="off" style="padding: 10px;">
<p>
<mat-form-field>
<mat-label>{{ 'LoginUser_Username' | translate }}</mat-label>
<input type="text" matInput #username="matInput" formControlName="username"
[ngClass]="{ 'is-invalid': submitted && formCtrls.username.errors }">
<mat-error *ngIf="formCtrls.username.hasError('required')">
{{ 'LoginUser_UsernameRequired' | translate }}
</mat-error>
<mat-error *ngIf="formCtrls.username.hasError('minlength')">
{{ 'LoginUser_UsernamePattern | translate }}
</mat-error>
</mat-form-field>
</p>
<p>
<mat-form-field>
<mat-label>{{ 'LoginUser_Password' | translate }}</mat-label>
<input type="password" matInput formControlName="password"
[ngClass]="{ 'is-invalid': submitted && formCtrls.password.errors }">
<mat-error *ngIf="formCtrls.password.hasError('required')">
{{ 'LoginUser_PasswordRequired' | translate }}
</mat-error>
<mat-error *ngIf="formCtrls.password.hasError('pattern')">
{{ 'LoginUser_PasswordPattern' | translate }}
</mat-error>
</mat-form-field>
</p>
<button [disabled]="loading" mat-raised-button color="accent">
<span *ngIf="loading" class="spinner-border spinner-border-sm mr-1"></span>
{{ 'LoginUser_BtnLogin' | translate }}
</button>
<div *ngIf="error" class="alert alert-danger mt-3 mb-0">{{error}}</div>
</form>