Changing Devise views and using Materialize CSS
Customizing Devise views and using a Material Design CSS library
Tagged with rails
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.
We will create a Rails project and our project will be called
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.
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.
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.
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.
Let's add in our application materialize, a good and simple material design css framework.
Then, we do a 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.
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.
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.
Let's create a controller that will manage our welcome page.
class WelcomeController < ApplicationController def index; end end
Let's create the view related to that.
And to make it happen, we need to setup the root router to the welcome controller.
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:
<% 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!
Today we saw how to set up Devise views and use a Materialize CSS on rails.
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.