Enhancing User Experience with Logout Confirmation

Step 1: Modifying the Logout Link

Open your `header.html.erb` file. This is where you will make the initial modification to add the confirmation message to the logout link. Locate the code responsible for the logout link and update it as follows:

<%= link_to destroy_user_session_path, method: :delete, class: “dropdown-item”, data: { confirm: “Are you sure you want to sign out?” } do %>
 <span><i class=”me-50" data-feather=”power”></i>Logout</span>
<% end %>

In this code snippet, the `data-confirm` attribute is added to the logout link. The attribute’s value is the confirmation message that will be displayed to the user.

Step 2: Handling the Confirmation in JavaScript

Now, let’s move to the `application.js` file. This is where you’ll implement the JavaScript logic to handle the confirmation message. Wrap the logic in a `$(document).ready()` function to ensure it runs once the page is fully loaded. Here’s the code:

$(document).ready(function() {
  // Log a message to indicate the script is running
  console.log("signout_confirmation_message");

  // Retrieve all sign-out links with the data-confirm attribute
  const signOutLinks = document.querySelectorAll('a[data-confirm]');
  console.log(signOutLinks);

  // Add a click event listener to each sign-out link
  signOutLinks.forEach(link => {
    link.addEventListener('click', function(event) {
      // Retrieve the confirmation message from the data-confirm attribute
      const confirmationMessage = link.getAttribute('data-confirm');

      // Display the confirmation dialog
      if (!confirm(confirmationMessage)) {
        // If the user cancels, prevent the default logout action
        event.preventDefault();
      }
    });
  });
});

With this code, when a user clicks on a sign-out link, the confirmation message stored in the `data-confirm` attribute will be displayed. If the user confirms, the logout proceeds as usual. If the user cancels, the event’s default action (the logout) is prevented.

By incorporating a simple confirmation message into the logout process, you can significantly enhance the user experience of your web application. Users will appreciate the extra step that prevents accidental logouts while offering a smooth and user-friendly interaction. Implementing this feature showcases your attention to detail and commitment to delivering a seamless experience for your application’s users.