Merge master

plugins/talk-plugin-akismet/index.js

@@ -1,126 +1,5 @@
-const debug = require('debug')('talk:plugin:akismet');
-const { ErrSpam } = require('./errors');
-const akismet = require('akismet-api');
-const { get, merge } = require('lodash');
-const { KEY, SITE } = require('./config');
-const client = akismet.client({
-  key: KEY,
-  blog: SITE,
-});
+const typeDefs = require('./server/typeDefs');
+const hooks = require('./server/hooks');
+const resolvers = require('./server/resolvers');
 
-let enabled = true;
-
-// TODO: when using a developer key, this is possible, the plus plan does not
-// allow us to check the key.
-// let enabled = false;
-// client.verifyKey((err, valid) => {
-//   if (err) {
-//     throw err;
-//   }
-
-//   if (valid) {
-//     enabled = true;
-//   } else {
-//     throw new Error('Akismet key is invalid');
-//   }
-// });
-
-module.exports = {
-  typeDefs: `
-  input CreateCommentInput {
-
-    # If true, the mutation will fail when the
-    # body contains detected spam.
-    checkSpam: Boolean
-  }
-
-  type Comment {
-    spam: Boolean
-  }
-  `,
-  hooks: {
-    RootMutation: {
-      createComment: {
-        async pre(_, { input }, { loaders, parent: req }) {
-          // If the key validation failed, then we can't run with the client.
-          if (!enabled) {
-            debug('not enabled, passing');
-            return;
-          }
-
-          let spam = false;
-          try {
-            const user_ip = get(req, 'ip', false);
-            if (!user_ip) {
-              debug('no ip on request');
-              return;
-            }
-
-            // Get some headers from the request.
-            const user_agent = req.get('User-Agent');
-            if (!user_agent || user_agent.length === 0) {
-              debug('no user agent on request');
-              return;
-            }
-
-            const referrer = req.get('Referrer');
-            if (!referrer || referrer.length === 0) {
-              debug('no referrer on request');
-              return;
-            }
-
-            // Get the Asset that the comment is being made against.
-            const asset = await loaders.Assets.getByID.load(input.asset_id);
-            if (!asset) {
-              debug('asset not found for new comment');
-              return;
-            }
-
-            // Send off the comment to Akismet to check to see what they say.
-            spam = await client.checkSpam({
-              user_ip,
-              user_agent,
-              referrer,
-              permalink: asset.url,
-              comment_type: 'comment',
-              comment_content: input.body,
-              is_test: true,
-            });
-
-            debug(`comment analyzed as ${spam ? 'being' : 'not being'} spam`);
-          } catch (err) {
-            console.trace(err);
-            return;
-          }
-
-          // Attach scores to metadata.
-          input.metadata = merge({}, input.metadata || {}, {
-            akismet: spam,
-          });
-
-          if (spam) {
-            if (input.checkSpam) {
-              throw ErrSpam;
-            }
-
-            // Attach reason information for the flag being added.
-            input.status = 'SYSTEM_WITHHELD';
-            input.actions =
-              input.actions && input.actions.length >= 0 ? input.actions : [];
-            input.actions.push({
-              action_type: 'FLAG',
-              user_id: null,
-              group_id: 'SPAM_COMMENT',
-              metadata: {},
-            });
-          }
-        },
-      },
-    },
-  },
-  resolvers: {
-    Comment: {
-      spam: comment => get(comment, 'metadata.akismet', null),
-    },
-  },
-};
+module.exports = { typeDefs, hooks, resolvers };

plugins/talk-plugin-akismet/server/errors.js

@@ -1,12 +1,16 @@
-const { APIError } = require('errors');
+const { TalkError } = require('errors');
 
 // ErrSpam is sent during a `CreateComment` mutation where
 // `input.checkSpam` is set to true and the comment contains
 // detected spam as determined by the akismet service.
