From c57acddfc01547a1fc3d7842a0366d272022e78c Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Wed, 2 May 2018 14:01:03 -0300
Subject: [PATCH] Moving gdpr to `talk-plugin-profile-data`

---
 plugins/talk-plugin-auth/client/index.js      |  13 +-
 .../components/ChangePassword.css             |  87 -------
 .../components/ChangePassword.js              | 223 ------------------
 .../components/ChangeUsername.css             | 122 ----------
 .../components/ChangeUsername.js              | 188 ---------------
 .../components/ChangeUsernameDialog.css       |  84 -------
 .../components/ChangeUsernameDialog.js        | 117 ---------
 .../components/ErrorMessage.css               |   8 -
 .../components/ErrorMessage.js                |  17 --
 .../components/InputField.css                 |  80 -------
 .../profile-settings/components/InputField.js |  94 --------
 .../containers/ChangePassword.js              |  12 -
 .../containers/ChangeUsername.js              |  12 -
 .../AccountDeletionRequestedSign.css          |   0
 .../AccountDeletionRequestedSign.js           |   0
 .../client}/components/DeleteMyAccount.css    |   0
 .../client}/components/DeleteMyAccount.js     |   0
 .../components/DeleteMyAccountDialog.css      |   0
 .../components/DeleteMyAccountDialog.js       |   0
 .../components/DeleteMyAccountFinalStep.js    |   0
 .../components/DeleteMyAccountStep.css        |   0
 .../components/DeleteMyAccountStep0.js        |   0
 .../components/DeleteMyAccountStep1.js        |   0
 .../components/DeleteMyAccountStep2.js        |   0
 .../components/DeleteMyAccountStep3.js        |   0
 .../client/components/ErrorMessage.css        |   0
 .../client/components/ErrorMessage.js         |   0
 .../client/components/InputField.css          |   0
 .../client/components/InputField.js           |   0
 .../client}/components/StepProgress.css       |   0
 .../client}/components/StepProgress.js        |   0
 .../AccountDeletionRequestedSign.js           |   0
 .../client}/containers/DeleteMyAccount.js     |   0
 .../talk-plugin-profile-data/client/index.js  |   5 +-
 34 files changed, 5 insertions(+), 1057 deletions(-)
 delete mode 100644 plugins/talk-plugin-auth/client/profile-settings/components/ChangePassword.css
 delete mode 100644 plugins/talk-plugin-auth/client/profile-settings/components/ChangePassword.js
 delete mode 100644 plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsername.css
 delete mode 100644 plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsername.js
 delete mode 100644 plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsernameDialog.css
 delete mode 100644 plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsernameDialog.js
 delete mode 100644 plugins/talk-plugin-auth/client/profile-settings/components/ErrorMessage.css
 delete mode 100644 plugins/talk-plugin-auth/client/profile-settings/components/ErrorMessage.js
 delete mode 100644 plugins/talk-plugin-auth/client/profile-settings/components/InputField.css
 delete mode 100644 plugins/talk-plugin-auth/client/profile-settings/components/InputField.js
 delete mode 100644 plugins/talk-plugin-auth/client/profile-settings/containers/ChangePassword.js
 delete mode 100644 plugins/talk-plugin-auth/client/profile-settings/containers/ChangeUsername.js
 rename plugins/{talk-plugin-auth/client/stream => talk-plugin-profile-data/client}/components/AccountDeletionRequestedSign.css (100%)
 rename plugins/{talk-plugin-auth/client/stream => talk-plugin-profile-data/client}/components/AccountDeletionRequestedSign.js (100%)
 rename plugins/{talk-plugin-auth/client/profile-settings => talk-plugin-profile-data/client}/components/DeleteMyAccount.css (100%)
 rename plugins/{talk-plugin-auth/client/profile-settings => talk-plugin-profile-data/client}/components/DeleteMyAccount.js (100%)
 rename plugins/{talk-plugin-auth/client/profile-settings => talk-plugin-profile-data/client}/components/DeleteMyAccountDialog.css (100%)
 rename plugins/{talk-plugin-auth/client/profile-settings => talk-plugin-profile-data/client}/components/DeleteMyAccountDialog.js (100%)
 rename plugins/{talk-plugin-auth/client/profile-settings => talk-plugin-profile-data/client}/components/DeleteMyAccountFinalStep.js (100%)
 rename plugins/{talk-plugin-auth/client/profile-settings => talk-plugin-profile-data/client}/components/DeleteMyAccountStep.css (100%)
 rename plugins/{talk-plugin-auth/client/profile-settings => talk-plugin-profile-data/client}/components/DeleteMyAccountStep0.js (100%)
 rename plugins/{talk-plugin-auth/client/profile-settings => talk-plugin-profile-data/client}/components/DeleteMyAccountStep1.js (100%)
 rename plugins/{talk-plugin-auth/client/profile-settings => talk-plugin-profile-data/client}/components/DeleteMyAccountStep2.js (100%)
 rename plugins/{talk-plugin-auth/client/profile-settings => talk-plugin-profile-data/client}/components/DeleteMyAccountStep3.js (100%)
 rename plugins/{talk-plugin-auth => talk-plugin-profile-data}/client/components/ErrorMessage.css (100%)
 rename plugins/{talk-plugin-auth => talk-plugin-profile-data}/client/components/ErrorMessage.js (100%)
 rename plugins/{talk-plugin-auth => talk-plugin-profile-data}/client/components/InputField.css (100%)
 rename plugins/{talk-plugin-auth => talk-plugin-profile-data}/client/components/InputField.js (100%)
 rename plugins/{talk-plugin-auth/client/profile-settings => talk-plugin-profile-data/client}/components/StepProgress.css (100%)
 rename plugins/{talk-plugin-auth/client/profile-settings => talk-plugin-profile-data/client}/components/StepProgress.js (100%)
 rename plugins/{talk-plugin-auth/client/stream => talk-plugin-profile-data/client}/containers/AccountDeletionRequestedSign.js (100%)
 rename plugins/{talk-plugin-auth/client/profile-settings => talk-plugin-profile-data/client}/containers/DeleteMyAccount.js (100%)

