https://superelba.com/public/js/ems-password-toggle.js?v=1790896199

1/**
2 * Ojito para ver/ocultar contraseña en logins PWA.
3 */
4(function () {
5  if (window.__emsPasswordToggleReady) return;
6  window.__emsPasswordToggleReady = true;
7
8  var CSS = ''
9    + '.ems-pw-wrap{position:relative;display:block;width:100%;max-width:100%;}'
10    + '.ems-pw-wrap>input{padding-right:48px !important;box-sizing:border-box;width:100%;}'
11    + '.ems-pw-toggle,'
12    + 'button.ems-pw-toggle,'
13    + 'form button.ems-pw-toggle{'
14    + 'position:absolute !important;top:0 !important;bottom:0 !important;right:6px !important;left:auto !important;'
15    + 'width:36px !important;min-width:36px !important;max-width:36px !important;'
16    + 'height:36px !important;min-height:36px !important;max-height:36px !important;'
17    + 'margin:auto 0 !important;padding:0 !important;border:0 !important;border-radius:8px !important;'
18    + 'background:transparent !important;box-shadow:none !important;transform:none !important;'
19    + 'color:#6b7280 !important;display:flex !important;align-items:center !important;justify-content:center !important;'
20    + 'line-height:0 !important;cursor:pointer;z-index:2;flex:none !important;'
21    + '}'
22    + '.ems-pw-toggle:hover,.ems-pw-toggle:focus-visible,button.ems-pw-toggle:hover{'
23    + 'color:#111827 !important;background:rgba(15,23,42,.08) !important;transform:none !important;box-shadow:none !important;outline:none;'
24    + '}'
25    + '.ems-pw-toggle svg{width:20px;height:20px;display:block;flex:none;}';
26
27  var EYE = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z"/><circle cx="12" cy="12" r="3"/></svg>';
28  var EYE_OFF = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17.94 17.94A10.94 10.94 0 0 1 12 19c-7 0-11-7-11-7a21.8 21.8 0 0 1 5.06-5.94"/><path d="M9.9 4.24A10.94 10.94 0 0 1 12 4c7 0 11 7 11 7a21.77 21.77 0 0 1-2.16 3.19"/><path d="M14.12 14.12a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg>';
29
30  function injectCss() {
31    if (document.getElementById('ems-pw-toggle-css')) return;
32    var style = document.createElement('style');
33    style.id = 'ems-pw-toggle-css';
34    style.textContent = CSS;
35    document.head.appendChild(style);
36  }
37
38  function labels(input) {
39    var show = (input.getAttribute('data-show-pass-label') || 'Ver contraseña').trim();
40    var hide = (input.getAttribute('data-hide-pass-label') || 'Ocultar contraseña').trim();
41    return { show: show, hide: hide };
42  }
43
44  function enhance(input) {
45    if (!input || input.dataset.emsPwToggle === '1') return;
46    if ((input.type || '').toLowerCase() !== 'password') return;
47    input.dataset.emsPwToggle = '1';
48
49    var wrap = document.createElement('div');
50    wrap.className = 'ems-pw-wrap';
51    input.parentNode.insertBefore(wrap, input);
52    wrap.appendChild(input);
53
54    var btn = document.createElement('button');
55    btn.type = 'button';
56    btn.className = 'ems-pw-toggle';
57    btn.setAttribute('tabindex', '0');
58    var L = labels(input);
59    btn.setAttribute('aria-label', L.show);
60    btn.setAttribute('title', L.show);
61    btn.setAttribute('aria-pressed', 'false');
62    btn.innerHTML = EYE;
63    wrap.appendChild(btn);
64
65    btn.addEventListener('click', function (ev) {
66      ev.preventDefault();
67      ev.stopPropagation();
68      var visible = input.type === 'text';
69      input.type = visible ? 'password' : 'text';
70      btn.innerHTML = visible ? EYE : EYE_OFF;
71      btn.setAttribute('aria-pressed', visible ? 'false' : 'true');
72      btn.setAttribute('aria-label', visible ? L.show : L.hide);
73      btn.setAttribute('title', visible ? L.show : L.hide);
74      try { input.focus({ preventScroll: true }); } catch (e) { input.focus(); }
75    });
76  }
77
78  function scan(root) {
79    var scope = root && root.querySelectorAll ? root : document;
80    var list = scope.querySelectorAll('input[type="password"]');
81    for (var i = 0; i < list.length; i++) enhance(list[i]);
82  }
83
84  function boot() {
85    injectCss();
86    scan(document);
87    if (window.MutationObserver) {
88      var mo = new MutationObserver(function (muts) {
89        for (var i = 0; i < muts.length; i++) {
90          var nodes = muts[i].addedNodes || [];
91          for (var j = 0; j < nodes.length; j++) {
92            var n = nodes[j];
93            if (!n || n.nodeType !== 1) continue;
94            if (n.matches && n.matches('input[type="password"]')) enhance(n);
95            else scan(n);
96          }
97        }
98      });
99      mo.observe(document.documentElement, { childList: true, subtree: true });
100    }
101  }
102
103  if (document.readyState === 'loading') {
104    document.addEventListener('DOMContentLoaded', boot);
105  } else {

106    boot();
107  }
108
109  window.emsEnhancePasswordFields = scan;
110})();