Jc 679 authorization feature

apps/angular/src/app/app.component.html

@@ -5,6 +5,6 @@
 	>
 		Anime app
 	</a>
-	<camp-authorization-menu-form/>
+	<camp-authorization-menu/>
 </mat-toolbar>
 <router-outlet></router-outlet>

apps/angular/src/app/features/authorization-menu/authorization-menu.component.html

@@ -1,5 +1,5 @@
 <nav class="authorization-menu">
-	@if (this.usersApiService.user$ | async; as user) {
+	@if (user$ | async; as user) {
 		<div class="greeting-message">
 			Hi,&nbsp;
 			<span>{{user.firstName}}</span>

apps/angular/src/app/features/authorization-menu/authorization-menu.component.ts

@@ -7,7 +7,7 @@ import { RouterPaths } from '@js-camp/angular/core/model/router-paths';
 
 /** Component with authorization navigation menu. */
 @Component({
-	selector: 'camp-authorization-menu-form',
+	selector: 'camp-authorization-menu',
 	standalone: true,
 	templateUrl: './authorization-menu.component.html',
 	styleUrl: './authorization-menu.component.css',
@@ -19,13 +19,15 @@ import { RouterPaths } from '@js-camp/angular/core/model/router-paths';
 })
 export class AuthorizationMenuComponent {
 
+	private readonly authApiService = inject(AuthorizationApiService);
+
+	private readonly usersApiService = inject(UserApiService);
+
 	/** Enum with paths for link. */
 	protected readonly routerPaths = RouterPaths;
 
-	/** Service for managing current user. */
-	protected readonly usersApiService = inject(UserApiService);
-
-	private readonly authApiService = inject(AuthorizationApiService);
+	/** Contains information about current user. */
+	protected readonly user$ = this.usersApiService.user$;
 
 	/** Handle click on log out button. */
 	protected onLogoutClick(): void {

apps/angular/src/app/features/login-form/login-form.component.ts

@@ -62,6 +62,7 @@ export class LoginFormComponent {
 				return throwError(() => error);
 			}),
 			tap(() => {
+				this.loginFormService.form.reset();
 				this.router.navigate([this.routerPaths.Main]);
 			}),
 		)

apps/angular/src/app/features/registration-form/registration-form.component.html

@@ -72,7 +72,6 @@ <h2 class="registration-header">Registration</h2>
 					type="password"
 					placeholder="veryStrongPassW0rd"
 					[formControl]="registrationFormService.form.controls.retypedPassword"
-					type="password"
 				>
 				<mat-error>{{registrationFormService.getErrorMessage('retypedPassword')}}</mat-error>
 			</mat-form-field>

apps/angular/src/app/features/registration-form/registration-form.component.ts

@@ -62,6 +62,7 @@ export class RegistrationFormComponent {
 				return throwError(() => error);
 			}),
 			tap(() => {
+				this.registrationFormService.form.reset();
 				this.router.navigate([this.routerPaths.Main]);
 			}),
 		)

apps/angular/src/core/interceptors/authorization.interceptor.ts

@@ -1,12 +1,11 @@
-import { HttpErrorResponse, HttpEvent, HttpHandlerFn, HttpRequest } from '@angular/common/http';
+import { HttpErrorResponse, HttpEvent, HttpHandlerFn, HttpRequest, HttpStatusCode } from '@angular/common/http';
 import { inject } from '@angular/core';
-
 import { catchError, Observable, switchMap, throwError } from 'rxjs';
 
-import { ServerErrorStatus } from '@js-camp/core/models/server-error-status';
-
 import { AuthorizationApiService } from '../services/authorization-api.service';
