diff --git a/.env b/.env index c15062af..ccbdb948 100644 --- a/.env +++ b/.env @@ -7,5 +7,5 @@ VITE_APP_CTP_AUTH_URL=https://auth.europe-west1.gcp.commercetools.com VITE_APP_CTP_API_URL=https://api.europe-west1.gcp.commercetools.com VITE_APP_CTP_SCOPES=manage_orders:green-shop manage_payments:green-shop manage_types:green-shop view_shopping_lists:green-shop manage_customers:green-shop manage_my_orders:green-shop view_orders:green-shop manage_quotes:green-shop view_discount_codes:green-shop view_quote_requests:green-shop manage_order_edits:green-shop manage_products:green-shop manage_quote_requests:green-shop view_quotes:green-shop view_api_clients:green-shop view_order_edits:green-shop manage_shipping_methods:green-shop manage_cart_discounts:green-shop manage_my_shopping_lists:green-shop view_products:green-shop view_categories:green-shop manage_my_payments:green-shop manage_my_profile:green-shop manage_discount_codes:green-shop manage_categories:green-shop manage_shopping_lists:green-shop manage_extensions:green-shop VITE_APP_DEFAULT_SEGMENT='/' -VITE_APP_NEXT_SEGMENT=0 +VITE_APP_NEXT_SEGMENT=1 VITE_APP_PATH_SEGMENTS_TO_KEEP=0 diff --git a/src/app/App/model/AppModel.ts b/src/app/App/model/AppModel.ts index 1e8c85ac..c10af0e7 100644 --- a/src/app/App/model/AppModel.ts +++ b/src/app/App/model/AppModel.ts @@ -20,7 +20,7 @@ class AppModel { private initPages(): Map { const root = this.getHTML(); - const loginPage = new LoginPageModel(root); + const loginPage = new LoginPageModel(root, this.router); const mainPage = new MainPageModel(root); const registrationPage = new RegistrationPageModel(root); const notFoundPage = new NotFoundPageModel(root); diff --git a/src/app/Router/model/RouterModel.ts b/src/app/Router/model/RouterModel.ts index 9a0645dc..841f3eff 100644 --- a/src/app/Router/model/RouterModel.ts +++ b/src/app/Router/model/RouterModel.ts @@ -35,11 +35,11 @@ class RouterModel { const pathParts = path.split(DEFAULT_SEGMENT); const hasRoute = this.pages.has(pathParts.join('')); if (!hasRoute) { - this.navigateTo(PAGES_IDS.NOT_FOUND_PAGE); + window.location.pathname = PAGES_IDS.NOT_FOUND_PAGE; return null; } - this.eventMediator.notify(MEDIATOR_EVENTS.CHANGE_PAGE, pathParts.join()); + this.eventMediator.notify(MEDIATOR_EVENTS.CHANGE_PAGE, pathParts.join('')); return pathParts.join(''); } @@ -50,8 +50,10 @@ class RouterModel { .split(DEFAULT_SEGMENT) .slice(NEXT_SEGMENT, PATH_SEGMENTS_TO_KEEP + NEXT_SEGMENT) .join(DEFAULT_SEGMENT); - const url = `/${pathnameApp}/${route}`; - window.history.pushState({}, '', url); + const url = `${pathnameApp}/${route}`; + + history.pushState({}, '', url); + return window.history; } diff --git a/src/pages/LoginPage/model/LoginPageModel.ts b/src/pages/LoginPage/model/LoginPageModel.ts index e1c3f38e..cf277f45 100644 --- a/src/pages/LoginPage/model/LoginPageModel.ts +++ b/src/pages/LoginPage/model/LoginPageModel.ts @@ -1,21 +1,54 @@ +import type RouterModel from '@/app/Router/model/RouterModel.ts'; import type { PageInterface } from '@/shared/types/interfaces.ts'; +import EventMediatorModel from '@/shared/EventMediator/model/EventMediatorModel.ts'; +import { EVENT_NAMES, MEDIATOR_EVENTS, PAGES_IDS } from '@/shared/constants/enums.ts'; import LoginFormModel from '@/widgets/LoginForm/model/LoginFormModel.ts'; import LoginPageView from '../view/LoginPageView.ts'; class LoginPageModel implements PageInterface { + private eventMediator = EventMediatorModel.getInstance(); + private loginForm = new LoginFormModel(); + private router: RouterModel; + private view: LoginPageView; - constructor(parent: HTMLDivElement) { + constructor(parent: HTMLDivElement, router: RouterModel) { + this.router = router; this.view = new LoginPageView(parent); this.init(); } private init(): boolean { + this.subscribeToEventMediator(); this.view.getAuthWrapper().append(this.loginForm.getHTML()); + this.registerLinkHandler(); + return true; + } + + private registerLinkHandler(): void { + const registerLink = this.view.getRegisterLink(); + + registerLink.addEventListener(EVENT_NAMES.CLICK, (event) => { + event.preventDefault(); + this.router.navigateTo(PAGES_IDS.REGISTRATION_PAGE); + }); + } + + private subscribeToEventMediator(): void { + this.eventMediator.subscribe(MEDIATOR_EVENTS.CHANGE_PAGE, (route) => this.switchPageVisibility(route)); + } + + private switchPageVisibility(route: unknown): boolean { + if (route === PAGES_IDS.LOGIN_PAGE) { + this.view.show(); + } else { + this.view.hide(); + return false; + } return true; } diff --git a/src/pages/LoginPage/view/LoginPageView.ts b/src/pages/LoginPage/view/LoginPageView.ts index 35269d6d..5bb45641 100644 --- a/src/pages/LoginPage/view/LoginPageView.ts +++ b/src/pages/LoginPage/view/LoginPageView.ts @@ -101,6 +101,10 @@ class LoginPageView { return this.page; } + public getRegisterLink(): HTMLAnchorElement { + return this.registerLink; + } + public hide(): boolean { this.page.classList.add(LOGIN_PAGE_STYLES.loginPage_hidden); return true; diff --git a/src/pages/MainPage/model/MainPageModel.ts b/src/pages/MainPage/model/MainPageModel.ts index 4ef5b5a6..0f07f18d 100644 --- a/src/pages/MainPage/model/MainPageModel.ts +++ b/src/pages/MainPage/model/MainPageModel.ts @@ -1,12 +1,32 @@ import type { PageInterface } from '@/shared/types/interfaces.ts'; +import EventMediatorModel from '@/shared/EventMediator/model/EventMediatorModel.ts'; +import { MEDIATOR_EVENTS, PAGES_IDS } from '@/shared/constants/enums.ts'; + import MainPageView from '../view/MainPageView.ts'; class MainPageModel implements PageInterface { + private eventMediator = EventMediatorModel.getInstance(); + private view: MainPageView; constructor(parent: HTMLDivElement) { this.view = new MainPageView(parent); + this.subscribeToEventMediator(); + } + + private subscribeToEventMediator(): void { + this.eventMediator.subscribe(MEDIATOR_EVENTS.CHANGE_PAGE, (route) => this.switchPageVisibility(route)); + } + + private switchPageVisibility(route: unknown): boolean { + if (route === PAGES_IDS.MAIN_PAGE || route === PAGES_IDS.DEFAULT_PAGE) { + this.view.show(); + } else { + this.view.hide(); + return false; + } + return true; } public getHTML(): HTMLDivElement { diff --git a/src/pages/NotFoundPage/model/NotFoundPageModel.ts b/src/pages/NotFoundPage/model/NotFoundPageModel.ts index c689a352..f5b775ed 100644 --- a/src/pages/NotFoundPage/model/NotFoundPageModel.ts +++ b/src/pages/NotFoundPage/model/NotFoundPageModel.ts @@ -1,12 +1,32 @@ import type { PageInterface } from '@/shared/types/interfaces.ts'; +import EventMediatorModel from '@/shared/EventMediator/model/EventMediatorModel.ts'; +import { MEDIATOR_EVENTS, PAGES_IDS } from '@/shared/constants/enums.ts'; + import NotFoundPageView from '../view/NotFoundPageView.ts'; class NotFoundPageModel implements PageInterface { + private eventMediator = EventMediatorModel.getInstance(); + private view: NotFoundPageView; constructor(parent: HTMLDivElement) { this.view = new NotFoundPageView(parent); + this.subscribeToEventMediator(); + } + + private subscribeToEventMediator(): void { + this.eventMediator.subscribe(MEDIATOR_EVENTS.CHANGE_PAGE, (route) => this.switchPageVisibility(route)); + } + + private switchPageVisibility(route: unknown): boolean { + if (route === PAGES_IDS.NOT_FOUND_PAGE) { + this.view.show(); + } else { + this.view.hide(); + return false; + } + return true; } public getHTML(): HTMLDivElement { diff --git a/src/pages/RegistrationPage/model/RegistrationPageModel.ts b/src/pages/RegistrationPage/model/RegistrationPageModel.ts index a3d15327..d4393ff5 100644 --- a/src/pages/RegistrationPage/model/RegistrationPageModel.ts +++ b/src/pages/RegistrationPage/model/RegistrationPageModel.ts @@ -1,12 +1,32 @@ import type { PageInterface } from '@/shared/types/interfaces.ts'; +import EventMediatorModel from '@/shared/EventMediator/model/EventMediatorModel.ts'; +import { MEDIATOR_EVENTS, PAGES_IDS } from '@/shared/constants/enums.ts'; + import RegistrationPageView from '../view/RegistrationPageView.ts'; class RegistrationPageModel implements PageInterface { + private eventMediator = EventMediatorModel.getInstance(); + private view: RegistrationPageView; constructor(parent: HTMLDivElement) { this.view = new RegistrationPageView(parent); + this.subscribeToEventMediator(); + } + + private subscribeToEventMediator(): void { + this.eventMediator.subscribe(MEDIATOR_EVENTS.CHANGE_PAGE, (route) => this.switchPageVisibility(route)); + } + + private switchPageVisibility(route: unknown): boolean { + if (route === PAGES_IDS.REGISTRATION_PAGE) { + this.view.show(); + } else { + this.view.hide(); + return false; + } + return true; } public getHTML(): HTMLDivElement {