Thursday, November 24, 2016

Exploring Devise, Part 2

Introduction

In the first part of the tutorial, we learned how to install Devise and set it up in our Rails application. In this part, we will look at how to integrate DeviseInvitable.

DeviseInvitable is an extension that works with Devise. With DeviseInvitable in your application, your users can invite their friends via emails. This is a great feature to include in your application if you are building a collaboration app.

Setting Up DeviseInvitable

Open your Gemfile and add the gem:

Run the command to install bundle install.

Run the generator command to add DeviseInvitable's configuration option to the Devise configuration file.

You can see the new changes by checking out config/initializers/devise.rb with your text editor.

Next, let's add DeviseInvitable to our User model.

This will add the :invitable flag to your model, thus your User model will look like this:

Running the above command also generated a migration file that looks like what I have below:

Now migrate your database by running rake db:migrate.

Configuring the Controller for DeviseInvitable

DeviseInvitable is required to pass some parameters when sending an invite. For this to work, we need to whitelist the necessary parameter that will be used. Using your text editor, navigate to app/controllers/application_controller.rb and make yours look like what I have below:

From the above, you can see that :email  has been whitelisted for DeviseInvitable.

Now let's see what we have via our console. On your terminal, run rails console and enter what you have below.

It should produce the output that looks like what I have below, though there will be differences.

That worked as planned.

You do not want our users to send invitations via the command line, so it is important we set up DeviseInvitable to work on the front end. Doing this is very simple; run the generator command to generate the views for DeviseInvitable.

rails generate devise_invitable:views users

You will also need to add a link somewhere in your application that points to the page for sending invites (app/views/users/invitations/new.html.erb).

For this application, you can go ahead and add the link to your navigation file. Here is how I did mine:

To see the routes made available by DeviseInvitable, run the command rake routes | invit. Here is what the output will look like.

Let us see what we have at this moment. Run the command to start your server; rails server.

Point your browser to http://localhost:3000/users/invitation/new. Enter an email address in the form shown, and click on the button. That should work! If you go to the logs of your server, you should see an output that was created when you sent the invite. In the output, you will see a link to accept the invite.

You will agree with me that it will be better if you can view the email sent in your browser. Let us see how to make that work.

Integrating Letter_Opener

Letter Opener allows you preview emails in your default browser. With it, you do not have to set up a mail delivery system while working in the development environment.

Open your Gemfile and add the gem below:

gem 'letter_opener'

Run bundle install.

Using your text editor, navigate to config/environments/development.rb and add the line below.

Restart your rails server. Now point your browser to http://localhost:3000/users/invitation/new. Fill and submit the form displayed. This time, a new page pops up containing the invite email.

Change Default Sign In and Sign Out Routes

By default, the sign_in and sign_out routes when using Devise look like this:

sign_in: http://localhost:3000/users/sign_in

sign_out: http://localhost:3000/users/sign_out

To change it, go to config/routes.rb and add the following:

You can point your browser to http://localhost:3000/signin.

Conclusion

Now you know how to make use of DeviseInvitable. You also learned about the gem letter_opener. There are lots of things you can do with Devise, so check out the Wiki to learn more. Thanks for staying with me.


by Kingsley Silas Chijioke via Envato Tuts+ Code

No comments:

Post a Comment