refactor: multiple fixes

.eslintrc.json

@@ -1,3 +1,24 @@
 {
-  "extends": "next/core-web-vitals"
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": [
+    "plugin:@typescript-eslint/recommended",
+    "next",
+    "next/core-web-vitals",
+    "prettier"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 12,
+    "sourceType": "module"
+  },
+  "rules": {
+    "@typescript-eslint/no-explicit-any": "off"
+  },
+  "plugins": ["@typescript-eslint"]
 }

.github/dependabot.yml

@@ -1,15 +1,15 @@
 version: 2
 updates:
-  - package-ecosystem: 'npm'
-    directory: '/'
+  - package-ecosystem: "npm"
+    directory: "/"
     target-branch: main
     schedule:
-      interval: 'weekly'
+      interval: "weekly"
     open-pull-requests-limit: 20
     commit-message:
-      prefix: 'deps'
-      
+      prefix: "deps"
+
   - package-ecosystem: "github-actions"
     directory: "/"
     schedule:
-      interval: "weekly"
+      interval: "weekly"

.prettierrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  printWidth: 80,
+  semi: true,
+  singleQuote: true,
+  tabWidth: 2,
+  useTabs: false,
+};

.vscode/launch.json

@@ -0,0 +1,28 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Next.js: debug server-side",
+      "type": "node-terminal",
+      "request": "launch",
+      "command": "yarn run dev"
+    },
+    {
+      "name": "Next.js: debug client-side",
+      "type": "chrome",
+      "request": "launch",
+      "url": "http://localhost:3000"
+    },
+    {
+      "name": "Next.js: debug full stack",
+      "type": "node-terminal",
+      "request": "launch",
+      "command": "yarn run dev",
+      "serverReadyAction": {
+        "pattern": "started server on .+, url: (https?://.+)",
+        "uriFormat": "%s",
+        "action": "debugWithChrome"
+      }
+    }
+  ]
+}

audit-ci.jsonc

@@ -1,16 +1,16 @@
 {
-    // audit-ci supports reading JSON, JSONC, and JSON5 config files.
-    // 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"].
-    "low": true,
-    "allowlist": [
-      {
-        "GHSA-9c47-m6qq-7p4h|eslint-plugin-import>tsconfig-paths>json5": {
-          "active": true, // This field is optional and defaults to true.
-          "expiry": "", // There's no need to set an expiry date because we are unaffected.
-          "notes": "Transitive development-only dependency for linting doesn't impact the security of this application in production or for developers."
-        }
+  // audit-ci supports reading JSON, JSONC, and JSON5 config files.
+  // 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"].
+  "low": true,
+  "allowlist": [
+    {
+      "GHSA-9c47-m6qq-7p4h|eslint-plugin-import>tsconfig-paths>json5": {
+        "active": true, // This field is optional and defaults to true.
+        "expiry": "", // There's no need to set an expiry date because we are unaffected.
+        "notes": "Transitive development-only dependency for linting doesn't impact the security of this application in production or for developers."
       }
-    ]
-  }
+    }
+  ]
+}

package.json

@@ -24,7 +24,7 @@
     "aws-amplify": "^5.1.4",
     "axios": "^1.4.0",
     "cookie": "^0.5.0",
-    "eslint": "8.35.0",
+    "eslint": "^8.40.0",
     "eslint-config-next": "13.2.3",
     "next": "13.2.3",
     "prop-types": ">=15.7.0",
@@ -39,11 +39,17 @@
     "yup": "0.32.11"
   },
   "devDependencies": {
-    "@types/axios": "^0.14.0",
     "@types/cookie": "^0.5.1",
     "@types/node": "^18.16.3",
     "@types/react": "^18.2.1",
     "@types/react-dom": "^18.2.2",
-    "@types/react-google-recaptcha": "^2.1.5"
+    "@types/react-google-recaptcha": "^2.1.5",
+    "@typescript-eslint/eslint-plugin": "^5.59.5",
+    "@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-prettier": "^4.2.1",
+    "prettier": ">=2.0.0"
   }
 }

src/components/biometric/displayText.ts

