diff --git a/lms/static/js/student_account/StudentAccountDeletionInitializer.js b/lms/static/js/student_account/StudentAccountDeletionInitializer.js new file mode 100644 index 0000000000..730a212138 --- /dev/null +++ b/lms/static/js/student_account/StudentAccountDeletionInitializer.js @@ -0,0 +1,27 @@ +/* eslint-disable no-new */ +import { ReactRenderer } from 'ReactRenderer'; +import { StudentAccountDeletion } from './components/StudentAccountDeletion'; + +const maxWait = 60000; +const interval = 50; +const accountDeletionWrapperId = 'account-deletion-container'; +let currentWait = 0; + +const wrapperRendered = setInterval(() => { + const wrapper = document.getElementById(accountDeletionWrapperId); + + if (wrapper) { + clearInterval(wrapperRendered); + new ReactRenderer({ + component: StudentAccountDeletion, + selector: `#${accountDeletionWrapperId}`, + componentName: 'StudentAccountDeletion', + }); + } + + currentWait += interval; + + if (currentWait >= maxWait) { + clearInterval(wrapperRendered); + } +}, interval); diff --git a/lms/static/js/student_account/components/StudentAccountDeletion.jsx b/lms/static/js/student_account/components/StudentAccountDeletion.jsx new file mode 100644 index 0000000000..7ac9e22d90 --- /dev/null +++ b/lms/static/js/student_account/components/StudentAccountDeletion.jsx @@ -0,0 +1,56 @@ +/* globals gettext */ +/* eslint-disable react/no-danger, import/prefer-default-export */ +import React from 'react'; +import { Button } from '@edx/paragon/static'; +import StringUtils from 'edx-ui-toolkit/js/utils/string-utils'; +import StudentAccountDeletionModal from './StudentAccountDeletionModal'; + +export class StudentAccountDeletion extends React.Component { + constructor(props) { + super(props); + this.closeDeletionModal = this.closeDeletionModal.bind(this); + this.loadDeletionModal = this.loadDeletionModal.bind(this); + this.state = { deletionModalOpen: false }; + } + + closeDeletionModal() { + this.setState({ deletionModalOpen: false }); + this.modalTrigger.focus(); + } + + loadDeletionModal() { + this.setState({ deletionModalOpen: true }); + } + + render() { + const { deletionModalOpen } = this.state; + const loseAccessText = StringUtils.interpolate( + gettext('You may also lose access to verified certificates and other program credentials like MicroMasters certificates. If you want to make a copy of these for your records before proceeding with deletion, follow the instructions for {htmlStart}printing or downloading a certificate{htmlEnd}.'), + { + htmlStart: '', + htmlEnd: '', + }, + ); + + return ( +
+

{ gettext('We’re sorry to see you go!') }

+

{ gettext('Please note: Deletion of your account and personal data is permanent and cannot be undone. EdX will not be able to recover your account or the data that is deleted.') }

+

{ gettext('Once your account is deleted, you cannot use it to take courses on the edX app, edx.org, or any other site hosted by edX. This includes access to edx.org from your employer’s or university’s system and access to private sites offered by MIT Open Learning, Wharton Executive Education, and Harvard Medical School.') }

+

+ +

+ ); + } +} diff --git a/lms/static/js/student_account/components/StudentAccountDeletionModal.jsx b/lms/static/js/student_account/components/StudentAccountDeletionModal.jsx new file mode 100644 index 0000000000..022829cc19 --- /dev/null +++ b/lms/static/js/student_account/components/StudentAccountDeletionModal.jsx @@ -0,0 +1,216 @@ +/* globals gettext */ +/* eslint-disable react/no-danger */ +import React from 'react'; +import 'whatwg-fetch'; +import PropTypes from 'prop-types'; +import Cookies from 'js-cookie'; +import { Button, Modal, Icon, InputText, StatusAlert } from '@edx/paragon/static'; +import StringUtils from 'edx-ui-toolkit/js/utils/string-utils'; + +class StudentAccountDeletionConfirmationModal extends React.Component { + constructor(props) { + super(props); + + this.deleteAccount = this.deleteAccount.bind(this); + this.handlePasswordInputChange = this.handlePasswordInputChange.bind(this); + this.passwordFieldValidation = this.passwordFieldValidation.bind(this); + this.state = { + password: '', + passwordSubmitted: false, + passwordValid: true, + validationMessage: '', + validationErrorDetails: '', + accountQueuedForDeletion: false, + responseError: false, + }; + } + + addUserToDeletionQueue() { + // TODO: Add API call to add user to account deletion queue + + this.setState({ + accountQueuedForDeletion: true, + responseError: false, + passwordSubmitted: false, + validationMessage: '', + validationErrorDetails: '', + }); + } + + deleteAccount() { + const { password } = this.state; + + this.setState({ passwordSubmitted: true }); + + fetch('/accounts/verify_password', { + method: 'POST', + credentials: 'same-origin', + headers: { + 'Content-Type': 'application/x-www-form-urlencoded', + 'X-CSRFToken': Cookies.get('csrftoken'), + }, + body: JSON.stringify({ password }), + }).then((response) => { + if (response.ok) { + return this.addUserToDeletionQueue(); + } + return this.failedSubmission(response); + }).catch(error => this.failedSubmission(error)); + } + + failedSubmission(error) { + const { status } = error; + const title = status === 403 ? gettext('Password is incorrect') : gettext('Unable to delete account'); + const body = status === 403 ? gettext('Please re-enter your password.') : gettext('Sorry, there was an error trying to process your request. Please try again later.'); + + this.setState({ + passwordSubmitted: false, + responseError: true, + passwordValid: false, + validationMessage: title, + validationErrorDetails: body, + }); + } + + handlePasswordInputChange(value) { + this.setState({ password: value }); + } + + passwordFieldValidation(value) { + let feedback = { passwordValid: true }; + + if (value.length < 1) { + feedback = { + passwordValid: false, + validationMessage: gettext('A Password is required'), + validationErrorDetails: '', + }; + } + + this.setState(feedback); + } + + renderConfirmationModal() { + const { + passwordValid, + password, + passwordSubmitted, + responseError, + validationErrorDetails, + validationMessage, + } = this.state; + const { onClose } = this.props; + const loseAccessText = StringUtils.interpolate( + gettext('You may also lose access to verified certificates and other program credentials like MicroMasters certificates. If you want to make a copy of these for your records before proceeding with deletion, follow the instructions for {htmlStart}printing or downloading a certificate{htmlEnd}.'), + { + htmlStart: '', + htmlEnd: '', + }, + ); + + return ( +
+ + {responseError && + +
+ +
+
+

{ validationMessage }

+

{ validationErrorDetails }

+
+
+ )} + alertType="danger" + dismissible={false} + open + /> + } + + +
+ +
+
+

{ gettext('You have selected “Delete my account.” Deletion of your account and personal data is permanent and cannot be undone. EdX will not be able to recover your account or the data that is deleted.') }

+

{ gettext('If you proceed, you will be unable to use this account to take courses on the edX app, edx.org, or any other site hosted by edX. This includes access to edx.org from your employer’s or university’s system and access to private sites offered by MIT Open Learning, Wharton Executive Education, and Harvard Medical School.') }

+

+

+ + )} + dismissible={false} + open + /> +

{ gettext('If you still wish to continue and delete your account, please enter your account password:') }

+ + + )} + closeText={gettext('Cancel')} + buttons={[ +