eagle-id
Version:
A React based component to perform identity verification
333 lines (327 loc) • 9.44 kB
JavaScript
import { SCREEN_WIDTH, SCREEN_HEIGHT } from './constants'
export const defaultConfig = {
"baseUrl": "https://api.eyn.ninja/api/v1/prod/identitycheck",
"apiSecret": "public-e692d869-c110-4a33-b003-2098a5e04f72",
"privacy": {
"show": true,
"notice": "https://www.eyn.vision/privacynotice",
},
"title": "Eagle ID powered by EYN",
"ui": {
"documentTitle": "Select Your Document Type",
"documentSubTitle": "",
},
"camera": {
"imageFormat": "image/jpeg",
"ui": {
"idFront": {
"scanLabel": "Scan the FRONT SIDE of your document",
"infoLabel": "Place it within the frame and press the camera button",
"scanNumber": "Scan 1/2"
},
"idBack": {
"scanLabel": "Scan the BACK SIDE of your document",
"infoLabel": "Place it within the frame and press the camera button",
"scanNumber": "Scan 2/2"
},
"visa": {
"scanLabel": "Scan your VISA document",
"infoLabel": "Place it within the frame and press the camera button",
"scanNumber": ""
},
"passport": {
"scanLabel": "Scan the FRONT PAGE of your PASSPORT document",
"infoLabel": "Please make sure to only include the main page containing the passport photo",
"scanNumber": ""
},
"other": {
"scanLabel": "Scan your document",
"infoLabel": "Place it within the frame and press the camera button",
"scanNumber": ""
},
"selfie": {
"scanLabel": "Send us a smile",
"infoLabel": "Place it within the frame and\n press the camera button",
"scanNumber": ""
},
}
},
"resources": {
"images": {
"logo": "./resources/images/logo.png",
"logoTitle": "./resources/images/logo-title.png",
"privacy": "./resources/images/privacy-notice.png",
"icon_passport": "./resources/images/type_passport.svg",
"icon_id": "./resources/images/type_identity_card.svg",
"icon_other": "./resources/images/identity_type_other.svg",
"icon_camera": "./resources/images/camera.svg",
"image_selfie": "./resources/images/selfie_instruc.svg",
"overlay_document_web": "./resources/images/overlay_document.svg",
"overlay_document_mobile": "./resources/images/overlay_document_mobile.svg",
"overlay_selfie_web": "./resources/images/overlay_selfie.svg",
"overlay_selfie_mobile": "./resources/images/overlay_selfie_mobile.svg",
},
"animations": {
"passport": "./resources/animations/scan_passport.json",
"idfront": "./resources/animations/scan_document_front.json",
"idback": "./resources/animations/scan_document_back.json",
"status_good": "./resources/animations/verify_status_good.json",
"loading": "./resources/animations/loading_coffee.json",
}
}
}
export var eynFontSize = () => {
let width = window.outerWidth
/* iphone SE, 5, 5s, 5c, < */
if(width <= 320) {
return {
large: 22.0,
regular: 17.0
}
}
/* iphone 6, 6s, 7, 8, 11 Pro, X, Xs */
if(width > 320 && width <= 375) {
return {
large: 24.0,
regular: 19.0
}
}
/* iphone 11 Pro Max, Xs Max, 11, Xr, 6+, 6s+, 7+, 8+, web */
if(width >= 375) {
return {
large: 26.0,
regular: 21.0
}
}
}
export var defaultStyles = {
title: {
color: '#05294B',
marginTop: 25,
fontSize: eynFontSize().large,
fontFamily: "'Raleway', 'Roboto', 'Helvetica', 'Arial', sans-serif",
marginLeft: 10,
marginRight: 10,
},
subTitle: {
color: '#05294B',
fontSize: eynFontSize().regular,
fontFamily: "'Raleway', 'Roboto', 'Helvetica', 'Arial', sans-serif",
marginLeft: 10,
marginRight: 10,
},
documentTypes: {
fontSize: eynFontSize().regular,
fontFamily: "'Raleway', 'Roboto', 'Helvetica', 'Arial', sans-serif",
color: 'rgba(5, 41, 75, 1)',
backgroundColor: 'rgba(5, 41, 75, 0.15)',
width: SCREEN_WIDTH - 50,
margin: '0 auto',
borderRadius: 50,
borderColor: 'rgba(5, 41, 75, 0.15)'
},
buttonFilled: {
margin: 2,
fontSize: eynFontSize().regular,
fontFamily: "'Raleway', 'Roboto', 'Helvetica', 'Arial', sans-serif",
color: 'white',
backgroundColor: '#05294B',
borderRadius: 25,
},
buttonOutlined: {
margin: 2,
fontSize: eynFontSize().regular,
fontFamily: "'Raleway', 'Roboto', 'Helvetica', 'Arial', sans-serif",
color: '#05294B',
borderRadius: 25,
borderColor: '#05294B',
},
buttonContent: {
left: 0,
right: 0,
marginLeft: 10,
marginRight: 'auto',
},
container: {
borderStyle: 'solid',
borderWidth: 1,
borderRadius: 5,
borderColor: 'gray',
width: SCREEN_WIDTH,
height: SCREEN_HEIGHT,
position: 'absolute',
left: 0,
right: 0,
marginLeft: 'auto',
marginRight: 'auto',
marginTop: 25,
marginBottom: 25,
boxShadow: '10px 10px 5px grey',
},
header: {
borderStyle: 'solid',
borderWidth: 1,
borderRadius: 5,
borderColor: 'gray',
width: SCREEN_WIDTH,
position: 'absolute',
top: -1,
left: -1,
right: 0,
marginLeft: 'auto',
marginRight: 'auto',
color: 'white',
backgroundColor: '#05294B',
marginBottom: 25,
height: 50,
fontSize: eynFontSize().large,
fontFamily: "'Raleway', 'Roboto', 'Helvetica', 'Arial', sans-serif",
},
videoStream: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
marginLeft: 'auto',
marginRight: 'auto',
display: 'block',
backgroundColor: 'transparent',
},
camera: {
position: 'absolute',
left: 0,
right: 0,
bottom: 25,
marginLeft: 'auto',
marginRight: 'auto',
backgroundColor: 'transparent',
},
cameraIcon: {
backgroundColor: "transparent",
"&:hover": {
backgroundColor: "transparent"
},
fontSize: 50
},
progress: {
size: 50,
color: "white"
},
overlay: {
position: 'relative',
margin: 'auto',
backgroundColor: 'transparent',
top: 0,
display: 'block',
marginLeft: 0,
paddingLeft: 0,
marginRight: 0,
paddingRight: 0,
},
refresh: {
position: 'absolute',
left: 0,
right: 25,
bottom: 25,
marginLeft: 'auto',
marginRight: 0,
backgroundColor: '#05294B'
},
lottie: {
position: 'absolute',
left: 0,
right: 0,
top: 25,
marginLeft: 'auto',
marginRight: 'auto',
},
cameraLabels: {
position: 'absolute',
left: 0,
right: 0,
bottom: 75,
marginLeft: 'auto',
marginRight: 'auto',
},
loading: {
color: 'secondary',
},
label: {
color: 'white',
top: 0,
bottom: 0,
left: 0,
right: 0,
margin: 'auto',
marginLeft: 'auto',
marginRight: 'auto',
width: '100',
fontSize: eynFontSize().large,
fontFamily: "'Raleway', 'Roboto', 'Helvetica', 'Arial', sans-serif",
},
info: {
color: 'white',
top: 0,
bottom: 0,
left: 0,
right: 0,
margin: 'auto',
marginLeft: 'auto',
marginRight: 'auto',
width: '100',
fontSize: eynFontSize().regular,
fontFamily: "'Raleway', 'Roboto', 'Helvetica', 'Arial', sans-serif",
},
scan: {
color: 'white',
top: 0,
bottom: 0,
left: 0,
right: 0,
margin: 'auto',
marginLeft: 'auto',
marginRight: 'auto',
width: '100',
fontSize: eynFontSize().regular,
fontFamily: "'Raleway', 'Roboto', 'Helvetica', 'Arial', sans-serif",
},
images: {
position: 'relative',
marginLeft: 25,
marginRight: 25,
marginTop: 75,
marginBottom: 5,
width: SCREEN_WIDTH - 50,
borderRadius: 10,
boxShadow: '5px 5px 5px grey',
},
text: {
color: '#05294B',
fontSize: eynFontSize().regular,
fontFamily: "'Raleway', 'Roboto', 'Helvetica', 'Arial', sans-serif",
},
textGray: {
color: 'gray',
fontSize: eynFontSize().regular,
fontFamily: "'Raleway', 'Roboto', 'Helvetica', 'Arial', sans-serif",
marginBottom: -10,
marginLeft: 25,
marginRight: 25,
textAlign: 'left',
},
list: {
color: 'gray',
fontSize: eynFontSize().regular,
fontFamily: "'Raleway', 'Roboto', 'Helvetica', 'Arial', sans-serif",
textAlign: 'left',
position: 'relative',
left: 0,
right: 0,
marginLeft: 'auto',
marginRight: 'auto',
display: 'inline-block'
},
checkBox: {
color: '#05294B',
}
}