{"version":3,"sources":["components/images/rectangle_overlay_3.png","components/images/oval_overlay_5.png","components/layout/cubemos_logo_final.png","components/layout/header.js","components/pages/overlay.js","components/pages/idUpload.js","components/pages/faceUpload.js","components/pages/horizontalStepper.js","components/pages/verifyPage.js","interfaceVerificationApi.js","App.js","serviceWorker.js","index.js"],"names":["module","exports","useStyles","makeStyles","theme","title","textAlign","color","headerStyle","background","borderBottom","align","height","padding","margin","Header","classes","Fragment","style","position","left","top","src","logo","width","alt","Typography","gutterBottom","variant","component","className","Overlay","props","right","bottom","root","maxWidth","main","display","flexDirection","flexWrap","justifyContent","alignItems","gridItem","flex","button","marginBottom","textTransform","videoConstraints","facingMode","IdUpload","useState","imageWebcam","setImageWebcam","isImageTaken","setisImageTaken","webcamRef","React","useRef","imgElement","Grid","container","item","audio","ref","screenshotFormat","forceScreenshotSourceSize","screenshotQuality","maxHeight","minHeight","rectangle_overlay","Button","key","disabled","onClick","screenshot","current","getScreenshot","image","atob","split","length","imageBytes","ArrayBuffer","ua","Uint8Array","i","charCodeAt","callApp","nextStep","buttonGrid","FaceUpload","oval_overlay","backButton","marginRight","spacing","instructions","marginTop","HorizontalStepper","step","activeStep","setActiveStep","steps","useEffect","handleNext","prevActiveStep","Stepper","alternativeLabel","map","label","Step","StepLabel","imagesContainer","VerifyPage","dimensionsFaceImage","setDimensionsFaceImage","dimensionsIdImage","setDimensionsIdImage","params","boxes","options","colors","normal","selected","unselected","faceImgElement","idImgElement","bBox","images","onLoad","naturalHeight","naturalWidth","verify","retry","Box","borderStyle","borderColor","resultBorder","borderWidth","borderRadius","resultText","extractedText","TextDetections","DetectedText","base_url","trial_api_key","call_verification_api","image_person","image_id","a","body","fetch","method","JSON","stringify","headers","response","json","response_object","Copyright","Link","href","Date","getFullYear","AWS","require","config","region","credentials","CognitoIdentityCredentials","IdentityPoolId","paddingTop","result","paddingLeft","paddingBottom","buttonSubmit","input","footer","backgroundColor","palette","paper","App","imageIDcard","setimageIDcard","imagePerson","setimagePerson","setStep","bBoxes","setBBoxes","setExtractedText","setResultBorder","setResultText","onRetry","String","Number","onSubmit","window","alert","verificationResult","bBoxPerson","bBoxId","Container","imageFromFaceUpload","imageFromIdUpload","Boolean","location","hostname","match","ReactDOM","render","document","getElementById","navigator","serviceWorker","ready","then","registration","unregister","catch","error","console","message"],"mappings":"iIAAAA,EAAOC,QAAU,IAA0B,iD,oBCA3CD,EAAOC,QAAU,IAA0B,4C,uHCA3CD,EAAOC,QAAU,suM,yJCQXC,EAAYC,aAAW,SAAAC,GAAK,MAAK,CACrCC,MAAO,CACLC,UAAW,SACXC,MAAO,eAiEX,IAAMC,EAAc,CAClBC,WAAY,OACZC,aAAc,oBACdH,MAAO,OACPI,MAAO,SACPC,OAAQ,OACRC,QAAS,UACTC,OAAQ,OAQKC,EA5Ef,WACE,IAAMC,EAAUd,IAEhB,OACE,kBAAC,IAAMe,SAAP,KACE,yBAAKC,MAAOV,GACZ,yBACEU,MAAO,CAAEC,SAAU,WAAYC,KAAM,OAAQC,IAAK,KAClDC,IAAKC,IACLX,OAAQ,KACRY,MAAO,OACPC,IAAI,iBAIN,kBAACC,EAAA,EAAD,CACEC,cAAY,EACZC,QAAQ,KACRC,UAAU,KACVC,UAAWd,EAAQX,MAEnBM,MAAM,UANR,4B,8DCRSoB,EAlBC,SAACC,GACf,OACE,yBACEd,MAAO,CACLC,SAAU,WACVE,IAAK,IACLY,MAAO,IACPC,OAAQ,IACRd,KAAM,IACNb,MAAO,OACPD,UAAW,WAGb,yBAAKmB,IAAK,UAAUP,MAAO,CAAEN,OAAQ,QAAUU,IAAKU,EAAMV,QCR1DpB,EAAYC,aAAW,SAACC,GAAD,MAAY,CACvC+B,KAAM,CACJC,SAAU,KAGZC,KAAM,CACJC,QAAS,OACTC,cAAe,SACfC,SAAU,OACVC,eAAgB,SAChBC,WAAY,SACZ7B,QAAS,OAIX8B,SAAU,CACRC,KAAM,GAERC,OAAQ,CACNC,aAAc,MACdC,cAAe,YAIbC,EAAmB,CACvBpC,OAAQ,IACRY,MAAO,KACPyB,WAAY,QAoJCC,EAhJE,SAAClB,GAEhB,IAAMhB,EAAUd,IAFU,EAKYiD,mBAAS,QALrB,mBAKnBC,EALmB,KAKNC,EALM,OAOcF,oBAAS,GAPvB,mBAOnBG,EAPmB,KAOLC,EAPK,KAUpBC,EAAYC,IAAMC,OAAO,MAGzBC,EAAaF,IAAMC,OAAO,MAuBhC,OACE,kBAAC,IAAMzC,SAAP,KACE,kBAAC2C,EAAA,EAAD,CAAMC,WAAS,EAAC/B,UAAWd,EAAQqB,MACjC,kBAACuB,EAAA,EAAD,CAAME,MAAI,EAAChC,UAAWd,EAAQ2B,WACV,IAAjBW,EACC,yBAAKpC,MAAO,CAAEC,SAAU,WAAYN,QAAS,SAC3C,kBAAC,IAAD,CACEkD,OAAO,EACPC,IAAKR,EACLS,iBAAiB,aACjBC,2BAAyB,EAEzBlB,iBAAkBA,EAClBmB,kBAAmB,EACnBjD,MAAO,CACLM,MAAO,OACP4C,UAAW,QACXC,UAAW,WAGf,kBAAC,EAAD,CAAS/C,IAAKgD,OAIV,yBACEhD,IAAK8B,EACLY,IAAKL,EACLlC,IAAI,sBACJP,MAAO,CACLM,MAAO,OACP4C,UAAW,QACXC,UAAW,YAOzB,kBAACT,EAAA,EAAD,CAAME,MAAI,EAAChC,UAAWd,EAAQ2B,UAE5B,kBAACjB,EAAA,EAAD,CACEE,QAAQ,QACRrB,MAAM,gBACNW,MAAO,CACLJ,OAAQ,OACRD,QAAS,OAEXgB,UAAU,KAPZ,8JAeF,kBAAC+B,EAAA,EAAD,CAAME,MAAI,EAAChC,UAAWd,EAAQ6B,SACV,IAAjBS,EACC,kBAACiB,EAAA,EAAD,CACE3C,QAAQ,YACR4C,IAAK,EACLjE,MAAM,UACNsB,UAAU,QACV4C,UAAU,EACV3D,OAAO,OACP4D,QApFc,WACxB,IAAMC,EAAanB,EAAUoB,QAAQC,gBAErCxB,EAAesB,GAEfpB,GAAiBD,GAQjB,IALA,IAAIwB,EAAQC,KAAKJ,EAAWK,MAAM,2BAA2B,IAEzDC,EAASH,EAAMG,OACfC,EAAa,IAAIC,YAAYF,GAC7BG,EAAK,IAAIC,WAAWH,GACfI,EAAI,EAAGA,EAAIL,EAAQK,IAC1BF,EAAGE,GAAKR,EAAMS,WAAWD,GAG3BtD,EAAMwD,QAAQ,CAACN,EAAYP,KAoEjB7C,UAAWd,EAAQ6B,QARrB,gBAaA,6BACE,kBAAC0B,EAAA,EAAD,CACE3C,QAAQ,YACRC,UAAU,QACV4C,UAAU,EACVC,QAAS,kBAAMnB,GAAiBD,IAChCxC,OAAO,OACPI,MAAO,CACLJ,OAAQ,WACRiC,cAAe,SARnB,wBAcA,kBAACwB,EAAA,EAAD,CACE3C,QAAQ,YACR4C,IAAK,EACLjE,MAAM,UACNsB,UAAU,QACVf,OAAO,OACP2D,UAAU,EACVC,QAAS1C,EAAMyD,SACfvE,MAAO,CACLJ,OAAQ,WACRiC,cAAe,SAVnB,a,kBCvJR7C,EAAYC,aAAW,SAACC,GAAD,MAAY,CACvC+B,KAAM,CACJC,SAAU,KAGZC,KAAM,CACJC,QAAS,OACTC,cAAe,SACfC,SAAU,OACVC,eAAgB,SAChBC,WAAY,SACZ7B,QAAS,OAGX8B,SAAU,CACRC,KAAM,GAGRC,OAAQ,CACNC,aAAc,MACdC,cAAe,QAEjB2C,WAAY,CACVpD,QAAS,OACTI,WAAY,SACZD,eAAgB,SAChBK,aAAc,MACdC,cAAe,YAIbC,EAAmB,CACvBpC,OAAQ,IACRY,MAAO,KACPyB,WAAY,QA+IC0C,EA3II,SAAC3D,GAClB,IAAMhB,EAAUd,IADY,EAIUiD,mBAAS,QAJnB,mBAIrBC,EAJqB,KAIRC,EAJQ,OAMYF,oBAAS,GANrB,mBAMrBG,EANqB,KAMPC,EANO,KAStBC,EAAYC,IAAMC,OAAO,MAGzBC,EAAaF,IAAMC,OAAO,MA2BhC,OACE,kBAAC,IAAMzC,SAAP,KACE,kBAAC2C,EAAA,EAAD,CAAMC,WAAS,EAAC/B,UAAWd,EAAQqB,MACjC,kBAACuB,EAAA,EAAD,CAAME,MAAI,EAAChC,UAAWd,EAAQ2B,WACV,IAAjBW,EACC,yBAAKpC,MAAO,CAAEC,SAAU,WAAYN,QAAS,SAC3C,kBAAC,IAAD,CACEkD,OAAO,EACPC,IAAKR,EACLS,iBAAiB,aACjBjB,iBAAkBA,EAClB9B,MAAO,CACLM,MAAO,OACP4C,UAAW,QACXC,UAAW,WAGf,kBAAC,EAAD,CAAS/C,IAAKsE,OAGhB,yBACEtE,IAAK8B,EACLY,IAAKL,EACLlC,IAAI,sBACJP,MAAO,CACLM,MAAO,OACP4C,UAAW,QACXC,UAAW,YAKnB,kBAACT,EAAA,EAAD,CAAME,MAAI,EAAChC,UAAWd,EAAQ2B,UAC5B,kBAACjB,EAAA,EAAD,CACEE,QAAQ,QACRrB,MAAM,gBACNW,MAAO,CACLJ,OAAQ,OACRD,QAAS,OAEXgB,UAAU,KAPZ,iHAcF,kBAAC+B,EAAA,EAAD,CAAME,MAAI,EAAChC,UAAWd,EAAQ0E,aACV,IAAjBpC,EACC,kBAACiB,EAAA,EAAD,CACE3C,QAAQ,YACR4C,IAAK,EACLjE,MAAM,UACNsB,UAAU,QACV4C,UAAU,EACV3D,OAAO,OACP4D,QA7Ec,WACxB,IAAMC,EAAanB,EAAUoB,QAAQC,gBAErCxB,EAAesB,GAEfpB,GAAiBD,GAQjB,IALA,IAAIwB,EAAQC,KAAKJ,EAAWK,MAAM,2BAA2B,IAEzDC,EAASH,EAAMG,OACfC,EAAa,IAAIC,YAAYF,GAC7BG,EAAK,IAAIC,WAAWH,GACfI,EAAI,EAAGA,EAAIL,EAAQK,IAC1BF,EAAGE,GAAKR,EAAMS,WAAWD,GAG3BtD,EAAMwD,QAAQ,CAACN,EAAYP,KA6DjB7C,UAAWd,EAAQ6B,QARrB,gBAaA,6BACE,kBAAC0B,EAAA,EAAD,CACE3C,QAAQ,YACRC,UAAU,QACV4C,UAAU,EACVC,QAAS,kBAAMnB,GAAiBD,IAChCxC,OAAO,OACPI,MAAO,CACLJ,OAAQ,WACRiC,cAAe,SARnB,wBAcA,kBAACwB,EAAA,EAAD,CACE3C,QAAQ,YACR4C,IAAK,EACLjE,MAAM,UACNsB,UAAU,QACVf,OAAO,OACP2D,UAAU,EACVC,QAAS1C,EAAMyD,SACfvE,MAAO,CACLJ,OAAQ,WACRiC,cAAe,SAVnB,a,6CC7JR7C,EAAYC,aAAW,SAACC,GAAD,MAAY,CACvC+B,KAAM,CACJX,MAAO,QAETqE,WAAY,CACVC,YAAa1F,EAAM2F,QAAQ,IAE7BC,aAAc,CACZC,UAAW7F,EAAM2F,QAAQ,GACzBjD,aAAc1C,EAAM2F,QAAQ,QAQhC,IAqCeG,EArCW,SAAClE,GACzB,IAAMhB,EAAUd,IADkB,EAEEuD,IAAMN,SAASnB,EAAMmE,MAFvB,mBAE3BC,EAF2B,KAEfC,EAFe,KAG5BC,EANC,CAAC,8BAA+B,4BAA6B,qBAQpE7C,IAAM8C,WAAU,WAEVvE,EAAMmE,MAAM,EAEdK,IAIAH,EAAcrE,EAAMmE,QAGvB,CAACnE,EAAMmE,OAGR,IAAMK,EAAa,WACjBH,GAAc,SAACI,GAAD,OAAoBA,EAAiB,MAGrD,OACE,yBAAK3E,UAAWd,EAAQmB,MACtB,kBAACuE,EAAA,EAAD,CAASlC,IAAKxC,EAAMmE,KAAMC,WAAYA,EAAYO,kBAAgB,GAC/DL,EAAMM,KAAI,SAACC,GAAD,OACT,kBAACC,EAAA,EAAD,CAAMtC,IAAKqC,GACT,kBAACE,EAAA,EAAD,KAAYF,U,0BC5ClB3G,EAAYC,aAAW,SAACC,GAAD,MAAY,CACvC+B,KAAM,GAINE,KAAM,CACJC,QAAS,OACTC,cAAe,SACfC,SAAU,SACVC,eAAgB,eAChBC,WAAY,UAEdsE,gBAAiB,CACf1E,QAAS,OACTC,cAAe,MACfC,SAAU,SACVC,eAAgB,gBAIlBqC,MAAO,CAEL1C,SAAU,QACVtB,OAAQ,OAGV6B,SAAU,CACRC,KAAM,GAGRC,OAAQ,CAEN/B,OAAQ,OACRgC,aAAc,QACdC,cAAe,YAwNJkE,EAlNI,SAACjF,GAClB,IAAMhB,EAAUd,IADY,EAK0BiD,mBAAS,CAAC,KAAM,OAL1C,mBAKrB+D,EALqB,KAKAC,EALA,OAOsBhE,mBAAS,CAAC,KAAM,OAPtC,mBAOrBiE,EAPqB,KAOFC,EAPE,KAUtBC,EAAS,CACbxC,MAAO,iCACPyC,MAAO,GACPC,QAAS,CACPC,OAAQ,CAENC,OAAQ,yBACRC,SAAU,gBACVC,WAAY,uBAEd1G,MAAO,CACLkB,SAAU,QACVtB,OAAQ,SAMR+G,EAAiBpE,IAAMC,OAAO,MAC9BoE,EAAerE,IAAMC,OAAO,MAsBlC,OACE,kBAAC,IAAMzC,SAAP,KACE,kBAAC2C,EAAA,EAAD,CAAMC,WAAS,EAAC/B,UAAWd,EAAQqB,MACjC,kBAACuB,EAAA,EAAD,CAAME,MAAI,GAIe,OAArB9B,EAAM+F,KAAK,GAAG,GACZ,kBAACnE,EAAA,EAAD,CAAMC,WAAS,EAAC/B,UAAWd,EAAQgG,iBACjC,kBAACpD,EAAA,EAAD,CAAME,MAAI,EAAChC,UAAWd,EAAQ2B,UAC5B,yBACErB,IAAKU,EAAMgG,OAAO,GAClBC,OA/BI,WAEpBd,EAAuB,CACrBU,EAAejD,QAAQsD,cACvBL,EAAejD,QAAQuD,gBA4BTnE,IAAK6D,EACLpG,IAAI,sBACJK,UAAWd,EAAQ8D,SAGvB,kBAAClB,EAAA,EAAD,CAAME,MAAI,EAAChC,UAAWd,EAAQ2B,UAC5B,yBACErB,IAAKU,EAAMgG,OAAO,GAClBC,OA/BE,WAElBZ,EAAqB,CACnBS,EAAalD,QAAQsD,cACrBJ,EAAalD,QAAQuD,gBA4BPnE,IAAK8D,EACLrG,IAAI,sBACJK,UAAWd,EAAQ8D,UAKzB,kBAAClB,EAAA,EAAD,CAAMC,WAAS,EAAC/B,UAAWd,EAAQgG,iBACjC,kBAACpD,EAAA,EAAD,CAAME,MAAI,EAAChC,UAAWd,EAAQ2B,UAC5B,kBAAC,IAAD,CACEmC,MAAO9C,EAAMgG,OAAO,GACpBT,MAAO,CACL,CAIEvF,EAAM+F,KAAK,GAAG,GAAKb,EAAoB,GACvClF,EAAM+F,KAAK,GAAG,GAAKb,EAAoB,GACvClF,EAAM+F,KAAK,GAAG,GAAKb,EAAoB,GACvClF,EAAM+F,KAAK,GAAG,GAAKb,EAAoB,KAG3CM,QAASF,EAAOE,WAKpB,kBAAC5D,EAAA,EAAD,CAAME,MAAI,EAAChC,UAAWd,EAAQ2B,UAC5B,kBAAC,IAAD,CACEmC,MAAO9C,EAAMgG,OAAO,GACpBT,MAAO,CACL,CAIEvF,EAAM+F,KAAK,GAAG,GAAKX,EAAkB,GACrCpF,EAAM+F,KAAK,GAAG,GAAKX,EAAkB,GACrCpF,EAAM+F,KAAK,GAAG,GAAKX,EAAkB,GACrCpF,EAAM+F,KAAK,GAAG,GAAKX,EAAkB,KAGzCI,QAASF,EAAOE,aAU5B,kBAAC5D,EAAA,EAAD,CAAME,MAAI,GACc,OAArB9B,EAAM+F,KAAK,GAAG,GAKT,kBAACxD,EAAA,EAAD,CACE3C,QAAQ,YACR4C,IAAK,EACLjE,MAAM,UACNsB,UAAU,QACVf,OAAO,OACP2D,UAAU,EACVC,QAAS1C,EAAMoG,OACftG,UAAWd,EAAQ6B,QARrB,UAeJ,6BACE,kBAAC0B,EAAA,EAAD,CACE3C,QAAQ,YACR4C,IAAK,EACLjE,MAAM,UACNsB,UAAU,QACV4C,UAAU,EACVC,QAAS1C,EAAMqG,MACfvG,UAAWd,EAAQ6B,QAPrB,WAeN,kBAACe,EAAA,EAAD,CAAME,MAAI,EAAChC,UAAWd,EAAQ2B,UAC5B,kBAAC2F,EAAA,EAAD,CACEpH,MAAO,CACLqH,YAAa,QACbC,YAAaxG,EAAMyG,aACnBC,YAAa,MACbC,aAAc,OACd7F,aAAc,QAIhB,kBAACpB,EAAA,EAAD,CACEE,QAAQ,QACRjB,MAAM,OACNO,MAAO,CACLZ,UAAW,SACXC,MAAO,UAIPM,QAAS,aAGVmB,EAAM4G,cAKb,kBAAChF,EAAA,EAAD,CAAME,MAAI,EAAChC,UAAWd,EAAQ2B,UACH,OAAxBX,EAAM6G,cACL,kBAAC,IAAM5H,SAAP,MAEA,kBAACqH,EAAA,EAAD,CACEpH,MAAO,CACLJ,OAAQ,QAITkB,EAAM6G,cAAcC,eAAelC,KAAI,SAAC9C,GAAD,OACtC,2BAAIA,EAAKiF,sBCjOnBC,EAAW,6DACXC,EAAgB,2CAGZ,SAAeC,EAAtB,oC,4CAAO,WAAqCC,EAAcC,GAAnD,mBAAAC,EAAA,6DAEAC,EAAO,CACXH,aAAcA,EACdC,SAAUA,GAIgCJ,EAAW,+BARjD,SASqBO,MADiBP,yFACqB,CAC3DQ,OAAQ,OACRF,KAAMG,KAAKC,UAAUJ,GACrBK,QAAS,CACP,eAAgB,mBAChB,YAAaV,KAdf,cASIW,EATJ,gBAiB4BA,EAASC,OAjBrC,cAiBIC,EAjBJ,yBAmBKA,GAnBL,4C,sBCVV,SAASC,IACP,OACE,kBAACrI,EAAA,EAAD,CAAYE,QAAQ,QAAQrB,MAAM,gBAAgBI,MAAM,UACrD,kBACD,kBAACqJ,EAAA,EAAD,CAAMzJ,MAAM,UAAU0J,KAAK,wBAA3B,WAEQ,KACP,IAAIC,MAAOC,cACZ,6BACA,kBAACH,EAAA,EAAD,CAAMzJ,MAAM,UAAU0J,KAAK,4CAA3B,mBAGC,QACD,kBAACD,EAAA,EAAD,CAAMzJ,MAAM,UAAU0J,KAAK,0CAA3B,wBAGC,QACD,kBAACD,EAAA,EAAD,CAAMzJ,MAAM,UAAU0J,KAAK,yCAA3B,iBAON,IAIIG,EAAMC,EAAQ,KAMlBD,EAAIE,OAAOC,OAAS,eACpBH,EAAIE,OAAOE,YAAc,IAAIJ,EAAIK,2BAA2B,CAC1DC,eAAgB,sDAGlB,IAAMxK,EAAYC,aAAW,SAACC,GAAD,MAAY,CACvCiC,KAAM,CACJC,QAAS,OACTC,cAAe,MACfG,WAAY,UACZF,SAAU,SACVmI,WAAYvK,EAAM2F,QAAQ,GAC1BtD,eAAgB,UAElBpC,MAAO,CACLC,UAAW,SACXC,MAAO,WAETqK,OAAQ,CACNtK,UAAW,SACXC,MAAO,UACPsK,YAAa,OACbF,WAAY,MACZG,cAAe,OAGjBC,aAAc,CACZjI,aAAc,OACdmD,UAAW,OAGb+E,MAAO,CAEL1I,QAAS,OACTC,cAAe,MACfC,SAAU,SACVC,eAAgB,iBAElBE,SAAU,CACRC,KAAM,EACN+H,WAAY,QAEdM,OAAQ,CACNC,gBAAiB9K,EAAM+K,QAAQ1K,WAAW2K,MAC1CvK,QAAST,EAAM2F,QAAQ,KAOzBlD,OAAQ,CACNP,QAAS,OACTI,WAAY,SACZD,eAAgB,SAChB5B,QAAS,iBA2LEwK,MAvLf,WACE,IAAMrK,EAAUd,IADH,EAGyBiD,mBAAS,QAHlC,mBAGNmI,EAHM,KAGOC,EAHP,OAKyBpI,mBAAS,QALlC,mBAKNqI,EALM,KAKOC,EALP,OAQWtI,mBAAS,GARpB,mBAQNgD,EARM,KAQAuF,EARA,OAUevI,mBAAS,CAAC,CAAC,MAAO,CAAC,QAVlC,mBAUNwI,EAVM,KAUEC,EAVF,OAa6BzI,mBAAS,MAbtC,mBAaN0F,EAbM,KAaSgD,EAbT,OAgB2B1I,mBAAS,WAhBpC,mBAgBNsF,EAhBM,KAgBQqD,EAhBR,OAkBuB3I,mBAClC,4CAnBW,mBAkBNyF,EAlBM,KAkBMmD,EAlBN,KA4BPC,EAAU,WACdN,EAAQ,GACRK,EAAc,4CACdD,EAAgB,WAChBF,EAAU,CAAC,CAAC,MAAO,CAAC,QACpBC,EAAiB,OAcbpG,EAAW,WACfiG,EAAQO,OAAOC,OAAO/F,GAAQ,KAI1BgG,EAAQ,uCAAG,sCAAA9C,EAAA,6DAKPF,EAAcqC,EAAY,GAC1BpC,EAAUkC,EAAY,GANf,SAkBQpC,EAAsBC,EAAaC,GAlB3C,UAkBTQ,EAlBS,OAsBY,WAFFA,EAAQ,mBApBlB,wBAuBbmC,EAAc,0DACdK,OAAOC,MAAM,4DACbL,IAzBa,2BA8BXM,EAAqB1C,EAAQ,mBAE7B2C,EAAa,CACf3C,EAAQ,kBAAR,KACAA,EAAQ,kBAAR,IACAA,EAAQ,kBAAR,MACAA,EAAQ,kBAAR,QAGE4C,EAAS,CACX5C,EAAQ,cAAR,KACAA,EAAQ,cAAR,IACAA,EAAQ,cAAR,MACAA,EAAQ,cAAR,QAOFgC,EAAU,CAACW,EAAYC,IAKrBT,GADyB,IAAvBO,EACY,qDAGA,0DA1DD,4CAAH,qDA+Dd,OACE,kBAAC,IAAMrL,SAAP,KACE,kBAAC,EAAD,MAEA,kBAACwL,EAAA,EAAD,CAAWrK,SAAS,KAAKN,UAAWd,EAAQqB,MAC1C,kBAACuB,EAAA,EAAD,CAAMC,WAAS,EAAC/B,UAAWd,EAAQqB,KAAM0D,QAAS,GAChD,kBAACnC,EAAA,EAAD,CAAME,MAAI,GACR,kBAAC2I,EAAA,EAAD,CACEvL,MAAO,CACLgK,gBAAiB,UACjB1J,MAAO,OACPY,SAAU,WAGZ,kBAACwB,EAAA,EAAD,CAAMC,WAAS,EAAC/B,UAAWd,EAAQgK,OACjC,kBAACpH,EAAA,EAAD,CAAME,MAAI,EAAChC,UAAWd,EAAQ2B,UAE1B,CACE,EACE,kBAAC,EAAD,CACE6C,QA7FH,SAACkH,GACpBjB,EAAeiB,IA6FOjH,SAAUA,EACVsC,KAAM4D,EAAO,KAGjB,EACE,kBAAC,EAAD,CACEnG,QAzGL,SAACmH,GAClBpB,EAAeoB,IAyGOlH,SAAUA,EACVsC,KAAM4D,EAAO,KAGjB,EACE,kBAAC,EAAD,CACEvD,OAAQ+D,EACR9D,MAAO2D,EACPhE,OAAQ,CAACwD,EAAY,GAAIF,EAAY,IACrCvD,KAAM4D,EACN9C,cAAeA,EACfD,WAAYA,EACZH,aAAcA,KAGlBtC,SAShB,kBAAC,EAAD,CAAmBA,KAAMA,IACzB,4BAAQrE,UAAWd,EAAQiK,QACzB,yBACE/J,MAAO,CAAEoB,QAAS,QAASxB,OAAQ,UACnCQ,IAAKC,IACLX,OAAQ,KACRY,MAAO,OACPb,MAAM,SACNc,IAAI,iBAEN,kBAACsI,EAAD,SCnRY6C,QACW,cAA7BR,OAAOS,SAASC,UAEe,UAA7BV,OAAOS,SAASC,UAEhBV,OAAOS,SAASC,SAASC,MACvB,2DCZNC,IAASC,OAAO,kBAAC,EAAD,MAASC,SAASC,eAAe,SD6H3C,kBAAmBC,WACrBA,UAAUC,cAAcC,MACrBC,MAAK,SAAAC,GACJA,EAAaC,gBAEdC,OAAM,SAAAC,GACLC,QAAQD,MAAMA,EAAME,a","file":"static/js/main.6f107d1b.chunk.js","sourcesContent":["module.exports = __webpack_public_path__ + \"static/media/rectangle_overlay_3.6c19f8f5.png\";","module.exports = __webpack_public_path__ + \"static/media/oval_overlay_5.eed60cfe.png\";","module.exports = \"data:image/png;base64,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\"","import React from \"react\";\r\nimport logo from \"./cubemos_logo_final.png\";\r\nimport AppBar from \"@material-ui/core/AppBar\";\r\nimport CssBaseline from \"@material-ui/core/CssBaseline\";\r\nimport Typography from \"@material-ui/core/Typography\";\r\nimport Toolbar from \"@material-ui/core/Toolbar\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n  title: {\r\n    textAlign: \"center\",\r\n    color: \"#1e3b95\"\r\n  }\r\n}));\r\n\r\nfunction Header() {\r\n  const classes = useStyles();\r\n\r\n  return (\r\n    <React.Fragment>\r\n      <div style={headerStyle}>\r\n      <img\r\n        style={{ position: \"absolute\", left: \"20px\", top: \"0\" }}\r\n        src={logo}\r\n        height={\"60\"}\r\n        width={\"auto\"}\r\n        alt=\"Cubemos logo\"\r\n      />\r\n     \r\n \r\n      <Typography\r\n        gutterBottom\r\n        variant=\"h4\"\r\n        component=\"h1\"\r\n        className={classes.title}\r\n              //style={{ position: \"absolute\",paddingLeft:\"40%\",top: \"0\" }}\r\n        align=\"center\"\r\n      >\r\n        Identity Verification\r\n      </Typography>\r\n      </div>\r\n        {/* <img\r\n        style={{ position: \"absolute\", left: \"20px\", top: \"0\" }}\r\n        src={logo}\r\n        height={\"50\"}\r\n        width={\"auto\"}\r\n        alt=\"Cubemos logo\"\r\n      /> */}\r\n      \r\n     \r\n    </React.Fragment>\r\n\r\n    // <React.Fragment>\r\n    //   <CssBaseline />\r\n    //   <AppBar position=\"relative\">\r\n    //     <Toolbar\r\n    //       style={{\r\n    //         background: \"#1e3b95\",\r\n    //         display: \"flex\",\r\n    //         justifyContent: \"space-between\"\r\n    //       }}\r\n    //     >\r\n    //       {/* // <CameraIcon className={classes.icon} /> */}\r\n    //       <Typography variant=\"h5\" color=\"inherit\" >\r\n    //         Indentity Verification\r\n    //       </Typography>\r\n    //       <Typography  variant=\"h5\" color=\"inherit\" style={{paddingRight:\"40px\"}}>\r\n    //        Cubemos\r\n    //       </Typography>\r\n\r\n    //     </Toolbar>\r\n    //   </AppBar>\r\n    // </React.Fragment>\r\n  );\r\n}\r\n\r\nconst headerStyle = {\r\n  background: \"#fff\",\r\n  borderBottom: \"2px solid #1e3b95\",\r\n  color: \"#333\",\r\n  align: \"middle\", \r\n  height: \"50px\",\r\n  padding: \"0px 0px\",\r\n  margin: \"0 0\"\r\n};\r\n\r\nconst linkStyle = {\r\n  color: \"#fff\",\r\n  textDecoration: \"none\"\r\n};\r\n\r\nexport default Header;\r\n","import React from \"react\";\r\n\r\n\r\n\r\nconst Overlay = (props) => {\r\n  return (\r\n    <div\r\n      style={{\r\n        position: \"absolute\",\r\n        top: \"0\",\r\n        right: \"0\",\r\n        bottom: \"0\",\r\n        left: \"0\",\r\n        color: \"#fff\",\r\n        textAlign: \"center\",\r\n      }}\r\n    >\r\n      <img alt =\"Overlay\" style={{ height: \"100%\" }} src={props.src} />\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default Overlay;\r\n","import React, { useState } from \"react\";\r\nimport { Button } from \"@material-ui/core\";\r\nimport Grid from \"@material-ui/core/Grid\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport Typography from \"@material-ui/core/Typography\";\r\nimport Webcam from \"react-webcam\";\r\nimport rectangle_overlay from \"../images/rectangle_overlay_3.png\";\r\nimport Overlay from \"./overlay.js\"\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n  root: {\r\n    maxWidth: 1000,\r\n  },\r\n\r\n  main: {\r\n    display: \"flex\",\r\n    flexDirection: \"column\",\r\n    flexWrap: \"wrap\",\r\n    justifyContent: \"center\",\r\n    alignItems: \"center\",\r\n    padding: \"0 0\",\r\n\r\n  },\r\n\r\n  gridItem: {\r\n    flex: 1,\r\n  },\r\n  button: {\r\n    marginBottom: \"5px\",\r\n    textTransform: \"none\",\r\n  },\r\n}));\r\n\r\nconst videoConstraints = {\r\n  height: 720,\r\n  width: 1280,\r\n  facingMode: \"user\",\r\n};\r\n\r\n//Component for the WebcamUpload window\r\nconst IdUpload = (props) => {\r\n\r\n  const classes = useStyles();\r\n\r\n  //state variable to store image from webcam\r\n  const [imageWebcam, setImageWebcam] = useState(\"none\");\r\n  //state variable to check if image is taken or not\r\n  const [isImageTaken, setisImageTaken] = useState(false);\r\n\r\n   //Used to refer to the webcam element\r\n  const webcamRef = React.useRef(null);\r\n\r\n  // reference element to refer to the image element\r\n  const imgElement = React.useRef(null);\r\n\r\n  //Callback function to take image and store it in the state variable\r\n  const captureScreenshot = () => {\r\n    const screenshot = webcamRef.current.getScreenshot();\r\n    //Save screenshot taken to state variable to display it.\r\n    setImageWebcam(screenshot);\r\n    //Toggle the state to show the image instead of the webcam component\r\n    setisImageTaken(!isImageTaken);\r\n\r\n    //unencode image bytes from base64encoding to ArrayBuffer (Bytes Array) for  AWS Rekognition DetectFaces API\r\n    let image = atob(screenshot.split(\"data:image/jpeg;base64,\")[1]);\r\n\r\n    let length = image.length;\r\n    let imageBytes = new ArrayBuffer(length);\r\n    let ua = new Uint8Array(imageBytes);\r\n    for (var i = 0; i < length; i++) {\r\n      ua[i] = image.charCodeAt(i);\r\n    }\r\n    //pass on imageBytes to the App parent element, from where its sent to the API when the compare button is clicked\r\n    props.callApp([imageBytes, screenshot]);\r\n   \r\n  };\r\n  return (\r\n    <React.Fragment>\r\n      <Grid container className={classes.main}>\r\n        <Grid item className={classes.gridItem}>\r\n          {isImageTaken === false ? (\r\n            <div style={{ position: \"relative\", padding: \"10px\" }}>\r\n              <Webcam\r\n                audio={false}\r\n                ref={webcamRef}\r\n                screenshotFormat=\"image/jpeg\"\r\n                forceScreenshotSourceSize\r\n                \r\n                videoConstraints={videoConstraints}\r\n                screenshotQuality={1}\r\n                style={{\r\n                  width: \"auto\",\r\n                  maxHeight: \"300px\",\r\n                  minHeight: \"200px\",\r\n                }}\r\n              />\r\n              <Overlay src={rectangle_overlay} />\r\n            </div>\r\n          ) : (\r\n                           \r\n                  <img\r\n                    src={imageWebcam}\r\n                    ref={imgElement}\r\n                    alt=\" from local storage\"\r\n                    style={{\r\n                      width: \"auto\",\r\n                      maxHeight: \"300px\",\r\n                      minHeight: \"200px\",\r\n                    }}\r\n                  ></img>\r\n               \r\n      \r\n          )}\r\n        </Grid>\r\n        <Grid item className={classes.gridItem}>\r\n         \r\n          <Typography\r\n            variant=\"body2\"\r\n            color=\"textSecondary\"\r\n            style={{\r\n              margin: \"auto\",\r\n              padding: \"1em\",\r\n            }}\r\n            component=\"p\"\r\n          >\r\n            Take a picture of your Student ID Card. Bring the card close to the\r\n            camera and keep it inside the highlighted area. Then press the \"Take\r\n            Picture\" button.\r\n          </Typography>\r\n        </Grid>\r\n\r\n        <Grid item className={classes.button}>\r\n          {isImageTaken === false ? (\r\n            <Button\r\n              variant=\"contained\"\r\n              key={1}\r\n              color=\"primary\"\r\n              component=\"label\"\r\n              disabled={false}\r\n              margin=\"auto\"\r\n              onClick={captureScreenshot}\r\n              className={classes.button}\r\n            >\r\n              Take Picture\r\n            </Button>\r\n          ) : (\r\n            <div>\r\n              <Button\r\n                variant=\"contained\"\r\n                component=\"label\"\r\n                disabled={false}\r\n                onClick={() => setisImageTaken(!isImageTaken)}\r\n                margin=\"auto\"\r\n                style={{\r\n                  margin: \"2px 30px\",\r\n                  textTransform: \"none\",\r\n                }}\r\n              >\r\n                Take another picture\r\n              </Button>\r\n\r\n              <Button\r\n                variant=\"contained\"\r\n                key={1}\r\n                color=\"primary\"\r\n                component=\"label\"\r\n                margin=\"auto\"\r\n                disabled={false}\r\n                onClick={props.nextStep}\r\n                style={{\r\n                  margin: \"2px 30px\",\r\n                  textTransform: \"none\",\r\n                }}\r\n              >\r\n                Next\r\n              </Button>\r\n            </div>\r\n          )}\r\n        </Grid>\r\n      </Grid>\r\n    </React.Fragment>\r\n  );\r\n};\r\n\r\nexport default IdUpload;\r\n","import React, { useState } from \"react\";\r\nimport { Button } from \"@material-ui/core\";\r\nimport Grid from \"@material-ui/core/Grid\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport Typography from \"@material-ui/core/Typography\";\r\nimport Webcam from \"react-webcam\";\r\n\r\nimport oval_overlay from \"../images/oval_overlay_5.png\";\r\nimport Overlay from \"./overlay.js\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n  root: {\r\n    maxWidth: 1000,\r\n  },\r\n\r\n  main: {\r\n    display: \"flex\",\r\n    flexDirection: \"column\",\r\n    flexWrap: \"wrap\",\r\n    justifyContent: \"center\",\r\n    alignItems: \"center\",\r\n    padding: \"0 0\",\r\n  },\r\n\r\n  gridItem: {\r\n    flex: 1,\r\n  },\r\n\r\n  button: {\r\n    marginBottom: \"5px\",\r\n    textTransform: \"none\",\r\n  },\r\n  buttonGrid: {\r\n    display: \"flex\",\r\n    alignItems: \"center\",\r\n    justifyContent: \"center\",\r\n    marginBottom: \"5px\",\r\n    textTransform: \"none\",\r\n  },\r\n}));\r\n\r\nconst videoConstraints = {\r\n  height: 720,\r\n  width: 1280,\r\n  facingMode: \"user\",\r\n};\r\n\r\n//Component for the faceUpload window\r\nconst FaceUpload = (props) => {\r\n  const classes = useStyles();\r\n\r\n  //state variable to store image from webcam\r\n  const [imageWebcam, setImageWebcam] = useState(\"none\");\r\n  //state variable to check if image is taken or not\r\n  const [isImageTaken, setisImageTaken] = useState(false);\r\n\r\n  //Used to refer to the webcam element\r\n  const webcamRef = React.useRef(null);\r\n\r\n  // reference element to refer to the image element\r\n  const imgElement = React.useRef(null);\r\n\r\n\r\n\r\n\r\n  //Callback function to take image and store it in the state variable\r\n  const captureScreenshot = () => {\r\n    const screenshot = webcamRef.current.getScreenshot();\r\n    //Save screenshot taken to state variable to display it.\r\n    setImageWebcam(screenshot);\r\n    //Toggle the state to show the image instead of the webcam component\r\n    setisImageTaken(!isImageTaken);\r\n\r\n    //unencode image bytes for  AWS Rekognition DetectFaces API\r\n    let image = atob(screenshot.split(\"data:image/jpeg;base64,\")[1]);\r\n\r\n    let length = image.length;\r\n    let imageBytes = new ArrayBuffer(length);\r\n    let ua = new Uint8Array(imageBytes);\r\n    for (var i = 0; i < length; i++) {\r\n      ua[i] = image.charCodeAt(i);\r\n    }\r\n    //pass on imageBytes to the App parent element, from where its sent to the API when the compare button is clicked\r\n    props.callApp([imageBytes, screenshot]);\r\n    \r\n    \r\n  };\r\n  return (\r\n    <React.Fragment>\r\n      <Grid container className={classes.main}>\r\n        <Grid item className={classes.gridItem}>\r\n          {isImageTaken === false ? (\r\n            <div style={{ position: \"relative\", padding: \"10px\" }}>\r\n              <Webcam\r\n                audio={false}\r\n                ref={webcamRef}\r\n                screenshotFormat=\"image/jpeg\"\r\n                videoConstraints={videoConstraints}\r\n                style={{\r\n                  width: \"auto\",\r\n                  maxHeight: \"300px\",\r\n                  minHeight: \"200px\",\r\n                }}\r\n              />\r\n              <Overlay src={oval_overlay} />\r\n            </div>\r\n          ) : (\r\n            <img\r\n              src={imageWebcam}\r\n              ref={imgElement}\r\n              alt=\" from local storage\"\r\n              style={{\r\n                width: \"auto\",\r\n                maxHeight: \"300px\",\r\n                minHeight: \"200px\",\r\n              }}\r\n            ></img>\r\n          )}\r\n        </Grid>\r\n        <Grid item className={classes.gridItem}>\r\n          <Typography\r\n            variant=\"body2\"\r\n            color=\"textSecondary\"\r\n            style={{\r\n              margin: \"auto\",\r\n              padding: \"1em\",\r\n            }}\r\n            component=\"p\"\r\n          >\r\n            Take a picture of your face. Keep your face inside the highlighted\r\n            area and press the \"Take Picture\" button.\r\n          </Typography>\r\n        </Grid>\r\n\r\n        <Grid item className={classes.buttonGrid}>\r\n          {isImageTaken === false ? (\r\n            <Button\r\n              variant=\"contained\"\r\n              key={1}\r\n              color=\"primary\"\r\n              component=\"label\"\r\n              disabled={false}\r\n              margin=\"auto\"\r\n              onClick={captureScreenshot}\r\n              className={classes.button}\r\n            >\r\n              Take Picture\r\n            </Button>\r\n          ) : (\r\n            <div>\r\n              <Button\r\n                variant=\"contained\"\r\n                component=\"label\"\r\n                disabled={false}\r\n                onClick={() => setisImageTaken(!isImageTaken)}\r\n                margin=\"auto\"\r\n                style={{\r\n                  margin: \"2px 30px\",\r\n                  textTransform: \"none\",\r\n                }}\r\n              >\r\n                Take another picture\r\n              </Button>\r\n\r\n              <Button\r\n                variant=\"contained\"\r\n                key={1}\r\n                color=\"primary\"\r\n                component=\"label\"\r\n                margin=\"auto\"\r\n                disabled={false}\r\n                onClick={props.nextStep}\r\n                style={{\r\n                  margin: \"2px 30px\",\r\n                  textTransform: \"none\",\r\n                }}\r\n              >\r\n                Next\r\n              </Button>\r\n            </div>\r\n          )}\r\n        </Grid>\r\n      </Grid>\r\n    </React.Fragment>\r\n  );\r\n};\r\n\r\nexport default FaceUpload;\r\n","import React from 'react';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport Stepper from '@material-ui/core/Stepper';\r\nimport Step from '@material-ui/core/Step';\r\nimport StepLabel from '@material-ui/core/StepLabel';\r\n\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n  root: {\r\n    width: '100%',\r\n  },\r\n  backButton: {\r\n    marginRight: theme.spacing(1),\r\n  },\r\n  instructions: {\r\n    marginTop: theme.spacing(1),\r\n    marginBottom: theme.spacing(1),\r\n  },\r\n}));\r\n\r\nfunction getSteps() {\r\n  return ['Take a picture of your face', 'Take a picture of your ID', 'Review and Verify'];\r\n}\r\n\r\nconst HorizontalStepper = (props) =>{\r\n  const classes = useStyles();\r\n  const [activeStep, setActiveStep] = React.useState(props.step);\r\n  const steps = getSteps();\r\n \r\n  React.useEffect(() => {\r\n    \r\n    if( props.step>=1)\r\n    {\r\n      handleNext()\r\n    }\r\n    else\r\n    {\r\n      setActiveStep(props.step)\r\n    }\r\n     \r\n}, [props.step])\r\n\r\n\r\n  const handleNext = () => {\r\n    setActiveStep((prevActiveStep) => prevActiveStep + 1);\r\n  };\r\n\r\n  return (\r\n    <div className={classes.root}>\r\n      <Stepper key={props.step} activeStep={activeStep} alternativeLabel>\r\n        {steps.map((label) => (\r\n          <Step key={label}>\r\n            <StepLabel>{label}</StepLabel>\r\n          </Step>\r\n        ))}\r\n      </Stepper> \r\n     \r\n    </div>\r\n  );\r\n}\r\n\r\nexport default HorizontalStepper;","import React, { useState } from \"react\";\r\nimport { Button } from \"@material-ui/core\";\r\nimport Grid from \"@material-ui/core/Grid\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport Typography from \"@material-ui/core/Typography\";\r\nimport Boundingbox from \"react-bounding-box\";\r\nimport { Box } from \"@material-ui/core\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n  root: {\r\n  \r\n  },\r\n\r\n  main: {\r\n    display: \"flex\",\r\n    flexDirection: \"column\",\r\n    flexWrap: \"nowrap\",\r\n    justifyContent: \"space-evenly\",\r\n    alignItems: \"center\",\r\n  },\r\n  imagesContainer: {\r\n    display: \"flex\",\r\n    flexDirection: \"row\",\r\n    flexWrap: \"nowrap\",\r\n    justifyContent: \"space-evenly\",\r\n  \r\n  },\r\n\r\n  image: {\r\n  \r\n    maxWidth: \"350px\",\r\n    margin: \"1em\",\r\n  },\r\n\r\n  gridItem: {\r\n    flex: 1,\r\n  },\r\n\r\n  button: {\r\n \r\n    margin: \"auto\",\r\n    marginBottom: \"0.5em\",\r\n    textTransform: \"none\",\r\n  \r\n  },\r\n}));\r\n\r\n//Component for the VerifyPage window\r\nconst VerifyPage = (props) => {\r\n  const classes = useStyles();\r\n\r\n \r\n  // State variable to store dimensions of image.[ height, width]\r\n  const [dimensionsFaceImage, setDimensionsFaceImage] = useState([null, null]);\r\n  // State variable to store dimensions of image.[ height, width]\r\n  const [dimensionsIdImage, setDimensionsIdImage] = useState([null, null]);\r\n\r\n  //Options for bounding box component\r\n  const params = {\r\n    image: \"http://i.imgur.com/gF7QYwa.jpg\",\r\n    boxes: [],\r\n    options: {\r\n      colors: {\r\n        //  normal: \"rgba(124,252,0,1)\",\r\n        normal: \"rgba(254, 211, 48,1.0)\", //Taxi Yellow\r\n        selected: \"rgba(0,0,0,1)\",\r\n        unselected: \"rgba(100,100,100,1)\",\r\n      },\r\n      style: {\r\n        maxWidth: \"350px\",\r\n        margin: \"1em\",\r\n      },\r\n    },\r\n  };\r\n\r\n  // reference element to refer to the image element\r\n  const faceImgElement = React.useRef(null);\r\n  const idImgElement = React.useRef(null);\r\n\r\n  // Get the height and width when image is loaded and store it in state. This is later on used to draw the bounding boxes on detected face\r\n  const onFaceImgLoad = () => {\r\n   \r\n    setDimensionsFaceImage([\r\n      faceImgElement.current.naturalHeight,\r\n      faceImgElement.current.naturalWidth,\r\n    ]);\r\n  };\r\n\r\n  // Get the height and width when image is loaded and store it in state. This is later on used to draw the bounding boxes on detected face\r\n  const onIdImgLoad = () => {\r\n\r\n    setDimensionsIdImage([\r\n      idImgElement.current.naturalHeight,\r\n      idImgElement.current.naturalWidth,\r\n    ]);\r\n  };\r\n\r\n\r\n\r\n  return (\r\n    <React.Fragment>\r\n      <Grid container className={classes.main}>\r\n        <Grid item>\r\n          {\r\n            //If props.bbox is null then show simple image element, if not then draw the bbox on the image\r\n            //using the BoundingBox component.\r\n            props.bBox[0][0] === null ? (\r\n              <Grid container className={classes.imagesContainer}>\r\n                <Grid item className={classes.gridItem}>\r\n                  <img\r\n                    src={props.images[0]}\r\n                    onLoad={onFaceImgLoad}\r\n                    ref={faceImgElement}\r\n                    alt=\" from local storage\"\r\n                    className={classes.image}\r\n                  ></img>\r\n                </Grid>\r\n                <Grid item className={classes.gridItem}>\r\n                  <img\r\n                    src={props.images[1]}\r\n                    onLoad={onIdImgLoad}\r\n                    ref={idImgElement}\r\n                    alt=\" from local storage\"\r\n                    className={classes.image}\r\n                  ></img>\r\n                </Grid>\r\n              </Grid>\r\n            ) : (\r\n              <Grid container className={classes.imagesContainer}>\r\n                <Grid item className={classes.gridItem}>\r\n                  <Boundingbox\r\n                    image={props.images[0]}\r\n                    boxes={[\r\n                      [\r\n                        //The bounding box for face recieved from the api is a ratio of the full height and width\r\n                        // So multiply it with width and height to get the correct result,\r\n                        //props.box=[Left, Top, Width, Height], dimensionsFaceImage= [height, width]\r\n                        props.bBox[0][0] * dimensionsFaceImage[1],\r\n                        props.bBox[0][1] * dimensionsFaceImage[0],\r\n                        props.bBox[0][2] * dimensionsFaceImage[1],\r\n                        props.bBox[0][3] * dimensionsFaceImage[0],\r\n                      ],\r\n                    ]}\r\n                    options={params.options}\r\n                  >\r\n                   \r\n                  </Boundingbox>\r\n                </Grid>\r\n                <Grid item className={classes.gridItem}>\r\n                  <Boundingbox\r\n                    image={props.images[1]}\r\n                    boxes={[\r\n                      [\r\n                        //The bounding box for face recieved from the api is a ratio of the full height and width\r\n                        // So multiply it with width and height to get the correct result,\r\n                        //props.box=[Left, Top, Width, Height], dimensions= [height, width]\r\n                        props.bBox[1][0] * dimensionsIdImage[1],\r\n                        props.bBox[1][1] * dimensionsIdImage[0],\r\n                        props.bBox[1][2] * dimensionsIdImage[1],\r\n                        props.bBox[1][3] * dimensionsIdImage[0],\r\n                      ],\r\n                    ]}\r\n                    options={params.options}\r\n                  >\r\n                \r\n                  </Boundingbox>\r\n                </Grid>\r\n              </Grid>\r\n            )\r\n          }\r\n        </Grid>\r\n\r\n        <Grid item >\r\n          {props.bBox[0][0] === null ? (\r\n\r\n             \r\n\r\n             \r\n                <Button\r\n                  variant=\"contained\"\r\n                  key={1}\r\n                  color=\"primary\"\r\n                  component=\"label\"\r\n                  margin=\"auto\"\r\n                  disabled={false}\r\n                  onClick={props.verify}\r\n                  className={classes.button}\r\n                >\r\n                  Verify\r\n                </Button>\r\n         \r\n           \r\n          ) : (\r\n            <div>\r\n              <Button\r\n                variant=\"contained\"\r\n                key={1}\r\n                color=\"primary\"\r\n                component=\"label\"\r\n                disabled={false}\r\n                onClick={props.retry}\r\n                className={classes.button}\r\n              >\r\n                Retry\r\n              </Button>\r\n            </div>\r\n          )}\r\n        </Grid>\r\n\r\n        <Grid item className={classes.gridItem}>\r\n          <Box\r\n            style={{\r\n              borderStyle: \"solid\",\r\n              borderColor: props.resultBorder,\r\n              borderWidth: \"2px\",\r\n              borderRadius: \"10px\",\r\n              marginBottom: \"1em\",\r\n              // backgroundColor: \"#fcfcfc\",\r\n            }}\r\n          >\r\n            <Typography\r\n              variant=\"body1\"\r\n              align=\"left\"\r\n              style={{\r\n                textAlign: \"center\",\r\n                color: \"#525252\",\r\n                // paddingLeft: \"15px\",\r\n                // paddingTop: \"5px\",\r\n                // paddingBottom: \"5px\"\r\n                padding: \"5px 15px\",\r\n              }}\r\n            >\r\n              {props.resultText}\r\n            </Typography>\r\n          </Box>\r\n        </Grid>\r\n\r\n        <Grid item className={classes.gridItem}>\r\n          {props.extractedText === null ? (\r\n            <React.Fragment></React.Fragment>\r\n          ) : (\r\n            <Box\r\n              style={{\r\n                margin: \"1em\",\r\n                // backgroundColor: \"#fcfcfc\",\r\n              }}\r\n            >\r\n              {props.extractedText.TextDetections.map((item) => (\r\n                <p>{item.DetectedText}</p>\r\n              ))}\r\n            </Box>\r\n          )}\r\n        </Grid>\r\n      </Grid>\r\n    </React.Fragment>\r\n  );\r\n};\r\n\r\nexport default VerifyPage;\r\n","/*\r\nThe function call_verification_api provides the interface to our internal Verification API. \r\ninput parameters:\r\n  param = {\r\n      image_person: picture of person in base64 encoding \r\n      image_id: picture of id card in base64 encoding \r\n    };\r\n\r\nreturns: \r\n {\r\n       \"verificationStatus\": \"failed\" or \"passed\" This variable shows if the verification process was completed or not. For example the verificationStatus can be \"failed\" in case any of the pictures did not contain face of a person.\r\n       In case of \"failed\" ignore the rest of the outputs.\r\n       \"verificationResult\": The actual result of verification process. \r\n       True if the person and id person are computed to be same. \r\n       False if they are not.\r\n       \"boundingBoxPerson\" :  Bounding box around face in the person image\r\n       \"boundingBoxId\":   Bounding box around face in the person image\r\n       \"extractedText\": List of all the text found in the id image.\r\n }\r\n\r\n*/\r\n\r\n\r\nconst base_url = \"https://ye1r7h9smj.execute-api.eu-central-1.amazonaws.com/\"\r\nconst trial_api_key = \"gTFtsPdjt30sFmB3f4975TXiEiNTlFF9cJYwHT1f\"\r\n\r\n   \r\n   export async function call_verification_api(image_person, image_id) {\r\n\r\n    const body = {\r\n      image_person: image_person,\r\n      image_id: image_id\r\n    }\r\n      \r\n    // Link to the api enpoint that needs to be called for verification\r\n        const verification_rest_api_resource =  base_url + \"Beta/verification/student-id\";\r\n        const response = await fetch(verification_rest_api_resource, {\r\n          method: \"POST\",\r\n          body: JSON.stringify(body),\r\n          headers: {\r\n            \"Content-Type\": \"application/json\",\r\n            \"x-api-key\": trial_api_key\r\n          },\r\n        });       \r\n        const response_object = await response.json()\r\n      \r\n        return response_object;\r\n      };\r\n","import React, { useState } from \"react\";\r\nimport Header from \"./components/layout/header\";\r\nimport \"./App.css\";\r\nimport IdUpload from \"./components/pages/idUpload\";\r\nimport FaceUpload from \"./components/pages/faceUpload\";\r\nimport Container from \"@material-ui/core/Container\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport Grid from \"@material-ui/core/Grid\";\r\nimport Typography from \"@material-ui/core/Typography\";\r\nimport logo from \"./components/layout/cubemos_logo_final.png\";\r\nimport Link from \"@material-ui/core/Link\";\r\nimport HorizontalStepper from \"./components/pages/horizontalStepper\";\r\nimport VerifyPage from \"./components/pages/verifyPage\";\r\nimport {call_verification_api} from \"./interfaceVerificationApi.js\"\r\n\r\n\r\n\r\nfunction Copyright() {\r\n  return (\r\n    <Typography variant=\"body2\" color=\"textSecondary\" align=\"center\">\r\n      {\"Copyright © \"}\r\n      <Link color=\"inherit\" href=\"https://cubemos.com/\">\r\n        Cubemos\r\n      </Link>{\" \"}\r\n      {new Date().getFullYear()}\r\n      <br />\r\n      <Link color=\"inherit\" href=\"https://www.cubemos.com/data-protection/\">\r\n        Data Protection\r\n      </Link>\r\n      {\"  |  \"}\r\n      <Link color=\"inherit\" href=\"https://www.cubemos.com/general-terms/\">\r\n        Terms and conditions\r\n      </Link>\r\n      {\"  |  \"}\r\n      <Link color=\"inherit\" href=\"https://www.cubemos.com/legal-notice/\">\r\n        Legal Notice\r\n      </Link>\r\n    </Typography>\r\n  );\r\n}\r\n\r\nconst verification_rest_api =\r\n  \"https://ye1r7h9smj.execute-api.eu-central-1.amazonaws.com/Beta/verification/student-id\";\r\n\r\n//For using amazon rekognition api\r\nvar AWS = require(\"aws-sdk\");\r\n// Initialize the Amazon Cognito credentials provider\r\n\r\n// You need the AWS credentials to run this demo. Contact @Patrick or @Paul to get the credentials.\r\n\r\n// Initialize the Amazon Cognito credentials provider\r\nAWS.config.region = \"eu-central-1\"; // Region\r\nAWS.config.credentials = new AWS.CognitoIdentityCredentials({\r\n  IdentityPoolId: \"eu-central-1:befefe77-ccae-4529-add4-f29e8040aa30\",\r\n});\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n  main: {\r\n    display: \"flex\",\r\n    flexDirection: \"row\",\r\n    alignItems: \"stretch\",\r\n    flexWrap: \"nowrap\",\r\n    paddingTop: theme.spacing(2),\r\n    justifyContent: \"center\",\r\n  },\r\n  title: {\r\n    textAlign: \"center\",\r\n    color: \"#1e3b95\",\r\n  },\r\n  result: {\r\n    textAlign: \"center\",\r\n    color: \"#525252\",\r\n    paddingLeft: \"15px\",\r\n    paddingTop: \"5px\",\r\n    paddingBottom: \"5px\",\r\n  },\r\n\r\n  buttonSubmit: {\r\n    marginBottom: \"10px\",\r\n    marginTop: \"5px\",\r\n  },\r\n\r\n  input: {\r\n    //height: \"100%\",\r\n    display: \"flex\",\r\n    flexDirection: \"row\",\r\n    flexWrap: \"nowrap\",\r\n    justifyContent: \"space-between\",\r\n  },\r\n  gridItem: {\r\n    flex: 1,\r\n    paddingTop: \"10px\",\r\n  },\r\n  footer: {\r\n    backgroundColor: theme.palette.background.paper,\r\n    padding: theme.spacing(10),\r\n    //For placing the footer at the bottom\r\n    // position:\"absolute\",\r\n    // left: \"0\",\r\n    // bottom:\"0\",\r\n    // right:\"0\"\r\n  },\r\n  button: {\r\n    display: \"flex\",\r\n    alignItems: \"center\",\r\n    justifyContent: \"center\",\r\n    padding: \"10px 10px\",\r\n  },\r\n}));\r\n\r\nfunction App() {\r\n  const classes = useStyles();\r\n  //State variable for storing image of ID card\r\n  const [imageIDcard, setimageIDcard] = useState(\"none\");\r\n  //State variable for storing image of person\r\n  const [imagePerson, setimagePerson] = useState(\"none\");\r\n\r\n  //State for holding the current step in the verification process\r\n  const [step, setStep] = useState(0);\r\n  //State for storing bounding boxes and passing them onto the components\r\n  const [bBoxes, setBBoxes] = useState([[null], [null]]);\r\n\r\n  //State for storing the text extracted from ID card picture\r\n  const [extractedText, setExtractedText] = useState(null);\r\n\r\n  //State for changing display color of background based on verification success or failure\r\n  const [resultBorder, setResultBorder] = useState(\"#f2f2f2\");\r\n  //State for storing the output text in case of verified or not verified face\r\n  const [resultText, setResultText] = useState(\r\n    \"Press the button to verify your identity\"\r\n  );\r\n\r\n  // \"Verification Success. The two faces match.\r\n  // \"Verification Fail. The two faces dont match.\"\r\n  const facesMatchPass = \"The two persons are the same.\";\r\n  const facesMatchFail = \"The two persons are not the same.\";\r\n\r\n  //Callback function called by verfiyPage when retry button is clicked. This function resets the state of the application to the first step.\r\n  const onRetry = () => {\r\n    setStep(0);\r\n    setResultText(\"Press the button to verify your identity\");\r\n    setResultBorder(\"#f2f2f2\");\r\n    setBBoxes([[null], [null]]);\r\n    setExtractedText(null);\r\n  };\r\n\r\n  //Function to store the base64 image recieved from idUpload component\r\n  const onIdUpload = (imageFromIdUpload) => {\r\n    setimageIDcard(imageFromIdUpload);\r\n  };\r\n  //Function to store the base64 image recieved from faceUpload component\r\n\r\n  const onFaceUpload = (imageFromFaceUpload) => {\r\n    setimagePerson(imageFromFaceUpload);\r\n  };\r\n\r\n  //Callback function which is called when next button is clicked. It forwards the state of the step variable to the next step in verification process.\r\n  const nextStep = () => {\r\n    setStep(String(Number(step) + 1));\r\n  };\r\n\r\n  // Callback function to call the Amazon facecompare api and also calls the Amazon textract api on the id card image\r\n  const onSubmit = async () => {\r\n\r\n\r\n    // Send the images as base64 encoded strings to the verification api with the following structure\r\n    \r\n      const image_person= imagePerson[1]\r\n      const image_id= imageIDcard[1]\r\n  \r\n\r\n\r\n    // call_verification_api function takes care of call to the verification api and returns the result of verification and text extracted from id card in an object:\r\n//    response: {\r\n//         \"verificationStatus\": \"failed\" or \"passed\" This variable defines if the verification process was completed or not.\r\n//         \"verificationResult\": The actual result of verification process. True if the person and id person are computed to be same. False if they are not.\r\n//         \"boundingBoxPerson\" :  Bounding box around face in the person image\r\n//         \"boundingBoxId\":   Bounding box around face in the person image\r\n//         \"extractedText\": List of all the text found in the id image.\r\n// }\r\n    const response = await call_verification_api(image_person,image_id );\r\n\r\n    let verificationStatus = response[\"verificationStatus\"]\r\n\r\n    if (verificationStatus === \"failed\"){\r\n      setResultText(\"Verification Result: \" + facesMatchFail)\r\n      window.alert(\"Invalid images(s) - please try again with better images.\")\r\n      onRetry()\r\n      //exit\r\n      return;\r\n    }\r\n\r\n    let verificationResult = response[\"verificationResult\"];\r\n\r\n    let bBoxPerson = [\r\n      response[\"boundingBoxPerson\"][\"Left\"],\r\n      response[\"boundingBoxPerson\"][\"Top\"],\r\n      response[\"boundingBoxPerson\"][\"Width\"],\r\n      response[\"boundingBoxPerson\"][\"Height\"],\r\n    ];\r\n\r\n    let bBoxId = [\r\n      response[\"boundingBoxId\"][\"Left\"],\r\n      response[\"boundingBoxId\"][\"Top\"],\r\n      response[\"boundingBoxId\"][\"Width\"],\r\n      response[\"boundingBoxId\"][\"Height\"],\r\n    ];\r\n\r\n    /* Commenting out extracted_text since the text recieved from the api is not cleaned. include this after cleaned text is presented by the verification api\r\n    let extracted_text = response[\"extractedText\"];\r\n    setExtractedText(extracted_text);\r\n*/\r\n    setBBoxes([bBoxPerson, bBoxId]);\r\n\r\n    \r\n\r\n    if (verificationResult === true) {\r\n      setResultText(\"Verification Result: \" + facesMatchPass)\r\n    } \r\n    else {\r\n      setResultText(\"Verification Result: \" + facesMatchFail)\r\n    }\r\n\r\n  };\r\n\r\n  return (\r\n    <React.Fragment>\r\n      <Header />\r\n\r\n      <Container maxWidth=\"sm\" className={classes.main}>\r\n        <Grid container className={classes.main} spacing={4}>\r\n          <Grid item>\r\n            <Container\r\n              style={{\r\n                backgroundColor: \"#f2f2f2\",\r\n                width: \"100%\",\r\n                maxWidth: \"1200px\",\r\n              }}\r\n            >\r\n              <Grid container className={classes.input}>\r\n                <Grid item className={classes.gridItem}>\r\n                  {\r\n                    {\r\n                      \"0\": (\r\n                        <FaceUpload\r\n                          callApp={onFaceUpload}\r\n                          nextStep={nextStep}\r\n                          bBox={bBoxes[0]}\r\n                        ></FaceUpload>\r\n                      ),\r\n                      \"1\": (\r\n                        <IdUpload\r\n                          callApp={onIdUpload}\r\n                          nextStep={nextStep}\r\n                          bBox={bBoxes[1]}\r\n                        ></IdUpload>\r\n                      ),\r\n                      \"2\": (\r\n                        <VerifyPage\r\n                          verify={onSubmit}\r\n                          retry={onRetry}\r\n                          images={[imagePerson[1], imageIDcard[1]]}\r\n                          bBox={bBoxes}\r\n                          extractedText={extractedText}\r\n                          resultText={resultText}\r\n                          resultBorder={resultBorder}\r\n                        ></VerifyPage>\r\n                      ),\r\n                    }[step]\r\n                  }\r\n                </Grid>\r\n              </Grid>\r\n            </Container>\r\n          </Grid>\r\n        </Grid>\r\n      </Container>\r\n\r\n      <HorizontalStepper step={step}></HorizontalStepper>\r\n      <footer className={classes.footer}>\r\n        <img\r\n          style={{ display: \"block\", margin: \"0 auto\" }}\r\n          src={logo}\r\n          height={\"40\"}\r\n          width={\"auto\"}\r\n          align=\"center\"\r\n          alt=\"Cubemos logo\"\r\n        />\r\n        <Copyright />\r\n      </footer>\r\n    </React.Fragment>\r\n  );\r\n}\r\n\r\nexport default App;\r\n","// This optional code is used to register a service worker.\r\n// register() is not called by default.\r\n\r\n// This lets the app load faster on subsequent visits in production, and gives\r\n// it offline capabilities. However, it also means that developers (and users)\r\n// will only see deployed updates on subsequent visits to a page, after all the\r\n// existing tabs open on the page have been closed, since previously cached\r\n// resources are updated in the background.\r\n\r\n// To learn more about the benefits of this model and instructions on how to\r\n// opt-in, read https://bit.ly/CRA-PWA\r\n\r\nconst isLocalhost = Boolean(\r\n  window.location.hostname === 'localhost' ||\r\n    // [::1] is the IPv6 localhost address.\r\n    window.location.hostname === '[::1]' ||\r\n    // 127.0.0.0/8 are considered localhost for IPv4.\r\n    window.location.hostname.match(\r\n      /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\r\n    )\r\n);\r\n\r\nexport function register(config) {\r\n  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\r\n    // The URL constructor is available in all browsers that support SW.\r\n    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);\r\n    if (publicUrl.origin !== window.location.origin) {\r\n      // Our service worker won't work if PUBLIC_URL is on a different origin\r\n      // from what our page is served on. This might happen if a CDN is used to\r\n      // serve assets; see https://github.com/facebook/create-react-app/issues/2374\r\n      return;\r\n    }\r\n\r\n    window.addEventListener('load', () => {\r\n      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\r\n\r\n      if (isLocalhost) {\r\n        // This is running on localhost. Let's check if a service worker still exists or not.\r\n        checkValidServiceWorker(swUrl, config);\r\n\r\n        // Add some additional logging to localhost, pointing developers to the\r\n        // service worker/PWA documentation.\r\n        navigator.serviceWorker.ready.then(() => {\r\n          console.log(\r\n            'This web app is being served cache-first by a service ' +\r\n              'worker. To learn more, visit https://bit.ly/CRA-PWA'\r\n          );\r\n        });\r\n      } else {\r\n        // Is not localhost. Just register service worker\r\n        registerValidSW(swUrl, config);\r\n      }\r\n    });\r\n  }\r\n}\r\n\r\nfunction registerValidSW(swUrl, config) {\r\n  navigator.serviceWorker\r\n    .register(swUrl)\r\n    .then(registration => {\r\n      registration.onupdatefound = () => {\r\n        const installingWorker = registration.installing;\r\n        if (installingWorker == null) {\r\n          return;\r\n        }\r\n        installingWorker.onstatechange = () => {\r\n          if (installingWorker.state === 'installed') {\r\n            if (navigator.serviceWorker.controller) {\r\n              // At this point, the updated precached content has been fetched,\r\n              // but the previous service worker will still serve the older\r\n              // content until all client tabs are closed.\r\n              console.log(\r\n                'New content is available and will be used when all ' +\r\n                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'\r\n              );\r\n\r\n              // Execute callback\r\n              if (config && config.onUpdate) {\r\n                config.onUpdate(registration);\r\n              }\r\n            } else {\r\n              // At this point, everything has been precached.\r\n              // It's the perfect time to display a\r\n              // \"Content is cached for offline use.\" message.\r\n              console.log('Content is cached for offline use.');\r\n\r\n              // Execute callback\r\n              if (config && config.onSuccess) {\r\n                config.onSuccess(registration);\r\n              }\r\n            }\r\n          }\r\n        };\r\n      };\r\n    })\r\n    .catch(error => {\r\n      console.error('Error during service worker registration:', error);\r\n    });\r\n}\r\n\r\nfunction checkValidServiceWorker(swUrl, config) {\r\n  // Check if the service worker can be found. If it can't reload the page.\r\n  fetch(swUrl, {\r\n    headers: { 'Service-Worker': 'script' }\r\n  })\r\n    .then(response => {\r\n      // Ensure service worker exists, and that we really are getting a JS file.\r\n      const contentType = response.headers.get('content-type');\r\n      if (\r\n        response.status === 404 ||\r\n        (contentType != null && contentType.indexOf('javascript') === -1)\r\n      ) {\r\n        // No service worker found. Probably a different app. Reload the page.\r\n        navigator.serviceWorker.ready.then(registration => {\r\n          registration.unregister().then(() => {\r\n            window.location.reload();\r\n          });\r\n        });\r\n      } else {\r\n        // Service worker found. Proceed as normal.\r\n        registerValidSW(swUrl, config);\r\n      }\r\n    })\r\n    .catch(() => {\r\n      console.log(\r\n        'No internet connection found. App is running in offline mode.'\r\n      );\r\n    });\r\n}\r\n\r\nexport function unregister() {\r\n  if ('serviceWorker' in navigator) {\r\n    navigator.serviceWorker.ready\r\n      .then(registration => {\r\n        registration.unregister();\r\n      })\r\n      .catch(error => {\r\n        console.error(error.message);\r\n      });\r\n  }\r\n}\r\n","import React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport './index.css';\r\nimport App from './App';\r\nimport * as serviceWorker from './serviceWorker';\r\n\r\nReactDOM.render(<App />, document.getElementById('root'));\r\n\r\n// If you want your app to work offline and load faster, you can change\r\n// unregister() to register() below. Note this comes with some pitfalls.\r\n// Learn more about service workers: https://bit.ly/CRA-PWA\r\nserviceWorker.unregister();\r\n"],"sourceRoot":""}