@@ -1,125 +1,128 @@
 export type HintDisplayText = {
-    hintMoveFaceFrontOfCameraText?: string;
-    hintTooManyFacesText?: string;
-    hintFaceDetectedText?: string;
-    hintCanNotIdentifyText?: string;
-    hintTooCloseText?: string;
-    hintTooFarText?: string;
-    hintHoldFacePositionCountdownText?: string;
-    hintConnectingText?: string;
-    hintVerifyingText?: string;
-    hintIlluminationTooBrightText?: string;
-    hintIlluminationTooDarkText?: string;
-    hintIlluminationNormalText?: string;
-    hintHoldFaceForFreshnessText?: string;
-  };
-
-  export type CameraDisplayText = {
-    cameraMinSpecificationsHeadingText?: string;
-    cameraMinSpecificationsMessageText?: string;
-    cameraNotFoundHeadingText?: string;
-    cameraNotFoundMessageText?: string;
-    retryCameraPermissionsText?: string;
-  };
-
-  export type InstructionDisplayText = {
-    instructionsHeaderHeadingText?: string;
-    instructionsHeaderBodyText?: string;
-    instructionsBeginCheckText?: string;
-    photosensitivyWarningHeadingText?: string;
-    photosensitivyWarningBodyText?: string;
-    photosensitivyWarningInfoText?: string;
-    instructionListHeadingText?: string;
-    goodFitCaptionText?: string;
-    goodFitAltText?: string;
-    tooFarCaptionText?: string;
-    tooFarAltText?: string;
-    instructionListStepOneText?: string;
-    instructionListStepTwoText?: string;
-    instructionListStepThreeText?: string;
-    instructionListStepFourText?: string;
-  };
-
-  export type StreamDisplayText = {
-    recordingIndicatorText?: string;
-    cancelLivenessCheckText?: string;
-  };
-
-  export const defaultErrorDisplayText = {
-    timeoutHeaderText: 'Se acabó el tiempo',
-    timeoutMessageText:
-      "La cara no llenó el óvalo dentro del límite de tiempo. Vuelva a intentarlo y llene completamente el óvalo con la cara en 7 segundos.",
-    faceDistanceHeaderText: 'Comprobación fallida durante la cuenta atrás',
-    faceDistanceMessageText:
-      'Evite acercarse durante la cuenta regresiva y asegúrese de que solo una cara esté frente a la cámara.',
-    clientHeaderText: 'Error del cliente',
-    clientMessageText: 'Verificación fallida debido a un problema con el cliente',
-    serverHeaderText: 'Problema del servidor',
-    serverMessageText: 'No se puede completar la verificación debido a un problema con el servidor',
-    landscapeHeaderText: 'Orientación horizontal no compatible',
-    landscapeMessageText:
-      'Gire su dispositivo a la orientación vertical (retrato).',
-    portraitMessageText:
-      'Asegúrese de que su dispositivo permanezca en orientación vertical (retrato) durante la verificación.',
-    tryAgainText: 'Intentar otra vez',
-  };
-
-  export type ErrorDisplayTextFoo = typeof defaultErrorDisplayText;
-  export type ErrorDisplayText = Partial<ErrorDisplayTextFoo>;
-
-  export const defaultLivenessDisplayText: Required<LivenessDisplayText> = {
-    instructionsHeaderHeadingText: 'Liveness check',
-    instructionsHeaderBodyText:
-      'You will go through a face verification process to prove that you are a real person.',
-    instructionsBeginCheckText: 'Begin check',
-    photosensitivyWarningHeadingText: 'Photosensitivity warning',
-    photosensitivyWarningBodyText:
-      'This check displays colored lights. Use caution if you are photosensitive.',
-    photosensitivyWarningInfoText:
-      'A small percentage of individuals may experience epileptic seizures when exposed to colored lights. Use caution if you, or anyone in your family, have an epileptic condition.',
-    instructionListHeadingText: 'Follow the instructions to complete the check:',
-    goodFitCaptionText: 'Good fit',
-    goodFitAltText:
-      "Ilustration of a person's face, perfectly fitting inside of an oval.",
-    tooFarCaptionText: 'Too far',
-    tooFarAltText:
-      "Illustration of a person's face inside of an oval; there is a gap between the perimeter of the face and the boundaries of the oval.",
-    instructionListStepOneText:
-      'When an oval appears, fill the oval with your face within 7 seconds.',
-    instructionListStepTwoText: "Maximize your screen's brightness.",
-    instructionListStepThreeText:
-      'Make sure your face is not covered with sunglasses or a mask.',
-    instructionListStepFourText:
-      'Move to a well-lit place that is not in direct sunlight.',
-    cameraMinSpecificationsHeadingText:
-      'Camera does not meet minimum specifications',
-    cameraMinSpecificationsMessageText:
-      'Camera must support at least 320*240 resolution and 15 frames per second.',
-    cameraNotFoundHeadingText: 'Camera not accessible.',
-    cameraNotFoundMessageText:
-      'Verifique que la cámara esté conectada y que los permisos de la cámara estén habilitados en la configuración antes de volver a intentarlo.',
-    retryCameraPermissionsText: 'Procesar de nuevo',
-    cancelLivenessCheckText: 'Cancelar comprobación de vitalidad',
-    recordingIndicatorText: 'Grabación',
-    hintMoveFaceFrontOfCameraText: 'Mover la cara frente a la cámara',
-    hintTooManyFacesText: 'Asegúrese de que solo una cara esté frente a la cámara',
-    hintFaceDetectedText: 'Cara detectada',
-    hintCanNotIdentifyText: 'Mover la cara frente a la cámara',
-    hintTooCloseText: 'Muévete mas atrás',
-    hintTooFarText: 'Muévete mas cerca',
-    hintHoldFacePositionCountdownText: 'Mantener la posición de la cara durante la cuenta regresiva',
-    hintConnectingText: 'Conectando...',
-    hintVerifyingText: 'Verificando...',
-    hintIlluminationTooBrightText: 'Mover al área de atenuación',
-    hintIlluminationTooDarkText: 'Mover a un área más brillante',
-    hintIlluminationNormalText: 'Condiciones de iluminación normales',
-    hintHoldFaceForFreshnessText: 'Quédate quieto',
-    ...defaultErrorDisplayText,
-  };
-
-  export interface LivenessDisplayText
-    extends HintDisplayText,
-      CameraDisplayText,
-      InstructionDisplayText,
-      ErrorDisplayText,
-      StreamDisplayText {}
+  hintMoveFaceFrontOfCameraText?: string;
+  hintTooManyFacesText?: string;
+  hintFaceDetectedText?: string;
+  hintCanNotIdentifyText?: string;
+  hintTooCloseText?: string;
+  hintTooFarText?: string;
+  hintHoldFacePositionCountdownText?: string;
+  hintConnectingText?: string;
+  hintVerifyingText?: string;
+  hintIlluminationTooBrightText?: string;
+  hintIlluminationTooDarkText?: string;
+  hintIlluminationNormalText?: string;
+  hintHoldFaceForFreshnessText?: string;
+};
+
+export type CameraDisplayText = {
+  cameraMinSpecificationsHeadingText?: string;
+  cameraMinSpecificationsMessageText?: string;
+  cameraNotFoundHeadingText?: string;
+  cameraNotFoundMessageText?: string;
+  retryCameraPermissionsText?: string;
+};
+
+export type InstructionDisplayText = {
+  instructionsHeaderHeadingText?: string;
+  instructionsHeaderBodyText?: string;
+  instructionsBeginCheckText?: string;
+  photosensitivyWarningHeadingText?: string;
+  photosensitivyWarningBodyText?: string;
+  photosensitivyWarningInfoText?: string;
+  instructionListHeadingText?: string;
+  goodFitCaptionText?: string;
+  goodFitAltText?: string;
+  tooFarCaptionText?: string;
+  tooFarAltText?: string;
+  instructionListStepOneText?: string;
+  instructionListStepTwoText?: string;
+  instructionListStepThreeText?: string;
+  instructionListStepFourText?: string;
+};
+
+export type StreamDisplayText = {
+  recordingIndicatorText?: string;
+  cancelLivenessCheckText?: string;
+};
+
+export const defaultErrorDisplayText = {
+  timeoutHeaderText: 'Se acabó el tiempo',
+  timeoutMessageText:
+    'La cara no llenó el óvalo dentro del límite de tiempo. Vuelva a intentarlo y llene completamente el óvalo con la cara en 7 segundos.',
+  faceDistanceHeaderText: 'Comprobación fallida durante la cuenta atrás',
+  faceDistanceMessageText:
+    'Evite acercarse durante la cuenta regresiva y asegúrese de que solo una cara esté frente a la cámara.',
+  clientHeaderText: 'Error del cliente',
+  clientMessageText: 'Verificación fallida debido a un problema con el cliente',
+  serverHeaderText: 'Problema del servidor',
+  serverMessageText:
+    'No se puede completar la verificación debido a un problema con el servidor',
+  landscapeHeaderText: 'Orientación horizontal no compatible',
+  landscapeMessageText:
+    'Gire su dispositivo a la orientación vertical (retrato).',
+  portraitMessageText:
+    'Asegúrese de que su dispositivo permanezca en orientación vertical (retrato) durante la verificación.',
+  tryAgainText: 'Intentar otra vez',
+};
+
+export type ErrorDisplayTextFoo = typeof defaultErrorDisplayText;
+export type ErrorDisplayText = Partial<ErrorDisplayTextFoo>;
+
+export const defaultLivenessDisplayText: Required<LivenessDisplayText> = {
+  instructionsHeaderHeadingText: 'Liveness check',
+  instructionsHeaderBodyText:
+    'You will go through a face verification process to prove that you are a real person.',
+  instructionsBeginCheckText: 'Begin check',
+  photosensitivyWarningHeadingText: 'Photosensitivity warning',
+  photosensitivyWarningBodyText:
+    'This check displays colored lights. Use caution if you are photosensitive.',
+  photosensitivyWarningInfoText:
+    'A small percentage of individuals may experience epileptic seizures when exposed to colored lights. Use caution if you, or anyone in your family, have an epileptic condition.',
+  instructionListHeadingText: 'Follow the instructions to complete the check:',
+  goodFitCaptionText: 'Good fit',
+  goodFitAltText:
+    "Ilustration of a person's face, perfectly fitting inside of an oval.",
+  tooFarCaptionText: 'Too far',
+  tooFarAltText:
+    "Illustration of a person's face inside of an oval; there is a gap between the perimeter of the face and the boundaries of the oval.",
+  instructionListStepOneText:
+    'When an oval appears, fill the oval with your face within 7 seconds.',
+  instructionListStepTwoText: "Maximize your screen's brightness.",
+  instructionListStepThreeText:
+    'Make sure your face is not covered with sunglasses or a mask.',
+  instructionListStepFourText:
+    'Move to a well-lit place that is not in direct sunlight.',
+  cameraMinSpecificationsHeadingText:
+    'Camera does not meet minimum specifications',
+  cameraMinSpecificationsMessageText:
+    'Camera must support at least 320*240 resolution and 15 frames per second.',
+  cameraNotFoundHeadingText: 'Camera not accessible.',
+  cameraNotFoundMessageText:
+    'Verifique que la cámara esté conectada y que los permisos de la cámara estén habilitados en la configuración antes de volver a intentarlo.',
+  retryCameraPermissionsText: 'Procesar de nuevo',
+  cancelLivenessCheckText: 'Cancelar comprobación de vitalidad',
+  recordingIndicatorText: 'Grabación',
+  hintMoveFaceFrontOfCameraText: 'Mover la cara frente a la cámara',
+  hintTooManyFacesText:
+    'Asegúrese de que solo una cara esté frente a la cámara',
+  hintFaceDetectedText: 'Cara detectada',
+  hintCanNotIdentifyText: 'Mover la cara frente a la cámara',
+  hintTooCloseText: 'Muévete mas atrás',
+  hintTooFarText: 'Muévete mas cerca',
+  hintHoldFacePositionCountdownText:
+    'Mantener la posición de la cara durante la cuenta regresiva',
+  hintConnectingText: 'Conectando...',
+  hintVerifyingText: 'Verificando...',
+  hintIlluminationTooBrightText: 'Mover al área de atenuación',
+  hintIlluminationTooDarkText: 'Mover a un área más brillante',
+  hintIlluminationNormalText: 'Condiciones de iluminación normales',
+  hintHoldFaceForFreshnessText: 'Quédate quieto',
+  ...defaultErrorDisplayText,
+};
+
+export interface LivenessDisplayText
+  extends HintDisplayText,
+    CameraDisplayText,
+    InstructionDisplayText,
+    ErrorDisplayText,
+    StreamDisplayText {}