Initial Delete

plugins/talk-plugin-auth/client/index.js

@@ -4,6 +4,7 @@ import SetUsernameDialog from './stream/containers/SetUsernameDialog';
 import translations from './translations.yml';
 import Login from './login/containers/Main';
 import reducer from './login/reducer';
+import DeleteMyAccount from './profile-settings/components/DeleteMyAccount';
 
 export default {
   reducer,
@@ -11,5 +12,6 @@ export default {
   slots: {
     stream: [UserBox, SignInButton, SetUsernameDialog],
     login: [Login],
+    profileSettings: [DeleteMyAccount],
   },
 };

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

@@ -0,0 +1,13 @@
+.button {
+  color: #787D80;
+  border-radius: 2px;
+  border: 1px solid #787d80;
+  background-color: transparent;
+  height: 30px;
+  font-size: 0.9em;
+  line-height: normal;
+
+  &:hover {
+    background-color: #eaeaea;
+  }
+}

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

@@ -0,0 +1,57 @@
+import React from 'react';
+import cn from 'classnames';
+import styles from './DeleteMyAccount.css';
+import { Button } from 'plugin-api/beta/client/components/ui';
+import DeleteMyAccountDialog from './DeleteMyAccountDialog';
+
+const initialState = { showDialog: false };
+
+class DeleteMyAccount extends React.Component {
+  state = initialState;
+
+  showDialog = () => {
+    this.setState({
+      showDialog: true,
+    });
+  };
+
+  closeDialog = () => {
+    this.setState({
+      showDialog: false,
+    });
+  };
+
+  render() {
+    return (
+      <div className="talk-plugin-auth--delete-my-account">
+        <DeleteMyAccountDialog />
+        <h3
+          className={cn(
+            styles.title,
+            'talk-plugin-auth--delete-my-account-description'
+          )}
+        >
+          Delete My Account
+        </h3>
+        <p
+          className={cn(
+            styles.description,
+            'talk-plugin-auth--delete-my-account-description'
+          )}
+        >
+          Deleting your account will permanently erase your profile and remove
+          all your comments from this site.
+        </p>
+        <Button
+          className={cn(styles.button)}
+          icon="delete"
+          onClick={this.onSave}
+        >
+          Delete My Account
+        </Button>
+      </div>
+    );
+  }
+}
+
+export default DeleteMyAccount;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Dialog } from 'plugin-api/beta/client/components/ui';
+
+class DeleteMyAccount extends React.Component {
+  render() {
+    return <Dialog open={false}>Holaa</Dialog>;
+  }
+}
+
+export default DeleteMyAccount;