18: Styling the registration and sing in forms

Hehe, styling the user registration form is not that easy, after all. But we are impressed if you managed to do so.

At this point, the registration form looks like this

But the location of the view associated to it is not clear. However, there is a clue. When Rails starts with rails server, we see the following logs:

➜  rgdemo  rails server
=> Booting WEBrick
=> Rails 4.2.4 application starting in development on http://localhost:3000
=> Run `rails server -h` for more startup options
=> Ctrl-C to shutdown server
[2016-02-13 14:16:58] INFO  WEBrick 1.3.1
[2016-02-13 14:16:58] INFO  ruby 2.2.2 (2015-04-13) [x86_64-darwin14]
[2016-02-13 14:16:58] INFO  WEBrick::HTTPServer#start: pid=18475 port=3000


Started GET "/users/sign_up" for ::1 at 2016-02-13 14:17:10 +0200
  ActiveRecord::SchemaMigration Load (0.1ms)  SELECT "schema_migrations".* FROM "schema_migrations"
Processing by Devise::RegistrationsController#new as HTML
  Rendered /Users/doina/.rvm/rubies/ruby-2.2.2/lib/ruby/gems/2.2.0/gems/devise-3.5.2/app/views/devise/shared/_links.html.erb (1.7ms)
  Rendered /Users/doina/.rvm/rubies/ruby-2.2.2/lib/ruby/gems/2.2.0/gems/devise-3.5.2/app/views/devise/registrations/new.html.erb within layouts/application (42.1ms)
Completed 200 OK in 492ms (Views: 470.2ms | ActiveRecord: 0.4ms)

Note the rendering of app/views/devise/registrations/new.html.erb above.

Devise (the library that we use for authentication) renders two views (.html.erb files) from somewhere else! If we look at the Devise documentation, we see that we can ask Devise to generate those views.

Stop the server (using Ctrl+C) and run the following in the terminal:

> rails generate devise:views

Now look in your Sublime Text tree on the left, you see a lot of new files in the app/views/devise directory :

app/views/devise
├── confirmations
│   └── new.html.erb
├── mailer
│   ├── confirmation_instructions.html.erb
│   ├── reset_password_instructions.html.erb
│   └── unlock_instructions.html.erb
├── passwords
│   ├── edit.html.erb
│   └── new.html.erb
├── registrations
│   ├── edit.html.erb
│   └── new.html.erb
├── sessions
│   └── new.html.erb
├── shared
│   └── _links.html.erb
└── unlocks
    └── new.html.erb

7 directories, 11 files

Let's open the file app/views/devise/registrations/new.html.erb. We see the following there:

<h2>Sign up</h2>

<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
  <%= devise_error_messages! %>

  <div class="field">
    <%= f.label :email %><br />
    <%= f.email_field :email, autofocus: true %>
  </div>

  <div class="field">
    <%= f.label :password %>
    <% if @minimum_password_length %>
    <em>(<%= @minimum_password_length %> characters minimum)</em>
    <% end %><br />
    <%= f.password_field :password, autocomplete: "off" %>
  </div>

  <div class="field">
    <%= f.label :password_confirmation %><br />
    <%= f.password_field :password_confirmation, autocomplete: "off" %>
  </div>

  <div class="actions">
    <%= f.submit "Sign up" %>
  </div>
<% end %>

<%= render "devise/shared/links" %>

Oh! We've seen the form_for before! And we know how to style these.

Change the form_for helper to bootstrap_form_for and go wild!