diff --git a/plugins/talk-plugin-auth/client/index.js b/plugins/talk-plugin-auth/client/index.js
index 0567497ae..13abce1d9 100644
--- a/plugins/talk-plugin-auth/client/index.js
+++ b/plugins/talk-plugin-auth/client/index.js
@@ -4,23 +4,12 @@ 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/containers/DeleteMyAccount';
-import AccountDeletionRequestedSign from './stream/containers/AccountDeletionRequestedSign';
-import ChangePassword from './profile-settings/containers/ChangePassword';
-import ChangeUsername from './profile-settings/containers/ChangeUsername';
 
 export default {
   reducer,
   translations,
   slots: {
-    stream: [
-      AccountDeletionRequestedSign,
-      UserBox,
-      SignInButton,
-      SetUsernameDialog,
-    ],
+    stream: [UserBox, SignInButton, SetUsernameDialog],
     login: [Login],
-    profileHeader: [ChangeUsername],
-    profileSettings: [ChangePassword, DeleteMyAccount],
   },
 };
diff --git a/plugins/talk-plugin-auth/client/profile-settings/components/ChangePassword.css b/plugins/talk-plugin-auth/client/profile-settings/components/ChangePassword.css
deleted file mode 100644
index 6c7f9ae41..000000000
--- a/plugins/talk-plugin-auth/client/profile-settings/components/ChangePassword.css
+++ /dev/null
@@ -1,87 +0,0 @@
-.container {
-  position: relative;
-  color: #202020;
-  padding: 10px;
-  border-radius: 2px;
-  border: solid 1px transparent;
-  box-sizing: border-box;
-  justify-content: space-between;
-  
-  &.editing {
-    border-color: #979797;
-    background-color: #EDEDED;
-  }
-}
-
-.actions {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.title {
-  color: #202020;
-  margin: 0 0 20px;
-}
-
-.detailBottomBox {
-  display: block;
-  padding-top: 4px;
-  text-align: right;
-  width: 280px;
-}
-
-.detailLink {
-  color: #00538A;  
-  text-decoration: none;
-  font-size: 0.9em;
-  &:hover {
-    cursor: pointer;
-  }
-}
-
-.button {
-  border: 1px solid #787d80;
-  background-color: transparent;
-  height: 30px;
-  font-size: 0.9em;
-  line-height: normal;
-}
-
-.saveButton {
-  background-color: #3498DB;
-  border-color: #3498DB;
-  color: white;
-
-  > i {
-    font-size: 17px;
-  }
-    
-  &:hover {
-    background-color: #399ee2;
-    color: white;
-  }
-
-  &:disabled {
-    border-color: #e0e0e0;
-
-    &:hover {
-      background-color: #e0e0e0;
-      color: #4f5c67;
-      cursor: default;
-    }
-  }
-}
-
-.cancelButton {
-  color:#787D80;
-  margin-top: 6px;
-  font-size: 0.9em;
-
-  &:hover {
-    cursor: pointer;
-  }
-}
diff --git a/plugins/talk-plugin-auth/client/profile-settings/components/ChangePassword.js b/plugins/talk-plugin-auth/client/profile-settings/components/ChangePassword.js
deleted file mode 100644
index 90940728d..000000000
--- a/plugins/talk-plugin-auth/client/profile-settings/components/ChangePassword.js
+++ /dev/null
@@ -1,223 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cn from 'classnames';
-import styles from './ChangePassword.css';
-import { Button } from 'plugin-api/beta/client/components/ui';
-import validate from 'coral-framework/helpers/validate';
-import errorMsj from 'coral-framework/helpers/error';
-import isEqual from 'lodash/isEqual';
-import { t } from 'plugin-api/beta/client/services';
-import InputField from './InputField';
-import { getErrorMessages } from 'coral-framework/utils';
-
-const initialState = {
-  editing: false,
-  showErrors: true,
-  errors: {},
-  formData: {},
-};
-
-class ChangePassword extends React.Component {
-  state = initialState;
-  validKeys = ['oldPassword', 'newPassword', 'confirmNewPassword'];
-
-  onChange = e => {
-    const { name, value, type } = e.target;
-    this.setState(
-      state => ({
-        formData: {
-          ...state.formData,
-          [name]: value,
-        },
-      }),
-      () => {
-        this.fieldValidation(value, type, name);
-
-        // Perform equality validation if password fields have changed
-        if (name === 'newPassword' || name === 'confirmNewPassword') {
-          this.equalityValidation('newPassword', 'confirmNewPassword');
-        }
-      }
-    );
-  };
-
-  equalityValidation = (field, field2) => {
-    const cond = this.state.formData[field] === this.state.formData[field2];
-    if (!cond) {
-      this.addError({
-        [field2]: t('talk-plugin-auth.change_password.passwords_dont_match'),
-      });
-    } else {
-      this.removeError(field2);
-    }
-    return cond;
-  };
-
-  fieldValidation = (value, type, name) => {
-    if (!value.length) {
-      this.addError({
-        [name]: t('talk-plugin-auth.change_password.required_field'),
-      });
-    } else if (!validate[type](value)) {
-      this.addError({ [name]: errorMsj[type] });
-    } else {
-      this.removeError(name);
-    }
-  };
-
-  hasError = err => {
-    return Object.keys(this.state.errors).indexOf(err) !== -1;
-  };
-
-  addError = err => {
-    this.setState(({ errors }) => ({
-      errors: { ...errors, ...err },
-    }));
-  };
-
-  removeError = errKey => {
-    this.setState(state => {
-      const { [errKey]: _, ...errors } = state.errors;
-      return {
-        errors,
-      };
-    });
-  };
-
-  enableEditing = () => {
-    this.setState({
-      editing: true,
-    });
-  };
-
-  isSubmitBlocked = () => {
-    const formHasErrors = !!Object.keys(this.state.errors).length;
-    const formIncomplete = !isEqual(
-      Object.keys(this.state.formData),
-      this.validKeys
-    );
-    return formHasErrors || formIncomplete;
-  };
-
-  clearForm = () => {
-    this.setState(initialState);
-  };
-
-  onSave = async () => {
-    const { oldPassword, newPassword } = this.state.formData;
-
-    try {
-      await this.props.changePassword({
-        oldPassword,
-        newPassword,
-      });
-      this.props.notify(
-        'success',
-        t('talk-plugin-auth.change_password.changed_password_msg')
-      );
-    } catch (err) {
-      this.props.notify('error', getErrorMessages(err));
-    }
-
-    this.clearForm();
-    this.disableEditing();
-  };
-
-  disableEditing = () => {
-    this.setState({
-      editing: false,
-    });
-  };
-
-  cancel = () => {
-    this.clearForm();
-    this.disableEditing();
-  };
-
-  render() {
-    const { editing, errors } = this.state;
-
-    return (
-      <section
-        className={cn('talk-plugin-auth--change-password', styles.container, {
-          [styles.editing]: editing,
-        })}
-      >
-        <h3 className={styles.title}>
-          {t('talk-plugin-auth.change_password.change_password')}
-        </h3>
-        {editing && (
-          <form className="talk-plugin-auth--change-password-form">
-            <InputField
-              id="oldPassword"
-              label="Old Password"
-              name="oldPassword"
-              type="password"
-              onChange={this.onChange}
-              value={this.state.formData.oldPassword}
-              hasError={this.hasError('oldPassword')}
-              errorMsg={errors['oldPassword']}
-              showErrors
-            >
-              <span className={styles.detailBottomBox}>
-                <a className={styles.detailLink}>
-                  {t('talk-plugin-auth.change_password.forgot_password')}
-                </a>
-              </span>
-            </InputField>
-            <InputField
-              id="newPassword"
-              label="New Password"
-              name="newPassword"
-              type="password"
-              onChange={this.onChange}
-              value={this.state.formData.newPassword}
-              hasError={this.hasError('newPassword')}
-              errorMsg={errors['newPassword']}
-              showErrors
-            />
-            <InputField
-              id="confirmNewPassword"
-              label="Confirm New Password"
-              name="confirmNewPassword"
-              type="password"
-              onChange={this.onChange}
-              value={this.state.formData.confirmNewPassword}
-              hasError={this.hasError('confirmNewPassword')}
-              errorMsg={errors['confirmNewPassword']}
-              showErrors
-            />
-          </form>
-        )}
-        {editing ? (
-          <div className={styles.actions}>
-            <Button
-              className={cn(styles.button, styles.saveButton)}
-              icon="save"
-              onClick={this.onSave}
-              disabled={this.isSubmitBlocked()}
-            >
-              {t('talk-plugin-auth.change_password.save')}
-            </Button>
-            <a className={styles.cancelButton} onClick={this.cancel}>
-              {t('talk-plugin-auth.change_password.cancel')}
-            </a>
-          </div>
-        ) : (
-          <div className={styles.actions}>
-            <Button className={styles.button} onClick={this.enableEditing}>
-              {t('talk-plugin-auth.change_password.edit')}
-            </Button>
-          </div>
-        )}
-      </section>
-    );
-  }
-}
-
-ChangePassword.propTypes = {
-  changePassword: PropTypes.func.isRequired,
-  notify: PropTypes.func.isRequired,
-};
-
-export default ChangePassword;
diff --git a/plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsername.css b/plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsername.css
deleted file mode 100644
index 5b4631ecf..000000000
--- a/plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsername.css
+++ /dev/null
@@ -1,122 +0,0 @@
-.container {
-  margin-bottom: 20px;
-  display: flex;
-  position: relative;
-  color: #202020;
-  padding: 10px;
-  border-radius: 2px;
-  box-sizing: border-box;
-  justify-content: space-between;
-  
-  &.editing { 
-    background-color: #EDEDED;
-  }
-}
-
-.content {
-  flex-grow: 1;
-} 
-
-.actions {
-  flex-grow: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}                                                                       
-
-.email {
-  margin: 0;
-}
-
-.username {   
-  margin-bottom: 4px;
-}         
-
-.button {
-  border: 1px solid #787d80;
-  background-color: transparent;
-  height: 30px;
-  font-size: 0.9em;
-  line-height: normal;
-}
-
-.saveButton {
-  background-color: #3498DB;
-  border-color: #3498DB;
-  color: white;
-
-  > i {
-    font-size: 17px;
-  }
-    
-  &:hover {
-    background-color: #399ee2;
-    color: white;
-  }
-
-  &:disabled {
-    border-color: #e0e0e0;
-
-    &:hover {
-      background-color: #e0e0e0;
-      color: #4f5c67;
-      cursor: default;
-    }
-  }
-}
-
-.cancelButton {
-  color:#787D80;
-  margin-top: 6px;
-  font-size: 0.9em;
-
-  &:hover {
-    cursor: pointer;
-  }
-}
-
-.detailLabel {
-  border: solid 1px #787D80;
-  border-radius: 2px;
-  background-color: white;
-  height: 30px;
-  display: inline-block;
-  width: 230px;
-  display: flex;  
-
-  > .detailLabelIcon {
-    font-size: 1.2em;
-    padding: 0 5px;
-    color: #787D80;
-    line-height: 30px; 
-  }
-
-  &.disabled {
-    background-color: #E0E0E0;
-  }
-}
-
-.detailValue {
-  background: transparent;
-  border: none;
-  font-size: 1em;
-  color: #000;
-  height: 30px;
-  outline: none;
-  flex: 1;
-}
-
-.bottomText {
-  color: #474747;
-  font-size: 0.9em;
-}
-
-.detailList {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-} 
-
-.detailItem {
-  margin-bottom: 12px;
-}
diff --git a/plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsername.js b/plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsername.js
deleted file mode 100644
index 8188bdfbe..000000000
--- a/plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsername.js
+++ /dev/null
@@ -1,188 +0,0 @@
-import React from 'react';
-import cn from 'classnames';
-import PropTypes from 'prop-types';
-import styles from './ChangeUsername.css';
-import { Button } from 'plugin-api/beta/client/components/ui';
-import ChangeUsernameDialog from './ChangeUsernameDialog';
-import { t } from 'plugin-api/beta/client/services';
-import InputField from './InputField';
-import { getErrorMessages } from 'coral-framework/utils';
-import { canUsernameBeUpdated } from 'coral-framework/utils/user';
-
-const initialState = {
-  editing: false,
-  showDialog: false,
-  formData: {},
-};
-
-class ChangeUsername extends React.Component {
-  state = initialState;
-
-  clearForm = () => {
-    this.setState(initialState);
-  };
-
-  enableEditing = () => {
-    this.setState({
-      editing: true,
-    });
-  };
-
-  disableEditing = () => {
-    this.setState({
-      editing: false,
-    });
-  };
-
-  cancel = () => {
-    this.clearForm();
-    this.disableEditing();
-  };
-
-  showDialog = () => {
-    this.setState({
-      showDialog: true,
-    });
-  };
-
-  onSave = async () => {
-    this.showDialog();
-  };
-
-  saveChanges = async () => {
-    const { newUsername } = this.state.formData;
-    const { changeUsername } = this.props;
-
-    try {
-      await changeUsername(newUsername);
-      this.props.notify(
-        'success',
-        t('talk-plugin-auth.change_username.changed_username_success_msg')
-      );
-    } catch (err) {
-      this.props.notify('error', getErrorMessages(err));
-    }
-
-    this.clearForm();
-    this.disableEditing();
-  };
-
-  onChange = e => {
-    const { name, value } = e.target;
-
-    this.setState(state => ({
-      formData: {
-        ...state.formData,
-        [name]: value,
-      },
-    }));
-  };
-
-  closeDialog = () => {
-    this.setState({
-      showDialog: false,
-    });
-  };
-
-  render() {
-    const {
-      username,
-      emailAddress,
-      root: { me: { state: { status } } },
-      notify,
-    } = this.props;
-    const { editing, formData, showDialog } = this.state;
-
-    return (
-      <section
-        className={cn('talk-plugin-auth--edit-profile', styles.container, {
-          [styles.editing]: editing,
-        })}
-      >
-        <ChangeUsernameDialog
-          canUsernameBeUpdated={canUsernameBeUpdated(status)}
-          showDialog={showDialog}
-          onChange={this.onChange}
-          formData={formData}
-          username={username}
-          closeDialog={this.closeDialog}
-          saveChanges={this.saveChanges}
-          notify={notify}
-        />
-
-        {editing ? (
-          <div className={styles.content}>
-            <div className={styles.detailList}>
-              <InputField
-                icon="person"
-                id="newUsername"
-                name="newUsername"
-                onChange={this.onChange}
-                defaultValue={username}
-                columnDisplay
-                validationType="username"
-              >
-                <span className={styles.bottomText}>
-                  {t('talk-plugin-auth.change_username.change_username_note')}
-                </span>
-              </InputField>
-              <InputField
-                icon="email"
-                id="email"
-                name="email"
-                value={emailAddress}
-                validationType="username"
-                disabled
-              />
-            </div>
-          </div>
-        ) : (
-          <div className={styles.content}>
-            <h2 className={styles.username}>{username}</h2>
-            {emailAddress ? (
-              <p className={styles.email}>{emailAddress}</p>
-            ) : null}
-          </div>
-        )}
-        {editing ? (
-          <div className={styles.actions}>
-            <Button
-              className={cn(styles.button, styles.saveButton)}
-              icon="save"
-              onClick={this.onSave}
-              disabled={
-                !this.state.formData.newUsername ||
-                this.state.formData.newUsername === username
-              }
-            >
-              {t('talk-plugin-auth.change_username.save')}
-            </Button>
-            <a className={styles.cancelButton} onClick={this.cancel}>
-              {t('talk-plugin-auth.change_username.cancel')}
-            </a>
-          </div>
-        ) : (
-          <div className={styles.actions}>
-            <Button
-              className={styles.button}
-              icon="settings"
-              onClick={this.enableEditing}
-            >
-              {t('talk-plugin-auth.change_username.edit_profile')}
-            </Button>
-          </div>
-        )}
-      </section>
-    );
-  }
-}
-
-ChangeUsername.propTypes = {
-  root: PropTypes.object.isRequired,
-  changeUsername: PropTypes.func.isRequired,
-  notify: PropTypes.func.isRequired,
-  username: PropTypes.string,
-  emailAddress: PropTypes.string,
-};
-
-export default ChangeUsername;
diff --git a/plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsernameDialog.css b/plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsernameDialog.css
deleted file mode 100644
index af681d596..000000000
--- a/plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsernameDialog.css
+++ /dev/null
@@ -1,84 +0,0 @@
-.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;
-}
-
-.item {
-  display: block;
-  color: #4C4C4D;
-  font-size: 1em;
-  margin-bottom: 2px;
-}
-
-.bottomNote {
-  font-size: 0.9em;
-  line-height: 20px;
-  padding-top: 10px;
-  display: block;
-}
-
-.bottomActions {
-  text-align: right;
-}
-
-.usernamesChange {
-  margin: 18px 0;
-}
-
-.cancel {
-  border: 1px solid #787d80;
-  background-color: transparent;
-  height: 30px;
-  font-size: 0.9em;
-  line-height: normal;
-
-  &:hover {
-    background-color: #eaeaea;
-  }
-}
-
-.confirmChanges {
-  background-color: #3498DB;
-  border-color: #3498DB;
-  color: white;
-  height: 30px;
-  font-size: 0.9em;
-  
-  &:hover {
-    background-color: #3ba3ec;
-    color: white;
-  }
-}
\ No newline at end of file
diff --git a/plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsernameDialog.js b/plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsernameDialog.js
deleted file mode 100644
index 321b36926..000000000
--- a/plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsernameDialog.js
+++ /dev/null
@@ -1,117 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cn from 'classnames';
-import styles from './ChangeUsernameDialog.css';
-import InputField from './InputField';
-import { Button, Dialog } from 'plugin-api/beta/client/components/ui';
-import { t } from 'plugin-api/beta/client/services';
-
-class ChangeUsernameDialog extends React.Component {
-  state = {
-    showError: false,
-  };
-
-  showError = () => {
-    this.setState({
-      showError: true,
-    });
-  };
-
-  confirmChanges = async () => {
-    if (this.formHasError()) {
-      this.showError();
-      return;
-    }
-
-    if (!this.props.canUsernameBeUpdated) {
-      this.props.notify(
-        'error',
-        t('talk-plugin-auth.change_username.change_username_attempt')
-      );
-      return;
-    }
-
-    await this.props.saveChanges();
-    this.props.closeDialog();
-  };
-
-  formHasError = () =>
-    this.props.formData.confirmNewUsername !== this.props.formData.newUsername;
-
-  render() {
-    return (
-      <Dialog
-        open={this.props.showDialog}
-        className={cn(styles.dialog, 'talk-plugin-auth--edit-profile-dialog')}
-      >
-        <span className={styles.close} onClick={this.props.closeDialog}>
-          ×
-        </span>
-        <h1 className={styles.title}>
-          {t('talk-plugin-auth.change_username.confirm_username_change')}
-        </h1>
-        <div className={styles.content}>
-          <p className={styles.description}>
-            {t('talk-plugin-auth.change_username.description')}
-          </p>
-          <div className={styles.usernamesChange}>
-            <span className={styles.item}>
-              {t('talk-plugin-auth.change_username.old_username')}:{' '}
-              {this.props.username}
-            </span>
-            <span className={styles.item}>
-              {t('talk-plugin-auth.change_username.new_username')}:{' '}
-              {this.props.formData.newUsername}
-            </span>
-          </div>
-          <form>
-            <InputField
-              id="confirmNewUsername"
-              label="Re-enter new username"
-              name="confirmNewUsername"
-              type="text"
-              onChange={this.props.onChange}
-              defaultValue=""
-              hasError={this.formHasError() && this.state.showError}
-              errorMsg={t(
-                'talk-plugin-auth.change_username.username_does_not_match'
-              )}
-              showError={this.state.showError}
-              columnDisplay
-              showSuccess={false}
-              validationType="username"
-            >
-              <span className={styles.bottomNote}>
-                {t('talk-plugin-auth.change_username.bottom_note')}
-              </span>
-            </InputField>
-          </form>
-          <div className={styles.bottomActions}>
-            <Button className={styles.cancel}>
-              {t('talk-plugin-auth.change_username.cancel')}
-            </Button>
-            <Button
-              className={styles.confirmChanges}
-              onClick={this.confirmChanges}
-            >
-              {t('talk-plugin-auth.change_username.confirm_changes')}
-            </Button>
-          </div>
-        </div>
-      </Dialog>
-    );
-  }
-}
-
-ChangeUsernameDialog.propTypes = {
-  saveChanges: PropTypes.func,
-  closeDialog: PropTypes.func,
-  showDialog: PropTypes.bool,
-  onChange: PropTypes.func,
-  username: PropTypes.string,
-  formData: PropTypes.object,
-  canUsernameBeUpdated: PropTypes.bool.isRequired,
-  notify: PropTypes.func.isRequired,
-};
-
-export default ChangeUsernameDialog;
diff --git a/plugins/talk-plugin-auth/client/profile-settings/components/ErrorMessage.css b/plugins/talk-plugin-auth/client/profile-settings/components/ErrorMessage.css
deleted file mode 100644
index abcf692fe..000000000
--- a/plugins/talk-plugin-auth/client/profile-settings/components/ErrorMessage.css
+++ /dev/null
@@ -1,8 +0,0 @@
-.errorMsg {
-  color: #FA4643;
-  font-size: 0.9em;
-}
-
-.warningIcon {
-  color: #FA4643;
-}
\ No newline at end of file
diff --git a/plugins/talk-plugin-auth/client/profile-settings/components/ErrorMessage.js b/plugins/talk-plugin-auth/client/profile-settings/components/ErrorMessage.js
deleted file mode 100644
index f39a8fc08..000000000
--- a/plugins/talk-plugin-auth/client/profile-settings/components/ErrorMessage.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styles from './ErrorMessage.css';
-import { Icon } from 'plugin-api/beta/client/components/ui';
-
-const ErrorMessage = ({ children }) => (
-  <div className={styles.errorMsg}>
-    <Icon className={styles.warningIcon} name="warning" />
-    <span>{children}</span>
-  </div>
-);
-
-ErrorMessage.propTypes = {
-  children: PropTypes.node,
-};
-
-export default ErrorMessage;
diff --git a/plugins/talk-plugin-auth/client/profile-settings/components/InputField.css b/plugins/talk-plugin-auth/client/profile-settings/components/InputField.css
deleted file mode 100644
index cd6015e47..000000000
--- a/plugins/talk-plugin-auth/client/profile-settings/components/InputField.css
+++ /dev/null
@@ -1,80 +0,0 @@
-  
-.detailItem {
-  margin-bottom: 12px;
-}
-
-.detailItemContainer {
-  display: flex;
-}
-
-.columnDisplay {
-  flex-direction: column;
-
-  .detailItemMessage {
-    padding: 4px 0 0;
-  }
-}
-
-.detailItemContent {
-  border: solid 1px #787D80;
-  border-radius: 2px;
-  background-color: white;
-  height: 30px;
-  display: inline-block;
-  width: 230px;
-  display: flex;  
-  box-sizing: border-box;
-
-  > .detailIcon {
-    font-size: 1.2em;
-    padding: 0 5px;
-    color: #787D80;
-    line-height: 30px; 
-  }
-
-  &.error {
-    border: solid 2px #FA4643;
-  }
-
-  &.disabled {
-    background-color: #E0E0E0;
-  }
-}
-
-.detailLabel {
-  color: #4C4C4D;
-  font-size: 1em;
-  display: block;
-  margin-bottom: 4px;
-}
-
-.detailValue {
-  background: transparent;
-  border: none;
-  font-size: 1em;
-  color: #000;
-  outline: none;
-  flex: 1;
-  height: 100%;
-  box-sizing: border-box;
-}
-
-.detailItemMessage {
-  flex-grow: 1;
-  display: flex;
-  align-items: center;
-  padding-left: 6px;
-  padding-top: 16px;
-
-  .warningIcon, .checkIcon {
-    font-size: 17px;
-  }
-}
-
-.checkIcon {
-  color: #00CD73;
-}
-
-.warningIcon {
-  color: #FA4643;
-}
\ No newline at end of file
diff --git a/plugins/talk-plugin-auth/client/profile-settings/components/InputField.js b/plugins/talk-plugin-auth/client/profile-settings/components/InputField.js
deleted file mode 100644
index 34c314c20..000000000
--- a/plugins/talk-plugin-auth/client/profile-settings/components/InputField.js
+++ /dev/null
@@ -1,94 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cn from 'classnames';
-import styles from './InputField.css';
-import ErrorMessage from './ErrorMessage';
-import { Icon } from 'plugin-api/beta/client/components/ui';
-
-const InputField = ({
-  id = '',
-  label = '',
-  type = 'text',
-  name = '',
-  onChange = () => {},
-  showError = true,
-  hasError = false,
-  errorMsg = '',
-  children,
-  columnDisplay = false,
-  showSuccess = false,
-  validationType = '',
-  icon = '',
-  value = '',
-  defaultValue = '',
-  disabled = false,
-}) => {
-  const inputValue = {
-    ...(value ? { value } : {}),
-    ...(defaultValue ? { defaultValue } : {}),
-  };
-
-  return (
-    <div className={styles.detailItem}>
-      <div
-        className={cn(styles.detailItemContainer, {
-          [styles.columnDisplay]: columnDisplay,
-        })}
-      >
-        {label && (
-          <label className={styles.detailLabel} id={id}>
-            {label}
-          </label>
-        )}
-        <div
-          className={cn(
-            styles.detailItemContent,
-            { [styles.error]: hasError },
-            { [styles.disabled]: disabled }
-          )}
-        >
-          {icon && <Icon name={icon} className={styles.detailIcon} />}
-          <input
-            id={id}
-            type={type}
-            name={name}
-            className={styles.detailValue}
-            onChange={onChange}
-            autoComplete="off"
-            data-validation-type={validationType}
-            disabled={disabled}
-            {...inputValue}
-          />
-        </div>
-        <div className={styles.detailItemMessage}>
-          {!hasError &&
-            showSuccess &&
-            value && <Icon className={styles.checkIcon} name="check_circle" />}
-          {hasError && showError && <ErrorMessage>{errorMsg}</ErrorMessage>}
-        </div>
-      </div>
-      {children}
-    </div>
-  );
-};
-
-InputField.propTypes = {
-  id: PropTypes.string,
-  disabled: PropTypes.bool,
-  label: PropTypes.string,
-  type: PropTypes.string,
-  name: PropTypes.string.isRequired,
-  onChange: PropTypes.func,
-  value: PropTypes.string,
-  defaultValue: PropTypes.string,
-  icon: PropTypes.string,
-  showError: PropTypes.bool,
-  hasError: PropTypes.bool,
-  errorMsg: PropTypes.string,
-  children: PropTypes.node,
-  columnDisplay: PropTypes.bool,
-  showSuccess: PropTypes.bool,
-  validationType: PropTypes.string,
-};
-
-export default InputField;
diff --git a/plugins/talk-plugin-auth/client/profile-settings/containers/ChangePassword.js b/plugins/talk-plugin-auth/client/profile-settings/containers/ChangePassword.js
deleted file mode 100644
index 1322a2940..000000000
--- a/plugins/talk-plugin-auth/client/profile-settings/containers/ChangePassword.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import { compose } from 'react-apollo';
-import { bindActionCreators } from 'redux';
-import { connect } from 'plugin-api/beta/client/hocs';
-import ChangePassword from '../components/ChangePassword';
-import { notify } from 'coral-framework/actions/notification';
-import { withChangePassword } from 'plugin-api/beta/client/hocs';
-
-const mapDispatchToProps = dispatch => bindActionCreators({ notify }, dispatch);
-
-export default compose(connect(null, mapDispatchToProps), withChangePassword)(
-  ChangePassword
-);
diff --git a/plugins/talk-plugin-auth/client/profile-settings/containers/ChangeUsername.js b/plugins/talk-plugin-auth/client/profile-settings/containers/ChangeUsername.js
deleted file mode 100644
index 87e1e18b5..000000000
--- a/plugins/talk-plugin-auth/client/profile-settings/containers/ChangeUsername.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import { compose } from 'react-apollo';
-import { bindActionCreators } from 'redux';
-import { connect } from 'plugin-api/beta/client/hocs';
-import ChangeUsername from '../components/ChangeUsername';
-import { notify } from 'coral-framework/actions/notification';
-import { withChangeUsername } from 'plugin-api/beta/client/hocs';
-
-const mapDispatchToProps = dispatch => bindActionCreators({ notify }, dispatch);
-
-export default compose(connect(null, mapDispatchToProps), withChangeUsername)(
-  ChangeUsername
-);
diff --git a/plugins/talk-plugin-auth/client/stream/components/AccountDeletionRequestedSign.css b/plugins/talk-plugin-profile-data/client/components/AccountDeletionRequestedSign.css
similarity index 100%
rename from plugins/talk-plugin-auth/client/stream/components/AccountDeletionRequestedSign.css
rename to plugins/talk-plugin-profile-data/client/components/AccountDeletionRequestedSign.css
diff --git a/plugins/talk-plugin-auth/client/stream/components/AccountDeletionRequestedSign.js b/plugins/talk-plugin-profile-data/client/components/AccountDeletionRequestedSign.js
similarity index 100%
rename from plugins/talk-plugin-auth/client/stream/components/AccountDeletionRequestedSign.js
rename to plugins/talk-plugin-profile-data/client/components/AccountDeletionRequestedSign.js
diff --git a/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccount.css b/plugins/talk-plugin-profile-data/client/components/DeleteMyAccount.css
similarity index 100%
rename from plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccount.css
rename to plugins/talk-plugin-profile-data/client/components/DeleteMyAccount.css
diff --git a/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccount.js b/plugins/talk-plugin-profile-data/client/components/DeleteMyAccount.js
similarity index 100%
rename from plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccount.js
rename to plugins/talk-plugin-profile-data/client/components/DeleteMyAccount.js
diff --git a/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountDialog.css b/plugins/talk-plugin-profile-data/client/components/DeleteMyAccountDialog.css
similarity index 100%
rename from plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountDialog.css
rename to plugins/talk-plugin-profile-data/client/components/DeleteMyAccountDialog.css
diff --git a/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountDialog.js b/plugins/talk-plugin-profile-data/client/components/DeleteMyAccountDialog.js
similarity index 100%
rename from plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountDialog.js
rename to plugins/talk-plugin-profile-data/client/components/DeleteMyAccountDialog.js
diff --git a/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountFinalStep.js b/plugins/talk-plugin-profile-data/client/components/DeleteMyAccountFinalStep.js
similarity index 100%
rename from plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountFinalStep.js
rename to plugins/talk-plugin-profile-data/client/components/DeleteMyAccountFinalStep.js
diff --git a/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountStep.css b/plugins/talk-plugin-profile-data/client/components/DeleteMyAccountStep.css
similarity index 100%
rename from plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountStep.css
rename to plugins/talk-plugin-profile-data/client/components/DeleteMyAccountStep.css
diff --git a/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountStep0.js b/plugins/talk-plugin-profile-data/client/components/DeleteMyAccountStep0.js
similarity index 100%
rename from plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountStep0.js
rename to plugins/talk-plugin-profile-data/client/components/DeleteMyAccountStep0.js
diff --git a/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountStep1.js b/plugins/talk-plugin-profile-data/client/components/DeleteMyAccountStep1.js
similarity index 100%
rename from plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountStep1.js
rename to plugins/talk-plugin-profile-data/client/components/DeleteMyAccountStep1.js
diff --git a/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountStep2.js b/plugins/talk-plugin-profile-data/client/components/DeleteMyAccountStep2.js
similarity index 100%
rename from plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountStep2.js
rename to plugins/talk-plugin-profile-data/client/components/DeleteMyAccountStep2.js
diff --git a/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountStep3.js b/plugins/talk-plugin-profile-data/client/components/DeleteMyAccountStep3.js
similarity index 100%
rename from plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountStep3.js
rename to plugins/talk-plugin-profile-data/client/components/DeleteMyAccountStep3.js
diff --git a/plugins/talk-plugin-auth/client/components/ErrorMessage.css b/plugins/talk-plugin-profile-data/client/components/ErrorMessage.css
similarity index 100%
rename from plugins/talk-plugin-auth/client/components/ErrorMessage.css
rename to plugins/talk-plugin-profile-data/client/components/ErrorMessage.css
diff --git a/plugins/talk-plugin-auth/client/components/ErrorMessage.js b/plugins/talk-plugin-profile-data/client/components/ErrorMessage.js
similarity index 100%
rename from plugins/talk-plugin-auth/client/components/ErrorMessage.js
rename to plugins/talk-plugin-profile-data/client/components/ErrorMessage.js
diff --git a/plugins/talk-plugin-auth/client/components/InputField.css b/plugins/talk-plugin-profile-data/client/components/InputField.css
similarity index 100%
rename from plugins/talk-plugin-auth/client/components/InputField.css
rename to plugins/talk-plugin-profile-data/client/components/InputField.css
diff --git a/plugins/talk-plugin-auth/client/components/InputField.js b/plugins/talk-plugin-profile-data/client/components/InputField.js
similarity index 100%
rename from plugins/talk-plugin-auth/client/components/InputField.js
rename to plugins/talk-plugin-profile-data/client/components/InputField.js
diff --git a/plugins/talk-plugin-auth/client/profile-settings/components/StepProgress.css b/plugins/talk-plugin-profile-data/client/components/StepProgress.css
similarity index 100%
rename from plugins/talk-plugin-auth/client/profile-settings/components/StepProgress.css
rename to plugins/talk-plugin-profile-data/client/components/StepProgress.css
diff --git a/plugins/talk-plugin-auth/client/profile-settings/components/StepProgress.js b/plugins/talk-plugin-profile-data/client/components/StepProgress.js
similarity index 100%
rename from plugins/talk-plugin-auth/client/profile-settings/components/StepProgress.js
rename to plugins/talk-plugin-profile-data/client/components/StepProgress.js
diff --git a/plugins/talk-plugin-auth/client/stream/containers/AccountDeletionRequestedSign.js b/plugins/talk-plugin-profile-data/client/containers/AccountDeletionRequestedSign.js
similarity index 100%
rename from plugins/talk-plugin-auth/client/stream/containers/AccountDeletionRequestedSign.js
rename to plugins/talk-plugin-profile-data/client/containers/AccountDeletionRequestedSign.js
diff --git a/plugins/talk-plugin-auth/client/profile-settings/containers/DeleteMyAccount.js b/plugins/talk-plugin-profile-data/client/containers/DeleteMyAccount.js
similarity index 100%
rename from plugins/talk-plugin-auth/client/profile-settings/containers/DeleteMyAccount.js
rename to plugins/talk-plugin-profile-data/client/containers/DeleteMyAccount.js
diff --git a/plugins/talk-plugin-profile-data/client/index.js b/plugins/talk-plugin-profile-data/client/index.js
index fee9f2129..91664ac23 100644
--- a/plugins/talk-plugin-profile-data/client/index.js
+++ b/plugins/talk-plugin-profile-data/client/index.js
@@ -1,10 +1,13 @@
 import DownloadCommentHistory from './containers/DownloadCommentHistory';
+import DeleteMyAccount from './containers/DeleteMyAccount';
+import AccountDeletionRequestedSign from './AccountDeletionRequestedSign';
 import translations from './translations.yml';
 import graphql from './graphql';
 
 export default {
   slots: {
-    profileSettings: [DownloadCommentHistory],
+    stream: [AccountDeletionRequestedSign],
+    profileSettings: [DownloadCommentHistory, DeleteMyAccount],
   },
   translations,
   ...graphql,