homeworks_Second_modul/homework18/loginForm.js

function Password(parent, open){
    this.textBox = document.createElement("input");
    this.textBox.setAttribute("type", "password");
    this.textBox.id = "password";
    parent.appendChild(this.textBox);

    this.checkBox = document.createElement("input")
    this.checkBox.setAttribute("type", "checkbox")
    parent.appendChild(this.checkBox)

    this.isChecked = function(checkBox, textBox) {
        if(open === false){
            this.textBox.setAttribute("type", "password") 
          open = true;
        } else { 
            this.textBox.setAttribute("type", "text")
            open = false;
        }
    }
    this.getValue = function(arg = this.textBox) {
        return arg.value
    }
    this.setValue = function(inner) {
        this.textBox.value = inner;
    }
    this.getOpen = function() {
        let str;
        open == true ? str = "closed" : str = "opened";
        return str;
    }

    this.onChange = function(arg) {
        let data = this.getValue(arg);
        return data;
        
    }
    this.onOpenChange = function(arg) {
        console.log(arg)
        return arg
    }
    this.checkBox.onchange = () =>  {
        this.isChecked(this.checkBox, this.textBox)
        this.onOpenChange(this.getOpen())
    };
    this.textBox.oninput = () => this.onChange(this.getValue(this.textBox));
    this.setOpen = function(arg) {
        if(!arg == true){
            this.checkBox.checked = "checked"
        } else {
            this.checkBox.checked = ""
        }
        this.isChecked()
    }

}


function login(parent) {
    this.loginBox = document.createElement("input");
    this.loginBox.setAttribute("type", "text");
    this.loginBox.setAttribute("value", "login")
    this.loginBox.id = "login";
    parent.appendChild(this.loginBox);
}
    

function send(parent) {
    this.sendBottom = document.createElement("button");
    this.sendBottom.setAttribute("disabled", true);
    this.sendBottom.innerText = "send";
    this.sendBottom.id = "send";
    parent.appendChild(this.sendBottom)
}

function loginForm(parent) {
    this.login = new login(parent);
    this.login.loginBox.oninput = () => this.sendOnChange();


    this.password = new Password(parent);
    this.password.textBox.oninput = () => { this.sendOnChange()  
    }
    

    this.sendBottom = new send(parent)

    this.sendOnChange = function() {
        if(this.login.loginBox.value != "" && this.password.textBox.value != "") {
            return this.sendBottom.sendBottom.removeAttribute("disabled");
        }  return this.sendBottom.sendBottom.setAttribute("disabled", true);
    }  

    this.setValue = function(inner, box = this.password.textBox) {
        box.value = inner;
    }
    this.setValue("qwerty")
    this.sendOnChange()

}





// let j = new loginForm(document.body)

// j.setValue("Вооот")


function passwordVerify(parent) {
    this.login = new login(parent);
    this.login.loginBox.oninput = () => this.sendOnChange();


    this.checkPasswordBox = document.createElement("span");
    parent.appendChild(this.checkPasswordBox);

    this.password = new Password(this.checkPasswordBox);
    this.password.checkBox.onchange = () =>  {
        if(this.password.checkBox.checked) {
            this.checkPassword.remove()
        } else {
            this.checkPassword = document.createElement("input");
            this.checkPassword.setAttribute("type", "password");
            this.checkPasswordBox.appendChild(this.checkPassword);
            this.checkPassword.oninput = () => this.sendOnChange();
        }
        this.sendOnChange()
    }
    
    this.password.textBox.oninput = () => this.sendOnChange();

    this.checkPassword = document.createElement("input");
    this.checkPassword.setAttribute("type", "password");
    this.checkPassword.id = "checkPassword";
    this.checkPasswordBox.appendChild(this.checkPassword);
    this.checkPassword.oninput = () => this.sendOnChange();

    this.sendBottom = new send(parent);

    this.setValue = function(inner, box = this.password.textBox) {
        box.value = inner;
    }
    this.setValue("qwerty")

    this.sendOnChange = function() {

        if(this.password.checkBox.checked &&
            this.login.loginBox.value != "" && 
            this.password.textBox.value != "") {
                return this.sendBottom.sendBottom.removeAttribute("disabled");
            }
        else {
            if(this.login.loginBox.value != "" && 
            this.password.textBox.value != "" &&
            this.password.textBox.value === this.checkPassword.value) {
                return this.sendBottom.sendBottom.removeAttribute("disabled");
            }
        }

        return this.sendBottom.sendBottom.setAttribute("disabled", true);
    }  

}

let loginFormDiv = document.getElementById("loginForm");
let thisWriteLog = loginForm(loginFormDiv);
sendClick = document.getElementById("send");
let log = document.getElementById("login");
let password = document.getElementById("password");



sendClick.onclick = () => {
    console.log(`login: ${log.value} \n password: ${password.value}`)

    getGQL(gqlUrl)(`
    query login($login:String, $password:String) {
        login(login:$login, password:$password)
      }`,{login: log.value, password: password.value}).then(res => {
            localStorage.authtoken = res.data.login;
            if(localStorage.authtoken) {
                loginFormDiv.innerHTML = ""
                let sayHi = document.createElement("h2");

                sayHi.setAttribute("style", "margin-bottom: 0px")
                sayHi.innerText = `Hi, user!`;
                loginFormDiv.appendChild(sayHi);
            }
    });
}