Adding withChangeUsername to plugin hocs, wip and more

plugin-api/beta/client/hocs/index.js

@@ -26,5 +26,6 @@ export {
   withStopIgnoringUser,
   withSetCommentStatus,
   withChangePassword,
+  withChangeUsername,
 } from 'coral-framework/graphql/mutations';
 export { compose } from 'recompose';

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

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

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

@@ -0,0 +1,20 @@
+.container {
+  margin-bottom: 20px;
+}
+
+.email {
+  margin: 0;
+}
+
+.username {
+  margin-bottom: 4px;
+}
+
+.actions {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}

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

@@ -0,0 +1,51 @@
+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';
+
+const initialState = {
+  editing: false,
+};
+
+class ChangeUsername extends React.Component {
+  state = initialState;
+
+  render() {
+    const { username, emailAddress } = this.props;
+    return (
+      <section className={styles.container}>
+        <div className={styles.content}>
+          <h2 className={styles.username}>{username}</h2>
+          {emailAddress ? <p className={styles.email}>{emailAddress}</p> : null}
+        </div>
+        <div className={styles.actions}>
+          <Button
+            className={cn(styles.button, styles.saveButton)}
+            icon="save"
+            onClick={this.onSave}
+            disabled={this.isSubmitBlocked()}
+          >
+            Save
+          </Button>
+          <a className={styles.cancelButton} onClick={this.cancel}>
+            Cancel
+          </a>
+        </div>
+        <div className={styles.actions}>
+          <Button className={styles.button} onClick={this.enableEditing}>
+            Edit
+          </Button>
+        </div>
+      </section>
+    );
+  }
+}
+
+ChangeUsername.propTypes = {
+  changeUsername: PropTypes.func.isRequired,
+  username: PropTypes.string,
+  emailAddress: PropTypes.string,
+};
+
+export default ChangeUsername;

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

@@ -0,0 +1,12 @@
+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
+);