-const ErrSpam = new APIError('Comment is spam', {
-  status: 400,
-  translation_key: 'COMMENT_IS_SPAM',
-});
+class ErrSpam extends TalkError {
+  constructor() {
+    super('Comment is spam', {
+      status: 400,
+      translation_key: 'COMMENT_IS_SPAM',
+    });
+  }
+}
 
 module.exports = {
   ErrSpam,

plugins/talk-plugin-akismet/server/hooks.js

@@ -0,0 +1,107 @@
+const debug = require('debug')('talk:plugin:akismet');
+const { ErrSpam } = require('./errors');
+const akismet = require('akismet-api');
+const { get, merge } = require('lodash');
+const { KEY, SITE } = require('./config');
+const client = akismet.client({
+  key: KEY,
+  blog: SITE,
+});
+
+let enabled = true;
+
+// TODO: when using a developer key, this is possible, the plus plan does not
+// allow us to check the key.
+// let enabled = false;
+// client.verifyKey((err, valid) => {
+//   if (err) {
+//     throw err;
+//   }
+
+//   if (valid) {
+//     enabled = true;
+//   } else {
+//     throw new Error('Akismet key is invalid');
+//   }
+// });
+
+module.exports = {
+  RootMutation: {
+    createComment: {
+      async pre(_, { input }, { loaders, parent: req }) {
+        // If the key validation failed, then we can't run with the client.
+        if (!enabled) {
+          debug('not enabled, passing');
+          return;
+        }
+
+        let spam = false;
+        try {
+          const user_ip = get(req, 'ip', false);
+          if (!user_ip) {
+            debug('no ip on request');
+            return;
+          }
+
+          // Get some headers from the request.
+          const user_agent = req.get('User-Agent');
+          if (!user_agent || user_agent.length === 0) {
+            debug('no user agent on request');
+            return;
+          }
+
+          const referrer = req.get('Referrer');
+          if (!referrer || referrer.length === 0) {
+            debug('no referrer on request');
+            return;
+          }
+
+          // Get the Asset that the comment is being made against.
+          const asset = await loaders.Assets.getByID.load(input.asset_id);
+          if (!asset) {
+            debug('asset not found for new comment');
+            return;
+          }
+
+          // Send off the comment to Akismet to check to see what they say.
+          spam = await client.checkSpam({
+            user_ip,
+            user_agent,
+            referrer,
+            permalink: asset.url,
+            comment_type: 'comment',
+            comment_content: input.body,
+            is_test: true,
+          });
+
+          debug(`comment analyzed as ${spam ? 'being' : 'not being'} spam`);
+        } catch (err) {
+          console.trace(err);
+          return;
+        }
+
+        // Attach scores to metadata.
+        input.metadata = merge({}, input.metadata || {}, {
+          akismet: spam,
+        });
+
+        if (spam) {
+          if (input.checkSpam) {
+            throw new ErrSpam();
+          }
+
+          // Attach reason information for the flag being added.
+          input.status = 'SYSTEM_WITHHELD';
+          input.actions =
+            input.actions && input.actions.length >= 0 ? input.actions : [];
+          input.actions.push({
+            action_type: 'FLAG',
+            user_id: null,
+            group_id: 'SPAM_COMMENT',
+            metadata: {},
+          });
+        }
+      },
+    },
+  },
+};

plugins/talk-plugin-akismet/server/resolvers.js

@@ -0,0 +1,7 @@
+const { get } = require('lodash');
+
+module.exports = {
+  Comment: {
+    spam: comment => get(comment, 'metadata.akismet', null),
+  },
+};

plugins/talk-plugin-akismet/server/resolvers.spec.js

@@ -0,0 +1,14 @@
+const resolvers = require('./resolvers');
+
+describe('talk-plugin-akismet', () => {
+  describe('resolvers', () => {
+    it('resolves when there is a akismet value', () => {
+      const spam = resolvers.Comment.spam({ metadata: { akismet: true } });
+      expect(spam).toEqual(true);
+    });
+    it('resolves when there not is a akismet value', () => {
+      const spam = resolvers.Comment.spam({});
+      expect(spam).toEqual(null);
+    });
+  });
+});

plugins/talk-plugin-akismet/server/typeDefs.graphql

@@ -0,0 +1,10 @@
+input CreateCommentInput {
+
+  # If true, the mutation will fail when the
+  # body contains detected spam.
+  checkSpam: Boolean
+}
+
+type Comment {
+  spam: Boolean
+}

plugins/talk-plugin-akismet/server/typeDefs.js

@@ -0,0 +1,7 @@
+const fs = require('fs');
+const path = require('path');
+
+module.exports = fs.readFileSync(
+  path.join(__dirname, 'typeDefs.graphql'),
+  'utf8'
+);

plugins/talk-plugin-auth/client/index.js

@@ -4,6 +4,8 @@ import SetUsernameDialog from './stream/containers/SetUsernameDialog';
 import translations from './translations.yml';
 import Login from './login/containers/Main';
 import reducer from './login/reducer';
+import ChangePassword from './profile-settings/containers/ChangePassword';
+import ChangeUsername from './profile-settings/containers/ChangeUsername';
 
 export default {
   reducer,
@@ -11,5 +13,7 @@ export default {
   slots: {
     stream: [UserBox, SignInButton, SetUsernameDialog],
     login: [Login],
+    profileHeader: [ChangeUsername],
+    profileSettings: [ChangePassword],
   },
 };

plugins/talk-plugin-auth/client/login/components/SignUp.js

@@ -75,6 +75,7 @@ class SignUp extends React.Component {
                 showErrors={!!emailError}
                 errorMsg={emailError}
                 onChange={this.handleEmailChange}
+                autocomplete="off"
               />
               <TextField
                 id="username"
@@ -85,6 +86,8 @@ class SignUp extends React.Component {
                 showErrors={!!usernameError}
                 errorMsg={usernameError}
                 onChange={this.handleUsernameChange}
+                autocomplete="off"
+                autocapitalize="none"
               />
               <TextField
                 id="password"
@@ -96,11 +99,11 @@ class SignUp extends React.Component {
                 errorMsg={passwordError}
                 onChange={this.handlePasswordChange}
                 minLength="8"
+                autocomplete="off"
               />
               {passwordError && (
                 <span className={styles.hint}>
-                  {' '}
-                  Password must be at least 8 characters.{' '}
+                  {t('talk-plugin-auth.login.password_error')}
                 </span>
               )}
               <TextField
@@ -113,6 +116,7 @@ class SignUp extends React.Component {
                 errorMsg={passwordRepeatError}
                 onChange={this.handlePasswordRepeatChange}
                 minLength="8"
+                autocomplete="off"
               />
               <Slot
                 fill="talkPluginAuth.formField"

plugins/talk-plugin-auth/client/profile-settings/components/ChangePassword.css

@@ -0,0 +1,87 @@
+.container {
+  position: relative;
+  color: #202020;
+  padding: 10px;
+  border-radius: 2px;
+  border: solid 1px transparent;
+  box-sizing: border-box;
+  justify-content: space-between;
+  
+  &.editing {
+    border-color: #979797;
+    background-color: #EDEDED;
+  }
+}
+
+.actions {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.title {
+  color: #202020;
+  margin: 0 0 20px;
+}
+
+.detailBottomBox {
+  display: block;
+  padding-top: 4px;
+  text-align: right;
+  width: 280px;
+}
+
+.detailLink {
+  color: #00538A;  
+  text-decoration: none;
+  font-size: 0.9em;
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.button {
+  border: 1px solid #787d80;
+  background-color: transparent;
+  height: 30px;
+  font-size: 0.9em;
+  line-height: normal;
+}
+
+.saveButton {
+  background-color: #3498DB;
+  border-color: #3498DB;
+  color: white;
+
+  > i {
+    font-size: 17px;
+  }
+    
+  &:hover {
+    background-color: #399ee2;
+    color: white;
+  }
+
+  &:disabled {
+    border-color: #e0e0e0;
+
+    &:hover {
+      background-color: #e0e0e0;
+      color: #4f5c67;
+      cursor: default;
+    }
+  }
+}
+
+.cancelButton {
+  color:#787D80;
+  margin-top: 6px;
+  font-size: 0.9em;
+
+  &:hover {
+    cursor: pointer;
+  }
+}

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

@@ -0,0 +1,223 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'classnames';
+import styles from './ChangePassword.css';
+import { Button } from 'plugin-api/beta/client/components/ui';
+import validate from 'coral-framework/helpers/validate';
+import errorMsj from 'coral-framework/helpers/error';
+import isEqual from 'lodash/isEqual';
+import { t } from 'plugin-api/beta/client/services';
+import InputField from './InputField';
+import { getErrorMessages } from 'coral-framework/utils';
+
+const initialState = {
+  editing: false,
+  showErrors: true,
+  errors: {},
+  formData: {},
+};
+
+class ChangePassword extends React.Component {
+  state = initialState;
+  validKeys = ['oldPassword', 'newPassword', 'confirmNewPassword'];
+
+  onChange = e => {
+    const { name, value, type } = e.target;
+    this.setState(
+      state => ({
+        formData: {
+          ...state.formData,
+          [name]: value,
+        },
+      }),
+      () => {
+        this.fieldValidation(value, type, name);
+
+        // Perform equality validation if password fields have changed
+        if (name === 'newPassword' || name === 'confirmNewPassword') {
+          this.equalityValidation('newPassword', 'confirmNewPassword');
+        }
+      }
+    );
+  };
+
+  equalityValidation = (field, field2) => {
+    const cond = this.state.formData[field] === this.state.formData[field2];
+    if (!cond) {
+      this.addError({
+        [field2]: t('talk-plugin-auth.change_password.passwords_dont_match'),
+      });
+    } else {
+      this.removeError(field2);
+    }
+    return cond;
+  };
+
+  fieldValidation = (value, type, name) => {
+    if (!value.length) {
+      this.addError({
+        [name]: t('talk-plugin-auth.change_password.required_field'),
+      });
+    } else if (!validate[type](value)) {
+      this.addError({ [name]: errorMsj[type] });
+    } else {
+      this.removeError(name);
+    }
+  };
+
+  hasError = err => {
+    return Object.keys(this.state.errors).indexOf(err) !== -1;
+  };
+
+  addError = err => {
+    this.setState(({ errors }) => ({
+      errors: { ...errors, ...err },
+    }));
+  };
+
+  removeError = errKey => {
+    this.setState(state => {
+      const { [errKey]: _, ...errors } = state.errors;
+      return {
+        errors,
+      };
+    });
+  };
+
+  enableEditing = () => {
+    this.setState({
+      editing: true,
+    });
+  };
+
+  isSubmitBlocked = () => {
+    const formHasErrors = !!Object.keys(this.state.errors).length;
+    const formIncomplete = !isEqual(
+      Object.keys(this.state.formData),
+      this.validKeys
+    );
+    return formHasErrors || formIncomplete;
+  };
+
+  clearForm = () => {
+    this.setState(initialState);
+  };
+
+  onSave = async () => {
+    const { oldPassword, newPassword } = this.state.formData;
+
+    try {
+      await this.props.changePassword({
+        oldPassword,
+        newPassword,
+      });
+      this.props.notify(
+        'success',
+        t('talk-plugin-auth.change_password.changed_password_msg')
+      );
+    } catch (err) {
+      this.props.notify('error', getErrorMessages(err));
+    }
+
+    this.clearForm();
+    this.disableEditing();
+  };
+
+  disableEditing = () => {
+    this.setState({
+      editing: false,
+    });
+  };
+
+  cancel = () => {
+    this.clearForm();
+    this.disableEditing();
+  };
+
+  render() {
+    const { editing, errors } = this.state;
+
+    return (
+      <section
+        className={cn('talk-plugin-auth--change-password', styles.container, {
+          [styles.editing]: editing,
+        })}
+      >
+        <h3 className={styles.title}>
+          {t('talk-plugin-auth.change_password.change_password')}
+        </h3>
+        {editing && (
+          <form className="talk-plugin-auth--change-password-form">
+            <InputField
+              id="oldPassword"
+              label="Old Password"
+              name="oldPassword"
+              type="password"
+              onChange={this.onChange}
+              value={this.state.formData.oldPassword}
+              hasError={this.hasError('oldPassword')}
+              errorMsg={errors['oldPassword']}
+              showErrors
+            >
+              <span className={styles.detailBottomBox}>
+                <a className={styles.detailLink}>
+                  {t('talk-plugin-auth.change_password.forgot_password')}
+                </a>
+              </span>
+            </InputField>
+            <InputField
+              id="newPassword"
+              label="New Password"
+              name="newPassword"
+              type="password"
+              onChange={this.onChange}
+              value={this.state.formData.newPassword}
+              hasError={this.hasError('newPassword')}
+              errorMsg={errors['newPassword']}
+              showErrors
+            />
+            <InputField
+              id="confirmNewPassword"
+              label="Confirm New Password"
+              name="confirmNewPassword"
+              type="password"
+              onChange={this.onChange}
+              value={this.state.formData.confirmNewPassword}
+              hasError={this.hasError('confirmNewPassword')}
+              errorMsg={errors['confirmNewPassword']}
+              showErrors
+            />
+          </form>
+        )}
+        {editing ? (
+          <div className={styles.actions}>
+            <Button
+              className={cn(styles.button, styles.saveButton)}
+              icon="save"
+              onClick={this.onSave}
+              disabled={this.isSubmitBlocked()}
+            >
+              {t('talk-plugin-auth.change_password.save')}
+            </Button>
+            <a className={styles.cancelButton} onClick={this.cancel}>
+              {t('talk-plugin-auth.change_password.cancel')}
+            </a>
+          </div>
+        ) : (
+          <div className={styles.actions}>
+            <Button className={styles.button} onClick={this.enableEditing}>
+              {t('talk-plugin-auth.change_password.edit')}
+            </Button>
+          </div>
+        )}
+      </section>
+    );
+  }
+}
+
+ChangePassword.propTypes = {
+  changePassword: PropTypes.func.isRequired,
+  notify: PropTypes.func.isRequired,
+};
+
+export default ChangePassword;

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

@@ -0,0 +1,122 @@
+.container {
+  margin-bottom: 20px;
+  display: flex;
+  position: relative;
+  color: #202020;
+  padding: 10px;
+  border-radius: 2px;
+  box-sizing: border-box;
+  justify-content: space-between;
+  
+  &.editing { 
+    background-color: #EDEDED;
+  }
+}
+
+.content {
+  flex-grow: 1;
+} 
+
+.actions {
+  flex-grow: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}                                                                       
+
+.email {
+  margin: 0;
+}
+
+.username {   
+  margin-bottom: 4px;
+}         
+
+.button {
+  border: 1px solid #787d80;
+  background-color: transparent;
+  height: 30px;
+  font-size: 0.9em;
+  line-height: normal;
+}
+
+.saveButton {
+  background-color: #3498DB;
+  border-color: #3498DB;
+  color: white;
+
+  > i {
+    font-size: 17px;
+  }
+    
+  &:hover {
+    background-color: #399ee2;
+    color: white;
+  }
+
+  &:disabled {
+    border-color: #e0e0e0;
+
+    &:hover {
+      background-color: #e0e0e0;
+      color: #4f5c67;
+      cursor: default;
+    }
+  }
+}
+
+.cancelButton {
+  color:#787D80;
+  margin-top: 6px;
+  font-size: 0.9em;
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.detailLabel {
+  border: solid 1px #787D80;
+  border-radius: 2px;
+  background-color: white;
+  height: 30px;
+  display: inline-block;
+  width: 230px;
+  display: flex;  
+
+  > .detailLabelIcon {
+    font-size: 1.2em;
+    padding: 0 5px;
+    color: #787D80;
+    line-height: 30px; 
+  }
+
+  &.disabled {
+    background-color: #E0E0E0;
+  }
+}
+
+.detailValue {
+  background: transparent;
+  border: none;
+  font-size: 1em;
+  color: #000;
+  height: 30px;
+  outline: none;
+  flex: 1;
+}
+
+.bottomText {
+  color: #474747;
+  font-size: 0.9em;
+}
+
+.detailList {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+} 
+
+.detailItem {
+  margin-bottom: 12px;
+}

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

@@ -0,0 +1,188 @@
+import React from 'react';
+import cn from 'classnames';
+import PropTypes from 'prop-types';
+import styles from './ChangeUsername.css';
+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';
+import { canUsernameBeUpdated } from 'coral-framework/utils/user';
+
+const initialState = {
+  editing: false,
+  showDialog: false,
+  formData: {},
+};
+
+class ChangeUsername extends React.Component {
+  state = initialState;
+
+  clearForm = () => {
+    this.setState(initialState);
+  };
+
+  enableEditing = () => {
+    this.setState({
+      editing: true,
+    });
+  };
+
+  disableEditing = () => {
+    this.setState({
+      editing: false,
+    });
+  };
+
+  cancel = () => {
+    this.clearForm();
+    this.disableEditing();
+  };
+
+  showDialog = () => {
+    this.setState({
+      showDialog: true,
+    });
+  };
+
+  onSave = async () => {
+    this.showDialog();
+  };
+
+  saveChanges = async () => {
+    const { newUsername } = this.state.formData;
+    const { changeUsername } = this.props;
+
+    try {
+      await changeUsername(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 => {
+    const { name, value } = e.target;
+
+    this.setState(state => ({
+      formData: {
+        ...state.formData,
+        [name]: value,
+      },
+    }));
+  };
+
+  closeDialog = () => {
+    this.setState({
+      showDialog: false,
+    });
+  };
+
+  render() {
+    const {
+      username,
+      emailAddress,
+      root: { me: { state: { status } } },
+      notify,
+    } = this.props;
+    const { editing, formData, showDialog } = this.state;
+
+    return (
+      <section
+        className={cn('talk-plugin-auth--edit-profile', styles.container, {
+          [styles.editing]: editing,
+        })}
+      >
+        <ChangeUsernameDialog
+          canUsernameBeUpdated={canUsernameBeUpdated(status)}
+          showDialog={showDialog}
+          onChange={this.onChange}
+          formData={formData}
+          username={username}
+          closeDialog={this.closeDialog}
+          saveChanges={this.saveChanges}
+          notify={notify}
+        />
+
+        {editing ? (
+          <div className={styles.content}>
+            <div className={styles.detailList}>
+              <InputField
+                icon="person"
+                id="newUsername"
+                name="newUsername"
+                onChange={this.onChange}
+                defaultValue={username}
+                columnDisplay
+                validationType="username"
+              >
+                <span className={styles.bottomText}>
+                  {t('talk-plugin-auth.change_username.change_username_note')}
+                </span>
+              </InputField>
+              <InputField
+                icon="email"
+                id="email"
+                name="email"
+                value={emailAddress}
+                validationType="username"
+                disabled
+              />
+            </div>
+          </div>
+        ) : (
+          <div className={styles.content}>
+            <h2 className={styles.username}>{username}</h2>
+            {emailAddress ? (
+              <p className={styles.email}>{emailAddress}</p>
+            ) : null}
+          </div>
+        )}
+        {editing ? (
+          <div className={styles.actions}>
+            <Button
+              className={cn(styles.button, styles.saveButton)}
+              icon="save"
+              onClick={this.onSave}
+              disabled={
+                !this.state.formData.newUsername ||
+                this.state.formData.newUsername === username
+              }
+            >
+              {t('talk-plugin-auth.change_username.save')}
+            </Button>
+            <a className={styles.cancelButton} onClick={this.cancel}>
+              {t('talk-plugin-auth.change_username.cancel')}
+            </a>
+          </div>
+        ) : (
+          <div className={styles.actions}>
+            <Button
+              className={styles.button}
+              icon="settings"
+              onClick={this.enableEditing}
+            >
+              {t('talk-plugin-auth.change_username.edit_profile')}
+            </Button>
+          </div>
+        )}
+      </section>
+    );
+  }
+}
+
+ChangeUsername.propTypes = {
+  root: PropTypes.object.isRequired,
+  changeUsername: PropTypes.func.isRequired,
+  notify: PropTypes.func.isRequired,
+  username: PropTypes.string,
+  emailAddress: PropTypes.string,
+};
+
+export default ChangeUsername;

plugins/talk-plugin-auth/client/profile-settings/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-auth/client/profile-settings/components/ChangeUsernameDialog.js

@@ -0,0 +1,117 @@
+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-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-auth--edit-profile-dialog')}
+      >
+        <span className={styles.close} onClick={this.props.closeDialog}>
+          ×
+        </span>
+        <h1 className={styles.title}>
+          {t('talk-plugin-auth.change_username.confirm_username_change')}
+        </h1>
+        <div className={styles.content}>
+          <p className={styles.description}>
+            {t('talk-plugin-auth.change_username.description')}
+          </p>
+          <div className={styles.usernamesChange}>
+            <span className={styles.item}>
+              {t('talk-plugin-auth.change_username.old_username')}:{' '}
+              {this.props.username}
+            </span>
+            <span className={styles.item}>
+              {t('talk-plugin-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-auth.change_username.username_does_not_match'
+              )}
+              showError={this.state.showError}
+              columnDisplay
+              showSuccess={false}
+              validationType="username"
+            >
+              <span className={styles.bottomNote}>
+                {t('talk-plugin-auth.change_username.bottom_note')}
+              </span>
+            </InputField>
+          </form>
+          <div className={styles.bottomActions}>
+            <Button className={styles.cancel}>
+              {t('talk-plugin-auth.change_username.cancel')}
+            </Button>
+            <Button
+              className={styles.confirmChanges}
+              onClick={this.confirmChanges}
+            >
+              {t('talk-plugin-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;

plugins/talk-plugin-auth/client/profile-settings/components/ErrorMessage.css

@@ -0,0 +1,8 @@
+.errorMsg {
+  color: #FA4643;
+  font-size: 0.9em;
+}
+
+.warningIcon {
+  color: #FA4643;
+}

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './ErrorMessage.css';
+import { Icon } from 'plugin-api/beta/client/components/ui';
+
+const ErrorMessage = ({ children }) => (
+  <div className={styles.errorMsg}>
+    <Icon className={styles.warningIcon} name="warning" />
+    <span>{children}</span>
+  </div>
+);
+
+ErrorMessage.propTypes = {
+  children: PropTypes.node,
+};
+
+export default ErrorMessage;

plugins/talk-plugin-auth/client/profile-settings/components/InputField.css

@@ -0,0 +1,80 @@
+  
+.detailItem {
+  margin-bottom: 12px;
+}
+
+.detailItemContainer {
+  display: flex;
+}
+
+.columnDisplay {
+  flex-direction: column;
+
+  .detailItemMessage {
+    padding: 4px 0 0;
+  }
+}
+
+.detailItemContent {
+  border: solid 1px #787D80;
+  border-radius: 2px;
+  background-color: white;
+  height: 30px;
+  display: inline-block;
+  width: 230px;
+  display: flex;  
+  box-sizing: border-box;
+
+  > .detailIcon {
+    font-size: 1.2em;
+    padding: 0 5px;
+    color: #787D80;
+    line-height: 30px; 
+  }
+
+  &.error {
+    border: solid 2px #FA4643;
+  }
+
+  &.disabled {
+    background-color: #E0E0E0;
+  }
+}
+
+.detailLabel {
+  color: #4C4C4D;
+  font-size: 1em;
+  display: block;
+  margin-bottom: 4px;
+}
+
+.detailValue {
+  background: transparent;
+  border: none;
+  font-size: 1em;
+  color: #000;
+  outline: none;
+  flex: 1;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.detailItemMessage {
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+  padding-left: 6px;
+  padding-top: 16px;
+
+  .warningIcon, .checkIcon {
+    font-size: 17px;
+  }
+}
+
+.checkIcon {
+  color: #00CD73;
+}
+
+.warningIcon {
+  color: #FA4643;
+}

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

@@ -0,0 +1,94 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'classnames';
+import styles from './InputField.css';
+import ErrorMessage from './ErrorMessage';
+import { Icon } from 'plugin-api/beta/client/components/ui';
+
+const InputField = ({
+  id = '',
+  label = '',
+  type = 'text',
+  name = '',
+  onChange = () => {},
+  showError = true,
+  hasError = false,
+  errorMsg = '',
+  children,
+  columnDisplay = false,
+  showSuccess = false,
+  validationType = '',
+  icon = '',
+  value = '',
+  defaultValue = '',
+  disabled = false,
+}) => {
+  const inputValue = {
+    ...(value ? { value } : {}),
+    ...(defaultValue ? { defaultValue } : {}),
+  };
+
+  return (
+    <div className={styles.detailItem}>
+      <div
+        className={cn(styles.detailItemContainer, {
+          [styles.columnDisplay]: columnDisplay,
+        })}
+      >
+        {label && (
+          <label className={styles.detailLabel} id={id}>
+            {label}
+          </label>
+        )}
+        <div
+          className={cn(
+            styles.detailItemContent,
+            { [styles.error]: hasError },
+            { [styles.disabled]: disabled }
+          )}
+        >
+          {icon && <Icon name={icon} className={styles.detailIcon} />}
+          <input
+            id={id}
+            type={type}
+            name={name}
+            className={styles.detailValue}
+            onChange={onChange}
+            autoComplete="off"
+            data-validation-type={validationType}
+            disabled={disabled}
+            {...inputValue}
+          />
+        </div>
+        <div className={styles.detailItemMessage}>
+          {!hasError &&
+            showSuccess &&
+            value && <Icon className={styles.checkIcon} name="check_circle" />}
+          {hasError && showError && <ErrorMessage>{errorMsg}</ErrorMessage>}
+        </div>
+      </div>
+      {children}
+    </div>
+  );
+};
+
+InputField.propTypes = {
+  id: PropTypes.string,
+  disabled: PropTypes.bool,
+  label: PropTypes.string,
+  type: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func,
+  value: PropTypes.string,
+  defaultValue: PropTypes.string,
+  icon: PropTypes.string,
+  showError: PropTypes.bool,
+  hasError: PropTypes.bool,
+  errorMsg: PropTypes.string,
+  children: PropTypes.node,
+  columnDisplay: PropTypes.bool,
+  showSuccess: PropTypes.bool,
+  validationType: PropTypes.string,
+};
+
+export default InputField;

plugins/talk-plugin-auth/client/profile-settings/containers/ChangePassword.js

@@ -0,0 +1,12 @@
+import { compose } from 'react-apollo';
+import { bindActionCreators } from 'redux';
+import { connect } from 'plugin-api/beta/client/hocs';
+import ChangePassword from '../components/ChangePassword';
+import { notify } from 'coral-framework/actions/notification';
+import { withChangePassword } from 'plugin-api/beta/client/hocs';
+
+const mapDispatchToProps = dispatch => bindActionCreators({ notify }, dispatch);
+
+export default compose(connect(null, mapDispatchToProps), withChangePassword)(
+  ChangePassword
+);

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

@@ -0,0 +1,12 @@
+import { compose } from 'react-apollo';
+import { bindActionCreators } from 'redux';
+import { connect } from 'plugin-api/beta/client/hocs';
+import ChangeUsername from '../components/ChangeUsername';
+import { notify } from 'coral-framework/actions/notification';
+import { withChangeUsername } from 'plugin-api/beta/client/hocs';
+
+const mapDispatchToProps = dispatch => bindActionCreators({ notify }, dispatch);
+
+export default compose(connect(null, mapDispatchToProps), withChangeUsername)(
+  ChangeUsername
+);

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

@@ -58,8 +58,9 @@ da:
       sign_in: "Sign in"
       sign_in_to_join: "Sign in to join the conversation"
       or: "Or"
-      email: "E-mail Address"
+      email: "Email Address"
       password: "Password"
+      password_error: "Password must be at least 8 characters."
       forgot_your_pass: "Forgot your password?"
       need_an_account: "Need an account?"
       register: "Register"
@@ -101,8 +102,9 @@ en:
       sign_in: "Sign in"
       sign_in_to_join: "Sign in to join the conversation"
       or: "Or"
-      email: "E-mail Address"
+      email: "Email Address"
       password: "Password"
+      password_error: "Password must be at least 8 characters."
       forgot_your_pass: "Forgot your password?"
       need_an_account: "Need an account?"
       register: "Register"
@@ -131,6 +133,29 @@ en:
       username: Username
       write_your_username: "Edit your username"
       your_username: "Your username appears on every comment you post."
+    change_password:
+      change_password: "Change Password"
+      passwords_dont_match: "Passwords don`t match"
+      required_field: "This field is required"
+      forgot_password: "Forgot your password?"
+      save: "Save"
+      cancel: "Cancel"
+      edit: "Edit"
+      changed_password_msg: "Changed Password - Your password has been successfully changed"
+    change_username:
+      change_username_note: "Usernames can be changed every 14 days"
+      save: "Save"
+      edit_profile: "Edit Profile"
+      cancel: "Cancel"
+      confirm_username_change: "Confirm Username Change"
+      description: "You are attempting to change your username. Your new username will appear on all of your past and future comments."
+      old_username: "Old Username"
+      new_username: "New Username"
+      bottom_note: "Note: You will not be able to change your username again for 14 days"
+      confirm_changes: "Confirm Changes"
+      username_does_not_match: "Username does not match"
+      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."
+      change_username_attempt: "Username can't be updated. Usernames can be changed every 14 days"
 de:
   talk-plugin-auth:
     login:
@@ -192,6 +217,7 @@ es:
       or: "O"
       email: "Dirección de Correo"
       password: "Contraseña"
+      password_error: "La contraseña debe tener al menos 8 caracteres."
       forgot_your_pass: "¿Has olvidado tu contraseña?"
       need_an_account: "¿Necesitas una cuenta?"
       register: "Registrar"
@@ -222,6 +248,29 @@ es:
       username: Nombre
       write_your_username: "Edita tu nombre"
       your_username: "Tu nombre aparece en cada comentario que publiques."
+    change_password:
+      change_password: "Cambiar Contraseña"
+      passwords_dont_match: "Las contraseñas no coinciden"
+      required_field: "Este campo es requerido"
+      forgot_password: "Olvidaste tu contraseña?"
+      save: "Guardar"
+      cancel: "Cancelar"
+      edit: "Editar"
+      changed_password_msg: "Contraseña Actualizada - Tu contraseña ha sido exitosamente actualizada"
+    change_username:
+      change_username_note: "El usuario puede ser cambiado cada 14 días"
+      save: "Guardar"
+      edit_profile: "Editar Perfil"
+      cancel: "Cancelar"
+      confirm_username_change: "Confirmar Cambio de Usuario"
+      description: "Estás intentando cambiar tu usuario. Tu nuevo usuario aparecerá en todos tus pasados y futuros comentarios."
+      old_username: "Usuario viejo"
+      new_username: "Usuario nuevo"
+      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: "Usuario Actualizado - Tu usuario ha sido exitosamente actualizado. No podrás cambiar el usuario por 14 días."
+      change_username_attempt: "El usuario no puede ser actualizado. Los usuarios pueden ser cambiados cada 14 días."
 fr:
   talk-plugin-auth:
     login:
@@ -367,7 +416,7 @@ pt_BR:
       sign_in: "Sign in"
       sign_in_to_join: "Sign in to join the conversation"
       or: "Or"
-      email: "E-mail Address"
+      email: "Email Address"
       password: "Password"
       forgot_your_pass: "Forgot your password?"
       need_an_account: "Need an account?"

plugins/talk-plugin-notifications-category-reply/index.js

@@ -1,4 +1,4 @@
-const { get } = require('lodash');
+const { get, map } = require('lodash');
 const path = require('path');
 
 const handle = async (ctx, comment) => {
@@ -23,6 +23,9 @@ const handle = async (ctx, comment) => {
           id
           user {
             id
+            ignoredUsers {
+              id
+            }
             notificationSettings {
               onReply
             }
@@ -53,13 +56,23 @@ const handle = async (ctx, comment) => {
     return;
   }
 
+  // Pull out the author of the new comment.
+  const authorID = get(comment, 'author_id');
+
   // Check to see if this is yourself replying to yourself, if that's the case
   // don't send a notification.
-  if (userID === get(comment, 'author_id')) {
+  if (userID === authorID) {
     ctx.log.info('user id of parent comment is the same as the new comment');
     return;
   }
 
+  // Check to see if this user is ignoring the user who replied to their
+  // comment.
+  if (map(get(comment, 'user.ignoredUsers', []), 'id').indexOf(authorID)) {
+    ctx.log.info('parent user has ignored the author of the new comment');
+    return;
+  }
+
   // The user does have notifications for replied comments enabled, queue the
   // notification to be sent.
   return { userID, date: comment.created_at, context: comment.id };

plugins/talk-plugin-notifications/server/mutators.js

@@ -29,10 +29,11 @@ async function updateNotificationSettings(ctx, settings) {
 }
 
 module.exports = ctx => {
+  const { connectors: { errors: ErrNotAuthorized } } = ctx;
+
   let mutators = {
     User: {
-      updateNotificationSettings: () =>
-        Promise.reject(ctx.connectors.errors.ErrNotAuthorized),
+      updateNotificationSettings: () => Promise.reject(new ErrNotAuthorized()),
     },
   };
 

plugins/talk-plugin-notifications/server/views/unsubscribe-notifications.ejs

@@ -3,9 +3,9 @@
   <head>
     <meta name="viewport" content="initial-scale=1, maximum-scale=1">
     <title><%= t('talk-plugin-notifications.unsubscribe_page.unsubscribe') %></title>
+    <%- include(root + '/partials/head') %>
     <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
     <link rel="stylesheet" href="<%= BASE_PATH %>public/css/admin.css">
-    <%- include(root + '/partials/head') %>
   </head>
   <body class="confirm-email-page">
     <div id="root">

plugins/talk-plugin-profile-data/README.md

@@ -0,0 +1,24 @@
+---
+title: talk-plugin-profile-data
+layout: plugin
+permalink: /plugin/talk-plugin-profile-data/
+plugin:
+    name: talk-plugin-profile-data
+    default: true
+    provides:
+        - Client
+        - Server
+---
+
+Provides a series of profile data management utilities to users via their
+profile tab.
+
+## Download My Profile
+
+Enables the ability for users to download their profile data in a zip file from
+their profile tab in the comment stream. Once clicked, an email will be sent
+that contains a download link. Only one link can be generated every 7 days, and
+the link will be valid for 24 hours.
+
+The downloaded zip file will contain all the users comments in a CSV format
+including those that have been rejected, withheld, or still in premod.

plugins/talk-plugin-profile-data/client/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "@coralproject/eslint-config-talk/client"
+}

plugins/talk-plugin-profile-data/client/components/DownloadCommentHistory.css

@@ -0,0 +1,12 @@
+.button {
+  margin: 0;
+
+  i {
+    font-size: inherit;
+    vertical-align: sub;
+  }
+}
+
+.most_recent {
+  color: #808080;
+}

plugins/talk-plugin-profile-data/client/components/DownloadCommentHistory.js

@@ -0,0 +1,74 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { t } from 'plugin-api/beta/client/services';
+import { Button } from 'plugin-api/beta/client/components/ui';
+import styles from './DownloadCommentHistory.css';
+
+export const readableDuration = durAsHours => {
+  const durAsDays = Math.ceil(durAsHours / 24);
+
+  return durAsHours > 23
+    ? durAsDays > 1
+      ? t('download_request.days', durAsDays)
+      : t('download_request.day', durAsDays)
+    : durAsHours > 1
+      ? t('download_request.hours', durAsHours)
+      : t('download_request.hour', durAsHours);
+};
+
+class DownloadCommentHistory extends Component {
+  static propTypes = {
+    requestDownloadLink: PropTypes.func.isRequired,
+    root: PropTypes.object.isRequired,
+  };
+
+  render() {
+    const {
+      root: { me: { lastAccountDownload } },
+      requestDownloadLink,
+    } = this.props;
+
+    const now = new Date();
+    const lastAccountDownloadDate =
+      lastAccountDownload && new Date(lastAccountDownload);
+    const hoursLeft = lastAccountDownloadDate
+      ? Math.ceil(
+          7 * 24 - (now.getTime() - lastAccountDownloadDate.getTime()) / 3.6e6
+        )
+      : 0;
+    const canRequestDownload = !lastAccountDownloadDate || hoursLeft <= 0;
+
+    return (
+      <section className={'talk-plugin-ignore-user-section'}>
+        <h3>{t('download_request.section_title')}</h3>
+        <p>
+          {t('download_request.you_will_get_a_copy')}{' '}
+          <b>{t('download_request.download_rate')}</b>.
+        </p>
+        {lastAccountDownloadDate && (
+          <p className={styles.most_recent}>
+            {t('download_request.most_recent_request')}:{' '}
+            {lastAccountDownloadDate.toLocaleString()}
+          </p>
+        )}
+        {canRequestDownload ? (
+          <Button className={styles.button} onClick={requestDownloadLink}>
+            <i className="material-icons" aria-hidden={true}>
+              file_download
+            </i>{' '}
+            {t('download_request.request')}
+          </Button>
+        ) : (
+          <Button className={styles.button} disabled>
+            <i className="material-icons" aria-hidden={true}>
+              access_time
+            </i>{' '}
+            {t('download_request.rate_limit', readableDuration(hoursLeft))}
+          </Button>
+        )}
+      </section>
+    );
+  }
+}
+
+export default DownloadCommentHistory;

plugins/talk-plugin-profile-data/client/containers/DownloadCommentHistory.js

@@ -0,0 +1,39 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { compose, gql } from 'react-apollo';
+import DownloadCommentHistory from '../components/DownloadCommentHistory';
+import { withFragments } from 'plugin-api/beta/client/hocs';
+import { withRequestDownloadLink } from '../mutations';
+
+class DownloadCommentHistoryContainer extends Component {
+  static propTypes = {
+    requestDownloadLink: PropTypes.func.isRequired,
+    root: PropTypes.object.isRequired,
+  };
+
+  render() {
+    return (
+      <DownloadCommentHistory
+        root={this.props.root}
+        requestDownloadLink={this.props.requestDownloadLink}
+      />
+    );
+  }
+}
+
+const enhance = compose(
+  withFragments({
+    root: gql`
+      fragment TalkDownloadCommentHistory_DownloadCommentHistorySection_root on RootQuery {
+        __typename
+        me {
+          id
+          lastAccountDownload
+        }
+      }
+    `,
+  }),
+  withRequestDownloadLink
+);
+
+export default enhance(DownloadCommentHistoryContainer);

plugins/talk-plugin-profile-data/client/graphql.js

@@ -0,0 +1,18 @@
+import update from 'immutability-helper';
+
+export default {
+  mutations: {
+    DownloadCommentHistory: () => ({
+      updateQueries: {
+        CoralEmbedStream_Profile: previousData =>
+          update(previousData, {
+            me: {
+              lastAccountDownload: {
+                $set: new Date().toISOString(),
+              },
+            },
+          }),
+      },
+    }),
+  },
+};

plugins/talk-plugin-profile-data/client/index.js

@@ -0,0 +1,11 @@
+import DownloadCommentHistory from './containers/DownloadCommentHistory';
+import translations from './translations.yml';
+import graphql from './graphql';
+
+export default {
+  slots: {
+    profileSettings: [DownloadCommentHistory],
+  },
+  translations,
+  ...graphql,
+};

plugins/talk-plugin-profile-data/client/mutations.js

@@ -0,0 +1,19 @@
+import { withMutation } from 'plugin-api/beta/client/hocs';
+import { gql } from 'react-apollo';
+
+export const withRequestDownloadLink = withMutation(
+  gql`
+    mutation DownloadCommentHistory {
+      requestDownloadLink {
+        errors {
+          translation_key
+        }
+      }
+    }
+  `,
+  {
+    props: ({ mutate }) => ({
+      requestDownloadLink: () => mutate({ variables: {} }),
+    }),
+  }
+);

plugins/talk-plugin-profile-data/client/translations.yml

@@ -0,0 +1,12 @@
+en:
+  download_request:
+    section_title: "Download My Comment History"
+    you_will_get_a_copy: "You will recieve an email with a link to download your comment history. You can make"
+    download_rate: "one download request every 7 days"
+    most_recent_request: "Your most recent request"
+    request: "Request Comment History"
+    rate_limit: "You can submit another Comment History request in {0}"
+    hours: "{0} hours"
+    days: "{0} days"
+    hour: "{0} hour"
+    day: "{0} day"

plugins/talk-plugin-profile-data/index.js

@@ -0,0 +1,15 @@
+const path = require('path');
+const router = require('./server/router');
+const mutators = require('./server/mutators');
+const typeDefs = require('./server/typeDefs');
+const connect = require('./server/connect');
+const resolvers = require('./server/resolvers');
+
+module.exports = {
+  mutators,
+  router,
+  connect,
+  typeDefs,
+  translations: path.join(__dirname, 'translations.yml'),
+  resolvers,
+};

plugins/talk-plugin-profile-data/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@coralproject/talk-plugin-profile-data",
+  "version": "1.0.0",
+  "description": "Adds profile data management for Talk",
+  "main": "index.js",
+  "license": "Apache-2.0",
+  "private": false,
+  "dependencies": {
+    "archiver": "^2.1.1",
+    "csv-stringify": "^3.0.0"
+  }
+}

plugins/talk-plugin-profile-data/server/connect.js

@@ -0,0 +1,14 @@
+const path = require('path');
+
+module.exports = connectors => {
+  const { services: { Mailer } } = connectors;
+
+  // Setup the mail templates.
+  ['txt', 'html'].forEach(format => {
+    Mailer.templates.register(
+      path.join(__dirname, 'emails', `download.${format}.ejs`),
+      'download',
+      format
+    );
+  });
+};

plugins/talk-plugin-profile-data/server/constants.js

@@ -0,0 +1,3 @@
+module.exports = {
+  DOWNLOAD_LINK_SUBJECT: 'download_link',
+};

plugins/talk-plugin-profile-data/server/emails/download.html.ejs

@@ -0,0 +1 @@
+<p><%= t('email.download.download_link_ready', organizationName, now.toLocaleString()) %> <a href="<%= downloadLandingURL %>"><%= t('email.download.download_archive') %></a></p>

plugins/talk-plugin-profile-data/server/emails/download.txt.ejs

@@ -0,0 +1,3 @@
+<%= t('email.download.download_link_ready', organizationName, now.toLocaleString()) %>
+
+    <%= downloadLandingURL %>

plugins/talk-plugin-profile-data/server/errors.js

@@ -0,0 +1,18 @@
+const { TalkError } = require('errors');
+
+// ErrDownloadToken is returned in the event that the download is requested
+// without a valid token.
+class ErrDownloadToken extends TalkError {
+  constructor(err) {
+    super(
+      'Token is invalid',
+      {
+        translation_key: 'DOWNLOAD_TOKEN_INVALID',
+        status: 400,
+      },
+      { err }
+    );
+  }
+}
+
+module.exports = { ErrDownloadToken };

plugins/talk-plugin-profile-data/server/mutators.js

@@ -0,0 +1,106 @@
+const moment = require('moment');
+const uuid = require('uuid/v4');
+const { DOWNLOAD_LINK_SUBJECT } = require('./constants');
+const { ErrNotAuthorized, ErrMaxRateLimit } = require('errors');
+const { URL } = require('url');
+
+// generateDownloadLinks will generate a signed set of links for a given user to
+// download an archive of their data.
+async function generateDownloadLinks(ctx, userID) {
+  const { connectors: { url: { BASE_URL }, secrets } } = ctx;
+
+  // Generate a token for the download link.
+  const token = await secrets.jwt.sign(
+    { user: userID },
+    { jwtid: uuid.v4(), expiresIn: '1d', subject: DOWNLOAD_LINK_SUBJECT }
+  );
+
+  // Generate the url that a user can land on.
+  const downloadLandingURL = new URL('account/download', BASE_URL);
+  downloadLandingURL.hash = token;
+
+  // Generate the url that the API calls to download the actual zip.
+  const downloadFileURL = new URL('api/v1/account/download', BASE_URL);
+  downloadFileURL.searchParams.set('token', token);
+
+  return {
+    downloadLandingURL: downloadLandingURL.href,
+    downloadFileURL: downloadFileURL.href,
+  };
+}
+
+async function sendDownloadLink(ctx) {
+  const {
+    user,
+    loaders: { Settings },
+    connectors: { services: { Users, I18n, Limit }, models: { User } },
+  } = ctx;
+
+  // downloadLinkLimiter can be used to limit downloads for the user's data to
+  // once every 7 days.
+  const downloadLinkLimiter = new Limit('profileDataDownloadLimiter', 1, '7d');
+
+  // Check that the user has not already requested a download within the last
+  // 7 days.
+  const attempts = await downloadLinkLimiter.get(user.id);
+  if (attempts && attempts >= 1) {
+    throw new ErrMaxRateLimit();
+  }
+
+  // Check if the lastAccountDownload time is within 7 days.
+  if (
+    user.lastAccountDownload &&
+    moment(user.lastAccountDownload)
+      .add(7, 'days')
+      .isAfter(moment())
+  ) {
+    throw new ErrMaxRateLimit();
+  }
+
+  // The account currently does not have a download link, let's record the
+  // download. This will throw an error if a race ocurred and we should stop
+  // now.
+  await downloadLinkLimiter.test(user.id);
+
+  const now = new Date();
+
+  // Generate the download links.
+  const { downloadLandingURL } = await generateDownloadLinks(ctx, user.id);
+
+  const { organizationName } = await Settings.load('organizationName');
+
+  // Send the download link via the user's attached email account.
+  await Users.sendEmail(user, {
+    template: 'download',
+    locals: {
+      downloadLandingURL,
+      organizationName,
+      now,
+    },
+    subject: I18n.t('email.download.subject', organizationName),
+  });
+
+  // Amend the lastAccountDownload on the user.
+  await User.update(
+    { id: user.id },
+    { $set: { 'metadata.lastAccountDownload': now } }
+  );
+}
+
+// downloadUser will return the download file url that can be used to directly
+// download the archive.
+async function downloadUser(ctx, userID) {
+  const { downloadFileURL } = await generateDownloadLinks(ctx, userID);
+  return downloadFileURL;
+}
+
+module.exports = ctx => ({
+  User: {
+    requestDownloadLink: () => sendDownloadLink(ctx),
+    download:
+      // Only ADMIN users can execute an account download.
+      ctx.user && ctx.user.role === 'ADMIN'
+        ? userID => downloadUser(ctx, userID)
+        : () => Promise.reject(new ErrNotAuthorized()),
+  },
+});

plugins/talk-plugin-profile-data/server/resolvers.js

@@ -0,0 +1,23 @@
+const { get } = require('lodash');
+
+module.exports = {
+  RootMutation: {
+    requestDownloadLink: async (_, args, { mutators: { User } }) => {
+      await User.requestDownloadLink();
+    },
+    downloadUser: async (_, { id }, { mutators: { User } }) => ({
+      archiveURL: await User.download(id),
+    }),
+  },
+  User: {
+    lastAccountDownload: (user, args, { user: currentUser }) => {
+      // If the current user is not the requesting user, and the user is not
+      // an admin, return nothing.
+      if (user.id !== currentUser.id && user.role !== 'ADMIN') {
+        return null;
+      }
+
+      return get(user, 'metadata.lastAccountDownload', null);
+    },
+  },
+};

plugins/talk-plugin-profile-data/server/router.js

@@ -0,0 +1,200 @@
+const path = require('path');
+const express = require('express');
+const { DOWNLOAD_LINK_SUBJECT } = require('./constants');
+const { get, pick, kebabCase } = require('lodash');
+const moment = require('moment');
+const archiver = require('archiver');
+const stringify = require('csv-stringify');
+const { ErrDownloadToken } = require('./errors');
+
+async function verifyDownloadToken(
+  { connectors: { services: { Users } } },
+  token
+) {
+  const jwt = await Users.verifyToken(token, {
+    subject: DOWNLOAD_LINK_SUBJECT,
+  });
+
+  return jwt;
+}
+
+// loadCommentsBatch will load a batch of the comments and write them to the
+// stream.
+async function loadCommentsBatch(ctx, csv, variables) {
+  let result = await ctx.graphql(
+    `
+    query GetMyComments($userID: ID!, $cursor: Cursor) {
+      user(id: $userID) {
+        comments(query: {
+          limit: 100,
+          cursor: $cursor,
+          statuses: null
+        }) {
+          hasNextPage
+          endCursor
+          nodes {
+            id
+            created_at
+            asset {
+              url
+            }
+            body
+            url
+          }
+        }
+      }
+    }
+  `,
+    variables
+  );
+  if (result.errors) {
+    throw result.errors;
+  }
+
+  for (const comment of get(result, 'data.user.comments.nodes', [])) {
+    csv.write([
+      comment.id,
+      moment(comment.created_at).format('YYYY-MM-DD HH:mm:ss'),
+      get(comment, 'asset.url'),
+      comment.url,
+      comment.body,
+    ]);
+  }
+
+  return pick(get(result, 'data.user.comments'), ['hasNextPage', 'endCursor']);
+}
+
+// loadComments will load batches of the comments and write them to the csv
+// stream. Once the comments have finished writing, it will close the stream.
+async function loadComments(ctx, userID, archive, latestContentDate) {
+  // Create all the csv writers that'll write the data to the archive.
+  const csv = stringify();
+
+  // Add all the streams as files to the archive.
+  archive.append(csv, { name: 'talk-export/my_comments.csv' });
+
+  csv.write(['ID', 'Timestamp', 'Article', 'Link', 'Body']);
+
+  // Load the first batch's comments from the latest date that we were provided
+  // from the token.
+  let connection = await loadCommentsBatch(ctx, csv, {
+    cursor: latestContentDate,
+    userID,
+  });
+
+  // As long as there's more comments, keep paginating.
+  while (connection.hasNextPage) {
+    connection = await loadCommentsBatch(ctx, csv, {
+      cursor: connection.endCursor,
+      userID,
+    });
+  }
+
+  csv.end();
+}
+
+module.exports = router => {
+  // /account/download will render the download page.
+  router.get('/account/download', (req, res) => {
+    res.render(path.join(__dirname, 'views', 'download'));
+  });
+
+  // /api/v1/account/download will send back a zipped archive of the users
+  // account.
+  router.all(
+    '/api/v1/account/download',
+    express.urlencoded({ extended: false }),
+    async (req, res, next) => {
+      let { token = null, check = false } = req.body;
+
+      if (!token) {
+        // If the token wasn't found in the body, then we should check the query
+        // to see if it was passed that way.
+        token = req.query.token;
+      }
+
+      if (!token) {
+        return res.status(400).end();
+      }
+
+      if (check) {
+        // This request is checking to see if the token is valid.
+        try {
+          // Verify the token
+          await verifyDownloadToken(req.context, token);
+        } catch (err) {
+          return next(new ErrDownloadToken(err));
+        }
+
+        res.status(204).end();
+
+        // Don't continue to pass it onto the next middleware, as we've only been
+        // asked to verify the token.
+        return;
+      }
+
+      const { connectors: { graph: { Context }, errors } } = req.context;
+
+      try {
+        // Pull the userID and the date that the token was issued out of the
+        // provided token.
+        const { user: userID, iat } = await verifyDownloadToken(
+          req.context,
+          token
+        );
+
+        // Create a system context used to get all comments for that user.
+        const ctx = Context.forSystem();
+
+        // Get the current user's username. We need it for the generated filenames.
+        const result = await ctx.graphql(
+          `query GetUser($userID: ID!) {
+            user(id: $userID) { username }
+          }`,
+          { userID }
+        );
+        if (result.errors) {
+          throw result.errors;
+        }
+
+        const user = get(result, 'data.user');
+        if (!user) {
+          throw new errors.ErrNotFound();
+        }
+
+        // Unpack the date that the token was issued, and use it as a source for the
+        // earliest comment we should include in the download.
+        const latestContentDate = new Date(iat * 1000);
+
+        // Generate the filename of the file that the user will download.
+        const username = get(user, 'username');
+        const filename = `talk-${kebabCase(username)}-${kebabCase(
+          moment(latestContentDate).format('YYYY-MM-DD HH:mm:ss')
+        )}.zip`;
+
+        res.writeHead(200, {
+          'Content-Type': 'application/octet-stream',
+          'Content-Disposition': `attachment; filename=${filename}`,
+        });
+
+        // Create the zip archive we'll use to write all the exported files to.
+        const archive = archiver('zip', {
+          zlib: { level: 9 },
+        });
+
+        // Pipe this to the response writer directly.
+        archive.pipe(res);
+
+        // Load the comments csv up with the user's comments.
+        await loadComments(ctx, userID, archive, latestContentDate);
+
+        // Mark the end of adding files, no more files can be added after this. Once
+        // all the stream readers have finished writing, and have closed, the
+        // archiver will close which will finish the HTTP request.
+        archive.finalize();
+      } catch (err) {
+        return next(err);
+      }
+    }
+  );
+};

plugins/talk-plugin-profile-data/server/typeDefs.graphql

@@ -0,0 +1,33 @@
+type User {
+
+  # lastAccountDownload is the date that the user last requested a comment
+  # download.
+  lastAccountDownload: Date
+}
+
+type RequestDownloadLinkResponse implements Response {
+
+  # An array of errors relating to the mutation that occurred.
+  errors: [UserError!]
+}
+
+type DownloadUserResponse implements Response {
+
+  # archiveURL is the link that can be used within the next 1 hour to download a
+  # users archive.
+  archiveURL: String
+
+  # An array of errors relating to the mutation that occurred.
+  errors: [UserError!]
+}
+
+type RootMutation {
+
+  # requestDownloadLink will request a download link be sent to the primary
+  # users email address.
+  requestDownloadLink: RequestDownloadLinkResponse
+
+  # downloadUser will provide an account download for the indicated User. This
+  # mutation requires the ADMIN role.
+  downloadUser(id: ID!): DownloadUserResponse
+}

plugins/talk-plugin-profile-data/server/typeDefs.js

@@ -0,0 +1,7 @@
+const path = require('path');
+const fs = require('fs');
+
+module.exports = fs.readFileSync(
+  path.join(__dirname, 'typeDefs.graphql'),
+  'utf8'
+);

plugins/talk-plugin-profile-data/server/views/download.ejs

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title><%= t('download_landing.download_your_account') %></title>
+    <%- include(root + '/partials/account') %>
+  </head>
+  <body>
+    <div id="root">
+      <section class="container">
+        <h1><%= t('download_landing.download_your_account') %></h1>
+        <p><%= t('download_landing.download_details') %></p>
+        <p><%= t('download_landing.all_information_included') %></p>
+        <ul class="check_list">
+          <li><%= t('download_landing.information_included.date') %></li>
+          <li><%= t('download_landing.information_included.url') %></li>
+          <li><%= t('download_landing.information_included.body') %></li>
+          <li><%= t('download_landing.information_included.asset_url') %></li>
+        </ul>
+        <div class="error-console"><span></span></div>
+        <form id="download-form" method="post" action="<%= BASE_PATH %>api/v1/account/download">
+          <button type="submit"><%= t('download_landing.confirm') %></button>
+        </form>
+      </section>
+    </div>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
+    <script type="text/javascript">
+      $(function() {
+        function showError(error) {
+          try {
+            let err = JSON.parse(error);
+            $('.error-console span').text(err.message);
+            $('.error-console').fadeIn();
+          } catch (err) {
+            $('.error-console span').text(error);
+            $('.error-console').fadeIn();
+          }
+        }
+
+        var token = location.hash.replace('#', '');
+
+        $.ajax({
+          url: '<%= BASE_PATH %>api/v1/account/download',
+          contentType: 'application/json',
+          method: 'POST',
+          data: JSON.stringify({token: token, check: true})
+        })
+        .then(function () {
+          $('#download-form').append('<input name="token" type="hidden" value="' + token + '"/>').fadeIn();
+        })
+        .catch(function (error) {
+          showError(error.responseText);
+        });
+      });
+    </script>
+  </body>
+</html>

plugins/talk-plugin-profile-data/translations.yml

@@ -0,0 +1,18 @@
+en:
+  download_landing:
+    download_your_account: "Download Your Comment History"
+    download_details: "Your comment history will be downloaded into a .zip file. After your comment history is unzipped you will have a comma separated value (or .csv) file that you can easily import into your favorite spreadsheet application."
+    all_information_included: "For each of your comments the following information is included:"
+    information_included:
+      date: "When you wrote the comment"
+      url: "The permalink URL for the comment"
+      body: "The comment text"
+      asset_url: "The URL on the article or story where the comment appears"
+    confirm: "Download My Comment History"
+  email:
+    download:
+      subject: "Your comments are ready for download from {0}"
+      download_link_ready: "Click here to download your comments from {0} as of {1}:"
+      download_archive: "Download Archive"
+  error:
+    DOWNLOAD_TOKEN_INVALID: "Your download link is not valid."

plugins/talk-plugin-sort-most-liked/client/translations.yml

@@ -12,7 +12,7 @@ en:
     label: Most liked first
 es:
   talk-plugin-sort-most-liked:
-    label: Most liked first
+    label: Más valoradas primero
 fr:
   talk-plugin-sort-most-liked:
     label: Most liked first

plugins/talk-plugin-sort-most-loved/client/translations.yml

@@ -12,7 +12,7 @@ en:
     label: Most loved first
 es:
   talk-plugin-sort-most-loved:
-    label: Most loved first
+    label: Más amadas primero
 fr:
   talk-plugin-sort-most-loved:
     label: Most loved first

plugins/talk-plugin-sort-most-replied/client/translations.yml

@@ -12,7 +12,7 @@ en:
     label: Most replied first
 es:
   talk-plugin-sort-most-replied:
-    label: Most replied first
+    label: Más respondidas primero
 fr:
   talk-plugin-sort-most-replied:
     label: Most replied first

plugins/talk-plugin-sort-most-respected/client/translations.yml

@@ -12,7 +12,7 @@ en:
     label: Most liked first
 es:
   talk-plugin-sort-most-respected:
-    label: Most respected first
+    label: Más respetadas primero
 fr:
   talk-plugin-sort-most-respected:
     label: Most respected first

plugins/talk-plugin-sort-most-upvoted/client/translations.yml

@@ -1,3 +1,6 @@
 en:
   talk-plugin-sort-most-upvoted:
     label: Most upvoted first
+es:
+  talk-plugin-sort-oldest:
+    label: Más votadas primero

plugins/talk-plugin-sort-newest/client/translations.yml

@@ -12,7 +12,7 @@ en:
     label: Newest first
 es:
   talk-plugin-sort-newest:
-    label: Newest first
+    label: Más nuevas primero
 fr:
   talk-plugin-sort-newest:
     label: Newest first

plugins/talk-plugin-sort-oldest/client/translations.yml

@@ -12,7 +12,7 @@ en:
     label: Oldest first
 es:
   talk-plugin-sort-oldest:
-    label: Oldest first
+    label: Más viejas primero
 fr:
   talk-plugin-sort-oldest:
     label: Oldest first

plugins/talk-plugin-toxic-comments/server/__mocks__/perspective.js

@@ -0,0 +1,11 @@
+let values = {};
+
+const getScores = () => values.getScores;
+
+const isToxic = () => values.isToxic;
+
+const setValues = newValues => {
+  values = newValues;
+};
+
+module.exports = { getScores, isToxic, setValues };

plugins/talk-plugin-toxic-comments/server/errors.js

@@ -1,12 +1,16 @@
-const { APIError } = require('errors');
+const { TalkError } = require('errors');
 
 // ErrToxic is sent during a `CreateComment` mutation where
 // `input.checkToxicity` is set to true and the comment contains
 // toxic language as determined by the perspective service.
-const ErrToxic = new APIError('Comment is toxic', {
-  status: 400,
-  translation_key: 'COMMENT_IS_TOXIC',
-});
+class ErrToxic extends TalkError {
+  constructor() {
+    super('Comment is toxic', {
+      status: 400,
+      translation_key: 'COMMENT_IS_TOXIC',
+    });
+  }
+}
 
 module.exports = {
   ErrToxic,

plugins/talk-plugin-toxic-comments/server/hooks.js

@@ -1,11 +1,6 @@
 const { getScores, isToxic } = require('./perspective');
 const { ErrToxic } = require('./errors');
 
-// We don't add the hooks during _test_ as the perspective API is not available.
-if (process.env.NODE_ENV === 'test') {
-  return null;
-}
-
 module.exports = {
   RootMutation: {
     createComment: {
@@ -16,7 +11,7 @@ module.exports = {
           scores = await getScores(input.body);
         } catch (err) {
           // Warn and let mutation pass.
-          console.trace(err);
+          console.trace(err); // TODO: log/handle this differently?
           return;
         }
 
@@ -27,7 +22,7 @@ module.exports = {
 
         if (isToxic(scores)) {
           if (input.checkToxicity) {
-            throw ErrToxic;
+            throw new ErrToxic();
           }
 
           input.status = 'SYSTEM_WITHHELD';

plugins/talk-plugin-toxic-comments/server/hooks.spec.js

@@ -0,0 +1,31 @@
+const hooks = require('./hooks');
+const { ErrToxic } = require('./errors');
+
+// Mock out the perspective api call.
+jest.mock('./perspective');
+
+describe('talk-plugin-toxic-comments', () => {
+  describe('hooks', () => {
+    beforeEach(() => {
+      require('./perspective').setValues({ isToxic: true });
+    });
+
+    it('sets the correct values for a toxic comment', async () => {
+      let input = { body: 'This is a body.', checkToxicity: false };
+      await hooks.RootMutation.createComment.pre(null, { input }, null, null);
+      expect(input).toHaveProperty('status', 'SYSTEM_WITHHELD');
+    });
+
+    it('throws an error when a toxic comment is sent', async () => {
+      expect.assertions(1);
+      await expect(
+        hooks.RootMutation.createComment.pre(
+          null,
+          { input: { checkToxicity: true } },
+          null,
+          null
+        )
+      ).rejects.toBeInstanceOf(ErrToxic);
+    });
+  });
+});

plugins/talk-plugin-viewing-options/client/translations.yml

@@ -21,8 +21,8 @@ en:
 es:
   talk-plugin-viewing-options:
     viewing_options: "Opciones de visualización"
-    sort: Sorting
-    filter: Filtering
+    sort: Ordenado por
+    filter: Filtrado por
 fr:
   talk-plugin-viewing-options:
     viewing_options: "Viewing Options"