simple_form_password_with_hints 0.0.2 → 0.0.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fa987a3f0944df96e0d63ed2f89c86e23e4a690373b2342921180e451d834464
-  data.tar.gz: d03d14601c03cab7357f4cf5d026ebcceace5f5e75a6fbe00efd5a1a8e4d4713
+  metadata.gz: 411165d58276c0c20a5597ff5fdc7fb019952929d639770ea8d64bcd41ec6289
+  data.tar.gz: e4cd204922a412f181ba7bb598908a4c4daaa5902c86ebbf1707dc0a96cc906f
 SHA512:
-  metadata.gz: 4d61860cc6cffb85b508074e41768194177d6137146915d76a63ab7832902bc0dcd7a072bbaa6f82c7d1872999cee49de0059e49d8002961b48bfaacfa634a33
-  data.tar.gz: b652cd9d96fdcb914df2f78d60631a77a7078b7d1d9148c56de75071a26ecdb75057f88ff7099304c18f810445df3db13e767b875e969d6a82ed79c5cfedf495
+  metadata.gz: 0ff1c838a6d2a72d3232987fb7d6356b9e4122d15fc06321e0e089f951c6da79731ddc26052658c2f080f19d1ed73d5d169e2fe041f557a8aa6fb11b3332bf18
+  data.tar.gz: fecbacc41e06e575a289357e6e846fa993f41d2d5060e2504b6eaa64942d947acf1c1cda115450467354cac6301c30339c64056021d523b0efe29b45daca466d

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    simple_form_password_with_hints (0.0.2)
+    simple_form_password_with_hints (0.0.6)
       rails
       simple_form
 
@@ -106,12 +106,12 @@ GEM
       mini_mime (>= 0.1.1)
     marcel (1.0.2)
     method_source (1.0.0)
-    mini_mime (1.1.1)
+    mini_mime (1.1.2)
     mini_portile2 (2.6.1)
     minitest (5.14.4)
     msgpack (1.4.2)
     nio4r (2.5.8)
-    nokogiri (1.12.4)
+    nokogiri (1.12.5)
       mini_portile2 (~> 2.6.1)
       racc (~> 1.4)
     orm_adapter (0.5.0)

data/assets/javascripts/simple_form_password_with_hints.js

