From 0079ee7bf278c0a3761e9321eabeb5cba407dbe1 Mon Sep 17 00:00:00 2001 From: Jan-Marlon Leibl Date: Wed, 14 May 2025 12:00:33 +0200 Subject: [PATCH 001/197] feat(auth): add login and registration modal functionality --- frontend/src/app/app.component.html | 40 +++++++++++++- frontend/src/app/app.component.ts | 46 ++++++++++++---- frontend/src/app/app.routes.ts | 10 ---- .../feature/auth/login/login.component.html | 19 +++++-- .../app/feature/auth/login/login.component.ts | 13 +++-- .../auth/register/register.component.html | 19 +++++-- .../auth/register/register.component.ts | 12 +++-- .../feature/landing/landing.component.html | 53 +++++++++++++++---- .../app/feature/landing/landing.component.ts | 28 +++++++++- .../components/navbar/navbar.component.html | 22 ++++---- .../components/navbar/navbar.component.ts | 5 ++ 11 files changed, 212 insertions(+), 55 deletions(-) diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html index 2e3cd9a..2b9d140 100644 --- a/frontend/src/app/app.component.html +++ b/frontend/src/app/app.component.html @@ -1,7 +1,45 @@
- +
+ + + @if (showLogin() || showRegister()) { + + + }
diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts index 3e25d5b..52c1fc3 100644 --- a/frontend/src/app/app.component.ts +++ b/frontend/src/app/app.component.ts @@ -1,16 +1,44 @@ -import { ChangeDetectionStrategy, Component } from '@angular/core'; -import { CommonModule } from '@angular/common'; +import { Component, HostListener, signal } from '@angular/core'; import { RouterOutlet } from '@angular/router'; -import { FooterComponent } from '@shared/components/footer/footer.component'; -import { NavbarComponent } from '@shared/components/navbar/navbar.component'; +import { NavbarComponent } from './shared/components/navbar/navbar.component'; +import { FooterComponent } from './shared/components/footer/footer.component'; +import { LoginComponent } from './feature/auth/login/login.component'; +import { RegisterComponent } from './feature/auth/register/register.component'; @Component({ selector: 'app-root', standalone: true, - imports: [CommonModule, RouterOutlet, FooterComponent, NavbarComponent], - providers: [], + imports: [RouterOutlet, NavbarComponent, FooterComponent, LoginComponent, RegisterComponent], templateUrl: './app.component.html', - styleUrl: './app.component.css', - changeDetection: ChangeDetectionStrategy.OnPush, }) -export class AppComponent {} +export class AppComponent { + showLogin = signal(false); + showRegister = signal(false); + + @HostListener('document:keydown.escape') + handleEscapeKey() { + this.hideAuthForms(); + } + + showLoginForm() { + this.showLogin.set(true); + this.showRegister.set(false); + document.body.style.overflow = 'hidden'; + } + + showRegisterForm() { + this.showRegister.set(true); + this.showLogin.set(false); + document.body.style.overflow = 'hidden'; + } + + hideAuthForms() { + this.showLogin.set(false); + this.showRegister.set(false); + document.body.style.overflow = 'auto'; + } + + stopPropagation(event: MouseEvent) { + event.stopPropagation(); + } +} diff --git a/frontend/src/app/app.routes.ts b/frontend/src/app/app.routes.ts index 86ce3d4..3792038 100644 --- a/frontend/src/app/app.routes.ts +++ b/frontend/src/app/app.routes.ts @@ -7,16 +7,6 @@ export const routes: Routes = [ path: '', component: LandingComponent, }, - { - path: 'login', - loadComponent: () => - import('./feature/auth/login/login.component').then((m) => m.LoginComponent), - }, - { - path: 'register', - loadComponent: () => - import('./feature/auth/register/register.component').then((m) => m.RegisterComponent), - }, { path: 'home', loadComponent: () => import('./feature/home/home.component'), diff --git a/frontend/src/app/feature/auth/login/login.component.html b/frontend/src/app/feature/auth/login/login.component.html index 40fc3e6..9017a95 100644 --- a/frontend/src/app/feature/auth/login/login.component.html +++ b/frontend/src/app/feature/auth/login/login.component.html @@ -1,5 +1,16 @@
-