\r\n
\r\n {cropper}\r\n
\r\n
\r\n \r\n this.cropHandler(e)}>\r\n Crop Image\r\n \r\n \r\n \r\n Zoom \r\n \r\n this.sliderHandler(e)}\r\n variant='success'\r\n tooltip='off'\r\n />\r\n \r\n
\r\n \r\n window.location.reload()}>\r\n Cancel\r\n */}\r\n this.cancelHandler()}>\r\n Cancel\r\n \r\n \r\n
\r\n
\r\n
this.closeHandler()} />\r\n }\r\n\r\n return (\r\n \r\n {this.state.isLoading ?
\r\n )\r\n }\r\n}\r\n\r\nexport default withRouter(ImageCrop)","import React, { Component } from 'react';\r\nimport { Button, Container, Col, Card, Row, InputGroup, Image, Form } from 'react-bootstrap';\r\nimport ImageCrop from '../ImageCrop/ImageCrop';\r\nimport Footers from '../../component/Footers/Footer';\r\nimport avatar from '../../avatar.svg';\r\nimport Loader from '../../component/Loader/Loader';\r\nimport { withRouter } from 'react-router-dom'\r\nimport axios from 'axios';\r\nimport ErrorModal from '../../component/ErrorModal/ErrorModal';\r\nimport Headers from '../../component/Headers/Headers';\r\nimport Dropdown from 'react-dropdown';\r\nimport 'react-dropdown/style.css';\r\nimport MediaQuery from 'react-responsive';\r\nimport { authContext } from \"../../adalConfig\";\r\nimport Resizer from 'react-image-file-resizer';\r\nimport imageCompression from 'browser-image-compression';\r\n\r\nfunction readFile(file) {\r\n return new Promise(resolve => {\r\n const reader = new FileReader()\r\n reader.addEventListener('load', () => resolve(reader.result), false)\r\n reader.readAsDataURL(file)\r\n })\r\n}\r\n\r\nconst resizeFile = (file, dimensions) => new Promise(resolve => {\r\n Resizer.imageFileResizer(file, dimensions.width, dimensions.height, 'JPEG', 100, 0,\r\n uri => {\r\n resolve(uri);\r\n }, 'base64');\r\n});\r\n\r\nconst options = {\r\n maxSizeMB: 0.5,\r\n maxWidthOrHeight: 640,\r\n useWebWorker: true\r\n}\r\n\r\nclass Upload extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.inputChangedRef = React.createRef();\r\n }\r\n state = {\r\n imageUrl: null,\r\n imageName: \"Choose file...\",\r\n StudentID: '',\r\n StaffName: '',\r\n role: 'Student',\r\n isOHR: false,\r\n isOSE: false,\r\n checkSubmit: true\r\n\r\n //isLoading: false\r\n //accesstoken: this.props.location.state.accesstoken,\r\n //studentID: this.props.location.state.studentID\r\n };\r\n\r\n //Validation for onChange in Input File\r\n onFileChange = async e => {\r\n if (e.target.files && e.target.files.length > 0) {\r\n const file = e.target.files[0]\r\n const fileExtension = file.name.split('.').pop().toLowerCase();\r\n\r\n if (file.size < 60000) {\r\n this.setState({\r\n show: true,\r\n isLoading: false,\r\n errorMsg: 'Please upload a photo with a minimum 60kb file size'\r\n })\r\n e.target.value = null;\r\n return\r\n }\r\n\r\n /* if (file.size > 500000) {\r\n this.setState({\r\n show: true,\r\n isLoading: false,\r\n errorMsg: 'Please upload a photo with a maximum 500kb file size'\r\n })\r\n e.target.value = null;\r\n return\r\n }*/\r\n\r\n if (fileExtension === 'jpg' || fileExtension === 'jpeg') {\r\n let imageDataUrl = await readFile(file)\r\n\r\n this.setState({\r\n imageUrl: imageDataUrl,\r\n imageName: file.name,\r\n imageFile: file,\r\n isLoading: false,\r\n checkSubmit: false\r\n // disableCrop: false,\r\n // disableUpload: false,\r\n })\r\n\r\n } else {\r\n this.setState({\r\n // disableCrop: true,\r\n // disableUpload: true,\r\n checkSubmit: true,\r\n isLoading: false,\r\n show: true,\r\n errorMsg: 'Please upload a passport photo of .jpeg or .jpg'\r\n })\r\n }\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n //authenticate whether user has login properly\r\n if (!this.props.location.state) {\r\n this.props.history.push('/')\r\n }\r\n console.log('state', this.props.location.state)\r\n console.log('role', this.props.role)\r\n\r\n //Check whether user type and show different upload page\r\n if (this.props.location.state) {\r\n console.log('userType', this.props.location.state.userType)\r\n if (this.props.location.state.userType === 'OSEAdmin') {\r\n console.log(this.props.staffName, this.props.studentID)\r\n if (this.props.staffName && this.props.studentID && this.props.role) {\r\n this.setState({\r\n StudentID: this.props.studentID,\r\n StaffName: this.props.staffName,\r\n role: this.props.role,\r\n isOSE: true,\r\n userid: localStorage.getItem('id')\r\n })\r\n } else if (this.props.location.state.staffName && this.props.location.state.studentID && this.props.location.state.role) {\r\n this.setState({\r\n StudentID: this.props.location.state.studentID,\r\n StaffName: this.props.location.state.staffName,\r\n role: this.props.location.state.role,\r\n isOSE: true,\r\n userid: localStorage.getItem('id')\r\n })\r\n } else {\r\n this.setState({\r\n isOSE: true,\r\n userid: localStorage.getItem('id')\r\n })\r\n }\r\n } else if (this.props.location.state.userType === 'OHRStaff') {\r\n if (this.props.staffName && this.props.studentID) {\r\n this.setState({\r\n StudentID: this.props.studentID,\r\n StaffName: this.props.staffName,\r\n isOHR: true,\r\n userid: localStorage.getItem('id')\r\n })\r\n } else if (this.props.location.state.staffName && this.props.location.state.studentID && this.props.location.state.userType) {\r\n this.setState({\r\n StudentID: this.props.location.state.studentID,\r\n StaffName: this.props.location.state.staffName,\r\n isOHR: true,\r\n userid: localStorage.getItem('id')\r\n })\r\n } else {\r\n this.setState({\r\n isOHR: true,\r\n userid: localStorage.getItem('id')\r\n })\r\n }\r\n } else {\r\n this.setState({\r\n userid: localStorage.getItem('id')\r\n })\r\n }\r\n }\r\n\r\n // if (this.props.role) {\r\n // this.setState({\r\n // role: this.props.role\r\n // })\r\n // }\r\n\r\n\r\n\r\n // if (this.props.staffName || this.props.studentID) {\r\n // console.log(this.props.staffName, this.props.studentID)\r\n // if (this.props.userType) {\r\n // this.setState({\r\n // StudentID: this.props.studentID,\r\n // StaffName: this.props.staffName,\r\n // role: this.props.userType\r\n // })\r\n // } else {\r\n // this.setState({\r\n // StudentID: this.props.studentID,\r\n // StaffName: this.props.staffName\r\n // })\r\n // }\r\n\r\n // }\r\n }\r\n\r\n inputChanged = () => {\r\n this.setState({ isLoading: true });\r\n }\r\n\r\n disableHandler = async ({ target: img }) => {\r\n //this.setState({isLoading: false})\r\n const height = img.naturalHeight\r\n const width = img.naturalWidth\r\n console.log(width + 'x' + height)\r\n const file = this.state.imageFile\r\n\r\n let dimensions = {\r\n width: 480,\r\n height: 640\r\n }\r\n\r\n\r\n if (width / height > 0.75) {\r\n console.log('in here')\r\n dimensions.width = 640 * (width / height)\r\n console.log('new dimensions', dimensions)\r\n\r\n } else if (width / height < 0.75) {\r\n dimensions.height = 480 * (height / width)\r\n console.log('new dimensions', dimensions)\r\n }\r\n\r\n if (height > 640 || width > 480) {\r\n const imageURL = await resizeFile(file, dimensions);\r\n // const compressedImageFile = await imageCompression(file, options);\r\n // console.log(compressedImageFile)\r\n // const imageURL = await readFile(compressedImageFile)\r\n \r\n\r\n const isIE = /*@cc_on!@*/false || !!document.documentMode;\r\n\r\n let resizefile\r\n\r\n let filename = this.props.location.state.studentID\r\n filename = filename.split('@')[0]\r\n if (this.state.isOHR || this.state.isOSE) {\r\n filename = this.state.StudentID\r\n }\r\n\r\n if (isIE) {\r\n //File constructor does not exist in IE and hence using blob with last modified date and name\r\n resizefile = await fetch(imageURL).then(r => r.blob());\r\n resizefile.lastModifiedDate = new Date();\r\n resizefile.name = filename + '.jpeg';\r\n } else {\r\n\r\n //File constructor works in other browser\r\n resizefile = await fetch(imageURL).then(r => r.blob()).then(blobFile => new File([blobFile], filename + '.jpeg', { type: \"image/jpeg\" }))\r\n }\r\n\r\n \r\n console.log(resizefile)\r\n\r\n this.setState({ imageUrl: imageURL, imageFile: resizefile })\r\n return;\r\n }\r\n\r\n console.log(width, height)\r\n\r\n //Validate the resolution of the image when onLoad\r\n if (height < 640 || width < 480) {\r\n console.log(width, height)\r\n this.setState({\r\n disableCrop: true,\r\n disableUpload: true,\r\n show: true,\r\n errorMsg: 'Please upload a photo with a minimum 480 x 640 dimension'\r\n })\r\n } else if (height > 640 || width > 480) {\r\n this.setState({\r\n disableCrop: false,\r\n disableUpload: true,\r\n show: true,\r\n errorMsg: 'The uploaded photo is more than 480x640 dimension. Please crop the photo using the crop function'\r\n }) \r\n } else {\r\n this.setState({\r\n disableCrop: false,\r\n disableUpload: false\r\n })\r\n }\r\n }\r\n\r\n cropHandler = () => {\r\n console.log(\"Inside Crop handler\");\r\n if (this.state.role === 'Student' || this.state.role === 'Staff') {\r\n this.setState({\r\n showCrop: true,\r\n userType: this.state.role,\r\n role:this.state.role\r\n }) \r\n } else {\r\n this.setState({\r\n showCrop: true,\r\n role:this.state.role\r\n })\r\n }\r\n\r\n }\r\n\r\n uploadHandler = event => {\r\n this.setState({ isLoading: true });\r\n event.preventDefault();\r\n\r\n const url = process.env.REACT_APP_VALIDATEIMAGE\r\n\r\n let headers = {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'multipart/form-data'\r\n };\r\n if (this.props.location.state.accesstoken) {\r\n headers[\"Authorization\"] = `Bearer ${this.props.location.state.accesstoken}`;\r\n }\r\n\r\n //Retrieve image base64 string\r\n //var imageBuffer = this.state.imageUrl.split(',');\r\n\r\n const fileExtension = this.state.imageName.split('.').pop();\r\n\r\n let userType = this.props.location.state.userType\r\n let filename = this.props.location.state.studentID\r\n filename = filename.split('@')[0]\r\n let userid = this.props.location.state.studentID\r\n userid = userid.split('@')[0]\r\n\r\n if (this.state.isOHR || this.state.isOSE) {\r\n filename = this.state.StudentID\r\n userid = this.state.StudentID\r\n userType = 'Staff'\r\n }\r\n\r\n if (this.state.role === 'Student' || this.state.role === 'Staff') {\r\n userType = this.state.role\r\n }\r\n\r\n if (this.state.isOHR) {\r\n filename = this.state.StudentID\r\n userid = this.state.StudentID\r\n userType = 'Staff'\r\n }\r\n\r\n console.log(this.state.imageFile)\r\n console.log(\"user type: \"+this.props.location.state.userType)\r\n\r\n const form = new FormData();\r\n form.append('byteData', this.state.imageFile)\r\n form.append('filename', filename + '.' + fileExtension);\r\n form.append('userid', userid);\r\n form.append('usertype', userType);\r\n form.append('loginUserType',this.props.location.state.userType);//20240301\r\n \r\n\r\n for (var pair of form.entries()) {\r\n console.log(pair[0] + ', ' + pair[1]);\r\n }\r\n\r\n axios.post(url, form, {\r\n headers: headers\r\n }).then((response) => {\r\n const result = response.data;\r\n console.log(result)\r\n if (result.uploadStatus || result.uploadRemarks) {\r\n this.setState({\r\n //showResult: true,\r\n isLoading: false,\r\n //uploadStatus: result.uploadStatus,\r\n //uploadRemarks: result.uploadRemarks\r\n })\r\n this.props.history.push({\r\n pathname: '/Result',\r\n state: {\r\n uploadStatus: result.uploadStatus,\r\n uploadRemarks: result.uploadRemarks,\r\n studentID: this.props.location.state.studentID,\r\n staffName: this.props.location.state.StaffName,\r\n userType: this.props.location.state.userType,\r\n accesstoken: this.props.location.state.accesstoken,\r\n role: this.props.location.state.role\r\n }\r\n })\r\n } else {\r\n this.setState({\r\n show: true,\r\n errorMsg: \"No result available. Please try again\",\r\n isLoading: false\r\n })\r\n }\r\n }).catch((error) => {\r\n console.log(error)\r\n const url = process.env.REACT_APP_LOGEXCEPTION\r\n let headers = {\r\n 'Content-Type': 'multipart/form-data'\r\n };\r\n\r\n headers[\"Authorization\"] = `Bearer ${this.props.location.state.accesstoken}`;\r\n\r\n const form = new FormData();\r\n form.append('loggedinuserid', this.props.location.state.studentID)\r\n form.append('student_staff_id', userid);\r\n form.append('webapimethodname', process.env.REACT_APP_VALIDATEIMAGE);\r\n\r\n if (error.response) {\r\n form.append('error', error.response.status + ' ' + error.response.statusText);\r\n } else {\r\n form.append('error', error.message);\r\n }\r\n\r\n for (var pair of form.entries()) {\r\n console.log(pair[0] + ', ' + pair[1]);\r\n }\r\n\r\n axios.post(url, form, { headers: headers }).then((response) => {\r\n if (error.response) {\r\n if (error.response.status === '401') {\r\n this.setState({\r\n errorMsg: 'Your Session has expired. Please login again.',\r\n show: true,\r\n isLoading: false\r\n })\r\n localStorage.clear()\r\n authContext.logOut()\r\n } else {\r\n this.setState({\r\n errorMsg: error.response.status + ' ' + error.response.statusText,\r\n show: true,\r\n isLoading: false\r\n })\r\n }\r\n } else {\r\n this.setState({\r\n show: true,\r\n errorMsg: error.message,\r\n isLoading: false\r\n })\r\n }\r\n }).catch((error1) => {\r\n if (error.response) {\r\n if (error.response.status === '401') {\r\n this.setState({\r\n errorMsg: 'Your Session has expired. Please login again.',\r\n show: true,\r\n isLoading: false\r\n })\r\n localStorage.clear()\r\n authContext.logOut()\r\n } else {\r\n this.setState({\r\n errorMsg: error.response.status + ' ' + error.response.statusText,\r\n show: true,\r\n isLoading: false\r\n })\r\n }\r\n } else {\r\n this.setState({\r\n show: true,\r\n errorMsg: error.message,\r\n isLoading: false\r\n })\r\n }\r\n });\r\n\r\n\r\n });\r\n }\r\n\r\n closeHandler = () => {\r\n this.setState({ show: false })\r\n }\r\n\r\n cancelHandler = () => {\r\n this.setState({\r\n imageUrl: null,\r\n imageName: \"Choose file...\",\r\n submit: false,\r\n checkSubmit: true,\r\n // StudentID: '',\r\n // StaffName: ''\r\n\r\n })\r\n }\r\n\r\n changeHandler = (e) => {\r\n const target = e.target;\r\n const name = target.name;\r\n\r\n if (name === \"StudentID\") {\r\n const isValidChar = !/[~`!@#$%\\^&*()+=_\\-\\[\\]\\\\';,/{}|\\\\\":<>\\? ]/g.test(e.target.value)\r\n\r\n if (isValidChar && e.target.value.length <= 20) {\r\n this.setState({ StudentID: e.target.value });\r\n }\r\n }\r\n\r\n if (name === \"StaffName\") {\r\n this.setState({ StaffName: e.target.value });\r\n }\r\n }\r\n\r\n dropdownSelect = (e) => {\r\n this.setState({\r\n role: e.value,\r\n StudentID: '',\r\n StaffName: ''\r\n })\r\n }\r\n\r\n previewHandler = () => {\r\n if (this.state.isOHR || this.state.isOSE) {\r\n if (this.state.StudentID === '' || this.state.StaffName === '') {\r\n let errormsg = 'Staff ID and Staff Name are required'\r\n if (this.state.role === 'Student') {\r\n errormsg = 'Student ID and Student Name are required'\r\n }\r\n this.setState({\r\n show: true,\r\n isLoading: false,\r\n errorMsg: errormsg\r\n })\r\n //e.target.value = null;\r\n return\r\n }\r\n\r\n if (this.state.role === 'Select Role' && this.state.isOSE) {\r\n this.setState({\r\n show: true,\r\n isLoading: false,\r\n errorMsg: 'Role needs to be selected'\r\n })\r\n //e.target.value = null;\r\n return\r\n }\r\n }\r\n this.setState({ submit: true })\r\n }\r\n\r\n render() {\r\n if (this.state.imageUrl && this.props.location.state.accesstoken && this.state.showCrop) {\r\n if (this.state.isOHR) {\r\n return \r\n
\r\n Staff ID: * { this.changeHandler(event) }}\r\n />\r\n
\r\n
\r\n Staff Name: * { this.changeHandler(event) }}\r\n />\r\n
\r\n
\r\n
\r\n {(this.state.role === 'Student' || this.state.role === 'Staff') ? {this.state.role}: Student: * this.dropdownSelect(e)} value={this.state.role} placeholder=\"Select an option\" />\r\n
\r\n
\r\n {(this.state.role === 'Student' || this.state.role === 'Staff') ? {this.state.role} ID: Student ID: * { this.changeHandler(event) }}\r\n />\r\n
\r\n
\r\n {(this.state.role === 'Student' || this.state.role === 'Staff') ? {this.state.role} Name: Student Name: * { this.changeHandler(event) }}\r\n />\r\n
\r\n\r\n
\r\n \r\n {\r\n this.onFileChange(event)\r\n }}\r\n ref={this.inputChangedRef}\r\n accept=\"image/jpg,image/jpeg\" />\r\n {this.state.imageName} \r\n
\r\n \r\n \r\n \r\n Preview\r\n \r\n
\r\n\r\n \r\n\r\n let displayCropOption =\r\n \r\n \r\n Preview \r\n \r\n \r\n
\r\n \r\n \r\n \r\n Crop Photo\r\n {' '}\r\n \r\n Upload Photo\r\n {' '}\r\n \r\n Cancel\r\n \r\n \r\n \r\n\r\n let displayUpload =\r\n \r\n \r\n \r\n {image}\r\n \r\n\r\n {uploadFunctions}\r\n
\r\n \r\n\r\n return (\r\n \r\n \r\n {this.state.isLoading ? \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 this.closeHandler()} />\r\n
\r\n );\r\n }\r\n\r\n}\r\n\r\nexport default withRouter(Upload);","import React, { Component } from 'react';\r\nimport { Container, Card, Form, Button, Modal } from 'react-bootstrap';\r\nimport axios from 'axios'\r\nimport { withRouter } from 'react-router-dom';\r\nimport Upload from '../../containers/Upload/Upload';\r\nimport Footers from '../../component/Footers/Footer';\r\nimport DatePicker from \"react-datepicker\";\r\nimport { format, subYears } from 'date-fns';\r\nimport Loader from '../../component/Loader/Loader'\r\nimport Headers from '../../component/Headers/Headers';\r\nimport ReCAPTCHA from \"react-google-recaptcha\";\r\nimport { confirmAlert } from 'react-confirm-alert'; // Import\r\n\r\nimport \"react-datepicker/dist/react-datepicker.css\";\r\nimport ErrorModal from '../../component/ErrorModal/ErrorModal';\r\n\r\nconst sitekey = process.env.REACT_APP_SITEKEY\r\n\r\nclass Login extends Component {\r\n\r\n \r\n constructor(props) {\r\n super(props)\r\n this.recaptchaRef = React.createRef();\r\n }\r\n\r\n state = {\r\n validated: false,\r\n setValidated: false,\r\n StudentID: '',\r\n DOB: '',\r\n Email: '',\r\n isValidRecaptcha: false,\r\n SiteKey: '',\r\n\r\n }\r\n\r\n //Datepicker onChange\r\n handleChange = date => {\r\n this.setState({\r\n DOB: date\r\n });\r\n };\r\n\r\n //Validation\r\n submitHandler = (e) => {\r\n const form = e.currentTarget;\r\n\r\n //const isValidChar = /^[a-zA-Z0-9]+@(?:[a-zA-Z0-9]+\\.)+[A-Za-z]+$/.test(this.state.Email)\r\n const isValidChar = /(([^<>()[\\]\\.,;:\\s@\\\"]+(\\.[^<>()[\\]\\.,;:\\s@\\\"]+)*)|(\\\".+\\\"))@(([^<>()[\\]\\.,;:\\s@\\\"]+\\.)+[^<>()[\\]\\.,;:\\s@\\\"]{2,})+$/.test(this.state.Email)\r\n let isValidDate = false;\r\n\r\n if (this.state.DOB) {\r\n isValidDate = /^(0?[1-9]|[12][0-9]|3[01])[\\/](0?[1-9]|1[012])[\\/]\\d{4}$/.test(format(this.state.DOB, \"dd/MM/yyyy\"))\r\n }\r\n\r\n if (form.checkValidity() === false) {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n\r\n this.setState({\r\n errorMsg: 'All fields are required',\r\n show: true\r\n })\r\n } else if (!isValidChar) {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n this.setState({\r\n errorMsg: 'Invalid Email',\r\n show: true\r\n })\r\n } else if (!isValidDate) {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n this.setState({\r\n errorMsg: 'Invalid Date',\r\n show: true\r\n })\r\n } else {\r\n this.setState({ setValidated: true, isLoading: true });\r\n\r\n const studentInfo = {\r\n StudentID: this.state.StudentID,\r\n DOB: format(this.state.DOB, \"dd/MM/yyyy\"),\r\n Email: this.state.Email,\r\n //isValidRecaptcha:this.state.isValidRecaptcha,\r\n token:this.recaptchaRef.current.getValue()\r\n }\r\n\r\n\r\n e.preventDefault();\r\n const url = process.env.REACT_APP_VALIDATESTUDENTINFO\r\n //console.log(studentInfo)\r\n //console.log(sitekey)\r\n axios.post(url, studentInfo)\r\n .then((response) => {\r\n const result = response.data;\r\n //console.log(result)\r\n //console.log(\"remarks \"+result.validationRemarks)\r\n if (result.isValidStudent) {\r\n this.setState({ isLoading: false });\r\n\r\n //Remove Azure token if any when successful login via new student detail\r\n localStorage.clear();\r\n\r\n this.props.history.push({\r\n pathname: '/PhotoGuide',\r\n state: {\r\n accesstoken: result.accessToken,\r\n studentID: this.state.StudentID,\r\n userType: 'Student'\r\n }\r\n })\r\n } \r\n else if (result.validationRemarks===\"Invalid captcha\")\r\n //else if (!result.isValidRecaptcha)\r\n {\r\n this.setState({\r\n isLoading: false,\r\n show: true,\r\n errorMsg: 'Please try again with valid captcha'\r\n })\r\n }\r\n else {\r\n this.setState({\r\n isLoading: false,\r\n show: true,\r\n errorMsg: 'Please try again with valid student information'\r\n })\r\n }\r\n })\r\n .catch((error) => {\r\n console.log(error)\r\n if (error.response) {\r\n this.setState({\r\n isLoading: false,\r\n show: true,\r\n errorMsg: error.response.status + ' ' + error.response.statusText\r\n })\r\n } else {\r\n this.setState({\r\n isLoading: false,\r\n show: true,\r\n errorMsg: error.message\r\n })\r\n }\r\n // this.props.history.push({\r\n // pathname: '/Upload',\r\n // state: {\r\n // accesstoken: 'Student',\r\n // studentID: this.state.StudentID,\r\n // userType: 'Student'\r\n // }\r\n // })\r\n });\r\n }\r\n }\r\n\r\n changeHandler = (e) => {\r\n const target = e.target;\r\n const name = target.name;\r\n\r\n if (name === \"StudentID\") {\r\n //const isValidChar = !/^[a-zA-Z0-9]+@(?:[a-zA-Z0-9]+\\.)+[A-Za-z]+$/.test(e.target.value)\r\n const isValidChar = !/(([^<>()[\\]\\.,;:\\s@\\\"]+(\\.[^<>()[\\]\\.,;:\\s@\\\"]+)*)|(\\\".+\\\"))@(([^<>()[\\]\\.,;:\\s@\\\"]+\\.)+[^<>()[\\]\\.,;:\\s@\\\"]{2,})+$/.test(this.state.Email)\r\n if (isValidChar && e.target.value.length <= 20) {\r\n this.setState({ StudentID: e.target.value });\r\n }\r\n }\r\n\r\n if (name === \"Email\") {\r\n this.setState({ Email: e.target.value });\r\n }\r\n }\r\n\r\n recaptchaHandler = value => {\r\n //console.log(\"Captcha value:\", value);\r\n //const captchaRes=value\r\n console.log(\"token\"+ this.recaptchaRef.current.getValue())\r\n //console.log(\"captchaRes:\", captchaRes);\r\n \r\n if (value) {\r\n this.setState({ isValidRecaptcha: true ,token1:value});\r\n } else {\r\n this.setState({ isValidRecaptcha: false })\r\n }\r\n // if value is null recaptcha expired\r\n if (value === null) {\r\n this.setState({ isValidRecaptcha: false })\r\n }\r\n //console.log(\"isValidRecaptcha: \",this.state.isValidRecaptcha);\r\n }\r\n closeHandler = () => {\r\n this.setState({ show: false })\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n {this.state.isLoading ? \r\n \r\n Student Information \r\n \r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n this.closeHandler()} />\r\n
\r\n\r\n );\r\n }\r\n\r\n}\r\n\r\nexport default withRouter(Login);","export default __webpack_public_path__ + \"static/media/white-bg-right.8bd769cd.PNG\";","export default __webpack_public_path__ + \"static/media/white-bg-incorrect1.446dd32e.PNG\";","export default __webpack_public_path__ + \"static/media/white-bg-incorrect2.a59f3d7d.PNG\";","export default __webpack_public_path__ + \"static/media/brightness-incorrect1.015afa26.PNG\";","export default __webpack_public_path__ + \"static/media/brightness-incorrect2.4f261346.PNG\";","export default __webpack_public_path__ + \"static/media/focus-incorrect1.d52f0740.PNG\";","export default __webpack_public_path__ + \"static/media/focus-incorrect2.90c2d33b.PNG\";","export default __webpack_public_path__ + \"static/media/visibility-incorrect1.58ed7505.PNG\";","export default __webpack_public_path__ + \"static/media/visibility-incorrect2.a974e590.PNG\";","export default __webpack_public_path__ + \"static/media/shoulders-incorrect.2ef0fda3.PNG\";","export default __webpack_public_path__ + \"static/media/expression-incorrect.6d0e0dc8.PNG\";","export default __webpack_public_path__ + \"static/media/spectacles-incorrect1.c50e8033.PNG\";","export default __webpack_public_path__ + \"static/media/spectacles-incorrect2.258e20dc.PNG\";","export default __webpack_public_path__ + \"static/media/headgear-right.62f87996.PNG\";","export default __webpack_public_path__ + \"static/media/headgear-incorrect1.f6d759f2.PNG\";","export default __webpack_public_path__ + \"static/media/headgear-incorrect2.345629e1.PNG\";","import React, { Component } from 'react';\r\nimport { Button, Container, Col, Card, Row, InputGroup, Image, Form } from 'react-bootstrap';\r\nimport ImageCrop from '../ImageCrop/ImageCrop';\r\nimport Footers from '../../component/Footers/Footer';\r\nimport avatar from '../../avatar.svg';\r\nimport whitebgright from '../../containers/Images/white-bg-right.PNG';\r\nimport whitebgincorrect1 from '../../containers/Images/white-bg-incorrect1.PNG';\r\nimport whitebgincorrect2 from '../../containers/Images/white-bg-incorrect2.PNG';\r\nimport brightnessincorrect1 from '../../containers/Images/brightness-incorrect1.PNG';\r\nimport brightnessincorrect2 from '../../containers/Images/brightness-incorrect2.PNG';\r\nimport focusincorrect1 from '../../containers/Images/focus-incorrect1.PNG';\r\nimport focusincorrect2 from '../../containers/Images/focus-incorrect2.PNG';\r\nimport visibilityincorrect1 from '../../containers/Images/visibility-incorrect1.PNG';\r\nimport visibilityincorrect2 from '../../containers/Images/visibility-incorrect2.PNG';\r\nimport shouldersincorrect from '../../containers/Images/shoulders-incorrect.PNG';\r\nimport expressionincorrect from '../../containers/Images/expression-incorrect.PNG';\r\nimport spectaclesincorrect1 from '../../containers/Images/spectacles-incorrect1.PNG';\r\nimport spectaclesincorrect2 from '../../containers/Images/spectacles-incorrect2.PNG';\r\nimport headgearright from '../../containers/Images/headgear-right.PNG';\r\nimport headgearincorrect1 from '../../containers/Images/headgear-incorrect1.PNG';\r\nimport headgearincorrect2 from '../../containers/Images/headgear-incorrect2.PNG';\r\nimport Loader from '../../component/Loader/Loader';\r\nimport { withRouter } from 'react-router-dom'\r\nimport axios from 'axios';\r\nimport ErrorModal from '../../component/ErrorModal/ErrorModal';\r\nimport Headers from '../../component/Headers/Headers';\r\nimport Dropdown from 'react-dropdown';\r\nimport 'react-dropdown/style.css';\r\nimport MediaQuery from 'react-responsive';\r\nimport { authContext } from \"../../adalConfig\";\r\nimport Resizer from 'react-image-file-resizer';\r\nimport imageCompression from 'browser-image-compression';\r\nimport './PhotoGuide.css';\r\n\r\n\r\nclass PhotoGuide extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.inputChangedRef = React.createRef();\r\n\r\n //this.handleClick = this.handleClick.bind(this);\r\n\r\n this.navigateToUpload = this.navigateToUpload.bind(this);\r\n }\r\n \r\n navigateToUpload() {\r\n // 👇️ navigate to /Upload\r\n let pathUpload = '/Upload'; \r\n //this.props.history.push(pathUpload);\r\n\r\n this.props.history.push({\r\n pathname: '/Upload',\r\n state: {\r\n login: this.props.location.state.login,\r\n studentID: this.props.location.state.studentID,\r\n userType: this.props.location.state.userType,\r\n accesstoken: this.props.location.state.accesstoken\r\n }\r\n })\r\n };\r\n\r\n state = {\r\n imageUrl: null,\r\n imageName: \"Choose file...\",\r\n StudentID: '',\r\n StaffName: '',\r\n role: 'Student',\r\n isOHR: false,\r\n isOSE: false,\r\n checkSubmit: true\r\n\r\n //isLoading: false\r\n //accesstoken: this.props.location.state.accesstoken,\r\n //studentID: this.props.location.state.studentID\r\n };\r\n\r\n componentDidMount() {\r\n //authenticate whether user has login properly\r\n if (!this.props.location.state) {\r\n this.props.history.push('/')\r\n }\r\n //console.log('state', this.props.location.state)\r\n //console.log('role', this.props.role)\r\n\r\n //Check whether user type and show different upload page\r\n if (this.props.location.state) {\r\n console.log('userType', this.props.location.state.userType)\r\n if (this.props.location.state.userType === 'OSEAdmin') {\r\n // console.log(this.props.staffName, this.props.studentID)\r\n if (this.props.staffName && this.props.studentID && this.props.role) {\r\n this.setState({\r\n StudentID: this.props.studentID,\r\n StaffName: this.props.staffName,\r\n role: this.props.role,\r\n isOSE: true,\r\n userid: localStorage.getItem('id')\r\n })\r\n } else if (this.props.location.state.staffName && this.props.location.state.studentID && this.props.location.state.role) {\r\n this.setState({\r\n StudentID: this.props.location.state.studentID,\r\n StaffName: this.props.location.state.staffName,\r\n role: this.props.location.state.role,\r\n isOSE: true,\r\n userid: localStorage.getItem('id')\r\n })\r\n } else {\r\n this.setState({\r\n isOSE: true,\r\n userid: localStorage.getItem('id')\r\n })\r\n }\r\n } else if (this.props.location.state.userType === 'OHRStaff') {\r\n if (this.props.staffName && this.props.studentID) {\r\n this.setState({\r\n StudentID: this.props.studentID,\r\n StaffName: this.props.staffName,\r\n isOHR: true,\r\n userid: localStorage.getItem('id')\r\n })\r\n } else if (this.props.location.state.staffName && this.props.location.state.studentID && this.props.location.state.userType) {\r\n this.setState({\r\n StudentID: this.props.location.state.studentID,\r\n StaffName: this.props.location.state.staffName,\r\n isOHR: true,\r\n userid: localStorage.getItem('id')\r\n })\r\n } else {\r\n this.setState({\r\n isOHR: true,\r\n userid: localStorage.getItem('id')\r\n })\r\n }\r\n } else {\r\n this.setState({\r\n userid: localStorage.getItem('id')\r\n })\r\n }\r\n }\r\n\r\n // if (this.props.role) {\r\n // this.setState({\r\n // role: this.props.role\r\n // })\r\n // }\r\n\r\n\r\n\r\n // if (this.props.staffName || this.props.studentID) {\r\n // console.log(this.props.staffName, this.props.studentID)\r\n // if (this.props.userType) {\r\n // this.setState({\r\n // StudentID: this.props.studentID,\r\n // StaffName: this.props.staffName,\r\n // role: this.props.userType\r\n // })\r\n // } else {\r\n // this.setState({\r\n // StudentID: this.props.studentID,\r\n // StaffName: this.props.staffName\r\n // })\r\n // }\r\n\r\n // }\r\n }\r\n\r\n inputChanged = () => {\r\n this.setState({ isLoading: true });\r\n }\r\n\r\n render() {\r\n \r\n let image =\r\n \r\n
\r\n
\r\n {this.state.isLoading ? */}\r\n {/* */}\r\n {/* \r\n
Photo Guidelines
\r\n
\r\n \r\n Photo must be\r\n \r\n Taken within the last 1 year. \r\n In colour taken against a full plain white background. \r\n Clear, in sharp focus and not pixelated or distorted. \r\n In JPEG format (.jpeg or .jpg file extension) with minimum 480 x 640 resolution \r\n File size between 60KB and 500KB. \r\n \r\n \r\n Facial features must be fully visible and taken at the full frontal view with neutral facial expression \r\n Spectacles must have clear and non-tinted lenses where eyes are clearly visible \r\n Headgear worn in accordance with religious or racial customs is acceptable but must not hide the facial features. \r\n \r\n \r\n
\r\n
Sample Photo
\r\n
\r\n \r\n Photo must be in colour taken against a white background \r\n \r\n {/* */}\r\n {image}\r\n {/* */}\r\n \r\n \r\n {/* */}\r\n */}\r\n {/* \r\n \r\n */}\r\n \r\n \r\n \r\n Photo taken with even brightness and without shadow \r\n \r\n {/* */}\r\n {image}\r\n {/* */}\r\n \r\n \r\n {/* */}\r\n */}\r\n \r\n \r\n \r\n Photo must be clear, in sharp focus and not pixelated \r\n \r\n {/* */}\r\n {image}\r\n {/* */}\r\n \r\n \r\n {/* */}\r\n */}\r\n \r\n \r\n \r\n \r\n Facial features must be fully visible and taken at the full-frontal view \r\n \r\n {/* */}\r\n {image}\r\n {/* */}\r\n \r\n \r\n {/* */}\r\n */}\r\n \r\n \r\n \r\n Shoulders and hair must be fully visible \r\n \r\n {/* */}\r\n {image}\r\n {/* */}\r\n \r\n \r\n {/* */}\r\n */}\r\n \r\n \r\n \r\n Facial expression should be neutral \r\n \r\n {/* */}\r\n {image}\r\n {/* */}\r\n \r\n \r\n {/* */}\r\n */}\r\n \r\n \r\n \r\n Spectacles must have clear and non-tinted lenses where eyes are clearly visible \r\n \r\n {/* */}\r\n {image}\r\n {/* */}\r\n \r\n \r\n {/* */}\r\n */}\r\n \r\n \r\n \r\n Headgear worn in accordance with religious or racial customs is acceptable but must not hide the facial features \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 Continue\r\n \r\n \r\n \r\n
\r\n
\r\n
*/}\r\n {/* */}\r\n\r\n\r\n \r\n
this.closeHandler()} />\r\n Please log out before closing the window.
\r\n )\r\n } else {\r\n redirectMsg = (\r\n Please close this window.
\r\n )\r\n } \r\n } else {\r\n redirectMsg = (\r\n Please refer to the
\r\n )\r\n }\r\n if (props.location.state.uploadStatus) {\r\n body = (\r\n \r\n
Your photo has been successfully uploaded.
\r\n
RP may contact you if they need you to resubmit your photo.
\r\n {redirectMsg}\r\n
\r\n
These are the possible reasons for failure: \r\n
\r\n {uniqueRemarks.map(element => {\r\n if (element !== \"Success\" || element !== '') {\r\n // if(element.indexOf(\"guidelines\")!=-1)\r\n // {\r\n // return {element.substring(0,element.indexOf(\"guidelines\"))} {photoguidelinesreplacetext}\r\n // {element.substring(element.indexOf(\"guidelines\")+10,element.length )} \r\n // }\r\n // else if(element.indexOf(\"guideline\")!=-1)\r\n // {\r\n // return {element.substring(0,element.indexOf(\"guideline\"))} {photoguidelinereplacetext}\r\n // {element.substring(element.indexOf(\"guideline\")+9,element.length )} \r\n // }\r\n // else\r\n // {\r\n //return {element}}} /> \r\n //return
Parser(element)
\r\n //let htmlFromBackend = `
Hello there , partner!`\r\n\r\nreturn (\r\n
\r\n)\r\n }\r\n })}\r\n \r\n
Please refer to the
\r\n
\r\n \r\n \r\n \r\n Result \r\n \r\n \r\n {body}\r\n \r\n \r\n \r\n
\r\n );\r\n } else {\r\n return (\r\n // \r\n \r\n \r\n \r\n Result \r\n \r\n \r\n {body}\r\n \r\n \r\n \r\n
\r\n )\r\n\r\n }\r\n\r\n}\r\n\r\nexport default Result;\r\n","import React from 'react';\r\nimport { Link } from 'react-router-dom';\r\n\r\nconst NotFound = () => (\r\n \r\n
Something went wrong! \r\n \r\n \r\n {\r\n rows.map((row)=>{\r\n prepareRow(row)\r\n return\r\n (\r\n \r\n {row.cells.map((cell)=>{\r\n return \r\n {cell.render('Cell')}\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, { Component } from 'react';\r\nimport { Button, Container, Col, Card, Row, InputGroup, Image, Form } from 'react-bootstrap';\r\nimport Footers from \"../Footers/Footer\";\r\nimport Headers from '../Headers/Headers';\r\nimport {BasicTable} from './BasicTable.js'\r\nfunction guidelines()\r\n{\r\n return(\r\n \r\n
\r\n )\r\n}\r\nexport default guidelines;","import 'bootstrap/dist/css/bootstrap.min.css';\r\nimport 'react-bootstrap-range-slider/dist/react-bootstrap-range-slider.css';\r\nimport React from 'react';\r\nimport './App.css';\r\nimport Landing from './containers/Landing/Landing';\r\nimport Login from './containers/Login/Login';\r\nimport Upload from './containers/Upload/Upload';\r\nimport PhotoGuide from './containers/PhotoGuide/PhotoGuide';\r\nimport './site.css';\r\nimport './styles.min.css';\r\nimport {\r\n BrowserRouter,\r\n Switch,\r\n Route\r\n} from \"react-router-dom\";\r\nimport 'blueimp-canvas-to-blob/js/canvas-to-blob';\r\nimport { withAdalLoginApi } from './adalConfig';\r\nimport AzureLogin from './containers/AzureLogin/AzureLogin';\r\nimport Result from './component/Result/Result';\r\nimport NotFound from './component/ErrorModal/NotFound';\r\nimport PhotoGuideline from './component/PhotoGuideline/PhotoGuideline.js';\r\nimport {BasicTable} from './component/PhotoGuideline/BasicTable.js';\r\nconst MyProtectedPage = withAdalLoginApi(AzureLogin, () => \r\n
\r\n )\r\n}\r\n\r\nfunction App() {\r\n return (\r\n \r\n \r\n {/* \r\n \r\n \r\n
\r\n\r\n \r\n );\r\n}\r\n\r\nexport default App; \r\n//export default guidelines\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-app-polyfill/ie11';\r\nimport 'react-app-polyfill/stable';\r\nimport 'core-js/features/string/repeat';\r\n\r\nimport 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(\r\n