EWD 3 Training Course Part 13: Putting Everything so far into Practice using QEWD

Copyright © 2016 M/Gateway Developments Ltd
EWD 3 Training Course
Part 13
Putting everything so far into
practice in QEWD
Rob Tweed
Director, M/Gateway Developments Ltd
Twitter: @rtweed

Let’s put it all into practice
• Try cutting and pasting the following
example code
• Then try running it!

Where your files go: a reminder
• Windows & Caché:
– Front-end HTML, JavaScript, CSS files:
• C:qewdwww{applicationName}
– eg:
– c:qewdwwwdemo1index.html
– c:qewdwwwdemo1app.js
– Back-end QEWD handler functions:
• C:qewdnode_modules{application}.js eg:
– C:qewdnode_modulesdemo1.js

Where your files go: a reminder
• Linux & Raspberry Pi:
– Front-end HTML, JavaScript, CSS files:
• ~/qewd/www/{applicationName}
– eg:
– ~/qewd/www/demo1/index.html
– ~/qewd/www/demo1/app.js
– Back-end QEWD handler functions:
• ~/qewd/node_modules/{application}.js eg:
– ~/qewd/node_modules/demo1.js

Simple Login Example
• index.html
<html>
<head>
<title>Demo ewd-xpress application</title>
<link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet" />
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="/ewd-client.js"></script>
<script src="app.js"></script>
<table id="loginForm">
<tr>
<td>Username:</td>
<td><input type="text" id="username" /></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" id="password" /></td>
</tr>
<tr>
<td colspan="2">
<button id="loginBtn">Login</button>
</td>
</tr>
</table>
<br /><br />
<button id="testBtn">Click Me</button>
</body>
</html>

• Front-end:
– app.js
$(document).ready(function() {
EWD.log = true;
EWD.on('ewd-registered', function() {
EWD.on('error', function(responseObj) {
toastr.error(responseObj.message.error);
});
EWD.on('intermediate', function(responseObj) {
toastr.info('Intermediate response: ' + responseObj.message.date);
});
$('#testBtn').on('click', function(e) {
var message = {type: 'testButton'};
EWD.send(message, function(responseObj) {
if (!responseObj.message.error) toastr.info(JSON.stringify(responseObj.message));
});
});
$('#loginBtn').on('click', function(e) {
var username = $('#username').val();
if (username === '') {
toastr.error('You must enter a username');
return;
}
var password = $('#password').val()
if (password === '') {
toastr.error('You must enter a password');
return;
}
var message = {
type: 'login',
params: {
username: username,
password: password
}
};
if (!responseObj.message.error) $('#loginForm').hide();
});
});
});
EWD.start('demo1', $, io);
});

• back-end:
– demo1.js
function checkLogin(username, password) {
// hard-coded version for now
if (username !== 'rob') return {error: 'Invalid username'};
if (password !== 'secret') return {error: 'Invalid password'};
return {ok: true};
}
module.exports = {
handlers: {
login: function(messageObj, session, send, finished) {
if (session.authenticated) {
finished({error: 'You are already logged in!'});
return;
}
var username = messageObj.params.username;
finished({error: 'You must enter a username'});
return;
}
var password = messageObj.params.password;
finished({error: 'You must enter a password'});
return;
}
var status = checkLogin(username, password);
if (status.ok) {
session.authenticated = true;
finished({ok: true});
}
else {
finished({error: status.error});
}
},
testButton: function(messageObj, session, send, finished) {
if (!session.authenticated) {
finished({error: 'You are not yet logged in!'});
return;
}
send({
type: 'intermediate',
foo: 'bar',
date: new Date().toString()
});
finished({
ok: 'testButton message was processed successfully!'
});
}
}
};

Add logout and more sophistication

