Sử dụng CakePHP để viết web application/Javascript form userlogin

 var LoginForm = {
    show:function(){
        var formBody = document.createElement("div");
        formBody.id = "divLoginForm";
        formBody.setAttribute("class","LoginForm");
        
        var formShadow =  document.createElement("div");
        formShadow.setAttribute("class", "Shadow");
        
        var formPanel =  document.createElement("div");
        formPanel.id = "divPanel";
        formPanel.setAttribute("class", "Panel");
        formPanel.textContent = "Login";
        //label and input username
        var labelInputUser = document.createElement("label");
        labelInputUser.innerHTML = "Username "
        var inputUser = document.createElement("input");
        inputUser.id = "inputUser";
        inputUser.type = 'text';
        inputUser.style["width"] = "100%";
        //label and input password
        var labelInputPass = document.createElement("label");
        labelInputPass.innerHTML = "Password "
        var inputPass = document.createElement("input");
        inputPass.id = "inputPass";
        inputPass.type = 'text';
        inputPass.style["width"] = "100%";
        //create table
        var table = document.createElement("table");
        table.style["width"] = "100%";
        // create row 1
        var tr1 = document.createElement("tr");
        tr1.style["height"] = "30px";
        var td1 = document.createElement("td");
        td1.style["width"] = "25%";
        var td2 = document.createElement("td");
        td2.style["width"] = "75%";
        td1.appendChild(labelInputUser);
        td2.appendChild(inputUser);
        tr1.appendChild(td1);
        tr1.appendChild(td2);
        table.appendChild(tr1);
        // create row 2
        var tr2 = document.createElement("tr");
        tr2.style["height"] = "30px";
        var td3 = document.createElement("td");
        td3.style["width"] = "25%";
        var td4 = document.createElement("td");
        td4.style["width"] = "75%";
        td3.appendChild(labelInputPass);
        td4.appendChild(inputPass);
        tr2.appendChild(td3);
        tr2.appendChild(td4);
        table.appendChild(tr2);
        //create button
        var btOk = document.createElement("input");
        btOk.id = "id_btOk";
        btOk.type = 'button';
        btOk.value = 'OK';
        btOk.style["marginBottom"] = "10px";
        var btCancel = document.createElement("input");
        btCancel.id = "id_btCancel";
        btCancel.type='button';
        btCancel.value='Cancel';
        btCancel.style["marginBottom"] = "10px";
        //
        formBody.appendChild(formPanel);
        formBody.appendChild(table);
        formBody.appendChild(btOk);
        formBody.appendChild(btCancel);
        //
        var formContainer = document.createElement("div");
        formContainer.appendChild(formBody);
        formContainer.appendChild(formShadow);
        //
        var dlgBackGround=document.createElement('div');
        dlgBackGround.setAttribute('id','dlgBackGround');
        dlgBackGround.setAttribute('class','dlgBackGround');
        dlgBackGround.style.height = document.viewport.getHeight() + "px";
        dlgBackGround.appendChild(formContainer);
        //
        document.body.appendChild(dlgBackGround);
        drag.makeDraggable(formContainer, formPanel);
        //
        this.registerEvents();
        formBody.style.top = (document.viewport.getHeight() - formBody.clientHeight)/2 + "px" ;
        formBody.style.left = (document.viewport.getWidth() - formBody.clientWidth)/2 + "px" ;
        formShadow.style.top = parseInt(formBody.style.top) + 2 + "px";
        formShadow.style.left = parseInt(formBody.style.left) + 5 + "px";
    },
    registerEvents : function () {
        var btOk = document.getElementById("id_btOk");
        btOk.onclick = this.handleOkButton;
        var btCancel = document.getElementById("id_btCancel");
        btCancel.onclick = this.close;
    },
    handleOkButton : function () {
        var userElement = document.getElementById("inputUser");
        var passElement = document.getElementById("inputPass");
        var usr = userElement.value;
        var pwd = passElement.value;
        LoginForm.checkUser(user, pass);
        LoginForm.close();
    },
    close : function () {
        var loginForm = document.getElementById("dlgBackGround");
        document.body.removeChild(loginForm);
    }, 
    checkUser : function(user, pass){
        
    
    }
 }
 

Việc thực thi đoạn mã trên được sử dụng trong tất cả các sự kiện và cần sử dụng thêm file LoginForm.css như sau:

  .LoginForm {
    width: 300px;
    height: auto;
    top: 0px;
    left: 0px;
    z-Index: 1000 !important;
    text-align: center;
    background: #CDC9CA;
    position: absolute;
    border: 1px solid #31241E;
 }

 .LoginForm table, .LoginForm td{
    
    margin: 0 !important;
    border: none !important;
    background: #CDC9CA !important;
 }

 .LoginForm input {
    display: inline !important;
 }

 .LoginForm label {
    width: auto !important;
 }

 .Panel {
	padding-top: 5px;
	padding-left: 5px;
	font-size:12;
	font-weight:bold;
    text-align: left;
    height: 20px;
    color: #fff;
    border:1px solid #FFF;
    background: #31241E;
    cursor:move;
 }

 .Shadow {
    position:absolute;
    background:#000000;
    opacity: 0.1;
    width: 300px;
    height:130px;
 }
 .Container{
    background:#31241E;
 }
 .formShadowMsg {
    position:absolute;
    background:#000000;
    opacity: 0.1;
    width: 300px;
    height:95px;
 }
 .dlgBackGround {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-Index: 10000 !important;
    width: 100%;
    height: 100%;
 }