homework/js_09_oop/main.js

//Password
// function Password(parent, open){
//     let input = document.createElement('input');
//     input.placeholder = 'your password';
//     input.type = 'password';

//     let btn= document.createElement('button');
//     btn.type = 'checkbox';

//     parent.append(input);
//     parent.append(btn);

//     let value = '';
//     let innerTextForBtn = open;
//     btn.innerText = innerTextForBtn ? 'show password' : 'hide password';

//     this.setValue = newValue => {
//         if (newValue != ' ' && newValue && newValue !== value){
//             value = newValue;
//         }
//     };

//     this.setOpen = newOpen => {
//         if (newOpen != innerTextForBtn && newOpen != undefined){
//             innerTextForBtn = newOpen; 
//         }
//     };

//     input.oninput = this.onChange = (input) => {
//         value = input.data;
//     };

//     btn.onclick = this.onOpenChange = (newOpen) => {
//         innerTextForBtn = !innerTextForBtn;

//         if(input.getAttribute('type') === 'password'){
//             input.type = 'text';
//             btn.innerHTML = 'show password';

//         } else if (input.getAttribute('type') === 'text') {
//             input.type = 'password';
//             btn.innerHTML = 'hide password';
//         }
//     };

//     this.getValue = () => value;
//     this.getOpen = () => innerTextForBtn;  
// }

// 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 Login(parent){
//     let form = document.createElement('form');

//     let inputLogin = document.createElement('input');
//     inputLogin.placeholder = 'login';
//     inputLogin.type = 'text';

//     let inputPaswd = document.createElement('input');
//     inputPaswd.placeholder = 'password';
//     inputPaswd.type = 'password';

//     let btn= document.createElement('button');
//     btn.innerHTML = 'First, write login and password';

//     parent.append(form);
//     form.append(inputLogin);
//     form.append(inputPaswd);
//     form.append(btn);

//     let valueLogin = '';
//     let valuePaswd = '';

//     inputLogin.oninput = () =>{
//         valueLogin = inputLogin.value;
//     };

//     inputPaswd.oninput = () =>{
//         valuePaswd = inputPaswd.value;
//     };

//     btn.onclick = (event) =>{
//         event.preventDefault();
//         if(valueLogin === '' && valuePaswd === ''){
//             btn.innerHTML = 'Write login and password';
//             btn.style.backgroundColor = 'red';
//         } else {
//             btn.disabled = true;
//             btn.innerHTML = 'Sent';
//             btn.style.backgroundColor = 'green';
//         }
//     };
// }

// let p = new Login(document.body, true);


//Password Verify
// function Password (parent){
//     let pswd = document.createElement('input');
//     let pswdVerify = document.createElement('input');
//     let btn = document.createElement('button');

//     pswd.type = 'password';
//     pswdVerify.type = 'password';

//     btn.innerHTML = 'Check';

//     parent.append(pswd);
//     parent.append(pswdVerify);
//     parent.append(btn);

//     let valuePswd = '';
//     let valuePswdVerify = '';

//     pswdVerify.style.display = 'none';


//     pswd.oninput = () =>{
//         valuePswd = pswd.value;
//     };
        
//     pswdVerify.oninput = () =>{
//         valuePswdVerify = pswdVerify.value;
//     };

//     let p = document.createElement('p');
//     parent.append(p);

//     btn.onclick = () => {
//         if(valuePswd === ''){
//             p.innerHTML = 'Write password';
//             p.style.color = 'red';
//         } else if (pswdVerify.style.display === 'block') {
//             if(valuePswd === valuePswdVerify){
//                 p.innerHTML = 'Right password';
//                 p.style.color = 'green';
//             } else{
//                 p.innerHTML = 'You made mistake';
//                 p.style.color = 'red';
//             }
//         } else {
//             pswdVerify.style.display = 'block';
//             p.innerHTML = '';
//         }
//     };
// }

// let p = new Password(document.body);

//Form
const dateToDataTimeLocal = date => (new Date(date.getTime() - date.getTimezoneOffset() * 60000)).toISOString().slice(0, -1);
dateToDataTimeLocal(new Date());

