diff --git a/package-lock.json b/package-lock.json
index fe0ed04..a883d01 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11287,6 +11287,11 @@
"integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
"dev": true
},
+ "jslib-html5-camera-photo": {
+ "version": "3.1.3",
+ "resolved": "https://registry.npmjs.org/jslib-html5-camera-photo/-/jslib-html5-camera-photo-3.1.3.tgz",
+ "integrity": "sha512-8vJwX0a6o82+AJur7KntGvGLYhfxN5h7HRNd77zuoLOi3/Rd+5L47gL9MwTHdtWu3J3VC3a3MuC4KiW8l8HXzA=="
+ },
"json-buffer": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.0.tgz",
@@ -14728,10 +14733,9 @@
"dev": true
},
"qs": {
- "version": "6.5.2",
- "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
- "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==",
- "dev": true
+ "version": "6.9.3",
+ "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.3.tgz",
+ "integrity": "sha512-EbZYNarm6138UKKq46tdx08Yo/q9ZhFoAXAI1meAFd2GtbRDhbZY2WQSICskT0c5q99aFzLG1D4nvTk9tqfXIw=="
},
"query-string": {
"version": "5.1.1",
@@ -15582,6 +15586,12 @@
"integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4=",
"dev": true
},
+ "qs": {
+ "version": "6.5.2",
+ "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
+ "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==",
+ "dev": true
+ },
"tough-cookie": {
"version": "2.4.3",
"resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.4.3.tgz",
diff --git a/package.json b/package.json
index 4235419..3229f80 100755
--- a/package.json
+++ b/package.json
@@ -44,6 +44,7 @@
"form-urlencoded": "4.0.1",
"formdata-polyfill": "3.0.19",
"history": "4.10.1",
+ "jslib-html5-camera-photo": "^3.1.3",
"lodash.camelcase": "4.3.0",
"lodash.debounce": "4.0.8",
"lodash.findindex": "4.6.0",
@@ -56,6 +57,7 @@
"memoize-one": "5.1.1",
"newrelic": "5.13.1",
"prop-types": "15.7.2",
+ "qs": "6.9.3",
"react": "16.10.2",
"react-dom": "16.10.2",
"react-redux": "7.1.3",
diff --git a/src/id-verification/Camera.jsx b/src/id-verification/Camera.jsx
new file mode 100644
index 0000000..360148a
--- /dev/null
+++ b/src/id-verification/Camera.jsx
@@ -0,0 +1,101 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import CameraPhoto, { FACING_MODES } from 'jslib-html5-camera-photo';
+
+import shutter from './data/camera-shutter.base64.json'
+
+const PHOTO_PROMTS = {
+ TAKE_PHOTO: 'Take Photo',
+ RETAKE_PHOTO: 'Retake Photo'
+}
+
+class Camera extends React.Component {
+ constructor (props, context) {
+ super(props, context);
+ this.cameraPhoto = null;
+ this.videoRef = React.createRef();
+ this.state = {
+ trackedObject: null,
+ dataUri: ''
+ }
+ }
+
+ componentDidMount () {
+ this.cameraPhoto = new CameraPhoto(this.videoRef.current);
+ this.cameraPhoto.startCameraMaxResolution(FACING_MODES.USER)
+ }
+
+ takePhoto () {
+ if (this.state.dataUri) {
+ return this.reset()
+ }
+ const config = {
+ sizeFactor: 1
+ };
+
+ this.playShutterClick()
+ let dataUri = this.cameraPhoto.getDataUri(config);
+ this.setState({ dataUri });
+ this.props.onImageCapture(dataUri)
+ }
+
+ playShutterClick () {
+ let audio = new Audio('data:audio/mp3;base64,' + shutter.base64);
+ audio.play();
+ }
+
+ reset () {
+ this.setState({dataUri: ''})
+ }
+
+ printTrackingInfo () {
+ let trackedObject = this.state.trackedObject;
+ if (!trackedObject) {
+ trackedObject = {
+ x: 'N/A',
+ y: 'N/A',
+ width: 'N/A',
+ height: 'N/A',
+ }
+ }
+ var res = `
+ x: ${trackedObject.x}
+ y: ${trackedObject.y}
+ width: ${trackedObject.width}
+ height: ${trackedObject.height}
+ `
+ return res
+ }
+
+ render () {
+ let cameraFlashClass = this.state.dataUri ? 'do-transition camera-flash' : 'camera-flash';
+ return (
+
+
+
+
+
+
+
{
+ this.takePhoto();
+ }}> {this.state.dataUri ? PHOTO_PROMTS.RETAKE_PHOTO : PHOTO_PROMTS.TAKE_PHOTO}
+
+
What if I can't see the camera image or if I can't see my photo to determine which side is visible
+
+ You may be able to complete the image capture procedure without assistance, but it may take a couple of submission attempts
+ to get the camera positioning right. Optimal camera positioning varies with each computer, but generally the best position for
+ a headshot is approximately 12-18 inches (30-45 centimeters) from the camera, with your head centered relative to the computer screen.
+ If the photos you submit are rejected, try moving the computer or camera orientation to change the lighting angle.
+ The most common reason for rejection is in ability to read the text on the ID card.
+
+
What if I have difficulty holding my head in position relative to the camera?
+
If you require assistance with taking a photo for submission, contact edX support for additional suggestions.
+
+
Identity Verification
+ {status === 'pending' || status == 'approved'
+ ?
+ You have already submitted your verification information.
+ You will see a message on your dashboard when the verification process
+ is complete (usually within 1-2 days).
+
+ :
+ You cannot verify your identity at this time.
+
+ }
+
+ Return to Your Dashboard
+
+
+ {children}
+
+ );
+}
+IdVerificationContextProvider.propTypes = {
+ children: PropTypes.node,
+};
+IdVerificationContextProvider.defaultProps = {
+ children: undefined,
+};
+
+export {
+ IdVerificationContext,
+ IdVerificationContextProvider,
+ MEDIA_ACCESS,
+};
diff --git a/src/id-verification/IdVerificationPage.jsx b/src/id-verification/IdVerificationPage.jsx
new file mode 100644
index 0000000..77e4850
--- /dev/null
+++ b/src/id-verification/IdVerificationPage.jsx
@@ -0,0 +1,73 @@
+import React, { useState } from 'react';
+import { connect } from 'react-redux';
+import { Route, Switch, Redirect, useRouteMatch } from 'react-router-dom';
+import { injectIntl } from '@edx/frontend-platform/i18n';
+import { Modal, Button } from '@edx/paragon';
+import { idVerificationSelector } from './data/selectors';
+import './getUserMediaShim';
+
+import { IdVerificationContextProvider } from './IdVerificationContext';
+import ReviewRequirementsPanel from './panels/ReviewRequirementsPanel';
+import RequestCameraAccessPanel from './panels/RequestCameraAccessPanel';
+import PortraitPhotoContextPanel from './panels/PortraitPhotoContextPanel';
+import TakePortraitPhotoPanel from './panels/TakePortraitPhotoPanel';
+import IdContextPanel from './panels/IdContextPanel';
+import GetNameIdPanel from './panels/GetNameIdPanel';
+import TakeIdPhotoPanel from './panels/TakeIdPhotoPanel';
+import SummaryPanel from './panels/SummaryPanel';
+import SubmittedPanel from './panels/SubmittedPanel';
+
+// eslint-disable-next-line react/prefer-stateless-function
+function IdVerificationPage() {
+ const { path } = useRouteMatch();
+ const [isModalOpen, setIsModalOpen] = useState(false);
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ setIsModalOpen(true)}>
+ Privacy Information
+
+
+
+
+
+
+ Why does edX need my photo?
+ We use your verification photos to confirm your identity and ensure the validity of your certificate.
+ What does edX do with this photo?
+ We securely encrypt your photo and send it our authorization service for review. Your photo and information are not saved or visible anywhere on edX after the verification process is complete.
+
+
+
+
+
+
{title}
+ {children}
+
+ );
+}
+
+BasePanel.propTypes = {
+ children: PropTypes.node.isRequired,
+ focusOnMount: PropTypes.bool,
+ name: PropTypes.string.isRequired,
+ title: PropTypes.node.isRequired,
+};
+
+BasePanel.defaultProps = {
+ focusOnMount: true,
+};
diff --git a/src/id-verification/panels/GetNameIdPanel.jsx b/src/id-verification/panels/GetNameIdPanel.jsx
new file mode 100644
index 0000000..9516f4a
--- /dev/null
+++ b/src/id-verification/panels/GetNameIdPanel.jsx
@@ -0,0 +1,70 @@
+import React, { useContext, useState, useEffect, useRef } from 'react';
+import { Input, Button } from '@edx/paragon';
+import { Link } from 'react-router-dom';
+
+import { useNextPanelSlug } from '../routing-utilities';
+import BasePanel from './BasePanel';
+import { IdVerificationContext } from '../IdVerificationContext';
+import ImagePreview from '../ImagePreview';
+
+export default function GetNameIdPanel() {
+ const panelSlug = 'get-name-id';
+ const [isEditing, setIsEditing] = useState(false);
+ const nameInputRef = useRef();
+ const nextPanelSlug = useNextPanelSlug(panelSlug);
+ useEffect(() => {
+ if (isEditing && nameInputRef.current) {
+ nameInputRef.current.focus();
+ }
+ }, [isEditing]);
+ const {
+ nameOnAccount, idPhotoName, setIdPhotoName, idPhotoFile,
+ } = useContext(IdVerificationContext);
+ const nameOnAccountValue = nameOnAccount || '';
+ return (
+
+ Please check the Account Name below to ensure it matches the name on your ID. If not, click "Edit".
+
+
+ Please Note: any edit to your name will be saved to your account and can be reviewed on
+
+
+
Name
+
+ setIsEditing(true)}
+ >
+ Edit
+
+ )}
+
+
+
+
+ );
+}
diff --git a/src/id-verification/panels/IdContextPanel.jsx b/src/id-verification/panels/IdContextPanel.jsx
new file mode 100644
index 0000000..efce411
--- /dev/null
+++ b/src/id-verification/panels/IdContextPanel.jsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import { useNextPanelSlug } from '../routing-utilities';
+import BasePanel from './BasePanel';
+
+export default function IdContextPanel() {
+ const panelSlug = 'id-context';
+ const nextPanelSlug = useNextPanelSlug(panelSlug);
+ return (
+
+ Next you'll need an eligible photo, make sure that:
+
+
+
Photo Tips
+
To take a successful photo, make sure that:
+
+ Your ID is well-lit.
+ Ensure that you can see your photo and clearly read your name.
+
+
+
+
+
+ );
+}
diff --git a/src/id-verification/panels/PortraitPhotoContextPanel.jsx b/src/id-verification/panels/PortraitPhotoContextPanel.jsx
new file mode 100644
index 0000000..9d243e7
--- /dev/null
+++ b/src/id-verification/panels/PortraitPhotoContextPanel.jsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import { useNextPanelSlug } from '../routing-utilities';
+import BasePanel from './BasePanel';
+
+export default function PortraitPhotoContextPanel() {
+ const panelSlug = 'portrait-photo-context';
+ const nextPanelSlug = useNextPanelSlug(panelSlug);
+ return (
+
+ Next, we'll need you to take a photo of your face. Please review the helpful tips below.
+
+
+
Photo Tips
+
To take a successful photo, make sure that:
+
+ Your face is well-lit.
+ Your entire face fits inside the frame.
+
+
+
+
+
+ );
+}
diff --git a/src/id-verification/panels/RequestCameraAccessPanel.jsx b/src/id-verification/panels/RequestCameraAccessPanel.jsx
new file mode 100644
index 0000000..ae811fc
--- /dev/null
+++ b/src/id-verification/panels/RequestCameraAccessPanel.jsx
@@ -0,0 +1,72 @@
+import React, { useContext } from 'react';
+import { Link } from 'react-router-dom';
+import { Collapsible } from '@edx/paragon';
+
+import { useNextPanelSlug } from '../routing-utilities';
+import BasePanel from './BasePanel';
+import { IdVerificationContext, MEDIA_ACCESS } from '../IdVerificationContext';
+
+export default function RequestCameraAccessPanel() {
+ const panelSlug = 'request-camera-access';
+ const nextPanelSlug = useNextPanelSlug(panelSlug);
+ const { tryGetUserMedia, mediaAccess } = useContext(IdVerificationContext);
+
+ return (
+
+ {mediaAccess === MEDIA_ACCESS.PENDING && (
+
+
In order to take a photo using your webcam, you may receive a browser prompt for access to your camera. Please make sure to click "Allow"
+
+
+
+ Enable Camera
+
+
+
+
+ Having problems?
+
+
+
+
+
+
+
+
+ Looks like your camera is working and ready.
+
+
+
+
+
+ It looks like we're unable to access your camera. You will need to upload
+ image files of you and your photo id.
+
+
+
+
+ );
+}
diff --git a/src/id-verification/panels/ReviewRequirementsPanel.jsx b/src/id-verification/panels/ReviewRequirementsPanel.jsx
new file mode 100644
index 0000000..1a8512a
--- /dev/null
+++ b/src/id-verification/panels/ReviewRequirementsPanel.jsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import { useNextPanelSlug } from '../routing-utilities';
+import BasePanel from './BasePanel';
+
+export default function ReviewRequirementsPanel() {
+ const panelSlug = 'review-requirements';
+ const nextPanelSlug = useNextPanelSlug(panelSlug);
+ return (
+
+
+ In order to complete Photo Verification online, you will need the following
+
+
+
+
Device with Camera
+
You need a device that has a camera. If you receive a browser prompt for access to your camera, please make sure to click Allow .
+
+
+
+
Photo Identification
+
You need a valid ID that contains your full name and photo.
+
+
Privacy Information
+ Why does edX need my photo?
+ We use your verification photos to confirm your identity and ensure the validity of your certificate.
+ What does edX do with this photo?
+ We securely encrypt your photo and send it our authorization service for review. Your photo and information are not saved or visible anywhere on edX after the verification process is complete.
+
+
+
+
+ );
+}
diff --git a/src/id-verification/panels/SubmittedPanel.jsx b/src/id-verification/panels/SubmittedPanel.jsx
new file mode 100644
index 0000000..634d9ba
--- /dev/null
+++ b/src/id-verification/panels/SubmittedPanel.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { getConfig } from '@edx/frontend-platform';
+
+import { useNextPanelSlug } from '../routing-utilities';
+import BasePanel from './BasePanel';
+
+export default function SubmittedPanel() {
+ const panelSlug = 'submitted';
+ return (
+
+ We have received you information and are verifiying your identity. You will see a message on your dashboard when the verification process is complete (usually within 1-2 days). In the meantime, you can still access all available course content.
+ Return to Your Dashboard
+
+ );
+}
diff --git a/src/id-verification/panels/SummaryPanel.jsx b/src/id-verification/panels/SummaryPanel.jsx
new file mode 100644
index 0000000..3ff8476
--- /dev/null
+++ b/src/id-verification/panels/SummaryPanel.jsx
@@ -0,0 +1,109 @@
+import React, { useContext } from 'react';
+import { history } from '@edx/frontend-platform';
+import { Input, Button } from '@edx/paragon';
+import { Link } from 'react-router-dom';
+
+import { useNextPanelSlug } from '../routing-utilities';
+import { submitIdVerfication } from '../data/service';
+import BasePanel from './BasePanel';
+import { IdVerificationContext } from '../IdVerificationContext';
+import ImagePreview from '../ImagePreview';
+
+export default function SummaryPanel() {
+ const panelSlug = 'summary';
+ const nextPanelSlug = useNextPanelSlug(panelSlug);
+ const {
+ facePhotoFile,
+ idPhotoFile,
+ nameOnAccount,
+ idPhotoName,
+ } = useContext(IdVerificationContext);
+ const nameToBeUsed = idPhotoName || nameOnAccount || '';
+ const courseRunKey = null; // TODO: Implement course run key
+
+ function SubmitButton() {
+ function handleClick(e) {
+ const verificationData = {
+ facePhotoFile,
+ idPhotoFile,
+ idPhotoName,
+ courseRunKey,
+ };
+ const { success, message } = submitIdVerfication(verificationData);
+ history.push(nextPanelSlug);
+ }
+ return (
+
+ Confirm
+
+ );
+ }
+
+ return (
+
+ Make sure we can verify your identity with the photos and information you have provided.
+
+
+ Your Portrait
+
+
+ Your Photo ID
+
+
+
Name on ID
+
+
+
+ );
+}
diff --git a/src/id-verification/panels/TakeIdPhotoPanel.jsx b/src/id-verification/panels/TakeIdPhotoPanel.jsx
new file mode 100644
index 0000000..3932e0c
--- /dev/null
+++ b/src/id-verification/panels/TakeIdPhotoPanel.jsx
@@ -0,0 +1,45 @@
+import React, { useContext } from 'react';
+import { Link } from 'react-router-dom';
+
+import { useNextPanelSlug } from '../routing-utilities';
+import BasePanel from './BasePanel';
+import ImageFileUpload from '../ImageFileUpload';
+import ImagePreview from '../ImagePreview';
+import Camera from '../Camera';
+import CameraHelp from '../CameraHelp';
+import { IdVerificationContext, MEDIA_ACCESS } from '../IdVerificationContext';
+
+export default function TakeIdPhotoPanel() {
+ const panelSlug = 'take-id-photo';
+ const nextPanelSlug = useNextPanelSlug(panelSlug);
+ const { setIdPhotoFile, idPhotoFile, mediaAccess } = useContext(IdVerificationContext);
+ const shouldUseCamera = mediaAccess === MEDIA_ACCESS.GRANTED;
+ return (
+
+
+ {idPhotoFile && !shouldUseCamera &&
}
+
+ {shouldUseCamera ? (
+
+
When your ID is in position, use the Take Photo button below to take your photo.
+
+
+ ) : (
+
+
Please upload a ID photo. Ensure the entire ID fits inside the frame and is well-lit. (Supported formats: .jpg, .jpeg, .png)
+
+
+ )}
+
+
+ {shouldUseCamera &&
+ );
+}
diff --git a/src/id-verification/panels/TakePortraitPhotoPanel.jsx b/src/id-verification/panels/TakePortraitPhotoPanel.jsx
new file mode 100644
index 0000000..f5c6846
--- /dev/null
+++ b/src/id-verification/panels/TakePortraitPhotoPanel.jsx
@@ -0,0 +1,46 @@
+import React, { useContext } from 'react';
+import { Link } from 'react-router-dom';
+
+import { useNextPanelSlug } from '../routing-utilities';
+import BasePanel from './BasePanel';
+import ImageFileUpload from '../ImageFileUpload';
+import ImagePreview from '../ImagePreview';
+import Camera from '../Camera';
+import CameraHelp from '../CameraHelp';
+import { IdVerificationContext, MEDIA_ACCESS } from '../IdVerificationContext';
+
+export default function TakePortraitPhotoPanel() {
+ const panelSlug = 'take-portrait-photo';
+ const nextPanelSlug = useNextPanelSlug(panelSlug);
+ const { setFacePhotoFile, facePhotoFile, mediaAccess } = useContext(IdVerificationContext);
+ const shouldUseCamera = mediaAccess === MEDIA_ACCESS.GRANTED;
+
+ return (
+
+
+ {facePhotoFile && !shouldUseCamera &&
}
+
+ {shouldUseCamera ? (
+
+
When your face is in position, use the Take Photo button below to take your photo.
+
+
+ ) : (
+
+
Please upload a portrait photo. Ensure your entire face fits inside the frame and is well-lit. (Supported formats: .jpg, .jpeg, .png)
+
+
+ )}
+
+
+ {shouldUseCamera &&
+ );
+}
diff --git a/src/id-verification/routing-utilities.js b/src/id-verification/routing-utilities.js
new file mode 100644
index 0000000..96da242
--- /dev/null
+++ b/src/id-verification/routing-utilities.js
@@ -0,0 +1,52 @@
+import { useContext } from 'react';
+import { useLocation } from 'react-router-dom';
+import { IdVerificationContext } from './IdVerificationContext';
+
+const panelSteps = [
+ 'review-requirements',
+ 'request-camera-access',
+ 'portrait-photo-context',
+ 'take-portrait-photo',
+ 'id-context',
+ 'take-id-photo',
+ 'get-name-id',
+ 'summary',
+ 'submitted',
+];
+
+// eslint-disable-next-line import/prefer-default-export
+export const useNextPanelSlug = (originSlug) => {
+ // Go back to the summary view if that's where they came from
+ const location = useLocation();
+ const isFromSummary = location.state && location.state.fromSummary;
+ if (isFromSummary) {
+ return 'summary';
+ }
+
+ const nextIndex = panelSteps.indexOf(originSlug) + 1;
+ return nextIndex < panelSteps.length ? panelSteps[nextIndex] : null;
+};
+
+// check if the user is too far into the flow and if so, return the slug of the
+// furthest panel they are allow to be.
+export const useVerificationRedirectSlug = (slug) => {
+ // TODO: remove this short-circuit after development is done
+ return null;
+
+ // eslint-disable-next-line no-unreachable
+ const { facePhotoFile, idPhotoFile } = useContext(IdVerificationContext);
+ const indexOfCurrentPanel = panelSteps.indexOf(slug);
+
+ if (!facePhotoFile) {
+ if (indexOfCurrentPanel > panelSteps.indexOf('take-portrait-photo')) {
+ return 'portrait-photo-context';
+ }
+ } else if (!idPhotoFile) {
+ if (indexOfCurrentPanel > panelSteps.indexOf('take-id-photo')) {
+ return 'id-context';
+ }
+ }
+
+ // The user has satisfied requirements to view the panel they're on.
+ return null;
+};
diff --git a/src/index.jsx b/src/index.jsx
index f1803a9..42dda62 100755
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -11,6 +11,7 @@ import Footer, { messages as footerMessages } from '@edx/frontend-component-foot
import configureStore from './data/configureStore';
import AccountSettingsPage, { NotFoundPage } from './account-settings';
+import IdVerificationPage from './id-verification';
import CoachingConsent from './account-settings/coaching/CoachingConsent';
import appMessages from './i18n';
@@ -18,11 +19,11 @@ import './index.scss';
import './assets/favicon.ico';
const HeaderFooterLayout = ({ children }) => (
-
+
-
- {children}
-
+
+ {children}
+
);
@@ -33,9 +34,12 @@ subscribe(APP_READY, () => {
-
+
,
diff --git a/src/index.scss b/src/index.scss
index 29bfa7e..165d90a 100755
--- a/src/index.scss
+++ b/src/index.scss
@@ -8,6 +8,7 @@ $fa-font-path: "~font-awesome/fonts";
@import "~@edx/frontend-component-footer/dist/footer";
@import "./account-settings/style";
+@import "./id-verification/id-verification";
.word-break-all {
word-break: break-all !important;
+