classic-rocket compatible with PS 8.x

_dev/css/bootstrap.scss

@@ -50,7 +50,7 @@ $theme-colors: (
 @import "node_modules/bootstrap/scss/alert";
 $theme-colors: map-remove($theme-colors,"primary","secondary","success","info","warning","danger","light","dark");
 
-//@import "node_modules/bootstrap/scss/progress";
+@import "node_modules/bootstrap/scss/progress";
 @import "node_modules/bootstrap/scss/media";
 @import "node_modules/bootstrap/scss/list-group";
 @import "node_modules/bootstrap/scss/close";

_dev/css/components/password-policy.scss

@@ -0,0 +1,13 @@
+.password-requirements {
+  .material-icons.check-icon {
+    display: none;
+  }
+  .is-valid {
+    .material-icons.check-icon {
+      display: inline-block;
+    }
+    .material-icons.close-icon {
+      display: none;
+    }
+  }
+}

_dev/css/theme.scss

@@ -35,6 +35,7 @@
 @import "components/search-widget";
 @import "components/slick";
 @import "components/slick-theme";
+@import "components/password-policy";
 @import "components/productcomments";
 @import "components/utilities";
 @import "partials/bs_alpha";

_dev/js/components/usePasswordPolicy.js

@@ -0,0 +1,195 @@
+/**
+ * Copyright since 2007 PrestaShop SA and Contributors
+ * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Academic Free License 3.0 (AFL-3.0)
+ * that is bundled with this package in the file LICENSE.md.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/AFL-3.0
+ * If you did not receive a copy of the license and are unable to
+ * obtain it through the world-wide-web, please send an email
+ * to [email protected] so we can send you a copy immediately.
+ *
+ * DISCLAIMER
+ *
+ * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
+ * versions in the future. If you wish to customize PrestaShop for your
+ * needs please refer to https://devdocs.prestashop.com/ for more information.
+ *
+ * @author    PrestaShop SA and Contributors <[email protected]>
+ * @copyright Since 2007 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
+ */
+
+import {sprintf} from 'sprintf-js';
+
+const {passwordPolicy: PasswordPolicyMap} = prestashop.themeSelectors;
+
+const PASSWORD_POLICY_ERROR = 'The password policy elements are undefined.';
+
+const getPasswordStrengthFeedback = (
+  strength,
+) => {
+  switch (strength) {
+    case 0:
+      return {
+        color: 'bg-danger',
+      };
+
+    case 1:
+      return {
+        color: 'bg-danger',
+      };
+
+    case 2:
+      return {
+        color: 'bg-warning',
+      };
+
+    case 3:
+      return {
+        color: 'bg-success',
+      };
+
+    case 4:
+      return {
+        color: 'bg-success',
+      };
+
+    default:
+      throw new Error('Invalid password strength indicator.');
+  }
+};
+
+const watchPassword = async (
+  elementInput,
+  feedbackContainer,
+  hints,
+) => {
+  const {prestashop} = window;
+  const passwordValue = elementInput.value;
+  const result = await prestashop.checkPasswordScore(passwordValue);
+  const feedback = getPasswordStrengthFeedback(result.score);
+  const passwordLength = passwordValue.length;
+  const popoverContent = [];
+
+  $(elementInput).popover('dispose');
+
+  feedbackContainer.style.display = passwordValue === '' ? 'none' : 'block';
+
+  if (result.feedback.warning !== '') {
+    if (result.feedback.warning in hints) {
+      popoverContent.push(hints[result.feedback.warning]);
+    }
+  }
+
+  result.feedback.suggestions.forEach((suggestion) => {
+    if (suggestion in hints) {
+      popoverContent.push(hints[suggestion]);
+    }
+  });
+
+  $(elementInput).popover({
+    html: true,
+    placement: 'top',
+    content: popoverContent.join('<br/>'),
+  }).popover('show');
+
+  const passwordLengthValid = passwordLength >= parseInt(elementInput.dataset.minlength, 10)
+    && passwordLength <= parseInt(elementInput.dataset.maxlength, 10);
+  const passwordScoreValid = parseInt(elementInput.dataset.minscore, 10) <= result.score;
+
+  feedbackContainer.querySelector(PasswordPolicyMap.requirementLength).classList.toggle(
+    'is-valid',
+    passwordLengthValid,
+  );
+
+  feedbackContainer.querySelector(PasswordPolicyMap.requirementScore).classList.toggle(
+    'is-valid',
+    passwordScoreValid,
+  );
+
+  // Change input border color depending on the validity
+  elementInput
+    .classList.remove('border-success', 'border-danger');
+  elementInput
+    .classList.add(passwordScoreValid && passwordLengthValid ? 'border-success' : 'border-danger');
+  elementInput
+    .classList.add('form-control', 'border');
+
+  const percentage = (result.score * 20) + 20;
+  const progressBar = feedbackContainer.querySelector(PasswordPolicyMap.progressBar);
+
+  // increase and decrease progress bar
+  if (progressBar) {
+    progressBar.style.width = `${percentage}%`;
+    progressBar.classList.remove('bg-success', 'bg-danger', 'bg-warning');
+    progressBar.classList.add(feedback.color);
+  }
+};
+
+// Not testable because it manipulates SVG elements, unsupported by JSDom
+const usePasswordPolicy = (selector) => {
+  const element = document.querySelector(selector);
+  const inputColumn = element?.querySelector(PasswordPolicyMap.inputColumn);
+  const elementInput = element?.querySelector('input');
+  const templateElement = document.createElement('div');
+  const feedbackTemplate = document.querySelector(PasswordPolicyMap.template);
+  let feedbackContainer;
+
+  if (feedbackTemplate && element && inputColumn && elementInput) {
+    templateElement.innerHTML = feedbackTemplate.innerHTML;
+    inputColumn.append(templateElement);
+    feedbackContainer = element.querySelector(PasswordPolicyMap.container);
+
+    if (feedbackContainer) {
+      const hintElement = document.querySelector(PasswordPolicyMap.hint);
+
+      if (hintElement) {
+        const hints = JSON.parse(hintElement.innerHTML);
+
+        // eslint-disable-next-line max-len
+        const passwordRequirementsLength = feedbackContainer.querySelector(PasswordPolicyMap.requirementLength);
+        // eslint-disable-next-line max-len
+        const passwordRequirementsScore = feedbackContainer.querySelector(PasswordPolicyMap.requirementScore);
+        const passwordLengthText = passwordRequirementsLength?.querySelector('span');
+        const passwordRequirementsText = passwordRequirementsScore?.querySelector('span');
+
+        if (passwordLengthText && passwordRequirementsLength && passwordRequirementsLength.dataset.translation) {
+          passwordLengthText.innerText = sprintf(
+            passwordRequirementsLength.dataset.translation,
+            elementInput.dataset.minlength,
+            elementInput.dataset.maxlength,
+          );
+        }
+
+        if (passwordRequirementsText && passwordRequirementsScore && passwordRequirementsScore.dataset.translation) {
+          passwordRequirementsText.innerText = sprintf(
+            passwordRequirementsScore.dataset.translation,
+            hints[elementInput.dataset.minscore],
+          );
+        }
+
+        // eslint-disable-next-line max-len
+        elementInput.addEventListener('keyup', () => watchPassword(elementInput, feedbackContainer, hints));
+        elementInput.addEventListener('blur', () => {
+          $(elementInput).popover('dispose');
+        });
+      }
+    }
+  }
+
+  if (element) {
+    return {
+      element,
+    };
+  }
+
+  return {
+    error: new Error(PASSWORD_POLICY_ERROR),
+  };
+};
+
+export default usePasswordPolicy;

_dev/js/product.js

@@ -32,10 +32,10 @@ $(document).ready(function () {
   let slickSlider = new SlickSlider();
 
   prestashop.on('updatedProduct', function (event) {
-      createInputFile();
+    createInputFile();
 
 
-      if (event && event.product_minimal_quantity) {
+    if (event && event.product_minimal_quantity) {
       const minimalProductQuantity = parseInt(event.product_minimal_quantity, 10);
       const quantityInputSelector = '#quantity_wanted';
       let quantityInput = $(quantityInputSelector);
@@ -63,47 +63,46 @@ $(document).ready(function () {
     });
   }
 
-    function createProductSpin()
-    {
-        const $quantityInput = $('#quantity_wanted');
-
-        $quantityInput.TouchSpin({
-            buttondown_class: 'btn js-touchspin',
-            buttonup_class: 'btn js-touchspin',
-            min: parseInt($quantityInput.attr('min'), 10),
-            max: 1000000
-        });
-
-        $('body').on('change keyup', '#quantity_wanted', (e) => {
-            $(e.currentTarget).trigger('touchspin.stopspin');
-            prestashop.emit('updateProduct', {
-                eventType: 'updatedProductQuantity',
-                event: e
-            });
-        });
+  function createProductSpin()
+  {
+      const $quantityInput = $('#quantity_wanted');
+
+      $quantityInput.TouchSpin({
+          buttondown_class: 'btn js-touchspin',
+          buttonup_class: 'btn js-touchspin',
+          min: parseInt($quantityInput.attr('min'), 10),
+          max: 1000000
+      });
+
+      $('body').on('change keyup', '#quantity_wanted', (e) => {
+          $(e.currentTarget).trigger('touchspin.stopspin');
+          prestashop.emit('updateProduct', {
+              eventType: 'updatedProductQuantity',
+              event: e
+          });
+      });
 
-    }
+  }
 
-});
+  $(document).on('shown.bs.modal','#product-modal', function (e) {
+      $('#js-slick-product').resize();
+  });
 
-$(document).on('shown.bs.modal','#product-modal', function (e) {
-    $('#js-slick-product').resize();
-});
+  //add to cart loader
+  $(document).on('click','.js-add-to-cart:enabled:not(.is--loading)',function(){
+      $(this).addClass('is--loading').attr("disabled", true);
+  });
+  prestashop.on('updateCart', function (event) {
+      removeAddToCartLoader();
 
-//add to cart loader
-$(document).on('click','.js-add-to-cart:enabled:not(.is--loading)',function(){
-    $(this).addClass('is--loading').attr("disabled", true);
-});
-prestashop.on('updateCart', function (event) {
-    removeAddToCartLoader();
+  });
+  prestashop.on('handleError', function (event) {
+      removeAddToCartLoader();
+      $('.js-add-to-cart').attr("disabled", false);
 
-});
-prestashop.on('handleError', function (event) {
-    removeAddToCartLoader();
-    $('.js-add-to-cart').attr("disabled", false);
+  });
+  function removeAddToCartLoader(){
+      $('.js-add-to-cart.is--loading').removeClass('is--loading');
 
+  }
 });
-function removeAddToCartLoader(){
-    $('.js-add-to-cart.is--loading').removeClass('is--loading');
-
-}