Adding AccountDeletionRequestedSign.js

plugins/talk-plugin-auth/client/profile-settings/components/AccountDeletionRequestedSign.css

@@ -0,0 +1,23 @@
+.container {
+  border : solid 1px #F26563;
+  border-radius: 2px;
+  color: #3B4A53; 
+}
+
+.button {
+  color: #787D80;
+  border-radius: 2px;
+  background-color: transparent;
+  height: 30px;
+  font-size: 0.9em;
+  line-height: normal;
+
+  &:hover {
+    background-color: #eaeaea;
+  }
+
+  &.secondary {
+    background-color: #787D80;
+    color: white;
+  }
+}

plugins/talk-plugin-auth/client/profile-settings/components/AccountDeletionRequestedSign.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import cn from 'classnames';
+import { Button, Icon } from 'plugin-api/beta/client/components/ui';
+import styles from './AccountDeletionRequestedSign.css';
+
+class AccountDeletionRequestedSign extends React.Component {
+  render() {
+    return (
+      <div className={styles.container}>
+        <h3>
+          <Icon name="warning" />Account Deletion Requested
+        </h3>
+        <p>
+          A request to delete your account was received on. If you would like to
+          continue leaving comments, replies or reactions, you may cancel your
+          request to delete your account below before
+        </p>
+        <Button className={cn(styles.button, styles.secondary)}>
+          Cancel Account Deletion Request
+        </Button>
+      </div>
+    );
+  }
+}
+
+export default AccountDeletionRequestedSign;

plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountDialog.js

@@ -60,6 +60,7 @@ class DeleteMyAccountDialog extends React.Component {
           <DeleteMyAccountStep3
             goToNextStep={this.goToNextStep}
             cancel={this.cancel}
+            requestAccountDeletion={this.props.requestAccountDeletion}
           />
         )}
         {step === 4 && <DeleteMyAccountFinalStep finish={this.cancel} />}
@@ -70,6 +71,7 @@ class DeleteMyAccountDialog extends React.Component {
 
 DeleteMyAccountDialog.propTypes = {
   closeDialog: PropTypes.func.isRequired,
+  requestAccountDeletion: PropTypes.func.isRequired,
 };
 
 export default DeleteMyAccountDialog;

plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountFinalStep.js

@@ -11,12 +11,12 @@ const DeleteMyAccountFinalStep = props => (
       email address associated with your account.
     </p>
 
-    <div className={styles.box}>
+    <div className={cn(styles.box, styles.scheduledDeletion)}>
       <strong className={styles.block}>
         Your account is scheduled to be deleted at:
       </strong>
       <strong className={styles.block}>
-        <Icon name="access_time" />
+        <Icon name="access_time" className={styles.timeIcon} />
         <span>Account Deletion Date and Time</span>
       </strong>
     </div>

plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountStep.css

@@ -106,3 +106,10 @@
 .step {
   padding-top: 20px;
 }
+
+.scheduledDeletion {
+  i.timeIcon {
+    font-size: 1.2em;
+    padding: 4px;
+  }
+}

plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountStep3.js

@@ -4,40 +4,50 @@ import cn from 'classnames';
 import { Button } from 'plugin-api/beta/client/components/ui';
 import styles from './DeleteMyAccountStep.css';
 
-const DeleteMyAccountStep3 = props => (
-  <div className={styles.step}>
-    <h4 className={styles.subTitle}>
-      Are you sure you want to delete your account?
-    </h4>
-    <p className={styles.description}>
-      To confirm you would like to delete your account please type in the
-      following phrase into the text box below:
-    </p>
-    <input
-      className={styles.textBox}
-      disabled={true}
-      readOnly={true}
-      value="delete"
-    />
-    <div className={cn(styles.actions)}>
-      <Button
-        className={cn(styles.button, styles.cancel)}
-        onClick={props.cancel}
-      >
-        Cancel
-      </Button>
-      <Button
-        className={cn(styles.button, styles.danger)}
-        onClick={props.goToNextStep}
-      >
-        Delete My Account
-      </Button>
-    </div>
-  </div>
-);
+class DeleteMyAccountStep3 extends React.Component {
+  deleteAndContinue = () => {
+    this.props.requestAccountDeletion();
+    this.props.goToNextStep();
+  };
+
+  render() {
+    return (
+      <div className={styles.step}>
+        <h4 className={styles.subTitle}>
+          Are you sure you want to delete your account?
+        </h4>
+        <p className={styles.description}>
+          To confirm you would like to delete your account please type in the
+          following phrase into the text box below:
+        </p>
+        <input
+          className={styles.textBox}
+          disabled={true}
+          readOnly={true}
+          value="delete"
+        />
+        <div className={cn(styles.actions)}>
+          <Button
+            className={cn(styles.button, styles.cancel)}
+            onClick={this.props.cancel}
+          >
+            Cancel
+          </Button>
+          <Button
+            className={cn(styles.button, styles.danger)}
+            onClicsk={this.deleteAndContinue}
+          >
+            Delete My Account
+          </Button>
+        </div>
+      </div>
+    );
+  }
+}
 
 DeleteMyAccountStep3.propTypes = {
   goToNextStep: PropTypes.func.isRequired,
+  requestAccountDeletion: PropTypes.func.isRequired,
   cancel: PropTypes.func.isRequired,
 };