Jc 679 authorization feature

apps/angular/src/app/app.component.css

@@ -3,6 +3,15 @@
 }
 
 .header {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
 	width: 100%;
 	border-bottom: 2px var(--border-color) solid;
+	padding: 0 var(--space-m);
+}
+
+.header__logo-link {
+	font-size: var(--font-size-xl);
+	font-weight: var(--font-weight-medium);
 }

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

@@ -1,4 +1,10 @@
 <mat-toolbar class="header">
-  <h1>Anime app</h1>
+  <a
+		class="header__logo-link header__link"
+		[routerLink]="['/' + routerPaths.Main]"
+	>
+		Anime app
+	</a>
+	<camp-authorization-menu/>
 </mat-toolbar>
 <router-outlet></router-outlet>

apps/angular/src/app/app.component.ts

@@ -1,13 +1,26 @@
 import { Component } from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { RouterModule, RouterLink } from '@angular/router';
 import { MatToolbarModule } from '@angular/material/toolbar';
 
+import { RouterPaths } from '../core/model/router-paths';
+
+import { AuthorizationMenuComponent } from './features/authorization-menu/authorization-menu.component';
+
 /** Main component of application. */
 @Component({
 	selector: 'camp-root',
 	templateUrl: './app.component.html',
 	styleUrls: ['./app.component.css'],
 	standalone: true,
-	imports: [RouterModule, MatToolbarModule],
+	imports: [
+		MatToolbarModule,
+		RouterModule,
+		RouterLink,
+		AuthorizationMenuComponent,
+	],
 })
-export class AppComponent {}
+export class AppComponent {
+
+	/** Enum with paths for link. */
+	protected readonly routerPaths = RouterPaths;
+}

apps/angular/src/app/app.routes.ts

@@ -1,11 +1,23 @@
 import { Routes } from '@angular/router';
 
+import { RouterPaths } from '../core/model/router-paths';
+
 import { AnimeDashboardComponent } from './features/anime-dashboard/anime-dashboard.component';
 
 /** Routes object. */
 export const appRoutes: Routes = [
 	{
-		path: '',
+		path: RouterPaths.Main,
 		component: AnimeDashboardComponent,
 	},
+	{
+		path: RouterPaths.Login,
+		loadComponent: () => import('./features/login-form/login-form.component')
+			.then(c => c.LoginFormComponent),
+	},
+	{
+		path: RouterPaths.Registration,
+		loadComponent: () => import('./features/registration-form/registration-form.component')
+			.then(c => c.RegistrationFormComponent),
+	},
 ];

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

@@ -0,0 +1,26 @@
+.authorization-menu {
+	display: flex;
+	flex-direction: row;
+	justify-content: end;
+	gap: var(--space-s);
+}
+
+.greeting-message {
+	font-size: var(--font-size-md);
+	font-weight: var(--font-weight-medium);
+}
+
+.authorization-menu__link {
+	font-size: var(--font-size-md);
+}
+
+.authorization-menu__logout {
+	font-size: var(--font-size-md);
+	background-color: var(--primary-background-color);
+	border: none;
+	padding: 0;
+}
+
+.authorization-menu__logout:hover {
+	cursor: pointer;
+}

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

@@ -0,0 +1,31 @@
+<nav class="authorization-menu">
+	@if (user$ | async; as user) {
+		<div class="greeting-message">
+			Hi,&nbsp;
+			<span>{{user.firstName}}</span>
+			&nbsp;
+			<span>{{user.lastName}}</span>
+			!
+		</div>
+		<button
+			class="authorization-menu__logout"
+			type="button"
+			(click)="onLogoutClick()"
+		>
+			Logout
+		</button>
+	} @else {
+		<a
+			class="authorization-menu__link"
+			[routerLink]="['/' + routerPaths.Registration]"
+		>
+			Register
+		</a>
+		<a
+			class="authorization-menu__link"
+			[routerLink]="['/' + routerPaths.Login]"
+		>
+			Login
+		</a>
+	}
+</nav>

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

@@ -0,0 +1,36 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { UserApiService } from '@js-camp/angular/core/services/users-api.service';
+import { AsyncPipe } from '@angular/common';
+import { AuthorizationApiService } from '@js-camp/angular/core/services/authorization-api.service';
+import { RouterPaths } from '@js-camp/angular/core/model/router-paths';
+
+/** Component with authorization navigation menu. */
+@Component({
+	selector: 'camp-authorization-menu',
+	standalone: true,
+	templateUrl: './authorization-menu.component.html',
+	styleUrl: './authorization-menu.component.css',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [
+		RouterLink,
+		AsyncPipe,
+	],
+})
+export class AuthorizationMenuComponent {
+
+	private readonly authApiService = inject(AuthorizationApiService);
+
+	private readonly usersApiService = inject(UserApiService);
+
+	/** Enum with paths for link. */
+	protected readonly routerPaths = RouterPaths;
+
+	/** Contains information about current user. */
+	protected readonly user$ = this.usersApiService.user$;
+
+	/** Handle click on log out button. */
+	protected onLogoutClick(): void {
+		this.authApiService.logout();
+	}
+}

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

