feat: add router mock

.prettierrc

@@ -4,6 +4,6 @@
   "singleQuote": true,
   "tabWidth": 2,
   "trailingComma": "es5",
-  "printWidth": 100,
+  "printWidth": 80,
   "arrowParens": "always"
 }
\ No newline at end of file

src/js/modules/login/Router.mjs

+const requestEndpoints = {
+  root: '/',
+  login: '/login',
+  registration: '/registration',
+};
+
+const DEFAULT_PATHNAME = requestEndpoints.login;
+
+export default class Router {
+  static renderContent() {
+    const curentPathname = window.location.pathname;
+
+    switch (curentPathname) {
+      case requestEndpoints.root:
+      case requestEndpoints.registration:
+        console.log('This is welcome or registration page!');
+        break;
+
+      case requestEndpoints.login:
+        console.log('This is login page!');
+        break;
+
+      default:
+        console.log('404 not found');
+    }
+  }
+
+  static handlePageState(event) {
+    event.preventDefault();
+    const targetURL = event.target.getAttribute('href');
+
+    if (targetURL !== window.location.pathname) {
+      window.history.pushState(
+        {
+          requestEndpoint: targetURL,
+        },
+        '',
+        targetURL
+      );
+
+      this.renderContent();
+    }
+  }
+
+  static triggerOnPageLoad() {
+    window.addEventListener('beforeunload', () => {
+      localStorage.setItem('unload', Date.now());
+    });
+
+    const DECIDED_TIME = 1000;
+
+    const lastUnload = localStorage.getItem('unload');
+    const lastUnloadTimestamp = parseInt(lastUnload, 10);
+
+    if (lastUnload)
+      if (Date.now() - lastUnloadTimestamp <= DECIDED_TIME) {
+        let currentPathname = DEFAULT_PATHNAME;
+
+        if (
+          window.location.pathname === requestEndpoints.root ||
+          window.location.pathname === requestEndpoints.login
+        )
+          currentPathname = DEFAULT_PATHNAME;
+        else currentPathname = window.location.pathname;
+
+        window.history.replaceState(
+          {
+            requestEndpoint: currentPathname,
+          },
+          '',
+          currentPathname
+        );
+
+        this.renderContent();
+      } else {
+        window.history.replaceState(
+          {
+            requestEndpoint: requestEndpoints.login,
+          },
+          '',
+          requestEndpoints.login
+        );
+        this.renderContent();
+      }
+  }
+}

src/pages/login/index.html

@@ -58,42 +58,26 @@
             <!-- Form column start -->
             <div class="login__form-col">
               <form action="#" class="login__form">
-                <div class="form__title">Register</div>
+                <div class="form__title">Login</div>
                 <div class="form__subtitle">Welcome back.</div>
 
                 <div class="form__item">
-                  <label for="#" class="form__label">
-                    Username:
-                  </label>
+                  <label for="#" class="form__label"> Username: </label>
                   <input type="text" class="form__input" />
                   <div class="error"></div>
                 </div>
 
                 <div class="form__item">
-                  <label for="#" class="form__label">
-                    E-Mail:
-                  </label>
-                  <input type="email" class="form__input" />
-                  <div class="error"></div>
-                </div>
-
-                <div class="form__item">
-                  <label for="#" class="form__label">
-                    Password:
-                  </label>
+                  <label for="#" class="form__label"> Password: </label>
                   <input type="text" class="form__input" />
                   <div class="error"></div>
                 </div>
 
-                <button class="form__btn">
-                  Register
-                </button>
+                <button class="form__btn">Login</button>
 
                 <div class="login__account">
-                  Already have an account?
-                  <a href="#" target="_blank" class="login__account-join">
-                    Login
-                  </a>
+                  Don’t have an account?
+                  <a href="/registration" class="login__account-join"> Join </a>
                 </div>
               </form>
             </div>
@@ -104,3 +88,58 @@
     </div>
   </body>
 </html>
+
+<!-- 
+<div class="login">
+  <div class="login__container">
+    <div class="login__row">
+      <div class="login__logo-col">
+        <div class="logo-col__title">
+          <h1>
+            Let's
+            <mark class="logo-col__title-sp">Do</mark>
+          </h1>
+        </div>
+        <div class="logo-col__logo">
+          <img
+            class="logo-col__pic"
+            src="../../assets/images/login/owl.png"
+            alt="Logo"
+          />
+          <div class="logo-col__anim"></div>
+        </div>
+      </div>
+      <div class="login__form-col">
+        <form action="#" class="login__form">
+          <div class="form__title">Register</div>
+          <div class="form__subtitle">Welcome back.</div>
+
+          <div class="form__item">
+            <label for="#" class="form__label"> Username: </label>
+            <input type="text" class="form__input" />
+            <div class="error"></div>
+          </div>
+
+          <div class="form__item">
+            <label for="#" class="form__label"> E-Mail: </label>
+            <input type="email" class="form__input" />
+            <div class="error"></div>
+          </div>
+
+          <div class="form__item">
+            <label for="#" class="form__label"> Password: </label>
+            <input type="text" class="form__input" />
+            <div class="error"></div>
+          </div>
+
+          <button class="form__btn">Register</button>
+
+          <div class="login__account">
+            Already have an account?
+            <a href="/login" class="login__account-join"> Login </a>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</div> -->

src/pages/login/script.mjs

 import './index.html';
 import './style.scss';
+import Router from '../../js/modules/login/Router.mjs';
+
+const loginSwitcher = document.querySelector('.login__account-join');
+
+window.addEventListener('load', () => {
+  Router.triggerOnPageLoad();
+});
+
+loginSwitcher.addEventListener('click', (e) => {
+  Router.handlePageState(e);
+});

src/pages/login/style.scss

@@ -85,17 +85,18 @@
     font-weight: 300;
     font-size: 16px;
   }
-
-  &__account-join {
-  }
 }
 .logo-col {
   &__title {
-    background: linear-gradient(266.66deg, $pinkish-purple 1.54%, $nebula-purple 101.33%);
+    background: linear-gradient(
+      266.66deg,
+      $pinkish-purple 1.54%,
+      $nebula-purple 101.33%
+    );
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
-    text-fill-color: transparent;
+    color: transparent;
     font-style: 36px;
     font-weight: 700;
   }
@@ -175,7 +176,7 @@
     border-radius: 10px;
     background: #f9f2ff;
     color: $pinkish-purple;
-    margin-bottom: 28px;
+    margin-bottom: 58px;
     transition: 0.5s;
 
     &:hover {