Skip to content
Snippets Groups Projects
Commit 2b85a329 authored by Yehor Potebenko's avatar Yehor Potebenko
Browse files

feat: add router mock

parent cc18c6a0
No related branches found
No related tags found
3 merge requests!5First version,!3Login page validation,!2Login page routing
......@@ -4,6 +4,6 @@
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5",
"printWidth": 100,
"printWidth": 80,
"arrowParens": "always"
}
\ No newline at end of file
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();
}
}
}
......@@ -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> -->
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);
});
......@@ -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 {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment