EWD 3 Training Course Part 41: Building a React.js application with QEWD, Part 5

Copyright © 2016 M/Gateway Developments Ltd
EWD 3 Training Course
Part 41
Building a React.js-based
QEWD Application
(e) Building out a login sequence
Rob Tweed
Director, M/Gateway Developments Ltd
Twitter: @rtweed

What We Want to Do

React.js Design
Main Page
Title / Banner Login Form Content

React.js Design
Main Page
Initially
Initial Title Display the form No Content

React.js Design
Main Page
On login error
Initial Title Display the form No Content
Display Error

React.js Design
Main Page
On Successful
login
Hello {{user}}
title
Hide the form Display
Content

React.js Design
Main Page
React.js Mechanics
Send username
& password as EWD
message

React.js Design
Main Page
React.js Mechanics
Send username
& password as EWD
message
To QEWD
Back-end

React.js Design
Main Page
React.js Mechanics
From
Back-end
Handle response

React.js Design
Main Page
React.js Mechanics
Error response
received:
Display Error

React.js Design
Main Page
React.js Mechanics
Success response
received:
Re-render

React.js Design
Main Page
React.js Mechanics
Pass down
Username as
prop

React.js Design
Main Page
React.js Mechanics
Pass prop to
Signal successful
login

React.js Design
Main Page
React.js Mechanics
Pass prop to
signal that
content should
be displayed

So let's build out the components
In ~/qewd/www/react-demo1

MainPage.js
"use strict"
var React = require('react');
var Title = require('./Title');
var Content = require('./Content');
var Login = require('./Login');
var jQuery = require('jquery');
window.$ = window.jQuery = jQuery;
var controller;
var MainPage = React.createClass({
getInitialState: function() {
return {
status: 'initial',
}
},
componentWillMount: function() {
controller = require('./MainPage-controller')(this.props.controller, this);
},
render: function() {
console.log('Rendering MainPage');
return (
<div>
<Title
controller = {controller}
username = {this.username}
/>
<Login
loggedIn = {this.loggedIn}
/>
<Content
content = {this.content}
/>
</div>
);
}
});
module.exports = MainPage;

MainPage.js
"use strict"
var controller;
return {
status: 'initial',
}
},
},
return (
<div>
<Title
/>
<Login
/>
<Content
/>
</div>
);
}
});
Initial state
variable value

MainPage.js
"use strict"
var controller;
return {
status: 'initial',
}
},
},
return (
<div>
<Title
/>
<Login
/>
<Content
/>
</div>
);
}
});
props passed
to child
components

MainPage-controller.js
module.exports = function (controller, component) {
controller.log = true;
component.loggedIn = false;
component.username = '';
component.content = '';
controller.on('error', function(responseObj) {
alert('Error: ' + responseObj.message.error);
});
controller.on('login', function(responseObj) {
if (!responseObj.message.error) {
console.log('Logged in!');
component.loggedIn = true;
component.username = responseObj.message.name;
component.content = 'User has logged in - ready to display some content for the user!';
component.setState({
status: 'loggedIn'
});
}
});
return controller;
};

});
status: 'loggedIn'
});
}
});
return controller;
};
Response
from back-end
handled in this
top component

});
status: 'loggedIn'
});
}
});
return controller;
};
Initial values
passed as
props to child
components

});
status: 'loggedIn'
});
}
});
return controller;
};
New values
passed as
props to child
components
if login is
successful

});
status: 'loggedIn'
});
}
});
return controller;
};
State value
changed to
trigger
re-render of
this component
and its child
components

Title.js
var controller;
var Title = React.createClass({
controller = require('./Title-controller')(this.props.controller, this);
},
componentWillReceiveProps: function(newProps) {
this.updateHeading(newProps.username);
},
console.log('Rendering Title');
return (
<h2>
{this.heading}
</h2>
);
}
});
module.exports = Title;

Title.js
var controller;
var Title = React.createClass({
controller = require('./Title-controller')(this.props.controller, this);
},
this.updateHeading(newProps.username);
},
console.log('Rendering Title');
return (
<h2>
{this.heading}
</h2>
);
}
});
module.exports = Title;
Fires if props
have changed
Does not fire
on initial render

Title-controller.js
component.heading = 'My QEWD React Demo';
component.updateHeading = function(username) {
if (username !== '') {
component.heading = 'Welcome, ' + username + ', to ' + component.heading;
}
};
return controller;
};

Login.js"use strict"
var controller;
var Login = React.createClass({
return {
status: 'initial',
}
},
controller = require('./Login-controller')(this.props.controller, this);
},
console.log('rendering Login');
if (this.props.loggedIn) {
return (
<div></div>
);
}
return (
<table id="loginTable">
<tbody>
<tr>
<td>Username: </td>
<td><input id="username" /> </td>
</tr>
<tr>
<td>Password: </td>
<td><input id="password" type="password" /> </td>
</tr>
<tr>
<td colSpan="2">
<button
id="LoginBtn"
onClick={this.LoginBtnClicked}
>
Login
</button>
</td>
</tr>
</tbody>
</table>
);
}
});
module.exports = Login;

var controller;
return {
status: 'initial',
}
},
},
return (
<div></div>
);
}
return (
<tbody>
<tr>
<td>Username: </td>
</tr>
<tr>
<td>Password: </td>
</tr>
<tr>
<td colSpan="2">
<button
id="LoginBtn"
>
Login
</button>
</td>
</tr>
</tbody>
</table>
);
}
});
On successful
login, display
nothing
Form disappears

var controller;
return {
status: 'initial',
}
},
},
return (
<div></div>
);
}
return (
<tbody>
<tr>
<td>Username: </td>
</tr>
<tr>
<td>Password: </td>
</tr>
<tr>
<td colSpan="2">
<button
id="LoginBtn"
>
Login
</button>
</td>
</tr>
</tbody>
</table>
);
}
});
Otherwise,
display the form

