//<style id="antiClickjack">body{display:none !important;}</style>
/*
//Old way of preventing clickjacking. Now use CSP frame-ancestors
if (self === top) {
       var antiClickjack = document.getElementById("antiClickjack");
       antiClickjack.parentNode.removeChild(antiClickjack);
   } else {
       top.location = self.location;
   }
*/

//This all has to be in ES5 because safari doesn't support ES6. I can use ES6 in my bundle code because babel transpiles all my ES6 to ES5 but these login forms don't and aren't bundled.
//http://stackoverflow.com/questions/29194024/cant-use-let-keyword-in-safari-javascript
var fname=false;
var lname=false;
var account=false;
var pass=false;
var a = 0;
var p = 0;
var sa=0;
var sp=0;
var newDiv3 = null;
var newSpan3 = null;
var newContent3 = null;
var newDiv4 = null;
var newSpan4 = null;
var newContent4 = null;
var csrfCheck=null;
var csrf='';
var rlink=0;
var mform=null;
var register=0;

window.addEventListener("load", function() {console.log("here"); init();});
function init(){
  console.log("Here2");
account=false;
pass=false;
a = document.getElementById('account');
p = document.getElementById('pass');
rlink=document.getElementById('rlink');
mform=document.getElementById('mform');
register=document.getElementById('registerid');
console.log(document.getElementById("rlink"))

var insert=null;


      newDiv3 = document.createElement("div");
      newSpan3 = document.createElement("span");
      newContent3 = document.createTextNode("Please type in a valid email");


        newSpan3.appendChild(newContent3); //add the text node to the newly created div.
        newDiv3.appendChild(newSpan3);
      //  newDiv3.setAttribute("style","width:200px");
        //newDiv3.setAttribute("style", "background-color: red;");
        //newDiv3.setAttribute("style","color: white; font-size:14px");
        //newDiv3.setAttribute("style","color: white; font-size:14px");
        newDiv3.style.fontSize= "14px";
        newDiv3.style.color= "white";
        newDiv3.style.backgroundColor= "red";
        newDiv3.style.width=window.innerWidth+"px";
        newDiv3.style.zIndex=5;

        newDiv4 = document.createElement("div");
        newSpan4 = document.createElement("span");
        newContent4 = document.createTextNode("Please use a password including numbers and symbols (Like @ or *). Min 10 characters.");


          newSpan4.appendChild(newContent4); //add the text node to the newly created div.
          newDiv4.appendChild(newSpan4);
          //newDiv4.setAttribute("style","width:200px");
          //newDiv4.setAttribute("style", "background-color: red;");
          //newDiv4.setAttribute("style","color: white; font-size:14px");
          //newDiv4.setAttribute("style","color: white; font-size:14px");
          newDiv4.style.fontSize= "14px";
          newDiv4.style.color= "white";
          newDiv4.style.backgroundColor= "red";
          newDiv4.style.width=window.innerWidth+"px";
          newDiv4.style.zIndex=5;


          //document.getElementById("rlink").addEventListener("click", function () {
          //  form.submit();
        //  });

rlink.addEventListener('click',function(){
register.submit();
return false;
});
mform.addEventListener('submit',function(e){
  e.preventDefault();
preValidate();
return false;
});


//register.onsubmit=function() {
//preValidate(); return false;
//}


/*
///////////Account/////////////////////


a.onfocus = function() {
  preValidateA();
}

a.onblur = function() {
  var value=cEscape(a.value);
  if(value==""){

  }else{sa=1}
  preValidateA();
}
/////////////Password/////////////////
p.onfocus = function() {
  preValidateP();
}

p.onblur = function() {
  var value=cEscape(p.value);
  if(value==""){

  }else{sp=1}
  preValidateP();
}
*/

}//end onload
/////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////


function preValidateA(){
  var value=cEscape(a.value);//prevent xss
console.log("preValidateA sa:"+sa);



      if(a.value.length<3){
        console.log("fn.value.length:"+a.value.length);
        //newDiv3.setAttribute("style", "background-color: red;");
        //newDiv3.setAttribute("style","color: white; font-size:14px");
        newDiv3.style.backgroundColor= "red";
        newDiv3.style.fontSize= "14px";
        newDiv3.style.color= "white";
        newContent3.nodeValue="Please use a valid email.";
        a.parentNode.insertBefore(newDiv3,a);
        account=false;
      }
        if(a.value.length>=3){
        //  newDiv3.setAttribute("style", "background-color: green;");
        //  newDiv3.style.backgroundColor= "green";
        //  newDiv3.style.fontSize= "14px";
        //  newDiv3.style.color= "white";
        //  newContent3.nodeValue="Good!";
          account=true;
}



}//end A




