feat: add auth api

package.json

@@ -10,29 +10,29 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^18.1.1",
-    "@angular/cdk": "~18.1.1",
-    "@angular/cdk-experimental": "^18.1.1",
-    "@angular/common": "^18.1.1",
-    "@angular/compiler": "^18.1.1",
-    "@angular/core": "^18.1.1",
-    "@angular/forms": "^18.1.1",
-    "@angular/material": "~18.1.1",
-    "@angular/platform-browser": "^18.1.1",
-    "@angular/platform-browser-dynamic": "^18.1.1",
-    "@angular/router": "^18.1.1",
+    "@angular/animations": "^18.1.3",
+    "@angular/cdk": "~18.1.3",
+    "@angular/cdk-experimental": "^18.1.3",
+    "@angular/common": "^18.1.3",
+    "@angular/compiler": "^18.1.3",
+    "@angular/core": "^18.1.3",
+    "@angular/forms": "^18.1.3",
+    "@angular/material": "~18.1.3",
+    "@angular/platform-browser": "^18.1.3",
+    "@angular/platform-browser-dynamic": "^18.1.3",
+    "@angular/router": "^18.1.3",
     "@progress/kendo-date-math": "^1.5.13",
     "rxjs": "~7.8.1",
     "tslib": "^2.6.3",
     "zone.js": "~0.14.8"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.1.1",
-    "@angular/cli": "^18.1.1",
-    "@angular/compiler-cli": "^18.1.1",
+    "@angular-devkit/build-angular": "^18.1.3",
+    "@angular/cli": "^18.1.3",
+    "@angular/compiler-cli": "^18.1.3",
     "@types/jasmine": "~5.1.4",
     "jasmine-core": "~5.2.0",
-    "karma": "~6.4.3",
+    "karma": "~6.4.4",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.1",
     "karma-jasmine": "~5.1.0",

src/api/RequestBuilder.ts

@@ -98,7 +98,7 @@ export class RequestBuilder {
       data: null,
       silenceMode: false,
       withCredentials: false
-    }
+    };
   }
 
   public reset(): void {

src/api/api.service.ts

@@ -73,17 +73,16 @@ export default abstract class ApiService implements SetRequestBuilderAfterBuild
   }
 
   protected get combinedUrl() {
-    return ApiService.addQuery(ApiService.combineUrls(this.apiUrl, AvailableVersion[this.version], this.basePath, this.request.endpoint), this.request.queryParams)
+    return ApiService.addQuery(ApiService.combineUrls(this.apiUrl, AvailableVersion[this.version], this.basePath, this.request.endpoint), this.request.queryParams);
   }
 
   private makeHttpRequest<Type>(method: 'get' | 'post' | 'delete' | 'put'): Observable<Type> {
     const doneEndpoint = this.combinedUrl;
 
     return this.tokenRefreshService.getTokenRefreshing$().pipe(
-      filter(refreshing => !refreshing),
-      take(1),
-      switchMap(_ => {
-        return this.http.request<Type>(method, doneEndpoint, {
+      filter(isRefreshing => !isRefreshing),
+      switchMap(() =>
+        this.http.request<Type>(method, doneEndpoint, {
           withCredentials: this.request.withCredentials,
           headers: this.request.httpHeaders,
           body: this.request.data
@@ -97,8 +96,8 @@ export default abstract class ApiService implements SetRequestBuilderAfterBuild
             this.request = RequestBuilder.getStandardRequestData();
             throw error;
           })
-        );
-      })
+        )
+      )
     );
   }
 
@@ -138,7 +137,7 @@ export default abstract class ApiService implements SetRequestBuilderAfterBuild
       return this;
 
     const authToken = AuthToken.httpHeader((JSON.parse(token) as AuthToken));
-    authToken.keys().forEach(key => this.request.httpHeaders = this.request.httpHeaders.append(key, authToken.get(key) ?? ''))
+    authToken.keys().forEach(key => this.request.httpHeaders = this.request.httpHeaders.append(key, authToken.get(key) ?? ''));
 
     return this;
   }

src/api/v1/authApiService.ts