var controller;
return {
status: 'initial',
}
},
},
return (
<div></div>
);
}
return (
<tbody>
<tr>
<td>Username: </td>
</tr>
<tr>
<td>Password: </td>
</tr>
<tr>
<td colSpan="2">
<button
id="LoginBtn"
>
Login
</button>
</td>
</tr>
</tbody>
</table>
);
}
});
JSX Click handler

Login-controller.js
component.LoginBtnClicked = function(e) {
var username = $('#username').val();
var password = $('#password').val();
if (username === '') {
alert('You must enter a username!');
return;
}
if (password === '') {
alert('You must enter a password!');
return;
}
controller.send({
type: 'login',
params: {
username: username,
password: password
}
});
};
return controller;
};

Login-controller.js
return;
}
return;
}
controller.send({
type: 'login',
params: {
username: username,
password: password
}
});
};
return controller;
};
Define the
Login button's
click handler

Login-controller.js
return;
}
return;
}
controller.send({
type: 'login',
params: {
username: username,
password: password
}
});
};
return controller;
};
Send the username
and password to
the ewd-xpress
Back-end
The response is
handled in the
Parent component

Content.js
var controller;
var Content = React.createClass({
controller = require('./Content-controller')(this.props.controller, this);
},
this.updateContent(newProps.content);
},
console.log('Rendering Content');
return (
<div>
{this.content}
</div>
);
}
});
module.exports = Content;

Content.js
var controller;
},
},
return (
<div>
{this.content}
</div>
);
}
});
Simply display
the value of
this.content each
Time it renders

Content.js
var controller;
},
},
return (
<div>
{this.content}
</div>
);
}
});
Use the
componentWillReceiveProps
life-cycle method to
update the content
whenever re-rendering
occurs

Content.js
var controller;
},
},
return (
<div>
{this.content}
</div>
);
}
});
The
componentWillReceiveProps
life-cycle method will
invoke a method named
this.updateContent
We'll define it in the
content-controller module

Content-controller.js
component.content = component.props.content;
component.updateContent = function(newContent) {
if (newContent !== '') {
component.content = newContent;
}
};
return controller;
};

Content-controller.js
component.content = component.props.content;
component.updateContent = function(newContent) {
if (newContent !== '') {
component.content = newContent;
}
};
return controller;
};
Here's the
this.updateContent
Method
It just updates
this.content
Within the controller,
instead of this we
refer to component

Finally the back-end Module
• This must handle the login message that is
sent from the browser when the Login
form button is clicked
• It must validate the username and
password
• For simplicity, we'll just hard-code the valid
values
– In a real-world app, you'd authenticate against
a database or using a dedicated API

Finally the back-end Module
• It's advisable to repeat any browser-side
validation at the back-end
– A malicious user might attempt to send a login
message via the JavaScript console
• We'll authenticate the user and prevent an
already-logged in user from logging in
again

Back-end module
module.exports = {
handlers: {
login: function(messageObj, session, send, finished) {
if (session.authenticated) {
finished({error: 'You have already logged in'});
return;
}
if (messageObj.params.username === '') {
finished({error: 'You must enter a username'});
return;
}
if (messageObj.params.password === '') {
finished({error: 'You must enter a password'});
return;
}
if (messageObj.params.username !== 'rob') {
finished({error: 'Invalid username'});
return;
}
if (messageObj.params.password !== 'secret') {
finished({error: 'Invalid password'});
return;
}
session.authenticated = true;
finished({
ok: true,
name: 'Rob'
});
}
}
};
~/qewd/node_modules/react-demo1.js

Back-end module
module.exports = {
handlers: {
return;
}
return;
}
return;
}
return;
}
return;
}
finished({
ok: true,
name: 'Rob'
});
}
}
};
Repeat the
Browser-side
Validation
Return an error
object if it fails

Back-end module
module.exports = {
handlers: {
return;
}
return;
}
return;
}
return;
}
return;
}
finished({
ok: true,
name: 'Rob'
});
}
}
};
Here's our simple
hard-coded validation
Username must be
'rob' and password
must be 'secret'

Back-end module
module.exports = {
handlers: {
return;
}
return;
}
return;
}
return;
}
return;
}
finished({
ok: true,
name: 'Rob'
});
}
}
};
Set the session
authenticated
property

Back-end module
module.exports = {
handlers: {
return;
}
return;
}
return;
}
return;
}
return;
}
finished({
ok: true,
name: 'Rob'
});
}
}
};
Return a user name
in the response object
This simple example uses
a hard-coded value: 'Rob'

That should be it!
• Re-bundle it using Browserify in the
normal way
• Try running it!

Try it

Login with wrong credentials

Successful login
Username: rob ; password: secret

How that happened

React.js Design
Main Page
React.js Mechanics
Send username
& password as EWD
message
To Back-end
module:
react-demo1.js

});
status: 'loggedIn'
});
}
});
return controller;
};
error handler displays
alerts

});
status: 'loggedIn'
});
}
});
return controller;
};
login handler deals
with successful
logins

And so we have a working demo!
Username: rob ; password: secret

EWD 3 Training Course Part 41: Building a React.js application with QEWD, Part 5

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (17)

Similar to EWD 3 Training Course Part 41: Building a React.js application with QEWD, Part 5

Similar to EWD 3 Training Course Part 41: Building a React.js application with QEWD, Part 5 (20)

More from Rob Tweed

More from Rob Tweed (13)

Recently uploaded

Recently uploaded (20)

EWD 3 Training Course Part 41: Building a React.js application with QEWD, Part 5