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

feat: implement proper forms replacement when changing routes

parent 2b85a329
No related branches found
No related tags found
3 merge requests!5First version,!3Login page validation,!2Login page routing
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:
......
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;
......@@ -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;
}
}
}
......
%_register-mb {
margin-bottom: 28px;
}
......@@ -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;
}
......
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