feat(registry): show password strenght to user (#27)

This change was made by @JE1999, I just updated it with changes from `master`
ogticrd · May 16, 2023 · 7167a35 · 7167a35
1 parent 7408cfa
commit 7167a35
Show file tree

Hide file tree

Showing 10 changed files with 140 additions and 82 deletions.
diff --git a/.github/workflows/linter.yml b/.github/workflows/linter.yml
@@ -43,6 +43,7 @@ jobs:
           VALIDATE_ALL_CODEBASE: false
           VALIDATE_SHELL_SHFMT: false
           VALIDATE_JSCPD: false
+          VALIDATE_CSS: false
           VALIDATE_EDITORCONFIG: false
           VALIDATE_MARKDOWN: false
           # TODO: hadolint can be activated after this PR is accepted, merged and a new version is tagged https://github.com/github/super-linter/pull/3500

diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
     "@mui/material": "^5.11.12",
     "aws-amplify": "^5.1.4",
     "axios": "^1.4.0",
+    "check-password-strength": "^2.0.7",
     "cookie": "^0.5.0",
     "eslint": "^8.40.0",
     "eslint-config-next": "13.2.3",

diff --git a/src/components/elements/passwordLevel/index.tsx b/src/components/elements/passwordLevel/index.tsx
@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { Typography } from '@mui/material';
+
+export default function PasswordLevel({ passwordLevel }: any) {
+  return passwordLevel.length > 0 ? (
+    <>
+      <div
+        style={{
+          width: '100%',
+          display: 'flex',
+          gap: '6.66%',
+          marginBottom: '12px',
+        }}
+      >
+        {passwordLevel.id >= 0 && (
+          <div
+            style={{
+              height: '8px',
+              width: '20%',
+              background: '#E05D56',
+              borderRadius: '10px',
+            }}
+          />
+        )}
+        {passwordLevel.id >= 1 && (
+          <div
+            style={{
+              height: '8px',
+              width: '20%',
+              background: '#E0D256',
+              borderRadius: '10px',
+            }}
+          />
+        )}
+        {passwordLevel.id >= 2 && (
+          <div
+            style={{
+              height: '8px',
+              width: '20%',
+              background: '#B4E056',
+              borderRadius: '10px',
+            }}
+          />
+        )}
+        {passwordLevel.id >= 3 && (
+          <div
+            style={{
+              height: '8px',
+              width: '20%',
+              background: '#A3E056',
+              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'}
+      </Typography>
+    </>
+  ) : null;
+}
diff --git a/src/components/form/input/index.tsx b/src/components/form/input/index.tsx
@@ -1,8 +1,8 @@
-import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
-import Tooltip, { TooltipProps, tooltipClasses } from "@mui/material/Tooltip";
-import { FormControl, InputLabel, Typography } from "@mui/material";
-import { styled } from "@mui/material/styles";
-import { IconButton } from "@mui/material";
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import Tooltip, { TooltipProps, tooltipClasses } from '@mui/material/Tooltip';
+import { FormControl, InputLabel, Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { IconButton } from '@mui/material';
 
 interface IProps {
   label?: string;
@@ -20,13 +20,13 @@ export const FormControlApp = (props: IProps) => {
     <Tooltip {...props} classes={{ popper: className }} arrow />
   ))(({ theme }) => ({
     [`& .${tooltipClasses.tooltip}`]: {
-      backgroundColor: "#fff",
-      color: "#707070",
+      backgroundColor: '#fff',
+      color: '#707070',
       maxWidth: 317,
       fontSize: theme.typography.pxToRem(12),
-      borderRadius: "6px",
-      border: "1px solid #dadde9",
-      padding: "18px 20px",
+      borderRadius: '6px',
+      border: '1px solid #dadde9',
+      padding: '18px 20px',
     },
   }));
 
@@ -39,42 +39,42 @@ export const FormControlApp = (props: IProps) => {
             error={props.msg ? true : false}
             shrink={true}
           >
-            {props.label}{" "}
+            {props.label}{' '}
             <span
               style={{
-                fontWeight: "bold",
-                fontSize: "20px",
-                position: "relative",
-                top: "4px",
+                fontWeight: 'bold',
+                fontSize: '20px',
+                position: 'relative',
+                top: '4px',
               }}
             >
-              {props.required && "*"}
-            </span>{" "}
+              {props.required && '*'}
+            </span>{' '}
             {props.icon}
             {props.tooltip && (
               <HtmlTooltip
                 title={
                   <>
                     <Typography
                       color="primary"
-                      sx={{ fontWeight: "700", fontSize: "16px" }}
+                      sx={{ fontWeight: '700', fontSize: '16px' }}
                     >
                       {props.tooltip}
                     </Typography>
                     {props.tooltipText && (
                       <>
                         <div
                           style={{
-                            width: "100%",
-                            height: "1px",
-                            borderRadius: "10px",
-                            margin: "10px 0",
-                            background: "#E2E2E2",
+                            width: '100%',
+                            height: '1px',
+                            borderRadius: '10px',
+                            margin: '10px 0',
+                            background: '#E2E2E2',
                           }}
                         />
                         <Typography
                           color="#707070"
-                          sx={{ fontWeight: "400", fontSize: "14px" }}
+                          sx={{ fontWeight: '400', fontSize: '14px' }}
                         >
                           {props.tooltipText}
                         </Typography>
@@ -85,14 +85,14 @@ export const FormControlApp = (props: IProps) => {
               >
                 <IconButton
                   sx={{
-                    padding: "0 0 2px 0",
-                    marginLeft: "14px",
-                    position: "relative",
-                    top: "0px",
+                    padding: '0 0 2px 0',
+                    marginLeft: '14px',
+                    position: 'relative',
+                    top: '0px',
                   }}
                 >
                   <InfoOutlinedIcon
-                    sx={{ fontSize: "20px", color: "#FFBA00" }}
+                    sx={{ fontSize: '20px', color: '#FFBA00' }}
                   />
                 </IconButton>
               </HtmlTooltip>
@@ -102,9 +102,9 @@ export const FormControlApp = (props: IProps) => {
       )}
       {props.children}
       {!props.noGutter && (
-        <Typography variant="caption" color="error" sx={{ fontSize: "10px" }}>
+        <Typography variant="caption" color="error" sx={{ fontSize: '10px' }}>
           {props.msg}
-          {"\u00A0"}
+          {'\u00A0'}
         </Typography>
       )}
     </FormControl>

diff --git a/src/pages/register/stepper/index.tsx b/src/pages/register/stepper/index.tsx
@@ -75,17 +75,17 @@ export default function StepperRegister() {
           } = {};
           if (index === 0) {
             labelProps.optional = (
-              <Typography variant="caption">Identidad de usuario</Typography>
+              <Typography variant="caption">Identifícate</Typography>
             );
           }
           if (index === 1) {
             labelProps.optional = (
-              <Typography variant="caption">Verificación Identidad</Typography>
+              <Typography variant="caption">Verifícate</Typography>
             );
           }
           if (index === 2) {
             labelProps.optional = (
-              <Typography variant="caption">Completar Registro</Typography>
+              <Typography variant="caption">Regístrate</Typography>
             );
           }
 

diff --git a/src/pages/register/stepper/step1.tsx b/src/pages/register/stepper/step1.tsx
@@ -100,18 +100,18 @@ export default function Step1({ setInfoCedula, handleNext }: any) {
       {loading && <LoadingBackdrop />}
       <br />
       <TextBody textCenter>
-        Inicia colocando tu número de cédula para iniciar la verificación de tu
-        identidad.
+        Este es el primer paso para poder verificar tu identidad y crear tu
+        cuenta ciudadana.
       </TextBody>
 
       <form onSubmit={handleSubmit(onSubmit)}>
         <GridContainer marginY>
           <GridItem md={12} lg={12}>
             <FormControlApp
-              label="Coloca tu Cédula"
+              label="Número de Cédula"
               msg={errors.cedula?.message}
               tooltip="Identidad de Usuario"
-              tooltipText="Para iniciar el proceso de validar tu identidad, coloca el número de tu cédula."
+              tooltipText="Para iniciar el proceso de validar tu identidad es necesario tu número de cédula."
               required
             >
               <InputApp

diff --git a/src/pages/register/stepper/step2.tsx b/src/pages/register/stepper/step2.tsx
@@ -34,7 +34,7 @@ export default function Step2({ infoCedula, handleNext }: any) {
 
   const {
     handleSubmit,
-    formState: { },
+    formState: {},
     setValue,
   } = useForm<IFormInputs>({
     reValidateMode: 'onSubmit',
@@ -57,12 +57,10 @@ export default function Step2({ infoCedula, handleNext }: any) {
       <TextBody textCenter>
         ¡Hola {infoCedula?.name}!{' '}
         <span style={{ fontWeight: '400' }}>
-          Ahora vamos a verificar tu identidad mediante autenticación biométrica
-          y continuar con el proceso de tú registro, asegúrate de disponer de
-          los siguientes elementos:
+          Ahora vamos a validar tu identidad mediante una verificación facial
+          para continuar con tu registro. Asegúrate de cumplir con lo siguiente:
         </span>
       </TextBody>
-      <br />
 
       <form onSubmit={handleSubmit(onSubmit)}>
         <GridContainer marginY>
@@ -104,23 +102,21 @@ export default function Step2({ infoCedula, handleNext }: any) {
                 color="info"
               />
               <Typography variant="body2" color="primary">
-                Permitir capturas de{' '}
-                <span style={{ fontWeight: 'bold' }}>
-                  fotografías de tu rostro.
-                </span>
+                Estar de acuerdo en que hagamos capturas de{' '}
+                <span style={{ fontWeight: 'bold' }}>tu rostro.</span>
               </Typography>
             </div>
           </GridItem>
 
-          <GridItem md={12} lg={12}>
+          {/* <GridItem md={12} lg={12}>
             <Typography
               color="primary"
               sx={{ fontSize: '16px', fontWeight: '400', textAlign: 'center' }}
             >
               Verificación con pasaporte disponible próximamente
             </Typography>
-          </GridItem>
-          <br />
+          </GridItem> */}
+          {/* <br /> */}
           <br />
           <GridItem md={12} lg={12}>
             <FormGroup sx={{ display: 'flex', alignContent: 'center' }}>