From e4937819961bc3ae206fbab55f9fd8b557ac7fdd Mon Sep 17 00:00:00 2001
From: John Eskew <jeskew@edx.org>
Date: Thu, 4 Oct 2018 17:40:50 -0400
Subject: [PATCH] Add user retirement warning text about email retirement.

---
 .../components/StudentAccountDeletion.jsx      | 18 +++++++++++++++++-
 lms/static/sass/views/_account-settings.scss   |  5 +++++
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/lms/static/js/student_account/components/StudentAccountDeletion.jsx b/lms/static/js/student_account/components/StudentAccountDeletion.jsx
index 1dbbaeaa9f..4212501790 100644
--- a/lms/static/js/student_account/components/StudentAccountDeletion.jsx
+++ b/lms/static/js/student_account/components/StudentAccountDeletion.jsx
@@ -64,6 +64,14 @@ export class StudentAccountDeletion extends React.Component {
       },
     );
 
+    const changeAcctInfoText = StringUtils.interpolate(
+      gettext('{htmlStart}Want to change your email, name, or password instead?{htmlEnd}'),
+      {
+        htmlStart: '<a href="https://support.edx.org/hc/en-us/sections/115004139268-Manage-Your-Account-Settings" 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>
@@ -73,7 +81,15 @@ export class StudentAccountDeletion extends React.Component {
           className="account-settings-header-subtitle"
           dangerouslySetInnerHTML={{ __html: loseAccessText }}
         />
-
+        <p className="account-settings-header-subtitle-warning">
+          <strong>{ gettext('Warning: Account deletion is permanent. ') }</strong>
+          {gettext('Please read the above carefully before proceeding. This is an irreversible action, and ')}
+          <strong>{ gettext('you will no longer be able to use the same email on edX.') }</strong>
+        </p>
+        <p
+          className="account-settings-header-subtitle"
+          dangerouslySetInnerHTML={{ __html: changeAcctInfoText }}
+        />
         <Button
           id="delete-account-btn"
           className={['btn-outline-primary']}
diff --git a/lms/static/sass/views/_account-settings.scss b/lms/static/sass/views/_account-settings.scss
index 6ec03544f8..efc152b431 100644
--- a/lms/static/sass/views/_account-settings.scss
+++ b/lms/static/sass/views/_account-settings.scss
@@ -130,6 +130,11 @@
       padding-bottom: 10px;
     }
 
+    .account-settings-header-subtitle-warning {
+      @extend .account-settings-header-subtitle;
+      color: #ab2121;
+    }
+
     .account-settings-section-message {
       font-size: 16px;
       line-height: 22px;