Изменил дизайн форм входа и регистрации

build.sh

@@ -1,10 +1,11 @@
 #!/bin/bash
 mkdir -p public/build
 handlebars -m public/src/pages/home/home.hbs -f public/build/home.js
-handlebars -m public/src/pages/login/login.hbs -f public/build/login.js
-handlebars -m public/src/pages/register/register.hbs -f public/build/register.js
 handlebars -m public/src/pages/notFound/not-found.hbs -f public/build/not-found.js
 handlebars -m public/src/pages/notes/notes.hbs -f public/build/notes.js
+handlebars -m public/src/pages/auth/auth.hbs -f public/build/auth.js
+handlebars -m public/src/pages/auth/login/login.hbs -f public/build/login.js
+handlebars -m public/src/pages/auth/register/register.hbs -f public/build/register.js
 handlebars -m public/src/components/image/image.hbs -f public/build/image.js
 handlebars -m public/src/components/header/header.hbs -f public/build/header.js
 handlebars -m public/src/components/note/note.hbs -f public/build/note.js

public/config.js

@@ -1,7 +1,6 @@
 const homePage = {
     id: "home",
     href: "/",
-    needAuth: false,
     linkToLoginPage: {
         text: "Попробовать"
     }
@@ -46,22 +45,10 @@ const header = {
         }
     },
     menu: {
-        home: {
-            href: "/",
-            text: "Главная"
-        },
-        main: {
-            href: "/",
-            text: "Мои заметки"
-        },
         auth: {
             id: "link-to-login",
-            href: "/login",
+            href: "/auth",
             text: "Вход"
-        },
-        register: {
-            href: "/register",
-            text: "Регистрация"
         }
     }
 }
@@ -74,76 +61,62 @@ const wrapper = {
     id: "wrapper"
 }
 
