@iamproperty/components 5.1.0-beta10 → 5.1.0-beta11

package/assets/js/vendor/hibp.js

@@ -0,0 +1,78 @@
+// @ts-nocheck
+/**
+ * hibp.js
+ * @version v1
+ * @author Mehdi Bounya
+ *
+ * Report any bugs here: https://github.com/mehdibo/hibp-js
+ *
+ * The MIT License (http://www.opensource.org/licenses/mit-license.php)
+ *
+ * Permission is hereby granted, free of charge, to any person
+ * obtaining a copy of this software and associated documentation
+ * files (the "Software"), to deal in the Software without
+ * restriction, including without limitation the rights to use,
+ * copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the
+ * Software is furnished to do so, subject to the following
+ * conditions:
+ *
+ * The above copyright notice and this permission notice shall be
+ * included in all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+ * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+ * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+ * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+ * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+ * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+ * OTHER DEALINGS IN THE SOFTWARE.
+ */
+function sha1(string) {
+    var buffer = new TextEncoder("utf-8").encode(string);
+    return crypto.subtle.digest("SHA-1", buffer).then(function (buffer) {
+        // Get the hex code
+        var hexCodes = [];
+        var view = new DataView(buffer);
+        for (var i = 0; i < view.byteLength; i += 4) {
+            // Using getUint32 reduces the number of iterations needed (we process 4 bytes each time)
+            var value = view.getUint32(i);
+            // toString(16) will give the hex representation of the number without padding
+            var stringValue = value.toString(16);
+            // We use concatenation and slice for padding
+            var padding = '00000000';
+            var paddedValue = (padding + stringValue).slice(-padding.length);
+            hexCodes.push(paddedValue);
+        }
+        // Join all the hex strings into one
+        return hexCodes.join("");
+    });
+}
+const hibpCheck = (pwd, input) => {
+    // We hash the pwd first
+    sha1(pwd).then(function (hash) {
+        // We send the first 5 chars of the hash to hibp's API
+        const req = new XMLHttpRequest();
+        req.addEventListener("load", function () {
+            // When we get back a response from the server
+            // We create an array of lines and loop through them
+            const resp = this.responseText.split('\n');
+            const hashSub = hash.slice(5).toUpperCase();
+            var result = false;
+            for (let index in resp) {
+                // Check if the line matches the rest of the hash
+                if (resp[index].substring(0, 35) == hashSub) {
+                    result = true;
+                    break; // If found no need to continue the loop
+                }
+            }
+            // Trigger an event with the result
+            const event = new CustomEvent('hibpCheck', { detail: result });
+            input.dispatchEvent(event);
+        });
+        req.open('GET', 'https://api.pwnedpasswords.com/range/' + hash.substr(0, 5));
+        req.send();
+    });
+};
+export default hibpCheck;

package/assets/sass/elements/forms.scss

@@ -410,6 +410,25 @@ iam-address-lookup:has([required]){
   --error-display: block;
 }
 
+// Password checker
+.pwd-checker {
+  
+  display: block;
+  background-repeat: no-repeat!important;
+  background-position: left center;
+  background-size: 1em 1em;
+  padding-left: 1.5rem!important;
+}
+.pwd-checker.invalid-feedback {
+  background-image: escape-svg($icon-error);
+}
+
+.pwd-checker:not(.invalid-feedback) {
+  background-image: escape-svg($icon-tick)!important;
+}
+label:has(.pwd-checker.invalid-feedback):after {
+  display: none!important;
+}
 // #endregion
 
 // #region radio/checkbox field 

package/assets/ts/modules/helpers.ts

