@stokr/components-library 3.0.54 → 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

@@ -132,6 +132,7 @@ import { cooldownHOC, useComponentVisible, useContainerSize, useCooldown, useMob
 import { fixDecimals } from "./utils/fix-decimals.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";
@@ -331,6 +332,8 @@ export {
   default14 as DocumentSmallSvg,
   default15 as DocumentSvg,
   DoubleButtons,
+  ENTROPY_MEDIUM,
+  ENTROPY_WEAK,
   default16 as Enable2FAFlow,
   default17 as EnterCode,
   ErrorMessage,
@@ -448,6 +451,8 @@ export {
   OptionLabel,
   OtpInput,
   Outer,
+  PASSWORD_MIN_LENGTH,
+  PASSWORD_REQUIREMENTS_MESSAGE,
   PHONE_MEDIA,
   PageTransition,
   PageWrapper,
@@ -620,6 +625,8 @@ export {
   getFooterGroups,
   getLiquidAssetIcon,
   getMedia,
+  getPasswordCriteria,
+  getPasswordEntropy,
   getProjectCurrencySign,
   getTokenBucket,
   getVerifyIdentityChecklist,
@@ -631,6 +638,7 @@ export {
   isAccountLockedError,
   isAlreadyOnOnboardingFlow,
   isExternalUrl,
+  isPasswordValid,
   isUSInvestor,
   km_ify,
   learnMoreCategoryPropTypes,

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.54",
+  "version": "3.0.55",
   "description": "STOKR - Components Library",
   "author": "Bilal Hodzic <bilal@stokr.io>",
   "license": "MIT",