Login Example v2
• Index.html <html>
<head>
<title>Demo ewd-xpress application</title>
<link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet" />
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="/ewd-client.js"></script>
<script src="app.js"></script>
<table id="loginForm">
<tr>
<td>Username:</td>
<td><input type="text" id="username" /></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" id="password" /></td>
</tr>
<tr>
<td colspan="2">
<button id="loginBtn">Login</button>
</td>
</tr>
</table>
<br /><br />
<button id="testBtn">Click Me</button>
<br /><br />
<button id="logoutBtn">Logout</button>
</body>
</html>

Login Example v2
• app.js
$(document).ready(function() {
EWD.log = true;
// hide the login form until its safe for user to log in
$('#loginForm').hide();
$('#logoutBtn').hide();
EWD.on('ewd-registered', function() {
EWD.on('error', function(responseObj) {
toastr.error(responseObj.message.error);
});
EWD.on('intermediate', function(responseObj) {
toastr.info('Intermediate response: ' + responseObj.message.date);
});
$('#testBtn').on('click', function(e) {
var message = {type: 'testButton'};
if (!responseObj.message.error) toastr.info(JSON.stringify(responseObj.message));
});
});
$('#loginBtn').on('click', function(e) {
var username = $('#username').val();
toastr.error('You must enter a username');
return;
}
var password = $('#password').val()
toastr.error('You must enter a password');
return;
}
var message = {
type: 'login',
params: {
username: username,
password: password
}
};
if (!responseObj.message.error) {
$('#loginForm').hide();
$('#logoutBtn').show();
}
});
});
$('#logoutBtn').on('click', function(e) {
EWD.disconnectSocket();
});
EWD.on('socketDisconnected', function() {
toastr.info('You have been logged out');
setTimeout(function() {
// reload index.html so a clean new session begins
location.reload();
}, 1000);
});
// safe for user to login now so reveal the form
$('#loginForm').show();
});
EWD.start('demo1', $, io);
});

Login Example v2
• demo1.js
return {ok: true};
}
module.exports = {
handlers: {
return;
}
return;
}
return;
}
var status = checkLogin.call(this, username, password);
if (status.ok) {
session.timeout = 3600;
session.updateExpiry();
}
else {
}
},
return;
}
send({
foo: 'bar',
});
finished({
});
}
}
};
Update session
timeout & expiry

Login Example v2
• demo1.js
return {ok: true};
}
module.exports = {
handlers: {
return;
}
return;
}
return;
}
if (status.ok) {
}
else {
}
},
return;
}
send({
foo: 'bar',
});
finished({
});
}
}
};
Note: using call so this is
the context inside checkLogin()

Login Example v2
• demo1.js
var status = this.db.function({
function: 'login^security',
arguments: [username, password]
});
if (status == 1) return {ok: true};
return {error: 'Invalid login attempt};
}
module.exports = {
handlers: {
return;
}
return;
}
return;
}
if (status.ok) {
}
else {
}
},
return;
}
send({
foo: 'bar',
});
finished({
});
}
}
So we could invoke a legacy
Mumps/Cache function to
handle the login

Login Example v2
• demo1.js
var auth = new this.documentStore.DocumentNode('authentication');
if (!auth.$(username).exists return {error: 'Invalid username'};
if (auth.$username.$('password').value === password) return {ok: true};
return {error: 'Invalid password};
}
module.exports = {
handlers: {
return;
}
return;
}
return;
}
if (status.ok) {
}
else {
}
},
return;
}
send({
foo: 'bar',
});
finished({
});
}
}
};
Or we could access an
Authentication document

EWD 3 Training Course Part 13: Putting Everything so far into Practice using QEWD

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to EWD 3 Training Course Part 13: Putting Everything so far into Practice using QEWD

Similar to EWD 3 Training Course Part 13: Putting Everything so far into Practice using QEWD (20)

More from Rob Tweed

More from Rob Tweed (13)

Recently uploaded

Recently uploaded (20)

EWD 3 Training Course Part 13: Putting Everything so far into Practice using QEWD