-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor(ui): fix responsiveness, images and text
* [REF] ui/ux * add: rekognito and amplify implementation * add: liveness and face match implementation * fix: optional payload * add: `disableInstructionScreen` props to component * [REF] ui/ux and i18n --------- Co-authored-by: Marluan Espiritusanto <marluanespiritusantoguerrero@gmail.com>
- Loading branch information
1 parent
29037bb
commit 76776c7
Showing
20 changed files
with
458 additions
and
196 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,125 @@ | ||
| 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 {} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| import CircularProgress from '@mui/material/CircularProgress'; | ||
| import Box from '@mui/material/Box'; | ||
|
|
||
| export const LoadingProgress = () => { | ||
| return ( | ||
| <Box sx={{ display: 'flex', justifyContent: 'center' }}> | ||
| <CircularProgress color='info' /> | ||
| </Box> | ||
| ); | ||
| } |
Oops, something went wrong.