diff --git a/lms/static/js/student_account/StudentAccountDeletionInitializer.js b/lms/static/js/student_account/StudentAccountDeletionInitializer.js index 730a212138..4f1b42174d 100644 --- a/lms/static/js/student_account/StudentAccountDeletionInitializer.js +++ b/lms/static/js/student_account/StudentAccountDeletionInitializer.js @@ -16,6 +16,7 @@ const wrapperRendered = setInterval(() => { component: StudentAccountDeletion, selector: `#${accountDeletionWrapperId}`, componentName: 'StudentAccountDeletion', + props: { socialAccountLinks: window.auth }, }); } diff --git a/lms/static/js/student_account/components/StudentAccountDeletion.jsx b/lms/static/js/student_account/components/StudentAccountDeletion.jsx index 7ac9e22d90..55e20d36b4 100644 --- a/lms/static/js/student_account/components/StudentAccountDeletion.jsx +++ b/lms/static/js/student_account/components/StudentAccountDeletion.jsx @@ -1,7 +1,7 @@ /* globals gettext */ /* eslint-disable react/no-danger, import/prefer-default-export */ import React from 'react'; -import { Button } from '@edx/paragon/static'; +import { Button, Icon, StatusAlert } from '@edx/paragon/static'; import StringUtils from 'edx-ui-toolkit/js/utils/string-utils'; import StudentAccountDeletionModal from './StudentAccountDeletionModal'; @@ -10,7 +10,10 @@ export class StudentAccountDeletion extends React.Component { super(props); this.closeDeletionModal = this.closeDeletionModal.bind(this); this.loadDeletionModal = this.loadDeletionModal.bind(this); - this.state = { deletionModalOpen: false }; + this.state = { + deletionModalOpen: false, + socialAuthConnected: props.socialAccountLinks.providers.reduce((acc, value) => acc || value.connected, false) + }; } closeDeletionModal() { @@ -23,7 +26,7 @@ export class StudentAccountDeletion extends React.Component { } render() { - const { deletionModalOpen } = this.state; + const { deletionModalOpen, socialAuthConnected } = 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}.'), { @@ -32,6 +35,14 @@ export class StudentAccountDeletion extends React.Component { }, ); + const socialAuthError = StringUtils.interpolate( + gettext('Before proceeding, please {htmlStart}unlink all social media accounts{htmlEnd}.'), + { + htmlStart: '', + htmlEnd: '', + } + ); + return (
{ gettext('We’re sorry to see you go!') }
@@ -45,10 +56,26 @@ export class StudentAccountDeletion extends React.Component {