feat:[PAYM-3141] added passwordstrength stepper

packages/lab/src/index.spec.ts

@@ -31,6 +31,7 @@ test('api', () => {
       "NavbarList": [Function],
       "NavbarMenu": [Function],
       "NavbarMenuItem": [Function],
+      "PasswordStrength": [Function],
       "Sidebar": React.forwardRef(Sidebar),
       "SidebarBackButton": [Function],
       "SidebarContainer": React.forwardRef(SidebarContainer),

packages/lab/src/index.ts

@@ -22,6 +22,7 @@ export { useNavbarContext } from './navbar/NavbarContext';
 export * from './navbar/NavbarItem';
 export * from './navbar/NavbarList';
 export * from './navbar/NavbarMenu';
+export * from './passwordStepper/PasswordStrength';
 export * from './sidebar/Sidebar';
 export * from './sidebar/SidebarBackButton';
 export * from './sidebar/SidebarContainer';

packages/lab/src/passwordStepper/PasswordStrength.stories.tsx

@@ -0,0 +1,95 @@
+import { TextField } from '@material-ui/core';
+import { Meta } from '@storybook/react';
+import { Stack } from '@superdispatch/ui';
+import { UseState } from '@superdispatch/ui-docs';
+import { Box } from '../box/Box';
+import { PasswordStrength } from './PasswordStrength';
+
+export default {
+  title: 'Lab/PasswordStrength',
+  component: PasswordStrength,
+  decorators: [
+    (Story) => (
+      <Box maxWidth="400px">
+        <Story />
+      </Box>
+    ),
+  ],
+} as Meta;
+
+export const basic = () => (
+  <Box>
+    <PasswordStrength value="" />
+  </Box>
+);
+
+export const weakPassword = () => (
+  <Box>
+    <PasswordStrength value="abc" />
+  </Box>
+);
+
+export const averagePassword = () => (
+  <Box>
+    <PasswordStrength value="password123" />
+  </Box>
+);
+
+export const goodPassword = () => (
+  <Box>
+    <PasswordStrength value="Password123" />
+  </Box>
+);
+
+export const strongPassword = () => (
+  <Box>
+    <PasswordStrength value="Password123!!" />
+  </Box>
+);
+
+export const Interactive = () => (
+  <UseState initialState="">
+    {(password, setPassword) => (
+      <Box>
+        <Stack space="medium">
+          <TextField
+            label="Password"
+            type="password"
+            value={password}
+            onChange={(e) => {
+              setPassword(e.target.value);
+            }}
+            placeholder="Type a password to see strength validation"
+            fullWidth={true}
+          />
+          <PasswordStrength value={password} />
+        </Stack>
+      </Box>
+    )}
+  </UseState>
+);
+
+export const ProgressiveExample = () => {
+  const examples = [
+    { label: 'Empty', value: '' },
+    { label: 'Too short', value: 'abc' },
+    { label: 'Weak (only lowercase)', value: 'password' },
+    { label: 'Average (lowercase + number)', value: 'password123' },
+    { label: 'Strong (all requirements)', value: 'Password123!!' },
+  ];
+
+  return (
+    <Box>
+      <Stack space="large">
+        {examples.map((example) => (
+          <div key={example.label}>
+            <h4>
+              {example.label}: &quot;{example.value}&quot;
+            </h4>
+            <PasswordStrength value={example.value} />
+          </div>
+        ))}
+      </Stack>
+    </Box>
+  );
+};

packages/lab/src/passwordStepper/PasswordStrength.tsx

@@ -0,0 +1,107 @@
+import { Typography } from '@material-ui/core';
+import { Color, ColorDynamic, Stack } from '@superdispatch/ui';
+import { useMemo } from 'react';
+import styled from 'styled-components';
+import { Box } from '../box/Box';
+import {
+  getPasswordStrength,
+  hasEnoughCharacters,
+  hasLowerCaseAndUpperCase,
+  hasNumber,
+  hasSpecialCharacter,
+  PasswordStrength as PasswordStrengthType,
+} from './PasswordUtils';
+import {
+  CheckPasswordItem,
+  Stepper,
+  StepperItem,
+} from './PasswordValidationComponents';
+
+const passwordStepperTitle = {
+  weak: { textColor: ColorDynamic.Red500, text: 'Weak Password' },
+  average: { textColor: ColorDynamic.Yellow500, text: 'Average Password' },
+  good: { textColor: ColorDynamic.Green500, text: 'Good Password' },
+  strong: { textColor: ColorDynamic.Green500, text: 'Strong Password' },
+};
+
+const passwordStrengthToActiveStepsCount = {
+  weak: 1,
+  average: 2,
+  good: 3,
+  strong: 4,
+};
+
+function steps(passwordStrength: string): boolean[] {
+  return [
+    passwordStrengthToActiveStepsCount[
+      passwordStrength as PasswordStrengthType
+    ] >= 1,
+    passwordStrengthToActiveStepsCount[
+      passwordStrength as PasswordStrengthType
+    ] >= 2,
+    passwordStrengthToActiveStepsCount[
+      passwordStrength as PasswordStrengthType
+    ] >= 3,
+    passwordStrengthToActiveStepsCount[
+      passwordStrength as PasswordStrengthType
+    ] >= 4,
+  ];
+}
+
+const PasswordText = styled(Typography)<{ colorProp?: string }>`
+  color: ${({ colorProp }) => colorProp ?? Color.Dark100};
+`;
+
+interface PasswordStrengthProps {
+  value: string;
+}
+
+export function PasswordStrength({
+  value,
+}: PasswordStrengthProps): JSX.Element {
+  const passwordStrength = useMemo(() => getPasswordStrength(value), [value]);
+
+  return (
+    <Box>
+      <Box>
+        <PasswordText
+          variant="body2"
+          colorProp={
+            passwordStrength && passwordStepperTitle[passwordStrength].textColor
+          }
+        >
+          {passwordStrength
+            ? passwordStepperTitle[passwordStrength].text
+            : 'Password Strength'}
+        </PasswordText>
+        <Stepper>
+          {steps(passwordStrength ?? '').map((isStepActive, index) => (
+            <StepperItem
+              key={index}
+              isActive={isStepActive}
+              passwordStrength={passwordStrength}
+            />
+          ))}
+        </Stepper>
+      </Box>
+      <Box>
+        <Typography variant="body2">It must have:</Typography>
+        <Stack space="xxsmall">
+          <CheckPasswordItem
+            isDone={hasEnoughCharacters(value)}
+            text="At least 8 characters"
+          />
+          <CheckPasswordItem
+            isDone={hasLowerCaseAndUpperCase(value)}
+            text="Upper & lowercase letters"
+          />
+          <CheckPasswordItem isDone={hasNumber(value)} text="A number" />
+          <CheckPasswordItem
+            isDone={hasSpecialCharacter(value)}
+            text="A special character (%, $, #, etc.)"
+          />
+        </Stack>
+      </Box>
+    </Box>
+  );
+}

packages/lab/src/passwordStepper/PasswordUtils.tsx

@@ -0,0 +1,42 @@
+export function getPasswordStrength(
+  value: string,
+): PasswordStrength | undefined {
+  const count = [
+    hasEnoughCharacters,
+    hasNumber,
+    hasLowerCaseAndUpperCase,
+    hasSpecialCharacter,
+    hasSeveralSpecialCharacters,
+  ].reduce<number>((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;
+}
+
+export function hasEnoughCharacters(text: string): boolean {
+  return text.trim().length > 7;
+}
+
+export function hasNumber(text: string): boolean {
+  return /(?=.*[0-9])/.test(text);
+}
+
+export function hasLowerCaseAndUpperCase(text: string): boolean {
+  return /^(?=.*[a-z])(?=.*[A-Z]).+$/.test(text);
+}
+
+export function hasSpecialCharacter(text: string): boolean {
+  return /[!@#$%^&*()_+\-={[}\]|\\;:'"<>?,.]/.test(text);
+}
+
+export function hasSeveralSpecialCharacters(text: string): boolean {
+  const regex = /[!@#$%^&*()_+\-={[}\]|\\;:'"<>?,.]/g;
+  const charactersList = text.match(regex);
+  return !!charactersList && charactersList.length > 1;
+}
+
+export type PasswordStrength = 'weak' | 'average' | 'good' | 'strong';

packages/lab/src/passwordStepper/PasswordValidationComponents.tsx

@@ -0,0 +1,95 @@
+import { Check } from '@material-ui/icons';
+import { Color, ColorDynamic, Inline } from '@superdispatch/ui';
+import styled from 'styled-components';
+import { Box } from '../box/Box';
+import { PasswordStrength } from './PasswordUtils';
+
+const ListItem = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const Dot = styled.div`
+  height: 4px;
+  width: 4px;
+  background-color: ${Color.Blue300};
+  border-radius: 100px;
+`;
+
+const TickBox = styled(Box)`
+  width: 13.33px;
+  height: 13.33px;
+  border-radius: 15px;
+  background-color: ${ColorDynamic.Blue50};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export function CheckPasswordItem({
+  isDone,
+  text,
+}: {
+  isDone: boolean;
+  text: string;
+}): JSX.Element {
+  return (
+    <ListItem>
+      <Box minWidth="16px">
+        <Inline verticalAlign="center" horizontalAlign="center">
+          {isDone ? (
+            <TickBox>
+              <Check style={{ fontSize: '10px', color: Color.Green500 }} />
+            </TickBox>
+          ) : (
+            <Dot />
+          )}
+        </Inline>
+      </Box>
+      {text}
+    </ListItem>
+  );
+}
+
+export const Stepper = styled.div`
+  height: 5px;
+  display: flex;
+  width: 100%;
+  margin-bottom: 8px;
+  margin-top: 4px;
+`;
+
+export const StepperItem = styled.div<{
+  isActive: boolean;
+  passwordStrength?: PasswordStrength;
+}>`
+  height: 2px;
+  background-color: ${({ isActive, passwordStrength }) =>
+    getStepperItemColor(isActive, passwordStrength)};
+  flex: 1;
+  border-radius: 100px;
+  &:not(:last-child) {
+    margin-right: 10px;
+    flex: 1;
+  }
+`;
+
+function getStepperItemColor(
+  isActive: boolean,
+  passwordStrength?: PasswordStrength,
+): string {
+  if (!isActive || !passwordStrength) return ColorDynamic.Silver400;
+
+  switch (isActive) {
+    case passwordStrength === 'strong':
+      return ColorDynamic.Green500;
+    case passwordStrength === 'weak':
+      return ColorDynamic.Red500;
+    case passwordStrength === 'average':
+      return ColorDynamic.Yellow500;
+    case passwordStrength === 'good':
+      return ColorDynamic.Green500;
+    default:
+      return ColorDynamic.Silver400;
+  }
+}