@iamproperty/components 5.1.0-beta → 5.1.0-beta11

package/assets/js/modules/helpers.js

@@ -47,7 +47,11 @@ export const addGlobalEvents = (body) => {
     document.addEventListener("submit", (event) => {
         if (event && event.target instanceof HTMLElement && event.target.matches('form')) {
             let form = event.target;
-            if (form.querySelector(':invalid')) {
+            // Reset password types
+            Array.from(form.querySelectorAll('[data-password-type]')).forEach((input, index) => {
+                input.setAttribute('type', 'password');
+            });
+            if (form.querySelector(':invalid') || form.querySelector('.pwd-checker[data-strength="1"]') || form.querySelector('.pwd-checker[data-strength="2"]')) {
                 form.classList.add('was-validated');
                 event.preventDefault();
             }
@@ -72,3 +76,6 @@ export const safeID = function (str) {
     str = str.replace(/\W/g, '');
     return str;
 };
+// Used to get values from nested json objects
+export const resolvePath = (object, path, defaultValue) => path.split(/[\.\[\]\'\"]/).filter(p => p).reduce((o, p) => o ? o[p] : defaultValue, object);
+export const isTraversable = o => Array.isArray(o) || o !== null && ['function', 'object'].includes(typeof o);

package/assets/js/modules/inputs.js

@@ -1,4 +1,5 @@
 // @ts-nocheck
+import hibpCheck from '../vendor/hibp.js';
 const extendInputs = (body) => {
     function loadInput() {
         // maxlength counter init
@@ -57,6 +58,8 @@ const extendInputs = (body) => {
                 input.nextElementSibling.value = input.value;
             if (input.hasAttribute('maxlength') && input.nextElementSibling)
                 input.nextElementSibling.setAttribute("data-count", input.value.length);
+            if (input.hasAttribute('data-strength-checker'))
+                checkPWDStrength(input);
         }
     });
     body.addEventListener('change', (event) => {
@@ -106,6 +109,60 @@ export const setMaxlengthVars = (input) => {
     span.setAttribute('data-count', input.value.length);
 };
 export const changeType = (input, type) => {
+    if (input.hasAttribute('type') && input.getAttribute('type') == 'password')
+        input.setAttribute('data-password-type', true);
     input.setAttribute('type', type);
 };
+export const checkPWDStrength = (input, check = 'no') => {
+    const pwdChecker = document.getElementById(input.getAttribute('data-strength-checker'));
+    const password = input.value;
+    const minChars = input.hasAttribute('minlength') ? input.getAttribute('minlength') : 12;
+    let strength = 1;
+    let strengthName = ['Very weak', 'Weak', 'Average', 'Strong', 'Very strong'];
+    let extraMsg = '';
+    //has number
+    if (password.match(/(?=.*[0-9])/))
+        strength += 1;
+    // has special character
+    if (password.match(/(?=.*[!,%,&,#,$,^,*,?,_,~,<,>,])/))
+        strength += 1;
+    // has lowercase alpha
+    if (password.match(/(?=.*[a-z])/))
+        strength += 1;
+    // has uppercase alpha
+    if (password.match(/(?=.*[A-Z])/))
+        strength += 1;
+    if (password.length < minChars) {
+        strength = 1;
+        extraMsg = `(must be at least ${minChars} characters.)`;
+    }
+    // if the strength is above weak and above the minimum length do some kind of api call to check if its in a list of passwords
+    if (strength >= 3 && check == 'no') {
+        hibpCheck(password, input);
+        input.addEventListener('hibpCheck', function (event) {
+            checkhibpCheck(event, input);
+        });
+        function checkhibpCheck(event, input) {
+            if (event.detail) { // found
+                checkPWDStrength(input, 'danger');
+            }
+            else { // not found
+                checkPWDStrength(input, 'success');
+            }
+            input.removeEventListener("hibpCheck", checkhibpCheck); // Succeeds   
+        }
+    }
+    else if (strength >= 3 && check == 'danger') {
+        strength = 3;
+        extraMsg = `(this password is very common)`;
+    }
+    if (pwdChecker) {
+        if (strength <= 3)
+            pwdChecker.classList.add('invalid-feedback');
+        else
+            pwdChecker.classList.remove('invalid-feedback');
+        pwdChecker.setAttribute('data-strength', strength);
+        pwdChecker.innerHTML = `Password strength: ${strengthName[strength - 1]} ${extraMsg}`;
+    }
+};
 export default extendInputs;

package/assets/js/modules/table.js

@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 // @ts-nocheck
-import { zeroPad, isNumeric, ucfirst } from "./helpers.js";
+import { zeroPad, isNumeric, ucfirst, resolvePath } from "./helpers.js";
 // Basic functionality needed
 export const addDataAttributes = (table) => {
     const colHeadings = Array.from(table.querySelectorAll('thead th'));
@@ -51,12 +51,15 @@ export const getLargestLastColWidth = (table) => {
     return largestWidth;
 };
 export const createMobileButton = (table, wrapper) => {
-    if (wrapper.classList.contains('.table--fullwidth') && !wrapper.hasAttribute('data-expandable'))
+    if (wrapper.classList.contains('table--fullwidth') && !wrapper.hasAttribute('data-expandable'))
         return false;
     if (table.querySelectorAll('thead tr th').length < 4 && !wrapper.hasAttribute('data-expandable'))
         return false;
+    //If the expand column already exists we don't need to add a new one.
     Array.from(table.querySelectorAll('thead tr')).forEach((row, index) => {
-        row.insertAdjacentHTML('afterbegin', `<th class="th--fixed expand-button-heading"></th>`);
+        if (!table.querySelectorAll('thead tr th.expand-button-heading').length) {
+            row.insertAdjacentHTML('afterbegin', `<th class="th--fixed expand-button-heading"></th>`);
+        }
     });
     Array.from(table.querySelectorAll('tbody tr')).forEach((row, index) => {
         const preExpanded = row.getAttribute('data-view') === 'full' ? 'aria-expanded' : '';
@@ -493,7 +496,7 @@ export const populateDataQueries = (table, form, wrapper) => {
     const dataQueries = Array.from(form.querySelectorAll('[data-query]'));
     dataQueries.forEach((queryElement, index) => {
         let query = queryElement.getAttribute('data-query');
-        let numberOfMatchedRows;
+        let numberOfMatchedRows = 0;
         if (query == 'total') {
             if (wrapper.hasAttribute('data-total'))
                 numberOfMatchedRows = wrapper.getAttribute('data-total');
@@ -648,10 +651,9 @@ const filterFilters = function (form) {
 };
 export const loadAjaxTable = function (table, form, pagination, wrapper) {
     return __awaiter(this, void 0, void 0, function* () {
-        const resolvePath = (object, path, defaultValue) => path.split(/[\.\[\]\'\"]/).filter(p => p).reduce((o, p) => o ? o[p] : defaultValue, object);
         let formData = new FormData(form);
         let queryString = new URLSearchParams(formData).toString();
-        let columns = table.querySelectorAll('thead tr th');
+        let columns = table.querySelectorAll('thead tr th:not(.expand-button-heading)');
         let tbody = table.querySelector('tbody');
         let ajaxURL = form.getAttribute('data-ajax');
         wrapper.classList.add('table--loading');