@stokr/components-library 3.0.53 → 3.0.55

package/dist/components/Input/InputPassword.js

@@ -4,12 +4,13 @@ import PropTypes from "prop-types";
 import stdin_default$1 from "../SvgIcons/CapsLockSvg.js";
 import { InfoIcon } from "../InfoIcon/InfoIcon.js";
 import { Wrapper, Label, InputWrap } from "./Input.styles.js";
+import { getPasswordEntropy, ENTROPY_WEAK, ENTROPY_MEDIUM } from "../../utils/password-validation.js";
 import { InfoIconWrapper, ShowPassword, BottomWrap, PasswordStrengthWrap, PasswordStrengthIndicators, PasswordStrengthIndicator, PasswordStrengthText, CapslockIndicator } from "./InputPassword.styles.js";
 const PasswordStrength = {
   NONE: "none",
   WEAK: "Weak",
-  MEDIUM: "Average",
-  STRONG: "Excellent"
+  MEDIUM: "Good",
+  STRONG: "Strong"
 };
 const InputPassword = (props) => {
   const {
@@ -53,15 +54,10 @@ const InputPassword = (props) => {
     onChange?.(e, field);
   };
   const passwordStrengthFunction = () => {
-    if (value.length === 0) {
-      return PasswordStrength.NONE;
-    }
-    if (value.length < 6) {
-      return PasswordStrength.WEAK;
-    }
-    if (value.length < 11) {
-      return PasswordStrength.MEDIUM;
-    }
+    if (!value) return PasswordStrength.NONE;
+    const entropy = getPasswordEntropy(value);
+    if (entropy < ENTROPY_WEAK) return PasswordStrength.WEAK;
+    if (entropy < ENTROPY_MEDIUM) return PasswordStrength.MEDIUM;
     return PasswordStrength.STRONG;
   };
   const passwordStrength = passwordStrengthFunction();

package/dist/components/RegisterModal/RegisterModal.js

@@ -16,6 +16,7 @@ import { Row, Column } from "../Grid/Grid.styles.js";
 import { ComponentWrapper } from "../ComponentWrapper/ComponentWrapper.styles.js";
 import fetchDataPublic from "../../api/fetchDataPublic.js";
 import { emailRegex } from "../../constants/globalVariables.js";
+import { isPasswordValid, PASSWORD_REQUIREMENTS_MESSAGE } from "../../utils/password-validation.js";
 import { ModalInner, ModalLinkWrap, ModalLink } from "../Modal/Modal.styles.js";
 import { FormField, FormError } from "../Form/Form.styles.js";
 const TermsStyled = styled.span`
@@ -78,7 +79,11 @@ const RegisterModal = (props) => {
   }, [props.popupError]);
   const validationSchema = Yup.object().shape({
     email: Yup.string().matches(emailRegex, "Oops, that's not a valid address").required("Oops, this can‘t be blank"),
-    password: Yup.string().required("Oops, this can‘t be blank"),
+    password: Yup.string().test("password-full", function(val) {
+      if (!val) return this.createError({ message: "Oops, this can’t be blank" });
+      if (!isPasswordValid(val)) return this.createError({ message: PASSWORD_REQUIREMENTS_MESSAGE });
+      return true;
+    }),
     terms: Yup.bool().oneOf([true], "Please agree to continue"),
     newsletter: Yup.bool()
     // .oneOf([true], 'Newsletter accept is required'),
@@ -136,13 +141,13 @@ const RegisterModal = (props) => {
               clearPopupError();
             }
             if (withTouch) {
-              setFieldValue(field.name, field.value, false);
-              setFieldTouched(field.name);
+              setFieldValue(field.name, field.value, true);
+              setFieldTouched(field.name, true, false);
             } else {
               handleChange(e);
             }
           };
-          const submitDisabled = !values.email || !!errors.email || !!errors.terms || values.password.length <= 5 || isActionLoading === "signUp" || popupError.popup === "register";
+          const submitDisabled = !values.email || !!errors.email || !!errors.terms || !isPasswordValid(values.password) || isActionLoading === "signUp" || popupError.popup === "register";
           return /* @__PURE__ */ jsxs(stdin_default$1, { children: [
             /* @__PURE__ */ jsx(ComponentWrapper, { noPadding: true, children: /* @__PURE__ */ jsxs(FormField, { children: [
               /* @__PURE__ */ jsx(
@@ -179,11 +184,11 @@ const RegisterModal = (props) => {
                   touched: !!touched.password,
                   info: "For a stronger password, try a mix of lowercase, capitals, numbers and special characters.",
                   autoComplete: "new-password",
-                  "data-cy": "register-modal-password-input"
+                  "data-cy": "register-modal-password-input",
+                  showStrength: true
                 }
               ),
-              /* @__PURE__ */ jsx(FormError, { show: errors.password && touched.password, children: errors.password }),
-              /* @__PURE__ */ jsx(FormError, { show: !errors.password && touched.password && values.password.length <= 5, children: "The password must be at least 6 characters long" })
+              /* @__PURE__ */ jsx(FormError, { show: errors.password && touched.password, children: errors.password })
             ] }) }),
             /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingBottom: true, noPaddingHorizontal: true }),
             /* @__PURE__ */ jsxs(ComponentWrapper, { noPaddingBottom: true, noPaddingHorizontal: true, children: [

package/dist/components/ResetPasswordModal/ResetPasswordModal.js

@@ -10,6 +10,7 @@ import stdin_default$2 from "../Input/InputPassword.js";
 import { Button } from "../Button/Button.styles.js";
 import { Row, Column } from "../Grid/Grid.styles.js";
 import { ComponentWrapper } from "../ComponentWrapper/ComponentWrapper.styles.js";
+import { isPasswordValid, PASSWORD_REQUIREMENTS_MESSAGE } from "../../utils/password-validation.js";
 import { ModalInner, ModalLinkWrap, ModalLink } from "../Modal/Modal.styles.js";
 import { FormField, FormError } from "../Form/Form.styles.js";
 const ResetPasswordModal = ({
@@ -26,7 +27,11 @@ const ResetPasswordModal = ({
     confirmPassword: ""
   };
   const validationSchema = Yup.object().shape({
-    password: Yup.string().required("Oops, this can‘t be blank"),
+    password: Yup.string().test("password-full", function(val) {
+      if (!val) return this.createError({ message: "Oops, this can’t be blank" });
+      if (!isPasswordValid(val)) return this.createError({ message: PASSWORD_REQUIREMENTS_MESSAGE });
+      return true;
+    }),
     confirmPassword: Yup.string().required("Oops, this can‘t be blank")
   });
   useEffect(() => {
@@ -54,10 +59,10 @@ const ResetPasswordModal = ({
         children: ({ values, errors, touched, handleBlur, setFieldValue, setFieldTouched }) => {
           const onChangeWithTouch = (e) => {
             const field = e.target;
-            setFieldValue(field.name, field.value, false);
-            setFieldTouched(field.name);
+            setFieldValue(field.name, field.value, true);
+            setFieldTouched(field.name, true, false);
           };
-          const submitDisabled = values.password.length <= 5 || values.password !== values.confirmPassword || isActionLoading === "resetPassword";
+          const submitDisabled = !isPasswordValid(values.password) || values.password !== values.confirmPassword || isActionLoading === "resetPassword";
           return /* @__PURE__ */ jsxs(stdin_default$1, { children: [
             /* @__PURE__ */ jsx("br", {}),
             /* @__PURE__ */ jsx("br", {}),
@@ -76,17 +81,11 @@ const ResetPasswordModal = ({
                   touched: !!touched.password,
                   info: "For a stronger password, try a mix of lowercase, capitals, numbers and special characters.",
                   autoComplete: "new-password",
-                  "data-cy": "reset-password-modal-password-input"
+                  "data-cy": "reset-password-modal-password-input",
+                  showStrength: true
                 }
               ),
-              /* @__PURE__ */ jsx(FormError, { show: errors.password && touched.password, children: errors.password }),
-              /* @__PURE__ */ jsx(
-                FormError,
-                {
-                  show: !errors.password && touched.password && values.password.length <= 5,
-                  children: "The password must be at least 6 characters long"
-                }
-              )
+              /* @__PURE__ */ jsx(FormError, { show: errors.password && touched.password, children: errors.password })
             ] }) }),
             /* @__PURE__ */ jsx("br", {}),
             /* @__PURE__ */ jsx(ComponentWrapper, { noPadding: true, children: /* @__PURE__ */ jsxs(FormField, { children: [

package/dist/index.js

@@ -130,8 +130,9 @@ import { generateCoreChecklistTasks, getVerifyIdentityChecklist } from "./utils/
 import { CopyToClipBoardTooltip, copyTextToClipboard, useCopyToClipboard, withCopyToClipboard } from "./utils/copyToClipboard.js";
 import { cooldownHOC, useComponentVisible, useContainerSize, useCooldown, useMobileView, usePrevious } from "./utils/customHooks.js";
 import { fixDecimals } from "./utils/fix-decimals.js";
-import { formatCurrencyValue, getCurrencyIcon, getCurrencySymbol, getLiquidAssetIcon, getProjectCurrencySign } from "./utils/formatCurrencyValue.js";
+import { CURRENCY_CONFIG, formatCurrencyValue, getCurrencyConfig, getCurrencyIcon, getCurrencySymbol, getLiquidAssetIcon, getProjectCurrencySign } from "./utils/formatCurrencyValue.js";
 import { isUSInvestor, usCountries } from "./utils/isUSInvestor.js";
+import { ENTROPY_MEDIUM, ENTROPY_WEAK, PASSWORD_MIN_LENGTH, PASSWORD_REQUIREMENTS_MESSAGE, getPasswordCriteria, getPasswordEntropy, isPasswordValid } from "./utils/password-validation.js";
 import { km_ify } from "./utils/km_ify.js";
 import { momentUtils } from "./utils/moment.js";
 import { openFile, saveAs } from "./utils/saveAs.js";
@@ -276,6 +277,7 @@ export {
   ButtonGridContainer,
   CAPITAL_ANIMATION_LENGTH,
   COLUMN,
+  CURRENCY_CONFIG,
   default10 as CameraSvg,
   default11 as CapsLockSvg,
   CaptialRaisedSummary,
@@ -330,6 +332,8 @@ export {
   default14 as DocumentSmallSvg,
   default15 as DocumentSvg,
   DoubleButtons,
+  ENTROPY_MEDIUM,
+  ENTROPY_WEAK,
   default16 as Enable2FAFlow,
   default17 as EnterCode,
   ErrorMessage,
@@ -447,6 +451,8 @@ export {
   OptionLabel,
   OtpInput,
   Outer,
+  PASSWORD_MIN_LENGTH,
+  PASSWORD_REQUIREMENTS_MESSAGE,
   PHONE_MEDIA,
   PageTransition,
   PageWrapper,
@@ -613,11 +619,14 @@ export {
   getAnalyticsIngestUrl,
   getBackofficeAppUrl,
   getConfig,
+  getCurrencyConfig,
   getCurrencyIcon,
   getCurrencySymbol,
   getFooterGroups,
   getLiquidAssetIcon,
   getMedia,
+  getPasswordCriteria,
+  getPasswordEntropy,
   getProjectCurrencySign,
   getTokenBucket,
   getVerifyIdentityChecklist,
@@ -629,6 +638,7 @@ export {
   isAccountLockedError,
   isAlreadyOnOnboardingFlow,
   isExternalUrl,
+  isPasswordValid,
   isUSInvestor,
   km_ify,
   learnMoreCategoryPropTypes,

package/dist/utils/formatCurrencyValue.js

@@ -4,32 +4,40 @@ import BitcoinLogo from "../static/images/currency/bitcoin-logo.png.js";
 import BMN2Logo from "../static/images/currency/bmn2-logo.png.js";
 import ETHLogo from "../static/images/currency/eth_logo.svg.js";
 import USDTLogo from "../static/images/currency/usdt-logo.png.js";
+const CURRENCY_CONFIG = {
+  tether: ["USDT", 2],
+  gemini: ["GUSD", 2],
+  ether: ["ETH", 4],
+  artid: ["ARTID", 2],
+  bitcoin: ["BTC", 8],
+  lbtc: ["LBTC", 8],
+  "lusdt-bfx": ["USDT", 2],
+  "lbtc-bfx": ["LBTC", 8],
+  "btc-bfx": ["BTC", 8],
+  euro: ["EUR", 2],
+  usd: ["USD", 2],
+  chf: ["CHF", 2],
+  lusdt: ["USDT", 2],
+  "bitcoin-private": ["EUR", 2],
+  "lbtc-private": ["BTC", 8],
+  bmn1: ["BMN1", 2],
+  bmn2: ["BMN2", 4],
+  "btc-fb": ["BTC", 8],
+  "usdc-fb": ["USDC", 2],
+  "usdq-fb": ["USDQ", 2],
+  xaut: ["XAUt", 6],
+  "usd-in-kind": ["USD", 2]
+};
+const getCurrencyConfig = (currency, tokenDecimals = 2) => {
+  const [symbol, decimals] = CURRENCY_CONFIG[currency] || [currency, tokenDecimals];
+  return { symbol, decimals };
+};
 const formatCurrencyValue = (currency, value, tokenDecimals = 2, options = {}) => {
-  const { valueFirst = false } = options;
-  const [symbol, decimals] = {
-    tether: ["USDT", 2],
-    gemini: ["GUSD", 2],
-    ether: ["ETH", 4],
-    artid: ["ARTID", 2],
-    bitcoin: ["BTC", 8],
-    lbtc: ["LBTC", 8],
-    "lusdt-bfx": ["USDT", 2],
-    "lbtc-bfx": ["LBTC", 8],
-    "btc-bfx": ["BTC", 8],
-    euro: ["EUR", 2],
-    usd: ["USD", 2],
-    chf: ["CHF", 2],
-    lusdt: ["USDT", 2],
-    "bitcoin-private": ["EUR", 2],
-    "lbtc-private": ["BTC", 8],
-    bmn1: ["BMN1", 2],
-    bmn2: ["BMN2", 4],
-    "btc-fb": ["BTC", 8],
-    "usdc-fb": ["USDC", 2],
-    "usdq-fb": ["USDQ", 2],
-    xaut: ["XAUt", 6],
-    "usd-in-kind": ["USD", 2]
-  }[currency] || [currency, tokenDecimals];
+  const { valueFirst = false, formatter } = options;
+  const { symbol, decimals } = getCurrencyConfig(currency, tokenDecimals);
+  if (typeof formatter === "function") {
+    return formatter({ symbol, decimals, value, valueFirst, currency });
+  }
   const formattedValue = parseFloat(Math.abs(value)).toFixed(decimals);
   return valueFirst ? `${formattedValue} ${symbol}` : `${symbol} ${formattedValue}`;
 };
@@ -93,7 +101,9 @@ const getLiquidAssetIcon = async (assetId) => {
   });
 };
 export {
+  CURRENCY_CONFIG,
   formatCurrencyValue,
+  getCurrencyConfig,
   getCurrencyIcon,
   getCurrencySymbol,
   getLiquidAssetIcon,

package/dist/utils/password-validation.js

@@ -0,0 +1,49 @@
+const PASSWORD_MIN_LENGTH = 8;
+const PASSWORD_REQUIREMENTS_MESSAGE = "Use at least 8 characters with a mix of letters, numbers, and symbols.";
+const ENTROPY_WEAK = 50;
+const ENTROPY_MEDIUM = 80;
+const getCharsetSize = (password) => {
+  let size = 0;
+  if (/[a-z]/.test(password)) size += 26;
+  if (/[A-Z]/.test(password)) size += 26;
+  if (/[0-9]/.test(password)) size += 10;
+  if (/[^A-Za-z0-9]/.test(password)) size += 32;
+  return size;
+};
+const getPasswordEntropy = (value) => {
+  const password = value || "";
+  if (password.length === 0) return 0;
+  const charsetSize = getCharsetSize(password);
+  const uniqueChars = new Set(password).size;
+  const effectiveLength = (password.length + uniqueChars) / 2;
+  return effectiveLength * Math.log2(charsetSize);
+};
+const getPasswordCriteria = (value) => {
+  const password = value || "";
+  const hasLowercase = /[a-z]/.test(password);
+  const hasUppercase = /[A-Z]/.test(password);
+  const hasNumber = /[0-9]/.test(password);
+  const hasSpecial = /[^A-Za-z0-9]/.test(password);
+  return {
+    length: password.length,
+    hasLength: password.length >= PASSWORD_MIN_LENGTH,
+    hasLowercase,
+    hasUppercase,
+    hasNumber,
+    hasSpecial,
+    classesMet: [hasLowercase, hasUppercase, hasNumber, hasSpecial].filter(Boolean).length
+  };
+};
+const isPasswordValid = (value) => {
+  const password = value || "";
+  return password.length >= PASSWORD_MIN_LENGTH && getPasswordEntropy(password) >= ENTROPY_WEAK;
+};
+export {
+  ENTROPY_MEDIUM,
+  ENTROPY_WEAK,
+  PASSWORD_MIN_LENGTH,
+  PASSWORD_REQUIREMENTS_MESSAGE,
+  getPasswordCriteria,
+  getPasswordEntropy,
+  isPasswordValid
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stokr/components-library",
-  "version": "3.0.53",
+  "version": "3.0.55",
   "description": "STOKR - Components Library",
   "author": "Bilal Hodzic <bilal@stokr.io>",
   "license": "MIT",