performing mutation

client/coral-embed-stream/src/tabs/profile/components/Profile.js

@@ -16,7 +16,7 @@ DefaultProfileHeader.propTypes = {
   emailAddress: PropTypes.string,
 };
 
-const Profile = ({ username, emailAddress, root, slotPassthrough }) => {
+const Profile = ({ id, username, emailAddress, root, slotPassthrough }) => {
   return (
     <div className="talk-my-profile talk-profile-container">
       <Slot
@@ -25,6 +25,7 @@ const Profile = ({ username, emailAddress, root, slotPassthrough }) => {
         defaultComponent={DefaultProfileHeader}
         passthrough={{
           ...slotPassthrough,
+          id,
           username,
           emailAddress,
         }}
@@ -36,6 +37,7 @@ const Profile = ({ username, emailAddress, root, slotPassthrough }) => {
 };
 
 Profile.propTypes = {
+  id: PropTypes.string,
   username: PropTypes.string,
   emailAddress: PropTypes.string,
   root: PropTypes.object,

client/coral-embed-stream/src/tabs/profile/containers/Profile.js

@@ -30,6 +30,7 @@ class ProfileContainer extends Component {
 
     return (
       <Profile
+        id={me.id}
         username={me.username}
         emailAddress={emailAddress}
         root={root}

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

@@ -6,6 +6,7 @@ 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';
 
 const initialState = {
   editing: false,
@@ -48,7 +49,24 @@ class ChangeUsername extends React.Component {
   };
 
   saveChanges = async () => {
-    // savechanges
+    const { newUsername } = this.state.formData;
+    const { id } = this.props;
+
+    try {
+      await this.props.changeUsername({
+        id,
+        username: 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 => {
@@ -84,6 +102,7 @@ class ChangeUsername extends React.Component {
           formData={this.state.formData}
           username={username}
           closeDialog={this.closeDialog}
+          saveChanges={this.saveChanges}
         />
 
         {editing ? (
@@ -155,6 +174,7 @@ class ChangeUsername extends React.Component {
 
 ChangeUsername.propTypes = {
   changeUsername: PropTypes.func.isRequired,
+  notify: PropTypes.func.isRequired,
   username: PropTypes.string,
   emailAddress: PropTypes.string,
 };

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

@@ -21,7 +21,7 @@ class ChangeUsernameDialog extends React.Component {
     if (this.formHasError()) {
       this.showError();
     } else {
-      // await this.props.saveChanges
+      await this.props.saveChanges();
       this.props.closeDialog();
     }
   };
@@ -62,7 +62,7 @@ class ChangeUsernameDialog extends React.Component {
               name="confirmNewUsername"
               type="text"
               onChange={this.props.onChange}
-              value={this.props.formData.confirmNewUsername}
+              defaultValue=""
               hasError={this.formHasError() && this.state.showError}
               errorMsg={t(
                 'talk-plugin-auth.change_username.username_does_not_match'
@@ -95,6 +95,7 @@ class ChangeUsernameDialog extends React.Component {
 }
 
 ChangeUsernameDialog.propTypes = {
+  saveChanges: PropTypes.func,
   closeDialog: PropTypes.func,
   showDialog: PropTypes.bool,
   onChange: PropTypes.func,

plugins/talk-plugin-auth/client/translations.yml

@@ -264,6 +264,7 @@ es:
       bottom_note: "Nota: No podrás cambiar tu usuario por 14 días"
       confirm_changes: "Confirmar Cambios"
       username_does_not_match: "El usuario no coincide"
+      changed_username_success_msg: "Username Changed - Your username has been successfully changed. You will not be able to change your user name for 14 days."
 fr:
   talk-plugin-auth:
     login: