\r\n {isMenuRequired ? (\r\n \r\n \r\n \r\n ) : (\r\n {props.children} \r\n )}\r\n
\r\n \r\n
\r\n );\r\n};\r\n","import { createStyles, Theme } from \"@material-ui/core\";\r\nimport chroma from \"chroma-js\";\r\n\r\nexport const buttonStyles = (theme: Theme) =>\r\n createStyles({\r\n darkBtn: {\r\n // color: theme.palette.primary.contrastText,\r\n color:\r\n chroma.contrast(theme.palette.primary.main, \"white\") > 2\r\n ? \"white\"\r\n : \"black\",\r\n backgroundColor: theme.palette.primary.main,\r\n \"&:hover\": {\r\n backgroundColor: theme.palette.primary.light,\r\n },\r\n },\r\n linkBtn: {\r\n color: theme.palette.primary.light,\r\n \"&:hover\": {\r\n color: theme.palette.primary.contrastText,\r\n backgroundColor: theme.palette.primary.light,\r\n },\r\n },\r\n primaryBtn: {\r\n backgroundColor: theme.palette.primary.light,\r\n color: theme.palette.common.white,\r\n fontSize: \"0.9375rem\",\r\n border: \"3px solid \" + theme.palette.primary.light,\r\n \"&:hover\": {\r\n backgroundColor: theme.palette.primary.main,\r\n color: theme.palette.common.white,\r\n },\r\n },\r\n disabledBtn: {\r\n backgroundColor: theme.palette.grey[400],\r\n color: theme.palette.grey[500],\r\n },\r\n lightBtn: {\r\n backgroundColor: theme.palette.common.white,\r\n color: theme.palette.common.black,\r\n border: \"1px solid \" + theme.palette.primary.light,\r\n \"&:hover\": {\r\n backgroundColor: theme.palette.primary.light,\r\n color: theme.palette.primary.contrastText,\r\n },\r\n },\r\n });\r\n","export default __webpack_public_path__ + \"static/media/PersonDefault.9e8c6e58.svg\";","import { useCallback, useRef, useState } from \"react\";\r\n\r\nfunction preventDefault(e: Event) {\r\n if (!isTouchEvent(e)) return;\r\n\r\n if (e.touches.length < 2 && e.preventDefault) {\r\n e.preventDefault();\r\n }\r\n}\r\n\r\nexport function isTouchEvent(e: Event): e is TouchEvent {\r\n return e && \"touches\" in e;\r\n}\r\n\r\ninterface PressHandlers\r\n \r\n {props.title}\r\n \r\n\r\n {props.actions && (\r\n
\r\n \r\n {props.actions.map((action: ReactNode, i: number) => {\r\n return (\r\n \r\n {action}\r\n \r\n );\r\n })}\r\n
\r\n )}\r\n \r\n
\r\n );\r\n};\r\n","import React, { useState } from \"react\";\r\nimport { createStyles, makeStyles } from \"@material-ui/core/styles\";\r\nimport { Theme } from \"@material-ui/core\";\r\nimport { FaceDisplay } from \"./FaceDisplay\";\r\n\r\nconst useStyles = makeStyles((theme: Theme) =>\r\n createStyles({\r\n enrolItem: {\r\n \"&:hover\": {\r\n \"& $badgeContent\": {\r\n opacity: 0,\r\n },\r\n },\r\n // width: \"150px\",\r\n },\r\n badgeContent: {},\r\n cardImage: {\r\n width: \"375px\",\r\n height: \"375px\",\r\n },\r\n })\r\n);\r\n\r\ntype EnrolmentItemPropsType = {\r\n imgUrl: string | undefined;\r\n removePhoto?: Function;\r\n checked?: boolean;\r\n selectImage?: Function;\r\n longClick?: Function;\r\n name?: string;\r\n};\r\n\r\nexport const EnrolmentItem = (props: EnrolmentItemPropsType) => {\r\n const classes = useStyles();\r\n const [anchorElement, setAnchor] = useState\r\n \r\n \r\n \r\n \r\n \r\n */}\r\n
\r\n );\r\n};\r\n","import React, { ChangeEvent, Fragment, ReactNode } from \"react\";\r\nimport {\r\n Checkbox,\r\n CheckboxClassKey,\r\n createStyles,\r\n FormControl,\r\n FormControlLabel,\r\n InputLabel,\r\n Link,\r\n makeStyles,\r\n Theme,\r\n Typography,\r\n} from \"@material-ui/core\";\r\nimport { ClassNameMap } from \"@material-ui/styles\";\r\nimport CircleChecked from \"@material-ui/icons/CheckCircle\";\r\nimport CircleUnchecked from \"@material-ui/icons/RadioButtonUnchecked\";\r\n\r\nimport { inputStyles } from \"../../styles/generalStyles\";\r\n\r\nconst useStyles = makeStyles((theme: Theme) =>\r\n createStyles({\r\n ...inputStyles(theme),\r\n root: {\r\n color: theme.palette.primary.main,\r\n \"&$checked\": {\r\n color: theme.palette.primary.main,\r\n },\r\n },\r\n checked: {},\r\n invalid: {\r\n color: theme.palette.error.main,\r\n \"&$invalidChecked\": {\r\n color: theme.palette.error.main,\r\n },\r\n },\r\n invalidChecked: {},\r\n })\r\n);\r\n\r\ntype SingleCheckBoxPropsType = {\r\n checked: boolean;\r\n name: string;\r\n classes?: Partial\r\n \r\n \r\n
\r\n \r\n );\r\n};\r\n","import { Theme } from \"@material-ui/core\";\r\nimport Button from \"@material-ui/core/Button\";\r\nimport { createStyles, makeStyles } from \"@material-ui/core/styles\";\r\nimport { buttonStyles } from \"../../styles/buttonStyles\";\r\n\r\nconst useStyles = makeStyles((theme: Theme) => {\r\n createStyles({\r\n ...buttonStyles(theme),\r\n rightMargin: {\r\n marginRight: \"10px\",\r\n },\r\n });\r\n});\r\n\r\ntype CancelButtonPropsType = {\r\n onClick: Function;\r\n title?: string;\r\n};\r\n\r\nexport const CancelButton = (props: CancelButtonPropsType) => {\r\n const handleClick = () => {\r\n props.onClick();\r\n };\r\n\r\n return (\r\n \r\n );\r\n};\r\n","import { Button, Theme } from \"@material-ui/core\";\r\nimport { createStyles, makeStyles } from \"@material-ui/core/styles\";\r\nimport React from \"react\";\r\nimport { useCallback, useRef } from \"react\";\r\nimport Webcam from \"react-webcam\";\r\nimport { buttonStyles } from \"../../global/styles/buttonStyles\";\r\nimport AddAPhotoIcon from \"@material-ui/icons/AddAPhoto\";\r\nimport { CancelButton } from \"../../global/components/Buttons/CancelButton\";\r\nimport classNames from \"classnames\";\r\nimport { iconStyles } from \"../../global/styles/iconStyles\";\r\n\r\nconst useStyles = makeStyles((theme: Theme) =>\r\n createStyles({\r\n ...buttonStyles(theme),\r\n ...iconStyles(theme),\r\n webcam: {\r\n width: \"100%\",\r\n height: \"100%\",\r\n },\r\n })\r\n);\r\n\r\ntype ImagusWebcamPropsType = {\r\n captureCamera: Function;\r\n cancelCamera: Function;\r\n setError?: Function;\r\n isDisabled?: boolean;\r\n};\r\n\r\nexport const ImagusWebcam = (props: ImagusWebcamPropsType) => {\r\n const classes = useStyles();\r\n const webcamRef = useRef\r\n \r\n
\r\n );\r\n};\r\n","import { Button, Theme } from \"@material-ui/core\";\r\nimport { createStyles, makeStyles } from \"@material-ui/core/styles\";\r\nimport CloudUploadIcon from \"@material-ui/icons/CloudUpload\";\r\nimport DoneIcon from \"@material-ui/icons/Done\";\r\nimport chroma from \"chroma-js\";\r\nimport classNames from \"classnames\";\r\nimport { useState } from \"react\";\r\nimport { buttonStyles } from \"../../styles/buttonStyles\";\r\nimport { iconStyles } from \"../../styles/iconStyles\";\r\n\r\nconst useStyles = makeStyles((theme: Theme) =>\r\n createStyles({\r\n ...buttonStyles(theme),\r\n ...iconStyles(theme),\r\n fileUploadButton: {\r\n //Mui-Button style (in used because MuiButton do not work with label)\r\n fontFamily: \"Roboto, Helvetica, Arial, sans-serif\",\r\n fontWeight: 500,\r\n lineHeight: 1.75,\r\n\r\n //custom styling\r\n height: \"270px\",\r\n color: theme.palette.grey[500],\r\n textTransform: \"capitalize\",\r\n padding: \"22px 0\",\r\n borderRadius: \"3px\",\r\n boxShadow: \"0 0 0 1px \" + theme.palette.primary.main,\r\n textAlign: \"center\",\r\n width: \"100%\",\r\n backgroundColor: theme.palette.contentBackgroundColor,\r\n \"&:hover, &.hover, &:active, &.active\": {\r\n cursor: \"pointer\",\r\n backgroundColor: theme.palette.primary.light,\r\n color:\r\n chroma.contrast(theme.palette.primary.light, \"white\") > 2\r\n ? \"white\"\r\n : \"black\",\r\n },\r\n \"& > SPAN\": {\r\n display: \"block\",\r\n },\r\n },\r\n disabled: {\r\n backgroundColor: theme.palette.grey[200],\r\n \"&:hover, &.hover, &:active, &.active\": {\r\n cursor: \"not-allowed\",\r\n backgroundColor: theme.palette.grey[200],\r\n color: theme.palette.grey[500],\r\n },\r\n \"& > SPAN\": {\r\n display: \"block\",\r\n },\r\n },\r\n fileUploadText: {\r\n fontSize: \"1.5rem\",\r\n lineHeight: \"30px\",\r\n },\r\n fileUploadInput: {\r\n opacity: 0,\r\n width: \"0.1px\",\r\n \"&:hover, &.hover\": {\r\n cursor: \"pointer\",\r\n },\r\n },\r\n })\r\n);\r\n\r\ntype DraggableUploadButtonPropsType = {\r\n uploadFileAction: Function;\r\n disabled?: boolean;\r\n};\r\n\r\nexport const DraggableUploadButton = (\r\n props: DraggableUploadButtonPropsType\r\n) => {\r\n const classes = useStyles();\r\n const [dragged, setDragged] = useState(false);\r\n\r\n const customPreventDefault = (event: React.DragEvent) => {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n };\r\n const inputDragEnter = (event: React.DragEvent) => {\r\n customPreventDefault(event);\r\n setDragged(true);\r\n };\r\n\r\n const inputDragLeave = (event: React.DragEvent) => {\r\n customPreventDefault(event);\r\n setDragged(false);\r\n };\r\n\r\n const inputDrop = (event: React.DragEvent) => {\r\n customPreventDefault(event);\r\n if (event.dataTransfer.files) {\r\n let file = event.dataTransfer.files[0];\r\n props.uploadFileAction(file);\r\n } else {\r\n //set error\r\n }\r\n };\r\n\r\n const inputChange = (event: React.ChangeEvent\r\n \r\n \r\n \r\n Drag and Drop\r\n
\r\n Photo here.\r\n
\r\n Or Click to Upload\r\n \r\n {dragged ? (\r\n
\r\n \r\n \r\n Photo here.\r\n
\r\n Or Click to Upload\r\n \r\n {dragged ? (\r\n
\r\n \r\n {props.samples.map((sample: string, index: number) => (\r\n \r\n props.loadSample(sample)}\r\n >\r\n \r\n ))}\r\n \r\n
\r\n );\r\n};\r\n","import classNames from \"classnames\";\r\nimport chroma from \"chroma-js\";\r\nimport { createStyles, makeStyles, Theme } from \"@material-ui/core\";\r\nimport PhotoCameraIcon from \"@material-ui/icons/PhotoCamera\";\r\nimport { buttonStyles } from \"../../styles/buttonStyles\";\r\nimport { iconStyles } from \"../../styles/iconStyles\";\r\n\r\nconst useStyles = makeStyles((theme: Theme) =>\r\n createStyles({\r\n ...buttonStyles(theme),\r\n ...iconStyles(theme),\r\n cameraButton: {\r\n //Mui-Button style (in used because MuiButton do not work with label)\r\n fontFamily: \"Roboto, Helvetica, Arial, sans-serif\",\r\n fontWeight: 500,\r\n lineHeight: 1.75,\r\n\r\n //custom styling\r\n\r\n height: \"270px\",\r\n color: theme.palette.grey[500],\r\n textTransform: \"capitalize\",\r\n padding: \"22px 0\",\r\n borderRadius: \"3px\",\r\n boxShadow: \"0 0 0 1px \" + theme.palette.primary.main,\r\n textAlign: \"center\",\r\n width: \"100%\",\r\n backgroundColor: theme.palette.contentBackgroundColor,\r\n \"&:hover, &.hover, &:active, &.active\": {\r\n cursor: \"pointer\",\r\n backgroundColor: theme.palette.primary.light,\r\n color:\r\n chroma.contrast(theme.palette.primary.light, \"white\") > 2\r\n ? \"white\"\r\n : \"black\",\r\n },\r\n \"& > SPAN\": {\r\n display: \"block\",\r\n },\r\n },\r\n disabled: {\r\n backgroundColor: theme.palette.grey[200],\r\n \"&:hover, &.hover, &:active, &.active\": {\r\n cursor: \"not-allowed\",\r\n backgroundColor: theme.palette.grey[200],\r\n color: theme.palette.grey[500],\r\n },\r\n \"& > SPAN\": {\r\n display: \"block\",\r\n },\r\n },\r\n buttonText: {\r\n fontSize: \"1.5rem\",\r\n lineHeight: \"30px\",\r\n },\r\n hiddenItem: {\r\n opacity: 0,\r\n width: \"0.1px\",\r\n \"&:hover, &.hover\": {\r\n cursor: \"pointer\",\r\n },\r\n },\r\n })\r\n);\r\n\r\ntype CameraLabelButtonPropsType = {\r\n enableCamera: Function;\r\n disabled?: boolean;\r\n};\r\n\r\nexport const CameraLabelButton = (props: CameraLabelButtonPropsType) => {\r\n const classes = useStyles();\r\n\r\n const handleClick = (e: React.MouseEvent) => {\r\n if (!props.disabled) {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n\r\n props.enableCamera();\r\n }\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n
\r\n );\r\n } else if (panel.isCamera) {\r\n content = (\r\n \r\n \r\n \r\n \r\n \r\n {/* \r\n \r\n\r\n \r\n Photo requirements:\r\n
* Good quality photos\r\n
* Uniform lighting with appropriate brightness and contrast to\r\n show natural skin tone\r\n
* Face centred and looking at the camera straight on; not\r\n tilted in any direction\r\n \r\n\r\n {/*\r\n {props.permanent ? \"Sample Gallery\" : \"From Permanent List\"}\r\n */}\r\n \r\n
\r\n );\r\n }\r\n\r\n return content;\r\n};\r\n\r\nexport default forwardRef(FaceUpload);\r\n","export default __webpack_public_path__ + \"static/media/Abdel_Nasser_Assidi_0002.6d291a39.jpg\";","export default __webpack_public_path__ + \"static/media/George_HW_Bush_0006.041d2cad.jpg\";","export default __webpack_public_path__ + \"static/media/George_P_Bush_0002.248330dc.jpg\";","export default __webpack_public_path__ + \"static/media/George_W_Bush_0042.7cc9d094.jpg\";","export default __webpack_public_path__ + \"static/media/George_W_Bush_0098.d2afcec8.jpg\";","export default __webpack_public_path__ + \"static/media/Michael_Jackson_0002.efac34ee.jpg\";","export default __webpack_public_path__ + \"static/media/Michael_Jackson_0004.b6e1306e.jpg\";","import {\r\n Button,\r\n CircularProgress,\r\n createStyles,\r\n makeStyles,\r\n Theme,\r\n} from \"@material-ui/core\";\r\nimport classNames from \"classnames\";\r\nimport { buttonStyles } from \"../../styles/buttonStyles\";\r\n\r\nconst useStyles = makeStyles((theme: Theme) =>\r\n createStyles({\r\n ...buttonStyles(theme),\r\n fullWidth: {\r\n width: \"100%\",\r\n },\r\n autoWidth: {\r\n width: \"auto\",\r\n },\r\n })\r\n);\r\n\r\ntype SubmitButtonPropsType = {\r\n loading?: boolean;\r\n disabled?: boolean;\r\n title?: string;\r\n fullWidth?: boolean;\r\n isMainButton?: boolean;\r\n id?: string;\r\n onClick?: Function;\r\n};\r\n\r\nexport const SubmitButton = (props: SubmitButtonPropsType) => {\r\n const classes = useStyles();\r\n\r\n const handleSubmit = () => {\r\n props.onClick && props.onClick();\r\n };\r\n\r\n if (props.loading) {\r\n return (\r\n * Good quality photos\r\n
* Uniform lighting with appropriate brightness and contrast to\r\n show natural skin tone\r\n
* Face centred and looking at the camera straight on; not\r\n tilted in any direction\r\n \r\n\r\n {/*
\r\n \r\n );\r\n }\r\n });\r\n\r\n if (Object.keys(props.errors).length > 0) {\r\n return (\r\n
\r\n
\r\n );\r\n } else {\r\n return null;\r\n }\r\n};\r\n","import React, {\r\n ElementRef,\r\n forwardRef,\r\n ForwardRefRenderFunction,\r\n Fragment,\r\n useEffect,\r\n useImperativeHandle,\r\n useRef,\r\n useState,\r\n} from \"react\";\r\nimport loadImage from \"blueimp-load-image\";\r\nimport {\r\n CircularProgress,\r\n Dialog,\r\n DialogActions,\r\n DialogContent,\r\n Grid,\r\n} from \"@material-ui/core\";\r\n\r\nimport {\r\n CircleFaceType,\r\n ImagusFacePicker,\r\n} from \"../../../ImagusComponents/Gadgets/ImagusFacePicker\";\r\n\r\nimport FaceUpload from \"./FaceUpload\";\r\n\r\nimport Image1 from \"../../../images/samples/Abdel_Nasser_Assidi_0002.jpg\";\r\nimport Image2 from \"../../../images/samples/George_HW_Bush_0006.jpg\";\r\nimport Image3 from \"../../../images/samples/George_P_Bush_0002.jpg\";\r\nimport Image4 from \"../../../images/samples/George_W_Bush_0042.jpg\";\r\nimport Image5 from \"../../../images/samples/George_W_Bush_0098.jpg\";\r\nimport Image6 from \"../../../images/samples/Michael_Jackson_0002.jpg\";\r\nimport Image7 from \"../../../images/samples/Michael_Jackson_0004.jpg\";\r\n\r\nimport { CancelButton } from \"../Buttons/CancelButton\";\r\nimport { SubmitButton } from \"../Buttons/SubmitButton\";\r\nimport {\r\n EnrolmentInputType,\r\n ImageType,\r\n PairCoordinateType,\r\n PersonType,\r\n} from \"../../types/faceSearchTypes\";\r\nimport {\r\n cropImageToFace,\r\n faceCentreFromEyes,\r\n radiusFromEyes,\r\n} from \"../../helperFunctions/cropImageToFace\";\r\nimport { EnrolmentType } from \"../../reducers/profilesReducers\";\r\nimport { ErrorDisplay, setErrorMessage } from \"../ErrorDisplay\";\r\nimport { useSelector } from \"react-redux\";\r\nimport { AppState } from \"../../../Store\";\r\n\r\ntype ImageUploadProcessPropsType = {\r\n detectedFaces: Array\r\n
\r\n \r\n \r\n Passed\r\n \r\n
\r\n );\r\n\r\n const underThreshold = (message: string): JSX.Element => {\r\n return (\r\n \r\n \r\n {message}\r\n \r\n
\r\n );\r\n };\r\n\r\n const handleFaceChange = (index: number) => {\r\n setFaceIndex(index);\r\n };\r\n const handleDisplayDetails = (status: boolean) => {\r\n setShowDetails(status);\r\n };\r\n\r\n const roundFloat = (point: number): number => {\r\n return Math.round((point + Number.EPSILON) * 100) / 100;\r\n };\r\n\r\n const passFrontalCheck = (face: CircleFaceType) => {\r\n return face && face.resultMetrics.matchFrontalThreshold >= 100;\r\n };\r\n\r\n const passBlurrinessCheck = (face: CircleFaceType) => {\r\n return face && face.resultMetrics.matchBlurrinessThreshold >= 100;\r\n };\r\n\r\n const passConfidenceCheck = (face: CircleFaceType) => {\r\n return face && face.resultMetrics.matchConfidenceThreshold >= 100;\r\n };\r\n\r\n const passPersonCheck = (face: CircleFaceType) => {\r\n const exist = face.search && face.search.probability > 0;\r\n\r\n if (exist) {\r\n if (face.search.profileId !== props.selectedProfile.uid) {\r\n return false;\r\n }\r\n } else {\r\n if (props.selectedProfile.enrolments.length > 0) {\r\n return false;\r\n }\r\n }\r\n\r\n return true;\r\n };\r\n\r\n const checkDetails = () => {\r\n console.log(\"checking.....\");\r\n const errors = {} as Record\r\n \r\n Your enrolments\r\n \r\n \r\n {/** Permanent Photos */}\r\n
\r\n \r\n downloadFilesById(activeProfile.uid)}\r\n >\r\n Download your enrolments\r\n ,\r\n ]}\r\n />\r\n {/* {\r\n setOpenAddForm(false);\r\n }}\r\n form={\r\n setOpenAddForm(false)}\r\n permanent={true}\r\n updateEnrolment={handleUpdateProfile}\r\n enrolments={permanentEnrolments}\r\n />\r\n }\r\n /> */}\r\n
\r\n - {races}
\r\n \r\n
\r\n {open ? (\r\n \r\n
\r\n )} */}\r\n\r\n {open && (\r\n \r\n {/** Drawer on normal screen */}\r\n \r\n \r\n\r\n {/**\r\n * To do:\r\n * Drawer on smaller and mobile screen */}\r\n {/** Main screen */}\r\n \r\n {props.raceList && raceIndex !== undefined && (\r\n // setModal(true)}\r\n // // updateFromPermanents={addFromPermanentList}\r\n // addEnrolment={addNewEnrolments}\r\n // removeEnrolment={removeEnrolmentsFromItem}\r\n // faceSearch={props.faceSearch}\r\n // uploadFile={props.uploadFile}\r\n // permanentEnrolments={props.permanentEnrolments}\r\n // profileName={props.profileName}\r\n // />\r\n\r\n \r\n \r\n \r\n\r\n \r\n \r\n Photos uploaded to {props.raceList[raceIndex].name}\r\n \r\n \r\n \r\n \r\n \r\n )}\r\n \r\n\r\n handleDeleteDialog(false)}\r\n confirmFunction={handleRemoveProfile}\r\n itemName={selectedRace?.name}\r\n />\r\n\r\n {props.raceList && raceIndex !== undefined && (\r\n setIsProfileModalOpen(false)}\r\n form={\r\n
\r\n );\r\n};\r\n","import { useEffect, useState } from \"react\";\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\nimport {\r\n fetchAllProfiles,\r\n fetchProfileById,\r\n getProfileAvatar,\r\n} from \"../../../admin/actions/participantsActions\";\r\nimport { AppState } from \"../../../Store\";\r\nimport { SET_SEARCH_QUERY } from \"../../actions/actionNames\";\r\nimport { uploadFile, detectFaces } from \"../../actions/faceSearchActions\";\r\nimport {\r\n fetchActiveProfile,\r\n removeProfiles,\r\n updateProfile,\r\n} from \"../../actions/profilesActions\";\r\nimport {\r\n fetchRace,\r\n fetchRaceDetailsById,\r\n updateRaceEnrolment,\r\n} from \"../../actions/raceActions\";\r\nimport { RacePageLayout } from \"../../components/race/RacePageLayout\";\r\nimport { useFetchAllProfiles } from \"../../helperFunctions/useFetchAllProfiles\";\r\n\r\nimport { useFetchRaces } from \"../../helperFunctions/useFetchRaces\";\r\nimport { useSelectProfile } from \"../../helperFunctions/useSelectProfile\";\r\nimport { EnrolmentType, RunnerType } from \"../../reducers/profilesReducers\";\r\nimport { Race } from \"../../reducers/raceReducers\";\r\nimport { RunnerResponseModel } from \"../../types/ApiReturnTypes\";\r\nimport { EnrolmentInputType } from \"../../types/faceSearchTypes\";\r\n\r\ntype RaceReduxPropsType = {\r\n races: Array\r\n downloadEnrolments()}\r\n >\r\n Download enrolments\r\n ,\r\n setIsProfileModalOpen(true)}\r\n >\r\n Create profile\r\n ,\r\n ]}\r\n />\r\n\r\n
\r\n \r\n
\r\n \r\n setIsProfileModalOpen(false)}\r\n form={\r\n
\r\n \r\n Setting \r\n
\r\n \r\n );\r\n};\r\n","import { createStyles, makeStyles, Theme } from \"@material-ui/core\";\r\nimport CloseIcon from \"@material-ui/icons/Close\";\r\nimport DoneIcon from \"@material-ui/icons/Done\";\r\n\r\nimport { PasswordStrength } from \"../../helperFunctions/stringFunctions\";\r\nimport { iconStyles } from \"../../styles/iconStyles\";\r\n\r\nconst useStyles = makeStyles((theme: Theme) =>\r\n createStyles({\r\n ...iconStyles(theme),\r\n root: {\r\n position: \"relative\",\r\n width: \"40%\",\r\n minWidth: \"218px\",\r\n padding: \"5px 20px\",\r\n borderRadius: \"15px\",\r\n border: \"1px solid \" + theme.palette.grey[300],\r\n backgroundColor: \"rgb(238,238,238)\",\r\n boxShadow: \"5px 5px 5px #888888\",\r\n \"&:before\": {\r\n position: \"absolute\",\r\n bottom: \"100%\",\r\n content: \"''\",\r\n right: \"52px\",\r\n borderRight: \"17px solid transparent\",\r\n borderBottom: \"17px solid \" + theme.palette.grey[300],\r\n borderLeft: \"17px solid transparent\",\r\n },\r\n \"&:after\": {\r\n position: \"absolute\",\r\n bottom: \"100%\",\r\n content: \"''\",\r\n right: \"53px\",\r\n borderRight: \"16px solid transparent\",\r\n borderBottom: \"16px solid rgb(238,238,238)\",\r\n borderLeft: \"16px solid transparent\",\r\n },\r\n \"& $title\": {\r\n margin: \"0 0 5px 0\",\r\n fontWeight: \"bold\",\r\n fontSize: \"0.9375rem\",\r\n },\r\n \"& ul\": {\r\n padding: 0,\r\n margin: 0,\r\n listStyleType: \"none\",\r\n \"& li\": {\r\n height: \"24px\",\r\n minHeight: \"20px\",\r\n lineHeight: \"22px\",\r\n fontSize: \"0.75rem\",\r\n \"& SVG\": {\r\n verticalAlign: \"top\",\r\n },\r\n },\r\n },\r\n \"& $invalid\": {\r\n color: theme.palette.error.main,\r\n },\r\n \"& $valid\": {\r\n color: theme.palette.success.main,\r\n },\r\n },\r\n title: {},\r\n invalid: {},\r\n valid: {},\r\n })\r\n);\r\n\r\ntype PasswordStrengthBoxPropsType = {\r\n password: string;\r\n passwordStrength: PasswordStrength;\r\n};\r\n\r\nexport const PasswordStrengthBox = (props: PasswordStrengthBoxPropsType) => {\r\n const classes = useStyles();\r\n\r\n const shouldDisplay = (): boolean => {\r\n return (\r\n Object.values(props.passwordStrength).includes(false) && !!props.password\r\n );\r\n };\r\n\r\n if (shouldDisplay()) {\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n Terms and Conditions\r\n \r\n \r\n Delete Your Account\r\n \r\n \r\n This will delete your account forever\r\n \r\n \r\n Proceed to delete\r\n \r\n
\r\n \r\n
\r\n );\r\n } else return null;\r\n};\r\n","import { Grid, Theme } from \"@material-ui/core\";\r\nimport { createStyles, makeStyles } from \"@material-ui/core/styles\";\r\nimport React, { ChangeEvent, FormEvent, useState } from \"react\";\r\nimport { SingleTextField } from \"../formInputs/SingleTextField\";\r\nimport { formRightBtnBlock } from \"../../styles/generalStyles\";\r\nimport { ErrorDisplay, setErrorMessage } from \"../ErrorDisplay\";\r\nimport { CancelButton } from \"../Buttons/CancelButton\";\r\nimport { SubmitButton } from \"../Buttons/SubmitButton\";\r\nimport { PasswordStrengthBox } from \"./PasswordStrengthBox\";\r\nimport {\r\n checkPasswordStrength,\r\n PasswordStrength,\r\n} from \"../../helperFunctions/stringFunctions\";\r\n\r\nconst useStyles = makeStyles((theme: Theme) =>\r\n createStyles({\r\n formRightBtnBlock,\r\n })\r\n);\r\n\r\ntype PasswordType = {\r\n oldPassword: string;\r\n newPassword: string;\r\n newPasswordConfirm: string;\r\n};\r\n\r\ntype ChangePasswordFormPropsType = {\r\n onClose: Function;\r\n changePassword: Function;\r\n};\r\n\r\nexport const ChangePasswordForm = (props: ChangePasswordFormPropsType) => {\r\n const classes = useStyles();\r\n const [loading, setLoading] = useState(false);\r\n const [passwords, setPasswords] = useStatePassword Rules:
\r\n - \r\n
\r\n
\r\n );\r\n};\r\n","import {\r\n createStyles,\r\n Grid,\r\n IconButton,\r\n InputAdornment,\r\n makeStyles,\r\n Theme,\r\n Typography,\r\n} from \"@material-ui/core\";\r\nimport classNames from \"classnames\";\r\nimport PersonIcon from \"@material-ui/icons/Person\";\r\nimport LockOutlinedIcon from \"@material-ui/icons/LockOutlined\";\r\nimport VisibilityIcon from \"@material-ui/icons/Visibility\";\r\nimport VisibilityOffIcon from \"@material-ui/icons/VisibilityOff\";\r\nimport EmailIcon from \"@material-ui/icons/Email\";\r\nimport { iconStyles } from \"../../styles/iconStyles\";\r\nimport {\r\n formText,\r\n formRightBtnBlock,\r\n inputStyles,\r\n bannerStyles,\r\n} from \"../../styles/generalStyles\";\r\nimport LogoImage from \"../../../images/AHA-Logo.png\";\r\nimport React, { ChangeEvent, FormEvent, Fragment, useState } from \"react\";\r\nimport { SingleTextField } from \"../formInputs/SingleTextField\";\r\nimport { SubmitButton } from \"../Buttons/SubmitButton\";\r\nimport { ErrorDisplay, setErrorMessage } from \"../ErrorDisplay\";\r\nimport { Link } from \"react-router-dom\";\r\nimport {\r\n checkEmailFormat,\r\n checkPasswordStrength,\r\n checkUserNameFormat,\r\n PasswordStrength,\r\n} from \"../../helperFunctions/stringFunctions\";\r\nimport { PasswordStrengthBox } from \"./PasswordStrengthBox\";\r\nimport { SignupSuccess } from \"../../container/SignupSuccess\";\r\nimport { useDispatch } from \"react-redux\";\r\n\r\nconst useStyles = makeStyles((theme: Theme) =>\r\n createStyles({\r\n ...iconStyles(theme),\r\n ...inputStyles(theme),\r\n ...bannerStyles(theme),\r\n formText,\r\n formRightBtnBlock,\r\n wrapper: {\r\n width: \"100%\",\r\n maxWidth: \"480px\",\r\n margin: \"0 auto\",\r\n // paddingTop: \"50px\",\r\n\r\n backgroundColor: \"inherit\",\r\n height: \"auto\",\r\n border: \"1px solid black\",\r\n },\r\n formLogoWrapper: {\r\n width: \"100%\",\r\n maxWidth: \"480px\",\r\n margin: \"0 auto\",\r\n // paddingTop: \"50px\",\r\n textAlign: \"center\",\r\n backgroundColor: \"inherit\",\r\n height: \"auto\",\r\n },\r\n formLogo: {\r\n margin: \"0 auto\",\r\n width: \"50%\",\r\n padding: \"10px\",\r\n height: \"auto\",\r\n maxHeight: \"150px\",\r\n float: \"none\",\r\n },\r\n clear: {\r\n clear: \"both\",\r\n },\r\n titleText: {\r\n color: theme.palette.common.black,\r\n },\r\n textAlignLeft: {\r\n width: \"100%\",\r\n textAlign: \"left\",\r\n },\r\n titleMargin: {\r\n marginBottom: \"30px\",\r\n },\r\n iconBlock: {\r\n height: \"54px\",\r\n lineHeight: \"110px\",\r\n },\r\n formHint: {\r\n fontStyle: \"italic\",\r\n paddingRight: \"10px\",\r\n },\r\n formLink: {\r\n color: theme.palette.primary.main,\r\n textDecoration: \"underline\",\r\n fontWeight: 500,\r\n },\r\n panel: {\r\n width: \"85%\",\r\n margin: \"auto\",\r\n },\r\n switchText: {\r\n fontStyle: \"italic\",\r\n },\r\n bannerTitle: {\r\n backgroundColor: theme.palette.common.black,\r\n color: theme.palette.common.white,\r\n height: \"50px\",\r\n },\r\n })\r\n);\r\n\r\ntype LoginFormPropsType = {\r\n userAction: Function;\r\n isSignup?: boolean;\r\n};\r\n\r\nexport const LoginForm = (props: LoginFormPropsType) => {\r\n //states\r\n const [errors, setErrors] = useState\r\n 
\r\n \r\n Redirecting to Login Page ...\r\n \r\n {!loading &&
\r\n \r\n \r\n \r\n \r\n \r\n \r\n Registration Completed!\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n {props.isSignup && (\r\n <>\r\n {\" \"}\r\n \r\n \r\n \r\n \r\n \r\n )}\r\n\r\n {/* \r\n \r\n \r\n */}\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n setPasswordDispaly(!passwordDisplay)}\r\n >\r\n {passwordDisplay ? (\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n \r\n \r\n 0}\r\n />\r\n\r\n \r\n Forget your password?\r\n \r\n Reset Here\r\n \r\n \r\n \r\n \r\n {props.isSignup ? (\r\n \r\n \r\n Already have an account?\r\n \r\n \r\n Login\r\n \r\n \r\n ) : (\r\n \r\n \r\n Don't have an account?\r\n \r\n \r\n Sign Up\r\n \r\n \r\n )}\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n","import React from \"react\";\r\nimport { createStyles, makeStyles, Theme } from \"@material-ui/core\";\r\nimport classNames from \"classnames\";\r\nimport { panelStyles } from \"../styles/generalStyles\";\r\nimport { LoginForm } from \"../components/users/LoginForm\";\r\nimport { userLogin } from \"../actions/userActions\";\r\n\r\nconst useStyles = makeStyles((theme: Theme) =>\r\n createStyles({\r\n ...panelStyles(theme),\r\n maxHeight: {\r\n height: \"100%\",\r\n },\r\n\r\n padding: {\r\n paddingTop: \"30px\",\r\n },\r\n\r\n // center: {\r\n // position: \"absolute\",\r\n // top: \"50%\",\r\n // left: \"50%\",\r\n // transform: \"translate(-50%, -55%)\",\r\n // },\r\n })\r\n);\r\n\r\nexport const Login = () => {\r\n const classes = useStyles();\r\n\r\n const handleUserLogin = (\r\n email: string,\r\n password: string,\r\n doneBack?: Function,\r\n failBack?: Function\r\n ) => {\r\n userLogin(email, password, doneBack, failBack);\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n {props.isSignup ? \"Create a new account\" : \"Sign In\"}\r\n \r\n
\r\n \r\n \r\n Face Capture Module for AHA\r\n \r\n
\r\n \r\n {props.title}\r\n
\r\n \r\n\r\n OK\r\n \r\n )}\r\n
\r\n \r\n );\r\n};\r\n","import { ChangeEvent, FormEvent, Fragment, useState } from \"react\";\r\nimport {\r\n createStyles,\r\n Grid,\r\n makeStyles,\r\n Theme,\r\n Typography,\r\n} from \"@material-ui/core\";\r\n\r\nimport EmailIcon from \"@material-ui/icons/Email\";\r\nimport LockOutlinedIcon from \"@material-ui/icons/LockOutlined\";\r\nimport VerifiedUserIcon from \"@material-ui/icons/VerifiedUser\";\r\n\r\nimport LogoImage from \"../../../images/TracyWhiteBackground.png\";\r\nimport {\r\n formText,\r\n formRightBtnBlock,\r\n inputStyles,\r\n bannerStyles,\r\n} from \"../../styles/generalStyles\";\r\nimport classNames from \"classnames\";\r\nimport { SingleTextField } from \"../formInputs/SingleTextField\";\r\nimport { PasswordStrengthBox } from \"./PasswordStrengthBox\";\r\nimport {\r\n checkPasswordStrength,\r\n initalPasswordStrength,\r\n PasswordStrength,\r\n} from \"../../helperFunctions/stringFunctions\";\r\nimport { ErrorDisplay, setErrorMessage } from \"../ErrorDisplay\";\r\nimport { CancelButton } from \"../Buttons/CancelButton\";\r\nimport { SubmitButton } from \"../Buttons/SubmitButton\";\r\nimport { useHistory } from \"react-router-dom\";\r\nimport { CompleteMessage } from \"../../../ImagusComponents/Gadgets/CompleteMessage\";\r\nimport { iconStyles } from \"../../styles/iconStyles\";\r\n\r\nconst useStyles = makeStyles((theme: Theme) =>\r\n createStyles({\r\n ...inputStyles(theme),\r\n ...iconStyles(theme),\r\n formText,\r\n formRightBtnBlock,\r\n wrapper: {\r\n width: \"100%\",\r\n maxWidth: \"520px\",\r\n margin: \"10% auto\",\r\n\r\n backgroundColor: \"inherit\",\r\n height: \"auto\",\r\n border: \"1px solid black\",\r\n },\r\n formLogo: {\r\n width: \"100%\",\r\n margin: \"2% 0\",\r\n padding: \"10px\",\r\n height: \"auto\",\r\n maxHeight: \"150px\",\r\n float: \"none\",\r\n },\r\n clear: {\r\n clear: \"both\",\r\n },\r\n titleText: {\r\n color: theme.palette.common.black,\r\n },\r\n textAlignLeft: {\r\n width: \"100%\",\r\n textAlign: \"left\",\r\n },\r\n titleMargin: {\r\n marginBottom: \"30px\",\r\n },\r\n iconBlock: {\r\n height: \"54px\",\r\n lineHeight: \"130px\",\r\n },\r\n formHint: {\r\n fontStyle: \"italic\",\r\n paddingRight: \"10px\",\r\n },\r\n formLink: {\r\n color: theme.palette.primary.main,\r\n textDecoration: \"underline\",\r\n fontWeight: 500,\r\n },\r\n panel: {\r\n width: \"85%\",\r\n margin: \"auto\",\r\n },\r\n switchText: {\r\n fontStyle: \"italic\",\r\n },\r\n bannerTitle: {\r\n backgroundColor: theme.palette.common.black,\r\n color: theme.palette.common.white,\r\n height: \"50px\",\r\n },\r\n })\r\n);\r\n\r\ntype ResetPasswordFormPropsType = {\r\n resetPassword: Function;\r\n};\r\n\r\ntype InputType = {\r\n email: string;\r\n code: string;\r\n password: string;\r\n passwordConfirm: string;\r\n};\r\n\r\nconst intialInput: InputType = {\r\n email: \"\",\r\n code: \"\",\r\n password: \"\",\r\n passwordConfirm: \"\",\r\n};\r\n\r\nexport const ResetPasswordForm = (props: ResetPasswordFormPropsType) => {\r\n const classes = useStyles();\r\n const [inputs, setInputs] = useState\r\n \r\n
\r\n {props.content.split(\"
\").map((item: string, i: number) => (\r\n \r\n {item}\r\n \r\n ))}\r\n
\r\n {props.onClick && (\r\n \").map((item: string, i: number) => (\r\n \r\n {item}\r\n \r\n ))}\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n","import React from \"react\";\r\nimport { resetPassword } from \"../actions/userActions\";\r\nimport { ResetPasswordForm } from \"../components/users/ResetPasswordForm\";\r\n\r\nexport const ResetPassword = () => {\r\n const handleResetPassword = (\r\n email: string,\r\n token: string,\r\n newPassword: string,\r\n doneBack?: Function,\r\n failBack?: Function\r\n ) => {\r\n resetPassword(email, token, newPassword, doneBack, failBack);\r\n };\r\n return \r\n \r\n Reset Your Password\r\n \r\n
\r\n \r\n 0}\r\n />\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n 0}\r\n />\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n","import React from \"react\";\r\nimport { forgotPassword } from \"../actions/userActions\";\r\nimport { ForgotForm } from \"../components/users/ForgotForm\";\r\n\r\nexport const Forgot = () => {\r\n const handleFormSubmit = (\r\n email: string,\r\n doneBack?: Function,\r\n failBack?: Function\r\n ) => {\r\n forgotPassword(email, doneBack, failBack);\r\n };\r\n return \r\n \r\n Forgot your Password?\r\n \r\n
\r\n \r\n \r\n If you have forgot your password, please enter your email address and\r\n we'll send you a token to reset your password\r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n","import { ListItem, ListItemText, Theme } from \"@material-ui/core\";\r\nimport { createStyles, makeStyles } from \"@material-ui/core/styles\";\r\nimport classNames from \"classnames\";\r\nimport React from \"react\";\r\nimport { EventType } from \"../types/participantsType\";\r\n\r\nconst useStyles = makeStyles((theme: Theme) =>\r\n createStyles({\r\n selected: {\r\n fontWeight: 800,\r\n },\r\n\r\n title: {\r\n width: \"100%\",\r\n whiteSpace: \"nowrap\",\r\n overflow: \"hidden\",\r\n textOverflow: \"ellipsis\",\r\n padding: \"0 16px\",\r\n },\r\n })\r\n);\r\n\r\ntype EventItemPropsType = {\r\n event: EventType;\r\n selectedEventId: string;\r\n selectEvent: Function;\r\n};\r\n\r\nexport const EventItem = (props: EventItemPropsType) => {\r\n const classes = useStyles();\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n - {events}
\r\n \r\n \r\n \r\n \r\n ) : (\r\n \r\n \r\n )}\r\n
\r\n {open && (\r\n \r\n \r\n
\r\n {open ? (\r\n \r\n {/*
\r\n );\r\n};\r\n","import React, { useEffect } from \"react\";\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\nimport { fetchRace } from \"../../global/actions/raceActions\";\r\nimport { useSelectProfile } from \"../../global/helperFunctions/useSelectProfile\";\r\nimport { AppState } from \"../../Store\";\r\nimport { getEventsByQuery } from \"../actions/participantsActions\";\r\nimport { ParticipantsPageLayout } from \"../components/ParticipantsPageLayout\";\r\n\r\nexport const ParticipantsRedux = () => {\r\n const accountInfo = useSelector((state: AppState) => state.global.user.info);\r\n const profile = useSelector(\r\n (state: AppState) => state.global.profiles.activeProfile\r\n );\r\n\r\n const races = useSelector((state: AppState) => state.global.races.raceList);\r\n const events = useSelector(\r\n (state: AppState) => state.admin.participants.events\r\n );\r\n const dispatch = useDispatch();\r\n const getRaces = (\r\n query: string,\r\n doneBack?: Function,\r\n failBack?: Function\r\n ) => {\r\n fetchRace(profile.uid, query, doneBack, failBack)(dispatch);\r\n };\r\n\r\n const getEvents = (\r\n query: string,\r\n doneBack?: Function,\r\n failBack?: Function\r\n ) => {\r\n getEventsByQuery(query, doneBack, failBack)(dispatch);\r\n };\r\n\r\n useSelectProfile(accountInfo?.id);\r\n\r\n //fetch races upon mounted\r\n useEffect(() => {\r\n if (profile.uid) {\r\n fetchRace(profile.uid, \"\")(dispatch);\r\n }\r\n }, [profile.uid]);\r\n\r\n useEffect(() => {\r\n getEventsByQuery(\"\")(dispatch);\r\n }, []);\r\n\r\n return (\r\n \r\n
\r\n