78 lines
2.1 KiB
JavaScript
78 lines
2.1 KiB
JavaScript
import { Utility } from '../../core/utility';
|
|
|
|
const PASSWORD_INITIALIZED_CLASS = 'password-input--initialized';
|
|
|
|
@Utility({
|
|
selector: 'input[type="password"]:not([uw-no-password])',
|
|
})
|
|
export class Password {
|
|
_element;
|
|
_iconEl;
|
|
_toggleContainerEl;
|
|
|
|
constructor(element) {
|
|
if (!element)
|
|
throw new Error('Password utility cannot be setup without an element!');
|
|
|
|
if (element.classList.contains(PASSWORD_INITIALIZED_CLASS))
|
|
return false;
|
|
|
|
this._element = element;
|
|
|
|
this._element.classList.add('password-input__input');
|
|
|
|
const siblingEl = this._element.nextSibling;
|
|
const parentEl = this._element.parentElement;
|
|
|
|
const wrapperEl = document.createElement('div');
|
|
wrapperEl.classList.add('password-input__wrapper');
|
|
wrapperEl.appendChild(this._element);
|
|
|
|
this._toggleContainerEl = document.createElement('div');
|
|
this._toggleContainerEl.classList.add('password-input__toggle');
|
|
wrapperEl.appendChild(this._toggleContainerEl);
|
|
|
|
this._iconEl = document.createElement('i');
|
|
this._iconEl.classList.add('fas', 'fa-fw');
|
|
this._toggleContainerEl.appendChild(this._iconEl);
|
|
|
|
parentEl.insertBefore(wrapperEl, siblingEl);
|
|
|
|
this._element.classList.add(PASSWORD_INITIALIZED_CLASS);
|
|
}
|
|
|
|
start() {
|
|
this.updateVisibleIcon(this.isVisible());
|
|
|
|
this._toggleContainerEl.addEventListener('mouseover', () => {
|
|
this.updateVisibleIcon(!this.isVisible());
|
|
});
|
|
this._toggleContainerEl.addEventListener('mouseout', () => {
|
|
this.updateVisibleIcon(this.isVisible());
|
|
});
|
|
this._toggleContainerEl.addEventListener('click', (event) => {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
this.setVisible(!this.isVisible());
|
|
});
|
|
}
|
|
|
|
isVisible() {
|
|
return this._element.type !== 'password';
|
|
}
|
|
|
|
setVisible(visible) {
|
|
this._element.type = visible ? 'text' : 'password';
|
|
this.updateVisibleIcon(visible);
|
|
}
|
|
|
|
updateVisibleIcon(visible) {
|
|
function visibleClass(visible) {
|
|
return 'fa-' + (visible ? 'eye' : 'eye-slash');
|
|
}
|
|
|
|
this._iconEl.classList.remove(visibleClass(!visible));
|
|
this._iconEl.classList.add(visibleClass(!!visible));
|
|
}
|
|
}
|