-import { LocalStorageService } from '../services/local-storage.service';
+import { LocalStorageForAuthorizationService } from '../services/local-storage-for-authorization.service';
+import { AppConfig } from '../utils/app-config';
+import { UrlConfigService } from '../services/url-config.service';
 
 /**
  * Add header Authorization to a request.
@@ -18,7 +17,11 @@ export function authorizationInterceptor(req: HttpRequest<unknown>, next: HttpHa
 
 	const authorizationService = inject(AuthorizationApiService);
 
-	const localStorageService = inject(LocalStorageService);
+	const localStorageService = inject(LocalStorageForAuthorizationService);
+
+	const appConfig = inject(AppConfig);
+
+	const urlConfigService = inject(UrlConfigService);
 
 	return localStorageService.getAccessToken().pipe(
 		switchMap(accessToken => {
@@ -30,9 +33,13 @@ export function authorizationInterceptor(req: HttpRequest<unknown>, next: HttpHa
 			return next(req);
 		}),
 		catchError((error: unknown) => {
-			if (error instanceof HttpErrorResponse && error.status === ServerErrorStatus.Unauthorized) {
+			if (req.url === `${appConfig.baseApiURL}/${urlConfigService.authorization.refresh}`) {
+				return next(req);
+			}
+			if (error instanceof HttpErrorResponse && error.status === HttpStatusCode.Unauthorized) {
 				return handleTokenExpired(req);
 			}
+			authorizationService.logout();
 			return throwError(() => error);
 		}),
 	);
@@ -66,7 +73,7 @@ export function authorizationInterceptor(req: HttpRequest<unknown>, next: HttpHa
 				if (newAccessToken) {
 					return next(addToken(request, newAccessToken));
 				}
-				return next(request);
+				return throwError(() => new Error('Error handling expired access token'));
 			}),
 			catchError((error: unknown) => {
 				console.error('Error handling expired access token:', error);

apps/angular/src/core/services/authorization-api.service.ts

@@ -4,16 +4,16 @@ import { RegistrationData } from '@js-camp/core/models/registration-data';
 import { RegistrationDataMapper } from '@js-camp/core/mappers/registration-data.mapper';
 import { AuthorizationTokensDto } from '@js-camp/core/dtos/authorization-tokens.dto';
 import { BehaviorSubject, catchError, map, Observable, switchMap, tap, throwError } from 'rxjs';
-
 import { ServerErrorDto } from '@js-camp/core/dtos/server-error.dto';
 import { ServerErrorMapper } from '@js-camp/core/mappers/server-error.mapper';
 import { LoginData } from '@js-camp/core/models/login-data';
 import { LoginDataMapper } from '@js-camp/core/mappers/login-data.mapper';
 import { AuthorizationTokens } from '@js-camp/core/models/authorization-tokens';
 import { AuthorizationTokensMapper } from '@js-camp/core/mappers/authorization-tokens.mapper';
+import { Router } from '@angular/router';
 
 import { UrlConfigService } from './url-config.service';
-import { LocalStorageService } from './local-storage.service';
+import { LocalStorageForAuthorizationService } from './local-storage-for-authorization.service';
 
 /** Authorization API access service. */
 @Injectable({ providedIn: 'root' })
