Locked lesson.

Upgrade

About this lesson

Adding user names to our Devise database table.

Exercise files

Download this lesson’s related exercise files.

Adding a Name To Devise.docx
58.7 KB Adding a Name to Devise - Solution.docx
59.4 KB

Quick reference

Adding a Name to Devise

In this videos we'll add a name field to our devise forms and connect it to the database.

When to use

When we created our devise user migration, we added a name field. Now we need to make that name field functional by adding it to our forms and connecting it to the database through the controller.

Instructions

For the User Sign Up Form, and the Edit Profile form, add this code:

<div class="form-group">
    <%= f.label :name %><br />
    <%= f.text_field :name, autofocus: true, class: 'form-control' %>
</div>

Next: To connect that form field to the database, we need to modify our application controller at app/controllers/application_controller.rb:

before_action :configure_permitted_parameters, if: :devise_controller?

  protected

  def configure_permitted_parameters
    devise_parameter_sanitizer.permit(:sign_up, keys: [:name])
    devise_parameter_sanitizer.permit(:account_update, keys: [:name])
  end

Hints & tips

  • To add a user name, we need to add a name input field to our forms
  • We also need to make a change to our application_controller.rb file
  • You can copy and paste the application_controller.rb code directly from the devise documentation
  • Besure to modify the devise documentation code accordingly
Login to download
  • 00:05 We're almost finished installing Devise, but we need to do one more thing.
  • 00:08 Remember when we pushed our first migration,
  • 00:11 we added this line with this name?
  • 00:13 This allows us to use our name whenever we sign up or sign in or create a new user.
  • 00:19 But if you actually come to our website and click Sign Up, all it asks for
  • 00:23 is email and password.
  • 00:24 And if we actually log in, and
  • 00:28 then come to our Edit Profile, you can see it also doesn't list a name.
  • 00:32 And the reason that is is because we added this ourselves.
  • 00:35 So by default it's not functional.
  • 00:37 We have to actually make it functional.
  • 00:39 So we need to add it to these two forms.
  • 00:40 And that's pretty easy to do and that's what we're gonna do in this video.
  • 00:43 So head over to your apps > views > devise folder and we want this registrations.
  • 00:48 So if we click Edit for instance, I'm just gonna copy this
  • 00:53 email form, the email inputs, and paste it again.
  • 00:58 And then I'm just gonna come through here and
  • 00:59 where it says email, I'm gonna change that to name, same here, name.
  • 01:05 And this email_field, I'm gonna change that to text_field.
  • 01:09 So if we save that, next we wanna do the same thing,
  • 01:13 actually we could just copy those, and come to New.
  • 01:16 This is the sign-up form, so I'm gonna scroll down to the email,
  • 01:21 and I'm just gonna paste that in again, save it.
  • 01:25 So now, if we come back here to our Edit Profile page, if we hit reload,
  • 01:30 we have the name here, but if we click Update, it says it's been updated,
  • 01:36 but if we come back to our Edit Profile the name doesn't appear.
  • 01:40 So, the form is here but it's not actually connected to the database,
  • 01:44 so we need to connect it to our database.
  • 01:46 And that's pretty easy too, we just go back to the devise documentation.
  • 01:50 If we scroll down a bit, it tells us exactly how to do it right here,
  • 01:54 it wants us to make a change to our controller or application controller.
  • 01:58 And we just need to paste in this stuff right here.
  • 02:01 So am gonna copy this, and if we come back to our controllers and
  • 02:03 open our application controller, this is the main controller for our app,
  • 02:07 we haven't done anything with it yet, so this will be the first.
  • 02:10 So I just paste this in.
  • 02:11 But we need to make a quick change here.
  • 02:13 Right here where it says Username, change that to Name since the thing we're
  • 02:18 doing is name, we called it name, so we need to change that to name.
  • 02:22 And we also need to copy this, paste it in again, and
  • 02:27 change this to account_update.
  • 02:30 So this is a little bit of ruby and if you look at it it's saying allow the name
  • 02:35 field to work on the sign-up form and allow the name field to work on
  • 02:39 the account update page, which is essentially our Edit Profile page.
  • 02:44 So that's all we need to do, just these few lines of code.
  • 02:48 So let's save this and come back here and hit reload.
  • 02:51 And now if we type in our name and our password and
  • 02:55 click Update, hopefully, you see it worked.
  • 03:01 Awesome, so now if I cancel my account.
  • 03:04 Are you sure?
  • 03:05 Okay, yes.
  • 03:06 And then sign up again, now it's asking me for
  • 03:11 my name, type that in, email address, password.
  • 03:16 Sign up, signed up.
  • 03:18 If we go to edit our profile it works.
  • 03:20 So that was the last step for devise, everything works now,
  • 03:23 hopefully you went through and edited all these pages and we're good to go.
  • 03:27 So yeah, pretty cool.
  • 03:28 I really like this devise, I think it adds great functionality to our website,
  • 03:32 super easy to install and that's all for this video

Lesson notes are only available for subscribers.

Gift this course