wip

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

@@ -24,7 +24,7 @@ class DeleteMyAccount extends React.Component {
   render() {
     return (
       <div className="talk-plugin-auth--delete-my-account">
-        <DeleteMyAccountDialog />
+        <DeleteMyAccountDialog closeDialog={this.closeDialog} />
         <h3
           className={cn(
             styles.title,

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

@@ -0,0 +1,95 @@
+.dialog {
+  border: none;
+  box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2);
+  width: 320px;
+  top: 10px;
+  font-family: Helvetica, 'Helvetica Neue', Verdana, sans-serif;
+  font-size: 14px;
+  border-radius: 4px;
+  padding: 12px 20px;
+}
+
+.close {
+  font-size: 20px;
+  line-height: 14px;
+  top: 10px;
+  right: 10px;
+  position: absolute;
+  display: block;
+  font-weight: bold;
+  color: #363636;
+  cursor: pointer;
+
+  &:hover {
+    color: #6b6b6b;
+  }
+}
+
+.title {
+  font-size: 1.3em;
+  margin-bottom: 8px;
+}
+
+.description {
+  font-size: 1em;
+  line-height: 20px;
+  margin: 0;
+}
+
+.button {
+  color: #787D80;
+  border-radius: 2px;
+  background-color: transparent;
+  height: 30px;
+  font-size: 0.9em;
+  line-height: normal;
+
+  &:hover {
+    background-color: #eaeaea;
+  }
+
+  &.cancel {
+    background-color: transparent;
+    color: #787D80;
+  }
+
+  &.proceed {
+    background-color: #3498DB;
+    color: white;
+  }
+}
+
+.actions {
+  text-align: right;
+}
+
+.list {
+  padding: 0;
+  margin: 10px 0;
+  list-style: none;
+}
+
+.item {
+  display: flex;
+  margin-bottom: 10px;
+
+  .itemIcon {
+    flex-grow: 0;
+  }
+
+  .text {
+    flex-grow: 1;
+    padding-left: 10px;
+  }
+
+  > i.itemIcon {
+    font-size: 1.3em;
+  }
+}
+
+
+
+
+
+/** Step **/
+

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

@@ -1,10 +1,69 @@
 import React from 'react';
-import { Dialog } from 'plugin-api/beta/client/components/ui';
+import cn from 'classnames';
+import PropTypes from 'prop-types';
+import styles from './DeleteMyAccountDialog.css';
+import { Button, Dialog, Icon } from 'plugin-api/beta/client/components/ui';
+import StepProgress from './StepProgress';
+
+const initialState = { step: 0 };
+
+class DeleteMyAccountDialog extends React.Component {
+  state = initialState;
+
+  goToNextStep = () => {
+    this.setState(state => ({
+      step: state.step + 1,
+    }));
+  };
+
+  clear = () => {
+    this.setState(initialState);
+  };
 
-class DeleteMyAccount extends React.Component {
   render() {
-    return <Dialog open={false}>Holaa</Dialog>;
+    return (
+      <Dialog open={true} className={styles.dialog}>
+        <span className={styles.close} onClick={this.props.closeDialog}>
+          ×
+        </span>
+        <h3 className={styles.title}>Delete My Account</h3>
+        <StepProgress currentStep={this.state.step} totalSteps={4} />
+        <div className={styles.step}>
+          <p className={styles.description}>
+            You are attempting to delete your account. This means:
+          </p>
+          <ul className={styles.list}>
+            <li className={styles.item}>
+              <Icon name="done" className={styles.itemIcon} />
+              <span className={styles.text}>
+                All of your comments are removed from this site
+              </span>
+            </li>
+            <li className={styles.item}>
+              <Icon name="done" className={styles.itemIcon} />
+              <span className={styles.text}>
+                All of your comments are deleted from our database
+              </span>
+            </li>
+            <li className={styles.item}>
+              <Icon name="done" className={styles.itemIcon} />
+              <span className={styles.text}>
+                Your username and email address are removed from our system
+              </span>
+            </li>
+          </ul>
+        </div>
+        <div className={cn(styles.actions)}>
+          <Button className={cn(styles.button, styles.cancel)}>Cancel</Button>
+          <Button className={cn(styles.button, styles.proceed)}>Proceed</Button>
+        </div>
+      </Dialog>
+    );
   }
 }
 
-export default DeleteMyAccount;
+DeleteMyAccountDialog.propTypes = {
+  closeDialog: PropTypes.func.isRequired,
+};
+
+export default DeleteMyAccountDialog;

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

@@ -0,0 +1,9 @@
+.step {
+  &.current {
+    color: rgba(0, 205, 115, 0.3);
+  }
+
+  &.completed {
+    color: #00CD73;
+  }
+}

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import styles from './StepProgress.css';
+import { Icon } from 'plugin-api/beta/client/components/ui';
+
+class StepProgress extends React.Component {
+  render() {
+    return (
+      <div>
+        <span className={styles.step}>
+          <Icon name="done" />
+        </span>
+      </div>
+    );
+  }
+}
+
+export default StepProgress;