Adding CommentDeletedTombstone

client/coral-admin/src/components/CommentAnimatedEdit.js

@@ -29,7 +29,7 @@ const CommentAnimatedEdit = ({ children, body }) => {
 
 CommentAnimatedEdit.propTypes = {
   children: PropTypes.node,
-  body: PropTypes.string,
+  body: PropTypes.string.isRequired,
 };
 
 export default CommentAnimatedEdit;

client/coral-admin/src/components/CommentDeletedTombstone.css

@@ -0,0 +1,5 @@
+.tombstone {
+  background-color: #f0f0f0;
+  padding: 1em;
+  color: #1a212f;
+}

client/coral-admin/src/components/CommentDeletedTombstone.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import styles from './CommentDeletedTombstone.css';
+
+const CommentDeletedTombstone = () => (
+  <div className={styles.tombstone}>The comment was deleted.</div>
+);
+
+export default CommentDeletedTombstone;

client/coral-admin/src/components/UserDetailComment.js

@@ -12,6 +12,7 @@ import CommentAnimatedEdit from './CommentAnimatedEdit';
 import CommentLabels from '../containers/CommentLabels';
 import ApproveButton from './ApproveButton';
 import RejectButton from 'coral-admin/src/components/RejectButton';
+import CommentDeletedTombstone from './CommentDeletedTombstone';
 
 import t, { timeago } from 'coral-framework/services/i18n';
 
@@ -83,49 +84,53 @@ class UserDetailComment extends React.Component {
               </Link>
             }
           </div>
-          <CommentAnimatedEdit body={comment.body}>
-            <div className={styles.bodyContainer}>
-              <div className={styles.body}>
-                <Slot
-                  fill="userDetailCommentContent"
-                  className={cn(
-                    styles.commentContent,
-                    'talk-admin-user-detail-comment'
-                  )}
-                  size={1}
-                  defaultComponent={AdminCommentContent}
-                  passthrough={slotPassthrough}
-                />
-                <a
-                  className={styles.external}
-                  href={`${comment.asset.url}?commentId=${comment.id}`}
-                  target="_blank"
-                >
-                  <Icon name="open_in_new" /> {t('comment.view_context')}
-                </a>
-              </div>
-              <div className={styles.sideActions}>
-                <IfHasLink text={comment.body}>
-                  <span className={styles.hasLinks}>
-                    {/* TODO: translate string */}
-                    <Icon name="error_outline" /> Contains Link
-                  </span>
-                </IfHasLink>
-                <div className={styles.actions}>
-                  <ApproveButton
-                    active={comment.status === 'ACCEPTED'}
-                    onClick={this.approve}
-                    minimal
-                  />
-                  <RejectButton
-                    active={comment.status === 'REJECTED'}
-                    onClick={this.reject}
-                    minimal
+          {comment.body ? (
+            <CommentAnimatedEdit body={comment.body}>
+              <div className={styles.bodyContainer}>
+                <div className={styles.body}>
+                  <Slot
+                    fill="userDetailCommentContent"
+                    className={cn(
+                      styles.commentContent,
+                      'talk-admin-user-detail-comment'
+                    )}
+                    size={1}
+                    defaultComponent={AdminCommentContent}
+                    passthrough={slotPassthrough}
                   />
+                  <a
+                    className={styles.external}
+                    href={`${comment.asset.url}?commentId=${comment.id}`}
+                    target="_blank"
+                  >
+                    <Icon name="open_in_new" /> {t('comment.view_context')}
+                  </a>
+                </div>
+                <div className={styles.sideActions}>
+                  <IfHasLink text={comment.body}>
+                    <span className={styles.hasLinks}>
+                      {/* TODO: translate string */}
+                      <Icon name="error_outline" /> Contains Link
+                    </span>
+                  </IfHasLink>
+                  <div className={styles.actions}>
+                    <ApproveButton
+                      active={comment.status === 'ACCEPTED'}
+                      onClick={this.approve}
+                      minimal
+                    />
+                    <RejectButton
+                      active={comment.status === 'REJECTED'}
+                      onClick={this.reject}
+                      minimal
+                    />
+                  </div>
                 </div>
               </div>
-            </div>
-          </CommentAnimatedEdit>
+            </CommentAnimatedEdit>
+          ) : (
+            <CommentDeletedTombstone />
+          )}
         </div>
         <CommentDetails root={root} comment={comment} />
       </li>
@@ -152,7 +157,7 @@ UserDetailComment.propTypes = {
   comment: PropTypes.shape({
     id: PropTypes.string.isRequired,
     status: PropTypes.string.isRequired,
-    body: PropTypes.string.isRequired,
+    body: PropTypes.string,
     actions: PropTypes.array,
     created_at: PropTypes.string.isRequired,
     asset: PropTypes.shape({

client/coral-admin/src/routes/Moderation/components/Comment.js

@@ -13,6 +13,7 @@ import IfHasLink from 'coral-admin/src/components/IfHasLink';
 import cn from 'classnames';
 import ApproveButton from 'coral-admin/src/components/ApproveButton';
 import RejectButton from 'coral-admin/src/components/RejectButton';
+import CommentDeletedTombstone from '../../../components/CommentDeletedTombstone';
 
 import t, { timeago } from 'coral-framework/services/i18n';
 
@@ -133,48 +134,52 @@ class Comment extends React.Component {
               </Link>
             )}
           </div>
-          <CommentAnimatedEdit body={comment.body}>
-            <div className={styles.itemBody}>
-              <div className={styles.body}>
-                <Slot
-                  fill="adminCommentContent"
-                  className={cn(styles.commentContent, 'talk-admin-comment')}
-                  size={1}
-                  defaultComponent={AdminCommentContent}
-                  passthrough={{ ...slotPassthrough, ...formatterSettings }}
-                />
-                <div className={styles.commentContentFooter}>
-                  <a
-                    className={styles.external}
-                    href={`${comment.asset.url}?commentId=${comment.id}`}
-                    target="_blank"
-                  >
-                    <Icon name="open_in_new" /> {t('comment.view_context')}
-                  </a>
+          {comment.body ? (
+            <CommentAnimatedEdit body={comment.body}>
+              <div className={styles.itemBody}>
+                <div className={styles.body}>
+                  <Slot
+                    fill="adminCommentContent"
+                    className={cn(styles.commentContent, 'talk-admin-comment')}
+                    size={1}
+                    defaultComponent={AdminCommentContent}
+                    passthrough={{ ...slotPassthrough, ...formatterSettings }}
+                  />
+                  <div className={styles.commentContentFooter}>
+                    <a
+                      className={styles.external}
+                      href={`${comment.asset.url}?commentId=${comment.id}`}
+                      target="_blank"
+                    >
+                      <Icon name="open_in_new" /> {t('comment.view_context')}
+                    </a>
+                  </div>
                 </div>
-              </div>
 
-              <div className={styles.sideActions}>
-                <IfHasLink text={comment.body}>
-                  <span className={styles.hasLinks}>
-                    {/* TODO: translate string */}
-                    <Icon name="error_outline" /> Contains Link
-                  </span>
-                </IfHasLink>
-                <div className={`actions ${styles.actions}`}>
-                  <ApproveButton
-                    active={comment.status === 'ACCEPTED'}
-                    onClick={this.approve}
-                  />
-                  <RejectButton
-                    active={comment.status === 'REJECTED'}
-                    onClick={this.reject}
-                  />
+                <div className={styles.sideActions}>
+                  <IfHasLink text={comment.body}>
+                    <span className={styles.hasLinks}>
+                      {/* TODO: translate string */}
+                      <Icon name="error_outline" /> Contains Link
+                    </span>
+                  </IfHasLink>
+                  <div className={`actions ${styles.actions}`}>
+                    <ApproveButton
+                      active={comment.status === 'ACCEPTED'}
+                      onClick={this.approve}
+                    />
+                    <RejectButton
+                      active={comment.status === 'REJECTED'}
+                      onClick={this.reject}
+                    />
+                  </div>
+                  <Slot fill="adminSideActions" passthrough={slotPassthrough} />
                 </div>
-                <Slot fill="adminSideActions" passthrough={slotPassthrough} />
               </div>
-            </div>
-          </CommentAnimatedEdit>
+            </CommentAnimatedEdit>
+          ) : (
+            <CommentDeletedTombstone />
+          )}
         </div>
         <CommentDetails
           root={root}
@@ -200,7 +205,7 @@ Comment.propTypes = {
   comment: PropTypes.shape({
     id: PropTypes.string.isRequired,
     status: PropTypes.string.isRequired,
-    body: PropTypes.string.isRequired,
+    body: PropTypes.string,
     action_summaries: PropTypes.array,
     actions: PropTypes.array,
     created_at: PropTypes.string.isRequired,

plugins/talk-plugin-local-auth/client/components/ChangeUsernameDialog.css

@@ -0,0 +1,84 @@
+.dialog {
+  border: none;
+  box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2);
+  width: 320px;
+  top: 10px;
+  font-family: Helvetica, 'Helvetica Neue', Verdana, sans-serif;
+  font-size: 14px;
+  border-radius: 4px;
+  padding: 12px 20px;
+}
+
+.close {
+  font-size: 20px;
+  line-height: 14px;
+  top: 10px;
+  right: 10px;
+  position: absolute;
+  display: block;
+  font-weight: bold;
+  color: #363636;
+  cursor: pointer;
+
+  &:hover {
+    color: #6b6b6b;
+  }
+}
+
+.title {
+  font-size: 1.3em;
+  margin-bottom: 8px;
+}
+
+.description {
+  font-size: 1em;
+  line-height: 20px;
+  margin: 0;
+}
+
+.item {
+  display: block;
+  color: #4C4C4D;
+  font-size: 1em;
+  margin-bottom: 2px;
+}
+
+.bottomNote {
+  font-size: 0.9em;
+  line-height: 20px;
+  padding-top: 10px;
+  display: block;
+}
+
+.bottomActions {
+  text-align: right;
+}
+
+.usernamesChange {
+  margin: 18px 0;
+}
+
+.cancel {
+  border: 1px solid #787d80;
+  background-color: transparent;
+  height: 30px;
+  font-size: 0.9em;
+  line-height: normal;
+
+  &:hover {
+    background-color: #eaeaea;
+  }
+}
+
+.confirmChanges {
+  background-color: #3498DB;
+  border-color: #3498DB;
+  color: white;
+  height: 30px;
+  font-size: 0.9em;
+  
+  &:hover {
+    background-color: #3ba3ec;
+    color: white;
+  }
+}

plugins/talk-plugin-local-auth/client/components/ChangeUsernameDialog.js

@@ -0,0 +1,120 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'classnames';
+import styles from './ChangeUsernameDialog.css';
+import InputField from './InputField';
+import { Button, Dialog } from 'plugin-api/beta/client/components/ui';
+import { t } from 'plugin-api/beta/client/services';
+
+class ChangeUsernameDialog extends React.Component {
+  state = {
+    showError: false,
+  };
+
+  showError = () => {
+    this.setState({
+      showError: true,
+    });
+  };
+
+  confirmChanges = async () => {
+    if (this.formHasError()) {
+      this.showError();
+      return;
+    }
+
+    if (!this.props.canUsernameBeUpdated) {
+      this.props.notify(
+        'error',
+        t('talk-plugin-local-auth.change_username.change_username_attempt')
+      );
+      return;
+    }
+
+    await this.props.saveChanges();
+    this.props.closeDialog();
+  };
+
+  formHasError = () =>
+    this.props.formData.confirmNewUsername !== this.props.formData.newUsername;
+
+  render() {
+    return (
+      <Dialog
+        open={this.props.showDialog}
+        className={cn(
+          styles.dialog,
+          'talk-plugin-local-auth--edit-profile-dialog'
+        )}
+      >
+        <span className={styles.close} onClick={this.props.closeDialog}>
+          ×
+        </span>
+        <h1 className={styles.title}>
+          {t('talk-plugin-local-auth.change_username.confirm_username_change')}
+        </h1>
+        <div className={styles.content}>
+          <p className={styles.description}>
+            {t('talk-plugin-local-auth.change_username.description')}
+          </p>
+          <div className={styles.usernamesChange}>
+            <span className={styles.item}>
+              {t('talk-plugin-local-auth.change_username.old_username')}:{' '}
+              {this.props.username}
+            </span>
+            <span className={styles.item}>
+              {t('talk-plugin-local-auth.change_username.new_username')}:{' '}
+              {this.props.formData.newUsername}
+            </span>
+          </div>
+          <form>
+            <InputField
+              id="confirmNewUsername"
+              label="Re-enter new username"
+              name="confirmNewUsername"
+              type="text"
+              onChange={this.props.onChange}
+              defaultValue=""
+              hasError={this.formHasError() && this.state.showError}
+              errorMsg={t(
+                'talk-plugin-local-auth.change_username.username_does_not_match'
+              )}
+              showError={this.state.showError}
+              columnDisplay
+              showSuccess={false}
+              validationType="username"
+            >
+              <span className={styles.bottomNote}>
+                {t('talk-plugin-local-auth.change_username.bottom_note')}
+              </span>
+            </InputField>
+          </form>
+          <div className={styles.bottomActions}>
+            <Button className={styles.cancel}>
+              {t('talk-plugin-local-auth.change_username.cancel')}
+            </Button>
+            <Button
+              className={styles.confirmChanges}
+              onClick={this.confirmChanges}
+            >
+              {t('talk-plugin-local-auth.change_username.confirm_changes')}
+            </Button>
+          </div>
+        </div>
+      </Dialog>
+    );
+  }
+}
+
+ChangeUsernameDialog.propTypes = {
+  saveChanges: PropTypes.func,
+  closeDialog: PropTypes.func,
+  showDialog: PropTypes.bool,
+  onChange: PropTypes.func,
+  username: PropTypes.string,
+  formData: PropTypes.object,
+  canUsernameBeUpdated: PropTypes.bool.isRequired,
+  notify: PropTypes.func.isRequired,
+};
+
+export default ChangeUsernameDialog;