From b2c9b50de1b8b594b386fc080d865294e026fc85 Mon Sep 17 00:00:00 2001
From: Diana Huang <dkh@edx.org>
Date: Tue, 15 May 2018 11:25:00 -0400
Subject: [PATCH] Add a warning message when there are social auth links
 connected.

---
 .../StudentAccountDeletionInitializer.js      |  1 +
 .../components/StudentAccountDeletion.jsx     | 33 +++++++++++++++++--
 .../student_account/account_settings.html     |  8 ++++-
 3 files changed, 38 insertions(+), 4 deletions(-)

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: '<a href="https://support.edx.org/hc/en-us/articles/207206067" target="_blank">',
+        htmlEnd: '</a>',
+      }
+    );
+
     return (
       <div className="account-deletion-details">
         <p className="account-settings-header-subtitle">{ gettext('We’re sorry to see you go!') }</p>
@@ -45,10 +56,26 @@ export class StudentAccountDeletion extends React.Component {
         <Button
           id="delete-account-btn"
           className={['btn-outline-primary']}
+          disabled={socialAuthConnected}
           label={gettext('Delete My Account')}
           inputRef={(input) => { this.modalTrigger = input; }}
           onClick={this.loadDeletionModal}
         />
+        {socialAuthConnected && <StatusAlert
+                  dialog={(
+                    <div className="modal-alert">
+                      <div className="icon-wrapper">
+                        <Icon id="delete-confirmation-body-error-icon" className={['fa', 'fa-exclamation-circle']} />
+                      </div>
+                      <div className="alert-content">
+                        <p dangerouslySetInnerHTML={{ __html: socialAuthError }}/>
+                      </div>
+                    </div>
+                  )}
+                  alertType="danger"
+                  dismissible={false}
+                  open
+              />}
         {deletionModalOpen && <StudentAccountDeletionModal onClose={this.closeDeletionModal} />}
       </div>
     );
diff --git a/lms/templates/student_account/account_settings.html b/lms/templates/student_account/account_settings.html
index 0f1ce01d00..45928b086c 100644
--- a/lms/templates/student_account/account_settings.html
+++ b/lms/templates/student_account/account_settings.html
@@ -8,6 +8,8 @@ from django.conf import settings
 from django.utils.translation import ugettext as _
 
 from openedx.core.djangolib.js_utils import dump_js_escaped_json, js_escaped_string
+from openedx.core.djangolib.markup import HTML
+from webpack_loader.templatetags.webpack_loader import render_bundle
 
 # GDPR Flag
 from openedx.features.course_experience import ENABLE_GDPR_COMPAT_FLAG
@@ -70,6 +72,10 @@ from openedx.features.course_experience import ENABLE_GDPR_COMPAT_FLAG
     );
 </%static:require_module>
 % if ENABLE_GDPR_COMPAT_FLAG.is_enabled_without_course_context():
-<%static:webpack entry="StudentAccountDeletionInitializer"></%static:webpack>
+    <script type="text/javascript">
+        window.auth = ${ auth | n, dump_js_escaped_json }
+    </script>
+<%static:webpack entry="StudentAccountDeletionInitializer">
+</%static:webpack>
 % endif
 </%block>