-
-
-
-
- {loading ? this.renderLoading() : null}
- {loaded ? this.renderContent() : null}
- {loadingError ? this.renderError() : null}
-
+
+
+
+
+ {loading ? renderLoading() : null}
+ {loaded ? renderContent() : null}
+ {loadingError ? renderError() : null}
-
- );
- }
-}
-
-AccountSettingsPage.contextType = AppContext;
+
+
+ );
+};
AccountSettingsPage.propTypes = {
- intl: intlShape.isRequired,
loading: PropTypes.bool,
loaded: PropTypes.bool,
loadingError: PropTypes.string,
@@ -1017,4 +1006,4 @@ export default withLocation(withNavigate(connect(accountSettingsPageSelector, {
updateDraft,
fetchSiteLanguages,
beginNameChange,
-})(injectIntl(AccountSettingsPage))));
+})(AccountSettingsPage)));
diff --git a/src/account-settings/test/AccountSettingsPage.test.jsx b/src/account-settings/test/AccountSettingsPage.test.jsx
index 385a27d..79d241e 100644
--- a/src/account-settings/test/AccountSettingsPage.test.jsx
+++ b/src/account-settings/test/AccountSettingsPage.test.jsx
@@ -7,7 +7,7 @@ import {
render, screen, fireEvent,
} from '@testing-library/react';
import configureStore from 'redux-mock-store';
-import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
import AccountSettingsPage from '../AccountSettingsPage';
import mockData from './mockData';
@@ -25,8 +25,6 @@ jest.mock('react-redux', () => ({
jest.mock('@edx/frontend-platform/auth');
-const IntlAccountSettingsPage = injectIntl(AccountSettingsPage);
-
const middlewares = [thunk];
const mockStore = configureStore(middlewares);
@@ -82,7 +80,7 @@ describe('AccountSettingsPage', () => {
});
it('renders AccountSettingsPage correctly with editing enabled', async () => {
- const { getByText, rerender, getByLabelText } = render(reduxWrapper(
));
+ const { getByText, rerender, getByLabelText } = render(reduxWrapper(
));
const workExperienceText = getByText('Work Experience');
const workExperienceEditButton = workExperienceText.parentElement.querySelector('button');
@@ -96,7 +94,7 @@ describe('AccountSettingsPage', () => {
openFormId: 'work_experience',
},
});
- rerender(reduxWrapper(
));
+ rerender(reduxWrapper(
));
const submitButton = screen.getByText('Save');
expect(submitButton).toBeInTheDocument();
diff --git a/src/id-verification/Camera.jsx b/src/id-verification/Camera.jsx
index 66da101..01c8a6d 100644
--- a/src/id-verification/Camera.jsx
+++ b/src/id-verification/Camera.jsx
@@ -1,66 +1,53 @@
/* eslint-disable jsx-a11y/media-has-caption */
/* eslint-disable jsx-a11y/no-access-key */
-import React from 'react';
+import {
+ useState,
+ useRef,
+ useEffect,
+ useCallback,
+} from 'react';
import PropTypes from 'prop-types';
import { sendTrackEvent } from '@edx/frontend-platform/analytics';
// eslint-disable-next-line import/no-unresolved
import * as blazeface from '@tensorflow-models/blazeface';
import CameraPhoto, { FACING_MODES } from 'jslib-html5-camera-photo';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
import { Form, Spinner } from '@openedx/paragon';
import shutter from './data/camera-shutter.base64.json';
import messages from './IdVerification.messages';
-class Camera extends React.Component {
- constructor(props, context) {
- super(props, context);
- this.cameraPhoto = null;
- this.videoRef = React.createRef();
- this.canvasRef = React.createRef();
- this.setDetection = this.setDetection.bind(this);
- this.state = {
- dataUri: '',
- videoHasLoaded: false,
- shouldDetect: false,
- isFinishedLoadingDetection: true,
- shouldGiveFeedback: true,
- feedback: '',
- };
- }
+const Camera = ({ onImageCapture, isPortrait }) => {
+ const intl = useIntl();
+ const videoRef = useRef(null);
+ const canvasRef = useRef(null);
+ const [cameraPhoto, setCameraPhoto] = useState(null);
+ const [dataUri, setDataUri] = useState('');
+ const [videoHasLoaded, setVideoHasLoaded] = useState(false);
+ const [shouldDetect, setShouldDetect] = useState(false);
+ const [isFinishedLoadingDetection, setIsFinishedLoadingDetection] = useState(true);
+ const [shouldGiveFeedback, setShouldGiveFeedback] = useState(true);
+ const [feedback, setFeedback] = useState('');
- componentDidMount() {
- this.cameraPhoto = new CameraPhoto(this.videoRef.current);
- this.cameraPhoto.startCamera(
- this.props.isPortrait ? FACING_MODES.USER : FACING_MODES.ENVIRONMENT,
+ useEffect(() => {
+ const camera = new CameraPhoto(videoRef.current);
+ setCameraPhoto(camera);
+ camera.startCamera(
+ isPortrait ? FACING_MODES.USER : FACING_MODES.ENVIRONMENT,
{ width: 640, height: 480 },
);
- }
- async componentWillUnmount() {
- this.cameraPhoto.stopCamera();
- }
+ return () => {
+ camera.stopCamera();
+ };
+ }, [isPortrait]);
- setDetection() {
- this.setState(
- (state) => ({ shouldDetect: !state.shouldDetect }),
- () => {
- if (this.state.shouldDetect) {
- this.setState({ isFinishedLoadingDetection: false });
- this.startDetection();
- }
- this.sendEvent();
- },
- );
- }
+ const handleVideoLoad = () => {
+ setVideoHasLoaded(true);
+ };
- setVideoHasLoaded() {
- this.setState({ videoHasLoaded: 'true' });
- }
-
- getGridPosition(coordinates) {
+ const getGridPosition = useCallback((coordinates) => {
// Used to determine where a face is (i.e. top-left, center-right, bottom-center, etc.)
-
const x = coordinates[0];
const y = coordinates[1];
@@ -89,11 +76,11 @@ class Camera extends React.Component {
}
return messageBase;
- }
+ }, []);
- getSizeFactor() {
+ const getSizeFactor = useCallback(() => {
let sizeFactor = 1;
- const settings = this.cameraPhoto.getCameraSettings();
+ const settings = cameraPhoto?.getCameraSettings();
if (settings) {
const videoWidth = settings.width;
const videoHeight = settings.height;
@@ -113,24 +100,46 @@ class Camera extends React.Component {
}
}
return sizeFactor;
- }
+ }, [cameraPhoto]);
- detectFromVideoFrame = (model, video) => {
- model.estimateFaces(video).then((predictions) => {
- if (this.state.shouldDetect && !this.state.dataUri) {
- this.showDetections(predictions);
+ const isInRangeForPortrait = useCallback((x, y) => x > 47 && x < 570 && y > 100 && y < 410, []);
- requestAnimationFrame(() => {
- this.detectFromVideoFrame(model, video);
- });
+ const isInRangeForID = useCallback((x, y) => x > 120 && x < 470 && y > 120 && y < 350, []);
+
+ const giveFeedback = useCallback((numFaces, rightEye, isCorrect) => {
+ if (shouldGiveFeedback) {
+ const currentFeedback = feedback;
+ let newFeedback = '';
+ if (numFaces === 1) {
+ // only give feedback if one face is detected otherwise
+ // it would be difficult to tell a user which face to move
+ if (isCorrect) {
+ newFeedback = intl.formatMessage(messages['id.verification.photo.feedback.correct']);
+ } else {
+ // give feedback based on where user is
+ newFeedback = intl.formatMessage(messages[getGridPosition(rightEye)]);
+ }
+ } else if (numFaces > 1) {
+ newFeedback = intl.formatMessage(messages['id.verification.photo.feedback.two.faces']);
+ } else {
+ newFeedback = intl.formatMessage(messages['id.verification.photo.feedback.no.faces']);
}
- });
- };
+ if (currentFeedback !== newFeedback) {
+ // only update status if it is different, so we don't overload the user with status updates
+ setFeedback(newFeedback);
+ }
+ // turn off feedback for one to ensure that instructions aren't disruptive/interrupting
+ setShouldGiveFeedback(false);
+ setTimeout(() => {
+ setShouldGiveFeedback(true);
+ }, 1000);
+ }
+ }, [shouldGiveFeedback, feedback, intl, getGridPosition]);
- showDetections = (predictions) => {
+ const showDetections = useCallback((predictions) => {
let canvasContext;
if (predictions.length > 0) {
- canvasContext = this.canvasRef.current.getContext('2d');
+ canvasContext = canvasRef.current.getContext('2d');
canvasContext.clearRect(0, 0, canvasContext.canvas.width, canvasContext.canvas.height);
}
// predictions is an array of objects describing each detected face
@@ -149,10 +158,10 @@ class Camera extends React.Component {
const y = features[j][1];
let isInRange;
- if (this.props.isPortrait) {
- isInRange = this.isInRangeForPortrait(x, y);
+ if (isPortrait) {
+ isInRange = isInRangeForPortrait(x, y);
} else {
- isInRange = this.isInRangeForID(x, y);
+ isInRange = isInRangeForID(x, y);
}
// if it is not in range, give feedback depending on which feature is out of range
isInPosition = isInPosition && isInRange;
@@ -164,202 +173,188 @@ class Camera extends React.Component {
canvasContext.lineWidth = 6;
canvasContext.strokeRect(start[0], start[1], size[0], size[1]);
// give positive feedback here if user is in correct position
- this.giveFeedback(predictions.length, [], true);
+ giveFeedback(predictions.length, [], true);
} else {
canvasContext.fillStyle = 'rgba(255, 51, 0, 0.75)';
canvasContext.fillRect(start[0], start[1], size[0], size[1]);
- this.giveFeedback(predictions.length, features[0], false);
+ giveFeedback(predictions.length, features[0], false);
}
});
if (predictions.length === 0) {
- this.giveFeedback(predictions.length, [], false);
+ giveFeedback(predictions.length, [], false);
}
- };
+ }, [isPortrait, giveFeedback, isInRangeForPortrait, isInRangeForID]);
- startDetection() {
+ const detectFromVideoFrame = useCallback((model, video) => {
+ model.estimateFaces(video).then((predictions) => {
+ if (shouldDetect && !dataUri) {
+ showDetections(predictions);
+
+ requestAnimationFrame(() => {
+ detectFromVideoFrame(model, video);
+ });
+ }
+ });
+ }, [shouldDetect, dataUri, showDetections]);
+
+ const startDetection = useCallback(() => {
setTimeout(() => {
- if (this.state.videoHasLoaded) {
+ if (videoHasLoaded) {
const loadModelPromise = blazeface.load();
Promise.all([loadModelPromise])
.then((values) => {
- this.setState({ isFinishedLoadingDetection: true });
- this.detectFromVideoFrame(values[0], this.videoRef.current);
+ setIsFinishedLoadingDetection(true);
+ detectFromVideoFrame(values[0], videoRef.current);
});
} else {
- this.setState({ isFinishedLoadingDetection: true });
- this.setState({ shouldDetect: false });
+ setIsFinishedLoadingDetection(true);
+ setShouldDetect(false);
// TODO: add error message
}
}, 1000);
- }
+ }, [videoHasLoaded, detectFromVideoFrame]);
- sendEvent() {
+ const sendEvent = useCallback((currentShouldDetect) => {
let eventName = 'edx.id_verification';
- if (this.props.isPortrait) {
+ if (isPortrait) {
eventName += '.user_photo';
} else {
eventName += '.id_photo';
}
- if (this.state.shouldDetect) {
+ if (currentShouldDetect) {
eventName += '.face_detection_enabled';
} else {
eventName += '.face_detection_disabled';
}
sendTrackEvent(eventName);
- }
+ }, [isPortrait]);
- giveFeedback(numFaces, rightEye, isCorrect) {
- if (this.state.shouldGiveFeedback) {
- const currentFeedback = this.state.feedback;
- let newFeedback = '';
- if (numFaces === 1) {
- // only give feedback if one face is detected otherwise
- // it would be difficult to tell a user which face to move
- if (isCorrect) {
- newFeedback = this.props.intl.formatMessage(messages['id.verification.photo.feedback.correct']);
- } else {
- // give feedback based on where user is
- newFeedback = this.props.intl.formatMessage(messages[this.getGridPosition(rightEye)]);
- }
- } else if (numFaces > 1) {
- newFeedback = this.props.intl.formatMessage(messages['id.verification.photo.feedback.two.faces']);
- } else {
- newFeedback = this.props.intl.formatMessage(messages['id.verification.photo.feedback.no.faces']);
- }
- if (currentFeedback !== newFeedback) {
- // only update status if it is different, so we don't overload the user with status updates
- this.setState({ feedback: newFeedback });
- }
- // turn off feedback for one to ensure that instructions aren't disruptive/interrupting
- this.setState({ shouldGiveFeedback: false });
- setTimeout(() => {
- this.setState({ shouldGiveFeedback: true });
- }, 1000);
+ const playShutterClick = useCallback(() => {
+ const audio = new Audio(`data:audio/mp3;base64,${shutter.base64}`);
+ audio.play();
+ }, []);
+
+ const reset = useCallback(() => {
+ setDataUri('');
+ if (shouldDetect) {
+ startDetection();
}
- }
+ }, [shouldDetect, startDetection]);
- isInRangeForPortrait(x, y) {
- return x > 47 && x < 570 && y > 100 && y < 410;
- }
-
- isInRangeForID(x, y) {
- return x > 120 && x < 470 && y > 120 && y < 350;
- }
-
- takePhoto() {
- if (this.state.dataUri) {
- this.reset();
+ const takePhoto = useCallback(() => {
+ if (dataUri) {
+ reset();
return;
}
const config = {
- sizeFactor: this.getSizeFactor(),
+ sizeFactor: getSizeFactor(),
};
- this.playShutterClick();
- const dataUri = this.cameraPhoto.getDataUri(config);
- this.setState({ dataUri });
- this.props.onImageCapture(dataUri);
- }
+ playShutterClick();
+ const newDataUri = cameraPhoto.getDataUri(config);
+ setDataUri(newDataUri);
+ onImageCapture(newDataUri);
+ }, [dataUri, cameraPhoto, getSizeFactor, onImageCapture, playShutterClick, reset]);
- playShutterClick() {
- const audio = new Audio(`data:audio/mp3;base64,${shutter.base64}`);
- audio.play();
- }
+ const setDetection = useCallback(() => {
+ setShouldDetect((prevShouldDetect) => {
+ const newShouldDetect = !prevShouldDetect;
- reset() {
- this.setState({ dataUri: '' });
- if (this.state.shouldDetect) {
- this.startDetection();
- }
- }
+ if (newShouldDetect) {
+ setIsFinishedLoadingDetection(false);
+ setTimeout(() => startDetection(), 0);
+ }
- render() {
- const cameraFlashClass = this.state.dataUri
- ? 'do-transition camera-flash'
- : 'camera-flash';
- return (
-
-
-
- {this.props.isPortrait
- ? this.props.intl.formatMessage(messages['id.verification.photo.enable.detection.portrait.help.text'])
- : this.props.intl.formatMessage(messages['id.verification.photo.enable.detection.id.help.text'])}
-
-
-
-
-
{ this.setVideoHasLoaded(); }}
- style={{
- display: this.state.dataUri ? 'none' : 'block',
- WebkitTransform: 'scaleX(-1)',
- transform: 'scaleX(-1)',
- }}
- playsInline
- />
- {this.state.feedback}
-
-
{
- this.takePhoto();
+ // Send event after state update
+ setTimeout(() => sendEvent(newShouldDetect), 0);
+
+ return newShouldDetect;
+ });
+ }, [startDetection, sendEvent]);
+
+ const cameraFlashClass = dataUri
+ ? 'do-transition camera-flash'
+ : 'camera-flash';
+
+ return (
+
+
+
+ {isPortrait
+ ? intl.formatMessage(messages['id.verification.photo.enable.detection.portrait.help.text'])
+ : intl.formatMessage(messages['id.verification.photo.enable.detection.id.help.text'])}
+
+
+
+
+
- {this.state.dataUri
- ? this.props.intl.formatMessage(messages['id.verification.photo.retake'])
- : this.props.intl.formatMessage(messages['id.verification.photo.take'])}
-
+ playsInline
+ />
+ {feedback}
- );
- }
-}
+
+ {dataUri
+ ? intl.formatMessage(messages['id.verification.photo.retake'])
+ : intl.formatMessage(messages['id.verification.photo.take'])}
+
+
-
@@ -61,7 +59,7 @@ describe('SubmittedPanel', () => {
-
@@ -75,7 +73,7 @@ describe('SubmittedPanel', () => {
-
@@ -90,7 +88,7 @@ describe('SubmittedPanel', () => {
-
@@ -108,7 +106,7 @@ describe('SubmittedPanel', () => {
-
@@ -128,7 +126,7 @@ describe('SubmittedPanel', () => {
-
@@ -147,18 +145,22 @@ describe('SubmittedPanel', () => {
-
)));
- await fireEvent.loadedData(screen.queryByTestId('video'));
+ fireEvent.loadedData(screen.queryByTestId('video'));
const checkbox = await screen.findByLabelText('Enable Face Detection');
- await fireEvent.click(checkbox);
- expect(analytics.sendTrackEvent).toHaveBeenCalledWith('edx.id_verification.user_photo.face_detection_enabled');
- await fireEvent.click(checkbox);
- expect(analytics.sendTrackEvent).toHaveBeenCalledWith('edx.id_verification.user_photo.face_detection_disabled');
+ fireEvent.click(checkbox);
+ await waitFor(() => {
+ expect(analytics.sendTrackEvent).toHaveBeenCalledWith('edx.id_verification.user_photo.face_detection_enabled');
+ });
+ fireEvent.click(checkbox);
+ await waitFor(() => {
+ expect(analytics.sendTrackEvent).toHaveBeenCalledWith('edx.id_verification.user_photo.face_detection_disabled');
+ });
});
it('sends tracking events on id photo page', async () => {
@@ -168,7 +170,7 @@ describe('SubmittedPanel', () => {
-
@@ -176,9 +178,108 @@ describe('SubmittedPanel', () => {
await fireEvent.loadedData(screen.queryByTestId('video'));
const checkbox = await screen.findByLabelText('Enable Face Detection');
- await fireEvent.click(checkbox);
- expect(analytics.sendTrackEvent).toHaveBeenCalledWith('edx.id_verification.id_photo.face_detection_enabled');
- await fireEvent.click(checkbox);
- expect(analytics.sendTrackEvent).toHaveBeenCalledWith('edx.id_verification.id_photo.face_detection_disabled');
+ fireEvent.click(checkbox);
+ await waitFor(() => {
+ expect(analytics.sendTrackEvent).toHaveBeenCalledWith('edx.id_verification.id_photo.face_detection_enabled');
+ });
+ fireEvent.click(checkbox);
+ await waitFor(() => {
+ expect(analytics.sendTrackEvent).toHaveBeenCalledWith('edx.id_verification.id_photo.face_detection_disabled');
+ });
+ });
+
+ describe('Camera getSizeFactor method', () => {
+ let mockGetDataUri;
+
+ beforeEach(() => {
+ jest.clearAllMocks();
+ mockGetDataUri = jest.fn().mockReturnValue('data:image/jpeg;base64,test');
+ });
+
+ it('scales down large resolutions to stay under 10MB limit', async () => {
+ const currentSettings = { width: 4000, height: 3000 };
+
+ CameraPhoto.mockImplementation(() => ({
+ startCamera: jest.fn(),
+ stopCamera: jest.fn(),
+ getDataUri: mockGetDataUri,
+ getCameraSettings: jest.fn().mockReturnValue(currentSettings),
+ }));
+
+ await act(async () => render((
+
+
+
+
+
+
+ )));
+
+ const button = await screen.findByRole('button', { name: /take photo/i });
+ fireEvent.click(button);
+
+ // For large resolution: size = 4000 * 3000 * 3 = 36,000,000 bytes
+ // Ratio = 9,999,999 / 36,000,000 ≈ 0.278
+ expect(mockGetDataUri).toHaveBeenCalledWith(expect.objectContaining({
+ sizeFactor: expect.closeTo(0.278, 2),
+ }));
+ });
+
+ it('scales up 640x480 resolution to improve quality', async () => {
+ const currentSettings = { width: 640, height: 480 };
+
+ CameraPhoto.mockImplementation(() => ({
+ startCamera: jest.fn(),
+ stopCamera: jest.fn(),
+ getDataUri: mockGetDataUri,
+ getCameraSettings: jest.fn().mockReturnValue(currentSettings),
+ }));
+
+ await act(async () => render((
+
+
+
+
+
+
+ )));
+
+ const button = await screen.findByRole('button', { name: /take photo/i });
+ fireEvent.click(button);
+
+ expect(mockGetDataUri).toHaveBeenCalledWith(expect.objectContaining({
+ sizeFactor: 2,
+ }));
+ });
+
+ it('maintains original size for medium resolutions', async () => {
+ const currentSettings = { width: 1280, height: 720 };
+
+ CameraPhoto.mockImplementation(() => ({
+ startCamera: jest.fn(),
+ stopCamera: jest.fn(),
+ getDataUri: mockGetDataUri,
+ getCameraSettings: jest.fn().mockReturnValue(currentSettings),
+ }));
+
+ await act(async () => render((
+
+
+
+
+
+
+ )));
+
+ const button = await screen.findByRole('button', { name: /take photo/i });
+ fireEvent.click(button);
+
+ expect(mockGetDataUri).toHaveBeenCalledWith(expect.objectContaining({
+ sizeFactor: 1,
+ }));
+ });
});
});
- {this.props.intl.formatMessage(messages['account.settings.section.social.media'])} + {intl.formatMessage(messages['account.settings.section.social.media'])}
- {this.props.intl.formatMessage( + {intl.formatMessage( messages['account.settings.section.social.media.description'], { siteName: getConfig().SITE_NAME }, )} @@ -747,67 +751,67 @@ class AccountSettingsPage extends React.Component {