refactor: improve steps UI/UX, fix Luhn algorithm

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",
@@ -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"
   },

src/components/biometric/face-liveness-detector.tsx

@@ -1,12 +1,15 @@
 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';
 
 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<boolean>(true);
@@ -53,12 +56,43 @@ 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',
+    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 (
     <>
       <br />
-      <ThemeProvider>
+      <ThemeProvider theme={theme}>
         {loading ? (
           <Loader />
         ) : (

src/components/elements/alert/index.tsx

@@ -36,7 +36,7 @@ export const SnackbarProvider = ({ children }: SnackbarProviderProps) => {
     <SnackbarContext.Provider value={{ openSnackbar }}>
       <Snackbar
         open={snackbarConfig.open}
-        autoHideDuration={6000}
+        autoHideDuration={4000}
         onClose={closeSnackbar}
       >
         <MuiAlert

src/components/elements/boxContentCenter/index.tsx

@@ -1,17 +1,17 @@
-import Box from "@mui/material/Box";
+import Box from '@mui/material/Box';
 
 export default function BoxContentCenter({ children }: any) {
   return (
     <Box
       sx={{
-        width: "100%",
-        // height: `calc(100vh - 199px)`,
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
+        width: '100%',
+        minHeight: `calc(100vh - 630px)`,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
       }}
     >
-      <Box sx={{ width: "100%", maxWidth: "560px", padding: "0 10px" }}>
+      <Box sx={{ width: '100%', maxWidth: '560px', padding: '0 10px' }}>
         {children}
       </Box>
     </Box>

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}
     </Button>
@@ -26,47 +26,43 @@ interface IButtonApp {
   notFullWidth?: boolean;
   children: React.ReactNode;
   startIcon?: any;
-  size?: "small" | "medium" | "large" | undefined;
+  endIcon?: any;
+  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,
 }: IButtonApp) => {
   return (
     <Button
       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}
     >
       {children}
     </Button>

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;
@@ -18,10 +18,10 @@ export const GridContainer = ({
 }: IPropsContainer) => (
   <Grid
     container
-    spacing={spacing ? spacing : 1}
+    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}

src/components/elements/passwordLevel/index.tsx

@@ -1,15 +1,77 @@
 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 ? (
-    <>
+    <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' }}
+        />
+        <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>
+
       <div
         style={{
           width: '100%',
           display: 'flex',
-          gap: '6.66%',
+          gap: '2%',
           marginBottom: '12px',
+          marginTop: '10px',
         }}
       >
         {passwordLevel.id >= 0 && (
@@ -22,36 +84,30 @@ export default function PasswordLevel({ passwordLevel }: any) {
             }}
           />
         )}
-        {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
+          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' }}
@@ -62,6 +118,6 @@ export default function PasswordLevel({ passwordLevel }: any) {
         {passwordLevel.id === 2 && ' Medio'}
         {passwordLevel.id === 3 && ' Fuerte'}
       </Typography>
-    </>
+    </div>
   ) : null;
 }

src/components/layout/footer.tsx

@@ -101,11 +101,12 @@ export default function Index() {
                   Desarrollado por
                 </Typography>
                 <Image
-                  style={{ marginBottom: "-10px", marginLeft: "5px" }}
+                  style={{ marginBottom: "-10px", marginLeft: "5px", cursor: "pointer" }}
                   src={logoOGTIC.src}
                   alt="logo ogtic"
                   width="55"
                   height="29"
+                  onClick={() => window.open("https://ogtic.gob.do/")}
                 />
               </div>
             </GridItem>

src/components/layout/navBar.tsx

@@ -23,7 +23,7 @@ export default function Index() {
               <div style={{ flexGrow: 1, paddingTop: '8px' }}>
                 <Link
                   href={
-                    'https://beta.auth.digital.gob.do/realms/master/account'
+                    '/'
                   }
                 >
                   <Image src={Logo.src} alt="logo" width="200" height="48" />