@@ -28,7 +28,9 @@ export class AuthorizationApiService {
 
 	private readonly urlConfigService = inject(UrlConfigService);
 
-	private readonly localStorageService = inject(LocalStorageService);
+	private readonly localStorageService = inject(LocalStorageForAuthorizationService);
+
+	private readonly router = inject(Router);
 
 	public constructor() {
 		this.localStorageService.getAccessToken().subscribe(token => {
@@ -86,6 +88,7 @@ export class AuthorizationApiService {
 					return this.http.post<AuthorizationTokensDto>(this.urlConfigService.authorization.refresh,
 						{ refresh: refreshToken });
 				}
+				this.logout();
 				return throwError(() => new Error('Failed to refresh token'));
 			}),
 			map(response => AuthorizationTokensMapper.fromDto(response)),
@@ -98,6 +101,7 @@ export class AuthorizationApiService {
 	public logout(): void {
 		this.localStorageService.removeTokens();
 		this.accessToken$.next(null);
+		this.router.navigate(['/login']);
 	}
 
 	private handleError(errorResponse: HttpErrorResponse): Observable<never> {

apps/angular/src/core/services/local-storage-for-authorization.service.ts

@@ -0,0 +1,46 @@
+import { inject, Injectable } from '@angular/core';
+import { AuthorizationTokens } from '@js-camp/core/models/authorization-tokens';
+import { Observable } from 'rxjs';
+
+import { LocalStorageService } from './local-storage.service';
+
+/** Service for working with local storage. */
+@Injectable({ providedIn: 'root' })
+export class LocalStorageForAuthorizationService {
+
+	private readonly localStorageService = inject(LocalStorageService);
+
+	/**
+	 * Save tokens to local storage.
+	 * @param tokens - Access and refresh tokens.
+	 */
+	public saveTokens(tokens: AuthorizationTokens): void {
+		this.localStorageService.setValue('accessToken', tokens.access);
+		this.localStorageService.setValue('refreshToken', tokens.refresh);
+	}
+
+	/**
+	 * Remove tokens from local storage.
+	 * @param tokens - Access and refresh tokens.
+	 */
+	public removeTokens(): void {
+		this.localStorageService.removeValue('accessToken');
+		this.localStorageService.removeValue('refreshToken');
+	}
+
+	/**
+	 * Get access token from local storage.
+	 * @returns Access token.
+	 */
+	public getAccessToken(): Observable<string | null> {
+		return this.localStorageService.getValue('accessToken');
+	}
+
+	/**
+	 * Get refresh token from local storage.
+	 * @returns Refresh token.
+	 */
+	public getRefreshToken(): Observable<string | null> {
+		return this.localStorageService.getValue('refreshToken');
+	}
+}

apps/angular/src/core/services/local-storage.service.ts

@@ -1,44 +1,42 @@
 import { Injectable } from '@angular/core';
-import { AuthorizationTokens } from '@js-camp/core/models/authorization-tokens';
 import { Observable, of } from 'rxjs';
 
 /** Service for working with local storage. */
 @Injectable({ providedIn: 'root' })
 export class LocalStorageService {
 
 	/**
-	 * Save tokens to local storage.
-	 * @param tokens - Access and refresh tokens.
+	 * Save property to local storage.
+	 * @param name - Property name.
+	 * @param value - Property value.
 	 */
-	public saveTokens(tokens: AuthorizationTokens): void {
-		localStorage.setItem('accessToken', tokens.access);
-		localStorage.setItem('refreshToken', tokens.refresh);
+	public setValue<T>(name: string, value: T): void {
+		localStorage.setItem(name, JSON.stringify(value));
 	}
 
 	/**
-	 * Remove tokens from local storage.
-	 * @param tokens - Access and refresh tokens.
+	 * Get property from local storage.
+	 * @param name - Property name.
+	 * @returns Property with specified name.
 	 */
-	public removeTokens(): void {
-		localStorage.removeItem('accessToken');
-		localStorage.removeItem('refreshToken');
+	public getValue<T>(name: string): Observable<T | null> {
+		const value = localStorage.getItem(name);
+		if (value) {
+			try {
+				return of(JSON.parse(value));
+			} catch (parseError) {
+				console.error(parseError);
+				return of(null);
+			}
+		}
+		return of(null);
 	}
 
 	/**
-	 * Get access token from local storage.
-	 * @returns Access token.
+	 * Remove property from local storage.
+	 * @param name - Property name.
 	 */
-	public getAccessToken(): Observable<string | null> {
-		const accessToken = localStorage.getItem('accessToken');
-		return of(accessToken);
-	}
-
-	/**
-	 * Get refresh token from local storage.
-	 * @returns Refresh token.
-	 */
-	public getRefreshToken(): Observable<string | null> {
-		const refreshToken = localStorage.getItem('refreshToken');
-		return of(refreshToken);
+	public removeValue(name: string): void {
+		localStorage.removeItem(name);
 	}
 }

libs/core/dtos/server-error-attribute.dto.ts

@@ -1,3 +1,4 @@
+/** Error's attribute. The form field whose value caused the error. */
 export enum ServerErrorAttributeDto {
 	NonField = 'non_field_errors',
 	Email = 'email',

libs/core/dtos/user.dto.ts

@@ -1,3 +1,4 @@
+/** Data about user. */
 export type UserDto = {
 	readonly email: string;
 	readonly first_name: string;

libs/core/mappers/authorization-tokens.mapper.ts

@@ -1,6 +1,7 @@
 import { AuthorizationTokensDto } from '../dtos/authorization-tokens.dto';
 import { AuthorizationTokens } from '../models/authorization-tokens';
 
+/** Map authorization tokens model and dto. */
 export namespace AuthorizationTokensMapper {
 
 	/**

libs/core/mappers/login-data.mapper.ts

@@ -1,6 +1,7 @@
 import { LoginDataDto } from '../dtos/login-data.dto';
 import { LoginData } from '../models/login-data';
 
+/** Map user data for login model and dto. */
 export namespace LoginDataMapper {
 
 	/**

libs/core/mappers/registration-data.mapper.ts

@@ -1,6 +1,7 @@
 import { RegistrationDataDto } from '../dtos/registration-data.dto';
 import { RegistrationData } from '../models/registration-data';
 
+/** Map user data for registration model and dto. */
 export namespace RegistrationDataMapper {
 
 	/**

libs/core/mappers/server-error-attribute.mapper.ts

@@ -1,6 +1,7 @@
 import { ServerErrorAttributeDto } from '../dtos/server-error-attribute.dto';
 import { ServerErrorAttribute } from '../models/server-error-attribute';
 
+/** Map server error attribute model and dto. */
 export namespace ServerErrorAttributeMapper {
 	const SERVER_ERROR_ATTRIBUTE_MAP_FROM_DTO: Readonly<Record<ServerErrorAttributeDto, ServerErrorAttribute>> = {
 		[ServerErrorAttributeDto.NonField]: ServerErrorAttribute.NonField,

libs/core/mappers/server-error.mapper.ts

@@ -5,6 +5,7 @@ import { checkIsEnumMember } from '../utils/check-is-enum.util';
 
 import { ServerErrorAttributeMapper } from './server-error-attribute.mapper';
 
+/** Map server error model and dto. */
 export namespace ServerErrorMapper {
 
 	/**

libs/core/mappers/user.mapper.ts

@@ -1,6 +1,7 @@
 import { UserDto } from '../dtos/user.dto';
 import { User } from '../models/user';
 
+/** Map user model and dto. */
 export namespace UserMapper {
 
 	/**