javascript_practice/hw10/loginFormConstructor.js

function Password(parent, open) {

	const input = document.createElement('input');
	input.type = 'password';
	parent.appendChild(input);

	const button = document.createElement('button');
	button.type = 'button';
	button.textContent = 'показать';
	parent.appendChild(button);

	button.addEventListener('click', () => {
		this.setOpen(open !== true);
	});

	this.setValue = newValue => input.value = newValue;

	this.getValue = () => input.value;

	this.setOpen = openUpdate => {
		open = openUpdate;
		if(typeof this.onOpenChange === 'function') {
			this.onOpenChange(openUpdate);
		}
		button.textContent = (openUpdate) ? 'показать' : 'скрыть';
		input.type = (openUpdate) ? 'password' : 'text';
	}

	this.getOpen = () => open;

	input.addEventListener('input', event => {
		if (typeof this.onChange === 'function'){
			this.onChange(event.target.value);
		}
	});
}

function LoginForm (parent) {

	this.createDivider = () => document.body.appendChild(document.createElement('br'));

	const input = document.createElement('input');
	input.type = 'text';
	parent.appendChild(input);

	const button = document.createElement('button');
	button.type = 'button';
	button.textContent = 'Логин';
	button.disabled = true;

	input.addEventListener('input', event => {
		if (typeof this.onChange === 'function'){
			this.onChange(event.target.value);
		}
	});

	button.addEventListener('click', event => {
		if (typeof this.onLogin === 'function') {
			this.onLogin(event);
		}
	});

	this.getLogin = () => input.value;

	this.createDivider();
	const password = new Password(document.body, true);

	const getPassword = () => password.getValue();

	this.createDivider();
	parent.appendChild(button);

	const isDisabled = () => button.disabled = (!(getPassword() !== '' && this.getLogin() !== ''));

	password.onChange = () => isDisabled();

	this.onChange = () => isDisabled();
}

const loginForm = new LoginForm(document.body);

loginForm.onLogin = data => console.log(data);