merge master

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

@@ -10,7 +10,6 @@ import Stream from '../containers/Stream';
 import Count from 'coral-plugin-comment-count/CommentCount';
 import UserBox from 'coral-sign-in/components/UserBox';
 import ProfileContainer from 'coral-settings/containers/ProfileContainer';
-import RestrictedContent from 'coral-framework/components/RestrictedContent';
 import ConfigureStreamContainer from 'coral-configure/containers/ConfigureStreamContainer';
 
 export default class Embed extends React.Component {
@@ -69,10 +68,8 @@ export default class Embed extends React.Component {
             <ProfileContainer />
           </TabContent>
           <TabContent show={activeTab === 'config'}>
-            <RestrictedContent restricted={!loggedIn}>
-              { loggedIn ? userBox : null }
-              <ConfigureStreamContainer />
-            </RestrictedContent>
+            { loggedIn ? userBox : null }
+            <ConfigureStreamContainer />
           </TabContent>
         </div>
       </div>

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

@@ -9,11 +9,16 @@ import {ModerationLink} from 'coral-plugin-moderation';
 import CommentBox from 'coral-plugin-commentbox/CommentBox';
 import QuestionBox from 'coral-plugin-questionbox/QuestionBox';
 import IgnoredCommentTombstone from './IgnoredCommentTombstone';
-import SuspendedAccount from 'coral-framework/components/SuspendedAccount';
-import RestrictedContent from 'coral-framework/components/RestrictedContent';
+import SuspendedAccount from './SuspendedAccount';
+import RestrictedMessageBox
+  from 'coral-framework/components/RestrictedMessageBox';
 import {can} from 'coral-framework/services/perms';
 import ChangeUsernameContainer
   from 'coral-sign-in/containers/ChangeUsernameContainer';
+import I18n from 'coral-framework/modules/i18n/i18n';
+import translations from 'coral-framework/translations';
+
+const lang = new I18n(translations);
 
 class Stream extends React.Component {
   setActiveReplyBox = (reactKey) => {
@@ -50,6 +55,7 @@ class Stream extends React.Component {
       : comment;
 
     const banned = user && user.status === 'BANNED';
+    const temporarilySuspended = user && user.suspension.until && new Date(user.suspension.until) > new Date();
 
     const hasOlderComments = !!(asset &&
       asset.lastComment &&
@@ -74,32 +80,38 @@ class Stream extends React.Component {
                 content={asset.settings.questionBoxContent}
                 enable={asset.settings.questionBoxEnable}
               />
-              <RestrictedContent
-                restricted={banned}
-                restrictedComp={
-                  <SuspendedAccount
-                    canEditName={user && user.canEditName}
-                    editName={editName}
+              {!banned && temporarilySuspended &&
+                <RestrictedMessageBox>
+                  {
+                    lang.t('temporarilySuspended',
+                      this.props.root.settings.organizationName,
+                      lang.timeago(user.suspension.until),
+                    )
+                  }
+                </RestrictedMessageBox>
+              }
+              {banned &&
+                <SuspendedAccount
+                  canEditName={user && user.canEditName}
+                  editName={editName}
+                />
+              }
+              {loggedIn && !banned && !temporarilySuspended &&
+                <CommentBox
+                    addNotification={this.props.addNotification}
+                    postComment={this.props.postComment}
+                    appendItemArray={this.props.appendItemArray}
+                    updateItem={this.props.updateItem}
+                    setCommentCountCache={this.props.setCommentCountCache}
+                    commentCountCache={commentCountCache}
+                    assetId={asset.id}
+                    premod={asset.settings.moderation}
+                    isReply={false}
+                    authorId={user.id}
+                    charCountEnable={asset.settings.charCountEnable}
+                    maxCharCount={asset.settings.charCount}
                   />
-                }
-              >
-                {user
-                  ? <CommentBox
-                      addNotification={this.props.addNotification}
-                      postComment={this.props.postComment}
-                      appendItemArray={this.props.appendItemArray}
-                      updateItem={this.props.updateItem}
-                      setCommentCountCache={this.props.setCommentCountCache}
-                      commentCountCache={commentCountCache}
-                      assetId={asset.id}
-                      premod={asset.settings.moderation}
-                      isReply={false}
-                      authorId={user.id}
-                      charCountEnable={asset.settings.charCountEnable}
-                      maxCharCount={asset.settings.charCount}
-                    />
-                  : null}
-              </RestrictedContent>
+              }
             </div>
           : <p>{asset.settings.closedMessage}</p>}
         {!loggedIn &&

client/coral-embed-stream/src/components/SuspendAccount.css

@@ -0,0 +1,9 @@
+.editNameInput {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+.alert {
+  margin-top: 10px;
+  color: #B71C1C;
+}

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

@@ -0,0 +1,80 @@
+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 './SuspendAccount.css';
+import {Button} from 'coral-ui';
+import validate from 'coral-framework/helpers/validate';
+import RestrictedMessageBox from 'coral-framework/components/RestrictedMessageBox';
+
+class SuspendedAccount extends Component {
+
+  static propTypes = {
+    canEditName: PropTypes.bool,
+    editName: PropTypes.func.isRequired
+  }
+
+  state = {
+    username: '',
+    alert: ''
+  }
+
+  onSubmitClick = (e) => {
+    const {editName} = this.props;
+    const {username} = this.state;
+    e.preventDefault();
+    if (validate.username(username)) {
+      editName(username)
+        .then(() => location.reload())
+        .catch((error) => {
+          this.setState({alert: lang.t(`error.${error.translation_key}`)});
+        });
+    } else {
+      this.setState({alert: lang.t('editName.error')});
+    }
+
+  }
+
+  render () {
+    const {canEditName} = this.props;
+    const {username, alert} = this.state;
+
+    return <RestrictedMessageBox>
+      <span>{
+          canEditName ?
+          lang.t('editName.msg')
+          : lang.t('bannedAccountMsg')
+        }</span>
+      {
+        canEditName ?
+        <div>
+          <div className={styles.alert}>
+            {alert}
+          </div>
+          <label
+            htmlFor='username'
+            className="screen-reader-text"
+            aria-hidden={true}>
+            {lang.t('editName.label')}
+          </label>
+          <input
+            type='text'
+            className={styles.editNameInput}
+            value={username}
+            placeholder={lang.t('editName.label')}
+            id='username'
+            onChange={(e) => this.setState({username: e.target.value})}
+            rows={3}/><br/>
+          <Button
+            onClick={this.onSubmitClick}>
+            {
+              lang.t('editName.button')
+            }
+          </Button>
+        </div> : null
+      }
+    </RestrictedMessageBox>;
+  }
+}
+
+export default SuspendedAccount;