feat: add login page

src/pages/login/login.component.ts

@@ -0,0 +1,95 @@
+import {Component} from '@angular/core';
+import {MatSidenavContainer} from "@angular/material/sidenav";
+import {MatFormFieldModule} from "@angular/material/form-field";
+import {MatInput} from "@angular/material/input";
+import {MatTooltip} from "@angular/material/tooltip";
+import {MatIcon} from "@angular/material/icon";
+import {MatButton, MatIconButton} from "@angular/material/button";
+import {MatCard} from "@angular/material/card";
+import {FormBuilder, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
+import {FocusNextDirective} from "@/directives/focus-next.directive";
+import {DataSpinnerComponent} from "@component/common/data-spinner/data-spinner.component";
+import AuthApiService from "@api/v1/authApiService";
+import {Router} from "@angular/router";
+import {catchError, of} from "rxjs";
+
+@Component({
+  selector: 'app-login',
+  standalone: true,
+  imports: [
+    MatSidenavContainer,
+    MatFormFieldModule,
+    MatInput,
+    MatTooltip,
+    MatIcon,
+    MatIconButton,
+    MatButton,
+    MatCard,
+    ReactiveFormsModule,
+    FocusNextDirective,
+    DataSpinnerComponent
+  ],
+  templateUrl: './login.component.html',
+  styleUrl: './login.component.css',
+  providers: [AuthApiService]
+})
+export class LoginComponent {
+  protected loginForm!: FormGroup;
+  protected hidePass: boolean = true;
+  protected loaderActive: boolean = false;
+  protected loginButtonIsDisable: boolean = true;
+  protected errorText: string = '';
+
+  constructor(private formBuilder: FormBuilder, private auth: AuthApiService, private route: Router) {
+    this.auth.getRole()
+      .subscribe(data => {
+        if (data != null)
+          route.navigate(['admin']).then();
+      });
+
+    this.loginForm = this.formBuilder.group({
+        user: ['',],
+        password: ['',]
+      }
+    );
+
+    this.loginForm.get('password')?.setValidators([
+      Validators.required,
+      Validators.minLength(8)
+    ]);
+
+    this.loginForm.get('user')?.setValidators([
+      Validators.required,
+      Validators.minLength(4)
+    ]);
+
+    this.loginForm.valueChanges.subscribe(() => {
+      this.loginButtonIsDisable = !this.loginForm.valid;
+    });
+  }
+
+  protected togglePassword(event: MouseEvent) {
+    this.hidePass = !this.hidePass;
+    event.stopPropagation();
+  }
+
+  protected login() {
+    this.loaderActive = true;
+
+    this.auth.login({
+      username: this.loginForm.get('user')?.value,
+      password: this.loginForm.get('password')?.value
+    })
+      .pipe(catchError(error => {
+        this.loaderActive = false;
+        this.errorText = error.error;
+        this.loginButtonIsDisable = true;
+        throw error;
+      }))
+      .subscribe(_ => {
+        this.loaderActive = false;
+        this.errorText = '';
+        this.route.navigate(['admin']).then();
+      });
+  }
+}