Moving gdpr to talk-plugin-local-auth

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

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

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

@@ -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;
-}

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

@@ -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;

plugins/talk-plugin-auth/client/profile-settings/containers/ChangeUsername.js

@@ -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
-);

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

@@ -1 +1,9 @@
-export default {};
+import ChangePassword from './containers/ChangePassword';
+import Profile from './containers/Profile';
+
+export default {
+  slots: {
+    profileHeader: [Profile],
+    profileSettings: [ChangePassword],
+  },
+};