window.onload = function(){
    
    //Press enter focus next input or submit
    var inputUser = document.getElementById("Username");
    var inputPass= document.getElementById("Password");
    
    window.onkeypress = function() {myFunction()};
        
     inputUser.addEventListener('keypress', function(e){
         if (e.keyCode == 13){
             inputPass.focus();
         }
     });
     
     inputPass.addEventListener('keypress', function(e){
         if (e.keyCode == 13){
             myLogin();
         }
     });
     
    
    //Link to forgot password
    var forgot = document.getElementById('linkForgot');
    if (forgot){
        forgot.addEventListener("click", function(){ 
            gotoPage("login","forgot",""); 
        });    
    }
    
    //add event click to button "Ingresar" by execute function login user
    var login = document.getElementById('botonLogin');
    if (login){
        login.addEventListener("click", function(){ 
            myLogin();
        });    
    }
    
     // Hide or show a Password
    var showIcon = document.getElementById('icon-eye')
    if (showIcon){
        showIcon.addEventListener("click", function(){
            show('icon-eye')
        });     
    }
    
//Close onLoad
};
function myFunction() {
    if (window.event.keyCode === 13 && !window.event.shiftKey) {
        document.getElementById("Username").focus();
    }
}
// Show or hide password with click eye icon
function show(a) {
    var icon = document.getElementById(a);
    var passwordInput = document.getElementById('Password');
    if (passwordInput.getAttribute('type') == "password") {
        icon.removeAttribute("class");
        icon.setAttribute("class","fas fa-eye");
        passwordInput.removeAttribute("type");
        passwordInput.setAttribute("type","text");
    } else {
        passwordInput.removeAttribute("type");
        passwordInput.setAttribute('type','password');
        icon.removeAttribute("class");
        icon.setAttribute("class","fas fa-eye-slash");
    }
}

//function login user
function myLogin(){
    var loginForm = document.getElementById("LoginForm");
    var msgApi = document.getElementById("msgApi");
    msgApi.style.fontSize = "80%";
    var inputUser = document.getElementById("Username");
    var inputPass= document.getElementById("Password");
    var us = loginForm.Username.value;
    var pw = loginForm.Password.value;
    
    if (! checkEmail(inputUser)){
        var userInvalid = document.getElementById("userValid");
        userInvalid.style.fontSize= "80%"
        userInvalid.style.color = "#D0021B";
        inputUser.style.border="1px solid #D0021B"
        userInvalid.style.display = "block";
        userInvalid.innerHTML = "Escriba una direcci\u00F3n de correo válida";
        setTimeout(function() {
           userInvalid.style.display = "none";
           inputUser.style.border="0.87px solid #D3D2D2";
        }, 2000);
        return 0;
    }
    
    if(! checkPassword(inputPass)){
        msgApi.innerHTML = "Ingrese su contrase\u00F1a";
        msgApi.style.color = "#D0021B";
        msgApi.style.display = "block";
        inputPass.style.border="1px solid #D0021B"
        setTimeout(function() {
            msgApi.style.display = 'none';
            inputPass.style.border="0.87px solid #D3D2D2";
         }, 3000);
         return 0;
    }
    
    var req = {};
    req.usr = us;
    var cryptPass = MD5(pw);
    req.pwd = cryptPass;
    callWS("GET", "login/login", req, response);
    
    function response(status, rsp){
        var res=JSON.parse(rsp);
        switch(status){
            case 200:
                sessionStorage.setItem("sessionId", res.sessionid);
                sessionStorage.setItem("changeA", 0);
                setTimeout(function() {
                    gotoPage("menu","main",{"userName": res.name });
                }, 1000);
                break;
                
            case 400:
                msgApi.innerHTML = "Todos los campos son obligatorios";
                msgApi.style.color = "#D0021B";
                msgApi.style.display = "block";
                setTimeout(function() {
                    msgApi.style.display = 'none';
                 }, 3000);
                break;
                
            case 401:
                inputUser.style.border="1px solid #D0021B";
                inputPass.style.border="1px solid #D0021B";
                msgApi.innerHTML = res.msg;
                msgApi.style.color = "#D0021B"
                msgApi.style.display = "block";
                setTimeout(function() {
                    msgApi.style.display = 'none';
                    inputUser.style.border="0.87px solid #D3D2D2";
                    inputPass.style.border="0.87px solid #D3D2D2";
                 }, 3000);
                break;
            case 402:
                inputUser.style.border="1px solid #D0021B";
                msgApi.innerHTML = "Usuario inactivo o bloqueado";
                msgApi.style.color = "#D0021B"
                msgApi.style.display = "block";
                setTimeout(function() {
                    msgApi.style.display = 'none';
                    inputUser.style.border="0.87px solid #D3D2D2";
                 }, 3000);
            break;
            case 500:
                msgApi.innerHTML = "Error Interno";
                msgApi.style.color = "#D0021B";
                msgApi.style.display = "block";
                setTimeout(function() {
                    msgApi.style.display = 'none';
                 }, 3000);
                break;
                
            default:
                
        }
    }
}
