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

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

Back

User signup - A first step

Users controller

Signup URL