javascript_practice/hw10/passwordVerify.js

function Password(
	parent,
	open,
	withButton,
	id
) {

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

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

	const buttonLogin = document.createElement('button');
	buttonLogin.type = 'button';
	buttonLogin.classList.add('login-button');
	buttonLogin.textContent = 'Логин';
	buttonLogin.disabled = true;

	const divider = document.createElement('br');

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

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

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

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

	this.getOpen = () => open;

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

	this.onOpenChange = isOpen => isOpen;

	this.addButton = () => parent.appendChild(buttonLogin);

	this.addDivider = () => parent.appendChild(divider);
}

const password1 = new Password(document.body, true, true, 'first_password');
password1.addDivider();
const password2 = new Password(document.body, true, false, 'second_password');
password2.addDivider();
password1.addButton();

const isEqual = () => {
	document.querySelector('.login-button').disabled = (password1.getValue() !== password2.getValue());
}

password1.onOpenChange = (open) => {
	second_password.style.display = !open ? 'none' : 'inline-block';
}

password1.onChange = () => {
	isEqual();
}

password2.onChange = () => {
	isEqual();
}