Prompting user to update name when banned.

client/coral-embed-stream/src/Embed.js

@@ -11,6 +11,7 @@ const {fetchAssetSuccess} = assetActions;
 
 import {queryStream} from 'coral-framework/graphql/queries';
 import {postComment, postAction, deleteAction} from 'coral-framework/graphql/mutations';
+import {editName} from 'coral-framework/actions/user';
 import {Notification, notificationActions, authActions, assetActions, pym} from 'coral-framework';
 
 import Stream from './Stream';
@@ -123,6 +124,7 @@ class Embed extends Component {
                      <RestrictedContent restricted={banned} restrictedComp={
                          <SuspendedAccount
                            canEditName={user && user.canEditName}
+                           editName={this.props.editName}
                            />
                        }>
                        {
@@ -200,6 +202,7 @@ const mapDispatchToProps = dispatch => ({
   loadAsset: (asset) => dispatch(fetchAssetSuccess(asset)),
   addNotification: (type, text) => dispatch(addNotification(type, text)),
   clearNotification: () => dispatch(clearNotification()),
+  editName: (displayName) => dispatch(editName(displayName)),
   showSignInDialog: (offset) => dispatch(showSignInDialog(offset)),
   logout: () => dispatch(logout()),
   dispatch: d => dispatch(d)

client/coral-framework/actions/user.js

@@ -1,4 +1,3 @@
-import * as actions from '../constants/user';
 import {addNotification} from '../actions/notification';
 import coralApi from '../helpers/response';
 
@@ -6,16 +5,9 @@ import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from './../translations';
 const lang = new I18n(translations);
 
-const saveBioRequest = () => ({type: actions.SAVE_BIO_REQUEST});
-const saveBioSuccess = settings => ({type: actions.SAVE_BIO_SUCCESS, settings});
-const saveBioFailure = error => ({type: actions.SAVE_BIO_FAILURE, error});
-
-export const saveBio = (user_id, formData) => dispatch => {
-  dispatch(saveBioRequest());
-  coralApi('/account/settings', {method: 'PUT', body: formData})
+export const editName = (displayName) => (dispatch) => {
+  return coralApi('/account/displayname', {method: 'PUT', body: {displayName}})
     .then(() => {
-      dispatch(addNotification('success', lang.t('successBioUpdate')));
-      dispatch(saveBioSuccess(formData));
-    })
-    .catch(error => dispatch(saveBioFailure(error)));
+      dispatch(addNotification('success', lang.t('successNameUpdate')));
+    });
 };

client/coral-framework/components/RestrictedContent.css

@@ -2,3 +2,13 @@
   background: #D8D8D8;
   padding: 25px;
 }
+
+.editNameInput {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+.alert {
+  margin-top: 10px;
+  color: #B71C1C;
+}

client/coral-framework/components/SuspendedAccount.js

@@ -1,15 +1,79 @@
-import React from 'react';
+import React, {Component, PropTypes} from 'react';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from 'coral-framework/translations.json';
 const lang = new I18n(translations);
 import styles from './RestrictedContent.css';
+import {Button} from 'coral-ui';
+import validate from '../helpers/validate';
 
-export default ({canEditName}) => (
-  <div className={styles.message}>
-    <span>{
+class SuspendedAccount extends Component {
+
+  static propTypes = {
+    canEditName: PropTypes.bool,
+    editName: PropTypes.func.isRequired
+  }
+
+  state = {
+    displayName: '',
+    alert: ''
+  }
+
+  onSubmitClick = (e) => {
+    const {editName} = this.props;
+    const {displayName} = this.state;
+    e.preventDefault();
+    if (validate.displayName(displayName)) {
+      editName(displayName)
+        .then(() => window.reload())
+        .catch((error) => {
+          this.setState({alert: lang.t(`error.${error.message}`)});
+        });
+    } else {
+      this.setState({alert: lang.t('editName.error')});
+    }
+
+  }
+
+  render () {
+    const {canEditName} = this.props;
+    const {displayName, alert} = this.state;
+
+    return <div className={styles.message}>
+      <span>{
+          canEditName ?
+          lang.t('editName.msg')
+          : lang.t('bannedAccountMsg')
+        }</span>
+      {
         canEditName ?
-        lang.t('editNameMsg')
-        : lang.t('bannedAccountMsg')
-      }</span>
-  </div>
-);
+        <div>
+          <div className={styles.alert}>
+            {alert}
+          </div>
+          <label
+            htmlFor='displayName'
+            className="screen-reader-text"
+            aria-hidden={true}>
+            {lang.t('editName.label')}
+          </label>
+          <input
+            type='text'
+            className={styles.editNameInput}
+            value={displayName}
+            placeholder={lang.t('editName.label')}
+            id='displayName'
+            onChange={(e) => this.setState({displayName: e.target.value})}
+            rows={3}/><br/>
+          <Button
+            onClick={this.onSubmitClick}>
+            {
+              lang.t('editName.button')
+            }
+          </Button>
+        </div> : null
+      }
+    </div>;
+  }
+}
+
+export default SuspendedAccount;

client/coral-framework/constants/user.js

@@ -1,6 +1,6 @@
-export const SAVE_BIO_REQUEST = 'SAVE_BIO_REQUEST';
-export const SAVE_BIO_SUCCESS = 'SAVE_BIO_SUCCESS';
-export const SAVE_BIO_FAILURE = 'SAVE_BIO_FAILURE';
+export const EDIT_NAME_REQUEST = 'EDIT_NAME_REQUEST';
+export const EDIT_NAME_SUCCESS = 'EDIT_NAME_SUCCESS';
+export const EDIT_NAME_FAILURE = 'EDIT_NAME_FAILURE';
 export const COMMENTS_BY_USER_REQUEST = 'COMMENTS_BY_USER_REQUEST';
 export const COMMENTS_BY_USER_SUCCESS = 'COMMENTS_BY_USER_SUCCESS';
 export const COMMENTS_BY_USER_FAILURE = 'COMMENTS_BY_USER_FAILURE';

client/coral-framework/translations.json

@@ -1,10 +1,15 @@
 {
   "en": {
     "successUpdateSettings": "The changes you have made have been applied to the comment stream on this article",
-    "successBioUpdate": "Your Bio has been updated",
+    "successNameUpdate": "Your display name has been updated",
     "contentNotAvailable": "This content is not available",
     "bannedAccountMsg": "Your account is currently suspended. This means that you cannot Like, Flag, or write comments. Please contact moderator@fakeurl.com for more information",
-    "editNameMsg": "Your account is currently suspended because your username has been deemed inappropriate. To restore your account, please enter a new username. You may contact moderator@fakeurl.com for more information.",
+    "editName": {
+      "msg": "Your account is currently suspended because your display name has been deemed inappropriate. To restore your account, please enter a new username. You may contact moderator@fakeurl.com for more information.",
+      "label": "New Display Name",
+      "button": "Submit",
+      "error": "Display names can contain letters, numbers and _ only"
+    },
     "error": {
       "email": "Not a valid E-Mail",
       "password": "Password must be at least 8 characters",