@@ -0,0 +1,54 @@
+import {Injectable} from "@angular/core";
+import ApiService, {AvailableVersion} from "@api/api.service";
+import {LoginRequest} from "@api/v1/loginRequest";
+import {TokenResponse} from "@api/v1/tokenResponse";
+import {catchError, of, tap} from "rxjs";
+import {AuthRoles} from "@model/AuthRoles";
+import {AuthService, AvailableAuthenticationProvider} from "@service/auth.service";
+
+@Injectable()
+export default class AuthApiService extends ApiService {
+  public readonly basePath = 'Auth/';
+  public readonly version = AvailableVersion.v1;
+
+  public login(login: LoginRequest) {
+    return this.createRequestBuilder()
+      .setEndpoint('Login')
+      .setData(login)
+      .build<ApiService>()
+      .post<TokenResponse>()
+      .pipe(
+        tap(response => {
+          AuthService.setToken(response, AvailableAuthenticationProvider.Bearer, this.createRequestBuilder().setEndpoint('ReLogin').build<AuthApiService>().combinedUrl);
+          this.tokenRefreshService.startTokenRefresh(response.expiresIn);
+        })
+      );
+  }
+
+  public logout() {
+    return this.createRequestBuilder()
+      .setWithCredentials()
+      .setEndpoint('Logout')
+      .build<ApiService>()
+      .addAuth()
+      .get()
+      .pipe(
+        tap(_ => {
+          localStorage.removeItem(ApiService.tokenKey);
+        })
+      );
+  }
+
+  public getRole(isSilence: boolean = true) {
+    return this.createRequestBuilder()
+      .setSilenceMode(isSilence)
+      .build<ApiService>()
+      .addAuth()
+      .get<AuthRoles>('GetRole')
+      .pipe(
+        catchError(_ => {
+          return of(null);
+        })
+      );
+  }
+}

src/app/app.routes.ts

@@ -8,6 +8,7 @@ import {ScheduleComponent as SetupScheduleComponent} from "@page/setup/schedule/
 import {SetupComponent} from "@page/setup/setup.component";
 import {CreateAdminComponent} from "@page/setup/create-admin/create-admin.component";
 import {SummaryComponent} from "@page/setup/summary/summary.component";
+import {LoginComponent} from "@page/login/login.component";
 
 export const routes: Routes = [
   {path: '', title: 'Расписание', pathMatch: 'full', component: ScheduleComponent},
@@ -22,7 +23,8 @@ export const routes: Routes = [
       {path: 'summary', component: SummaryComponent},
       {path: '', redirectTo: 'welcome', pathMatch: 'full'}
     ]
-  }
+  },
+  {path: 'login', title: 'Вход', component: LoginComponent},
   /*{path: 'not-found', title: '404 страница не найдена'},
   {path: '**', redirectTo: '/not-found'}*/
 ];

src/directives/has-role.directive.ts

@@ -0,0 +1,34 @@
+import {Directive, Input, TemplateRef, ViewContainerRef} from '@angular/core';
+import AuthApiService from "@api/v1/authApiService";
+import {AuthRoles} from "@model/AuthRoles";
+import {catchError, of} from "rxjs";
+
+@Directive({
+  selector: '[appHasRole]',
+  standalone: true,
+  providers: [AuthApiService]
+})
+export class HasRoleDirective {
+  constructor(
+    private templateRef: TemplateRef<any>,
+    private viewContainer: ViewContainerRef,
+    private authService: AuthApiService
+  ) {}
+
+  @Input() set appHasRole(role: AuthRoles) {
+    this.viewContainer.clear();
+
+    this.authService
+      .getRole()
+      .pipe(catchError(error => {
+        this.viewContainer.clear();
+        return of(null);
+      }))
+      .subscribe(data => {
+        if (data === role)
+          this.viewContainer.createEmbeddedView(this.templateRef);
+        else
+          this.viewContainer.clear();
+    })
+  }
+}

src/pages/login/login.component.css

@@ -0,0 +1,26 @@
+.formLogin {
+  display: flex;
+  padding: 20px;
+  justify-content: center;
+  align-items: center;
+  min-height: 40vh;
+  height: auto;
+}
+
+.formLogin mat-card {
+  padding: 25px;
+}
+
+.formLogin p {
+  text-align: center
+}
+
+.formLogin form {
+  display: flex;
+  flex-direction:column;
+}
+
+.formLoginButton {
+  display: flex;
+  justify-content: flex-end;
+}

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>

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();
+      });
+  }
+}

