diff --git a/frontend/src/utils/inputs/password.js b/frontend/src/utils/inputs/password.js index 2bb750802..3f5fe3b8b 100644 --- a/frontend/src/utils/inputs/password.js +++ b/frontend/src/utils/inputs/password.js @@ -1,4 +1,5 @@ import { Utility } from '../../core/utility'; +import { EventManager, EventWrapper, EVENT_TYPE } from '../../lib/event-manager/event-manager'; const PASSWORD_INITIALIZED_CLASS = 'password-input--initialized'; @@ -9,6 +10,9 @@ export class Password { _element; _iconEl; _toggleContainerEl; + _wrapperEl; + + _eventManager; constructor(element) { if (!element) @@ -18,25 +22,26 @@ export class Password { return false; this._element = element; + this._eventManager = new EventManager(); 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._wrapperEl = document.createElement('div'); + this._wrapperEl.classList.add('password-input__wrapper'); + this._wrapperEl.appendChild(this._element); this._toggleContainerEl = document.createElement('div'); this._toggleContainerEl.classList.add('password-input__toggle'); - wrapperEl.appendChild(this._toggleContainerEl); + this._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); + parentEl.insertBefore(this._wrapperEl, siblingEl); this._element.classList.add(PASSWORD_INITIALIZED_CLASS); } @@ -44,17 +49,30 @@ export class Password { start() { this.updateVisibleIcon(this.isVisible()); - this._toggleContainerEl.addEventListener('mouseover', () => { + const mouseOverEv = new EventWrapper(EVENT_TYPE.MOUS_OVER, (() => { this.updateVisibleIcon(!this.isVisible()); - }); - this._toggleContainerEl.addEventListener('mouseout', () => { + }).bind(this), this._toggleContainerEl); + + const mouseOutEv = new EventWrapper(EVENT_TYPE.MOUSE_OUT, (() => { this.updateVisibleIcon(this.isVisible()); - }); - this._toggleContainerEl.addEventListener('click', (event) => { + }).bind(this), this._toggleContainerEl); + + const clickEv = new EventWrapper(EVENT_TYPE.CLICK,((event) => { event.preventDefault(); event.stopPropagation(); this.setVisible(!this.isVisible()); - }); + }).bind(this), this._toggleContainerEl ); + + this._eventManager.registerListeners([mouseOverEv, mouseOutEv, clickEv]); + } + + destroy() { + this._iconEl.remove(); + this._toggleContainerEl.remove(); + this._wrapperEl.remove(); + this._iconEl.remove(); + + this._element.classList.remove(PASSWORD_INITIALIZED_CLASS); } isVisible() {