-const profilePage = {
-    href: "/profile",
-    id: "profile-page",
-    logoutBtn: {
-        text: "Выйти"
-    }
-}
-
-const loginPage = {
-    id: "login-page",
-    href: "/login",
-    form: {
-        id: "login-form",
-        inputs: {
-            login: {
-                id: "login",
-                type: 'text',
-                placeholder: 'Введите логин'
+const authPage = {
+    id: "auth-page",
+    href: "/auth",
+    needAuth: false,
+    forms: {
+        login: {
+            id: "login-form",
+            inputs: {
+                login: {
+                    id: "login",
+                    type: 'text',
+                    placeholder: 'Введите логин'
+                },
+                password: {
+                    id: "password",
+                    type: "password",
+                    placeholder: "Введите пароль"
+                }
             },
-            password: {
-                id: "password",
-                type: "password",
-                placeholder: "Введите пароль"
+            buttons: {
+                submitBtn: {
+                    text: "Войти"
+                }
             }
         },
-        links: {
-            registerPage: {
-                href: "/register",
-                text: "Ещё не зарегистрированы?",
-            }
-        },
-        buttons: {
-            submitBtn: {
-                text: "Войти"
-            }
-        }
-    }
-}
-
-const registerPage = {
-    href: "/register",
-    id: "register-page",
-    form: {
-        id: "register-form",
-        inputs: {
-            login: {
-                type: "text",
-                placeholder: "Придумайте логин"
-            },
-            password: {
-                type: "password",
-                placeholder: "Придумайте пароль"
+        register: {
+            id: "register-form",
+            inputs: {
+                login: {
+                    type: "text",
+                    placeholder: "Придумайте логин"
+                },
+                password: {
+                    type: "password",
+                    placeholder: "Придумайте пароль"
+                },
+                repeatPassword: {
+                    type: "password",
+                    placeholder: "Повторите пароль"
+                }
             },
-            repeatPassword: {
-                type: "password",
-                placeholder: "Повторите пароль"
-            }
-        },
-        links: {
-            loginPage: {
-                href: "/login",
-                text: "Уже есть аккаунт?",
-            }
-        },
-        buttons: {
-            submitBtn: {
-                text: "Зарегистрироваться"
+            buttons: {
+                submitBtn: {
+                    text: "Зарегистрироваться"
+                }
             }
         }
     },
+    links: {
+        linkToLogin: {
+            text: "Войти"
+        },
+        linkToRegister: {
+            text: "Регистрация"
+        }
+    }
 }
 
 const notFoundPage = {
@@ -174,9 +147,7 @@ const avatar = {
 export const config = {
     homePage: homePage,
     notesPage: notesPage,
-    loginPage: loginPage,
-    registerPage: registerPage,
-    profilePage: profilePage,
+    authPage: authPage,
     notFoundPage: notFoundPage,
     header: header,
     notes: notes,

public/index.css

@@ -1,6 +1,5 @@
 @import 'src/pages/home/home.css';
-@import "src/pages/login/login.css";
-@import "src/pages/register/register.css";
+@import "src/pages/auth/auth.css";
 @import "src/pages/notFound/not-found.css";
 @import './src/pages/notes/notes.css';
 @import './src/pages/home/home.css';

public/index.js

@@ -14,5 +14,4 @@ wrapper.render();
 const header = new Header(root, config.header);
 header.render();
 
-router.init(wrapper.self, config);
-
+router.init(wrapper.self, config);

public/src/components/button/button.css

@@ -6,7 +6,6 @@
     outline: none;
     color: #ffffff;
     text-align: center;
-    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
     cursor: pointer;
     transition: 0.3s;
 }

public/src/components/header/header.js

@@ -40,7 +40,6 @@ export class Header {
 
         AppEventMaker.subscribe(UserStoreEvents.CHANGE_PAGE, (href) => {
             console.log("CHANGE_PAGE");
-            console.log(href);
             if (href === "/") {
                 if (!AppUserStore.IsAuthenticated()) {
                     this.#authPageLink.self.classList.remove("hidden");

public/src/components/input/input.css

@@ -35,9 +35,10 @@
     position: absolute;
     width: 24px;
     height: 24px;
-    top: 14px;
+    top: 12px;
     right: 16px;
     cursor: pointer;
+    filter: invert(85%) sepia(3%) saturate(47%) hue-rotate(328deg) brightness(80%) contrast(91%);
 }
 
 .input-container .form-label {
@@ -49,7 +50,7 @@
     left: 0.75rem;
     top: 0.75rem;
     padding: 0 0.35rem;
-    color: hsl(220, 3%, 50%);
+    color: #7C7E83;
     background: #fff;
     transition: all 0.35s ease;
 }

public/src/components/input/input.hbs

@@ -6,6 +6,6 @@
 	</div>
 
     {{#if isPassword}}
-        <img class="show-password-btn" src="/src/assets/eye-close.svg">
+        <img class="show-password-btn" src="/src/assets/eye-slash.svg">
     {{/if}}
 </div>

public/src/components/input/input.js

@@ -55,10 +55,10 @@ export class Input {
     #showPassword() {
         if (this.#input.type === "password") {
             this.#input.type = "text";
-            this.#image.src = "/src/assets/eye-open.svg";
+            this.#image.src = "/src/assets/eye.svg";
         } else {
             this.#input.type = "password";
-            this.#image.src = "/src/assets/eye-close.svg";
+            this.#image.src = "/src/assets/eye-slash.svg";
         }
     }
 

public/src/components/wrapper/wrapper.js

@@ -4,13 +4,18 @@ export class Wrapper {
     #parent;
     #config;
 
+    /**
+     * Конструктор класса
+     * @param parent объект родителя
+     * @param config конфиг
+     */
     constructor(parent, config) {
         this.#parent = parent;
         this.#config = config;
     }
 
     get self() {
-        return document.getElementById(`${this.#config.id}`);
+        return document.getElementById(this.#config.id);
     }
 
     render() {