simulate ajax logon (Single Page )

app.ts

"use strict";
exports.__esModule = true;
var title = "businss object";
var HttpSpace = /** @class */ (function () {
    function HttpSpace() {
        console.log("HTTP Space init ... OK");
    }
    return HttpSpace;
}());
exports.HttpSpace = HttpSpace;
var AAA = /** @class */ (function () {
    function AAA() {
        this.users = [{ uname: 'user1', pass: 'pass1' },
            { uname: 'user2', pass: 'pass2' },
            { uname: 'test', pass: 'pass' }
        ];
        console.log("  >> init AAA server");
        this.dump();
    }
    AAA.prototype.dump = function () {
        console.log(" >> AAA : " + JSON.stringify(this.users));
    };
    AAA.prototype.find = function (uname, upass) {
        console.log(" >>> AAA : find " + uname + "/" + upass);
        var found;
        for (var i = 0; i < this.users.length; i++) {
            var u = this.users[i];
            if (u.uname == uname) {
                if (u.pass == upass) {
                    found = u;
                }
            }
        }
        console.log(" >>> result  = " + found);
        return found;
    };
    return AAA;
}());
var ServerSide = /** @class */ (function () {
    function ServerSide(http) {
        this.http = http;
        this.aaa = new AAA();
        console.log("Server : Start");
    }
    ServerSide.prototype.ret_logon = function (params) {
        console.log("server : accept param : " + params);
        var user = this.aaa.find(params.uname, params.upass);
        if (user != undefined) {
            var json1 = { status: "success", token: 'xxSSASfxsds' };
            console.log("  Save To Db > : Register Session " + JSON.stringify(json1) + " with TimeStamp");
            console.log("  return > : JSON " + JSON.stringify(json1));
            return json1;
        }
        else {
            var obj = { status: "fail", token: "" };
            console.log("  logon Error , return " + JSON.stringify(obj));
            return obj;
        }
    };
    return ServerSide;
}());
exports.ServerSide = ServerSide;
var LocalStorage = /** @class */ (function () {
    function LocalStorage() {
        this.arr = {};
        console.log(" >> Localstorage init ... ok");
        this.dump();
    }
    LocalStorage.prototype.setItem = function (key, val) {
        console.log(" >> localStorage : set Item " + key + " , " + val);
        this.arr[key] = val;
        this.dump();
    };
    LocalStorage.prototype.dump = function () {
        console.log(" >> localStorage = " + JSON.stringify(this.arr));
    };
    LocalStorage.prototype.getItem = function (key) {
        var val = this.arr[key];
        console.log(" >> localStorage : getItem " + key + " return " + val);
        return val;
    };
    return LocalStorage;
}());
var Browser = /** @class */ (function () {
    function Browser(http) {
        this.http = http;
        this.lc = new LocalStorage();
        console.log("Browser : Open");
    }
    Browser.prototype.request_ajax_POST = function (url, params) {
        console.log("Browser: Ajax Post  " + url + " , PARAM: " + params);
    };
    Browser.prototype.set_localstorage = function (key, value) {
        console.log("Browser: set localStorage key = " + key + ",value=" + value);
        this.lc.setItem(key, value);
    };
    Browser.prototype.redirect2 = function (url) {
        console.log("Browser: redirect to URL " + url);
    };
    Browser.prototype.nav2url = function (url) {
        console.log("Browser: user navigate to  URL " + url);
    };
    Browser.prototype.key_formlogon = function (params) {
        console.log("Browser: user key in form : " + JSON.stringify(params));
        return params;
    };
    Browser.prototype.nav2home = function () {
        console.log("== naviage to Home ==");
        this.lc.dump();
        var jsonstr = this.lc.getItem("user_tk");
        var json1 = JSON.parse(jsonstr);
        var token = json1.token;
        console.log(" >> token = " + token);
        if (token == "") {
            console.log("Browser:  Print Error Not Logon !!");
            return;
        }
        console.log("Display Home Page ");
    };
    return Browser;
}());
exports.Browser = Browser;
var App = /** @class */ (function () {
    function App() {
        console.log("OK");
        this.http = new HttpSpace();
        this.ss = new ServerSide(this.http);
        this.br = new Browser(this.http);
    }
    App.prototype.main = function () {
        this.br.nav2url("http://localhost/logon.html");
        var params = this.br.key_formlogon({ uname: 'test', upass: 'pass_err' });
        this.br.request_ajax_POST("http://localhost/logon.php", params);
        var json1 = this.ss.ret_logon(params);
        var objstr = JSON.stringify(json1);
        console.log(">>>  return from server is " + objstr);
        var status = json1.status;
        if (status == "success") {
            this.br.set_localstorage("user_tk", JSON.stringify(json1));
            this.br.redirect2("http://localhost/home.html");
            this.br.nav2home();
        }
        else {
            this.br.set_localstorage("user_tk", "");
            this.br.redirect2("http://localhost/logon.html");
        }
    };
    return App;
}());
var app = new App();
app.main();

output.txt

D:\business_model>start tsc app.ts --module commonjs  --watch

D:\business_model>node app.js
OK
HTTP Space init ... OK
  >> init AAA server
 >> AAA : [{"uname":"user1","pass":"pass1"},{"uname":"user2","pass":"pass2"},{"uname":"test","pass":"pass"}]
Server : Start
 >> Localstorage init ... ok
 >> localStorage = {}
Browser : Open
Browser: user navigate to  URL http://localhost/logon.html
Browser: user key in form : {"uname":"test","upass":"pass"}
Browser: Ajax Post  http://localhost/logon.php , PARAM: [object Object]
server : accept param : [object Object]
 >>> AAA : find test/pass
 >>> result  = [object Object]
  Save To Db > : Register Session {"status":"success","token":"xxSSASfxsds"} with TimeStamp
  return > : JSON {"status":"success","token":"xxSSASfxsds"}
>>>  return from server is {"status":"success","token":"xxSSASfxsds"}
Browser: set localStorage key = user_tk,value={"status":"success","token":"xxSSASfxsds"}
 >> localStorage : set Item user_tk , {"status":"success","token":"xxSSASfxsds"}
 >> localStorage = {"user_tk":"{\"status\":\"success\",\"token\":\"xxSSASfxsds\"}"}
Browser: redirect to URL http://localhost/home.html
== naviage to Home ==
 >> localStorage = {"user_tk":"{\"status\":\"success\",\"token\":\"xxSSASfxsds\"}"}
 >> localStorage : getItem user_tk return {"status":"success","token":"xxSSASfxsds"}
 >> token = xxSSASfxsds
Display Home Page

D:\business_model> 

output_errro_case.txt

OK
HTTP Space init ... OK
  >> init AAA server
 >> AAA : [{"uname":"user1","pass":"pass1"},{"uname":"user2","pass":"pass2"},{"uname":"test","pass":"pass"}]
Server : Start
 >> Localstorage init ... ok
 >> localStorage = {}
Browser : Open
Browser: user navigate to  URL http://localhost/logon.html
Browser: user key in form : {"uname":"test","upass":"pass_err"}
Browser: Ajax Post  http://localhost/logon.php , PARAM: [object Object]
server : accept param : [object Object]
 >>> AAA : find test/pass_err
 >>> result  = undefined
  logon Error , return {"status":"fail","token":""}
>>>  return from server is {"status":"fail","token":""}
Browser: set localStorage key = user_tk,value=
 >> localStorage : set Item user_tk ,
 >> localStorage = {"user_tk":""}
Browser: redirect to URL http://localhost/logon.html