User signup - A first step
As a capstone to our work on the layout and routing, in this section we’ll make a route for the signup page, which will mean creating a second controller along the way. This is a first important step toward allowing users to register for our site; we’ll take the next step, modeling users, in “Modeling users” Chapter, and we’ll finish the job in “Sign up” Chapter.
Users controller
We created our first controller, the Static Pages controller, in “Static pages” Section. It’s time to create a second one, the Users controller.
~/sample_app $ trainjs generate controller Users new
identical protractor.conf.js
create public/controllers/users_controller.js
create public/partials/controller_name
create public/partials/users/new.html
create public/test/e2e_test/controllers/users_controller_test.js
It also creates a minimal test for the new user page
public/test/e2e_test/controllers/users_controller_test.js
describe('usersControllerTest', function() {
it('should get new', function() {
var current_url = 'http://localhost:1337/#/users/new';
browser.get(current_url);
expect(browser.getCurrentUrl()).toContain('#/users/new');
expect( element(by.css('body')).getText() ).not.toEqual('');
});
});
which should currently pass
~/sample_app $ protractor protractor.conf.js
6 specs, 0 failures
Signup URL
We already have a working page for new users at /users/new
, but we want the URL to be /signup
instead.
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('signup', {
url: '/signup',
templateUrl: 'partials/users/new.html',
controller: 'UsersNewCtrl',
data: {
title: 'Sign up'
}
})
Next, we’ll use the newly defined named state to add the proper link to the button on the Home page.
public/partials/static_pages/home.html
<div class="center jumbotron">
<h1>Welcome to the Sample App</h1>
<h2>
This is the home page for the
<a href="http://www.nodeontrain.xyz/">Node On Train Tutorial</a>
sample application.
</h2>
<a class="btn btn-lg btn-primary" href ui-sref="signup">Sign up now!</a>
</div>
<a href="http://www.nodeontrain.xyz/"><img alt="Trainjs logo" src="assets/images/trainjs.png"></a>
Finally, we’ll add a custom stub view for the signup page
public/partials/users/new.html
<h1>Sign up</h1>
<p>This will be a signup page for new users.</p>
We change the new user page for the new routes
describe('usersControllerTest', function() {
it('should get new', function() {
browser.get('http://localhost:1337/#/signup');
var test = function() {
var current_url = 'http://localhost:1337/#/signup';
browser.get(current_url);
expect(browser.getCurrentUrl()).toContain('#/signup');
expect( element(by.css('body')).getText() ).not.toEqual('');
};
element.all(by.css('[ui-sref="login"]')).isDisplayed().then(function(result) {
if ( result.length > 0 ) {
test();
} else {
element(by.css('.dropdown')).click();
element(by.css('[ui-sref="logout"]')).click();
test();
}
});
})
});
The tests is passing
~/sample_app $ protractor protractor.conf.js
6 specs, 0 failures