feat: implement proper forms replacement when changing routes

src/js/modules/login/Router.mjs

+import renderRegistrationForm from './_UI.mjs';
+
 const requestEndpoints = {
   root: '/',
   login: '/login',
@@ -13,11 +15,12 @@ export default class Router {
     switch (curentPathname) {
       case requestEndpoints.root:
       case requestEndpoints.registration:
-        console.log('This is welcome or registration page!');
+        renderRegistrationForm();
         break;
 
       case requestEndpoints.login:
         console.log('This is login page!');
+
         break;
 
       default:

src/js/modules/login/_UI.mjs

+const REGISTER_TEXT_CONTENT = 'Register';
+
+const renderMailFormItem = () => `
+  <div class="form__item">
+    <label for="#" class="form__label"> E-Mail: </label>
+    <input type="email" class="form__input" />
+    <div class="error"></div>
+  </div>
+`;
+
+const renderLoginAccountField = () => `
+  Already have an account?
+  <a href="/login" class="login__account-join"> Login </a>
+`;
+
+const renderRegistrationForm = () => {
+  const formTitle = document.querySelector('.form__title');
+  const firstFormItem = document.querySelector('.form__item');
+  const formButton = document.querySelector('.form__btn');
+  const loginAccountField = document.querySelector('.login__account');
+
+  formTitle.textContent = REGISTER_TEXT_CONTENT;
+  firstFormItem.insertAdjacentHTML('afterend', renderMailFormItem());
+
+  formButton.textContent = REGISTER_TEXT_CONTENT;
+  formButton.classList.add('_register-mb');
+
+  loginAccountField.innerHTML = renderLoginAccountField();
+};
+
+export default renderRegistrationForm;

src/pages/login/style.scss

@@ -2,6 +2,7 @@
 @import '@scss-modules/global';
 @import '@scss-modules/global-templates';
 @import '@scss-modules/login/palette';
+@import '@scss-modules/login/templates';
 
 .wrapper {
   @extend %wrapper;
@@ -183,6 +184,10 @@
       box-shadow: 0 -2vmin 4vmin #ead4fa inset, 0 3vmin 6vmin #f6eaff inset;
       cursor: pointer;
     }
+
+    &._register-mb {
+      @extend %_register-mb;
+    }
   }
 }
 

src/scss/modules/login/_templates.scss

+%_register-mb {
+  margin-bottom: 28px;
+}

src/webpack/functions/_webpack-config-funcs.mjs

@@ -18,7 +18,8 @@ function optimization() {
     runtimeChunk: 'single',
   };
 
-  if (prodMode) config.minimizer = [new CssMinimizerPlugin(), new TerserPlugin()];
+  if (prodMode)
+    config.minimizer = [new CssMinimizerPlugin(), new TerserPlugin()];
 
   return config;
 }