mirror of https://github.com/docusealco/docuseal
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
63 lines
2.2 KiB
63 lines
2.2 KiB
import { target, targetable } from '@github/catalyst/lib/targetable'
|
|
|
|
export default targetable(class extends HTMLElement {
|
|
static [target.static] = [
|
|
'visiblePasswordIcon',
|
|
'hiddenPasswordIcon',
|
|
'passwordInput',
|
|
'togglePasswordVisibility'
|
|
]
|
|
|
|
connectedCallback () {
|
|
// Make toggle button keyboard accessible
|
|
if (!this.togglePasswordVisibility.hasAttribute('tabindex')) {
|
|
this.togglePasswordVisibility.setAttribute('tabindex', '0')
|
|
}
|
|
if (!this.togglePasswordVisibility.hasAttribute('role')) {
|
|
this.togglePasswordVisibility.setAttribute('role', 'button')
|
|
}
|
|
|
|
this.updateToggleAria()
|
|
this.togglePasswordVisibility.addEventListener('click', this.handleTogglePasswordVisibility)
|
|
|
|
// Add keyboard support for Enter and Space keys
|
|
this.handleKeydown = (e) => {
|
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
e.preventDefault()
|
|
this.handleTogglePasswordVisibility()
|
|
}
|
|
}
|
|
this.togglePasswordVisibility.addEventListener('keydown', this.handleKeydown)
|
|
|
|
document.addEventListener('turbo:submit-start', this.setInitialPasswordType)
|
|
}
|
|
|
|
disconnectedCallback () {
|
|
this.togglePasswordVisibility.removeEventListener('click', this.handleTogglePasswordVisibility)
|
|
this.togglePasswordVisibility.removeEventListener('keydown', this.handleKeydown)
|
|
document.removeEventListener('turbo:submit-start', this.setInitialPasswordType)
|
|
}
|
|
|
|
handleTogglePasswordVisibility = () => {
|
|
this.passwordInput.type = this.passwordInput.type === 'password' ? 'text' : 'password'
|
|
this.toggleIcon()
|
|
}
|
|
|
|
setInitialPasswordType = () => {
|
|
this.passwordInput.type = 'password'
|
|
this.toggleIcon()
|
|
}
|
|
|
|
toggleIcon = () => {
|
|
this.visiblePasswordIcon.classList.toggle('hidden', this.passwordInput.type === 'password')
|
|
this.hiddenPasswordIcon.classList.toggle('hidden', this.passwordInput.type === 'text')
|
|
this.updateToggleAria()
|
|
}
|
|
|
|
updateToggleAria = () => {
|
|
const isVisible = this.passwordInput.type === 'text'
|
|
this.togglePasswordVisibility.setAttribute('aria-label', isVisible ? 'Hide password' : 'Show password')
|
|
this.togglePasswordVisibility.setAttribute('aria-pressed', isVisible ? 'true' : 'false')
|
|
}
|
|
})
|