feat: add login page

src/pages/login/login.component.html

@@ -0,0 +1,76 @@
+<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>