Signup form
Now that we have a working (though not yet complete) user profile page, we’re ready to make a signup form for our site. Since we’re about to add the ability to create new users through the web, let’s remove the user created at the console in “Adding a secure password” Section.
~/sample_app $ rm -f db/development.sqlite3
~/sample_app $ sequelize db:migrate
Loaded configuration file "config/database.json".
Using environment "development".
Using gulpfile /usr/lib/node_modules/sequelize-cli/lib/gulpfile.js
Starting 'db:migrate'...
Finished 'db:migrate' after 912 ms
== 20160119110300_create_users: migrating =======
== 20160119110300_create_users: migrated (0.632s)
== 20160126154757-add_index_to_users_email: migrating =======
== 20160126154757-add_index_to_users_email: migrated (0.306s)
== 20160128145145-add_password_digest_to_users: migrating =======
== 20160128145145-add_password_digest_to_users: migrated (0.286s)
Using form_for
The heart of the signup page is a form for submitting the relevant signup information (name, email, password, confirmation).
~/sample_app $ npm install angular-form-for --save
public/index.html
...
<script src="../node_modules/angular-md5/angular-md5.min.js"></script>
<script src="../node_modules/angular-form-for/dist/form-for.min.js"></script>
<script src="../node_modules/angular-form-for/dist/form-for.bootstrap-templates.js"></script>
...
public/app.js
...
var sampleApp = angular.module('sampleApp', [
'ui.router',
'userService',
'usersController',
'staticPagesController',
'bodyDirective',
'headDirective',
'gravatarForDirective',
'formFor',
'formFor.bootstrapTemplates'
]);
...
Recalling that the signup page /signup is routed to the new
action in the Users controller, our first step is to create the User object required as an argument to form_for
.
public/controllers/users_controller.js
...
usersController.controller(
'UsersNewCtrl',
['$scope', function ($scope) {
$scope.user = {name: '', email: '', password: '', password_confirmation: ''};
$scope.saveUser = function() {
};
}]
);
...
public/partials/users/new.html
<h1>Sign up</h1>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<form form-for="user" submit-with="saveUser()">
<text-field attribute="name" label="Name" type="text"></text-field>
<text-field attribute="email" label="Email" type="email"></text-field>
<text-field attribute="password" label="Password" type="password"></text-field>
<text-field attribute="password_confirmation" label="Password Confirmation" type="password"></text-field>
<input class="btn btn-primary" name="commit" type="submit" value="Create my account" />
</form>
</div>
</div>
public/assets/stylesheets/custom.css
...
/* forms */
input, textarea, select, .uneditable-input {
border: 1px solid #bbb;
width: 100%;
margin-bottom: 15px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
input {
height: auto !important;
}