~n|m

• Rails 7.0.6
• Devise 4.9

Summary

• I have a pretty standard Devise setup with links in a global navbar that look like this.

  <%= link_to('Create account', new_user_registration_path, data: {turbo_frame: 'auth-modal'} ) %>
  

  <%= link_to('Sign in', new_user_session_path, data: {turbo_frame: 'auth-modal'} ) %>
  

• In my application.html.erb, I have a turbo_frame_tag

  <%= turbo_frame_tag('auth-modal') %>
  

• My Devise templates have the correct corresponding tags

  <%= turbo_frame_tag('auth-modal') do %>
  Devise new session form / Devise new registration form
  <% end %>
  

  I also have the necessary css in place to make the frame look an actual modal when displayed.

• When clicking the links in the navbar the Sign in/log in templates do show as expected, styled as a modal. And I can sign up and login as expected.

The issue

The majority of my pages show certain content for logged out users and user specific content for logged in users. I'm trying to figure out how to update the current page, after a successful login or registration to show the new user specific content instead of the generic content. If I manually refresh the page everything works as expected. Obviously that's not ideal to make user refresh the page after logging in.

Thanks for any help in advance, and please let me know if anything is unclear!

Hey Collin, no problem at all! Thanks for clarifying. Looking forward to watching it!

Great episode Chris!

Chris! The video is se to private!

Rails 6 & Bootstrap 5 update

Installing packages

• Bootstrap and jQuery can stay the same, although Bootstrap 5 doesn't use jQuery anymore so it's actually not needed for this.

• javascript yarn add @popperjs/core
  

  instead of

  yarn add popper.js
  

Importing bootstrap into application.js

import * as bootstrap from 'bootstrap'

Selecting all tooltips

document.addEventListener('turbolinks:load', () => {
  var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
  var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl)
  })
})

Note: as mentioned above the data attribute has changed data-bs-toggle="tooltip. You can do the same thing for popovers.

Thanks Chris!

Chris, I think you nailed it this time! Every time you roll out a new site design, it's better than the previous.

Great job!

Nick

Awesome episode Chris!

Would love to see more on Stimulus!

Absolutely agree!

Chris is the man! Thanks for all the hardwork, I've learned a lot over the last 4 years!

Great episode, Chris! Love the basics/beginner genre!

Great epiode Chris! Would love to see more like this!

Chris! The new site looks awesome! Great work!

Haha!!!

Makes total sense. Thanks for the quick response Chris! You're the man!

Hey everyone,

Quick question (I hope). I have an application with Devise's out-of-the-box initial set-up. Later, I realized I wanted to include the Trackable functionality so I included it in my model, and uncommented out the Trackable section in the migration file. When I run rails db:migrate nothing happens.

Is this not an acceptable way to do this? Should I run a separate migartion to add the columns I need?

Thanks of the help!

Nick

Hey Jacob,

Thanks for the help! Unfortunately I still can't get the layout to display. I think I'm just going to move onto plan b for now.

I really appreciate your help!

Nick

Great video Chris! I'm loving this series!