src/pages/schedule/schedule.component.html

@@ -1,5 +1,6 @@
 <mat-sidenav-container class="schedule">
   <app-tabs (eventResult)="result($event)"/>
-  <app-table-header [startWeek]="startWeek" [currentWeek]="currentWeek" (weekEvent)="handleWeekEvent($event)" #tableHeader/>
+  <app-table-header [startWeek]="startWeek" [currentWeek]="currentWeek" (weekEvent)="handleWeekEvent($event)"
+                    #tableHeader/>
   <app-table [currentWeek]="currentWeek" [startWeek]="startWeek" [data]="data" [isLoad]="isLoadTable"/>
 </mat-sidenav-container>

src/services/auth.service.ts

@@ -61,7 +61,7 @@ export class AuthService {
     const token = localStorage.getItem(ApiService.tokenKey);
 
     if (!token)
-      return of();
+      return of({} as TokenResponse);
 
     const authToken = JSON.parse(token) as AuthToken;
 

src/services/token-refresh.service.ts

@@ -1,7 +1,8 @@
-import {BehaviorSubject, interval, Subscription, switchMap} from "rxjs";
+import {BehaviorSubject, filter, interval, Subscription, switchMap} from "rxjs";
 import {Injectable} from "@angular/core";
 import {AuthService} from "@service/auth.service";
 import {environment} from "@environment";
+import ApiService from "@api/api.service";
 
 @Injectable({
   providedIn: 'root',
@@ -15,12 +16,12 @@ export class TokenRefreshService {
     this.setRefreshTokenExpireMs(AuthService.tokenExpiresIn.getTime() - 1000 - Date.now());
 
     authService.tokenChangeError.subscribe(_ => {
-      console.log('Token change error event received');
+      console.debug('Token change error event received');
       this.tokenRefreshing$.next(false);
       this.stopTokenRefresh();
     });
     authService.expireTokenChange.subscribe(date => {
-      console.log('Expire token change event received:', date);
+      console.debug('Expire token change event received:', date);
       this.setRefreshTokenExpireMs(date.getTime() - 1000 - Date.now());
     });
   }
@@ -29,10 +30,15 @@ export class TokenRefreshService {
     if (date)
       this.refreshTokenExpireMs = new Date(date).getTime() - 1000 - Date.now();
 
-    if (!this.tokenRefreshSubscription || this.tokenRefreshSubscription.closed) {
+    console.debug(this.tokenRefreshSubscription);
+    if (this.tokenRefreshSubscription && !this.tokenRefreshSubscription.closed)
+      return;
+
     this.tokenRefreshSubscription = interval(this.refreshTokenExpireMs).pipe(
+      filter(isRefreshing => !isRefreshing),
       switchMap(() => {
         this.tokenRefreshing$.next(true);
+        console.debug('Send query to refresh token');
         return this.authService.refreshToken();
       })
     ).subscribe({
@@ -40,12 +46,11 @@ export class TokenRefreshService {
         this.tokenRefreshing$.next(false);
       },
       error: error => {
-          console.error('Token refresh error:', error);
         this.tokenRefreshing$.next(false);
+        localStorage.removeItem(ApiService.tokenKey);
       }
     });
   }
-  }
 
   public getTokenRefreshing$(): BehaviorSubject<boolean> {
     return this.tokenRefreshing$;
@@ -60,13 +65,12 @@ export class TokenRefreshService {
 
   public setRefreshTokenExpireMs(expireMs: number): void {
     if (expireMs < environment.retryDelay)
-      expireMs = 3000;
+      expireMs = environment.retryDelay;
 
-    console.log(expireMs);
     this.refreshTokenExpireMs = expireMs;
 
+    console.log(expireMs);
     this.stopTokenRefresh();
     this.startTokenRefresh();
   }
 }
-

src/shared/structs/AuthRoles.ts

@@ -0,0 +1,3 @@
+export enum AuthRoles {
+  Admin
+}