diff --git a/.prettierrc b/.prettierrc
index c4724f0668f34772c36233b68dd64137116288af..565b1aae1a0b6a67072c56920b3b887f54fc38fe 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -4,6 +4,6 @@
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5",
- "printWidth": 100,
+ "printWidth": 80,
"arrowParens": "always"
}
\ No newline at end of file
diff --git a/src/js/modules/login/Router.mjs b/src/js/modules/login/Router.mjs
new file mode 100644
index 0000000000000000000000000000000000000000..1bdf4073357e7f55b5a88660e96e4ae40f571a42
--- /dev/null
+++ b/src/js/modules/login/Router.mjs
@@ -0,0 +1,86 @@
+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();
+ }
+ }
+}
diff --git a/src/pages/login/index.html b/src/pages/login/index.html
index 7eca98645cd072297e6f62293236314750cf38bd..d0d71b1ad16acab044e9f9de9d353d193bfd88ca 100644
--- a/src/pages/login/index.html
+++ b/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> -->
diff --git a/src/pages/login/script.mjs b/src/pages/login/script.mjs
index 94fbf426181e23e56e00f7f737e22c1e39d8389e..a07dc745e8c5cda281bdd10b6b31e6a1f0df4912 100644
--- a/src/pages/login/script.mjs
+++ b/src/pages/login/script.mjs
@@ -1,2 +1,13 @@
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);
+});
diff --git a/src/pages/login/style.scss b/src/pages/login/style.scss
index 5cc12ef76e1e9db41fbcf61e283f0aac3238a80d..4ed717f83b6c73bd52fe0140c0d4458098d448c2 100644
--- a/src/pages/login/style.scss
+++ b/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 {