[Code] Remember Which Social Auth Provider was used to Login

Hello, in this article I will help you make your login form more user friendly when there are multiple social auth buttons.

It can be hard for members to remember which auth provider they used to signup. Assuming they are using the same device as when they signed up, this code will help them to remember. Checkout the demo to learn more. 

Place this code before the </body> tag on your signup and login pages. 

<script>

// Function to convert string to title case
function toTitleCase(str) {
  return str.replace(/\b\w/g, function(match) {
    return match.toUpperCase();
  });
}

const socialButtons = document.querySelectorAll('[data-ms-auth-provider]');

function handleButtonClick(clickedProvider) {
  // Convert clickedProvider to title case
  const clickedProviderTitleCase = toTitleCase(clickedProvider);

  // Remove the class 'ms-clicked' from all buttons
  socialButtons.forEach(button => {
    button.classList.remove('ms-clicked');
  });

  // Find the button with the clicked provider
  const clickedButton = document.querySelector(`[data-ms-auth-provider="${clickedProvider}"]`);
  
  if (clickedButton) {
    clickedButton.classList.add('ms-clicked');
  }

  // Save the clicked provider to local storage
  localStorage.setItem('lastClickedProvider', clickedProvider);

  // Retrieve the element with the data attribute
  const messageElement = document.querySelector('[data-msx-last-clicked]');

  // Update the message text
  messageElement.textContent = `You previously logged in with ${clickedProviderTitleCase}.`;
  messageElement.style.display = 'block';
}

// Add event listener to each button
socialButtons.forEach(button => {
  button.addEventListener('click', function() {
    const clickedProvider = this.getAttribute('data-ms-auth-provider');
    handleButtonClick(clickedProvider);
  });
});

// Check if there is a previously clicked provider in local storage
const lastClickedProvider = localStorage.getItem('lastClickedProvider');

// Retrieve the element with the data attribute
const messageElement = document.querySelector('[data-msx-last-clicked]');

if (!lastClickedProvider) {
  // Hide the element if there is no previously clicked provider
  messageElement.style.display = 'none';
} else {
  // Convert lastClickedProvider to title case
  const lastClickedProviderTitleCase = toTitleCase(lastClickedProvider);

  // Display the element and set the message
  messageElement.textContent = `You previously logged in with ${lastClickedProviderTitleCase}.`;
  messageElement.style.display = 'block';

  // Add the 'ms-clicked' class to the corresponding button
  const clickedButton = document.querySelector(`[data-ms-auth-provider="${lastClickedProvider}"]`);
  if (clickedButton) {
    clickedButton.classList.add('ms-clicked');
  }
}

</script>

The code will apply the .ms-clicked classname to the most recently clicked auth button. 

And it will set the element with the attribute data-msx-last-clicked to display block and update the message after the user clicks on a button.