password-visibility.js 976 B

12345678910111213141516171819202122232425262728
  1. const visibilityOnQuery = '[data-ol-password-visibility-toggle="visibilityOn"]'
  2. const visibilityOffQuery =
  3. '[data-ol-password-visibility-toggle="visibilityOff"]'
  4. const visibilityOnButton = document.querySelector(visibilityOnQuery)
  5. const visibilityOffButton = document.querySelector(visibilityOffQuery)
  6. if (visibilityOffButton && visibilityOnButton) {
  7. visibilityOnButton.addEventListener('click', function () {
  8. const passwordInput = document.querySelector(
  9. '[data-ol-password-visibility-target]'
  10. )
  11. passwordInput.type = 'text'
  12. visibilityOnButton.hidden = true
  13. visibilityOffButton.hidden = false
  14. visibilityOffButton.focus()
  15. })
  16. visibilityOffButton.addEventListener('click', function () {
  17. const passwordInput = document.querySelector(
  18. '[data-ol-password-visibility-target]'
  19. )
  20. passwordInput.type = 'password'
  21. visibilityOffButton.hidden = true
  22. visibilityOnButton.hidden = false
  23. visibilityOnButton.focus()
  24. })
  25. }