Cacher is the code snippet organizer for pro developers

.login-form__actions
	.login-form__select
		select#lang_select.login-form__select
			each item, key in options.countryList
				option(value=key selected=(lang === key ? true : false))= item
		i.login-form__arrow.fa.fa-caret-down
	//- a.login-form__act-btn(href='index.php/restore' data-name='restore')= options.text.forgot
	if options.text.email
		a.login-form__act-btn(href='mailto:' + options.text.email)= options.text.contactAdmin

export default class LoginForm {
	constructor(options, state) {
		this._elem;
		this.options = options;
		this.form = require('./form.pug')({ options, lang: this._getCookie('langCountry'), restore: state });
		this.restoreHandler = this._restoreHandler.bind(this);
	}

	_getCookie(name) {
		  var matches = document.cookie.match(new RegExp(
		    "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
		  ));
		  return matches ? decodeURIComponent(matches[1]) : undefined;
	}	

	_render() {
		this._elem = document.createElement('div');
		this._elem.innerHTML = this.form;
		this._elem = this._elem.firstElementChild;

		// add events
		this._eventsLogin('add');

		window.addEventListener('popstate', e => {
			if(e.state) {
				this.renderState();
				// remove events
				this._eventsLogin();
			}
			else {
				this.renderState('login');
				// add events
				this._eventsLogin('add');				
			}
		});
	}

	_changeLang(e) {
		window.location.href = '?langCountry=' + e.target.value;
	}

	_restoreHandler(e) {
		// remove events
		this._eventsLogin();
		history.pushState('restore', '', e.target.getAttribute('href'));

		// render new state
		this.renderState();

		e.preventDefault();
	}

	_eventsLogin(action = 'remove') {
		// events
		let langEl = this._elem.querySelector('#lang_select');
		let restoreEl = this._elem.querySelector('[data-name="restore"]');

		if(action === 'add') {
			if(langEl) langEl.addEventListener('change', this._changeLang);
			if(restoreEl) restoreEl.addEventListener('click', this.restoreHandler);
		}
		else {
			if(langEl) langEl.removeEventListener('change', this._changeLang);
			if(restoreEl) restoreEl.removeEventListener('click', this.restoreHandler);			
		}
	}

	renderState(state = 'restore') {
		const options = this.options;
		const actions = this._elem.querySelector('.login-form__actions');
		const wrapper = this._elem.querySelector('.login-form__wrapper');
		const body = this._elem.querySelector('.login-form__body');
		let template = state;

		if(state === 'login') {
			this._eventsLogin('add'); //add events
			wrapper.classList.remove('login-form__wrapper--restore');
			body.classList.remove('login-form__body--restore');
			wrapper.parentNode.insertAdjacentHTML('beforeEnd', require('./actions.pug')({ options }));
		}
		else {
			this._eventsLogin(); // remove events
			wrapper.classList.add('login-form__wrapper--restore');
			body.classList.add('login-form__body--restore');
			if(actions) actions.parentNode.removeChild(actions);
		}

		this._elem.querySelector('.login-form__body').innerHTML = require('./'+ state +'.pug')({ options });
	}	

	getElem() {
		this._render();
		return this._elem;
	}
};

import LoginForm from './modules/LoginForm';

const pathname = location.pathname.split('/');
const loginForm = new LoginForm(settings, history.state || pathname[pathname.length - 1]);

document.addEventListener('DOMContentLoaded', () => {
	document.body.appendChild(loginForm.getElem());
});

input.login-form__input(
	type='email' 
	name='email' 
	required 
	placeholder='E-mail'
)
button.login-form__button= options.text.resetPassword

mixin error(value)
	.login-form__error.color-red.fz-14.text-center= value

input.login-form__input(
	type='text' 
	name='login_name' 
	required 
	placeholder= options.text.login
)
input.login-form__input(
	type='password' 
	name='login_pass' 
	required 
	placeholder= options.text.password
)
if options.errors.captcha
	.g-recaptcha(data-sitekey="6Leg-QcTAAAAAPBs1uRjzOqxNa8z-mJlynOcKEWF")

if options.errors.accessDenied
	+error(options.errors.accessDenied)

if options.errors.captchaMessage
	+error(options.errors.captchaMessage)

if options.errors.bruteforce
	+error(options.errors.bruteforce)

.text-center
	button.login-form__button= options.text.login

include ./mixins

.login-form
	form(method='post' action='')
		if options.accountChanged
			#enter !{options.text.accountChanged}
		input(type='hidden' name='login' value='1')
		input(name='submit' type='hidden' value='Login')
		.login-form__wrapper(class=(restore ? 'login-form__wrapper--restore': false))
			.login-form__caption(class=(restore ? 'w-100': false))
				span.login-form__logo
				span.dib.dib--middle.bold= options.text.title

			.login-form__body(class=(restore ? 'login-form__body--restore': false))
				if restore
					include ./restore
				else
					include ./login
		if !restore
			include ./actions