Удалил компонент кнопки-ссылки, добавил валидацию для формы регистрации

build.sh

@@ -16,4 +16,3 @@ handlebars -m public/src/components/input/input.hbs -f public/build/input.js
 handlebars -m public/src/components/wrapper/wrapper.hbs -f public/build/wrapper.js
 handlebars -m public/src/components/footer/footer.hbs -f public/build/footer.js
 handlebars -m public/src/components/button/button.hbs -f public/build/button.js
-handlebars -m public/src/components/link-button/link-button.hbs -f public/build/link-button.js

public/config.js

@@ -5,9 +5,7 @@ const mainPage = {
     home: {
         id: "home",
         linkToLogin: {
-            href: "/login",
-            text: "Попробовать",
-            type: "submit"
+            text: "Попробовать"
         }
     }
 }

public/index.css

@@ -14,7 +14,6 @@
 @import "src/components/button/button.css";
 @import "src/components/wrapper/wrapper.css";
 @import "src/components/footer/footer.css";
-@import "src/components/link-button/link-button.css";
 
 *, *::before, *::after {
     box-sizing: border-box;

public/src/components/button/button.css

@@ -1,16 +1,14 @@
 .submit-btn{
-    width: 100%;
-    min-width: 80px;
     display: flex;
     align-items: center;
     justify-content: center;
     background-color: #56A6F0;
     border-radius: 20px;
+    padding: 8px 16px;
     border: none;
     outline: none;
     color: #ffffff;
     text-align: center;
-    padding: 8px;
     box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
     cursor: pointer;
     transition: 0.3s;
@@ -22,4 +20,8 @@
 
 .submit-btn:active{
     transform: scale(0.98)
+}
+
+.submit-btn.hidden {
+    display: none;
 }

public/src/components/button/button.js

@@ -21,19 +21,22 @@ export class Button {
     }
 
     #addEventListeners(){
-        this.self.addEventListener('click', (e) => {
-            console.log(e)
-            e.preventDefault()
-            this.#onSubmit()
-        });
+        if (this.#onSubmit !== undefined) {
+            this.self.addEventListener('click', (e) => {
+                e.preventDefault()
+                this.#onSubmit()
+            });
+        }
     }
 
     #removeEventListeners(){
         this.self.removeEventListener('click', this.#onSubmit);
     }
 
     remove(){
-        this.#removeEventListeners();
+        if (this.#onSubmit !== undefined) {
+            this.#removeEventListeners();
+        }
     }
 
     render(){

public/src/components/header/header.js

@@ -4,7 +4,8 @@ import '../../../build/header.js';
 import {AppEventMaker} from "../../modules/eventMaker.js";
 import {UserStoreEvents} from "../../stores/user/events.js";
 import {AppUserStore} from "../../stores/user/userStore.js";
-import {LinkButton} from "../link-button/link-button.js";
+import {router} from "../../modules/router.js";
+import {Button} from "../button/button.js";
 
 export class Header {
     #parent;
@@ -37,8 +38,6 @@ export class Header {
 
 
         AppEventMaker.subscribe(UserStoreEvents.SUCCSSESFUL_LOGIN, () => {
-            console.log("log hueg")
-
             if (this.#avatarLink === undefined) {
                 this.#avatarLink = new Link(document.querySelector(".right-container"), this.#config.avatarLink)
                 this.#avatarLink.render()
@@ -57,14 +56,16 @@ export class Header {
         })
 
         AppEventMaker.subscribe(UserStoreEvents.LOGOUT, () => {
-            console.log(this.#avatar.self)
-
             this.#avatarLink.self.hidden = true;
 
             this.#authPageLink.self.classList.remove("hidden");
         });
     }
 
+    handleButtonClick = () => {
+        router.redirect("/login")
+    }
+
     render() {
         console.log("header render")
 
@@ -84,7 +85,7 @@ export class Header {
         rightContainer.appendChild(this.#menu)
 
         if (this.#authPageLink === undefined) {
-            this.#authPageLink = new LinkButton(this.#menu, this.#config.menu.auth)
+            this.#authPageLink = new Button(this.#menu, this.#config.menu.auth, this.handleButtonClick)
             this.#authPageLink.render()
         }
 

public/src/components/home/home.js

@@ -1,5 +1,6 @@
 import "../../../build/home.js"
-import {LinkButton} from "../link-button/link-button.js";
+import {router} from "../../modules/router.js";
+import {Button} from "../button/button.js";
 
 export class Home {
     #parent;
@@ -14,13 +15,17 @@ export class Home {
         return document.getElementById('home');
     }
 
+    handleButtonClick = () => {
+        router.redirect("/login")
+    }
+
     render() {
         this.#parent.insertAdjacentHTML(
             'afterbegin',
             window.Handlebars.templates['home.hbs'](this.#config)
         );
 
-        const link = new LinkButton(document.querySelector(".first"), this.#config.linkToLogin)
+        const link = new Button(document.querySelector(".first"), this.#config.linkToLogin, this.handleButtonClick)
         link.render()
 
     }

public/src/pages/notFound/not-found.js

@@ -1,5 +1,6 @@
 import "../../../build/not-found.js"
-import {LinkButton} from "../../components/link-button/link-button.js";
+import {router} from "../../modules/router.js";
+import {Button} from "../../components/button/button.js";
 
 export default class NotFoundPage {
     #parent;
@@ -19,9 +20,12 @@ export default class NotFoundPage {
     }
 
     remove() {
-
+        this.#parent.innerHTML = '';
     }
 
+    handleButtonClick = () => {
+        router.redirect("/")
+    }
 
     render() {
         console.log("404 page render")
@@ -31,7 +35,7 @@ export default class NotFoundPage {
             window.Handlebars.templates['not-found.hbs'](this.#config)
         );
 
-        const link = new LinkButton(this.self, this.#config.link)
+        const link = new Button(this.self, this.#config.link, this.handleButtonClick)
         link.render()
     }
 }

public/src/pages/register/register.js

@@ -5,6 +5,9 @@ import {Button} from "../../components/button/button.js";
 import {ValidateLogin, ValidatePassword} from "../../shared/validation.js";
 import {AppEventMaker} from "../../modules/eventMaker.js";
 import {inputEvents} from "../../components/input/events.js";
+import {AppDispatcher} from "../../modules/dispathcer.js";
+import {UserActions} from "../../stores/user/userStore.js";
+import {router} from "../../modules/router.js";
 
 export default class RegisterPage {
     #parent;
@@ -29,6 +32,20 @@ export default class RegisterPage {
         return document.getElementById(this.#config.form.id)
     }
 
+    validateData = () => {
+        const validateLogin = this.#validateLogin()
+        const validatePassword = this.#validatePassword()
+        if (validateLogin && validatePassword) {
+
+            AppDispatcher.dispatch({
+                type: UserActions.LOGIN,
+                payload: this.#loginInput.value
+            })
+
+            router.redirect("/")
+        }
+    }
+
     #validateLogin(){
         delete this.#loginInput.self.dataset.error;
 
@@ -52,6 +69,12 @@ export default class RegisterPage {
 
         if (!validationResult.result){
             this.#passwordInput.throwError(validationResult.message);
+            this.#repeatPasswordInput.throwError(validationResult.message);
+        }
+
+        if (this.#passwordInput.value !== this.#repeatPasswordInput.value) {
+            this.#passwordInput.throwError("Пароли не совпадают");
+            this.#repeatPasswordInput.throwError("Пароли не совпадают");
         }
 
         return validationResult.result;
@@ -115,7 +138,7 @@ export default class RegisterPage {
         this.#link = new Link(this.form, this.#config.form.links.loginPage);
         this.#link.render();
 
-        this.#submitBtn = new Button(this.form, this.#config.form.buttons.submitBtn);
+        this.#submitBtn = new Button(this.form, this.#config.form.buttons.submitBtn, this.validateData);
         this.#submitBtn.render();
 
         this.#subscribeToEvents();