feat: add validation RegistrationForm

stardustmeg · Apr 30, 2024 · 042809f · 042809f
1 parent 8d661d5
commit 042809f
Show file tree

Hide file tree

Showing 3 changed files with 182 additions and 4 deletions.
diff --git a/src/pages/RegistrationPage/model/RegistrationPageModel.ts b/src/pages/RegistrationPage/model/RegistrationPageModel.ts
@@ -1,18 +1,40 @@
+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 { MEDIATOR_EVENTS, PAGES_IDS } from '@/shared/constants/enums.ts';
+import { EVENT_NAMES, MEDIATOR_EVENTS, PAGES_IDS } from '@/shared/constants/enums.ts';
+import RegisterFormModel from '@/widgets/RegistrationForm/model/RegistrationFormModel.ts';
 
 import RegistrationPageView from '../view/RegistrationPageView.ts';
 
 class RegistrationPageModel implements PageInterface {
   private eventMediator = EventMediatorModel.getInstance();
 
+  private registerForm = new RegisterFormModel();
+
+  private router: RouterModel;
+
   private view: RegistrationPageView;
 
-  constructor(parent: HTMLDivElement) {
+  constructor(parent: HTMLDivElement, router: RouterModel) {
     this.view = new RegistrationPageView(parent);
+    this.router = router;
+    this.init();
+  }
+
+  private init(): void {
+    this.view.getAuthWrapper().append(this.registerForm.getHTML());
     this.subscribeToEventMediator();
+    this.loginLinkHandler();
+  }
+
+  private loginLinkHandler(): void {
+    const loginLink = this.view.getLoginLink();
+
+    loginLink.addEventListener(EVENT_NAMES.CLICK, (event) => {
+      event.preventDefault();
+      this.router.navigateTo(PAGES_IDS.LOGIN_PAGE);
+    });
   }
 
   private subscribeToEventMediator(): void {

diff --git a/src/pages/RegistrationPage/view/RegistrationPageView.ts b/src/pages/RegistrationPage/view/RegistrationPageView.ts
@@ -1,33 +1,110 @@
-import { TAG_NAMES } from '@/shared/constants/enums.ts';
+import { PAGE_DESCRIPTION, PAGE_LINK_TEXT, PAGES_IDS, TAG_NAMES } from '@/shared/constants/enums.ts';
 import createBaseElement from '@/shared/utils/createBaseElement.ts';
 
 import REGISTRATION_PAGE_STYLES from './registrationPageView.module.scss';
 
 class RegistrationPageView {
+  private authDescription: HTMLHeadingElement;
+
+  private authWrapper: HTMLDivElement;
+
+  private linksWrapper: HTMLDivElement;
+
+  private loginLink: HTMLAnchorElement;
+
   private page: HTMLDivElement;
 
   private parent: HTMLDivElement;
 
+  private registerSpan: HTMLSpanElement;
+
   constructor(parent: HTMLDivElement) {
     this.parent = parent;
+    this.registerSpan = this.createRegisterSpan();
+    this.loginLink = this.createLoginLink();
+    this.authDescription = this.createAuthDescription();
+    this.linksWrapper = this.createLinksWrapper();
+    this.authWrapper = this.createAuthWrapper();
     this.page = this.createHTML();
   }
 
+  private createAuthDescription(): HTMLHeadingElement {
+    this.authDescription = createBaseElement({
+      cssClasses: [REGISTRATION_PAGE_STYLES.authDescription],
+      innerContent: PAGE_DESCRIPTION.REGISTRATION,
+      tag: TAG_NAMES.H3,
+    });
+
+    return this.authDescription;
+  }
+
+  private createAuthWrapper(): HTMLDivElement {
+    this.authWrapper = createBaseElement({
+      cssClasses: [REGISTRATION_PAGE_STYLES.authWrapper],
+      tag: TAG_NAMES.DIV,
+    });
+
+    this.authWrapper.append(this.linksWrapper, this.authDescription);
+    return this.authWrapper;
+  }
+
   private createHTML(): HTMLDivElement {
     this.page = createBaseElement({
-      cssClasses: [REGISTRATION_PAGE_STYLES.registrationPage],
+      cssClasses: [REGISTRATION_PAGE_STYLES.mainPage],
       tag: TAG_NAMES.DIV,
     });
 
+    this.page.append(this.authWrapper);
     this.parent.append(this.page);
 
     return this.page;
   }
 
+  private createLinksWrapper(): HTMLDivElement {
+    this.linksWrapper = createBaseElement({
+      cssClasses: [REGISTRATION_PAGE_STYLES.linksWrapper],
+      tag: TAG_NAMES.DIV,
+    });
+
+    this.linksWrapper.append(this.loginLink, this.registerSpan);
+    return this.linksWrapper;
+  }
+
+  private createLoginLink(): HTMLAnchorElement {
+    this.loginLink = createBaseElement({
+      attributes: {
+        href: PAGES_IDS.LOGIN_PAGE,
+      },
+      cssClasses: [REGISTRATION_PAGE_STYLES.loginLink],
+      innerContent: PAGE_LINK_TEXT.LOGIN,
+      tag: TAG_NAMES.A,
+    });
+
+    return this.loginLink;
+  }
+
+  private createRegisterSpan(): HTMLSpanElement {
+    this.registerSpan = createBaseElement({
+      cssClasses: [REGISTRATION_PAGE_STYLES.registerSpan],
+      innerContent: PAGE_LINK_TEXT.REGISTRATION,
+      tag: TAG_NAMES.SPAN,
+    });
+
+    return this.registerSpan;
+  }
+
+  public getAuthWrapper(): HTMLDivElement {
+    return this.authWrapper;
+  }
+
   public getHTML(): HTMLDivElement {
     return this.page;
   }
 
+  public getLoginLink(): HTMLAnchorElement {
+    return this.loginLink;
+  }
+
   public hide(): boolean {
     this.page.classList.add(REGISTRATION_PAGE_STYLES.registrationPage_hidden);
     return true;

diff --git a/src/pages/RegistrationPage/view/registrationPageView.module.scss b/src/pages/RegistrationPage/view/registrationPageView.module.scss
@@ -7,3 +7,82 @@
     display: none;
   }
 }
+
+.authWrapper {
+  margin: 0 auto;
+  border-bottom: 10px solid var(--steam-green-800);
+  padding: calc(var(--extra-large-offset) / 2) var(--extra-large-offset);
+  max-width: 500px;
+  background-color: var(--white);
+}
+
+.linksWrapper {
+  position: relative;
+  display: flex;
+  align-self: center;
+  justify-content: space-between;
+  margin: 0 auto;
+  margin-bottom: calc(var(--extra-large-offset) / 2);
+  max-width: 160px;
+
+  &::after {
+    content: '';
+    position: absolute;
+    right: calc(50% - 3px);
+    top: 50%;
+    width: 3px;
+    height: 16px;
+    background-color: var(--noble-gray-800);
+    transform: translate(calc(-50% - 14px), -50%);
+  }
+}
+
+.loginLink,
+.registerSpan {
+  font: var(--medium-font);
+  letter-spacing: 1px;
+}
+
+.registerSpan {
+  color: var(--steam-green-800);
+}
+
+.loginLink {
+  position: relative;
+  color: var(--noble-gray-800);
+  transition: color 0.2s;
+
+  &::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: -4px;
+    width: 100%;
+    height: 2px;
+    background-color: currentcolor;
+    opacity: 0;
+    transform: scaleX(0);
+    transform-origin: center;
+    transition:
+      transform 0.2s,
+      opacity 0.2s;
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      color: var(--steam-green-800);
+
+      &::after {
+        opacity: 1;
+        transform: scaleX(1);
+      }
+    }
+  }
+}
+
+.authDescription {
+  margin-bottom: calc(var(--extra-small-offset) / 2);
+  font: var(--regular-font);
+  letter-spacing: 1px;
+  text-align: center;
+}