From 4da3f248d7620f0a163b4d174bb3bf11ac3058ea Mon Sep 17 00:00:00 2001 From: je1999 Date: Tue, 20 Jun 2023 23:18:29 -0400 Subject: [PATCH 01/24] [REF] ui/ux --- package.json | 1 + .../biometric/face-liveness-detector.tsx | 2 +- .../elements/boxContentCenter/index.tsx | 2 +- src/components/elements/button/index.tsx | 3 + .../elements/passwordLevel/index.tsx | 109 ++++++++++++------ src/pages/api/citizens/[cedula].ts | 4 +- src/pages/register/stepper/step1.tsx | 81 +++++++++++-- src/pages/register/stepper/step2.tsx | 34 +++--- src/pages/register/stepper/step3.tsx | 91 +++++++++++---- yarn.lock | 28 +++++ 10 files changed, 267 insertions(+), 88 deletions(-) diff --git a/package.json b/package.json index c5d3f238..99292fb1 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "react": "18.2.0", "react-dom": "18.2.0", "react-hook-form": "7.34.0", + "react-imask": "^7.0.0", "typescript": "4.9.5", "yup": "^1.2.0" }, diff --git a/src/components/biometric/face-liveness-detector.tsx b/src/components/biometric/face-liveness-detector.tsx index 9c6bc8af..2accd1bb 100644 --- a/src/components/biometric/face-liveness-detector.tsx +++ b/src/components/biometric/face-liveness-detector.tsx @@ -53,7 +53,7 @@ export function LivenessQuickStartReact({ handleNextForm, cedula }: any) { if (error) { AlertError('No se ha podido validar correctamente la identidad.'); } - }, [error, AlertError]); + }, [error]); return ( <> diff --git a/src/components/elements/boxContentCenter/index.tsx b/src/components/elements/boxContentCenter/index.tsx index 28ed31c8..e440ea67 100644 --- a/src/components/elements/boxContentCenter/index.tsx +++ b/src/components/elements/boxContentCenter/index.tsx @@ -5,7 +5,7 @@ export default function BoxContentCenter({ children }: any) { { return ( @@ -67,6 +69,7 @@ export const ButtonApp = ({ height: "60px", }} startIcon={startIcon} + endIcon={endIcon} > {children} diff --git a/src/components/elements/passwordLevel/index.tsx b/src/components/elements/passwordLevel/index.tsx index 56c08617..f5d386ca 100644 --- a/src/components/elements/passwordLevel/index.tsx +++ b/src/components/elements/passwordLevel/index.tsx @@ -1,15 +1,64 @@ import * as React from 'react'; +import CheckCircleIcon from '@mui/icons-material/CheckCircle'; + import { Typography } from '@mui/material'; export default function PasswordLevel({ passwordLevel }: any) { return passwordLevel.length > 0 ? ( - <> +
+
+ + + Una letra minúscula + +
+
+ + + Una letra mayúscula + +
+
+ + + Un número + +
+
+ + + Un carácter especial + +
+
+ = 10 ? "success" : "disabled"} + style={{ fontSize: "20px", marginBottom: "-4px", marginRight: "3px" }} + /> + + 10 caracteres como mínimo + +
+
{passwordLevel.id >= 0 && ( @@ -22,36 +71,30 @@ export default function PasswordLevel({ passwordLevel }: any) { }} /> )} - {passwordLevel.id >= 1 && ( -
- )} - {passwordLevel.id >= 2 && ( -
- )} - {passwordLevel.id >= 3 && ( -
- )} +
= 1 ? '#E0D256' : '#f1f1f1'}`, + borderRadius: '10px', + }} + /> +
= 2 ? '#B4E056' : '#f1f1f1'}`, + borderRadius: '10px', + }} + /> +
= 3 ? '#A3E056' : '#f1f1f1'}`, + borderRadius: '10px', + }} + />
- +
) : null; } diff --git a/src/pages/api/citizens/[cedula].ts b/src/pages/api/citizens/[cedula].ts index e770ad4e..b33df4da 100644 --- a/src/pages/api/citizens/[cedula].ts +++ b/src/pages/api/citizens/[cedula].ts @@ -23,8 +23,8 @@ export default async function handler( `/${cedula}/info/basic?api-key=${process.env.NEXT_PUBLIC_CEDULA_API_KEY}` ); - const { names, id } = citizen.payload; - const name = names.split(' ')[0]; + const { names, firstSurname, id } = citizen.payload; + const name = `${names.split(' ')[0]} ${firstSurname}`; res.status(200).json({ name, id }); } diff --git a/src/pages/register/stepper/step1.tsx b/src/pages/register/stepper/step1.tsx index bed67d2f..ba9cd971 100644 --- a/src/pages/register/stepper/step1.tsx +++ b/src/pages/register/stepper/step1.tsx @@ -1,9 +1,10 @@ -import { useCallback, useState } from 'react'; +import { forwardRef, useCallback, useState } from 'react'; import { useForm } from 'react-hook-form'; import { useReCaptcha } from 'next-recaptcha-v3'; import { CitizensBasicInformationResponse } from '@/pages/api/types'; import axios from 'axios'; import { useSnackbar } from '@/components/elements/alert'; +import ArrowCircleRightOutlinedIcon from '@mui/icons-material/ArrowCircleRightOutlined'; import { Box, Button, @@ -14,13 +15,54 @@ import { CircularProgress, Tooltip, } from '@mui/material'; +import { GridContainer, GridItem } from '@/components/elements/grid'; +import { ButtonApp } from '@/components/elements/button'; +import { IMaskInput } from 'react-imask'; +import { yupResolver } from '@hookform/resolvers/yup'; +import * as yup from 'yup'; +import { labels } from '@/constants/labels'; interface IFormInputs { cedula: string; } +const schema = yup.object({ + cedula: yup + .string() + .trim() + .required(labels.form.requiredField) + .min(11, 'Debe contener 11 dígitos') + .max(11, 'Debe contener 11 dígitos') +}); + +interface CustomProps { + onChange: (event: { target: { name: string; value: string } }) => void; + name: string; +} + +const TextMaskCustom = forwardRef( + function TextMaskCustom(props, ref: any) { + const { onChange, ...other } = props; + return ( + onChange({ target: { name: props.name, value } })} + overwrite + /> + ); + }, +); + export default function Step1({ setInfoCedula, handleNext }: any) { + const [loading, setLoading] = useState(false); + const [valueCedula, setValueCedula] = useState("") + const luhnCheck = (num: string) => { const arr = (num + '') .split('') @@ -39,14 +81,22 @@ export default function Step1({ setInfoCedula, handleNext }: any) { register, handleSubmit: handleFormSubmit, formState: { errors }, + setValue, } = useForm({ reValidateMode: 'onSubmit', - shouldFocusError: false, + // shouldFocusError: false, + resolver: yupResolver(schema), }); + const { executeRecaptcha } = useReCaptcha(); const { AlertError, AlertWarning } = useSnackbar(); + const handleChange = (event: React.ChangeEvent) => { + setValue('cedula', event.target.value.replace(/-/g, '')) + setValueCedula(event.target.value) + } + const handleSubmit = useCallback( async (data: IFormInputs) => { const cleanCedula = data?.cedula?.replace(/-/g, ''); @@ -114,27 +164,34 @@ export default function Step1({ setInfoCedula, handleNext }: any) {
- - + + - - - - - + + +
); diff --git a/src/pages/register/stepper/step2.tsx b/src/pages/register/stepper/step2.tsx index 795a7628..dbe2f7a6 100644 --- a/src/pages/register/stepper/step2.tsx +++ b/src/pages/register/stepper/step2.tsx @@ -15,6 +15,8 @@ import { import Step2Modal from './step2Modal'; import { useSnackbar } from '@/components/elements/alert'; +import { GridContainer, GridItem } from '@/components/elements/grid'; +import { ButtonApp } from '@/components/elements/button'; interface IFormInputs { acceptTermAndConditions: boolean; @@ -62,8 +64,8 @@ export default function Step2({ infoCedula, handleNext }: IStep2Props) {
- - + +
cámara integrada.
- + - +
tu rostro.
- +
- + )} - - + + +
- - - + {open && ( )} - - + +
); diff --git a/src/pages/register/stepper/step3.tsx b/src/pages/register/stepper/step3.tsx index a4b3c3e5..f4610696 100644 --- a/src/pages/register/stepper/step3.tsx +++ b/src/pages/register/stepper/step3.tsx @@ -5,11 +5,13 @@ import { useState } from 'react'; import * as yup from 'yup'; import axios from 'axios'; import { Crypto } from '@/helpers'; +import CheckCircleOutlineOutlinedIcon from '@mui/icons-material/CheckCircleOutlineOutlined'; import PasswordLevel from '@/components/elements/passwordLevel'; import { useSnackbar } from '@/components/elements/alert'; import { labels } from '@/constants/labels'; import { + Alert, Backdrop, Box, Button, @@ -24,6 +26,9 @@ import { } from '@mui/material'; import Visibility from '@mui/icons-material/Visibility'; import VisibilityOff from '@mui/icons-material/VisibilityOff'; +import { ButtonApp } from '@/components/elements/button'; +import { GridContainer, GridItem } from '@/components/elements/grid'; +import LoadingBackdrop from '@/components/elements/loadingBackdrop'; interface IFormInputs { email: string; @@ -58,6 +63,7 @@ export default function Step3({ handleNext, infoCedula }: any) { const [isPwned, setIsPwned] = useState(false); const { AlertError, AlertWarning } = useSnackbar(); const [showPassword, setShowPassword] = useState(false); + const [showPasswordConfirm, setShowPasswordConfirm] = useState(false); const { register, @@ -69,7 +75,7 @@ export default function Step3({ handleNext, infoCedula }: any) { resolver: yupResolver(schema), }); - const handleClickShowPassword = () => setShowPassword((show) => !show); + // const handleClickShowPassword = () => setShowPassword((show) => !show); const handleMouseDownPassword = ( event: React.MouseEvent @@ -130,7 +136,7 @@ export default function Step3({ handleNext, infoCedula }: any) { // TODO: Use this Password UI approach https://stackblitz.com/edit/material-password-strength?file=Icons.js return ( <> -
+ {/*
theme.zIndex.drawer + 1 }} open={loadingValidatingPassword} @@ -147,7 +153,12 @@ export default function Step3({ handleNext, infoCedula }: any) { Creando usuario... -
+
*/} + {loadingValidatingPassword && ( + + )} + {loading && } + Para finalizar tu registro completa los siguientes campos: @@ -155,8 +166,8 @@ export default function Step3({ handleNext, infoCedula }: any) {
- - + + { + e.preventDefault(); + return false; + }} + onCopy={(e) => { + e.preventDefault(); + return false; + }} /> - + - + { + e.preventDefault(); + return false; + }} + onCopy={(e) => { + e.preventDefault(); + return false; + }} /> - + - + @@ -209,7 +239,7 @@ export default function Step3({ handleNext, infoCedula }: any) { setShowPassword(!showPassword)} onMouseDown={handleMouseDownPassword} edge="end" > @@ -221,12 +251,12 @@ export default function Step3({ handleNext, infoCedula }: any) { /> - + - + setShowPasswordConfirm(!showPasswordConfirm)} onMouseDown={handleMouseDownPassword} edge="end" > - {showPassword ? : } + {showPasswordConfirm ? : } ), }} /> - + - {isPwned && ( - + {/* {isPwned && ( + Esta contraseña ha estado en filtraciones de datos, por eso no se considera segura. Te recomendamos eligir otra contraseña. - + + )} */} + {isPwned && ( + + + Esta contraseña ha estado en filtraciones de datos, por eso no + se considera segura. Te recomendamos eligir otra contraseña. + + )} - - - - + + +
); diff --git a/yarn.lock b/yarn.lock index cfcb4c68..334b9e4b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3437,6 +3437,14 @@ resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.22.5.tgz#721fd042f3ce1896238cf1b341c77eb7dee7dbea" integrity sha512-DFZMC9LJUG9PLOclRC32G63UXwzqS2koQC8dkx+PLdmt1xSePYpbT/NbsrJy8Q/muXz7o/h/d4A7Fuyixm559Q== +"@babel/runtime-corejs3@^7.22.5": + version "7.22.5" + resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.22.5.tgz#bbc769b48edb2bdfd404b65ad1fc3952bf33e3c2" + integrity sha512-TNPDN6aBFaUox2Lu+H/Y1dKKQgr4ucz/FGyCz67RVYLsBpVpUFf1dDngzg+Od8aqbrqwyztkaZjtWCZEUOT8zA== + dependencies: + core-js-pure "^3.30.2" + regenerator-runtime "^0.13.11" + "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7": version "7.22.5" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.5.tgz#8564dd588182ce0047d55d7a75e93921107b57ec" @@ -5023,6 +5031,11 @@ cookie@^0.5.0: resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.5.0.tgz#d1f5d71adec6558c58f389987c366aa47e994f8b" integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw== +core-js-pure@^3.30.2: + version "3.31.0" + resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.31.0.tgz#052fd9e82fbaaf86457f5db1fadcd06f15966ff2" + integrity sha512-/AnE9Y4OsJZicCzIe97JP5XoPKQJfTuEG43aEVLFJGOJpyqELod+pE6LEl63DfG1Mp8wX97LDaDpy1GmLEUxlg== + cosmiconfig@^7.0.0: version "7.1.0" resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.1.0.tgz#1443b9afa596b670082ea46cbd8f6a62b84635f6" @@ -5986,6 +5999,13 @@ ignore@^5.2.0: resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.4.tgz#a291c0c6178ff1b960befe47fcdec301674a6324" integrity sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ== +imask@^7.0.0: + version "7.0.0" + resolved "https://registry.yarnpkg.com/imask/-/imask-7.0.0.tgz#61db79e00d39c29aa035314b02ece9edc405f8ec" + integrity sha512-updOw8XSx50ZZmi9na3nH45X3GZyf7z45ri+mNxFuqAlZCaDMyX2J9KzWzRCGOoo8twJqzVZMnvxKCUH1kBoyQ== + dependencies: + "@babel/runtime-corejs3" "^7.22.5" + immer@9.0.6: version "9.0.6" resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.6.tgz#7a96bf2674d06c8143e327cbf73539388ddf1a73" @@ -6906,6 +6926,14 @@ react-hook-form@7.34.0: resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.34.0.tgz#22883b5e014e5c5e35f3061d0e3862153b0df2ec" integrity sha512-s0/TJ09NVlEk2JPp3yit1WnMuPNBXFmUKEQPulgDi9pYBw/ZmmAFHe6AXWq73Y+kp8ye4OcMf0Jv+i/qLPektg== +react-imask@^7.0.0: + version "7.0.0" + resolved "https://registry.yarnpkg.com/react-imask/-/react-imask-7.0.0.tgz#6177fe1d1f80307fb7459412f225c255efbfd89d" + integrity sha512-7Y+qUKQbjSyHodxoYZQQkmY33UrIaVgEYnAe/vzy5MwqvuHCQyH0drC0+x3ombfJE4ogeVKmlowPRr+B4Yl4sw== + dependencies: + imask "^7.0.0" + prop-types "^15.8.1" + react-is@^16.13.1, react-is@^16.7.0: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" From 94a86a468049522e4bae47a3aacbc9497010b711 Mon Sep 17 00:00:00 2001 From: je1999 Date: Wed, 21 Jun 2023 09:22:09 -0400 Subject: [PATCH 02/24] [REF] MUI button style --- src/components/elements/button/index.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/elements/button/index.tsx b/src/components/elements/button/index.tsx index 0ef31f95..dab1f255 100644 --- a/src/components/elements/button/index.tsx +++ b/src/components/elements/button/index.tsx @@ -61,13 +61,13 @@ export const ButtonApp = ({ onClick={onClick} color={color ? color : "primary"} fullWidth={notFullWidth ? false : true} - sx={{ - paddingX: `${notFullWidth ? "35px" : "auto"}`, - fontWeight: `${outlined ? "bold" : "normal"}`, - borderRadius: "50px", - padding: "10px 0px", - height: "60px", - }} + // sx={{ + // paddingX: `${notFullWidth ? "35px" : "auto"}`, + // fontWeight: `${outlined ? "bold" : "normal"}`, + // borderRadius: "50px", + // padding: "10px 0px", + // height: "60px", + // }} startIcon={startIcon} endIcon={endIcon} > From 218c8cdc9435e2dea8e882e18db2e76d826d8dc0 Mon Sep 17 00:00:00 2001 From: je1999 Date: Wed, 21 Jun 2023 09:22:59 -0400 Subject: [PATCH 03/24] [ADD] disabled button if is pwned --- src/pages/register/stepper/step3.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/register/stepper/step3.tsx b/src/pages/register/stepper/step3.tsx index f4610696..97d6efdd 100644 --- a/src/pages/register/stepper/step3.tsx +++ b/src/pages/register/stepper/step3.tsx @@ -303,6 +303,7 @@ export default function Step3({ handleNext, infoCedula }: any) { } + disabled={isPwned} > CREAR CUENTA ÚNICA From 1a5005617507bf63bd19a7ef05d2424a02e19f33 Mon Sep 17 00:00:00 2001 From: je1999 Date: Wed, 21 Jun 2023 16:40:18 -0400 Subject: [PATCH 04/24] library update --- package.json | 4 ++-- yarn.lock | 10 +++++----- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index 99292fb1..f81c0f04 100644 --- a/package.json +++ b/package.json @@ -14,11 +14,11 @@ "@aws-amplify/ui-react-liveness": "^1.0.1", "@aws-sdk/client-rekognition": "^3.354.0", "@babel/core": "*", - "@emotion/react": "^11.10.6", + "@emotion/react": "^11.11.1", "@emotion/styled": "^11.10.6", "@hookform/resolvers": "2.9.7", "@mui/icons-material": "^5.11.11", - "@mui/material": "^5.11.12", + "@mui/material": "^5.13.5", "aws-amplify": "^5.2.7", "axios": "^1.4.0", "check-password-strength": "^2.0.7", diff --git a/yarn.lock b/yarn.lock index 334b9e4b..99747535 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3531,7 +3531,7 @@ resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.1.tgz#c1ddb040429c6d21d38cc945fe75c818cfb68e17" integrity sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA== -"@emotion/react@^11.10.6": +"@emotion/react@^11.11.1": version "11.11.1" resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.11.1.tgz#b2c36afac95b184f73b08da8c214fdf861fa4157" integrity sha512-5mlW1DquU5HaxjLkfkGN1GA/fvVGdyHURRiX/0FHl2cfIfRxSOfmxEH5YS43edp0OldZrZ+dkBKbngxcNCdZvA== @@ -3732,7 +3732,7 @@ dependencies: "@babel/runtime" "^7.21.0" -"@mui/material@^5.11.12": +"@mui/material@^5.13.5": version "5.13.5" resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.13.5.tgz#c14f14824f3a37ae0c5ebddbc0034956bc6fec30" integrity sha512-eMay+Ue1OYXOFMQA5Aau7qbAa/kWHLAyi0McsbPTWssCbGehqkF6CIdPsfVGw6tlO+xPee1hUitphHJNL3xpOQ== @@ -4418,9 +4418,9 @@ "@types/react" "*" "@types/react-is@^18.2.0": - version "18.2.0" - resolved "https://registry.yarnpkg.com/@types/react-is/-/react-is-18.2.0.tgz#2f5137853a46017b3d56447940fb3eb92bbf24a5" - integrity sha512-1vz2yObaQkLL7YFe/pme2cpvDsCwI1WXIfL+5eLz0MI9gFG24Re16RzUsI8t9XZn9ZWvgLNDrJBmrqXJO7GNQQ== + version "18.2.1" + resolved "https://registry.yarnpkg.com/@types/react-is/-/react-is-18.2.1.tgz#61d01c2a6fc089a53520c0b66996d458fdc46863" + integrity sha512-wyUkmaaSZEzFZivD8F2ftSyAfk6L+DfFliVj/mYdOXbVjRcS87fQJLTnhk6dRZPuJjI+9g6RZJO4PNCngUrmyw== dependencies: "@types/react" "*" From 0714591616af0fddb5156bee281f0fc4d5d4eee5 Mon Sep 17 00:00:00 2001 From: je1999 Date: Wed, 21 Jun 2023 16:41:39 -0400 Subject: [PATCH 05/24] [REF] footer and themes --- src/components/elements/boxContentCenter/index.tsx | 2 +- src/styles/globals.css | 4 ++-- src/themes/index.tsx | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/elements/boxContentCenter/index.tsx b/src/components/elements/boxContentCenter/index.tsx index e440ea67..0f53eb21 100644 --- a/src/components/elements/boxContentCenter/index.tsx +++ b/src/components/elements/boxContentCenter/index.tsx @@ -5,7 +5,7 @@ export default function BoxContentCenter({ children }: any) { Date: Wed, 21 Jun 2023 16:43:01 -0400 Subject: [PATCH 06/24] [REF] ui/ux --- src/components/elements/grid/index.tsx | 2 +- src/pages/register/stepper/step2.tsx | 2 +- src/pages/register/stepper/step3.tsx | 6 +++++- 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/elements/grid/index.tsx b/src/components/elements/grid/index.tsx index 724c94e8..07344d5e 100644 --- a/src/components/elements/grid/index.tsx +++ b/src/components/elements/grid/index.tsx @@ -18,7 +18,7 @@ export const GridContainer = ({ }: IPropsContainer) => (
- +
- + Date: Wed, 21 Jun 2023 16:43:24 -0400 Subject: [PATCH 07/24] [REF] link to home --- src/components/layout/navBar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/layout/navBar.tsx b/src/components/layout/navBar.tsx index 9e8076ed..ee801109 100644 --- a/src/components/layout/navBar.tsx +++ b/src/components/layout/navBar.tsx @@ -23,7 +23,7 @@ export default function Index() {
logo From 49b087f5286b187fad9eca868e2d4cd4cfed6fae Mon Sep 17 00:00:00 2001 From: je1999 Date: Wed, 21 Jun 2023 16:44:36 -0400 Subject: [PATCH 08/24] [ADD] cedula validation if the user exists --- src/pages/api/iam/[cedula].ts | 30 ++++++++++++++++++++++++++ src/pages/api/types/index.ts | 8 ++++++- src/pages/register/stepper/step1.tsx | 32 +++++++++++++++++++++------- 3 files changed, 61 insertions(+), 9 deletions(-) create mode 100644 src/pages/api/iam/[cedula].ts diff --git a/src/pages/api/iam/[cedula].ts b/src/pages/api/iam/[cedula].ts new file mode 100644 index 00000000..01292c1e --- /dev/null +++ b/src/pages/api/iam/[cedula].ts @@ -0,0 +1,30 @@ +import { NextApiRequest, NextApiResponse } from 'next/types'; +import axios from 'axios'; + +import { VerifyIamUserNameResponse } from '../types'; + +export default async function handler( + req: NextApiRequest, + res: NextApiResponse<{ exists: boolean } | void> +): Promise { + + const { token } = req.cookies; + + if (token !== process.env.NEXT_PUBLIC_COOKIE_KEY) { + return res.status(401).send(); + } + + const http = axios.create({ + baseURL: process.env.NEXT_PUBLIC_IAM_API, + }); + + const { cedula } = req.query; + + const { data } = await http.get( + `auth/validations/users/existence?username=${cedula}` + ); + + const { exists } = data.data; + + res.status(200).json({ exists }); +} diff --git a/src/pages/api/types/index.ts b/src/pages/api/types/index.ts index 597f3cb9..1d6f4f70 100644 --- a/src/pages/api/types/index.ts +++ b/src/pages/api/types/index.ts @@ -30,7 +30,13 @@ export type ReCaptchaResponse = { name: string; }; -export type VerifyIamUserResponse = { +export type VerifyIamUserNameResponse = { + data: { + exists: boolean; + } +} + + export type VerifyIamUserResponse = { id: string; createdTimestamp: number; username: string; diff --git a/src/pages/register/stepper/step1.tsx b/src/pages/register/stepper/step1.tsx index ba9cd971..fc9eed85 100644 --- a/src/pages/register/stepper/step1.tsx +++ b/src/pages/register/stepper/step1.tsx @@ -21,6 +21,7 @@ import { IMaskInput } from 'react-imask'; import { yupResolver } from '@hookform/resolvers/yup'; import * as yup from 'yup'; import { labels } from '@/constants/labels'; +import LoadingBackdrop from '@/components/elements/loadingBackdrop'; interface IFormInputs { cedula: string; } @@ -100,10 +101,10 @@ export default function Step1({ setInfoCedula, handleNext }: any) { const handleSubmit = useCallback( async (data: IFormInputs) => { const cleanCedula = data?.cedula?.replace(/-/g, ''); - if (cleanCedula?.length !== 11 || !luhnCheck(cleanCedula)) { - AlertError('Por favor introduzca un número de cédula válido.'); - return; - } + // if (cleanCedula?.length !== 11 || !luhnCheck(cleanCedula)) { + // AlertError('Por favor introduzca un número de cédula válido.'); + // return; + // } setLoading(true); // Generate ReCaptcha token const token = await executeRecaptcha('form_submit'); @@ -121,6 +122,17 @@ export default function Step1({ setInfoCedula, handleNext }: any) { token, }); if (response.data && response.data.isHuman === true) { + const responseCedula = await fetch(`/api/iam/${cleanCedula}`); + if (responseCedula.status !== 200) { + throw new Error('Failed to fetch iam data'); + } + const { exists } = await responseCedula.json(); + if(exists){ + console.log(exists) + return AlertWarning( + 'Su Cédula ya se encuentra registrada.' + ); + } const response = await fetch(`/api/citizens/${cleanCedula}`); if (response.status !== 200) { throw new Error('Failed to fetch citizen data'); @@ -137,7 +149,8 @@ export default function Step1({ setInfoCedula, handleNext }: any) { } } catch (err) { console.error(err); - AlertError('Esta cédula es correcta, pero no hemos podido validarla.'); + // AlertError('Esta cédula es correcta, pero no hemos podido validarla.'); + AlertError('No hemos podido validar su Cédula'); } finally { setLoading(false); } @@ -147,7 +160,7 @@ export default function Step1({ setInfoCedula, handleNext }: any) { return ( <> -
+ {/*
theme.zIndex.drawer + 1 }} open={loading} @@ -155,7 +168,9 @@ export default function Step1({ setInfoCedula, handleNext }: any) { Validando cédula... -
+
*/} + {loading && } + Este es el primer paso para poder verificar tu identidad y crear tu @@ -164,11 +179,12 @@ export default function Step1({ setInfoCedula, handleNext }: any) { - + Date: Wed, 21 Jun 2023 19:03:40 -0400 Subject: [PATCH 09/24] [ADD] link to ogtic --- src/components/layout/footer.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/layout/footer.tsx b/src/components/layout/footer.tsx index 930c7767..0ca154f5 100644 --- a/src/components/layout/footer.tsx +++ b/src/components/layout/footer.tsx @@ -101,11 +101,12 @@ export default function Index() { Desarrollado por logo ogtic window.open("https://ogtic.gob.do/")} />
From c5396016fadb32a7da4af32dde38994df45e76a1 Mon Sep 17 00:00:00 2001 From: je1999 Date: Wed, 21 Jun 2023 19:04:01 -0400 Subject: [PATCH 10/24] [ADD] link to log in --- src/pages/register/stepper/step1.tsx | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/src/pages/register/stepper/step1.tsx b/src/pages/register/stepper/step1.tsx index fc9eed85..7954c8fa 100644 --- a/src/pages/register/stepper/step1.tsx +++ b/src/pages/register/stepper/step1.tsx @@ -22,6 +22,8 @@ import { yupResolver } from '@hookform/resolvers/yup'; import * as yup from 'yup'; import { labels } from '@/constants/labels'; import LoadingBackdrop from '@/components/elements/loadingBackdrop'; +import { TextBodyTiny } from '@/components/elements/typography'; +import Link from 'next/link'; interface IFormInputs { cedula: string; } @@ -127,7 +129,7 @@ export default function Step1({ setInfoCedula, handleNext }: any) { throw new Error('Failed to fetch iam data'); } const { exists } = await responseCedula.json(); - if(exists){ + if (exists) { console.log(exists) return AlertWarning( 'Su Cédula ya se encuentra registrada.' @@ -208,6 +210,22 @@ export default function Step1({ setInfoCedula, handleNext }: any) { + +
+ + + + + ¿Ya tienes una cuenta? Inicia sesión aquí. + + + + ); From e9399dcea41a4a5cd277702bc567bfae68ec4e1e Mon Sep 17 00:00:00 2001 From: je1999 Date: Wed, 21 Jun 2023 19:04:34 -0400 Subject: [PATCH 11/24] [REF] background textfield --- src/themes/index.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/themes/index.tsx b/src/themes/index.tsx index 6af7415f..10e31655 100644 --- a/src/themes/index.tsx +++ b/src/themes/index.tsx @@ -48,5 +48,14 @@ export const theme = createTheme({ }, }, }, + MuiTextField: { + defaultProps: { + sx: { + '& .MuiInputBase-root': { + background: '#F8F8F8', + }, + } + } + } }, }); From f3648cabf51632fbe7694a56316a8ee842cbe87f Mon Sep 17 00:00:00 2001 From: je1999 Date: Wed, 21 Jun 2023 19:05:28 -0400 Subject: [PATCH 12/24] [ADD] color FaceLivenessDetector --- .../biometric/face-liveness-detector.tsx | 38 ++++++++++++++++++- 1 file changed, 36 insertions(+), 2 deletions(-) diff --git a/src/components/biometric/face-liveness-detector.tsx b/src/components/biometric/face-liveness-detector.tsx index 2accd1bb..dd6fd7be 100644 --- a/src/components/biometric/face-liveness-detector.tsx +++ b/src/components/biometric/face-liveness-detector.tsx @@ -1,5 +1,6 @@ import { FaceLivenessDetector } from '@aws-amplify/ui-react-liveness'; -import { Loader, ThemeProvider } from '@aws-amplify/ui-react'; +import { Loader, Theme, ThemeProvider, useTheme } from '@aws-amplify/ui-react'; + import React from 'react'; import { useState, useEffect } from 'react'; @@ -7,6 +8,9 @@ import { useSnackbar } from '@/components/elements/alert'; import { defaultLivenessDisplayText } from './displayText'; export function LivenessQuickStartReact({ handleNextForm, cedula }: any) { + + const { tokens } = useTheme(); + const next = handleNextForm; const id = cedula; const [loading, setLoading] = useState(true); @@ -55,10 +59,40 @@ export function LivenessQuickStartReact({ handleNextForm, cedula }: any) { } }, [error]); + const theme: Theme = { + name: 'Face Liveness Theme', + tokens: { + colors: { + background: { + primary: { + // value: tokens.colors.neutral['90'].value, + value: "#fff", + }, + secondary: { + // value: tokens.colors.neutral['100'].value, + value: "#000", + }, + }, + font: { + primary: { + // value: tokens.colors.white.value, + value: "#000", + }, + }, + brand: { + primary: { + '80': "#003876", + '90': "#003876", + }, + }, + }, + }, + }; + return ( <>
- + {loading ? ( ) : ( From 4bb5e600862413daafff6fdc64242653d5f12d45 Mon Sep 17 00:00:00 2001 From: je1999 Date: Wed, 21 Jun 2023 22:33:38 -0400 Subject: [PATCH 13/24] [REF] stepper ui --- src/pages/register/stepper/index.tsx | 9 +++------ src/styles/globals.css | 4 ---- 2 files changed, 3 insertions(+), 10 deletions(-) diff --git a/src/pages/register/stepper/index.tsx b/src/pages/register/stepper/index.tsx index 08423487..b81b7163 100644 --- a/src/pages/register/stepper/index.tsx +++ b/src/pages/register/stepper/index.tsx @@ -13,8 +13,8 @@ import Step1 from './step1'; import Step2 from './step2'; import Step3 from './step3'; -const steps = ['PASO 1', 'PASO 2', 'PASO 3']; -const optionalLabels = ['Identifícate', 'Verifícate', 'Regístrate']; +const steps = ['Identificación', 'Verificación', 'Registro']; +const optionalLabels = ['DNI del usuario', 'Prueba de vida', 'Cuenta de usuario']; export async function getServerSideProps() { await axios.get(`/api/auth`); @@ -70,15 +70,12 @@ export default function StepperRegister() { return ( {steps.map((label, index) => ( Date: Thu, 22 Jun 2023 07:25:35 -0400 Subject: [PATCH 14/24] chore: lint all files, removed unused code, fix Luhn --- .../biometric/face-liveness-detector.tsx | 15 ++-- src/components/elements/alert/index.tsx | 2 +- .../elements/boxContentCenter/index.tsx | 12 +-- src/components/elements/button/index.tsx | 37 ++++----- src/components/elements/grid/index.tsx | 8 +- .../elements/passwordLevel/index.tsx | 47 +++++++----- src/pages/register/stepper/index.tsx | 2 +- src/pages/register/stepper/step1.tsx | 75 ++++++++----------- src/pages/register/stepper/step2.tsx | 11 +-- src/pages/register/stepper/step3.tsx | 24 +++--- 10 files changed, 108 insertions(+), 125 deletions(-) diff --git a/src/components/biometric/face-liveness-detector.tsx b/src/components/biometric/face-liveness-detector.tsx index dd6fd7be..c786e305 100644 --- a/src/components/biometric/face-liveness-detector.tsx +++ b/src/components/biometric/face-liveness-detector.tsx @@ -8,8 +8,7 @@ import { useSnackbar } from '@/components/elements/alert'; import { defaultLivenessDisplayText } from './displayText'; export function LivenessQuickStartReact({ handleNextForm, cedula }: any) { - - const { tokens } = useTheme(); + // const { tokens } = useTheme(); const next = handleNextForm; const id = cedula; @@ -57,7 +56,7 @@ export function LivenessQuickStartReact({ handleNextForm, cedula }: any) { if (error) { AlertError('No se ha podido validar correctamente la identidad.'); } - }, [error]); + }, [error, AlertError]); const theme: Theme = { name: 'Face Liveness Theme', @@ -66,23 +65,23 @@ export function LivenessQuickStartReact({ handleNextForm, cedula }: any) { background: { primary: { // value: tokens.colors.neutral['90'].value, - value: "#fff", + value: '#fff', }, secondary: { // value: tokens.colors.neutral['100'].value, - value: "#000", + value: '#000', }, }, font: { primary: { // value: tokens.colors.white.value, - value: "#000", + value: '#000', }, }, brand: { primary: { - '80': "#003876", - '90': "#003876", + '80': '#003876', + '90': '#003876', }, }, }, diff --git a/src/components/elements/alert/index.tsx b/src/components/elements/alert/index.tsx index 8ce945ee..c790ba37 100644 --- a/src/components/elements/alert/index.tsx +++ b/src/components/elements/alert/index.tsx @@ -36,7 +36,7 @@ export const SnackbarProvider = ({ children }: SnackbarProviderProps) => { - + {children} diff --git a/src/components/elements/button/index.tsx b/src/components/elements/button/index.tsx index dab1f255..fc77e99e 100644 --- a/src/components/elements/button/index.tsx +++ b/src/components/elements/button/index.tsx @@ -1,4 +1,4 @@ -import Button from "@mui/material/Button"; +import Button from '@mui/material/Button'; interface IButtonTextApp { onClick?: any; @@ -11,7 +11,7 @@ export const ButtonTextApp = ({ onClick, children }: IButtonTextApp) => { onClick={onClick} variant="text" size="small" - sx={{ textTransform: "inherit" }} + sx={{ textTransform: 'inherit' }} > {children} @@ -27,27 +27,27 @@ interface IButtonApp { children: React.ReactNode; startIcon?: any; endIcon?: any; - size?: "small" | "medium" | "large" | undefined; + size?: 'small' | 'medium' | 'large' | undefined; color?: - | "inherit" - | "primary" - | "secondary" - | "success" - | "error" - | "info" - | "warning"; - variant?: "text" | "outlined" | "contained"; + | 'inherit' + | 'primary' + | 'secondary' + | 'success' + | 'error' + | 'info' + | 'warning'; + variant?: 'text' | 'outlined' | 'contained'; } export const ButtonApp = ({ outlined, disabled, - variant = "contained", + variant = 'contained', submit, onClick, notFullWidth, children, - size = "medium", + size = 'medium', startIcon = null, endIcon = null, color, @@ -57,17 +57,10 @@ export const ButtonApp = ({ size={size} variant={variant} disabled={disabled} - type={submit ? "submit" : "button"} + type={submit ? 'submit' : 'button'} onClick={onClick} - color={color ? color : "primary"} + color={color ? color : 'primary'} fullWidth={notFullWidth ? false : true} - // sx={{ - // paddingX: `${notFullWidth ? "35px" : "auto"}`, - // fontWeight: `${outlined ? "bold" : "normal"}`, - // borderRadius: "50px", - // padding: "10px 0px", - // height: "60px", - // }} startIcon={startIcon} endIcon={endIcon} > diff --git a/src/components/elements/grid/index.tsx b/src/components/elements/grid/index.tsx index 07344d5e..8076a13a 100644 --- a/src/components/elements/grid/index.tsx +++ b/src/components/elements/grid/index.tsx @@ -1,5 +1,5 @@ -import Grid from "@mui/material/Grid"; -import React from "react"; +import Grid from '@mui/material/Grid'; +import React from 'react'; interface IPropsContainer { children: React.ReactNode; @@ -20,8 +20,8 @@ export const GridContainer = ({ container spacing={spacing ? spacing : 2} direction="row" - justifyContent={justifyCenter ? "center" : "flex-start"} - marginY={marginY ? 1 : "none"} + justifyContent={justifyCenter ? 'center' : 'flex-start'} + marginY={marginY ? 1 : 'none'} flexDirection={flexDirection ? flexDirection : null} > {children} diff --git a/src/components/elements/passwordLevel/index.tsx b/src/components/elements/passwordLevel/index.tsx index f5d386ca..6f3f8ece 100644 --- a/src/components/elements/passwordLevel/index.tsx +++ b/src/components/elements/passwordLevel/index.tsx @@ -3,51 +3,64 @@ 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 ? ( -
+
- + Una letra minúscula
- + Una letra mayúscula
- + Un número
- + Un carácter especial
= 10 ? "success" : "disabled"} - style={{ fontSize: "20px", marginBottom: "-4px", marginRight: "3px" }} + color={passwordLevel.length >= 10 ? 'success' : 'disabled'} + style={{ fontSize: '20px', marginBottom: '-4px', marginRight: '3px' }} /> - + 10 caracteres como mínimo
@@ -58,7 +71,7 @@ export default function PasswordLevel({ passwordLevel }: any) { display: 'flex', gap: '2%', marginBottom: '12px', - marginTop: "10px" + marginTop: '10px', }} > {passwordLevel.id >= 0 && ( diff --git a/src/pages/register/stepper/index.tsx b/src/pages/register/stepper/index.tsx index b81b7163..1d96badb 100644 --- a/src/pages/register/stepper/index.tsx +++ b/src/pages/register/stepper/index.tsx @@ -14,7 +14,7 @@ import Step2 from './step2'; import Step3 from './step3'; const steps = ['Identificación', 'Verificación', 'Registro']; -const optionalLabels = ['DNI del usuario', 'Prueba de vida', 'Cuenta de usuario']; +const optionalLabels = ['NDI del usuario', 'Prueba de vida', 'Cuenta de usuario']; export async function getServerSideProps() { await axios.get(`/api/auth`); diff --git a/src/pages/register/stepper/step1.tsx b/src/pages/register/stepper/step1.tsx index 7954c8fa..0b087c45 100644 --- a/src/pages/register/stepper/step1.tsx +++ b/src/pages/register/stepper/step1.tsx @@ -5,16 +5,7 @@ import { CitizensBasicInformationResponse } from '@/pages/api/types'; import axios from 'axios'; import { useSnackbar } from '@/components/elements/alert'; import ArrowCircleRightOutlinedIcon from '@mui/icons-material/ArrowCircleRightOutlined'; -import { - Box, - Button, - Grid, - TextField, - Typography, - Backdrop, - CircularProgress, - Tooltip, -} from '@mui/material'; +import { Box, TextField, Typography, Tooltip } from '@mui/material'; import { GridContainer, GridItem } from '@/components/elements/grid'; import { ButtonApp } from '@/components/elements/button'; import { IMaskInput } from 'react-imask'; @@ -34,7 +25,7 @@ const schema = yup.object({ .trim() .required(labels.form.requiredField) .min(11, 'Debe contener 11 dígitos') - .max(11, 'Debe contener 11 dígitos') + .max(11, 'Debe contener 11 dígitos'), }); interface CustomProps { @@ -53,18 +44,19 @@ const TextMaskCustom = forwardRef( // '#': /[1-9]/, // }} inputRef={ref} - onAccept={(value: any) => onChange({ target: { name: props.name, value } })} + onAccept={(value: any) => + onChange({ target: { name: props.name, value } }) + } overwrite /> ); - }, + } ); export default function Step1({ setInfoCedula, handleNext }: any) { - const [loading, setLoading] = useState(false); - const [valueCedula, setValueCedula] = useState("") + const [valueCedula, setValueCedula] = useState(''); const luhnCheck = (num: string) => { const arr = (num + '') @@ -73,7 +65,7 @@ export default function Step1({ setInfoCedula, handleNext }: any) { .map((x) => parseInt(x)); const lastDigit = arr.splice(0, 1)[0]; let sum = arr.reduce( - (acc, val, i) => (i % 2 !== 0 ? acc + val : acc + ((2 * val) % 9) || 9), + (acc, val, i) => (i % 2 !== 0 ? acc + val : acc + (val * 2 > 9 ? val * 2 - 9 : val * 2)), 0 ); sum += lastDigit; @@ -81,7 +73,6 @@ export default function Step1({ setInfoCedula, handleNext }: any) { }; const { - register, handleSubmit: handleFormSubmit, formState: { errors }, setValue, @@ -91,22 +82,21 @@ export default function Step1({ setInfoCedula, handleNext }: any) { resolver: yupResolver(schema), }); - const { executeRecaptcha } = useReCaptcha(); const { AlertError, AlertWarning } = useSnackbar(); const handleChange = (event: React.ChangeEvent) => { - setValue('cedula', event.target.value.replace(/-/g, '')) - setValueCedula(event.target.value) - } + setValue('cedula', event.target.value.replace(/-/g, '')); + setValueCedula(event.target.value); + }; const handleSubmit = useCallback( async (data: IFormInputs) => { const cleanCedula = data?.cedula?.replace(/-/g, ''); - // if (cleanCedula?.length !== 11 || !luhnCheck(cleanCedula)) { - // AlertError('Por favor introduzca un número de cédula válido.'); - // return; - // } + if (cleanCedula?.length !== 11 || !luhnCheck(cleanCedula)) { + AlertError('Por favor introduzca un número de cédula válido.'); + return; + } setLoading(true); // Generate ReCaptcha token const token = await executeRecaptcha('form_submit'); @@ -130,10 +120,8 @@ export default function Step1({ setInfoCedula, handleNext }: any) { } const { exists } = await responseCedula.json(); if (exists) { - console.log(exists) - return AlertWarning( - 'Su Cédula ya se encuentra registrada.' - ); + console.log(exists); + return AlertWarning('Su Cédula ya se encuentra registrada.'); } const response = await fetch(`/api/citizens/${cleanCedula}`); if (response.status !== 200) { @@ -161,6 +149,7 @@ export default function Step1({ setInfoCedula, handleNext }: any) { ); return ( + // TODO: Validate this loading approach with Backdrop <> {/*
- } - > + }> CONFIRMAR - +
- - - ¿Ya tienes una cuenta? Inicia sesión aquí. - - + + + ¿Ya tienes una cuenta?{' '} + Inicia sesión aquí. + + diff --git a/src/pages/register/stepper/step2.tsx b/src/pages/register/stepper/step2.tsx index 9cfd1089..161d3db0 100644 --- a/src/pages/register/stepper/step2.tsx +++ b/src/pages/register/stepper/step2.tsx @@ -81,7 +81,7 @@ export default function Step2({ infoCedula, handleNext }: IStep2Props) { color="info" /> - Utilizar un dispositivo que posea {' '} + Utilizar un dispositivo que posea{' '} cámara integrada.
@@ -103,7 +103,7 @@ export default function Step2({ infoCedula, handleNext }: IStep2Props) { color="info" /> - Permitir que tomemos capturas de {' '} + Permitir que tomemos capturas de{' '} tu rostro.
@@ -137,14 +137,9 @@ export default function Step2({ infoCedula, handleNext }: IStep2Props) {
- - - INICIAR PROCESO - + INICIAR PROCESO {open && ( { e.preventDefault(); @@ -194,11 +189,11 @@ export default function Step3({ handleNext, infoCedula }: any) { { e.preventDefault(); @@ -229,7 +224,7 @@ export default function Step3({ handleNext, infoCedula }: any) { > setShowPasswordConfirm(!showPasswordConfirm)} + onClick={() => + setShowPasswordConfirm(!showPasswordConfirm) + } onMouseDown={handleMouseDownPassword} edge="end" > @@ -284,6 +281,7 @@ export default function Step3({ handleNext, infoCedula }: any) { /> + {/* TODO: validate why not use snackbar */} {/* {isPwned && ( @@ -298,7 +296,7 @@ export default function Step3({ handleNext, infoCedula }: any) { Esta contraseña ha estado en filtraciones de datos, por eso no - se considera segura. Te recomendamos eligir otra contraseña. + se considera segura. Te recomendamos eligir otra contraseña. )} From 30561ad64766f75db42eb52294a9230961323edf Mon Sep 17 00:00:00 2001 From: Gustavo Valverde Date: Thu, 22 Jun 2023 09:25:38 -0400 Subject: [PATCH 15/24] lint: run prettier --- src/pages/api/iam/[cedula].ts | 1 - src/pages/api/types/index.ts | 6 +++--- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/pages/api/iam/[cedula].ts b/src/pages/api/iam/[cedula].ts index 01292c1e..2f9063d2 100644 --- a/src/pages/api/iam/[cedula].ts +++ b/src/pages/api/iam/[cedula].ts @@ -7,7 +7,6 @@ export default async function handler( req: NextApiRequest, res: NextApiResponse<{ exists: boolean } | void> ): Promise { - const { token } = req.cookies; if (token !== process.env.NEXT_PUBLIC_COOKIE_KEY) { diff --git a/src/pages/api/types/index.ts b/src/pages/api/types/index.ts index 1d6f4f70..0c4b6ae0 100644 --- a/src/pages/api/types/index.ts +++ b/src/pages/api/types/index.ts @@ -33,10 +33,10 @@ export type ReCaptchaResponse = { export type VerifyIamUserNameResponse = { data: { exists: boolean; - } -} + }; +}; - export type VerifyIamUserResponse = { +export type VerifyIamUserResponse = { id: string; createdTimestamp: number; username: string; From 61db9a634d73d811339088af5f54186f1ad4abeb Mon Sep 17 00:00:00 2001 From: Gustavo Valverde Date: Thu, 22 Jun 2023 09:34:33 -0400 Subject: [PATCH 16/24] fix(api): do not return Surnameto the frontend --- src/pages/api/citizens/[cedula].ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/api/citizens/[cedula].ts b/src/pages/api/citizens/[cedula].ts index b33df4da..e770ad4e 100644 --- a/src/pages/api/citizens/[cedula].ts +++ b/src/pages/api/citizens/[cedula].ts @@ -23,8 +23,8 @@ export default async function handler( `/${cedula}/info/basic?api-key=${process.env.NEXT_PUBLIC_CEDULA_API_KEY}` ); - const { names, firstSurname, id } = citizen.payload; - const name = `${names.split(' ')[0]} ${firstSurname}`; + const { names, id } = citizen.payload; + const name = names.split(' ')[0]; res.status(200).json({ name, id }); } From 8fad94762b8c6754ffe035cdd38db8fd31d33573 Mon Sep 17 00:00:00 2001 From: Gustavo Valverde Date: Thu, 22 Jun 2023 09:38:12 -0400 Subject: [PATCH 17/24] imp(ui): remove filled variant from fields --- src/pages/register/stepper/step1.tsx | 1 - src/pages/register/stepper/step3.tsx | 4 ---- 2 files changed, 5 deletions(-) diff --git a/src/pages/register/stepper/step1.tsx b/src/pages/register/stepper/step1.tsx index 0b087c45..bfa8168c 100644 --- a/src/pages/register/stepper/step1.tsx +++ b/src/pages/register/stepper/step1.tsx @@ -175,7 +175,6 @@ export default function Step1({ setInfoCedula, handleNext }: any) { Date: Thu, 22 Jun 2023 09:42:44 -0400 Subject: [PATCH 18/24] fix(liveness): re-rendering error --- src/components/biometric/face-liveness-detector.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/biometric/face-liveness-detector.tsx b/src/components/biometric/face-liveness-detector.tsx index c786e305..8e43ef16 100644 --- a/src/components/biometric/face-liveness-detector.tsx +++ b/src/components/biometric/face-liveness-detector.tsx @@ -56,7 +56,8 @@ export function LivenessQuickStartReact({ handleNextForm, cedula }: any) { if (error) { AlertError('No se ha podido validar correctamente la identidad.'); } - }, [error, AlertError]); + // TODO: AlertError is causing re-rendering issues. But not adding it causes eslint error. + }, [error]); const theme: Theme = { name: 'Face Liveness Theme', From fd73a9ff778b6c1c4d22599241c0c08b8dc7156f Mon Sep 17 00:00:00 2001 From: je1999 Date: Thu, 22 Jun 2023 16:57:29 -0400 Subject: [PATCH 19/24] [REF] color FaceLivenessDetector --- .../biometric/face-liveness-detector.tsx | 90 ++++++++++++------- src/pages/register/stepper/step2Modal.tsx | 2 +- src/styles/globals.css | 51 +++++++++++ 3 files changed, 108 insertions(+), 35 deletions(-) diff --git a/src/components/biometric/face-liveness-detector.tsx b/src/components/biometric/face-liveness-detector.tsx index 8e43ef16..0d0d2c7f 100644 --- a/src/components/biometric/face-liveness-detector.tsx +++ b/src/components/biometric/face-liveness-detector.tsx @@ -1,5 +1,5 @@ import { FaceLivenessDetector } from '@aws-amplify/ui-react-liveness'; -import { Loader, Theme, ThemeProvider, useTheme } from '@aws-amplify/ui-react'; +import { Loader, ThemeProvider } from '@aws-amplify/ui-react'; import React from 'react'; import { useState, useEffect } from 'react'; @@ -8,7 +8,6 @@ import { useSnackbar } from '@/components/elements/alert'; import { defaultLivenessDisplayText } from './displayText'; export function LivenessQuickStartReact({ handleNextForm, cedula }: any) { - // const { tokens } = useTheme(); const next = handleNextForm; const id = cedula; @@ -56,43 +55,13 @@ export function LivenessQuickStartReact({ handleNextForm, cedula }: any) { if (error) { AlertError('No se ha podido validar correctamente la identidad.'); } - // TODO: AlertError is causing re-rendering issues. But not adding it causes eslint error. + // TODO: AlertError is causing re-rendering issues. But not adding it causes eslint error. }, [error]); - const theme: Theme = { - name: 'Face Liveness Theme', - tokens: { - colors: { - background: { - primary: { - // value: tokens.colors.neutral['90'].value, - value: '#fff', - }, - secondary: { - // value: tokens.colors.neutral['100'].value, - value: '#000', - }, - }, - font: { - primary: { - // value: tokens.colors.white.value, - value: '#000', - }, - }, - brand: { - primary: { - '80': '#003876', - '90': '#003876', - }, - }, - }, - }, - }; - return ( <>
- + {loading ? ( ) : ( @@ -105,6 +74,59 @@ export function LivenessQuickStartReact({ handleNextForm, cedula }: any) { onAnalysisComplete={handleAnalysisComplete} disableInstructionScreen={false} displayText={defaultLivenessDisplayText} + // components={{ + // Header: () => { + // return ( + // + // Verificación de vida + // + // Pasará por un proceso de verificación facial para demostrar que es una persona real. + // + // + // ); + // }, + // PhotosensitiveWarning: (): JSX.Element => { + // return ( + // + // Esta verificación muestra luces de colores. Tenga cuidado si es fotosensible. + // + // ); + // }, + // Instructions: (): JSX.Element => { + // return ( + // + // Siga las instrucciones para completar la verificación: + //
    + //
  1. + // Cuando aparezca un óvalo, rellena el óvalo con tu cara en 7 segundos. + //
    2. + //
  2. + // Maximiza el brillo de tu pantalla. + //
    3. + //
  3. + // Asegúrese de que su cara no esté cubierta con gafas de sol o una máscara. + //
    4. + //
  4. + // Muévase a un lugar bien iluminado que no esté expuesto a la luz solar directa. + //
    5. + //
+ // + // ); + // }, + // // ErrorView: ({ children }) => { + // // return ( + // // + // // Error + // // {children} + // // + // // ); + // // }, + // }} /> ) )} diff --git a/src/pages/register/stepper/step2Modal.tsx b/src/pages/register/stepper/step2Modal.tsx index e9fda7d1..ddfbb28d 100644 --- a/src/pages/register/stepper/step2Modal.tsx +++ b/src/pages/register/stepper/step2Modal.tsx @@ -59,7 +59,7 @@ export default function Step2Modal({
Date: Thu, 22 Jun 2023 21:15:23 -0400 Subject: [PATCH 20/24] fix(css): issues betweeen yarn `build` and `start` --- .../biometric/face-liveness-detector.tsx | 1 - src/components/elements/button/index.tsx | 1 - src/pages/register/stepper/step2.tsx | 2 - src/styles/globals.css | 50 +++++++++++-------- 4 files changed, 28 insertions(+), 26 deletions(-) diff --git a/src/components/biometric/face-liveness-detector.tsx b/src/components/biometric/face-liveness-detector.tsx index 0d0d2c7f..711f77c4 100644 --- a/src/components/biometric/face-liveness-detector.tsx +++ b/src/components/biometric/face-liveness-detector.tsx @@ -8,7 +8,6 @@ import { useSnackbar } from '@/components/elements/alert'; import { defaultLivenessDisplayText } from './displayText'; export function LivenessQuickStartReact({ handleNextForm, cedula }: any) { - const next = handleNextForm; const id = cedula; const [loading, setLoading] = useState(true); diff --git a/src/components/elements/button/index.tsx b/src/components/elements/button/index.tsx index fc77e99e..5648ffc1 100644 --- a/src/components/elements/button/index.tsx +++ b/src/components/elements/button/index.tsx @@ -40,7 +40,6 @@ interface IButtonApp { } export const ButtonApp = ({ - outlined, disabled, variant = 'contained', submit, diff --git a/src/pages/register/stepper/step2.tsx b/src/pages/register/stepper/step2.tsx index 161d3db0..3f4a0943 100644 --- a/src/pages/register/stepper/step2.tsx +++ b/src/pages/register/stepper/step2.tsx @@ -5,11 +5,9 @@ import { useCallback, useState } from 'react'; import { Box, - Button, FormControlLabel, FormGroup, Checkbox, - Grid, Typography, } from '@mui/material'; import Step2Modal from './step2Modal'; diff --git a/src/styles/globals.css b/src/styles/globals.css index 69840144..8c3dc653 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -1,61 +1,64 @@ -@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600&display=swap"); +/* Variables */ +:root { + --primary-color: #003876; + --success-color: #2ecc71; + --secondary-color: #0087ff; + --error-color: #ee2a24; + --info-color: #23c3df; +} +/* Global styles */ body { - font-family: Poppins, sans-serif; - background-image: url("../../public/assets/forma.png") !important; + font-family: 'Poppins', sans-serif; + background-image: url('../../public/assets/forma.png'); background-repeat: no-repeat; background-position: right; background-size: 300px; } -.swal2-container { - z-index: 1600 !important; -} - -.text-bold { - font-weight: bold; -} - +/* Text utility classes */ .text-primary { - color: #003876; + color: var(--primary-color); } .text-success { - color: #2ecc71; + color: var(--success-color); } .text-secondary { - color: #0087ff; + color: var(--secondary-color); } .text-error { - color: #ee2a24; + color: var(--error-color); } .text-info { - color: #23c3df; + color: var(--info-color); } +/* Background utility classes */ .bg-primary { - background: #003876; + background: var(--primary-color); } .bg-success { - background: #2ecc71; + background: var(--success-color); } .bg-secondary { - background: #0087ff; + background: var(--secondary-color); } .bg-error { - background: #ee2a24; + background: var(--error-color); } .bg-info { - background: #23c3df; + background: var(--info-color); } +/* Padding utility classes */ .p-1 { padding: 5px; } @@ -148,7 +151,9 @@ body { background: #b8cef9 !important; } -.amplify-alert__heading, .amplify-alert__body, .amplify-icon { +.amplify-alert__heading, +.amplify-alert__body, +.amplify-icon { color: #003876; } @@ -161,6 +166,7 @@ body { border: 1px solid #003876; color: #003876; } + .amplify-button:hover { background: #e3e3e3; color: #003876; From 35ddcb65a5c0152d3c0c5d2a115a17d33bd05ef5 Mon Sep 17 00:00:00 2001 From: Gustavo Valverde Date: Thu, 22 Jun 2023 21:19:04 -0400 Subject: [PATCH 21/24] chore: remove unused code --- .../biometric/face-liveness-detector.tsx | 53 ------------------- 1 file changed, 53 deletions(-) diff --git a/src/components/biometric/face-liveness-detector.tsx b/src/components/biometric/face-liveness-detector.tsx index 711f77c4..03c0d5ba 100644 --- a/src/components/biometric/face-liveness-detector.tsx +++ b/src/components/biometric/face-liveness-detector.tsx @@ -73,59 +73,6 @@ export function LivenessQuickStartReact({ handleNextForm, cedula }: any) { onAnalysisComplete={handleAnalysisComplete} disableInstructionScreen={false} displayText={defaultLivenessDisplayText} - // components={{ - // Header: () => { - // return ( - // - // Verificación de vida - // - // Pasará por un proceso de verificación facial para demostrar que es una persona real. - // - // - // ); - // }, - // PhotosensitiveWarning: (): JSX.Element => { - // return ( - // - // Esta verificación muestra luces de colores. Tenga cuidado si es fotosensible. - // - // ); - // }, - // Instructions: (): JSX.Element => { - // return ( - // - // Siga las instrucciones para completar la verificación: - //
    - //
  1. - // Cuando aparezca un óvalo, rellena el óvalo con tu cara en 7 segundos. - //
    2. - //
  2. - // Maximiza el brillo de tu pantalla. - //
    3. - //
  3. - // Asegúrese de que su cara no esté cubierta con gafas de sol o una máscara. - //
    4. - //
  4. - // Muévase a un lugar bien iluminado que no esté expuesto a la luz solar directa. - //
    5. - //
- // - // ); - // }, - // // ErrorView: ({ children }) => { - // // return ( - // // - // // Error - // // {children} - // // - // // ); - // // }, - // }} /> ) )} From 56e00a85747d4d6d81f430c2c4ebc10ad036110c Mon Sep 17 00:00:00 2001 From: Gustavo Valverde Date: Thu, 22 Jun 2023 21:22:12 -0400 Subject: [PATCH 22/24] chore(css): missing variables --- src/styles/globals.css | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/styles/globals.css b/src/styles/globals.css index 8c3dc653..63668751 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -154,7 +154,7 @@ body { .amplify-alert__heading, .amplify-alert__body, .amplify-icon { - color: #003876; + color: var(--primary-color); } .amplify-text { @@ -164,27 +164,27 @@ body { .amplify-button { background: white; border: 1px solid #003876; - color: #003876; + color: var(--primary-color); } .amplify-button:hover { background: #e3e3e3; - color: #003876; + color: var(--primary-color); border: 1px solid #003876; } [data-amplify-theme] { - /* --amplify-colors-background-primary: #003876; */ + /* --amplify-colors-background-primary: var(--primary-color); */ --amplify-colors-font-primary: white; - /* --amplify-colors-brand-primary-10: #003876; */ - /* --amplify-colors-brand-primary-80: #003876; - --amplify-colors-brand-primary-90: #003876; - --amplify-colors-brand-primary-100: #003876; */ + /* --amplify-colors-brand-primary-10: var(--primary-color); */ + /* --amplify-colors-brand-primary-80: var(--primary-color); + --amplify-colors-brand-primary-90: var(--primary-color); + --amplify-colors-brand-primary-100: var(--primary-color); */ } .amplify-liveness-instruction-overlay div .amplify-liveness-toast { background: white; - color: #003876; + color: var(--primary-color); } .amplify-liveness-toast__message div p { From 6339337e023d3ebd5c08259a80a2b9357f323050 Mon Sep 17 00:00:00 2001 From: Gustavo Valverde Date: Thu, 22 Jun 2023 21:46:36 -0400 Subject: [PATCH 23/24] fix(liveness): regressive count --- src/styles/globals.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/styles/globals.css b/src/styles/globals.css index 63668751..08cecbaa 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -158,7 +158,8 @@ body { } .amplify-text { - color: white !important; + /* TODO: this is to fix regresive count, but this is not the right approach*/ + color: rgb(211, 211, 211) !important; } .amplify-button { From 1ada35cb27ac17dd9dcb01152e41cf921fd73889 Mon Sep 17 00:00:00 2001 From: Gustavo Valverde Date: Thu, 22 Jun 2023 21:54:48 -0400 Subject: [PATCH 24/24] fix(liveness): center faces --- src/styles/globals.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/styles/globals.css b/src/styles/globals.css index 08cecbaa..ec33df3d 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -183,6 +183,10 @@ body { --amplify-colors-brand-primary-100: var(--primary-color); */ } +.amplify-flex.amplify-liveness-figures { + margin: 0 auto; +} + .amplify-liveness-instruction-overlay div .amplify-liveness-toast { background: white; color: var(--primary-color);