simple_form_password_with_hints 0.0.1 → 0.0.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 98458d88dfc28b816842f0dc56ad249d4b54496e05c266d386b80cb2b4f559e4
-  data.tar.gz: 99191725c33b8633b7c2b56d9685201242b4a3e7a793419dea654588ed5d0e0b
+  metadata.gz: 891b21002820e82ef116a1b150acfee6fc0134ee7330f710e3804a2ce0fdcd7a
+  data.tar.gz: 6cb703cc5b166a077d450af16a3f05fc4d004c440cb9980ca5f60dccf645b6f0
 SHA512:
-  metadata.gz: 25135c64eafba3a0b3a793c87098ac93fd0d98160effcad1f933c87f7b46745a67ce7b958b71b29d8e12f19e36745d0e9bdc81ec48ea76ce0dcd0b8789f7dc00
-  data.tar.gz: 7128e1b3b8c2fc69e0d9bb64d261854203fdaddbce818f8876d4cfdc640f83fe6088b821e68d3bc74055f177760c296f384025ec81e05f0f29820bcb8f249d7e
+  metadata.gz: 58beba01eee82e29dd3497cf101b397de049465564865a2730b632b6d2f9b23d98cca51ab2c97b6bf2ffb03caf1edf50c56b6e512b7b20bcbfb5b4590087edd5
+  data.tar.gz: 22521ab12a5d39ec5c1b10066ab49f8640bb2a3d740f32ccccc472d0d15da5905f15b20e29475f2c3643642be59c61d2b7aedaf410a4fa0c79b4cc83e83b981e

data/.gitignore

@@ -6,3 +6,4 @@
 /pkg/
 /spec/reports/
 /tmp/
+/test/dummy/tmp/

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    simple_form_password_with_hints (0.0.1)
+    simple_form_password_with_hints (0.0.5)
       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/README.md

@@ -20,6 +20,18 @@ Run the following command to install it:
 bundle install
 ```
 
+Add it to your application.sass:
+
+```
+@import 'simple_form_password_with_hints'
+```
+
+Add it to your application.js:
+
+```
+//= require simple_form_password_with_hints
+```
+
 ### Bootstrap
 
 **Simple Form Password With Hints** relies on the [Bootstrap](http://getbootstrap.com/) markup, so it presumes that you installed Simple Form with the Bootstrap option. To do that you have to use the `bootstrap` option in the Simple Form install generator, like this:
@@ -142,4 +154,4 @@ https://github.com/noesya/simple_form_password_with_hints/issues
 
 ## License
 
-MIT License. 
+MIT License.

data/assets/javascripts/simple_form_password_with_hints.js

@@ -1,10 +1,128 @@
-/*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 = this.getRegex(key, check),
+                regex = new RegExp(regexKey);
+
+            if (check) {
+                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 +135,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/config/locales/fr.yml

@@ -0,0 +1,8 @@
+fr:
+  simple_form_password_with_hints:
+    test_chars: "%{min_length} caractères minimum"
+    test_uppercase: 'Majuscule'
+    test_lowercase: 'Minuscule'
+    test_numeric: 'Chiffre'
+    test_special_char: 'Caractère spécial'
+    test_fields_matching: 'Champs similaires'

data/lib/simple_form_password_with_hints/version.rb

@@ -1,3 +1,3 @@
 module SimpleFormPasswordWithHints
-  VERSION = "0.0.1".freeze
+  VERSION = "0.0.5".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.1
+  version: 0.0.5
 platform: ruby
 authors:
 - Pierre-andré Boissinot
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-09-22 00:00:00.000000000 Z
+date: 2021-10-27 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -88,6 +88,7 @@ files:
 - assets/javascripts/simple_form_password_with_hints.js
 - assets/stylesheets/simple_form_password_with_hints.sass
 - config/locales/en.yml
+- config/locales/fr.yml
 - lib/simple_form_password_with_hints.rb
 - lib/simple_form_password_with_hints/password_with_hints_input.rb
 - lib/simple_form_password_with_hints/password_with_sync_input.rb