From 7167a35d6c45e22b848fc658d7c59979c1def14e Mon Sep 17 00:00:00 2001 From: Gustavo Valverde Date: Mon, 15 May 2023 20:29:50 -0400 Subject: [PATCH] feat(registry): show password strenght to user (#27) This change was made by @JE1999, I just updated it with changes from `master` --- .github/workflows/linter.yml | 1 + package.json | 1 + .../elements/passwordLevel/index.tsx | 67 +++++++++++++++++++ src/components/form/input/index.tsx | 62 ++++++++--------- src/pages/register/stepper/index.tsx | 6 +- src/pages/register/stepper/step1.tsx | 8 +-- src/pages/register/stepper/step2.tsx | 20 +++--- src/pages/register/stepper/step3.tsx | 50 ++++++-------- src/styles/globals.css | 5 +- yarn.lock.REMOVED.git-id | 2 +- 10 files changed, 140 insertions(+), 82 deletions(-) create mode 100644 src/components/elements/passwordLevel/index.tsx diff --git a/.github/workflows/linter.yml b/.github/workflows/linter.yml index 1063a925..d30fc2ba 100644 --- 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 index 6ccae485..0a2ca1b5 100644 --- 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 new file mode 100644 index 00000000..56c08617 --- /dev/null +++ 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 ? ( + <> +
+ {passwordLevel.id >= 0 && ( +
+ )} + {passwordLevel.id >= 1 && ( +
+ )} + {passwordLevel.id >= 2 && ( +
+ )} + {passwordLevel.id >= 3 && ( +
+ )} +
+ + Nivel de contraseña + {passwordLevel.id === 0 && ' Muy Bajo'} + {passwordLevel.id === 1 && ' Bajo'} + {passwordLevel.id === 2 && ' Medio'} + {passwordLevel.id === 3 && ' Fuerte'} + + + ) : null; +} diff --git a/src/components/form/input/index.tsx b/src/components/form/input/index.tsx index 128f8e65..a3326bad 100644 --- 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) => { ))(({ 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,17 +39,17 @@ export const FormControlApp = (props: IProps) => { error={props.msg ? true : false} shrink={true} > - {props.label}{" "} + {props.label}{' '} - {props.required && "*"} - {" "} + {props.required && '*'} + {' '} {props.icon} {props.tooltip && ( { <> {props.tooltip} @@ -65,16 +65,16 @@ export const FormControlApp = (props: IProps) => { <>
{props.tooltipText} @@ -85,14 +85,14 @@ export const FormControlApp = (props: IProps) => { > @@ -102,9 +102,9 @@ export const FormControlApp = (props: IProps) => { )} {props.children} {!props.noGutter && ( - + {props.msg} - {"\u00A0"} + {'\u00A0'} )} diff --git a/src/pages/register/stepper/index.tsx b/src/pages/register/stepper/index.tsx index 6624376e..2138d9cb 100644 --- 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 = ( - Identidad de usuario + Identifícate ); } if (index === 1) { labelProps.optional = ( - Verificación Identidad + Verifícate ); } if (index === 2) { labelProps.optional = ( - Completar Registro + Regístrate ); } diff --git a/src/pages/register/stepper/step1.tsx b/src/pages/register/stepper/step1.tsx index 50acef90..40eed2f5 100644 --- 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 && }
- 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.
({ reValidateMode: 'onSubmit', @@ -57,12 +57,10 @@ export default function Step2({ infoCedula, handleNext }: any) { ¡Hola {infoCedula?.name}!{' '} - 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: -
@@ -104,23 +102,21 @@ export default function Step2({ infoCedula, handleNext }: any) { color="info" /> - Permitir capturas de{' '} - - fotografías de tu rostro. - + Estar de acuerdo en que hagamos capturas de{' '} + tu rostro.
- + {/* Verificación con pasaporte disponible próximamente - -
+ */} + {/*
*/}
diff --git a/src/pages/register/stepper/step3.tsx b/src/pages/register/stepper/step3.tsx index 2e7db38f..75a91b62 100644 --- a/src/pages/register/stepper/step3.tsx +++ b/src/pages/register/stepper/step3.tsx @@ -3,6 +3,7 @@ import { useForm } from 'react-hook-form'; import { useState } from 'react'; import * as yup from 'yup'; import axios from 'axios'; +import { passwordStrength } from 'check-password-strength'; import { AlertError, AlertWarning } from '@/components/elements/alert'; import { GridContainer, GridItem } from '@/components/elements/grid'; @@ -12,6 +13,7 @@ import { FormControlApp } from '@/components/form/input'; import { ButtonApp } from '@/components/elements/button'; import { InputApp } from '@/themes/form/input'; import { labels } from '@/constants/labels'; +import PasswordLevel from '@/components/elements/passwordLevel'; interface IFormInputs { email: string; @@ -31,15 +33,7 @@ const schema = yup.object({ .trim() .required(labels.form.requiredField) .oneOf([yup.ref('email')], 'Los correos no coinciden'), - password: yup - .string() - .min(8, 'Debe contener al menos 8 caracteres') - .required(labels.form.requiredField) - .trim() - .matches( - /^.*(?=.{8,})((?=.*[!@#$%^&*()\-_=+{};:,<.>]){1})(?=.*\d)((?=.*[a-z]){1})((?=.*[A-Z]){1}).*$/, - 'La contraseña debe contener una mayúscula, un número y un carácter especial' - ), + password: yup.string().required(labels.form.requiredField), passwordConfirm: yup .string() .required(labels.form.requiredField) @@ -47,21 +41,28 @@ const schema = yup.object({ }); export default function Step3({ handleNext, infoCedula }: any) { - const [dataItem] = useState({}); - const [loading, setLoading] = useState(false); + const [passwordLevel, setPasswordLevel] = useState({}); const { register, handleSubmit, formState: { errors }, getValues, + setValue, } = useForm({ mode: 'onChange', resolver: yupResolver(schema), }); + const handleChangePassword = (password: string) => { + const level = passwordStrength(password); + setPasswordLevel(level); + setValue('password', password); + }; + const onSubmit = (data: IFormInputs) => { + if (passwordLevel.id !== 3) return; setLoading(true); axios @@ -88,7 +89,7 @@ export default function Step3({ handleNext, infoCedula }: any) { {loading && }
- Para finalizar y completar tu registro completa los siguientes campos. + Para finalizar tu registro completa los siguientes campos: @@ -97,12 +98,11 @@ export default function Step3({ handleNext, infoCedula }: any) { { e.preventDefault(); @@ -120,12 +120,11 @@ export default function Step3({ handleNext, infoCedula }: any) { { e.preventDefault(); @@ -162,43 +161,38 @@ export default function Step3({ handleNext, infoCedula }: any) { required > { e.preventDefault(); return false; }} - onCopy={(e) => { - e.preventDefault(); - return false; - }} autoComplete="off" {...register('password')} + onChange={(e: React.ChangeEvent) => + handleChangePassword(e.target.value) + } /> + { - e.preventDefault(); - return false; - }} onCopy={(e) => { e.preventDefault(); return false; }} autoComplete="off" {...register('passwordConfirm')} + disabled={passwordLevel.id === 3 ? false : true} /> diff --git a/src/styles/globals.css b/src/styles/globals.css index f5dfaf0e..a7b34ffa 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -128,12 +128,11 @@ body { /* MUI global */ -.muisteplabel-iconcontainer, -.muistepconnector-horizontal { +.MuiStepConnector-line { display: none !important; } -.muisteplabel-label { +.MuiStepLabel-label { color: #03397775; } diff --git a/yarn.lock.REMOVED.git-id b/yarn.lock.REMOVED.git-id index 81b68624..3c2295ac 100644 --- a/yarn.lock.REMOVED.git-id +++ b/yarn.lock.REMOVED.git-id @@ -1 +1 @@ -fb297b2b79004dce6fe4782f5411f6a044d30c7a \ No newline at end of file +4ba08d8619050b60f14f929fdc8ebe0325610b3e \ No newline at end of file