@superdispatch/ui-lab 0.49.4 → 0.50.0

package/dist-node/index.js

@@ -1873,6 +1873,175 @@ function NavbarMenu(_ref2) {
   });
 }
 
+function getPasswordStrength(value) {
+  var count = [hasEnoughCharacters, hasNumber, hasLowerCaseAndUpperCase, hasSpecialCharacter, hasSeveralSpecialCharacters].reduce((acc, check) => check(value) ? acc += 1 : acc, 0);
+  if (count === 1 || count === 2) return 'weak';
+  if (count === 3) return 'average';
+  if (count >= 4) {
+    return value.length > 11 ? 'strong' : 'good';
+  }
+  return undefined;
+}
+function hasEnoughCharacters(text) {
+  return text.trim().length > 7;
+}
+function hasNumber(text) {
+  return /(?=.*[0-9])/.test(text);
+}
+function hasLowerCaseAndUpperCase(text) {
+  return /^(?=.*[a-z])(?=.*[A-Z]).+$/.test(text);
+}
+function hasSpecialCharacter(text) {
+  return /[!@#$%^&*()_+\-={[}\]|\\;:'"<>?,.]/.test(text);
+}
+function hasSeveralSpecialCharacters(text) {
+  var regex = /[!@#$%^&*()_+\-={[}\]|\\;:'"<>?,.]/g;
+  var charactersList = text.match(regex);
+  return !!charactersList && charactersList.length > 1;
+}
+
+var ListItem = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "PasswordValidationComponents__ListItem",
+  componentId: "SD__sc-ikou1j-0"
+})(["display:flex;align-items:center;"]);
+var Dot = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "PasswordValidationComponents__Dot",
+  componentId: "SD__sc-ikou1j-1"
+})(["height:4px;width:4px;background-color:", ";border-radius:100px;"], ui.Color.Blue300);
+var TickBox = /*#__PURE__*/styled__default(Box).withConfig({
+  displayName: "PasswordValidationComponents__TickBox",
+  componentId: "SD__sc-ikou1j-2"
+})(["width:13.33px;height:13.33px;border-radius:15px;background-color:", ";display:flex;align-items:center;justify-content:center;"], ui.ColorDynamic.Blue50);
+function CheckPasswordItem(_ref) {
+  var {
+    isDone,
+    text
+  } = _ref;
+  return /*#__PURE__*/jsxRuntime.jsxs(ListItem, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(Box, {
+      minWidth: "16px",
+      children: /*#__PURE__*/jsxRuntime.jsx(ui.Inline, {
+        verticalAlign: "center",
+        horizontalAlign: "center",
+        children: isDone ? /*#__PURE__*/jsxRuntime.jsx(TickBox, {
+          children: /*#__PURE__*/jsxRuntime.jsx(icons.Check, {
+            style: {
+              fontSize: '10px',
+              color: ui.Color.Green500
+            }
+          })
+        }) : /*#__PURE__*/jsxRuntime.jsx(Dot, {})
+      })
+    }), text]
+  });
+}
+var Stepper = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "PasswordValidationComponents__Stepper",
+  componentId: "SD__sc-ikou1j-3"
+})(["height:5px;display:flex;width:100%;margin-bottom:8px;margin-top:4px;"]);
+var StepperItem = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "PasswordValidationComponents__StepperItem",
+  componentId: "SD__sc-ikou1j-4"
+})(["height:2px;background-color:", ";flex:1;border-radius:100px;&:not(:last-child){margin-right:10px;flex:1;}"], _ref2 => {
+  var {
+    isActive,
+    passwordStrength
+  } = _ref2;
+  return getStepperItemColor(isActive, passwordStrength);
+});
+function getStepperItemColor(isActive, passwordStrength) {
+  if (!isActive || !passwordStrength) return ui.ColorDynamic.Silver400;
+  switch (isActive) {
+    case passwordStrength === 'strong':
+      return ui.ColorDynamic.Green500;
+    case passwordStrength === 'weak':
+      return ui.ColorDynamic.Red500;
+    case passwordStrength === 'average':
+      return ui.ColorDynamic.Yellow500;
+    case passwordStrength === 'good':
+      return ui.ColorDynamic.Green500;
+    default:
+      return ui.ColorDynamic.Silver400;
+  }
+}
+
+var passwordStepperTitle = {
+  weak: {
+    textColor: ui.ColorDynamic.Red500,
+    text: 'Weak Password'
+  },
+  average: {
+    textColor: ui.ColorDynamic.Yellow500,
+    text: 'Average Password'
+  },
+  good: {
+    textColor: ui.ColorDynamic.Green500,
+    text: 'Good Password'
+  },
+  strong: {
+    textColor: ui.ColorDynamic.Green500,
+    text: 'Strong Password'
+  }
+};
+var passwordStrengthToActiveStepsCount = {
+  weak: 1,
+  average: 2,
+  good: 3,
+  strong: 4
+};
+function steps(passwordStrength) {
+  return [passwordStrengthToActiveStepsCount[passwordStrength] >= 1, passwordStrengthToActiveStepsCount[passwordStrength] >= 2, passwordStrengthToActiveStepsCount[passwordStrength] >= 3, passwordStrengthToActiveStepsCount[passwordStrength] >= 4];
+}
+var PasswordText = /*#__PURE__*/styled__default(core.Typography).withConfig({
+  displayName: "PasswordStrength__PasswordText",
+  componentId: "SD__sc-1ddnv91-0"
+})(["color:", ";"], _ref => {
+  var {
+    colorProp
+  } = _ref;
+  return colorProp !== null && colorProp !== void 0 ? colorProp : ui.Color.Dark100;
+});
+function PasswordStrength(_ref2) {
+  var {
+    value
+  } = _ref2;
+  var passwordStrength = react.useMemo(() => getPasswordStrength(value), [value]);
+  return /*#__PURE__*/jsxRuntime.jsxs(Box, {
+    children: [/*#__PURE__*/jsxRuntime.jsxs(Box, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(PasswordText, {
+        variant: "body2",
+        colorProp: passwordStrength && passwordStepperTitle[passwordStrength].textColor,
+        children: passwordStrength ? passwordStepperTitle[passwordStrength].text : 'Password Strength'
+      }), /*#__PURE__*/jsxRuntime.jsx(Stepper, {
+        children: steps(passwordStrength !== null && passwordStrength !== void 0 ? passwordStrength : '').map((isStepActive, index) => /*#__PURE__*/jsxRuntime.jsx(StepperItem, {
+          isActive: isStepActive,
+          passwordStrength: passwordStrength
+        }, index))
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsxs(Box, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(core.Typography, {
+        variant: "body2",
+        children: "It must have:"
+      }), /*#__PURE__*/jsxRuntime.jsxs(ui.Stack, {
+        space: "xxsmall",
+        children: [/*#__PURE__*/jsxRuntime.jsx(CheckPasswordItem, {
+          isDone: hasEnoughCharacters(value),
+          text: "At least 8 characters"
+        }), /*#__PURE__*/jsxRuntime.jsx(CheckPasswordItem, {
+          isDone: hasLowerCaseAndUpperCase(value),
+          text: "Upper & lowercase letters"
+        }), /*#__PURE__*/jsxRuntime.jsx(CheckPasswordItem, {
+          isDone: hasNumber(value),
+          text: "A number"
+        }), /*#__PURE__*/jsxRuntime.jsx(CheckPasswordItem, {
+          isDone: hasSpecialCharacter(value),
+          text: "A special character (%, $, #, etc.)"
+        })]
+      })]
+    })]
+  });
+}
+
 var SidebarRoot = /*#__PURE__*/styled__default.aside.withConfig({
   displayName: "Sidebar__SidebarRoot",
   componentId: "SD__sc-b77o22-0"
@@ -2383,6 +2552,7 @@ exports.NavbarLabel = NavbarLabel;
 exports.NavbarList = NavbarList;
 exports.NavbarMenu = NavbarMenu;
 exports.NavbarMenuItem = NavbarMenuItem;
+exports.PasswordStrength = PasswordStrength;
 exports.Sidebar = Sidebar;
 exports.SidebarBackButton = SidebarBackButton;
 exports.SidebarContainer = SidebarContainer;