How to fix username/password authentication bug in Chrome when Google auth works fine? Answered

• 

  Tyler Bell

  • July 23, 2023 17:30

  Problem is when clicking the “View password” button, the input is changing to data-ms-member=“text”

  

  I recommend only changing the type of the input when that eye icon is clicked.

  type=“password” shows the dots
  type=“text” shows the actual value
  Nothing else in the input needs or should change.

  0
• 

  Lakshman Mody

  • July 23, 2023 17:32

  not 100% following. Here is the JS I have for the "Show/Hide logic"

  <script>
  //attach a click handler to the button to make it transform when clicked, via our transform() function below
   document.querySelector("[data-transform]").addEventListener("click", transform);
   //flag of whether or not it is a password field or text field
   var isPassword = true;
   //this function will toggle the input between being a password or a text input
   function transform() {
   //copy the element itself, its html source, and value text to a variable
   var myInput = document.querySelector("[data-show]");
   var oldHtml = myInput.outerHTML;
   var text = myInput.value;
   if (isPassword)
   {
   //replace "password" with "text" in the html if it is a password field
   var newHtml = oldHtml.replace(/password/g, "text");
   }
   else
   {
   //replace "text" with "password" if it is a text field
   newHtml = oldHtml.replace(/text/g, "password");
   }
   //update the html
   myInput.outerHTML = newHtml;
   //restore the text value
   myInput = document.querySelector("[data-show]");
   myInput.value = text;
   //toggle the isPassword flag
   isPassword = !isPassword;
   }
  </script>

   

  it seems to only be toggling type between "password" and "text"?

  but ur right, the problem, doesn't occur when the user hasn't clicked the "Show Password" button

  used chatGPT to rewrite the JS and solved, thanks!

  function transform() {
  //copy the element itself and value text to a variable
  var myInput = document.querySelector("[data-show]");
  var text = myInput.value;
  if (isPassword) {
  // Change the type to "text" if it is a password field
  myInput.type = "text";
  } else {
  // Change the type to "password" if it is a text field
  myInput.type = "password";
  }
  // Restore the text value
  myInput.value = text;
  // Toggle the isPassword flag
  isPassword = !isPassword;
  }

  0

Please sign in to leave a comment.