HW/HW010/index.js

/* Password */

function Password(parent, open) {
    let value = ''
    let pass = document.createElement('input')
    let check = document.createElement('input')
    check.type = 'checkbox'
    parent.append(pass, check)
    check.onchange = () => {
        this.setOpen(check.checked)
    }
    //добавить pass oninput, который из pass забирает value, запускает setValue
    this.getValue = function () {
        return value
    }
    this.setValue = function(value) {
    // передает value в onchange если он есть
    }
    this.getOpen = function () {
        return open
    }
    this.setOpen = function(newOpen) {
        open = newOpen
        pass.type = open ? 'text' : 'password'
        check.checked = open
        if(typeof this.onOpenChange === 'function') {
            this.onOpenChange(open)
        }
    }
    this.setOpen(open)
}

let p = new Password(document.body, 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())

/* LoginForm */

function LoginForm(parent, open) {
    let value = ''
    let login = document.createElement('input')
    let submit = document.createElement('input')
    submit.type = 'submit'
    submit.disabled = true;
    login.placeholder = 'Введите логин'
    
    let pass = document.createElement('input')
    pass.placeholder = 'Введите пароль'

    let check = document.createElement('input')
    check.type = 'checkbox'
    
    parent.append(login, pass, check, submit)

    let passAndLogNotEmpty = function () {
        return login && login.value && pass && pass.value ? true : false;
    };

    let setSubmit = function () {
        if (passAndLogNotEmpty()) {
            submit.disabled = false;
        } else {
            submit.disabled = true;
        }
    }

    setSubmit();

    pass.onkeyup = () => {
        setSubmit();
    }

    login.onkeyup = () => {
        setSubmit();
    }

    check.onchange = () => {
        this.setOpen(check.checked)
    }
    //добавить pass oninput, который из pass забирает value, запускает setValue
    this.getValue = function () {
        return value
    }
    this.setValue = function (value) {
        // передает value в onchange если он есть
    }
    this.getOpen = function () {
        return open
    }
    this.setOpen = function (newOpen) {
        open = newOpen
        pass.type = open ? 'text' : 'password'
        check.checked = open
        if (typeof this.onOpenChange === 'function') {
            this.onOpenChange(open)
        }
    }
    this.setOpen(open)
}

let p = new LoginForm(document.body, 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())

/* LoginForm Constructor */

function LoginFormConstructor(parent, open) {
    let login = document.createElement('input')
    let submit = document.createElement('input')
    submit.type = 'submit'
    submit.disabled = true;
    login.placeholder = 'Введите логин'
    
    let pass = document.createElement('input')
    pass.placeholder = 'Введите пароль'

    let checkbox = document.createElement('input')
    checkbox.type = 'checkbox'

    parent.append(login, pass, checkbox, submit)

    let form = {
        login: login.value,
        password: pass.value,
        checkbox: checkbox.checked,
        submitDisabled: submit.disabled
    }

    let passAndLoginNotEmpty = function () {
        return login && login.value && pass && pass.value ? true : false;
    };

    let setSubmit = function () {
        if (passAndLoginNotEmpty()) {
            submit.disabled = false;
        } else {
            submit.disabled = true;
        }
        form.submitDisabled = submit.disabled;
        if (typeof this.onChange === 'function') {
            this.onChange(form);
        }
    }

    setSubmit();

    pass.onkeyup = () => {
        setSubmit();
        form.password = pass.value;
        if (typeof this.onChange === 'function') {
            this.onChange(pass.value);
        }
        if (typeof this.onChange === 'function') {
            this.onChange(form);
        }
    }

    login.onkeyup = () => {
        setSubmit();
        form.login = login.value;
        if (typeof this.onChange === 'function') {
            this.onChange(login.value);
        }
        if (typeof this.onChange === 'function') {
            this.onChange(form);
        }
    } 

        checkbox.onchange = () => {
        form.checkbox = checkbox.checked;
        if (checkbox.checked) {
            pass.type = 'text';
        } else {
            pass.type = 'password';
        };

        if (typeof this.onChange === 'function') {
            this.onChange(checkbox.checked);
        }
        if (typeof this.onChange === 'function') {
            this.onChange(form);
        }
    } 
 
    this.getValue = function () {
        return form;
    }
    this.setValue = function (newLoginValue, newPasswordValue, newCheckboxValue) {
        
        if (typeof newLoginValue === 'string') {
            login.value = newLoginValue;
            login.onkeyup();
        };
        if (typeof newPasswordValue === 'string') {
            pass.value = newPasswordValue;
            pass.onkeyup();
        };
        if (typeof newCheckboxValue === 'boolean') {
            checkbox.disabled = newCheckboxValue;
            checkbox.onchange();
        };

    }
}

let loginForm = new LoginFormConstructor(document.body, true)


loginForm.setValue('AntonLevshin', 'qwerty', false);