@@ -0,0 +1,29 @@
+:host {
+	--login-form-min-width: 360px;
+}
+
+.login-form-wrapper {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	padding: var(--space-xl);
+}
+
+.login-header {
+	font-size: var(--font-size-xl);
+}
+
+.login-form {
+	min-width: var(--login-form-min-width);
+	padding: var(--space-m);
+	border-radius: 24px;
+	border: 2px var(--border-color) solid;
+	display: flex;
+	flex-direction: column;
+	gap: var(--space-s);
+	align-items: center;
+}
+
+.login-form__field {
+	width: 100%;
+}

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

@@ -0,0 +1,49 @@
+<div class="login-form-wrapper">
+	<h2 class="login-header">Login</h2>
+		<form
+			class="login-form"
+			[formGroup]="loginFormService.form"
+			(ngSubmit)="onLoginSubmit()"
+		>
+
+			<mat-form-field
+				appearance="outline"
+				class="login-form__field"
+			>
+				<mat-label>Email</mat-label>
+				<input
+					matInput
+					type="email"
+					placeholder="ivan.pupkin@gmail.com"
+					[formControl]="loginFormService.form.controls.email"
+				>
+				<mat-error>{{loginFormService.getErrorMessage('email')}}</mat-error>
+			</mat-form-field>
+
+			<mat-form-field
+				appearance="outline"
+				class="login-form__field"
+			>
+				<mat-label>Password</mat-label>
+				<input
+					matInput
+					type="password"
+					placeholder="veryStrongPassW0rd"
+					[formControl]="loginFormService.form.controls.password"
+				>
+				<mat-error>{{loginFormService.getErrorMessage('password')}}</mat-error>
+			</mat-form-field>
+
+			@if (loginFormService.form.hasError('serverError')) {
+				<mat-error>{{loginFormService.form.getError('serverError')}}</mat-error>
+			}
+
+			<button
+				mat-raised-button
+				type="submit"
+			>
+				Login
+			</button>
+
+		</form>
+</div>

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

@@ -0,0 +1,72 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, inject } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatButtonModule } from '@angular/material/button';
+import { AuthorizationApiService } from '@js-camp/angular/core/services/authorization-api.service';
+import { catchError, tap, throwError } from 'rxjs';
+import { HttpErrorResponse } from '@angular/common/http';
+import { Router } from '@angular/router';
+import { RouterPaths } from '@js-camp/angular/core/model/router-paths';
+import { LoginData } from '@js-camp/core/models/login-data';
+
+import { LoginFormService } from './login-form.service';
+
+/** Component with form for authorization. */
+@Component({
+	selector: 'camp-login-form',
+	standalone: true,
+	templateUrl: './login-form.component.html',
+	styleUrl: './login-form.component.css',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [
+		ReactiveFormsModule,
+		MatFormFieldModule,
+		MatInputModule,
+		MatButtonModule,
+	],
+})
+export class LoginFormComponent {
+
+	/** Enum with paths for link. */
+	protected readonly routerPaths = RouterPaths;
+
+	/** Login form management service. */
+	protected readonly loginFormService = inject(LoginFormService);
+
+	private readonly authorizationApiService = inject(AuthorizationApiService);
+
+	private readonly destroyRef = inject(DestroyRef);
+
+	private readonly changeDetectorRef = inject(ChangeDetectorRef);
+
+	private readonly router = inject(Router);
+
+	/** Handle login form submit. */
+	protected onLoginSubmit(): void {
+
+		if (this.loginFormService.form.invalid) {
+			return;
+		}
+
+		const formData = new LoginData(this.loginFormService.form.getRawValue());
+
+		this.authorizationApiService.login(formData).pipe(
+			takeUntilDestroyed(this.destroyRef),
+			catchError((error: unknown) => {
+				if (error instanceof HttpErrorResponse) {
+					this.loginFormService.handleServerError(error);
+					this.changeDetectorRef.markForCheck();
+				}
+				return throwError(() => error);
+			}),
+			tap(() => {
+				this.loginFormService.form.reset();
+				this.router.navigate([this.routerPaths.Main]);
+			}),
+		)
+			.subscribe();
+
+	}
+}