ref(elements): make passwordLevel more readable (#37)

* ref(elements): make passwordLevel more readable * build(deps): fix vulnerability * patch: audit-ci levels
ogticrd · Jun 22, 2023 · 25e6a34 · 25e6a34
1 parent 51e258b
commit 25e6a34
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 118 deletions.
diff --git a/audit-ci.jsonc b/audit-ci.jsonc
@@ -3,7 +3,8 @@
   // Add a $schema property to enable JSON schema validation.
   "$schema": "https://github.com/IBM/audit-ci/raw/main/docs/schema.json",
   // You only need one of ["low", "moderate", "high", "critical"].
-  "moderate": true,
+  // TODO: lower this to "moderate" once the issue is resolved.
+  "high": true,
   "allowlist": [
     {
       "GHSA-9c47-m6qq-7p4h|eslint-plugin-import>tsconfig-paths>json5": {

diff --git a/package.json b/package.json
@@ -25,7 +25,7 @@
     "cookie": "^0.5.0",
     "cryptr": "^6.2.0",
     "eslint": "^8.40.0",
-    "eslint-config-next": "13.2.3",
+    "eslint-config-next": "13.4.7",
     "hibp": "^13.0.0",
     "next": "13.2.3",
     "next-recaptcha-v3": "^1.1.5",
@@ -46,7 +46,7 @@
     "@typescript-eslint/parser": "^5.59.5",
     "eslint-config-prettier": "^8.8.0",
     "eslint-import-resolver-typescript": "^3.5.5",
-    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-prettier": "^4.2.1",
     "install-peers": "^1.0.4",
     "prettier": ">=2.0.0"

diff --git a/src/components/elements/passwordLevel/index.tsx b/src/components/elements/passwordLevel/index.tsx
@@ -1,69 +1,72 @@
 import * as React from 'react';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
-
 import { Typography } from '@mui/material';
 
-// TODO: Refactor this with a simpler approach
-export default function PasswordLevel({ passwordLevel }: any) {
-  return passwordLevel.length > 0 ? (
+interface PasswordRequirementProps {
+  met: boolean;
+  text: string;
+}
+
+const PasswordRequirement: React.FC<PasswordRequirementProps> = ({ met, text }) => (
+  <div>
+    <CheckCircleIcon
+      color={met ? 'success' : 'disabled'}
+      style={{ fontSize: '20px', marginBottom: '-4px', marginRight: '3px' }}
+    />
+    <Typography variant="caption" color="gray">
+      {text}
+    </Typography>
+  </div>
+);
+
+interface ProgressBarProps {
+  filled: boolean;
+  color: string;
+}
+
+const ProgressBar: React.FC<ProgressBarProps> = ({ filled, color }) => (
+  <div
+    style={{
+      height: '8px',
+      width: '20%',
+      background: filled ? color : '#f1f1f1',
+      borderRadius: '10px',
+    }}
+  />
+);
+
+const PASSWORD_LEVELS = ['Muy Bajo', ' Bajo', ' Medio', ' Fuerte'];
+const ProgressBarColors = ['#E05D56', '#E0D256', '#B4E056', '#A3E056'];
+
+interface PasswordLevelProps {
+  passwordLevel: {
+    contains: string[];
+    id: number;
+    length: number;
+  };
+}
+
+const PasswordLevel: React.FC<PasswordLevelProps> = ({ passwordLevel }) => {
+  const requirements = [
+    ['lowercase', 'Una letra minúscula'],
+    ['uppercase', 'Una letra mayúscula'],
+    ['number', 'Un número'],
+    ['symbol', 'Un caracter especial'],
+  ];
+
+  return passwordLevel?.length > 0 ? (
     <div style={{ marginTop: '10px' }}>
-      <div>
-        <CheckCircleIcon
-          color={
-            passwordLevel.contains?.includes('lowercase')
-              ? 'success'
-              : 'disabled'
-          }
-          style={{ fontSize: '20px', marginBottom: '-4px', marginRight: '3px' }}
-        />
-        <Typography variant="caption" color="gray">
-          Una letra minúscula
-        </Typography>
-      </div>
-      <div>
-        <CheckCircleIcon
-          color={
-            passwordLevel.contains?.includes('uppercase')
-              ? 'success'
-              : 'disabled'
-          }
-          style={{ fontSize: '20px', marginBottom: '-4px', marginRight: '3px' }}
+      {requirements.map(([key, text], index) => (
+        <PasswordRequirement
+          key={index}
+          met={passwordLevel.contains?.includes(key)}
+          text={text}
         />
-        <Typography variant="caption" color="gray">
-          Una letra mayúscula
-        </Typography>
-      </div>
-      <div>
-        <CheckCircleIcon
-          color={
-            passwordLevel.contains?.includes('number') ? 'success' : 'disabled'
-          }
-          style={{ fontSize: '20px', marginBottom: '-4px', marginRight: '3px' }}
-        />
-        <Typography variant="caption" color="gray">
-          Un número
-        </Typography>
-      </div>
-      <div>
-        <CheckCircleIcon
-          color={
-            passwordLevel.contains?.includes('symbol') ? 'success' : 'disabled'
-          }
-          style={{ fontSize: '20px', marginBottom: '-4px', marginRight: '3px' }}
-        />
-        <Typography variant="caption" color="gray">
-          Un carácter especial
-        </Typography>
-      </div>
-      <div>
-        <CheckCircleIcon
-          color={passwordLevel.length >= 10 ? 'success' : 'disabled'}
-          style={{ fontSize: '20px', marginBottom: '-4px', marginRight: '3px' }}
-        />
-        <Typography variant="caption" color="gray">
-          10 caracteres como mínimo
-        </Typography>
-      </div>
+      ))}
+      <PasswordRequirement
+        met={passwordLevel.length >= 8}
+        text="8 caracteres como mínimo"
+      />
 
       <div
         style={{
@@ -74,50 +77,22 @@ export default function PasswordLevel({ passwordLevel }: any) {
           marginTop: '10px',
         }}
       >
-        {passwordLevel.id >= 0 && (
-          <div
-            style={{
-              height: '8px',
-              width: '20%',
-              background: '#E05D56',
-              borderRadius: '10px',
-            }}
+        {ProgressBarColors.map((color, index) => (
+          <ProgressBar
+            key={index}
+            filled={passwordLevel.id >= index}
+            color={color}
           />
-        )}
-        <div
-          style={{
-            height: '8px',
-            width: '20%',
-            background: `${passwordLevel.id >= 1 ? '#E0D256' : '#f1f1f1'}`,
-            borderRadius: '10px',
-          }}
-        />
-        <div
-          style={{
-            height: '8px',
-            width: '20%',
-            background: `${passwordLevel.id >= 2 ? '#B4E056' : '#f1f1f1'}`,
-            borderRadius: '10px',
-          }}
-        />
-        <div
-          style={{
-            height: '8px',
-            width: '20%',
-            background: `${passwordLevel.id >= 3 ? '#A3E056' : '#f1f1f1'}`,
-            borderRadius: '10px',
-          }}
-        />
+        ))}
       </div>
       <Typography
         sx={{ fontWeight: '400', fontSize: '14px', color: '#707070' }}
       >
         Nivel de contraseña
-        {passwordLevel.id === 0 && ' Muy Bajo'}
-        {passwordLevel.id === 1 && ' Bajo'}
-        {passwordLevel.id === 2 && ' Medio'}
-        {passwordLevel.id === 3 && ' Fuerte'}
+        {PASSWORD_LEVELS[passwordLevel.id]}
       </Typography>
     </div>
   ) : null;
-}
+};
+
+export default PasswordLevel;
diff --git a/src/pages/register/stepper/step3.tsx b/src/pages/register/stepper/step3.tsx
@@ -205,21 +205,6 @@ export default function Step3({ handleNext, infoCedula }: any) {
           </GridItem>
 
           <GridItem lg={12} md={12}>
-            <Tooltip
-              title={
-                <>
-                  <b>
-                    Al menos 8 caracteres de largo
-                    <br />
-                    Al menos 3 de los siguientes:
-                  </b>
-                  <li>Letras minúsculas (a-z)</li>
-                  <li>Letras mayúsculas (A-Z)</li>
-                  <li>Números (0-9)</li>
-                  <li>Caracteres especiales (por ejemplo, !@#$%^&*)</li>
-                </>
-              }
-            >
               <TextField
                 required
                 type={showPassword ? 'text' : 'password'}
@@ -244,7 +229,6 @@ export default function Step3({ handleNext, infoCedula }: any) {
                   ),
                 }}
               />
-            </Tooltip>
             <PasswordLevel passwordLevel={passwordLevel} />
           </GridItem>
 

diff --git a/yarn.lock.REMOVED.git-id b/yarn.lock.REMOVED.git-id
@@ -1 +1 @@
-99747535bfec6a708b4cecbb901acfd9f553dc0a
+3c1aa227213b9396520f471eca673caa01bd0993
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		99747535bfec6a708b4cecbb901acfd9f553dc0a
		3c1aa227213b9396520f471eca673caa01bd0993