77 lines
2.5 KiB
HTML
77 lines
2.5 KiB
HTML
<mat-sidenav-container class="formLogin">
|
|
|
|
<mat-card>
|
|
<p class="mat-h3">
|
|
Вход в систему
|
|
</p>
|
|
|
|
<form [formGroup]="loginForm">
|
|
<mat-form-field color="accent">
|
|
<mat-label>Имя пользователя/email</mat-label>
|
|
<input matInput
|
|
formControlName="user"
|
|
matTooltip='Укажите имя пользователя используя латинские буквы и цифры без пробелов или email'
|
|
required
|
|
focusNext="passwordNextFocus">
|
|
|
|
@if (loginForm.get('user')?.hasError('required')) {
|
|
<mat-error>
|
|
Имя пользователя или email является <i>обязательным</i>
|
|
</mat-error>
|
|
}
|
|
|
|
@if (loginForm.get('user')?.hasError('minlength')) {
|
|
<mat-error>
|
|
Количество символов должно быть не менее 4
|
|
</mat-error>
|
|
}
|
|
</mat-form-field>
|
|
|
|
<mat-form-field color="accent" style="margin-bottom: 20px">
|
|
<mat-label>Пароль</mat-label>
|
|
<input matInput
|
|
matTooltip="Укажите пароль"
|
|
formControlName="password"
|
|
required
|
|
[type]="hidePass ? 'password' : 'text'"
|
|
id="passwordNextFocus"
|
|
focusNext="loginNextFocus">
|
|
|
|
<button mat-icon-button matSuffix (click)="togglePassword($event)" [attr.aria-label]="'Hide password'"
|
|
[attr.aria-pressed]="hidePass">
|
|
<mat-icon>{{ hidePass ? 'visibility_off' : 'visibility' }}</mat-icon>
|
|
</button>
|
|
|
|
@if (loginForm.get('password')?.hasError('required')) {
|
|
<mat-error>
|
|
Пароль является <i>обязательным</i>
|
|
</mat-error>
|
|
}
|
|
|
|
@if (loginForm.get('password')?.hasError('minlength')) {
|
|
<mat-error>
|
|
Пароль должен быть не менее 8 символов
|
|
</mat-error>
|
|
}
|
|
</mat-form-field>
|
|
</form>
|
|
|
|
<mat-error>
|
|
{{ errorText }}
|
|
</mat-error>
|
|
|
|
<div class="formLoginButton">
|
|
@if (loaderActive) {
|
|
<app-data-spinner [scale]="40"/>
|
|
} @else {
|
|
<button mat-flat-button color="accent"
|
|
[disabled]="loginButtonIsDisable"
|
|
(click)="login()"
|
|
id="loginNextFocus">
|
|
Войти
|
|
</button>
|
|
}
|
|
</div>
|
|
</mat-card>
|
|
</mat-sidenav-container>
|