gihrig/proto-10~Nicer-Syntax.html

## proto-10~Nicer-Syntax.html
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h3>Simpler Design</h3>

<p><b>"Nicer Syntax" 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 src="node_modules/babel/node_modules/babel-core/browser.js"></script>
<!--<script type="text/babel">-->
<script>

    'use strict';

    var LoginController = {
        errors: [],
        getUser() {
            var user = document.getElementById(
                    "login_username"
            ).value;
            console.log('LoginController.getUser - user: ' + user);
            return user;
        },
        getPassword() {
            var pw = document.getElementById(
                    "login_password"
            ).value;
            console.log('LoginController.getPassword - pass: ' + pw);
            return pw;
        },
        validateEntry(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(title, msg) {
            console.log('LoginController.showDialog');
            // display success message to user in dialog
            alert(title + ': ' + msg);
        },
        failure(err) {
            console.log('LoginController.failure');
            this.errors.push(err);
            this.showDialog("Error", "Login invalid: " + err);
        }
    };

    var AuthController = {
        errors: [],
        checkAuth() {
            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));
            }
        },
        server(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');
            }
        },
        accepted(msg) {
            console.log('AuthController.accepted');
            this.showDialog("Success", msg)
        },
        rejected(err) {
            console.log('AuthController.rejected - err: ' + err);
            this.failure("Auth Failed: " + err);
        }
    };

    // Link `AuthController` to delegate to `LoginController`
    Object.setPrototypeOf(AuthController, LoginController);

</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>"Nicer Syntax" 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 src="node_modules/babel/node_modules/babel-core/browser.js"></script>
	<!--<script type="text/babel">-->
	<script>

	'use strict';

	var LoginController = {
	errors: [],
	getUser() {
	var user = document.getElementById(
	"login_username"
	).value;
	console.log('LoginController.getUser - user: ' + user);
	return user;
	},
	getPassword() {
	var pw = document.getElementById(
	"login_password"
	).value;
	console.log('LoginController.getPassword - pass: ' + pw);
	return pw;
	},
	validateEntry(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(title, msg) {
	console.log('LoginController.showDialog');
	// display success message to user in dialog
	alert(title + ': ' + msg);
	},
	failure(err) {
	console.log('LoginController.failure');
	this.errors.push(err);
	this.showDialog("Error", "Login invalid: " + err);
	}
	};

	var AuthController = {
	errors: [],
	checkAuth() {
	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));
	}
	},
	server(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');
	}
	},
	accepted(msg) {
	console.log('AuthController.accepted');
	this.showDialog("Success", msg)
	},
	rejected(err) {
	console.log('AuthController.rejected - err: ' + err);
	this.failure("Auth Failed: " + err);
	}
	};

	// Link `AuthController` to delegate to `LoginController`
	Object.setPrototypeOf(AuthController, LoginController);

	</script>

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

	</body>
	</html>