@@ -1,10 +1,130 @@
-/*global $, RegExp */
-$(function () {
+Element.prototype.parents = function (selector) {
     'use strict';
-    var getCheckRegex = function (key, $check) {
+
+    var elements = [],
+        // eslint-disable-next-line consistent-this
+        elem = this,
+        ishaveselector = typeof selector !== 'undefined';
+
+    while ((elem = elem.parentElement) !== null) {
+        if (elem.nodeType !== Node.ELEMENT_NODE) {
+            continue;
+        }
+
+        if (!ishaveselector || elem.matches(selector)) {
+            elements.push(elem);
+        }
+    }
+
+    return elements;
+};
+
+Element.prototype.parent = function (selector) {
+    'use strict';
+    var elements = this.parents(selector);
+
+    if (elements.length > 0) {
+        return elements[0];
+    } else {
+        return null;
+    }
+};
+
+(function () {
+    'use strict';
+    var initialized = false,
+        simpleFormPasswordWithHints;
+
+    simpleFormPasswordWithHints = {
+        init: function () {
+            var inputs = document.querySelectorAll('.js-sfpwh-hints-input'),
+                togglers = document.querySelectorAll('.js-sfpwh-password-toggle'),
+                syncInputs = document.querySelectorAll('.js-sfpwh-sync-input'),
+                i = 0;
+
+            if (initialized) {
+                return false;
+            }
+            initialized = true;
+
+            this.listen(inputs, 'input', this.onInput.bind(this));
+            this.listen(togglers, 'click', this.onClickToggler);
+
+            for (i = 0; i < syncInputs.length; i +=1) {
+                this.bindEquality(syncInputs[i]);
+            }
+        },
+
+        listen: function (elements, action, callback) {
+            var i;
+            for (i = 0; i < elements.length; i +=1) {
+                elements[i].addEventListener(action, callback.bind(this, elements[i]));
+            }
+        },
+
+        onInput: function (element) {
+            var container = element.parent('.password_with_hints'),
+                checks = ['length', 'uppercase', 'lowercase', 'number', 'special'],
+                i;
+            for (i = 0; i < checks.length; i += 1) {
+                this.check(container, checks[i], element.value);
+            }
+        },
+
+        check: function (container, key, value) {
+            var check = container.querySelector('.js-sfpwh-hint-' + key),
+                regexKey,
+                regex;
+
+            if (check) {
+                regexKey = this.getRegex(key, check);
+                regex = new RegExp(regexKey);
+                if (value.match(regex)) {
+                    check.classList.remove('sfpwh-hint--invalid');
+                } else {
+                    check.classList.add('sfpwh-hint--invalid');
+                }
+            }
+        },
+
+        bindEquality: function (input) {
+            var form = input.parent('form'),
+                target = form.querySelector('input[name="' + input.getAttribute('data-link-to') + '"]');
+            input.addEventListener('input', this.compare.bind(this, input, target));
+            target.addEventListener('input', this.compare.bind(this, input, target));
+        },
+
+        compare: function (field, target) {
+            var container = field.parent('.password_with_sync'),
+                check;
+
+            if (container) {
+                check = container.querySelector('.js-sfpwh-hint-match');
+            }
+
+            if (field.value !== '' && field.value === target.value) {
+                check.classList.remove('sfpwh-hint--invalid');
+            } else {
+                check.classList.add('sfpwh-hint--invalid');
+            }
+        },
+
+        onClickToggler: function (element) {
+            var container = element.parent('.password_with_hints, .password_with_sync'),
+                input = container.querySelector('.js-sfpwh-input');
+
+            element.classList.toggle('sfpwh-password-toggle-revealed');
+
+            input.type = input.type === 'text' ? 'password' : 'text';
+        },
+
+        // HELPERS
+
+        getRegex: function (key, element) {
             var regex,
                 min,
                 chars;
+
             switch (key) {
             case 'uppercase':
                 regex = '[A-Z]';
@@ -17,71 +137,25 @@ $(function () {
                 break;
             case 'special':
                 // hyphen must be at the end
-                chars = $check.data('chars');
+                chars = element.getAttribute('data-chars');
                 regex = '[' + chars + ']';
                 break;
             case 'length':
-                min = $check.data('length');
+                min = element.getAttribute('data-length');
                 regex = '.{' + min + ',128}';
                 break;
             default:
                 break;
             }
             return regex;
-        },
-        performCheck = function ($container, key, password) {
-            var $check = $('.js-sfpwh-hint-' + key, $container),
-                regexKey = getCheckRegex(key, $check),
-                regex = new RegExp(regexKey);
-            if ($check.length) {
-                if (password.match(regex)) {
-                    $check.removeClass('sfpwh-hint--invalid');
-                } else {
-                    $check.addClass('sfpwh-hint--invalid');
-                }
-            }
-        },
-        compareFields = function (e) {
-            var $field = $(e.data.$field),
-                $target = $(e.data.$target),
-                $container = $field.parents('.password_with_sync'),
-                $check = $('.js-sfpwh-hint-match', $container);
-
-            if ($field.val() !== '' && $field.val() === $target.val()) {
-                $check.removeClass('sfpwh-hint--invalid');
-            } else {
-                $check.addClass('sfpwh-hint--invalid');
-            }
-        };
-
-    $('.js-sfpwh-hints-input').on('input', function () {
-        var $container = $(this).parents('.password_with_hints'),
-            checks = ['length', 'uppercase', 'lowercase', 'number', 'special'],
-            password = $(this).val(),
-            i;
-        for (i = 0; i < checks.length; i += 1) {
-            performCheck($container, checks[i], password);
-        }
-    });
-
-    $('.js-sfpwh-password-toggle').on('click', function () {
-        var $container = $(this).parents('.password_with_hints, .password_with_sync'),
-            $input = $('.js-sfpwh-input', $container),
-            type = $input.attr('type');
-        $(this).toggleClass('sfpwh-password-toggle-revealed');
-        if (type === 'text') {
-            $input.attr('type', 'password');
-        } else {
-            $input.attr('type', 'text');
         }
-    });
-
-    $('.js-sfpwh-sync-input').each(function (index, value) {
-        var $field = $(value),
-            $form = $field.parents('form'),
-            $target = $('input[name="' + $field.data('link-to') + '"]', $form);
+    };
 
-        $field.on('input', { $field: $field, $target: $target }, compareFields);
-        $target.on('input', { $field: $field, $target: $target }, compareFields);
-    });
-});
+    if (document.readyState === 'complete' || document.readyState === 'interactive') {
+        simpleFormPasswordWithHints.init();
+    } else {
+        window.addEventListener('DOMContentLoaded', () => {
+            simpleFormPasswordWithHints.init();
+        });
+    }
+}());

data/assets/stylesheets/simple_form_password_with_hints.sass

@@ -10,6 +10,7 @@
         & ~.invalid-feedback
             margin-top: -1.275rem
     &-hint
+        display: inline-block
         font-size: 11px
         white-space: nowrap
         &:not(:first-child)

data/lib/simple_form_password_with_hints/version.rb

@@ -1,3 +1,3 @@
 module SimpleFormPasswordWithHints
-  VERSION = "0.0.2".freeze
+  VERSION = "0.0.6".freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: simple_form_password_with_hints
 version: !ruby/object:Gem::Version
-  version: 0.0.2
+  version: 0.0.6
 platform: ruby
 authors:
 - Pierre-andré Boissinot
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-09-22 00:00:00.000000000 Z
+date: 2021-10-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails