//ДЗ: Functional OOP //Password //LoginForm //LoginForm Constructor //Password Verify let wrapper = document.querySelector(".wrapper"); // Сюда буду создавать поле ввода для пароля function Password(parent, open){ // Функция конструктор let container = document.createElement("div"); // Создаю контейнер для инпутов let button = document.createElement("button"); // Создание кнопки button.disabled = true; // Отключаю кнопку т.к. при создании формы инпут логина по умолчанию пустой let openCheck = open; // Переменная с которой я буду сравнивать открытость текста в поле ввода let buildInputs = function(type, innerText) { // Функция для создания одних и тех же инпутов с разными типами let input = document.createElement("input"); let label = document.createElement("label"); input.type = type; label.innerText = innerText; label.appendChild(input); return label; } let toggleHiddenPassword = function(type, open) { // Функция для переключения состояния инпута с паролем с видимого на невидимый и переключение чекбокса inputPassword.type = type; inputCheckbox.checked = open; }; let toggleHiddenCheckPassword = function(check) { // Функция для скрытия повтора пароля если Password в открытом режиме if(check) { container.removeChild(checkPasswordLabel); } else { container.insertBefore(checkPasswordLabel, container.children[2]); } }; let verifyPassword = function(additional = true) { // Проверка на наличие символов в логине и пароле, если в одном из полей пусто то кнопка disabled if(inputLogin.value.length > 0 && inputPassword.value.length > 0 && additional) { button.disabled = false; } else { button.disabled = true; } } container.appendChild(buildInputs("login", "Login")); // Собираю форму ввода container.appendChild(buildInputs("password", "Password")); container.appendChild(buildInputs("password", "Повторите пароль")).classList.add("check-password"); // Тут добавил класс что бы различать два инпута, type = password, друг от друга container.appendChild(buildInputs("checkbox", "Показать пароль")); container.appendChild(button).innerText = "Отправить"; parent.appendChild(container); let inputLogin = container.querySelector("input[type='login']"); // Нахожу все инпуты и присваиваю их в переменные для дальнейшей работы с ними let inputPassword = container.querySelector("input[type='password']"); let inputCheckPassword = container.querySelector(".check-password input"); let checkPasswordLabel = inputCheckPassword.parentElement; let inputCheckbox = container.querySelector("input[type='checkbox']"); open == true ? toggleHiddenPassword("text", true) : toggleHiddenPassword("password", false); // Один раз запускаю функцию toggleHiddenPassword для корректной отрисовки инпутов в зависимости от переданных параметров в конструкторе if(open == true) { // Скрываю inputCheckPassword если конструктор вызвали с параметром open = true, то есть когда Password в открытом режиме container.removeChild(container.querySelector(".check-password")); } this.setValue = function(value) { inputPassword.value = value; }; this.getValue = function() { return inputPassword.value; }; this.setOpen = function(hidden) { hidden == true ? toggleHiddenPassword("text", true) : toggleHiddenPassword("password", false); openCheck = hidden; toggleHiddenCheckPassword(hidden); }; this.getOpen = function() { return openCheck; }; container.oninput = (evt) => { // Навешиваю слушатель события на весь контейнер, а не на каждый инпут в отдельности if(evt.target.type == "text" || evt.target.type == "password") { // Тут идет проверка что изменения происходят на инпутах типа text или password для передачи value в onChange this.onChange(evt.target.value); } else { // Если эти изменения в инпуте с другим типом (Остается только чекбокс) то я запускаю setOpen с противоположным значением openCheck, как бы переключаю значение на противоположное this.setOpen(!openCheck); this.onOpenChange(openCheck); } if(openCheck == true) { // Тут идет проверка, если Password в открытом режиме то мне не нужно проверять на совпадение value у inputPassword и inputCheckPassword verifyPassword(); } else { verifyPassword(inputPassword.value == inputCheckPassword.value); } }; }; let p = new Password(wrapper, true); p.onChange = data => console.log(data); p.onOpenChange = open => console.log(open); p.setValue('qwerty'); console.log(p.getValue()); p.setOpen(false); console.log(p.getOpen()); //Form //Отображение //Sync //Validators //Many Inputs //Validators messages //OkButton //CancelButton let formContainer = document.querySelector(".form-container"); // Контейнер для формы function Form(el, data, okCallback, cancelCallback){ let formBody = document.createElement('div') let okButton = document.createElement('button') let table = document.createElement("table"); // Создаю таблицу, в ней буду отрисовывать key и value из data let copyData = data; // Копия объекта data для возможности перейти к дефолтным значениям okButton.innerHTML = 'OK' let cancelButton = document.createElement('button') cancelButton.innerHTML = 'Cancel' formBody.innerHTML = '