@@ -66,7 +66,12 @@ export const addGlobalEvents = (body) => {
 
       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();

package/assets/ts/modules/inputs.ts

@@ -1,4 +1,6 @@
 // @ts-nocheck
+import hibpCheck from '../vendor/hibp'
+
 const extendInputs = (body) => {
 
   function loadInput(){
@@ -79,6 +81,10 @@ const extendInputs = (body) => {
 
       if(input.hasAttribute('maxlength') && input.nextElementSibling)
         input.nextElementSibling.setAttribute("data-count", input.value.length);
+
+
+      if(input.hasAttribute('data-strength-checker'))
+        checkPWDStrength(input);
     }
   });
 
@@ -151,7 +157,80 @@ export const setMaxlengthVars = (input) => {
 
 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/ts/vendor/hibp.ts

@@ -0,0 +1,81 @@
+// @ts-nocheck
+
+/**
+ * hibp.js
+ * @version v1
+ * @author Mehdi Bounya
+ *
+ * Report any bugs here: https://github.com/mehdibo/hibp-js
+ *
+ * The MIT License (http://www.opensource.org/licenses/mit-license.php)
+ *
+ * Permission is hereby granted, free of charge, to any person
+ * obtaining a copy of this software and associated documentation
+ * files (the "Software"), to deal in the Software without
+ * restriction, including without limitation the rights to use,
+ * copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the
+ * Software is furnished to do so, subject to the following
+ * conditions:
+ *
+ * The above copyright notice and this permission notice shall be
+ * included in all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+ * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+ * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+ * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+ * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+ * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+ * OTHER DEALINGS IN THE SOFTWARE.
+ */
+function sha1(string){
+  var buffer = new TextEncoder("utf-8").encode(string);
+  return crypto.subtle.digest("SHA-1", buffer).then(function (buffer) {
+      // Get the hex code
+      var hexCodes = [];
+      var view = new DataView(buffer);
+      for (var i = 0; i < view.byteLength; i += 4) {
+          // Using getUint32 reduces the number of iterations needed (we process 4 bytes each time)
+          var value = view.getUint32(i)
+          // toString(16) will give the hex representation of the number without padding
+          var stringValue = value.toString(16)
+          // We use concatenation and slice for padding
+          var padding = '00000000'
+          var paddedValue = (padding + stringValue).slice(-padding.length)
+          hexCodes.push(paddedValue);
+      }
+      // Join all the hex strings into one
+      return hexCodes.join("");
+  });
+}
+
+const hibpCheck = (pwd,input) => {
+  // We hash the pwd first
+  sha1(pwd).then(function(hash){
+      // We send the first 5 chars of the hash to hibp's API
+      const req = new XMLHttpRequest();
+      req.addEventListener("load", function(){
+          // When we get back a response from the server
+          // We create an array of lines and loop through them
+          const resp = this.responseText.split('\n');
+          const hashSub = hash.slice(5).toUpperCase();
+          var result = false;
+          for(let index in resp){
+              // Check if the line matches the rest of the hash
+              if(resp[index].substring(0, 35) == hashSub){
+                  result = true;
+                  break; // If found no need to continue the loop
+              }
+          }
+          // Trigger an event with the result
+          const event = new CustomEvent('hibpCheck', {detail: result});
+          input.dispatchEvent(event);
+      });
+      req.open('GET', 'https://api.pwnedpasswords.com/range/'+hash.substr(0, 5));
+      req.send();
+  });
+}
+
+export default hibpCheck;

package/dist/components.es.js

@@ -48,7 +48,7 @@ function vt(e, a, t, i, s, o) {
 }
 const Li = /* @__PURE__ */ y(gt, [["render", vt]]);
 /*!
-  * iamKey v5.1.0-beta10
+  * iamKey v5.1.0-beta11
   * Copyright 2022-2023 iamproperty
   */
 const _t = function(e) {
@@ -557,7 +557,7 @@ class Mt extends HTMLElement {
   }
 }
 /*!
-  * iamKey v5.1.0-beta10
+  * iamKey v5.1.0-beta11
   * Copyright 2022-2023 iamproperty
   */
 class ot extends HTMLElement {
@@ -1152,7 +1152,7 @@ const be = {
   props: {},
   mounted() {
     this.$nextTick(function() {
-      N(/* @__PURE__ */ Object.assign({ "../../../assets/js/components/accordion/accordion.component.js": () => import("./accordion.component-bd9af0d7.mjs"), "../../../assets/js/components/accordion/accordion.component.min.js": () => import("./accordion.component.min-7e34686c.mjs") }), "../../../assets/js/components/accordion/accordion.component.js").then((e) => {
+      N(/* @__PURE__ */ Object.assign({ "../../../assets/js/components/accordion/accordion.component.js": () => import("./accordion.component-bd9af0d7.mjs"), "../../../assets/js/components/accordion/accordion.component.min.js": () => import("./accordion.component.min-915d29dd.mjs") }), "../../../assets/js/components/accordion/accordion.component.js").then((e) => {
         window.customElements.get("iam-accordion") || window.customElements.define("iam-accordion", e.default);
       }).catch((e) => {
         console.log(e.message);
@@ -1263,7 +1263,7 @@ const Ei = /* @__PURE__ */ y(xe, [["render", Ee]]), Te = {
   name: "Card",
   mounted() {
     this.$nextTick(function() {
-      N(/* @__PURE__ */ Object.assign({ "../../../assets/js/components/card/card.component.js": () => import("./card.component-3bb86b22.mjs"), "../../../assets/js/components/card/card.component.min.js": () => import("./card.component.min-9db932b7.mjs") }), "../../../assets/js/components/card/card.component.js").then((e) => {
+      N(/* @__PURE__ */ Object.assign({ "../../../assets/js/components/card/card.component.js": () => import("./card.component-3bb86b22.mjs"), "../../../assets/js/components/card/card.component.min.js": () => import("./card.component.min-fd3b7162.mjs") }), "../../../assets/js/components/card/card.component.js").then((e) => {
         window.customElements.get("iam-card") || window.customElements.define("iam-card", e.default);
       }).catch((e) => {
         console.log(e.message);
@@ -1317,7 +1317,7 @@ const Hi = /* @__PURE__ */ y(Me, [["render", je]]), Ce = {
   },
   mounted() {
     this.$nextTick(function() {
-      N(/* @__PURE__ */ Object.assign({ "../../../assets/js/components/header/header.component.js": () => import("./header.component-cc8263fb.mjs"), "../../../assets/js/components/header/header.component.min.js": () => import("./header.component.min-71c8b950.mjs") }), "../../../assets/js/components/header/header.component.js").then((e) => {
+      N(/* @__PURE__ */ Object.assign({ "../../../assets/js/components/header/header.component.js": () => import("./header.component-cc8263fb.mjs"), "../../../assets/js/components/header/header.component.min.js": () => import("./header.component.min-e7e9db8c.mjs") }), "../../../assets/js/components/header/header.component.js").then((e) => {
         window.customElements.get("iam-header") || window.customElements.define("iam-header", e.default);
       }).catch((e) => {
         console.log(e.message);
@@ -1713,7 +1713,7 @@ const Di = /* @__PURE__ */ y(oa, [["render", ya]]), wa = {
   name: "Nav",
   mounted() {
     this.$nextTick(function() {
-      N(/* @__PURE__ */ Object.assign({ "../../../assets/js/components/nav/nav.component.js": () => import("./nav.component-ff8d1484.mjs"), "../../../assets/js/components/nav/nav.component.min.js": () => import("./nav.component.min-1df4a8b8.mjs") }), "../../../assets/js/components/nav/nav.component.js").then((e) => {
+      N(/* @__PURE__ */ Object.assign({ "../../../assets/js/components/nav/nav.component.js": () => import("./nav.component-ff8d1484.mjs"), "../../../assets/js/components/nav/nav.component.min.js": () => import("./nav.component.min-b6b9ead5.mjs") }), "../../../assets/js/components/nav/nav.component.js").then((e) => {
         window.customElements.get("iam-nav") || window.customElements.define("iam-nav", e.default);
       }).catch((e) => {
         console.log(e.message);
@@ -1833,7 +1833,7 @@ const Pa = {
   name: "Tabs",
   mounted() {
     this.$nextTick(function() {
-      N(/* @__PURE__ */ Object.assign({ "../../../assets/js/components/tabs/tabs.component.js": () => import("./tabs.component-1dfbdb3b.mjs"), "../../../assets/js/components/tabs/tabs.component.min.js": () => import("./tabs.component.min-8dcdde59.mjs") }), "../../../assets/js/components/tabs/tabs.component.js").then((e) => {
+      N(/* @__PURE__ */ Object.assign({ "../../../assets/js/components/tabs/tabs.component.js": () => import("./tabs.component-1dfbdb3b.mjs"), "../../../assets/js/components/tabs/tabs.component.min.js": () => import("./tabs.component.min-d390ff06.mjs") }), "../../../assets/js/components/tabs/tabs.component.js").then((e) => {
         window.customElements.get("iam-tabs") || window.customElements.define("iam-tabs", e.default);
       }).catch((e) => {
         console.log(e.message);
@@ -1963,7 +1963,7 @@ function Za(e, a, t, i, s, o) {
 }
 const Oi = /* @__PURE__ */ y(Ka, [["render", Za]]);
 /*!
-  * iamKey v5.1.0-beta10
+  * iamKey v5.1.0-beta11
   * Copyright 2022-2023 iamproperty
   */
 function ti(e, a) {
@@ -2059,7 +2059,7 @@ function ii(e, a, t, i, s, o) {
 }
 const Bi = /* @__PURE__ */ y(ai, [["render", ii]]);
 /*!
-  * iamKey v5.1.0-beta10
+  * iamKey v5.1.0-beta11
   * Copyright 2022-2023 iamproperty
   */
 function ni(e, a) {
@@ -2229,7 +2229,7 @@ const Vi = /* @__PURE__ */ y(mi, [["render", hi]]), pi = {
   props: {},
   mounted() {
     this.$nextTick(function() {
-      N(/* @__PURE__ */ Object.assign({ "../../../assets/js/components/actionbar/actionbar.component.js": () => import("./actionbar.component-3f2c98c0.mjs"), "../../../assets/js/components/actionbar/actionbar.component.min.js": () => import("./actionbar.component.min-e086512b.mjs") }), "../../../assets/js/components/actionbar/actionbar.component.js").then((e) => {
+      N(/* @__PURE__ */ Object.assign({ "../../../assets/js/components/actionbar/actionbar.component.js": () => import("./actionbar.component-3f2c98c0.mjs"), "../../../assets/js/components/actionbar/actionbar.component.min.js": () => import("./actionbar.component.min-9c9e2e41.mjs") }), "../../../assets/js/components/actionbar/actionbar.component.js").then((e) => {
         window.customElements.get("iam-actionbar") || window.customElements.define("iam-actionbar", e.default);
       }).catch((e) => {
         console.log(e.message);
@@ -2276,7 +2276,7 @@ function wi(e, a, t, i, s, o) {
 }
 const Gi = /* @__PURE__ */ y(yi, [["render", wi]]);
 /*!
-  * iamKey v5.1.0-beta10
+  * iamKey v5.1.0-beta11
   * Copyright 2022-2023 iamproperty
   */
 window.dataLayer = window.dataLayer || [], window.dataLayer.push({ event: "customElementRegistered", element: "collapsible side menu" });