refactor changeUsername - Product question,

client/coral-embed-stream/src/components/BannedAccount.js

@@ -0,0 +1,17 @@
+import React, {Component} from 'react';
+import t from 'coral-framework/services/i18n';
+import RestrictedMessageBox from 'coral-framework/components/RestrictedMessageBox';
+
+class BannedAccount extends Component {
+  render () {
+    return (
+      <RestrictedMessageBox>
+        <span>
+          <b>{t('framework.banned_account_header')}</b><br/> {t('framework.banned_account_body')}
+        </span>
+      </RestrictedMessageBox>
+    );
+  }
+}
+
+export default BannedAccount;

client/coral-embed-stream/src/components/ChangeUsername.js

@@ -37,7 +37,6 @@ class ChangeUsername extends Component {
     } else {
       this.setState({alert: t('framework.edit_name.error')});
     }
-
   }
 
   render () {
@@ -45,40 +44,34 @@ class ChangeUsername extends Component {
     const {username, alert} = this.state;
 
     return <RestrictedMessageBox>
-      <span>{
-        canEditName ?
-          t('framework.edit_name.msg')
-          :
+      {canEditName &&
+        <div>
           <span>
-            <b>{t('framework.banned_account_header')}</b><br/> {t('framework.banned_account_body')}
+            {t('framework.edit_name.msg')}
           </span>
-      }</span>
-      {
-        canEditName ?
-          <div>
-            <div className={styles.alert}>
-              {alert}
-            </div>
-            <label
-              htmlFor='username'
-              className="screen-reader-text"
-              aria-hidden={true}>
-              {t('framework.edit_name.label')}
-            </label>
-            <input
-              type='text'
-              className={cn(styles.editNameInput, 'talk-change-username-username-input')}
-              value={username}
-              placeholder={t('framework.edit_name.label')}
-              id='username'
-              onChange={(e) => this.setState({username: e.target.value})}
-              rows={3}/><br/>
-            <Button
-              className="talk-change-username-submit-button"
-              onClick={this.onSubmitClick} >
-              {t('framework.edit_name.button')}
-            </Button>
-          </div> : null
+          <div className={styles.alert}>
+            {alert}
+          </div>
+          <label
+            htmlFor='username'
+            className="screen-reader-text"
+            aria-hidden={true}>
+            {t('framework.edit_name.label')}
+          </label>
+          <input
+            type='text'
+            className={cn(styles.editNameInput, 'talk-change-username-username-input')}
+            value={username}
+            placeholder={t('framework.edit_name.label')}
+            id='username'
+            onChange={(e) => this.setState({username: e.target.value})}
+            rows={3}/><br/>
+          <Button
+            className="talk-change-username-submit-button"
+            onClick={this.onSubmitClick} >
+            {t('framework.edit_name.button')}
+          </Button>
+        </div>
       }
     </RestrictedMessageBox>;
   }

client/coral-embed-stream/src/components/Stream.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {StreamError} from './StreamError';
 import Comment from '../containers/Comment';
+import BannedAccount from './BannedAccount';
 import ChangeUsername from '../containers/ChangeUsername';
 import Slot from 'coral-framework/components/Slot';
 import InfoBox from 'talk-plugin-infobox/InfoBox';
@@ -208,7 +209,6 @@ class Stream extends React.Component {
       updateItem,
       viewAllComments,
       auth: {loggedIn, user},
-      editName,
     } = this.props;
     const {keepCommentBox} = this.state;
     const open = !asset.isClosed;
@@ -263,11 +263,12 @@ class Stream extends React.Component {
                     timeago(suspensionUntil)
                   )}
                 </RestrictedMessageBox>}
