36 lines
1.3 KiB
HTML
36 lines
1.3 KiB
HTML
<form [formGroup]="loginForm" (ngSubmit)="onLoginSubmit()" autocomplete="off" style="padding: 10px;">
|
|
<p>
|
|
<mat-form-field>
|
|
<mat-label>Username</mat-label>
|
|
<input matInput #username="matInput" formControlName="username"
|
|
[ngClass]="{ 'is-invalid': submitted && formCtrls.username.errors }">
|
|
<mat-error *ngIf="formCtrls.username.hasError('required')">
|
|
Username is required
|
|
</mat-error>
|
|
<mat-error *ngIf="formCtrls.username.hasError('minlength')">
|
|
Username must have min 3 characters
|
|
</mat-error>
|
|
</mat-form-field>
|
|
</p>
|
|
<p>
|
|
<mat-form-field>
|
|
<mat-label>Password</mat-label>
|
|
<input type="password" matInput formControlName="password"
|
|
[ngClass]="{ 'is-invalid': submitted && formCtrls.password.errors }">
|
|
<mat-error *ngIf="formCtrls.password.hasError('required')">
|
|
Password is required
|
|
</mat-error>
|
|
<mat-error *ngIf="formCtrls.password.hasError('pattern')">
|
|
The pattern of the password ([A-Za-z0-9_-] {{ '{' }}8,15{{ '}' }})
|
|
</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>
|
|
Login
|
|
</button>
|
|
|
|
<div *ngIf="error" class="alert alert-danger mt-3 mb-0">{{error}}</div>
|
|
</form>
|