function Form(el, data, okCallback, cancelCallback){
    let formBody = document.createElement('div');
    let okButton = document.createElement('button');
    okButton.innerHTML = 'OK';

    let cancelButton = document.createElement('button');
    cancelButton.innerHTML = 'Cancel';

    let inputCreators = {
        String(key, value, oninput){
            let div = document.createElement('div');
            let label = document.createElement('label');
            let input = document.createElement('input');
            label.innerHTML = key;
            input.required = true;
            input.placeholder = key;
            input.value = value;

            if(key === 'password'){
                input.type = 'password';
            }

            let p = document.createElement('p');
            p.innerHTML = '';

            input.oninput = () => {
                (function() {
                    if (input.placeholder in this.validators) {
                        let x = this.validators[input.placeholder](input.value, input.placeholder, this.data, input);
                        if(x !== true){
                            p.style.color = 'red';
                            p.innerHTML = 'Error!';
                            input.style.backgroundColor = 'red';
                            label.appendChild(p);
                        } else {
                            p.innerHTML = '';
                            input.style.backgroundColor = '';
                            console.log(x);
                        }
                        
                    } else {
                        oninput(input.value);
                    }
                }).call(this);
            }
            formBody.appendChild(div);
            div.appendChild(label,input);

            let abbr = document.createElement('abbr');
            abbr.title = 'Обязательно';
            abbr.className = 'importantInput';
            abbr.innerHTML = '*';
            label.appendChild(abbr);
            
            return input;
        },
    
        Boolean(key, value, oninput){
            let div = document.createElement('div');
            let label = document.createElement('label');
            let input = document.createElement('input');
            label.innerHTML = key;
            input.required = true;
            input.type = 'checkbox';
            input.checked = value;
            input.appendChild(label);
            input.oninput = () => oninput(input.checked);

            formBody.appendChild(div);
            div.appendChild(label,input);

            let abbr = document.createElement('abbr');
            abbr.title = 'Обязательно';
            abbr.className = 'importantInput';
            abbr.innerHTML = '*';
            label.appendChild(abbr);

            return input;
        },
        
        Date(key, value, oninput){
            let div = document.createElement('div');
            let label = document.createElement('label');
            let input = document.createElement('input');
            label.innerHTML = key;
            input.required = true; 
            input.type = 'datetime-local';
            input.value = dateToDataTimeLocal(value);
            input.onchange = () =>{
                oninput(new Date(input.value));
            };

            formBody.appendChild(div);
            div.appendChild(label,input);

            let abbr = document.createElement('abbr');
            abbr.title = 'Обязательно';
            abbr.className = 'importantInput';
            abbr.innerHTML = '*';
            label.appendChild(abbr);

            return input;
        }
    }

    for(const [key, value] of Object.entries(data)){
        let input = inputCreators[value.constructor.name].call(this, key, value, newValue => {
            data[key] = newValue;
        });


        formBody.appendChild(input);
    }
    
    if (typeof okCallback === 'function'){
        formBody.appendChild(okButton);
        okButton.onclick = (e) => {
            this.okCallback(e)
            // console.log(this)
        }
    }


    if (typeof cancelCallback === 'function'){
        formBody.appendChild(cancelButton);
        cancelButton.onclick = () => window.location.reload();
    }


    el.appendChild(formBody);

    this.okCallback = okCallback;
    this.cancelCallback = cancelCallback;
    this.data = data;
    this.validators = {};
};

let form = new Form(formContainer, {
    name: 'Anakin',
    surname: 'Skywalker',
    password: 'qwerty',
    married: true,
    birthday: new Date((new Date).getTime() - 86400000 * 30*365)
}, () => console.log('ok'),() => console.log('cancel') );
form.okCallback = () => console.log('ok')

form.validators.name = (value, key, data, input) => value.length > 2 && 
    value[0].toUpperCase() == value[0] &&
    !value.includes(' ') ? true : 'Wrong name';

form.validators.surname = (value, key, data, input) => value.length > 2 && 
    value[0].toUpperCase() == value[0] &&
    !value.includes(' ') ? true : 'Wrong name';

form.validators.password = (value, key, data, input) => value.length > 5 && 
    !value.includes(' ') ? true : 'Wrong name';

console.log(form);