-            {rejectedUsername &&
-                <ChangeUsername
-                  canEditName={can(user, 'EDIT_NAME')}
-                  user={user}
-                />}
+            {!banned && rejectedUsername &&
+            <ChangeUsername
+              canEditName={can(user, 'EDIT_NAME')}
+              user={user}
+            />}
+            {banned && <BannedAccount />}
             {showCommentBox &&
                 <CommentBox
                   notify={notify}

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

@@ -1,10 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
+import {compose} from 'react-apollo';
 import {bindActionCreators} from 'redux';
 import errorMsj from 'coral-framework/helpers/error';
 import validate from 'coral-framework/helpers/validate';
 import CreateUsernameDialog from './CreateUsernameDialog';
+import {withChangeUsername} from 'coral-framework/graphql/mutations';
 
 import t from 'coral-framework/services/i18n';
 
@@ -89,11 +91,11 @@ class ChangeUsernameContainer extends React.Component {
 
   handleSubmitUsername = (e) => {
     e.preventDefault();
-    const {errors} = this.state;
+    const {errors, formData: {username}} = this.state;
     const {validForm, invalidForm} = this.props;
     this.displayErrors();
     if (this.isCompleted() && !Object.keys(errors).length) {
-      this.props.createUsername(this.props.auth.user.id, this.state.formData);
+      this.props.changeUsername(this.props.auth.user.id, username);
       validForm();
     } else {
       invalidForm(t('createdisplay.check_the_form'));
@@ -125,7 +127,6 @@ class ChangeUsernameContainer extends React.Component {
 ChangeUsernameContainer.propTypes = {
   auth: PropTypes.object,
   hideCreateUsernameDialog: PropTypes.func,
-  createUsername: PropTypes.func,
   validForm: PropTypes.func,
   invalidForm: PropTypes.func,
   loggedIn: PropTypes.bool,
@@ -148,6 +149,7 @@ const mapDispatchToProps = (dispatch) =>
     dispatch
   );
 
-export default connect(mapStateToProps, mapDispatchToProps)(
-  ChangeUsernameContainer
-);
+export default compose(
+  withChangeUsername,
+  connect(mapStateToProps, mapDispatchToProps)
+)(ChangeUsernameContainer);

test/e2e/page_objects/embedStream.js

@@ -108,8 +108,8 @@ module.exports = {
         flagButton: '.talk-stream-comment.talk-stream-comment-level-0 .talk-plugin-flags-button',
         respectButton: '.talk-stream-comment.talk-stream-comment-level-0 .talk-stream-comment-footer .talk-plugin-respect-button',
         restrictedMessageBox: '.talk-restricted-message-box',
-        suspendedAccountInput: '.talk-suspended-account-username-input',
-        suspendedAccountSubmitButton: '.talk-suspended-account-submit-button',
+        changeUsernameInput: '.talk-change-username-username-input',
+        changeUsernameSubmitButton: '.talk-change-username-submit-button',
       },
       sections: {
         flag: {

test/e2e/specs/04_userStatus.js

@@ -1,118 +1,108 @@
 module.exports = {
-  
-     before: (client) => {
-      client.resizeWindow(1600, 1200);
-    },
-  
-    afterEach: (client, done) => {
-      if (client.currentTest.results.failed) {
-        throw new Error('Test Case failed, skipping all the rest');
-      }
-      done();
-    },
-  
-    after: (client) => {
-      client.end();
-    },
-  
-    'admin logs in': (client) => {
-      const adminPage = client.page.admin();
-      const {testData: {admin}} = client.globals;
-  
-      adminPage.navigateAndLogin(admin);
-    },
-    'admin flags user\'s username as offensive': (client) => {
-      const embedStream = client.page.embedStream();
-  
-      const comments = embedStream
-        .navigate()
-        .ready();
-  
-      comments
-        .waitForElementVisible('@firstComment')
-        .waitForElementVisible('@flagButton')
-        .click('@flagButton');
-  
-      comments.section.flag
-        .waitForElementVisible('@flagUsernameRadio')
-        .click('@flagUsernameRadio')
-        .waitForElementVisible('@continueButton')
-        .click('@continueButton')
-        .waitForElementVisible('@offensiveUsernameRadio')
-        .click('@offensiveUsernameRadio')
-        .click('@continueButton')
-        .waitForElementVisible('@popUpText')
-        .click('@continueButton');
-    },
-    'admin goes to Reported Usernames': (client) => {
-      const adminPage = client.page.admin();
-  
-      const community = adminPage
-        .navigate()
-        .ready()
-        .goToCommunity();
-  
-      community
-        .waitForElementVisible('@flaggedAccountsContainer')
-        .waitForElementVisible('@flaggedUser');
-    },
-    'admin rejects the user flag': (client) => {
-      const community = client.page.admin().section.community;
-  
-      community
-        .waitForElementVisible('@flaggedUserRejectButton')
-        .click('@flaggedUserRejectButton');
-    },
-    'admin suspends the user': (client) => {
-      const community = client.page.admin().section.community;
-  
-      community
-        .waitForElementVisible('@usernameDialog')
-        .waitForElementVisible('@usernameDialogButtons')
-        .waitForElementVisible('@usernameDialogSuspend')
-        .click('@usernameDialogSuspend')
-        .waitForElementVisible('@usernameDialogSuspensionMessage')
-        .click('@usernameDialogSuspend')
-        .waitForElementNotPresent('@flaggedUser');
-    },
-    'admin logs out': (client) => {
-      client.page.admin().logout();
-    },
-    'user logs in': (client) => {
-      const {testData: {user}} = client.globals;
-      const embedStream = client.page.embedStream();
-  
-      embedStream
-        .navigate()
-        .ready()
-        .openLoginPopup((popup) => popup.login(user));
-    },
-    'user account is suspended, should see restricted message box': (client) => {
-      const embedStream = client.page.embedStream();
-      const comments = embedStream.section.comments;
-  
-      comments
-        .waitForElementVisible('@restrictedMessageBox');
-    },
-    'user picks another username': (client) => {
-      const embedStream = client.page.embedStream();
-      const comments = embedStream.section.comments;
-      const {testData: {user}} = client.globals;
-  
-      comments
-        .waitForElementVisible('@suspendedAccountInput')
-        .setValue('@suspendedAccountInput', `${user.username}_alternative`)
-        .waitForElementVisible('@suspendedAccountSubmitButton')
-        .click('@suspendedAccountSubmitButton')
-        .waitForElementNotPresent('@suspendedAccountInput');
-    },
-    'user should not be able to comment': (client) => {
-      const embedStream = client.page.embedStream();
-      const comments = embedStream.section.comments;
-  
-      comments
-        .waitForElementNotPresent('@commentBoxTextarea')
-        .waitForElementNotPresent('@commentBoxPostButton');
-    },
-  };
-  
+  before: (client) => {
+    client.resizeWindow(1600, 1200);
+  },
+
+  afterEach: (client, done) => {
+    if (client.currentTest.results.failed) {
+      throw new Error('Test Case failed, skipping all the rest');
+    }
+    done();
+  },
+
+  after: (client) => {
+    client.end();
+  },
+
+  'admin logs in': (client) => {
+    const adminPage = client.page.admin();
+    const {testData: {admin}} = client.globals;
+
+    adminPage.navigateAndLogin(admin);
+  },
+  'admin flags user\'s username as offensive': (client) => {
+    const embedStream = client.page.embedStream();
+
+    const comments = embedStream
+      .navigate()
+      .ready();
+
+    comments
+      .waitForElementVisible('@firstComment')
+      .waitForElementVisible('@flagButton')
+      .click('@flagButton');
+
+    comments.section.flag
+      .waitForElementVisible('@flagUsernameRadio')
+      .click('@flagUsernameRadio')
+      .waitForElementVisible('@continueButton')
+      .click('@continueButton')
+      .waitForElementVisible('@offensiveUsernameRadio')
+      .click('@offensiveUsernameRadio')
+      .click('@continueButton')
+      .waitForElementVisible('@popUpText')
+      .click('@continueButton');
+  },
+  'admin goes to Reported Usernames': (client) => {
+    const adminPage = client.page.admin();
+
+    const community = adminPage
+      .navigate()
+      .ready()
+      .goToCommunity();
+
+    community
+      .waitForElementVisible('@flaggedAccountsContainer')
+      .waitForElementVisible('@flaggedUser');
+  },
+  'admin rejects the user flag': (client) => {
+    const community = client.page.admin().section.community;
+
+    community
+      .waitForElementVisible('@flaggedUserRejectButton')
+      .click('@flaggedUserRejectButton');
+  },
+  'admin suspends the user': (client) => {
+    const community = client.page.admin().section.community;
+
+    community
+      .waitForElementVisible('@usernameDialog')
+      .waitForElementVisible('@usernameDialogButtons')
+      .waitForElementVisible('@usernameDialogSuspend')
+      .click('@usernameDialogSuspend')
+      .waitForElementVisible('@usernameDialogSuspensionMessage')
+      .click('@usernameDialogSuspend')
+      .waitForElementNotPresent('@flaggedUser');
+  },
+  'admin logs out': (client) => {
+    client.page.admin().logout();
+  },
+  'user logs in': (client) => {
+    const {testData: {user}} = client.globals;
+    const embedStream = client.page.embedStream();
+
+    embedStream
+      .navigate()
+      .ready()
+      .openLoginPopup((popup) => popup.login(user));
+  },
+  'user account is suspended, should see restricted message box': (client) => {
+    const embedStream = client.page.embedStream();
+    const comments = embedStream.section.comments;
+
+    comments
+      .waitForElementVisible('@restrictedMessageBox');
+  },
+  'user picks another username': (client) => {
+    const embedStream = client.page.embedStream();
+    const comments = embedStream.section.comments;
+    const {testData: {user}} = client.globals;
+
+    comments
+      .waitForElementVisible('@changeUsernameInput')
+      .setValue('@changeUsernameInput', `${user.username}_alternative`)
+      .waitForElementVisible('@changeUsernameSubmitButton')
+      .click('@changeUsernameSubmitButton')
+      .waitForElementNotPresent('@changeUsernameInput');
+  }
+};