function preValidateP(){
  var value=cEscape(p.value);//prevent xss
console.log("preValidateP sp:"+sp);


      if(p.value.length<10){
        console.log("fn.value.length:"+value.length);
        console.log("value:"+value);
        //newDiv4.setAttribute("style", "background-color: red;");
        //newDiv4.setAttribute("style","color: white; font-size:14px");
        newDiv4.style.backgroundColor= "red";
        newDiv4.style.fontSize= "14px";
        newDiv4.style.color= "white";
        newContent4.nodeValue="Password Incorrect";
        p.parentNode.insertBefore(newDiv4,p);
        p.value="";
        pass=false;
      }
      if(p.value.length>=10){
        //newDiv3.setAttribute("style", "background-color: green;");
        //newDiv3.style.backgroundColor= "green";
      //  newDiv3.style.fontSize= "14px";
      //  newDiv3.style.color= "white";
      //  newContent3.nodeValue="Good!";
        pass=true;
}

}//end preValidateP











function cEscape(p){

  return String(p)
      .replace(/&/g, "&amp;")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;")
      .replace(/'/g, "&#039;")
      .replace(/\//g, "&#x2F;")

}

function preValidate(){

  preValidateA();
  preValidateP();

console.log("account:"+account+" pass:"+pass);

    if(account===true && pass===true){
      console.log("SEND FORM SUCCESSFUL");

      //var csrf=document.getElementById('csrf');
    //  var value = csrf.value;
      //var fd = new FormData();
      //fd.append('Content-Type', 'text/json');
    //  fd.append('X-CSRF-Security-Token', csrf);
//console.log("csrf:"+value);


var http = new XMLHttpRequest();
var account2=document.getElementById('account').value;
var account2=document.getElementById('account').value;
var pass2=document.getElementById('pass').value;
var csrfLink=document.getElementById('csrfLink');
var gender=0;
if(csrfCheck===null){
csrf=document.getElementById('csrf').value;
csrfCheck=1;
}
var params = {'account':account2, 'pass':pass2, 'gender':gender, 'csrf':csrf};
http.open("POST", "/loginverify", true);
http.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
http.onreadystatechange = function() {//Call a function when the state changes.
    if(http.readyState == 4 && http.status == 200) {
        console.log("GETTING WRONG LOGIN");
        var response=JSON.parse(this.responseText);
        console.log(response);

        if(response.successA==true && response.successP==true){
          window.location.href = response.redirect;
        }
        if(response.successA==true && response.successP==false){
          newDiv3.style.display='none';
          //newContent3.nodeValue="Please use a valid email.";
        }


          if(response.successA ==false){
            p.value="";
            //a.value="";
            //newDiv3.setAttribute("style", "background-color: red;");
          //  newDiv3.setAttribute("style","color: white; font-size:14px");
            newDiv3.style.backgroundColor= "red";
            newDiv3.style.fontSize= "14px";
            newDiv3.style.color= "white";
            newContent3.nodeValue="Account not found. Please try again.";
            a.parentNode.insertBefore(newDiv3,a);

          }//end account
          if(response.successP==false && response.successA==true){
            p.value="";
          //  newDiv4.setAttribute("style", "background-color: red;");
          //  newDiv4.setAttribute("style","color: white; font-size:14px");
            newDiv4.style.backgroundColor= "red";
            newDiv4.style.fontSize= "14px";
            newDiv4.style.color= "white";
            newContent4.nodeValue="Password Incorrect";
            p.parentNode.insertBefore(newDiv4,p);
          }//end account



        csrf=response.csrf;
        csrfLink.value=response.csrf;

        console.log("Setting new csrf:"+csrf);

    }else{
      console.log("Server Error.Refresh page.");







    }
}
http.send(JSON.stringify(params));






/*
http.open("POST", "/loginverify", true);
//Send the proper header information along with the request
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

http.onreadystatechange = function() {//Call a function when the state changes.
    if(http.readyState == 4 && http.status == 200) {
        alert(http.responseText);
    }
}

http.send(params);

*/




/*

var fd2 = new FormData(csrf);

      var xhr = new XMLHttpRequest();
      //xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      //xhr.upload.addEventListener("progress", (e)=>{uploadProgress(e ,h1)}, false);
      xhr.addEventListener("load", (e)=>{console.log("Hello")}, false);
      //xhr.addEventListener("error", (e)=>{uploadFailed(e)}, false);
      //xhr.addEventListener("abort", uploadCanceled, false);
      xhr.open('POST','/loginverify', true); //MUST BE LAST LINE BEFORE YOU SEND
      xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
      xhr.send(fd2);//with zlib compression...
*/


    }//end if fname===true && lname===true && account===true && pass===true

    }