Merge pull request #19067 from edx/jeskew/add_retirement_warning_text

Add user retirement warning text about email retirement.

lms/static/js/student_account/components/StudentAccountDeletion.jsx

@@ -64,6 +64,22 @@ 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>',
+      },
+    );
+
+    const acctDeletionWarningText = StringUtils.interpolate(
+      gettext('{strongStart}Warning: Account deletion is permanent.{strongEnd} Please read the above carefully before proceeding. This is an irreversible action, and {strongStart}you will no longer be able to use the same email on edX.{strongEnd}'),
+      {
+        strongStart: '<strong>',
+        strongEnd: '</strong>',
+      },
+    );
+
     return (
       <div className="account-deletion-details">
         <p className="account-settings-header-subtitle">{ gettext('We’re sorry to see you go!') }</p>
@@ -73,7 +89,14 @@ export class StudentAccountDeletion extends React.Component {
           className="account-settings-header-subtitle"
           dangerouslySetInnerHTML={{ __html: loseAccessText }}
         />
-
+        <p
+          className="account-settings-header-subtitle-warning"
+          dangerouslySetInnerHTML={{ __html: acctDeletionWarningText }}
+        />
+        <p
+          className="account-settings-header-subtitle"
+          dangerouslySetInnerHTML={{ __html: changeAcctInfoText }}
+        />
         <Button
           id="delete-account-btn"
           className={['btn-outline-primary']}

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: $alert-color;
+    }
+
     .account-settings-section-message {
       font-size: 16px;
       line-height: 22px;