gihrig/proto-9~Simpler-Design.html

## proto-9~Simpler-Design.html
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h3>Simpler Design</h3>
<p><b>"De-class-ified" Login/Auth code implemented using OLOO-style Behavior Delegation:</b></p>
<p><small>YDKJS ch 6: Login/AuthController from proto-9-Simpler-Design.js</small></p>
<p><small>User: Joe  Password: Password</small></p>
<br />

<form id="login_form" action="" method="GET">
    <label for="login_username">User Name</label>
    <input id="login_username" type="text" value=""/>
    <label for="login_password">Password</label>
    <input id="login_password" type="text" value=""/>
    <input type="submit" name="Login"/>
</form>

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

<script>
    var LoginController = {
        errors: [],
        getUser: function () {

            var user =  document.getElementById(
                "login_username"
            ).value;
            console.log('LoginController.getUser - user: ' + user);
            return user;
        },
        getPassword: function () {
            var pw =  document.getElementById(
                "login_password"
            ).value;
            console.log('LoginController.getPassword - pass: ' + pw);
            return pw;
        },
        validateEntry: function (user, pw) {
            console.log('LoginController.validateEntry - User: ' + user + ' pass: ' + pw);
            user = user || this.getUser();
            pw = pw || this.getPassword();
            if (!(user && pw)) {
                return this.failure(
                    "Please enter a username & password!"
                );
            }
            else if (pw.length < 5) {
                return this.failure(
                    "Password must be 5+ characters!"
                );
            }
            // got here? validated!
            return true;
        },
        showDialog: function (title, msg) {
            console.log('LoginController.showDialog');
            // display success message to user in dialog
            alert(title + ': ' + msg);
        },
        failure: function (err) {
            console.log('LoginController.failure');
            this.errors.push(err);
            this.showDialog("Error", "Login invalid: " + err);
        }
    };

    // Link `AuthController` to delegate to `LoginController`
    var AuthController = Object.create(LoginController);
    AuthController.errors = [];
    AuthController.checkAuth = function () {
        console.log('AuthController.checkAuth');
        var user = this.getUser();
        var pw = this.getPassword();

        if (this.validateEntry(user, pw)) {
            this.server("/check-auth", {
                user: user,
                pw: pw
            })
                .then(this.accepted.bind(this))
                .catch(this.rejected.bind(this));
        }
    };
    AuthController.server = function (url, data) {
        console.log('AuthController.server - url: ' + url + ' data: ' + JSON.stringify(data));
//        return $.ajax({
//            url: url,
//            data: data
//        });
        if(data.user === 'Joe' && data.pw === 'Password') {
            return Promise.resolve('Welcome ' + data.user + '!');
        } else {
            return Promise.reject('Bad username or password');
        }
    };
    AuthController.accepted = function (msg) {
        console.log('AuthController.accepted');
        this.showDialog("Success", msg)
    };
    AuthController.rejected = function (err) {
        console.log('AuthController.rejected - err: ' + err);
        this.failure("Auth Failed: " + err);
    };
</script>

<script>
    $('#login_form').submit(function (e) {
        AuthController.checkAuth();
        e.preventDefault();
    });
</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title></title>
	</head>
	<body>
	<h3>Simpler Design</h3>
	<p><b>"De-class-ified" Login/Auth code implemented using OLOO-style Behavior Delegation:</b></p>
	<p><small>YDKJS ch 6: Login/AuthController from proto-9-Simpler-Design.js</small></p>
	<p><small>User: Joe Password: Password</small></p>
	<br />

	<form id="login_form" action="" method="GET">
	<label for="login_username">User Name</label>
	<input id="login_username" type="text" value=""/>
	<label for="login_password">Password</label>
	<input id="login_password" type="text" value=""/>
	<input type="submit" name="Login"/>
	</form>

	<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

	<script>
	var LoginController = {
	errors: [],
	getUser: function () {

	var user = document.getElementById(
	"login_username"
	).value;
	console.log('LoginController.getUser - user: ' + user);
	return user;
	},
	getPassword: function () {
	var pw = document.getElementById(
	"login_password"
	).value;
	console.log('LoginController.getPassword - pass: ' + pw);
	return pw;
	},
	validateEntry: function (user, pw) {
	console.log('LoginController.validateEntry - User: ' + user + ' pass: ' + pw);
	user = user \|\| this.getUser();
	pw = pw \|\| this.getPassword();
	if (!(user && pw)) {
	return this.failure(
	"Please enter a username & password!"
	);
	}
	else if (pw.length < 5) {
	return this.failure(
	"Password must be 5+ characters!"
	);
	}
	// got here? validated!
	return true;
	},
	showDialog: function (title, msg) {
	console.log('LoginController.showDialog');
	// display success message to user in dialog
	alert(title + ': ' + msg);
	},
	failure: function (err) {
	console.log('LoginController.failure');
	this.errors.push(err);
	this.showDialog("Error", "Login invalid: " + err);
	}
	};

	// Link `AuthController` to delegate to `LoginController`
	var AuthController = Object.create(LoginController);
	AuthController.errors = [];
	AuthController.checkAuth = function () {
	console.log('AuthController.checkAuth');
	var user = this.getUser();
	var pw = this.getPassword();

	if (this.validateEntry(user, pw)) {
	this.server("/check-auth", {
	user: user,
	pw: pw
	})
	.then(this.accepted.bind(this))
	.catch(this.rejected.bind(this));
	}
	};
	AuthController.server = function (url, data) {
	console.log('AuthController.server - url: ' + url + ' data: ' + JSON.stringify(data));
	// return $.ajax({
	// url: url,
	// data: data
	// });
	if(data.user === 'Joe' && data.pw === 'Password') {
	return Promise.resolve('Welcome ' + data.user + '!');
	} else {
	return Promise.reject('Bad username or password');
	}
	};
	AuthController.accepted = function (msg) {
	console.log('AuthController.accepted');
	this.showDialog("Success", msg)
	};
	AuthController.rejected = function (err) {
	console.log('AuthController.rejected - err: ' + err);
	this.failure("Auth Failed: " + err);
	};
	</script>

	<script>
	$('#login_form').submit(function (e) {
	AuthController.checkAuth();
	e.preventDefault();
	});
	</script>

	</body>
	</html>