sandre
701a684911
Reviewed-on: #4 Co-authored-by: sandre <perso@sebastienandre.com> Co-committed-by: sandre <perso@sebastienandre.com>
67 lines
2.1 KiB
HTML
67 lines
2.1 KiB
HTML
<form
|
|
focusInvalidInput
|
|
autocomplete="off"
|
|
style="padding: 10px"
|
|
[formGroup]="loginForm"
|
|
(ngSubmit)="onLoginSubmit()"
|
|
>
|
|
<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,
|
|
}"
|
|
/>
|
|
@if (formCtrls["username"].hasError("required")) {
|
|
<mat-error>
|
|
{{ "LoginUser_UsernameRequired" | translate }}
|
|
</mat-error>
|
|
}
|
|
@if (formCtrls["username"].hasError("minlength")) {
|
|
<mat-error>
|
|
{{ '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,
|
|
}"
|
|
/>
|
|
@if (formCtrls["password"].hasError("required")) {
|
|
<mat-error>
|
|
{{ "LoginUser_PasswordRequired" | translate }}
|
|
</mat-error>
|
|
}
|
|
@if (formCtrls["password"].hasError("pattern")) {
|
|
<mat-error>
|
|
{{ "LoginUser_PasswordPattern" | translate }}
|
|
</mat-error>
|
|
}
|
|
</mat-form-field>
|
|
</p>
|
|
|
|
<button [disabled]="loading" mat-raised-button color="accent">
|
|
@if (loading) {
|
|
<span class="spinner-border spinner-border-sm mr-1"></span>
|
|
}
|
|
{{ "LoginUser_BtnLogin" | translate }}
|
|
</button>
|
|
|
|
@if (error) {
|
|
<div class="alert alert-danger mt-3 mb-0">{{ error }}</div>
|
|
}
|
|
</form>
|