Today we will see how use Devise views and set up an interesting material design css framework.

We will use Devise to manage our users.

Project

Creating our Rails Project

We will create a Rails project and our project will be called users-signup.

rails new users-signup

We are using the version 5.1.3 of Rails.

Project created. Let's now add Devise as our Gem. I've already used Devise in previous episodes, you know Devise help us in user management, logging users, signing up users. It's really. For the moment, Devise has some issues with this latest version of Rails, so, I'm grabbing Devise from the master branch.

vim Gemfile
gem 'devise', github: "plataformatec/devise"

Let's do a bundle install. Run devise installation. And then we can create our user model. We will not add more fields in our user model, but you know we can add more fields than just email. User created, migration created, let's run our migration. Ok, we have our database up and our model up. Let's check this in a rails console. We can see the fields the User model has.

irb(main):001:0> User.new
=> #<User id: nil, email: "", created_at: nil, updated_at: nil>
irb(main):002:0>

Ok, we have our user set up. Let's work in our views.

Generating our views

Devise allow us to generate the views for our models. We can generate the views for each devise model we have, let's see we have admin users and users, they can have different views. Because of that, we are doing this only for users.

rails generate devise:views users

Generating this, we can have our login and sign up pages as before.

But now, we can change it. To use these files we have created, we need to enable scoped views in the devise initialization.

vim config/initializers/devise.rb

And then we set the scoped_view as true. This allow us to use the views inside of users/ and also if we have admins/ it will work, we just needed to generate the view for admins.

config.scoped_views = true inside the

Now, for testing purposes, let's change the sign up page and the sign in page. Changing it, if we check the pages, it is changed! Sweet! This is good when you want to change the CSS of these pages or have more information on these pages.

Adding Materialize CSS

Let's add in our application materialize, a good and simple material design css framework.

vim Gemfile
gem 'materialize-sass'

Then, we do a bundle install.

bundle install

To use materialize, as we are using the saas version, let's remove the application.css and create a file application.scss and we need to import materialize.

@import "materialize";

Done! Now, if we reload our login page, we can see it already changed. It means, our new CSS is loaded.

Let's change our application.html.erb to improve our design.

vim app/views/layouts/application.html.erb

The first thing we will do is centralize our content using a container class and create a card to have a notion of a centered content in our website.

    <div class="container">
      <div class="card-panel z-depth-4">
        <%= yield %>
      </div>
    </div>

It looks good!

Now, let's add a navbar. We will add a navbar we can find in the examples of materialize. It's a common navbar with some buttons. And here we are making a difference when the user is logged in or not. If the user is not, we will show "log in" in the menu, and if the user is not logged in, we will show the sign out link and a serie of links.

    <nav class="lighten-1" role="navigation">
      <div class="nav-wrapper container"><a id="logo-container" href="/" class="brand-logo">My System</a>
      <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
        <ul class="right hide-on-med-and-down">
          <% if user_signed_in? %>
            <li><a href="#">Menu 1</a></li>
            <li><a href="#">Menu 2</a></li>
            <li><a href="#">Menu 3</a></li>
          <% end %>
          <li>
            <% if user_signed_in? %>
              <%= link_to "Logout", destroy_user_session_path, :method => :delete %>
            <% else %>
              <%= link_to new_user_session_path do %>
                Sign in
              <% end %>
            <% end %>
          </li>
        </ul>
      </div>
    </nav>

Refreshing, it looks really good. Let's create a user.Boom, we created a user and by default it goes to the root path, such thing we didn't set up. Let's set up a welcome controller when the user sign ups.

Creating a welcome controller

Let's create a controller that will manage our welcome page.

vim app/controllers/welcome_controller.rb
class WelcomeController < ApplicationController
  def index; end
end

Let's create the view related to that.

vim app/views/welcome/index.html.erb
<h3>Welcome!</h3>

And to make it happen, we need to setup the root router to the welcome controller.

vim config/routes.rb

Now, let's refresh our app and see the welcome page! Boom! This is our welcome page and we can see the links we created and then are shown when the user is logged in.

Let's change our welcome index page to show the user email when it's logged in:

vim app/views/welcome/index.html.erb
<% if user_signed_in? %>
  <h3>Welcome, <%= current_user.email %>!</h3>
<% else %>
  <h3>Welcome!</h3>
<% end %>

So, we are checking if the user is logged in, if so, let's show its email. Otherwise, just show welcome. Let's test that. It works :) Sweet!

Summary

Today we saw how to set up Devise views and use a Materialize CSS on rails.

Resources

Franzé Jr

Software Engineer with experience working in multi-cultural teams, Franze wants to help people when he can, and he is passionate about programming and Computer Science. Founder of RemoteMeetup.com where he can meet people all over the World. When Franze is not coding, he is studying something about programming.

  1. Comments for Changing Devise views and using Materialize CSS

You must login to comment

You May Also Like