@iamproperty/components 5.1.0-beta9 → 5.2.0

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/_func.scss

@@ -2,6 +2,7 @@ $compatible: 'false'!default;
 $mobileOnly: 'false'!default;
 $darkMode: 'true'!default;
 $layers: 'true'!default;
+$optionalText: 'true'!default;
 
 // Declare global vars variable
 $vars: ()!default;

package/assets/sass/components/component.native.scss

@@ -72,6 +72,10 @@ iam-carousel {
   }
 }
 
+// Search
+iam-search input:not(.is-invalid):not(:invalid) {
+  background: none!important;
+}
 
 
 

package/assets/sass/elements/admin-panel.scss

@@ -43,6 +43,7 @@
     
     font-size: rem(18);
     line-height: rem(24);
+    font-weight: bold;
     padding: rem(16) var(--padding-x);
     margin: calc(var(--padding-top) * -1) calc(var(--padding-x) * -1) var(--padding-top) calc(var(--padding-x) * -1);
     display: block;

package/assets/sass/elements/dialog.scss

@@ -178,7 +178,7 @@ dialog::backdrop {
 // #endregion
 
 // #region Transactional 
-*:not(.dialog__wrapper) > dialog[open]:not(.dialog--multi):is(:has(:is(button,a):last-child),:has(form:last-child > :is(button,a):last-child)) {
+*:not(.dialog__wrapper) > dialog[open]:not(.dialog--multi):is(:has(:is(button,a):last-child),:has(form:last-child > :is(button,a):last-child)):not(:has(.youtube-embed)) {
 
   text-align: center;
 
@@ -258,8 +258,8 @@ dialog::backdrop {
 
   @include media-breakpoint-up(sm) {
 
-    button:has( + button:last-child),
-    button:last-child {
+    :is(button, .btn):has(~ :is(button, .btn):last-child),
+    :is(button, .btn):last-child {
       min-width: calc(50% - 1rem);
       text-align: center;
     }

package/assets/sass/elements/forms.scss

@@ -12,11 +12,23 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
   font-weight: normal;
   color: var(--colour-heading);
   display: block;
+}
+// #endregion
+
+// #region Optional text
+:is(label,.label) {
 
-  &:has(+ input:not(:disabled):not([readonly]):not(:required):not([type='radio']):not([type='checkbox']):not([type='file'])):after {
+  @if $optionalText == "true" {
+    &:has(+ input:not(:disabled):not([readonly]):not(:required):not([type='radio']):not([type='checkbox']):not([type='file'])):after {
+      content: " (Optional)";
+    }
+  }
+
+  &:has(input:not(:disabled):not([readonly]):not(:required):not([type='radio']):not([type='checkbox']):not([type='file'])) .optional-text:before {
     content: " (Optional)";
   }
 }
+
 // #endregion
 
 // #region input field
@@ -375,7 +387,7 @@ input[maxlength] + span {
   border-color: var(--colour-complete);
 }
 
-.was-validated input:is(:valid, .is-valid) {
+.was-validated input:is(:valid, .is-valid):not(:is(:invalid, .is-invalid)) {
 
   background-image: escape-svg($icon-tick);
   background-repeat: no-repeat;
@@ -410,6 +422,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 
@@ -868,7 +899,7 @@ iam-fileupload {
   
   margin-bottom: 1.5rem;
 
-  &:has(:invalid):after {
+  &:has(:is(:invalid,.is-invalid)):after {
     content: "This field is required";
     color: var(--colour-danger);
     margin-top: rem(8);
@@ -883,7 +914,7 @@ iam-fileupload {
     line-height: 1.2;
   }
 
-  &[data-error]:has(:invalid):after {
+  &[data-error]:has(:is(:invalid,.is-invalid)):after {
     content: attr(data-error)!important;
   }
 

package/assets/sass/helpers/max-height.scss

@@ -1,8 +1,10 @@
 :is(.mh-sm,.mh-md,.mh-lg,.mh-sm-sm,.mh-sm-md,.mh-sm-lg,.mh-md-sm,.mh-md-md,.mh-md-lg){
   
+  &:not(iam-table):not(.table__wrapper){
 
-  padding-inline: var(--mh-padding-inline,0);
-  margin-inline: calc(var(--mh-padding-inline,0) * -1);
+    padding-inline: var(--mh-padding-inline,0);
+    margin-inline: calc(var(--mh-padding-inline,0) * -1);
+  }
 
   &::before {
     top: calc(100% - 1.5rem);

package/assets/ts/components/address-lookup/address-lookup.component.ts

@@ -84,15 +84,15 @@ class iamAddressLookup extends HTMLElement {
       preFilledAddress.innerHTML = "";
 
       Array.from(component.querySelectorAll('input[required],input[data-required],select[required],select[data-required]')).forEach((input, index) => {
+        const value = input.value;
 
-        if(!input.value)
+        if(!value)
           preFilled = false;
         else
-          preFilledAddress.innerHTML += ', '+input.value;
-        
+          preFilledAddress.innerHTML += value+(/^-?\d+$/.test(value) ? ' ' : ', ');
       });
 
-      preFilledAddress.innerHTML = preFilledAddress.innerHTML.slice(1);
+      preFilledAddress.innerHTML = preFilledAddress.innerHTML.slice(0, -2);
 
       if(preFilled){
         preFilledWrapper.classList.remove('js-hide');
@@ -266,9 +266,9 @@ class iamAddressLookup extends HTMLElement {
                 if(key == "address_number_name")
                   itemString += `${value} `;
                 else if(key != "postcode" && key != "address_title")
-                  itemString += `${value}, `;
+                  itemString += `${value}${(/^-?\d+$/.test(value)?'':',')} `;
               }
-
+              
               listString += `<option value="${itemString}${postcode}" data-values='${values}'></option>`;
             }
 

package/assets/ts/components/search/search.component.ts

@@ -22,7 +22,13 @@ class iamSearch extends HTMLElement {
     template.innerHTML = `
     <style>
     @import "${coreCSS}";
-    
+    input {
+      background: red;
+    }
+    input:not(.is-invalid):not(:invalid) {
+      background: none!important;
+    }
+
     </style>
     <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous" />
     <slot></slot>
@@ -62,36 +68,43 @@ class iamSearch extends HTMLElement {
       displayInputField.setAttribute('list',listID);
     }
 
-    // on change update oringinal field with the actual value and use displayed input for the nice display text
-    displayInputField.addEventListener('change', (event) => {
-
-      let match = datalist.querySelector(`option[value="${displayInputField.value}"]`);
-
-      if(match){
-        inputField.value = match.getAttribute('data-value');
-      }
-    });
-
     // Search the endpoint when 3 characters has been added
     if(searchWrapper.hasAttribute('data-url')){
         
-      displayInputField.addEventListener('keyup', (event) => {
+      displayInputField.addEventListener('input', (event) => {
 
         if(displayInputField.value.length == 3 && !searched.includes(displayInputField.value)){
           search(displayInputField.value);
           searched.push(displayInputField.value);
         }
       });
+    }
 
-      displayInputField.addEventListener('change', (event) => {
+    function checkMatch(){
+      
+      let match = datalist.querySelector(`option[value="${displayInputField.value}"]`);
+      let subMatch = datalist.querySelector(`option[value*='${displayInputField.value}' i]`);
 
-        if(displayInputField.value.length >= 3 && !searched.includes(displayInputField.value.substring(0,3))){
-          search(displayInputField.value.substring(0,3));
-          searched.push(displayInputField.value.substring(0,3));
-        }
-      });
+      if(match){
+        inputField.value = match.getAttribute('data-value');
+      }
+      else if (displayInputField.value.length > 0 && !subMatch){
+        displayInputField.classList.add('is-invalid');
+        displayInputField.closest('label').setAttribute('data-error','No results returned');
+      }
+      else {
+        displayInputField.classList.remove('is-invalid');
+        displayInputField.closest('label').removeAttribute('data-error');
+      }
     }
-    
+
+    // on change update oringinal field with the actual value and use displayed input for the nice display text
+    displayInputField.addEventListener('input', (event) => {
+
+      checkMatch();
+    });
+
+
     const search = async (searchterm) => {
       
       let ajaxURL = searchWrapper.getAttribute('data-url');
@@ -154,6 +167,9 @@ class iamSearch extends HTMLElement {
           
           datalist.innerHTML += listString;
   
+          displayInputField.closest('form').classList.add('was-validated');
+          checkMatch();
+
           return response;
         });
 

package/assets/ts/components/table/table.component.ts

@@ -65,6 +65,7 @@ class iamTable extends HTMLElement {
 
     classList = classList.replace('table--cta','');
     classList = classList.replace('table--loading','');
+    classList = classList.replace('mh-md','');
     this.shadowRoot.querySelector('.table__wrapper').className += ` ${classList}`;
 
     // set actionbar class if needed

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(){
@@ -8,6 +10,11 @@ const extendInputs = (body) => {
       setMaxlengthVars(input,wrapper);
     });
 
+    Array.from(document.querySelectorAll('label input')).forEach((input,index) => {
+      if(!input.closest('label').querySelector('.optional-text') && !input.hasAttribute('required'))
+        input.insertAdjacentHTML("beforebegin", `<span class="optional-text"></span>`);
+    });
+    
     // Date restrictions 
     if(document.querySelector('input[type="date"]')){
 
@@ -79,6 +86,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 +162,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;