without template

package.json

@@ -6,6 +6,7 @@
     "dompurify": "^3.1.7",
     "esm": "^3.2.25",
     "express": "^4.21.0",
+    "handlebars": "^4.7.8",
     "morgan": "^1.10.0",
     "path": "^0.12.7",
     "require": "^0.4.4",

src/auth/loginView.js

@@ -1,98 +1,45 @@
-import { state } from "../consts.js";
+import Handlebars from 'handlebars';
+import { state, ELEMENTS_CLASS } from "../consts.js";
 import { goToPage } from "../index.js";
 import { authLogin, validateErrorLoginForm } from "./login.js";
-import { ELEMENTS, ELEMENTS_CLASS } from "../consts.js";
+import loginTemplate from '../templates/loginTemplate.hbs'; 
 
-export const form = document.createElement(ELEMENTS.FORM);
 export let attempts = 0;
 
 export function renderLogin() {
-  const backgroundLayer = document.createElement(ELEMENTS.DIV);
-  backgroundLayer.className = ELEMENTS_CLASS.BACKGROUND_LOGIN;
-
-  const loginContainer = document.createElement(ELEMENTS.DIV);
-  const h2 = document.createElement(ELEMENTS.H2);
-  const form = document.createElement(ELEMENTS.FORM);
-  const inputLogin = document.createElement(ELEMENTS.INPUT);
-  const inputPassword = document.createElement(ELEMENTS.INPUT);
-  const submitButton = document.createElement(ELEMENTS.INPUT);
-  const registerLink = document.createElement(ELEMENTS.DIV);
-  const registerLinkAnchor = document.createElement(ELEMENTS.A);
-  const closeBtn = document.createElement(ELEMENTS.BUTTON);
-  const passwordEye = document.createElement(ELEMENTS.I);
-
-  closeBtn.className = ELEMENTS_CLASS.CLOSE_BTN;
-  closeBtn.innerHTML = "x";
-  closeBtn.onclick = () => {
-    goToPage(state.menuElements.home);
+  const templateContext = {
+    ELEMENTS_CLASS
   };
+  document.getElementById('app').innerHTML = loginTemplate(templateContext); 
 
-  loginContainer.className = ELEMENTS_CLASS.LOGIN_CONTAINER;
-
-  loginContainer.appendChild(closeBtn);
-  loginContainer.appendChild(h2);
-
-  h2.textContent = "Вход";
-
-  loginContainer.appendChild(form);
-
-  inputLogin.type = "text";
-  inputLogin.placeholder = "Введите email или имя пользователя";
-  inputLogin.required = true;
-  form.appendChild(inputLogin);
-
-  passwordEye.className = ELEMENTS_CLASS.PASSWORD_EYE;
-  passwordEye.innerHTML = "👀"; 
-  form.appendChild(passwordEye);
-
-  inputPassword.type = "password";
-  inputPassword.placeholder = "Введите пароль";
-  inputPassword.required = true;
-  form.appendChild(inputPassword);
+  const form = document.getElementById('loginForm');
+  const inputLogin = document.getElementById('inputLogin');
+  const inputPassword = document.getElementById('inputPassword');
+  const passwordEye = document.getElementById('passwordEye');
+  const registerLink = document.getElementById('registerLink');
 
 
   passwordEye.addEventListener("click", () => {
     if (inputPassword.type === "password") {
       inputPassword.type = "text";
-      passwordEye.innerHTML = "👁"; // change the eye icon to open eye
+      passwordEye.innerHTML = "👁"; 
     } else {
       inputPassword.type = "password";
-      passwordEye.innerHTML = "👀"; // change the eye icon to closed eye
+      passwordEye.innerHTML = "👀"; 
     }
   });
 
-  submitButton.type = "submit";
-  submitButton.value = "Войти";
-  form.appendChild(submitButton);
-
-  registerLink.className = ELEMENTS_CLASS.SIGNUP_LINK;
-  registerLink.textContent = "У вас нет аккаунта? ";
-  registerLinkAnchor.textContent = "Зарегистрируйтесь";
-  registerLink.appendChild(registerLinkAnchor);
-  loginContainer.appendChild(registerLink);
-
-  registerLinkAnchor.addEventListener("click", () => {
-    goToPage(state.menuElements.signup);
-  });
-
-  submitButton.addEventListener("click", (e) => {
+  form.addEventListener("submit", (e) => {
     e.preventDefault();
     attempts++;
     authLogin(form, inputLogin, inputPassword);
   });
-
-  submitButton.addEventListener("keydown", (e) => {
-    if (e.key === "Enter") {
-      e.preventDefault();
-      attempts++;
-      authLogin(form, inputLogin, inputPassword);
-    }
-  });
-  form.addEventListener("input", (e) => {
+  registerLink.addEventListener("click", (e) => {
     e.preventDefault();
-    validateErrorLoginForm(form, inputLogin, inputPassword);
+    goToPage(state.menuElements.signup);
   });
 
-  backgroundLayer.appendChild(loginContainer);
-  return backgroundLayer;
+  form.addEventListener("input", () => {
+    validateErrorLoginForm(form, inputLogin, inputPassword);
+  });
 }

src/auth/loginView.precompiled.js

@@ -0,0 +1,23 @@
+(function() {
+  var template = Handlebars.template, templates = Handlebars.templates = Handlebars.templates || {};
+templates['loginTemplate.hbs'] = template({"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) {
+    var stack1, alias1=container.lambda, alias2=container.escapeExpression, lookupProperty = container.lookupProperty || function(parent, propertyName) {
+        if (Object.prototype.hasOwnProperty.call(parent, propertyName)) {
+          return parent[propertyName];
+        }
+        return undefined
+    };
+
+  return "<div class=\""
+    + alias2(alias1(((stack1 = (depth0 != null ? lookupProperty(depth0,"ELEMENTS_CLASS") : depth0)) != null ? lookupProperty(stack1,"BACKGROUND_LOGIN") : stack1), depth0))
+    + "\">\n  <div class=\""
+    + alias2(alias1(((stack1 = (depth0 != null ? lookupProperty(depth0,"ELEMENTS_CLASS") : depth0)) != null ? lookupProperty(stack1,"LOGIN_CONTAINER") : stack1), depth0))
+    + "\">\n    <button class=\""
+    + alias2(alias1(((stack1 = (depth0 != null ? lookupProperty(depth0,"ELEMENTS_CLASS") : depth0)) != null ? lookupProperty(stack1,"CLOSE_BTN") : stack1), depth0))
+    + "\" onclick=\"goToPage(state.menuElements.home)\">x</button>\n    <h2>Вход</h2>\n    \n    <form id=\"loginForm\" onsubmit=\"handleSubmit(event)\">\n      <input type=\"text\" id=\"inputLogin\" placeholder=\"Введите email или имя пользователя\" required>\n      <i class=\""
+    + alias2(alias1(((stack1 = (depth0 != null ? lookupProperty(depth0,"ELEMENTS_CLASS") : depth0)) != null ? lookupProperty(stack1,"PASSWORD_EYE") : stack1), depth0))
+    + "\" onclick=\"togglePasswordVisibility()\">👁️</i>\n      <input type=\"password\" id=\"inputPassword\" placeholder=\"Введите пароль\" required>\n      <input type=\"submit\" value=\"Войти\">\n\n      <div class=\""
+    + alias2(alias1(((stack1 = (depth0 != null ? lookupProperty(depth0,"ELEMENTS_CLASS") : depth0)) != null ? lookupProperty(stack1,"SIGNUP_LINK") : stack1), depth0))
+    + "\">\n        У вас нет аккаунта? <a href=\"#\" onclick=\"goToPage(state.menuElements.signup)\">Зарегистрируйтесь</a>\n      </div>\n    </form>\n  </div>\n</div>\n\n";
+},"useData":true});
+})();

src/auth/signupView.js

@@ -0,0 +1,37 @@
+import Handlebars from 'handlebars';
+import { state } from "../consts.js";
+import { goToPage } from "../index.js";
+import { authSignup, validateSignupForm } from "./signup.js";
+import { ELEMENTS_CLASS } from "../consts.js";
+import signupTemplate from '../templates/signupTemplate.hbs'; 
+
+export function renderSignup() {
+  const templateContext = {
+    ELEMENTS_CLASS
+  };
+
+  const backgroundLayer = document.createElement('div');
+  backgroundLayer.innerHTML = signupTemplate(templateContext);
+
+  const form = backgroundLayer.querySelector('#signupForm');
+  const inputUsername = backgroundLayer.querySelector('#inputUsername');
+  const inputPassword = backgroundLayer.querySelector('#inputPassword');
+  const inputRepeatPassword = backgroundLayer.querySelector('#inputRepeatPassword');
+
+
+  form.addEventListener("submit", (e) => {
+    e.preventDefault();
+    authSignup(form, inputUsername, inputPassword, inputRepeatPassword);
+  });
+
+  form.addEventListener("input", () => {
+    validateSignupForm(form, inputUsername, inputPassword, inputRepeatPassword);
+  });
+
+  const closeBtn = backgroundLayer.querySelector('.{{ELEMENTS_CLASS.CLOSE_BTN}}');
+  closeBtn.onclick = () => {
+    goToPage(state.menuElements.home);
+  };
+
+  return backgroundLayer;
+}

src/auth/signupView.precompiled.js

@@ -0,0 +1,19 @@
+(function() {
+  var template = Handlebars.template, templates = Handlebars.templates = Handlebars.templates || {};
+templates['signupTemplate.hbs'] = template({"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) {
+    var stack1, alias1=container.lambda, alias2=container.escapeExpression, lookupProperty = container.lookupProperty || function(parent, propertyName) {
+        if (Object.prototype.hasOwnProperty.call(parent, propertyName)) {
+          return parent[propertyName];
+        }
+        return undefined
+    };
+
+  return "<script id=\"signup-template\" type=\"text/x-handlebars-template\">\n  <div class=\""
+    + alias2(alias1(((stack1 = (depth0 != null ? lookupProperty(depth0,"ELEMENTS_CLASS") : depth0)) != null ? lookupProperty(stack1,"BACKGROUND_SIGNUP") : stack1), depth0))
+    + "\">\n    <form class=\""
+    + alias2(alias1(((stack1 = (depth0 != null ? lookupProperty(depth0,"ELEMENTS_CLASS") : depth0)) != null ? lookupProperty(stack1,"CONTAINER_SIGNUP") : stack1), depth0))
+    + "\" id=\"signupForm\">\n      <button class=\""
+    + alias2(alias1(((stack1 = (depth0 != null ? lookupProperty(depth0,"ELEMENTS_CLASS") : depth0)) != null ? lookupProperty(stack1,"CLOSE_BTN") : stack1), depth0))
+    + "\" onclick=\"goToPage(state.menuElements.home)\">x</button>\n      <h2>Регистрация</h2>\n      <input type=\"text\" id=\"inputUsername\" placeholder=\"Введите имя пользователя\" required>\n      <input type=\"password\" id=\"inputPassword\" placeholder=\"Придумайте пароль (минимум 8 символов)\" required>\n      <input type=\"password\" id=\"inputRepeatPassword\" placeholder=\"Повторите пароль\" required>\n      <input type=\"submit\" value=\"Зарегистрироваться\" id=\"registerButton\">\n    </form>\n  </div>\n</script>\n";
+},"useData":true});
+})();