2022-09-12 23:04:30 +02:00
|
|
|
import Events from '../_events'
|
|
|
|
|
|
|
|
const PasswordUI = ((window) => {
|
|
|
|
const NAME = 'js-password'
|
|
|
|
|
|
|
|
const init = () => {
|
|
|
|
console.log(`${NAME}: init`)
|
2024-03-12 00:16:24 +01:00
|
|
|
let timer
|
2022-09-12 23:04:30 +02:00
|
|
|
|
|
|
|
const toggle = (input) => {
|
2024-03-12 00:16:24 +01:00
|
|
|
console.log(`${NAME}: toggle`)
|
|
|
|
if (timer) {
|
|
|
|
clearTimeout(timer);
|
2022-09-12 23:04:30 +02:00
|
|
|
}
|
2024-03-12 00:16:24 +01:00
|
|
|
|
|
|
|
show(input)
|
2022-09-12 23:04:30 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
const show = (input) => {
|
|
|
|
input.setAttribute('type', 'text')
|
|
|
|
timer = setTimeout(() => {
|
|
|
|
hide(input)
|
|
|
|
}, 3000)
|
|
|
|
}
|
|
|
|
|
|
|
|
const hide = (input) => {
|
|
|
|
input.setAttribute('type', 'password')
|
2024-03-12 00:16:24 +01:00
|
|
|
if (timer) {
|
2022-09-12 23:04:30 +02:00
|
|
|
clearTimeout(timer);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
document.querySelectorAll(`${NAME}-show, .show-password`).forEach((el) => {
|
2024-03-12 00:16:24 +01:00
|
|
|
if (el.classList.contains(`${NAME}-active`)) {
|
2022-09-12 23:04:30 +02:00
|
|
|
return
|
|
|
|
}
|
|
|
|
|
|
|
|
el.addEventListener('click', (e) => {
|
2024-03-12 00:16:24 +01:00
|
|
|
const input = e.currentTarget.closest('.field').querySelector('input')
|
2022-09-12 23:04:30 +02:00
|
|
|
if (!input) {
|
|
|
|
return
|
|
|
|
}
|
|
|
|
|
|
|
|
toggle(input)
|
|
|
|
})
|
|
|
|
|
|
|
|
el.classList.add(`${NAME}-active`)
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
window.addEventListener(`${Events.LODEDANDREADY}`, init)
|
|
|
|
window.addEventListener(`${Events.AJAX}`, init)
|
|
|
|
})(window)
|
|
|
|
|
|
|
|
export default PasswordUI
|