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
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.
bootstrap_form_forand go wild!