Merge pull request #1623 from coralproject/wyattjoh-patch-1

Bump to 4.4.1

.circleci/config.yml

@@ -1,12 +1,27 @@
+
+# job_environment will setup the environment for any job being executed.
+job_environment: &job_environment
+  NODE_ENV: test
+  DISABLE_CREATE_MONGO_INDEXES: TRUE
+
 # job_defaults applies all the defaults for each job.
 job_defaults: &job_defaults
   working_directory: ~/coralproject/talk
   docker:
     - image: circleci/node:8
+  environment:
+    <<: *job_environment
+
+# create_indexes will create the mongo indexes and wait until they have been
+# built.
+create_indexes: &create_indexes
+  run:
+    name: Create the database indexes and wait until they are built
+    command: ./bin/cli db createIndexes
 
 # integration_environment is the environment that configures the tests.
 integration_environment: &integration_environment
-  NODE_ENV: test
+  <<: *job_environment
   CIRCLE_TEST_REPORTS: /tmp/circleci-test-results
   E2E_MAX_RETRIES: 3
 
@@ -25,6 +40,7 @@ integration_job: &integration_job
     - checkout
     - attach_workspace:
         at: ~/coralproject/talk
+    - <<: *create_indexes
     - run:
         name: Setup the database with defaults
         command: ./bin/cli setup --defaults
@@ -117,6 +133,7 @@ jobs:
           environment:
             JEST_JUNIT_OUTPUT: /tmp/circleci-test-results/jest/test-results.xml
             JEST_REPORTER: jest-junit
+      - <<: *create_indexes
       - run:
           name: Run the server unit tests
           command: yarn test:server

.eslintrc.json

@@ -1,3 +1,6 @@
 {
+  "env": {
+    "jest": true
+  },
   "extends": "@coralproject/eslint-config-talk"
 }

.gitignore

@@ -6,6 +6,7 @@ npm-debug.log*
 dump.rdb
 
 client/coral-framework/graphql/introspection.json
+docs/source/_data/introspection.json
 
 .env
 *.cfg
@@ -37,6 +38,7 @@ plugins/*
 !plugins/talk-plugin-google-auth
 !plugins/talk-plugin-ignore-user
 !plugins/talk-plugin-like
+!plugins/talk-plugin-local-auth
 !plugins/talk-plugin-love
 !plugins/talk-plugin-member-since
 !plugins/talk-plugin-mod
@@ -49,9 +51,10 @@ plugins/*
 !plugins/talk-plugin-notifications-digest-hourly
 !plugins/talk-plugin-offtopic
 !plugins/talk-plugin-permalink
-!plugins/talk-plugin-profile-settings
+!plugins/talk-plugin-profile-data
 !plugins/talk-plugin-remember-sort
 !plugins/talk-plugin-respect
+!plugins/talk-plugin-rich-text
 !plugins/talk-plugin-slack-notifications
 !plugins/talk-plugin-sort-most-downvoted
 !plugins/talk-plugin-sort-most-liked
@@ -65,7 +68,6 @@ plugins/*
 !plugins/talk-plugin-toxic-comments
 !plugins/talk-plugin-upvote
 !plugins/talk-plugin-viewing-options
-!plugins/talk-plugin-rich-text
 
 **/node_modules/*
 yarn-error.log

.nsprc

@@ -2,6 +2,11 @@
   "exceptions": [
     "https://nodesecurity.io/advisories/531",
     "https://nodesecurity.io/advisories/532",
-    "https://nodesecurity.io/advisories/566"
+    "https://nodesecurity.io/advisories/566",
+    "https://nodesecurity.io/advisories/577",
+    "https://nodesecurity.io/advisories/594",
+    "https://nodesecurity.io/advisories/603",
+    "https://nodesecurity.io/advisories/611",
+    "https://nodesecurity.io/advisories/612"
   ]
 }

README.md

@@ -32,7 +32,7 @@ You’ve installed Talk on your server, and you’re preparing to launch it on y
 
 ## End-to-End Testing
 
-Talk uses [Nightwatch](https://nightwatchjs.org/) as our e2e testing framework. The testing infrastructure that allows us to run our tests in real browsers is provided with love by our friends at [Browserstack](https://browserstack.com).
+Talk uses [Nightwatch](http://nightwatchjs.org/) as our e2e testing framework. The testing infrastructure that allows us to run our tests in real browsers is provided with love by our friends at [Browserstack](https://browserstack.com).
 
 [![Browserstack](/public/img/browserstack_logo.png)](https://browserstack.com)
 

app.js

@@ -1,5 +1,6 @@
 const express = require('express');
-const morgan = require('morgan');
+const trace = require('./middleware/trace');
+const logging = require('./middleware/logging');
 const path = require('path');
 const merge = require('lodash/merge');
 const helmet = require('helmet');
@@ -12,6 +13,10 @@ const { ENABLE_TRACING, APOLLO_ENGINE_KEY, PORT } = require('./config');
 
 const app = express();
 
+// Add the trace middleware first, it will create a request ID for each request
+// downstream.
+app.use(trace);
+
 //==============================================================================
 // PLUGIN PRE APPLICATION MIDDLEWARE
 //==============================================================================
@@ -30,7 +35,7 @@ plugins.get('server', 'app').forEach(({ plugin, app: callback }) => {
 
 // Add the logging middleware only if we aren't testing.
 if (process.env.NODE_ENV !== 'test') {
-  app.use(morgan('dev'));
+  app.use(logging.log);
 }
 
 if (ENABLE_TRACING && APOLLO_ENGINE_KEY) {

bin/cli

@@ -1,16 +1,15 @@
 #!/usr/bin/env node
 
-/**
- * Module dependencies.
- */
-
-require('./util');
 const program = require('commander');
-const { head, map } = require('lodash');
-const Matcher = require('did-you-mean');
 
+// We're requiring this here so it'll setup some promise rejection hooks to log
+// out.
+require('./util');
+
+// Setup the program.
 program
   .command('serve', 'serve the application')
+  .command('db', 'run database commands')
   .command('settings', 'interact with the application settings')
   .command('assets', 'interact with assets')
   .command('setup', 'setup the application')
@@ -23,20 +22,3 @@ program
     'provides utilities for interacting with the plugin system'
   )
   .parse(process.argv);
-
-// If the command wasn't found, output help.
-const commands = map(program.commands, '_name');
-const command = head(program.args);
-if (!commands.includes(command)) {
-  const m = new Matcher(commands);
-  const similarCommands = m.list(command);
-
-  console.error(
-    `cli '${command}' is not a talk cli command. See 'cli --help'.`
-  );
-  if (similarCommands.length > 0) {
-    const sc = similarCommands.map(({ value }) => `\t${value}\n`).join('');
-    console.error(`\nThe most similar commands are\n${sc}`);
-  }
-  process.exit(1);
-}

bin/cli-assets

@@ -13,6 +13,7 @@ const CommentModel = require('../models/comment');
 const AssetsService = require('../services/assets');
 const mongoose = require('../services/mongoose');
 const scraper = require('../services/scraper');
+const Context = require('../graph/context');
 const inquirer = require('inquirer');
 const { URL } = require('url');
 
@@ -22,23 +23,33 @@ util.onshutdown([() => mongoose.disconnect()]);
 /**
  * Lists all the assets registered in the database.
  */
-async function listAssets() {
+async function listAssets(opts) {
   try {
     let assets = await AssetModel.find({}).sort({ created_at: 1 });
 
-    let table = new Table({
-      head: ['ID', 'Title', 'URL'],
-    });
+    switch (opts.format) {
+      case 'json': {
+        console.log(JSON.stringify(assets, null, 2));
+        break;
+      }
+      default: {
+        let table = new Table({
+          head: ['ID', 'Title', 'URL'],
+        });
 
-    assets.forEach(asset => {
-      table.push([
-        asset.id,
-        asset.title ? asset.title : '',
-        asset.url ? asset.url : '',
-      ]);
-    });
+        assets.forEach(asset => {
+          table.push([
+            asset.id,
+            asset.title ? asset.title : '',
+            asset.url ? asset.url : '',
+          ]);
+        });
+
+        console.log(table.toString());
+        break;
+      }
+    }
 
-    console.log(table.toString());
     util.shutdown();
   } catch (e) {
     console.error(e);
@@ -48,27 +59,45 @@ async function listAssets() {
 
 async function refreshAssets(ageString) {
   try {
-    const now = new Date().getTime();
-    const ageMs = parseDuration(ageString);
-    const age = new Date(now - ageMs);
+    const query = AssetModel.find({}, { id: 1 });
+    if (ageString) {
+      // An age was specified, so filter only those assets.
+      const ageMs = parseDuration(ageString);
+      const age = new Date(Date.now() - ageMs);
 
-    let assets = await AssetModel.find({
-      $or: [
-        {
-          scraped: {
-            $lte: age,
+      query.merge({
+        $or: [
+          {
+            scraped: {
+              $lte: age,
+            },
           },
-        },
-        {
-          scraped: null,
-        },
-      ],
-    });
+          {
+            scraped: null,
+          },
+        ],
+      });
+    }
+
+    // Create a graph context.
+    const ctx = Context.forSystem();
+
+    // Load the assets.
+    const cursor = query.cursor();
 
     // Queue all the assets for scraping.
-    await Promise.all(assets.map(scraper.create));
+    const promises = [];
+
+    let asset = await cursor.next();
+    while (asset) {
+      promises.push(scraper.create(ctx, asset.id));
+      asset = await cursor.next();
+    }
+
+    await Promise.all(promises);
+
+    console.log(`${promises.length} Assets were queued to be scraped.`);
 
-    console.log('Assets were queued to be scraped');
     util.shutdown();
   } catch (e) {
     console.error(e);
@@ -196,11 +225,17 @@ async function rewrite(search, replace, options) {
 
 program
   .command('list')
+  .option(
+    '--format <type>',
+    'Specify the output format [table]',
+    /^(table|json)$/i,
+    'table'
+  )
   .description('list all the assets in the database')
   .action(listAssets);
 
 program
-  .command('refresh <age>')
+  .command('refresh [age]')
   .description('queues the assets that exceed the age requested')
   .action(refreshAssets);
 

bin/cli-db

@@ -0,0 +1,53 @@
+#!/usr/bin/env node
+
+const util = require('./util');
+const program = require('commander');
+const config = require('../config');
+
+async function createIndexes() {
+  try {
+    // Ensure we enable the index creation.
+    config.CREATE_MONGO_INDEXES = true;
+
+    // TODO: handle the plugin index creation?
+
+    // Let's register the shutdown hooks.
+    util.onshutdown([() => require('../services/mongoose').disconnect()]);
+
+    // Lets create all the database indexes for the application and wait for all
+    // them to finish their indexing.
+    const models = [
+      require('../models/action'),
+      require('../models/asset'),
+      require('../models/comment'),
+      require('../models/setting'),
+      require('../models/user'),
+      require('../models/migration'),
+    ];
+
+    // Call the `.init()` method to setup all the indexes on each model.
+    // `init()` returns a promise that resolves when the indexes have finished
+    // building successfully. The `init()` function is idempotent, so we don't
+    // have to worry about triggering an index rebuild.
+    await Promise.all(models.map(Model => Model.init()));
+
+    console.log('Indexes created');
+    util.shutdown(0);
+  } catch (err) {
+    console.error(err);
+    util.shutdown(1);
+  }
+}
+
+program
+  .command('createIndexes')
+  .description('creates the database indexes and waits until they are created')
+  .action(createIndexes);
+
+program.parse(process.argv);
+
+// If there is no command listed, output help.
+if (process.argv.length <= 2) {
+  program.outputHelp();
+  util.shutdown();
+}

bin/cli-settings

@@ -4,7 +4,8 @@ const util = require('./util');
 const program = require('commander');
 const inquirer = require('inquirer');
 const mongoose = require('../services/mongoose');
-const SettingsService = require('../services/settings');
+const Settings = require('../services/settings');
+const cache = require('../services/cache');
 
 // Register the shutdown criteria.
 util.onshutdown([() => mongoose.disconnect()]);
@@ -14,9 +15,12 @@ util.onshutdown([() => mongoose.disconnect()]);
  */
 async function changeOrgName() {
   try {
-    let settings = await SettingsService.retrieve();
+    await cache.init();
 
-    let { organizationName } = await inquirer.prompt([
+    // Get the original settings.
+    const settings = await Settings.select('organizationName');
+
+    const { organizationName } = await inquirer.prompt([
       {
         name: 'organizationName',
         message: 'Organization Name',
@@ -25,9 +29,8 @@ async function changeOrgName() {
     ]);
 
     if (settings.organizationName !== organizationName) {
-      settings.organizationName = organizationName;
-
-      await SettingsService.update(settings);
+      // Set the organization name if there was a mutation to it.
+      await Settings.update({ organizationName });
 
       console.log('Settings were updated.');
     } else {
@@ -36,9 +39,9 @@ async function changeOrgName() {
   } catch (err) {
     console.error(err);
     util.shutdown(1);
+  } finally {
+    util.shutdown();
   }
-
-  util.shutdown();
 }
 
 //==============================================================================

bin/cli-setup

@@ -14,7 +14,7 @@ const SettingsService = require('../services/settings');
 const SetupService = require('../services/setup');
 const UsersService = require('../services/users');
 const MigrationService = require('../services/migration');
-const errors = require('../errors');
+const { ErrSettingsInit, ErrSettingsNotInit } = require('../errors');
 const Context = require('../graph/context');
 
 // Register the shutdown criteria.
@@ -41,13 +41,15 @@ const performSetup = async () => {
 
     // We should NOT have gotten a settings object, this means that the
     // application is already setup. Error out here.
-    throw errors.ErrSettingsInit;
-  } catch (e) {
+    throw new ErrSettingsInit();
+  } catch (err) {
     // If the error is `not init`, then we're good, otherwise, it's something
     // else.
-    if (e !== errors.ErrSettingsNotInit) {
-      throw e;
+    if (err instanceof ErrSettingsNotInit) {
+      return;
     }
+
+    throw err;
   }
 
   if (program.defaults) {

bin/cli-users

@@ -287,8 +287,15 @@ async function createUser() {
 
     const { email, username, password, role } = answers;
 
+    const ctx = Context.forSystem();
+
     // Create the user.
-    const user = await UsersService.createLocalUser(email, password, username);
+    const user = await UsersService.createLocalUser(
+      ctx,
+      email,
+      password,
+      username
+    );
 
     // Set the role.
     await UsersService.setRole(user.id, role);
@@ -321,7 +328,7 @@ program
   .action(searchUsers);
 
 program
-  .command('set-role <userID> <role>')
+  .command('set-role <userID>')
   .description('sets the role on a user')
   .action(setUserRole);
 

bin/util.js

@@ -4,7 +4,8 @@ require('../services/env');
 const debug = require('debug')('talk:util');
 const { uniq } = require('lodash');
 
-const util = (module.exports = {});
+// Setup the utilities.
+const util = {};
 
 /**
  * Stores an array of functions that should be executed in the event that the
@@ -15,7 +16,7 @@ util.toshutdown = [];
 
 /**
  * Calls all the shutdown functions and then ends the process.
- * @param  {Number} [defaultCode=0] default return code upon sucesfull shutdown.
+ * @param  {Number} [defaultCode=0] default return code upon successful shutdown.
  */
 util.shutdown = (defaultCode = 0, signal = null) => {
   if (signal) {
@@ -63,3 +64,5 @@ process.on('unhandledRejection', err => {
   console.error(err);
   process.exit(1);
 });
+
+module.exports = util;

client/coral-admin/src/AppRouter.js

@@ -2,10 +2,16 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Router, Route, IndexRedirect, IndexRoute } from 'react-router';
 
-import Configure from 'routes/Configure';
 import Install from 'routes/Install';
 import Stories from 'routes/Stories';
 import Community from 'routes/Community';
+
+import Configure from 'routes/Configure';
+import StreamSettings from './routes/Configure/containers/StreamSettings';
+import ModerationSettings from './routes/Configure/containers/ModerationSettings';
+import TechSettings from './routes/Configure/containers/TechSettings';
+import OrganizationSettings from './routes/Configure/containers/OrganizationSettings';
+
 import { ModerationLayout, Moderation } from 'routes/Moderation';
 
 import Layout from 'containers/Layout';
@@ -15,7 +21,15 @@ const routes = (
     <Route exact path="/admin/install" component={Install} />
     <Route path="/admin" component={Layout}>
       <IndexRedirect to="/admin/moderate" />
-      <Route path="configure" component={Configure} />
+
+      <Route path="configure" component={Configure}>
+        <Route path="stream" component={StreamSettings} />
+        <Route path="moderation" component={ModerationSettings} />
+        <Route path="tech" component={TechSettings} />
+        <Route path="organization" component={OrganizationSettings} />
+        <IndexRedirect to="stream" />
+      </Route>
+
       <Route path="stories" component={Stories} />
 
       {/* Community Routes */}

client/coral-admin/src/actions/configure.js

@@ -8,6 +8,10 @@ export const clearPending = () => {
   return { type: actions.CLEAR_PENDING };
 };
 
-export const setActiveSection = section => {
-  return { type: actions.SET_ACTIVE_SECTION, section };
+export const showSaveDialog = () => {
+  return { type: actions.SHOW_SAVE_DIALOG };
+};
+
+export const hideSaveDialog = () => {
+  return { type: actions.HIDE_SAVE_DIALOG };
 };

client/coral-admin/src/actions/moderation.js

@@ -5,14 +5,7 @@ export const singleView = () => ({ type: actions.SINGLE_VIEW });
 
 // hide shortcuts note
 export const hideShortcutsNote = () => (dispatch, _, { localStorage }) => {
-  try {
-    if (localStorage) {
-      localStorage.setItem('coral:shortcutsNote', 'hide');
-    }
-  } catch (e) {
-    // above will fail in Safari private mode
-  }
-
+  localStorage.setItem('coral:shortcutsNote', 'hide');
   dispatch({ type: actions.HIDE_SHORTCUTS_NOTE });
 };
 

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

@@ -0,0 +1,11 @@
+:global {
+  html, body, #root, #root > div {
+    min-height: 100%;
+  }
+
+  body {
+    margin: 0;
+    background-color: #FAFAFA;
+    font-family: 'Roboto', sans-serif;
+  }
+}

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import ToastContainer from './ToastContainer';
+import './App.css';
 import 'material-design-lite';
 
 import AppRouter from '../AppRouter';

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,9 @@
+import React from 'react';
+import styles from './CommentDeletedTombstone.css';
+import t from 'coral-framework/services/i18n';
+
+const CommentDeletedTombstone = () => (
+  <div className={styles.tombstone}>{t('framework.comment_is_deleted')}</div>
+);
+
+export default CommentDeletedTombstone;

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

@@ -7,7 +7,6 @@ import styles from './Header.css';
 import t from 'coral-framework/services/i18n';
 import { Logo } from './Logo';
 import { can } from 'coral-framework/services/perms';
-import ModerationIndicator from '../routes/Moderation/containers/Indicator';
 import CommunityIndicator from '../routes/Community/containers/Indicator';
 
 const CoralHeader = ({
@@ -32,7 +31,6 @@ const CoralHeader = ({
                   activeClassName={styles.active}
                 >
                   {t('configure.moderate')}
-                  <ModerationIndicator root={root} data={data} />
                 </IndexLink>
               )}
               <Link

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

@@ -1,10 +1,8 @@
 .indicator {
+  display: inline-block;
   background-color: #E46D59;
   border-radius: 10px;
-  position: absolute;
-  top: 50%;
   width: 7px;
   height: 7px;
-  margin-top: -4px;
   margin-left: 7px;
 }

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

@@ -3,7 +3,7 @@ import cn from 'classnames';
 import PropTypes from 'prop-types';
 import capitalize from 'lodash/capitalize';
 import styles from './UserDetail.css';
-import AccountHistory from './AccountHistory';
+import UserHistory from './UserHistory';
 import { Slot } from 'coral-framework/components';
 import UserDetailCommentList from '../components/UserDetailCommentList';
 import {
@@ -28,26 +28,6 @@ import UserInfoTooltip from './UserInfoTooltip';
 import t from 'coral-framework/services/i18n';
 
 class UserDetail extends React.Component {
-  rejectThenReload = async info => {
-    await this.props.rejectComment(info);
-    this.props.data.refetch();
-  };
-
-  acceptThenReload = async info => {
-    await this.props.acceptComment(info);
-    this.props.data.refetch();
-  };
-
-  bulkAcceptThenReload = async () => {
-    await this.props.bulkAccept();
-    this.props.data.refetch();
-  };
-
-  bulkRejectThenReload = async () => {
-    await this.props.bulkReject();
-    this.props.data.refetch();
-  };
-
   changeTab = tab => {
     this.props.changeTab(tab);
   };
@@ -110,6 +90,10 @@ class UserDetail extends React.Component {
       unbanUser,
       unsuspendUser,
       modal,
+      acceptComment,
+      rejectComment,
+      bulkAccept,
+      bulkReject,
     } = this.props;
 
     // if totalComments is 0, you're dividing by zero
@@ -286,7 +270,7 @@ class UserDetail extends React.Component {
                 'talk-admin-user-detail-history-tab'
               )}
             >
-              {t('user_detail.account_history')}
+              {t('user_detail.user_history')}
             </Tab>
           </TabBar>
 
@@ -304,12 +288,12 @@ class UserDetail extends React.Component {
                 loadMore={loadMore}
                 toggleSelect={toggleSelect}
                 viewUserDetail={viewUserDetail}
-                acceptComment={this.acceptThenReload}
-                rejectComment={this.rejectThenReload}
+                acceptComment={acceptComment}
+                rejectComment={rejectComment}
                 selectedCommentIds={selectedCommentIds}
                 toggleSelectAll={toggleSelectAll}
-                bulkAcceptThenReload={this.bulkAcceptThenReload}
-                bulkRejectThenReload={this.bulkRejectThenReload}
+                bulkAcceptThenReload={bulkAccept}
+                bulkRejectThenReload={bulkReject}
               />
             </TabPane>
             <TabPane
@@ -322,19 +306,19 @@ class UserDetail extends React.Component {
                 loadMore={loadMore}
                 toggleSelect={toggleSelect}
                 viewUserDetail={viewUserDetail}
-                acceptComment={this.acceptThenReload}
-                rejectComment={this.rejectThenReload}
+                acceptComment={acceptComment}
+                rejectComment={rejectComment}
                 selectedCommentIds={selectedCommentIds}
                 toggleSelectAll={toggleSelectAll}
-                bulkAcceptThenReload={this.bulkAcceptThenReload}
-                bulkRejectThenReload={this.bulkRejectThenReload}
+                bulkAcceptThenReload={bulkAccept}
+                bulkRejectThenReload={bulkReject}
               />
             </TabPane>
             <TabPane
               tabId={'history'}
               className={'talk-admin-user-detail-history-tab-pane'}
             >
-              <AccountHistory user={user} />
+              <UserHistory user={user} />
             </TabPane>
           </TabContent>
         </Drawer>

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';
 
@@ -43,6 +44,19 @@ class UserDetailComment extends React.Component {
       body: comment.body,
     };
 
+    if (!comment.body) {
+      return (
+        <li
+          tabIndex={0}
+          className={cn(className, styles.root, {
+            [styles.rootSelected]: selected,
+          })}
+        >
+          <CommentDeletedTombstone />
+        </li>
+      );
+    }
+
     return (
       <li
         tabIndex={0}
@@ -152,7 +166,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/components/UserHistory.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { murmur3 } from 'murmurhash-js';
-import styles from './AccountHistory.css';
+import styles from './UserHistory.css';
 import cn from 'classnames';
 import flatten from 'lodash/flatten';
 import orderBy from 'lodash/orderBy';
@@ -43,15 +43,15 @@ const readableDuration = (startDate, endDate) => {
 const buildActionResponse = (typename, created_at, until, status) => {
   switch (typename) {
     case 'UsernameStatusHistory':
-      return t('account_history.username_status', status);
+      return t('user_history.username_status', status);
     case 'BannedStatusHistory':
       return status
-        ? t('account_history.user_banned')
-        : t('account_history.ban_removed');
+        ? t('user_history.user_banned')
+        : t('user_history.ban_removed');
     case 'SuspensionStatusHistory':
       return until
-        ? t('account_history.suspended', readableDuration(created_at, until))
-        : t('account_history.suspension_removed');
+        ? t('user_history.suspended', readableDuration(created_at, until))
+        : t('user_history.suspension_removed');
     default:
       return '-';
   }
@@ -62,43 +62,41 @@ const getModerationValue = assignedBy =>
     assignedBy.username
   ) : (
     <span>
-      <Icon name="computer" /> {t('account_history.system')}
+      <Icon name="computer" /> {t('user_history.system')}
     </span>
   );
 
-class AccountHistory extends React.Component {
+class UserHistory extends React.Component {
   render() {
     const { user } = this.props;
     const userHistory = buildUserHistory(user.state);
     return (
       <div>
-        <div className={cn(styles.table, 'talk-admin-account-history')}>
+        <div className={cn(styles.table, 'talk-admin-user-history')}>
           <div
             className={cn(
               styles.headerRow,
-              'talk-admin-account-history-header-row'
+              'talk-admin-user-history-header-row'
             )}
           >
+            <div className={styles.headerRowItem}>{t('user_history.date')}</div>
             <div className={styles.headerRowItem}>
-              {t('account_history.date')}
+              {t('user_history.action')}
             </div>
             <div className={styles.headerRowItem}>
-              {t('account_history.action')}
-            </div>
-            <div className={styles.headerRowItem}>
-              {t('account_history.taken_by')}
+              {t('user_history.taken_by')}
             </div>
           </div>
           {userHistory.map(
             ({ __typename, created_at, assigned_by, until, status }) => (
               <div
-                className={cn(styles.row, 'talk-admin-account-history-row')}
+                className={cn(styles.row, 'talk-admin-user-history-row')}
                 key={`${__typename}_${murmur3(created_at)}`}
               >
                 <div
                   className={cn(
                     styles.item,
-                    'talk-admin-account-history-row-date'
+                    'talk-admin-user-history-row-date'
                   )}
                 >
                   {moment(new Date(created_at)).format('MMM DD, YYYY')}
@@ -107,7 +105,7 @@ class AccountHistory extends React.Component {
                   className={cn(
                     styles.item,
                     styles.action,
-                    'talk-admin-account-history-row-status'
+                    'talk-admin-user-history-row-status'
                   )}
                 >
                   {buildActionResponse(__typename, created_at, until, status)}
@@ -116,7 +114,7 @@ class AccountHistory extends React.Component {
                   className={cn(
                     styles.item,
                     styles.username,
-                    'talk-admin-account-history-row-assigned-by'
+                    'talk-admin-user-history-row-assigned-by'
                   )}
                 >
                   {getModerationValue(assigned_by)}
@@ -130,8 +128,8 @@ class AccountHistory extends React.Component {
   }
 }
 
-AccountHistory.propTypes = {
+UserHistory.propTypes = {
   user: PropTypes.object.isRequired,
 };
 
-export default AccountHistory;
+export default UserHistory;

client/coral-admin/src/constants/configure.js

@@ -2,4 +2,6 @@ const prefix = 'TALK_ADMIN_CONFIGURE';
 
 export const UPDATE_PENDING = `${prefix}_UPDATE_PENDING`;
 export const CLEAR_PENDING = `${prefix}_CLEAR_PENDING`;
-export const SET_ACTIVE_SECTION = `${prefix}_SET_ACTIVE_SECTION`;
+
+export const SHOW_SAVE_DIALOG = `${prefix}_SHOW_SAVE_DIALOG`;
+export const HIDE_SAVE_DIALOG = `${prefix}_HIDE_SAVE_DIALOG`;

client/coral-admin/src/containers/Header.js

@@ -2,21 +2,20 @@ import { gql } from 'react-apollo';
 import withQuery from 'coral-framework/hocs/withQuery';
 import Header from '../components/Header';
 import CommunityIndicator from '../routes/Community/containers/Indicator';
-import ModerationIndicator from '../routes/Moderation/containers/Indicator';
+// TODO: eventually we will readd modqueue counts
+// import ModerationIndicator from '../routes/Moderation/containers/Indicator';
 import { getDefinitionName } from 'coral-framework/utils';
 
 export default withQuery(
   gql`
-    query TalkAdmin_Header($nullID: ID) {
-      ...${getDefinitionName(ModerationIndicator.fragments.root)}
+    query TalkAdmin_Header {
       ...${getDefinitionName(CommunityIndicator.fragments.root)}
     }
-    ${ModerationIndicator.fragments.root}
     ${CommunityIndicator.fragments.root}
   `,
   {
     options: {
-      variables: { nullID: null },
+      // variables: { nullID: null },
     },
   }
 )(Header);

client/coral-admin/src/containers/UserDetail.js

@@ -148,6 +148,7 @@ UserDetailContainer.propTypes = {
   selectedCommentIds: PropTypes.array,
   unbanUser: PropTypes.func.isRequired,
   unsuspendUser: PropTypes.func.isRequired,
+  userId: PropTypes.string,
 };
 
 const LOAD_MORE_QUERY = gql`
@@ -245,7 +246,6 @@ export const withUserDetailQuery = withQuery(
     options: ({ userId, statuses }) => {
       return {
         variables: { author_id: userId, statuses },
-        fetchPolicy: 'network-only',
       };
     },
     skip: ownProps => !ownProps.userId,

client/coral-admin/src/graphql/index.js

@@ -291,5 +291,36 @@ export default {
         },
       },
     }),
+    SetCommentStatus: ({ variables: { status } }) => ({
+      updateQueries: {
+        CoralAdmin_UserDetail: prev => {
+          const increment = {
+            rejectedComments: {
+              $apply: count => (count < prev.totalComments ? count + 1 : count),
+            },
+          };
+
+          const decrement = {
+            rejectedComments: {
+              $apply: count => (count > 0 ? count - 1 : 0),
+            },
+          };
+
+          // If rejected then increment rejectedComments by one
+          if (status === 'REJECTED') {
+            const updated = update(prev, increment);
+            return updated;
+          }
+
+          // If approved then decrement rejectedComments by one
+          if (status === 'ACCEPTED') {
+            const updated = update(prev, decrement);
+            return updated;
+          }
+
+          return prev;
+        },
+      },
+    }),
   },
 };

client/coral-admin/src/index.js

@@ -15,7 +15,8 @@ import { hideShortcutsNote } from './actions/moderation';
 smoothscroll.polyfill();
 
 function init({ store, localStorage }) {
-  if (localStorage && localStorage.getItem('coral:shortcutsNote') === 'hide') {
+  const shouldHide = localStorage.getItem('coral:shortcutsNote') === 'hide';
+  if (shouldHide) {
     store.dispatch(hideShortcutsNote());
   }
 }

client/coral-admin/src/reducers/configure.js

@@ -6,11 +6,23 @@ const initialState = {
   canSave: false,
   pending: {},
   errors: {},
-  activeSection: 'stream',
+  saveDialog: false,
 };
 
 export default function configure(state = initialState, action) {
   switch (action.type) {
+    case actions.SHOW_SAVE_DIALOG: {
+      return {
+        ...state,
+        saveDialog: true,
+      };
+    }
+    case actions.HIDE_SAVE_DIALOG: {
+      return {
+        ...state,
+        saveDialog: false,
+      };
+    }
     case actions.UPDATE_PENDING: {
       let next = state;
       if (action.updater) {
@@ -40,11 +52,8 @@ export default function configure(state = initialState, action) {
         pending: {},
         canSave: false,
       };
-    case actions.SET_ACTIVE_SECTION:
-      return {
-        ...state,
-        activeSection: action.section,
-      };
+    default:
+      return state;
   }
   return state;
 }

client/coral-admin/src/reducers/install.js

@@ -5,6 +5,7 @@ const initialState = {
   isLoading: false,
   data: {
     settings: {
+      organizationContactEmail: '',
       organizationName: '',
       domains: {
         whitelist: [],
@@ -19,6 +20,7 @@ const initialState = {
   },
   errors: {
     organizationName: '',
+    organizationContactEmail: '',
     username: '',
     email: '',
     password: '',

client/coral-admin/src/routes/Configure/components/Configure.js

@@ -1,50 +1,47 @@
-import React, { Component } from 'react';
-
-import { Button, List, Item } from 'coral-ui';
-import styles from './Configure.css';
-import StreamSettings from '../containers/StreamSettings';
-import ModerationSettings from '../containers/ModerationSettings';
-import TechSettings from '../containers/TechSettings';
-import t from 'coral-framework/services/i18n';
-import { can } from 'coral-framework/services/perms';
+import React from 'react';
 import PropTypes from 'prop-types';
+import t from 'coral-framework/services/i18n';
+import { Button, List, Item } from 'coral-ui';
+import { can } from 'coral-framework/services/perms';
+import styles from './Configure.css';
+import SaveChangesDialog from './SaveChangesDialog';
 
-export default class Configure extends Component {
-  getSectionComponent(section) {
-    switch (section) {
-      case 'stream':
-        return StreamSettings;
-      case 'moderation':
-        return ModerationSettings;
-      case 'tech':
-        return TechSettings;
-    }
-    throw new Error(`Unknown section ${section}`);
-  }
-
+class Configure extends React.Component {
   render() {
     const {
-      currentUser,
       canSave,
+      currentUser,
+      root,
       savePending,
-      setActiveSection,
-      activeSection,
+      settings,
+      clearPending,
     } = this.props;
-    const SectionComponent = this.getSectionComponent(activeSection);
 
     if (!can(currentUser, 'UPDATE_CONFIG')) {
-      return (
-        <p>
-          You must be an administrator to access config settings. Please find
-          the nearest Admin and ask them to level you up!
-        </p>
-      );
+      return <p>{t('configure.access_message')}</p>;
     }
 
+    const passProps = {
+      root,
+      settings,
+      savePending,
+      clearPending,
+      canSave,
+    };
+
     return (
       <div className={styles.container}>
+        <SaveChangesDialog
+          saveDialog={this.props.saveDialog}
+          hideSaveDialog={this.props.hideSaveDialog}
+          saveChanges={this.props.saveChanges}
+          discardChanges={this.props.discardChanges}
+        />
         <div className={styles.leftColumn}>
-          <List onChange={setActiveSection} activeItem={activeSection}>
+          <List
+            onChange={this.props.handleSectionChange}
+            activeItem={this.props.activeSection}
+          >
             <Item itemId="stream" icon="speaker_notes">
               {t('configure.stream_settings')}
             </Item>
@@ -54,6 +51,9 @@ export default class Configure extends Component {
             <Item itemId="tech" icon="code">
               {t('configure.tech_settings')}
             </Item>
+            <Item itemId="organization" icon="people">
+              {t('configure.organization_information')}
+            </Item>
           </List>
           <div className={styles.saveBox}>
             {canSave ? (
@@ -74,10 +74,7 @@ export default class Configure extends Component {
           </div>
         </div>
         <div className={styles.mainContent}>
-          <SectionComponent
-            root={this.props.root}
-            settings={this.props.settings}
-          />
+          {React.cloneElement(this.props.children, passProps)}
         </div>
       </div>
     );
@@ -86,10 +83,18 @@ export default class Configure extends Component {
 
 Configure.propTypes = {
   savePending: PropTypes.func.isRequired,
+  saveChanges: PropTypes.func.isRequired,
+  discardChanges: PropTypes.func.isRequired,
   currentUser: PropTypes.object.isRequired,
   root: PropTypes.object.isRequired,
   settings: PropTypes.object.isRequired,
   canSave: PropTypes.bool.isRequired,
-  setActiveSection: PropTypes.func.isRequired,
+  handleSectionChange: PropTypes.func.isRequired,
   activeSection: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
+  saveDialog: PropTypes.bool,
+  hideSaveDialog: PropTypes.func.isRequired,
+  clearPending: PropTypes.func.isRequired,
 };
+
+export default Configure;

client/coral-admin/src/routes/Configure/components/OrganizationSettings.css

@@ -0,0 +1,87 @@
+.label {
+  display: block;
+}
+
+.detailList {
+  padding: 0;
+  margin: 0;
+}
+
+.detailLabel {
+  color: #000;
+  font-size: 1.1em;
+  font-weight: bold;
+  display: block;
+  margin-bottom: 4px;
+}
+
+.detailValue {
+  padding: 6px 0;
+  border: solid 1px transparent;
+  display: block;
+  font-size: 1.1em;
+  border-radius: 2px;
+  color: #424242;
+  box-sizing: border-box;
+  min-width: 300px;
+}
+
+.editable {
+  padding-left: 10px;
+  padding-right: 10px;
+  border-color: grey;
+}
+
+.detailItem {
+  margin-bottom: 16px;
+  list-style: none;
+}
+
+.button, .button:disabled {
+  background: white;
+  border: solid 1px grey;
+}
+
+.actionBox {
+  flex-grow: 0;
+}
+
+.cancelButton {
+  padding: 10px;
+  display: block;
+  color: #4f5c67;
+  font-weight: 500;
+  
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.changedSave {
+  background-color: #00796B;
+  color: white;
+}
+
+.errorList {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.errorItem {
+  padding: 5px 10px;
+  margin-bottom: 20px;
+  color: #b71c1c;
+  border-radius: 2px;
+  display: inline-block;
+  background: #F9D3CE;
+}
+
+.container {
+  display: flex;
+}
+
+.content {
+  flex-grow: 1;
+  padding-right: 40px;
+}

client/coral-admin/src/routes/Configure/components/OrganizationSettings.js

@@ -0,0 +1,185 @@
+import React from 'react';
+import cn from 'classnames';
+import { Button } from 'coral-ui';
+import PropTypes from 'prop-types';
+import styles from './OrganizationSettings.css';
+import Slot from 'coral-framework/components/Slot';
+import t from 'coral-framework/services/i18n';
+import ConfigurePage from './ConfigurePage';
+import ConfigureCard from 'coral-framework/components/ConfigureCard';
+import validate from 'coral-framework/helpers/validate';
+import errorMsj from 'coral-framework/helpers/error';
+
+class OrganizationSettings extends React.Component {
+  state = { editing: false, errors: [] };
+
+  addError = err => {
+    if (this.state.errors.indexOf(err) === -1) {
+      this.setState(({ errors }) => ({
+        errors: errors.concat(err),
+      }));
+    }
+  };
+
+  removeError = err => {
+    this.setState(({ errors }) => ({
+      errors: errors.filter(i => i !== err),
+    }));
+  };
+
+  toggleEditing = () => {
+    this.setState(({ editing }) => ({
+      editing: !editing,
+    }));
+  };
+
+  disableEditing = () => {
+    this.setState(() => ({
+      editing: false,
+    }));
+  };
+
+  updateName = event => {
+    const updater = { organizationName: { $set: event.target.value } };
+    this.props.updatePending({ updater });
+  };
+
+  updateEmail = event => {
+    let error = null;
+    const email = event.target.value;
+
+    // Add a blocker error
+    if (!validate.email(email)) {
+      error = true;
+      this.addError('email');
+    } else {
+      this.removeError('email');
+    }
+
+    const updater = { organizationContactEmail: { $set: email } };
+    const errorUpdater = { organizationContactEmail: { $set: error } };
+
+    this.props.updatePending({ updater, errorUpdater });
+  };
+
+  cancelEditing = () => {
+    this.disableEditing();
+    this.props.clearPending();
+  };
+
+  save = async () => {
+    await this.props.savePending();
+    this.disableEditing();
+  };
+  displayErrors = (errors = []) => (
+    <ul className={styles.errorList}>
+      {errors.map((errKey, i) => (
+        <li key={`${i}_${errKey}`} className={styles.errorItem}>
+          {errorMsj[errKey]}
+        </li>
+      ))}
+    </ul>
+  );
+
+  render() {
+    const { settings, slotPassthrough, canSave } = this.props;
+    const hasErrors = this.state.errors.length;
+    return (
+      <ConfigurePage title={t('configure.organization_information')}>
+        <p>{t('configure.organization_info_copy')}</p>
+        <p>{t('configure.organization_info_copy_2')}</p>
+        <ConfigureCard>
+          <div className={styles.container}>
+            <div className={styles.content}>
+              {this.displayErrors(this.state.errors)}
+              <ul className={styles.detailList}>
+                <li className={styles.detailItem}>
+                  <label
+                    className={styles.detailLabel}
+                    id={t('configure.organization_name')}
+                  >
+                    {t('configure.organization_name')}
+                  </label>
+                  <input
+                    type="text"
+                    className={cn(styles.detailValue, {
+                      [styles.editable]: this.state.editing,
+                    })}
+                    onChange={this.updateName}
+                    value={settings.organizationName}
+                    id={t('configure.organization_name')}
+                    readOnly={!this.state.editing}
+                  />
+                </li>
+                <li className={styles.detailItem}>
+                  <label
+                    className={styles.detailLabel}
+                    id={t('configure.organization_contact_email')}
+                  >
+                    {t('configure.organization_contact_email')}
+                  </label>
+                  <input
+                    type="text"
+                    className={cn(styles.detailValue, {
+                      [styles.editable]: this.state.editing,
+                    })}
+                    onChange={this.updateEmail}
+                    value={settings.organizationContactEmail || ''}
+                    id={t('configure.organization_contact_email')}
+                    readOnly={!this.state.editing}
+                  />
+                </li>
+              </ul>
+            </div>
+            {!this.state.editing ? (
+              <div className={styles.actionBox}>
+                <Button
+                  className={styles.button}
+                  icon="settings"
+                  onClick={this.toggleEditing}
+                  full
+                >
+                  {t('configure.edit_info')}
+                </Button>
+              </div>
+            ) : (
+              <div className={styles.actionBox}>
+                {canSave && !hasErrors ? (
+                  <Button
+                    raised
+                    onClick={this.save}
+                    className={styles.changedSave}
+                    icon="check"
+                    full
+                  >
+                    {t('configure.save')}
+                  </Button>
+                ) : (
+                  <Button className={styles.button} disabled icon="check" full>
+                    {t('configure.save')}
+                  </Button>
+                )}
+                <a className={styles.cancelButton} onClick={this.cancelEditing}>
+                  {t('cancel')}
+                </a>
+              </div>
+            )}
+          </div>
+        </ConfigureCard>
+        <Slot fill="adminOrganizationSettings" passthrough={slotPassthrough} />
+      </ConfigurePage>
+    );
+  }
+}
+
+OrganizationSettings.propTypes = {
+  savePending: PropTypes.func.isRequired,
+  clearPending: PropTypes.func.isRequired,
+  updatePending: PropTypes.func.isRequired,
+  errors: PropTypes.object.isRequired,
+  settings: PropTypes.object.isRequired,
+  slotPassthrough: PropTypes.object.isRequired,
+  canSave: PropTypes.bool.isRequired,
+};
+
+export default OrganizationSettings;

client/coral-admin/src/routes/Configure/components/SaveChangesDialog.css

@@ -0,0 +1,40 @@
+.buttonActions {
+  padding-top: 15px;
+  text-align: right;
+}
+
+.dialog {
+  padding: 25px;
+  min-width: 400px;
+}
+
+.close {
+  font-size: 20px;
+  line-height: 14px;
+  top: 10px;
+  right: 10px;
+  position: absolute;
+  display: block;
+  font-weight: bold;
+  color: #363636;
+  cursor: pointer;
+}
+
+.title {
+  font-size: 18px;
+  font-weight: 800;
+  margin-bottom: 20px;
+}
+
+.cancel {
+  color: #363636;
+  margin-right: 15px;
+  display: inline-block;
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.button {
+  margin-left: 5px;
+}

client/coral-admin/src/routes/Configure/components/SaveChangesDialog.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'classnames';
+import { Button, Dialog } from 'coral-ui';
+import styles from './SaveChangesDialog.css';
+import t from 'coral-framework/services/i18n';
+
+const SaveChangesDialog = ({
+  saveDialog,
+  hideSaveDialog,
+  saveChanges,
+  discardChanges,
+}) => (
+  <Dialog
+    className={cn(styles.dialog, 'talk-admin-configure-save-dialog')}
+    id="saveDialog"
+    open={saveDialog}
+    onCancel={hideSaveDialog}
+  >
+    <span className={styles.close} onClick={hideSaveDialog}>
+      ×
+    </span>
+    <div className={styles.title}>
+      {t('configure.save_changes_dialog.unsaved_changes')}
+    </div>
+    {t('configure.save_changes_dialog.copy')}
+    <div
+      className={cn(
+        styles.buttonActions,
+        'talk-admin-configure-save-dialog-button-actions'
+      )}
+    >
+      <a className={styles.cancel} onClick={hideSaveDialog}>
+        Cancel
+      </a>
+      <Button onClick={discardChanges} className={styles.button}>
+        {t('configure.save_changes_dialog.discard')}
+      </Button>
+      <Button onClick={saveChanges} cStyle="green" className={styles.button}>
+        {t('configure.save_changes_dialog.save_settings')}
+      </Button>
+    </div>
+  </Dialog>
+);
+
+SaveChangesDialog.propTypes = {
+  saveDialog: PropTypes.bool.isRequired,
+  hideSaveDialog: PropTypes.func.isRequired,
+  saveChanges: PropTypes.func.isRequired,
+  discardChanges: PropTypes.func.isRequired,
+};
+
+export default SaveChangesDialog;

client/coral-admin/src/routes/Configure/containers/Configure.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { compose, gql } from 'react-apollo';
@@ -10,15 +10,87 @@ import { getDefinitionName } from 'coral-framework/utils';
 import StreamSettings from './StreamSettings';
 import TechSettings from './TechSettings';
 import ModerationSettings from './ModerationSettings';
-import { clearPending, setActiveSection } from '../../../actions/configure';
+import {
+  clearPending,
+  showSaveDialog,
+  hideSaveDialog,
+} from '../../../actions/configure';
 import Configure from '../components/Configure';
+import OrganizationSettings from './OrganizationSettings';
+import { withRouter } from 'react-router';
+
+class ConfigureContainer extends React.Component {
+  nextRoute = '';
+  unregisterLeaveHook = null;
 
-class ConfigureContainer extends Component {
   savePending = async () => {
     await this.props.updateSettings(this.props.pending);
     this.props.clearPending();
   };
 
+  saveChanges = async () => {
+    await this.savePending();
+    this.props.hideSaveDialog();
+    this.gotoNextRoute();
+  };
+
+  discardChanges = async () => {
+    await this.props.clearPending();
+    this.props.hideSaveDialog();
+    this.gotoNextRoute();
+  };
+
+  gotoNextRoute = () => {
+    if (this.nextRoute) {
+      this.props.router.push(this.nextRoute);
+      this.nextRoute = '';
+    }
+  };
+
+  handleSectionChange = async section => {
+    const nextRoute = `/admin/configure/${section}`;
+    if (this.hasPendingData()) {
+      this.nextRoute = nextRoute;
+      this.props.showSaveDialog();
+    } else {
+      // Just go to the section
+      this.props.router.push(nextRoute);
+    }
+  };
+
+  navigationPrompt = e => {
+    if (this.hasPendingData()) {
+      const confirmationMessage = 'Changes that you made may not be saved.';
+      e.returnValue = confirmationMessage; // Gecko, Trident, Chrome 34+
+      return confirmationMessage; // Gecko, WebKit, Chrome <34
+    }
+  };
+
+  hasPendingData = () => {
+    return !!Object.keys(this.props.pending).length;
+  };
+
+  routeLeave = ({ pathname }) => {
+    if (this.hasPendingData()) {
+      this.nextRoute = pathname;
+      this.props.showSaveDialog();
+      return false;
+    }
+  };
+
+  componentDidMount() {
+    this.unregisterLeaveHook = this.props.router.setRouteLeaveHook(
+      this.props.route,
+      this.routeLeave
+    );
+    window.addEventListener('beforeunload', this.navigationPrompt);
+  }
+
+  componentWillUnmount() {
+    this.unregisterLeaveHook();
+    window.removeEventListener('beforeunload', this.navigationPrompt);
+  }
+
   render() {
     if (this.props.data.error) {
       return <div>{this.props.data.error.message}</div>;
@@ -28,16 +100,25 @@ class ConfigureContainer extends Component {
       return <Spinner />;
     }
 
+    const activeSection = this.props.routes[3].path;
+
     return (
       <Configure
+        saveChanges={this.saveChanges}
+        discardChanges={this.discardChanges}
+        saveDialog={this.props.saveDialog}
+        activeSection={activeSection}
+        hideSaveDialog={this.props.hideSaveDialog}
+        canSave={this.props.canSave}
         currentUser={this.props.currentUser}
         root={this.props.root}
         settings={this.props.mergedSettings}
-        canSave={this.props.canSave}
+        handleSectionChange={this.handleSectionChange}
+        clearPending={this.props.clearPending}
         savePending={this.savePending}
-        setActiveSection={this.props.setActiveSection}
-        activeSection={this.props.activeSection}
-      />
+      >
+        {this.props.children}
+      </Configure>
     );
   }
 }
@@ -49,10 +130,12 @@ const withConfigureQuery = withQuery(
       ...${getDefinitionName(StreamSettings.fragments.settings)}
       ...${getDefinitionName(TechSettings.fragments.settings)}
       ...${getDefinitionName(ModerationSettings.fragments.settings)}
+      ...${getDefinitionName(OrganizationSettings.fragments.settings)}
     }
     ...${getDefinitionName(StreamSettings.fragments.root)}
     ...${getDefinitionName(TechSettings.fragments.root)}
     ...${getDefinitionName(ModerationSettings.fragments.root)}
+    ...${getDefinitionName(OrganizationSettings.fragments.root)}
   }
   ${StreamSettings.fragments.root}
   ${StreamSettings.fragments.settings}
@@ -60,6 +143,8 @@ const withConfigureQuery = withQuery(
   ${TechSettings.fragments.settings}
   ${ModerationSettings.fragments.root}
   ${ModerationSettings.fragments.settings}
+  ${OrganizationSettings.fragments.root}
+  ${OrganizationSettings.fragments.settings}
   `,
   {
     options: () => ({
@@ -74,18 +159,21 @@ const mapStateToProps = state => ({
   pending: state.configure.pending,
   canSave: state.configure.canSave,
   activeSection: state.configure.activeSection,
+  saveDialog: state.configure.saveDialog,
 });
 
 const mapDispatchToProps = dispatch =>
   bindActionCreators(
     {
       clearPending,
-      setActiveSection,
+      showSaveDialog,
+      hideSaveDialog,
     },
     dispatch
   );
 
 export default compose(
+  withRouter,
   connect(mapStateToProps, mapDispatchToProps),
   withUpdateSettings,
   withConfigureQuery,
@@ -93,14 +181,20 @@ export default compose(
 )(ConfigureContainer);
 
 ConfigureContainer.propTypes = {
+  activeSection: PropTypes.string,
   updateSettings: PropTypes.func.isRequired,
   clearPending: PropTypes.func.isRequired,
-  setActiveSection: PropTypes.func.isRequired,
+  showSaveDialog: PropTypes.func.isRequired,
+  hideSaveDialog: PropTypes.func.isRequired,
+  saveDialog: PropTypes.bool.isRequired,
   currentUser: PropTypes.object.isRequired,
   data: PropTypes.object.isRequired,
   root: PropTypes.object.isRequired,
   canSave: PropTypes.bool.isRequired,
   pending: PropTypes.object.isRequired,
   mergedSettings: PropTypes.object.isRequired,
-  activeSection: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
+  router: PropTypes.object,
+  route: PropTypes.object,
+  routes: PropTypes.array,
 };

client/coral-admin/src/routes/Configure/containers/OrganizationSettings.js

@@ -0,0 +1,53 @@
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { compose, gql } from 'react-apollo';
+import OrganizationSettings from '../components/OrganizationSettings';
+import withFragments from 'coral-framework/hocs/withFragments';
+import { getSlotFragmentSpreads } from 'coral-framework/utils';
+import { updatePending } from '../../../actions/configure';
+import { mapProps } from 'recompose';
+
+const slots = ['adminOrganizationSettings'];
+
+const mapStateToProps = state => ({
+  errors: state.configure.errors,
+});
+
+const mapDispatchToProps = dispatch =>
+  bindActionCreators(
+    {
+      updatePending,
+    },
+    dispatch
+  );
+
+export default compose(
+  withFragments({
+    root: gql`
+      fragment TalkAdmin_OrganizationSettings_root on RootQuery {
+        __typename
+        ${getSlotFragmentSpreads(slots, 'root')}
+      }
+    `,
+    settings: gql`
+      fragment TalkAdmin_OrganizationSettings_settings on Settings {
+        organizationName
+        organizationContactEmail
+        ${getSlotFragmentSpreads(slots, 'settings')}
+      }
+    `,
+  }),
+  connect(mapStateToProps, mapDispatchToProps),
+  mapProps(({ root, settings, updatePending, errors, ...rest }) => ({
+    slotPassthrough: {
+      root,
+      settings,
+      updatePending,
+      errors,
+    },
+    updatePending,
+    settings,
+    errors,
+    ...rest,
+  }))
+)(OrganizationSettings);

client/coral-admin/src/routes/Install/components/Install.js

@@ -1,15 +1,16 @@
-import React, { Component } from 'react';
+import React from 'react';
 import styles from './Install.css';
 import { Wizard, WizardNav } from 'coral-ui';
 import Layout from 'coral-admin/src/components/Layout';
+import PropTypes from 'prop-types';
 
 import InitialStep from './Steps/InitialStep';
-import AddOrganizationName from './Steps/AddOrganizationName';
+import OrganizationDetails from './Steps/OrganizationDetails';
 import CreateYourAccount from './Steps/CreateYourAccount';
 import PermittedDomainsStep from './Steps/PermittedDomainsStep';
 import FinalStep from './Steps/FinalStep';
 
-export default class Install extends Component {
+class Install extends React.Component {
   handleDomainsChange = value => {
     this.props.updatePermittedDomains(value);
   };
@@ -55,7 +56,7 @@ export default class Install extends Component {
                 goToStep={this.props.goToStep}
               >
                 <InitialStep />
-                <AddOrganizationName
+                <OrganizationDetails
                   install={install}
                   handleSettingsChange={this.handleSettingsChange}
                   handleSettingsSubmit={this.handleSettingsSubmit}
@@ -81,3 +82,18 @@ export default class Install extends Component {
     );
   }
 }
+
+Install.propTypes = {
+  updatePermittedDomains: PropTypes.func.isRequired,
+  updateSettingsFormData: PropTypes.func.isRequired,
+  updateUserFormData: PropTypes.func.isRequired,
+  submitSettings: PropTypes.func.isRequired,
+  submitUser: PropTypes.func.isRequired,
+  install: PropTypes.object.isRequired,
+  nextStep: PropTypes.func.isRequired,
+  previousStep: PropTypes.func.isRequired,
+  goToStep: PropTypes.func.isRequired,
+  finishInstall: PropTypes.func.isRequired,
+};
+
+export default Install;

client/coral-admin/src/routes/Install/components/Steps/FinalStep.js

@@ -10,12 +10,14 @@ const InitialStep = () => {
   return (
     <div className={cn(styles.step, styles.finalStep, 'talk-install-step-5')}>
       <p>{t('install.final.description')}</p>
-      <Button raised>
-        <Link to="/admin">{t('install.final.launch')}</Link>
-      </Button>
-      <Button cStyle="black" raised>
-        <a href="http://coralproject.net">{t('install.final.close')}</a>
-      </Button>
+      <Link to="/admin">
+        <Button raised>{t('install.final.launch')}</Button>
+      </Link>
+      <a href="http://coralproject.net">
+        <Button cStyle="black" raised>
+          {t('install.final.close')}
+        </Button>
+      </a>
     </div>
   );
 };

client/coral-admin/src/routes/Install/components/Steps/OrganizationDetails.js

@@ -21,6 +21,17 @@ const AddOrganizationName = props => {
             showErrors={install.showErrors}
             errorMsg={install.errors.organizationName}
           />
+
+          <TextField
+            className={styles.TextField}
+            id="organizationContactEmail"
+            type="email"
+            label={t('install.create.organization_contact_email')}
+            onChange={handleSettingsChange}
+            showErrors={install.showErrors}
+            errorMsg={install.errors.organizationContactEmail}
+          />
+
           <Button
             className="talk-install-step-2-save-button"
             type="submit"

client/coral-admin/src/routes/Install/containers/Install.js

@@ -1,8 +1,7 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { compose } from 'react-apollo';
 import Install from '../components/Install';
 
 import {
@@ -18,7 +17,7 @@ import {
   updatePermittedDomains,
 } from '../../../actions/install';
 
-class InstallContainer extends Component {
+class InstallContainer extends React.Component {
   componentDidMount() {
     const { checkInstall } = this.props;
     checkInstall(() => {
@@ -27,7 +26,21 @@ class InstallContainer extends Component {
   }
 
   render() {
-    return <Install {...this.props} />;
+    return (
+      <Install
+        install={this.props.install}
+        goToStep={this.props.goToStep}
+        nextStep={this.props.nextStep}
+        submitUser={this.props.submitUser}
+        checkInstall={this.props.checkInstall}
+        previousStep={this.props.previousStep}
+        finishInstall={this.props.finishInstall}
+        submitSettings={this.props.submitSettings}
+        updateUserFormData={this.props.updateUserFormData}
+        updateSettingsFormData={this.props.updateSettingsFormData}
+        updatePermittedDomains={this.props.updatePermittedDomains}
+      />
+    );
   }
 }
 
@@ -35,6 +48,20 @@ InstallContainer.contextTypes = {
   router: PropTypes.object,
 };
 
+InstallContainer.propTypes = {
+  install: PropTypes.object.isRequired,
+  goToStep: PropTypes.func.isRequired,
+  nextStep: PropTypes.func.isRequired,
+  submitUser: PropTypes.func.isRequired,
+  checkInstall: PropTypes.func.isRequired,
+  previousStep: PropTypes.func.isRequired,
+  finishInstall: PropTypes.func.isRequired,
+  submitSettings: PropTypes.func.isRequired,
+  updateUserFormData: PropTypes.func.isRequired,
+  updateSettingsFormData: PropTypes.func.isRequired,
+  updatePermittedDomains: PropTypes.func.isRequired,
+};
+
 const mapStateToProps = state => ({
   install: state.install,
 });
@@ -56,6 +83,4 @@ const mapDispatchToProps = dispatch =>
     dispatch
   );
 
-export default compose(connect(mapStateToProps, mapDispatchToProps))(
-  InstallContainer
-);
+export default connect(mapStateToProps, mapDispatchToProps)(InstallContainer);

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

@@ -85,6 +85,10 @@
   font-weight: 300;
 }
 
+.deleted {
+  background-color: #f0f0f0;
+}
+
 .moderateArticle {
   font-size: 14px;
   margin: 10px 0;

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';
 
@@ -75,6 +76,27 @@ class Comment extends React.Component {
       asset: comment.asset,
     };
 
+    if (!comment.body) {
+      return (
+        <li
+          tabIndex={0}
+          className={cn(
+            className,
+            'mdl-card',
+            selectionStateCSS,
+            styles.root,
+            { [styles.selected]: selected, [styles.dangling]: dangling },
+            'talk-admin-moderate-comment',
+            styles.deleted
+          )}
+          id={`comment_${comment.id}`}
+          ref={this.handleRef}
+        >
+          <CommentDeletedTombstone />
+        </li>
+      );
+    }
+
     return (
       <li
         tabIndex={0}
@@ -200,7 +222,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,

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

@@ -63,10 +63,6 @@ class Moderation extends Component {
     this.props.toggleStorySearch(true);
   };
 
-  getActiveTabCount = (props = this.props) => {
-    return props.root[`${props.activeTab}Count`];
-  };
-
   moderate = accept => {
     const {
       acceptComment,
@@ -139,12 +135,14 @@ class Moderation extends Component {
 
     const comments = root[activeTab];
 
-    const activeTabCount = this.getActiveTabCount();
     const menuItems = Object.keys(queueConfig).map(queue => ({
       key: queue,
       name: queueConfig[queue].name,
       icon: queueConfig[queue].icon,
-      count: root[`${queue}Count`],
+      indicator:
+        ['premod', 'reported'].includes(queue) && root[queue].nodes.length > 0,
+      // TODO: Eventually we'll reintroduce counting
+      // count: root[`${props.queue}Count`]
     }));
 
     const slotPassthrough = {
@@ -189,7 +187,6 @@ class Moderation extends Component {
             loadMore={this.loadMore}
             commentBelongToQueue={this.props.commentBelongToQueue}
             isLoadingMore={this.state.isLoadingMore}
-            commentCount={activeTabCount}
             currentUserId={this.props.currentUser.id}
             viewUserDetail={viewUserDetail}
             selectCommentId={props.selectCommentId}

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import CountBadge from '../../../components/CountBadge';
+import Indicator from '../../../components/Indicator';
 import styles from './ModerationMenu.css';
 import { Icon } from 'coral-ui';
 import { Link } from 'react-router';
@@ -32,7 +32,7 @@ const ModerationMenu = ({ asset = {}, items, getModPath, activeTab }) => {
               activeClassName={styles.active}
             >
               <Icon name={queue.icon} className={styles.tabIcon} /> {queue.name}{' '}
-              <CountBadge count={queue.count} />
+              {queue.indicator && <Indicator />}
             </Link>
           ))}
         </div>

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

@@ -204,7 +204,7 @@ class ModerationQueue extends React.Component {
   }
 
   componentDidUpdate(prev) {
-    const { commentCount, selectedCommentId } = this.props;
+    const { selectedCommentId, hasNextPage } = this.props;
 
     const switchedToMultiMode = prev.singleView && !this.props.singleView;
     const switchedMode = prev.singleView !== this.props.singleView;
@@ -212,7 +212,6 @@ class ModerationQueue extends React.Component {
       prev.selectedCommentId !== selectedCommentId && selectedCommentId;
     const moderatedLastComment =
       prev.comments.length > 0 && this.getCommentCountWithoutDagling() === 0;
-    const hasMoreComment = commentCount > 0;
 
     if (switchedToMultiMode) {
       // Reflow virtual list.
@@ -223,7 +222,7 @@ class ModerationQueue extends React.Component {
       this.scrollToSelectedComment();
     }
 
-    if (moderatedLastComment && hasMoreComment) {
+    if (moderatedLastComment && hasNextPage) {
       this.props.loadMore();
     }
   }
@@ -240,10 +239,7 @@ class ModerationQueue extends React.Component {
     const index = view.findIndex(
       ({ id }) => id === this.props.selectedCommentId
     );
-    if (
-      index === view.length - 1 &&
-      this.getCommentCountWithoutDagling() !== this.props.commentCount
-    ) {
+    if (index === view.length - 1 && this.props.hasNextPage) {
       await this.props.loadMore();
       this.selectDown();
       return;
@@ -467,7 +463,6 @@ ModerationQueue.propTypes = {
   acceptComment: PropTypes.func.isRequired,
   commentBelongToQueue: PropTypes.func.isRequired,
   cleanUpQueue: PropTypes.func.isRequired,
-  commentCount: PropTypes.number.isRequired,
   loadMore: PropTypes.func.isRequired,
   singleView: PropTypes.bool,
   isLoadingMore: PropTypes.bool,

client/coral-admin/src/routes/Moderation/containers/Moderation.js

@@ -314,11 +314,11 @@ class ModerationContainer extends Component {
 
     const currentQueueConfig = Object.assign({}, this.props.queueConfig);
 
-    if (premodEnabled && root.newCount === 0) {
+    if (premodEnabled && root.new.nodes.length === 0) {
       delete currentQueueConfig.new;
     }
 
-    if (!premodEnabled && root.premodCount === 0) {
+    if (!premodEnabled && root.premod.nodes.length === 0) {
       delete currentQueueConfig.premod;
     }
 
@@ -402,7 +402,7 @@ const COMMENT_RESET_SUBSCRIPTION = gql`
 
 const LOAD_MORE_QUERY = gql`
   query CoralAdmin_Moderation_LoadMore($limit: Int = 10, $cursor: Cursor, $sortOrder: SORT_ORDER, $asset_id: ID, $tags:[String!], $statuses:[COMMENT_STATUS!], $action_type: ACTION_TYPE) {
-    comments(query: {limit: $limit, cursor: $cursor, asset_id: $asset_id, statuses: $statuses, sortOrder: $sortOrder, action_type: $action_type, tags: $tags}) {
+    comments(query: {limit: $limit, cursor: $cursor, asset_id: $asset_id, statuses: $statuses, sortOrder: $sortOrder, action_type: $action_type, tags: $tags, excludeDeleted: true}) {
       nodes {
         ...${getDefinitionName(Comment.fragments.comment)}
       }
@@ -432,6 +432,7 @@ const withModQueueQuery = withQuery(
     ${Object.keys(queueConfig).map(
       queue => `
       ${queue}: comments(query: {
+        excludeDeleted: true,
         statuses: ${
           queueConfig[queue].statuses
             ? `[${queueConfig[queue].statuses.join(', ')}],`
@@ -455,9 +456,14 @@ const withModQueueQuery = withQuery(
       }
     `
     )}
-    ${Object.keys(queueConfig).map(
+    ${
+      ''
+      /*
+     TODO: eventually we'll reintroduce counting..
+     Object.keys(queueConfig).map(
       queue => `
       ${queue}Count: commentCount(query: {
+        excludeDeleted: true,
         statuses: ${
           queueConfig[queue].statuses
             ? `[${queueConfig[queue].statuses.join(', ')}],`
@@ -476,7 +482,8 @@ const withModQueueQuery = withQuery(
         asset_id: $asset_id,
       })
     `
-    )}
+    )*/
+    }
     asset(id: $asset_id) @skip(if: $allAssets) {
       id
       title

client/coral-docs/src/index.js

@@ -1,8 +0,0 @@
-import React from 'react';
-import { render } from 'react-dom';
-import { GraphQLDocs } from 'graphql-docs';
-
-import fetcher from './services/fetcher';
-
-// Render the application into the DOM
-render(<GraphQLDocs fetcher={fetcher} />, document.querySelector('#root'));

client/coral-docs/src/services/fetcher.js

@@ -1,10 +0,0 @@
-export default function fetcher(query) {
-  return fetch(`${window.location.origin}/api/v1/graph/ql`, {
-    method: 'POST',
-    headers: {
-      Accept: 'application/json',
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify({ query }),
-  }).then(res => res.json());
-}

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

@@ -24,14 +24,20 @@ export default class Embed extends React.Component {
       >
         {t('embed_comments_tab')}
       </Tab>,
-      <Tab
-        key="profile"
-        tabId="profile"
-        className="talk-embed-stream-profile-tab"
-      >
-        {t('framework.my_profile')}
-      </Tab>,
     ];
+
+    if (this.props.currentUser) {
+      tabs.push(
+        <Tab
+          key="profile"
+          tabId="profile"
+          className="talk-embed-stream-profile-tab"
+        >
+          {t('framework.my_profile')}
+        </Tab>
+      );
+    }
+
     if (can(this.props.currentUser, 'UPDATE_ASSET_CONFIG')) {
       tabs.push(
         <Tab
@@ -43,6 +49,7 @@ export default class Embed extends React.Component {
         </Tab>
       );
     }
+
     return tabs;
   }
 

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

@@ -16,9 +16,11 @@ class ExtendableTabPanel extends React.Component {
     } = this.props;
     return (
       <div {...rest}>
-        <TabBar activeTab={activeTab} onTabClick={setActiveTab} sub={sub}>
-          {tabs}
-        </TabBar>
+        {tabs && (
+          <TabBar activeTab={activeTab} onTabClick={setActiveTab} sub={sub}>
+            {tabs}
+          </TabBar>
+        )}
         {loading ? (
           <div className={styles.spinnerContainer}>
             <Spinner />

client/coral-embed-stream/src/containers/ExtendableTabPanel.js

@@ -35,12 +35,9 @@ class ExtendableTabPanelContainer extends React.Component {
 
   createPluginTabFactory = (props = this.props) => el => {
     return (
-      <ExtendableTab
-        tabId={el.type.talkPluginName}
-        key={el.type.talkPluginName}
-      >
+      <ExtendableTab tabId={el.key} key={el.key}>
         {React.cloneElement(el, {
-          active: props.activeTab === el.type.talkPluginName,
+          active: props.activeTab === el.key,
         })}
       </ExtendableTab>
     );
@@ -59,7 +56,7 @@ class ExtendableTabPanelContainer extends React.Component {
 
   createPluginTabPane(el) {
     return (
-      <TabPane tabId={el.type.talkPluginName} key={el.type.talkPluginName}>
+      <TabPane tabId={el.key} key={el.key}>
         {el}
       </TabPane>
     );

client/coral-embed-stream/src/tabs/profile/components/Comment.css

@@ -31,6 +31,7 @@
   font-weight: bold;
   font-size: 12px;
   color: #757575;
+  cursor: pointer;
 }
 
 .commentSummary {

client/coral-embed-stream/src/tabs/profile/components/Comment.js

@@ -11,16 +11,6 @@ import { getTotalReactionsCount } from 'coral-framework/utils';
 import t from 'coral-framework/services/i18n';
 
 class Comment extends React.Component {
-  goToStory = () => {
-    this.props.navigate(this.props.comment.asset.url);
-  };
-
-  goToConversation = () => {
-    this.props.navigate(
-      `${this.props.comment.asset.url}?commentId=${this.props.comment.id}`
-    );
-  };
-
   render() {
     const { comment, root } = this.props;
     const reactionCount = getTotalReactionsCount(comment.action_summaries);
@@ -34,6 +24,7 @@ class Comment extends React.Component {
             defaultComponent={CommentContent}
             className={cn(styles.commentBody, 'my-comment-body')}
             passthrough={slotPassthrough}
+            size={1}
           />
           <div className={cn(styles.commentSummary, 'comment-summary')}>
             <span
@@ -75,8 +66,8 @@ class Comment extends React.Component {
           <div className="my-comment-asset">
             <a
               className={cn(styles.assetURL, 'my-comment-anchor')}
-              href="#"
-              onClick={this.goToStory}
+              href={this.props.comment.asset.url}
+              target="_parent"
             >
               {t('common.story')}:{' '}
               {comment.asset.title ? comment.asset.title : comment.asset.url}
@@ -86,7 +77,13 @@ class Comment extends React.Component {
         <div className={styles.sidebar}>
           <ul>
             <li>
-              <a onClick={this.goToConversation} className={styles.viewLink}>
+              <a
+                className={styles.viewLink}
+                href={`${this.props.comment.asset.url}?commentId=${
+                  this.props.comment.id
+                }`}
+                target="_parent"
+              >
                 <Icon name="open_in_new" className={styles.iconView} />
                 {t('view_conversation')}
               </a>

client/coral-embed-stream/src/tabs/profile/components/NotLoggedIn.css

@@ -1,14 +0,0 @@
-.message {
-  padding: 10px 0 20px;
-  letter-spacing: 0.1px;
-  font-size: 13px;
-  line-height: 33px;
-}
-
-.message a {
-  color: black;
-  font-weight: bold;
-  cursor: pointer;
-  margin: 0px;
-  padding-bottom: 2px;
-}

client/coral-embed-stream/src/tabs/profile/components/NotLoggedIn.js

@@ -1,15 +0,0 @@
-import React from 'react';
-import styles from './NotLoggedIn.css';
-import cn from 'classnames';
-
-import t from 'coral-framework/services/i18n';
-
-export default ({ showSignInDialog }) => (
-  <div className={cn(styles.message, 'talk-embed-stream-not-logged-in')}>
-    <div>
-      <a onClick={showSignInDialog}>{t('settings.sign_in')}</a>{' '}
-      {t('settings.to_access')}
-    </div>
-    <div>{t('from_settings_page')}</div>
-  </div>
-);

client/coral-embed-stream/src/tabs/profile/components/Profile.js

@@ -4,13 +4,32 @@ import Slot from 'coral-framework/components/Slot';
 import styles from './Profile.css';
 import TabPanel from '../containers/TabPanel';
 
-const Profile = ({ username, emailAddress, root, slotPassthrough }) => {
+const DefaultProfileHeader = ({ username, emailAddress }) => (
+  <div className={styles.userInfo}>
+    <h2 className={styles.username}>{username}</h2>
+    {emailAddress ? <p className={styles.email}>{emailAddress}</p> : null}
+  </div>
+);
+
+DefaultProfileHeader.propTypes = {
+  username: PropTypes.string,
+  emailAddress: PropTypes.string,
+};
+
+const Profile = ({ id, username, emailAddress, root, slotPassthrough }) => {
   return (
     <div className="talk-my-profile talk-profile-container">
-      <div className={styles.userInfo}>
-        <h2 className={styles.username}>{username}</h2>
-        {emailAddress ? <p className={styles.email}>{emailAddress}</p> : null}
-      </div>
+      <Slot
+        fill="profileHeader"
+        size={1}
+        defaultComponent={DefaultProfileHeader}
+        passthrough={{
+          ...slotPassthrough,
+          id,
+          username,
+          emailAddress,
+        }}
+      />
       <Slot fill="profileSections" passthrough={slotPassthrough} />
       <TabPanel root={root} slotPassthrough={slotPassthrough} />
     </div>
@@ -18,6 +37,7 @@ const Profile = ({ username, emailAddress, root, slotPassthrough }) => {
 };
 
 Profile.propTypes = {
+  id: PropTypes.string,
   username: PropTypes.string,
   emailAddress: PropTypes.string,
   root: PropTypes.object,

client/coral-embed-stream/src/tabs/profile/containers/Profile.js

@@ -2,27 +2,17 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { compose, gql } from 'react-apollo';
-import { bindActionCreators } from 'redux';
 import { withQuery } from 'coral-framework/hocs';
-import NotLoggedIn from '../components/NotLoggedIn';
 import { Spinner } from 'coral-ui';
 import Profile from '../components/Profile';
 import TabPanel from './TabPanel';
 import { getDefinitionName } from 'coral-framework/utils';
 
-import { showSignInDialog } from 'coral-embed-stream/src/actions/login';
 import { getSlotFragmentSpreads } from 'coral-framework/utils';
 
 class ProfileContainer extends Component {
-  componentWillReceiveProps(nextProps) {
-    if (!this.props.currentUser && nextProps.currentUser) {
-      // Refetch after login.
-      this.props.data.refetch();
-    }
-  }
-
   render() {
-    const { currentUser, showSignInDialog, root } = this.props;
+    const { currentUser, root } = this.props;
     const { me } = this.props.root;
     const loading = this.props.data.loading;
 
@@ -30,10 +20,6 @@ class ProfileContainer extends Component {
       return <div>{this.props.data.error.message}</div>;
     }
 
-    if (!currentUser) {
-      return <NotLoggedIn showSignInDialog={showSignInDialog} />;
-    }
-
     if (loading || !me) {
       return <Spinner />;
     }
@@ -44,6 +30,7 @@ class ProfileContainer extends Component {
 
     return (
       <Profile
+        id={me.id}
         username={me.username}
         emailAddress={emailAddress}
         root={root}
@@ -57,10 +44,9 @@ ProfileContainer.propTypes = {
   data: PropTypes.object,
   root: PropTypes.object,
   currentUser: PropTypes.object,
-  showSignInDialog: PropTypes.func,
 };
 
-const slots = ['profileSections'];
+const slots = ['profileSections', 'profileSettings', 'profileHeader'];
 
 const withProfileQuery = withQuery(
   gql`
@@ -68,6 +54,15 @@ const withProfileQuery = withQuery(
     me {
       id
       username
+      state {
+        status {
+          username {
+            history {
+              created_at
+            }
+          }
+        }
+      }
     }
     ...${getDefinitionName(TabPanel.fragments.root)}
     ${getSlotFragmentSpreads(slots, 'root')}
@@ -85,10 +80,6 @@ const mapStateToProps = state => ({
   currentUser: state.auth.user,
 });
 
-const mapDispatchToProps = dispatch =>
-  bindActionCreators({ showSignInDialog }, dispatch);
-
-export default compose(
-  connect(mapStateToProps, mapDispatchToProps),
-  withProfileQuery
-)(ProfileContainer);
+export default compose(connect(mapStateToProps), withProfileQuery)(
+  ProfileContainer
+);

client/coral-embed-stream/src/tabs/stream/components/AllCommentsPane.js

@@ -214,7 +214,7 @@ AllCommentsPane.propTypes = {
   asset: PropTypes.object,
   currentUser: PropTypes.object,
   postFlag: PropTypes.func,
-  postDontAgree: PropTypes.func,
+  postDontAgree: PropTypes.func.isRequired,
   loadNewReplies: PropTypes.func,
   deleteAction: PropTypes.func,
   showSignInDialog: PropTypes.func,

client/coral-embed-stream/src/tabs/stream/components/Comment.js

@@ -27,6 +27,7 @@ import {
   getActionSummary,
   iPerformedThisAction,
   isCommentActive,
+  isCommentDeleted,
   getShallowChanges,
 } from 'coral-framework/utils';
 import t from 'coral-framework/services/i18n';
@@ -183,7 +184,7 @@ export default class Comment extends React.Component {
     maxCharCount: PropTypes.number,
     root: PropTypes.object,
     loadMore: PropTypes.func,
-    postDontAgree: PropTypes.func,
+    postDontAgree: PropTypes.func.isRequired,
     animateEnter: PropTypes.bool,
     commentClassNames: PropTypes.array,
     comment: PropTypes.object.isRequired,
@@ -409,6 +410,7 @@ export default class Comment extends React.Component {
       charCountEnable,
       showSignInDialog,
       liveUpdates,
+      postDontAgree,
       emit,
     } = this.props;
     return (
@@ -439,6 +441,7 @@ export default class Comment extends React.Component {
               key={reply.id}
               comment={reply}
               emit={emit}
+              postDontAgree={postDontAgree}
             />
           );
         })}
@@ -574,7 +577,9 @@ export default class Comment extends React.Component {
                   'talk-stream-comment-header-tags-container'
                 )}
               >
-                {isStaff(comment.tags) ? <TagLabel>Staff</TagLabel> : null}
+                {isStaff(comment.tags) ? (
+                  <TagLabel>{t('community.staff')}</TagLabel>
+                ) : null}
 
                 <Slot
                   className={cn(
@@ -742,8 +747,14 @@ export default class Comment extends React.Component {
 
     return (
       <div className={rootClassName} id={id}>
-        {this.renderComment()}
-        {activeReplyBox === comment.id && this.renderReplyBox()}
+        {isCommentDeleted(comment) ? (
+          <CommentTombstone action="deleted" />
+        ) : (
+          <div>
+            {this.renderComment()}
+            {activeReplyBox === comment.id && this.renderReplyBox()}
+          </div>
+        )}
         {this.renderRepliesContainer()}
       </div>
     );

client/coral-embed-stream/src/tabs/stream/components/CommentTombstone.js

@@ -13,6 +13,8 @@ class CommentTombstone extends React.Component {
         return t('framework.comment_is_ignored');
       case 'reject':
         return t('framework.comment_is_rejected');
+      case 'deleted':
+        return t('framework.comment_is_deleted');
       default:
         return t('framework.comment_is_hidden');
     }

client/coral-embed-stream/src/tabs/stream/components/InactiveCommentLabel.js

@@ -18,6 +18,10 @@ const InactiveCommentLabel = ({ status, className, ...rest }) => {
       label = t('modqueue.rejected');
       icon = 'close';
       break;
+    case 'SYSTEM_WITHHELD':
+      label = t('modqueue.system_withheld');
+      icon = 'flag';
+      break;
     default:
       throw new Error(`Unknown inactive status ${status}`);
   }

client/coral-embed-stream/src/tabs/stream/containers/Stream.js

@@ -265,7 +265,7 @@ StreamContainer.propTypes = {
   commentClassNames: PropTypes.array,
   setActiveStreamTab: PropTypes.func,
   postFlag: PropTypes.func,
-  postDontAgree: PropTypes.func,
+  postDontAgree: PropTypes.func.isRequired,
   deleteAction: PropTypes.func,
   showSignInDialog: PropTypes.func,
   currentUser: PropTypes.object,
@@ -372,6 +372,7 @@ const slots = [
   'streamTabsPrepend',
   'streamTabPanes',
   'streamFilter',
+  'stream',
 ];
 
 const fragments = {

client/coral-embed-stream/style/default.css

@@ -177,8 +177,8 @@ button.comment__action-button[disabled],
 }
 
 .talk-plugin-flags-popup-header {
-  font-weight: bolder;
-  font-size: 1.33rem;
+  font-weight: bold;
+  font-size: 1rem;
   margin-bottom: 10px;
 }
 

client/coral-framework/actions/auth.js

@@ -15,9 +15,7 @@ export const checkLogin = () => (
   rest('/auth')
     .then(result => {
       if (!result.user) {
-        if (localStorage) {
-          cleanAuthData(localStorage);
-        }
+        cleanAuthData(localStorage);
         dispatch(checkLoginSuccess(null));
         return;
       }
@@ -52,10 +50,12 @@ const checkLoginSuccess = user => ({
 });
 
 export const setAuthToken = token => (dispatch, _, { localStorage }) => {
-  if (localStorage) {
-    localStorage.setItem('exp', jwtDecode(token).exp);
-    localStorage.setItem('token', token);
-  }
+  localStorage.setItem('exp', jwtDecode(token).exp);
+  localStorage.setItem('token', token);
+
+  // Dispatch the set auth token action. For some browsers and situations, we
+  // may not be able to persist the auth token any other way. Keep it in redux!
+  dispatch({ type: actions.SET_AUTH_TOKEN, token });
 
   dispatch(checkLogin());
 };
@@ -66,11 +66,8 @@ export const handleSuccessfulLogin = (user, token) => (
   { client, localStorage, postMessage }
 ) => {
   const { exp } = jwtDecode(token);
-
-  if (localStorage) {
-    localStorage.setItem('exp', exp);
-    localStorage.setItem('token', token);
-  }
+  localStorage.setItem('exp', exp);
+  localStorage.setItem('token', token);
 
   // Send the message via the messages service to the window.opener if it
   // exists.
@@ -87,6 +84,7 @@ export const handleSuccessfulLogin = (user, token) => (
   dispatch({
     type: actions.HANDLE_SUCCESSFUL_LOGIN,
     user,
+    token,
   });
 };
 
@@ -100,9 +98,8 @@ export const logout = () => async (
 ) => {
   await rest('/auth', { method: 'DELETE' });
 
-  if (localStorage) {
-    cleanAuthData(localStorage);
-  }
+  // Clear the auth data persisted to localStorage.
+  cleanAuthData(localStorage);
 
   // Reset the websocket.
   client.resetWebsocket();

client/coral-framework/components/ConfigureCard.js

@@ -43,7 +43,7 @@ const ConfigureCard = ({
 );
 
 ConfigureCard.propTypes = {
-  title: PropTypes.string.isRequired,
+  title: PropTypes.string,
   className: PropTypes.string,
   onCheckbox: PropTypes.func,
   checked: PropTypes.bool,

client/coral-framework/components/IfSlotIsNotEmpty.js

@@ -7,7 +7,7 @@ class IfSlotIsNotEmpty extends React.Component {
   isSlotEmpty(props = this.props) {
     const { slotElements } = props;
     return slotElements.length === 0
-      ? false
+      ? true
       : slotElements.every(elements => elements.length === 0);
   }
 
@@ -19,6 +19,7 @@ class IfSlotIsNotEmpty extends React.Component {
 
 IfSlotIsNotEmpty.propTypes = {
   slot: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+  slotElements: PropTypes.array.isRequired,
   children: PropTypes.node.isRequired,
   passthrough: PropTypes.object.isRequired,
 };

client/coral-framework/components/Popup.js

@@ -37,7 +37,8 @@ export default class Popup extends Component {
       this.onBlur();
     };
 
-    // Use `onunload` instead of `onbeforeunload` which is not supported in IOS Safari.
+    // Use `onunload` instead of `onbeforeunload` which is not supported in iOS
+    // Safari.
     this.ref.onunload = () => {
       this.onUnload();
 
@@ -46,10 +47,15 @@ export default class Popup extends Component {
       }
 
       this.resetCallbackInterval = setInterval(() => {
-        if (this.ref && this.ref.onload === null) {
-          clearInterval(this.resetCallbackInterval);
-          this.resetCallbackInterval = null;
-          this.setCallbacks();
+        try {
+          if (this.ref && this.ref.onload === null) {
+            clearInterval(this.resetCallbackInterval);
+            this.resetCallbackInterval = null;
+            this.setCallbacks();
+          }
+        } catch (err) {
+          // We could be getting a security exception here if the login page
+          // gets redirected to another domain to authenticate.
         }
       }, 50);
 

client/coral-framework/constants/auth.js

@@ -1,5 +1,7 @@
 const prefix = `TALK_FRAMEWORK`;
 
+export const SET_AUTH_TOKEN = `${prefix}_SET_AUTH_TOKEN`;
+
 export const CHECK_LOGIN_REQUEST = `${prefix}_CHECK_LOGIN_REQUEST`;
 export const CHECK_LOGIN_SUCCESS = `${prefix}_CHECK_LOGIN_SUCCESS`;
 export const CHECK_LOGIN_FAILURE = `${prefix}_CHECK_LOGIN_FAILURE`;

client/coral-framework/graphql/fragments.js

@@ -25,6 +25,9 @@ export default {
     'UnsuspendUserResponse',
     'UpdateAssetSettingsResponse',
     'UpdateAssetStatusResponse',
-    'UpdateSettingsResponse'
+    'UpdateSettingsResponse',
+    'ChangePasswordResponse',
+    'UpdateEmailAddressResponse',
+    'AttachLocalAuthResponse'
   ),
 };

client/coral-framework/graphql/mutations.js

@@ -169,7 +169,7 @@ export const withSetCommentStatus = withMutation(
           },
           update: proxy => {
             const fragment = gql`
-              fragment Talk_SetCommentStatus on Comment {
+              fragment Talk_SetCommentStatus_Comment on Comment {
                 status
                 status_history {
                   type
@@ -182,9 +182,11 @@ export const withSetCommentStatus = withMutation(
             const data = proxy.readFragment({ fragment, id: fragmentId });
 
             data.status = status;
+
             data.status_history = data.status_history
               ? data.status_history
               : [];
+
             data.status_history.push({
               __typename: 'CommentStatusHistory',
               type: status,
@@ -590,6 +592,27 @@ export const withUpdateSettings = withMutation(
   }
 );
 
+export const withChangePassword = withMutation(
+  gql`
+    mutation ChangePassword($input: ChangePasswordInput!) {
+      changePassword(input: $input) {
+        ...ChangePasswordResponse
+      }
+    }
+  `,
+  {
+    props: ({ mutate }) => ({
+      changePassword: input => {
+        return mutate({
+          variables: {
+            input,
+          },
+        });
+      },
+    }),
+  }
+);
+
 export const withUpdateAssetSettings = withMutation(
   gql`
     mutation UpdateAssetSettings($id: ID!, $input: AssetSettingsInput!) {

client/coral-framework/helpers/error.js

@@ -6,4 +6,5 @@ export default {
   username: t('error.username'),
   confirmPassword: t('error.confirm_password'),
   organizationName: t('error.organization_name'),
+  organizationContactEmail: t('error.organization_contact_email'),
 };

client/coral-framework/helpers/validate.js

@@ -4,4 +4,5 @@ export default {
   confirmPassword: () => true,
   username: username => /^[a-zA-Z0-9_]+$/.test(username),
   organizationName: org => /^[a-zA-Z0-9_ ]+$/.test(org),
+  organizationContactEmail: email => /^.+@.+\..+$/.test(email),
 };

client/coral-framework/hocs/withSetUsername.js

@@ -59,6 +59,7 @@ const withSetUsername = hoistStatics(WrappedComponent => {
         }
         const changeSet = { success: false, loading: false, error };
         this.setState(changeSet);
+        throw error;
       }
     };
 

client/coral-framework/reducers/auth.js

@@ -5,6 +5,7 @@ const initialState = {
   checkedInitialLogin: false,
   initialLoginError: null,
   user: null,
+  token: null,
 };
 
 const purge = user => {
@@ -14,12 +15,18 @@ const purge = user => {
 
 export default function auth(state = initialState, action) {
   switch (action.type) {
+    case actions.SET_AUTH_TOKEN:
+      return {
+        ...state,
+        token: action.token || null,
+      };
     case actions.CHECK_LOGIN_FAILURE:
       return {
         ...state,
         initialLoginError: action.error,
         checkedInitialLogin: true,
         user: null,
+        token: null,
       };
     case actions.CHECK_LOGIN_SUCCESS:
       return {
@@ -31,11 +38,13 @@ export default function auth(state = initialState, action) {
       return {
         ...state,
         user: action.user ? purge(action.user) : null,
+        token: action.token || null,
       };
     case actions.LOGOUT:
       return {
         ...state,
         user: null,
+        token: null,
       };
     case actions.UPDATE_STATUS: {
       return {

client/coral-framework/services/bootstrap.js

@@ -47,6 +47,12 @@ const getAuthToken = (store, storage) => {
   } else if (!bowser.safari && !bowser.ios && storage) {
     // Use local storage auth tokens where there's a stable api.
     return storage.getItem('token');
+  } else if (state.auth && state.auth.token) {
+    // Use the redux token state if the remaining methods fall out. If the embed
+    // is called with `embed.login(token)`, and the browser is not capable of
+    // storing the token in localStorage, then we would have persisted it to the
+    // redux state.
+    return state.auth.token;
   }
 
   return null;
@@ -123,7 +129,7 @@ export async function createContext({
     // Try to get the token from localStorage. If it isn't here, it may
     // be passed as a cookie.
 
-    // NOTE: THIS IS ONLY EVER EVALUATED ONCE, IN ORDER TO SEND A DIFFERNT
+    // NOTE: THIS IS ONLY EVER EVALUATED ONCE, IN ORDER TO SEND A DIFFERENT
     // TOKEN YOU MUST DISCONNECT AND RECONNECT THE WEBSOCKET CLIENT.
     return getAuthToken(store, localStorage);
   };

client/coral-framework/services/i18n.js

@@ -9,6 +9,7 @@ import 'moment/locale/da';
 import 'moment/locale/de';
 import 'moment/locale/es';
 import 'moment/locale/fr';
+import 'moment/locale/nl';
 import 'moment/locale/pt-br';
 
 import { createStorage } from 'coral-framework/services/storage';
@@ -18,10 +19,10 @@ import daTA from 'timeago.js/locales/da';
 import deTA from 'timeago.js/locales/de';
 import esTA from 'timeago.js/locales/es';
 import frTA from 'timeago.js/locales/fr';
+import nlTA from 'timeago.js/locales/nl';
 import pt_BRTA from 'timeago.js/locales/pt_BR';
 import zh_CNTA from 'timeago.js/locales/zh_CN';
 import zh_TWTA from 'timeago.js/locales/zh_TW';
-import nl from 'timeago.js/locales/nl';
 
 import ar from '../../../locales/ar.yml';
 import en from '../../../locales/en.yml';
@@ -29,10 +30,10 @@ import da from '../../../locales/da.yml';
 import de from '../../../locales/de.yml';
 import es from '../../../locales/es.yml';
 import fr from '../../../locales/fr.yml';
+import nl_NL from '../../../locales/nl_NL.yml';
 import pt_BR from '../../../locales/pt_BR.yml';
 import zh_CN from '../../../locales/zh_CN.yml';
 import zh_TW from '../../../locales/zh_TW.yml';
-import nl_NL from '../../../locales/nl_NL.yml';
 
 const defaultLanguage = process.env.TALK_DEFAULT_LANG;
 const translations = {
@@ -52,26 +53,41 @@ let lang;
 let timeagoInstance;
 
 function setLocale(storage, locale) {
-  try {
-    if (storage) {
-      storage.setItem('locale', locale);
-    }
-  } catch (err) {
-    console.error(err);
-  }
+  storage.setItem('locale', locale);
 }
 
-function getLocale(storage) {
+// detectLanguage will try to get the locale from storage if available,
+// otherwise will try to get it from the navigator, otherwise, it will fallback
+// to the default language.
+function detectLanguage(storage) {
   try {
-    return (
-      (storage && storage.getItem('locale')) ||
-      navigator.language ||
-      defaultLanguage
-    ).split('-')[0];
+    const lang = storage.getItem('locale') || navigator.language;
+    if (lang) {
+      return lang;
+    }
   } catch (err) {
-    console.error(err);
-    return null;
+    console.warn(
+      'Error while trying to detect language, will fallback to',
+      err
+    );
   }
+
+  console.warn('Could not detect language, will fallback to', defaultLanguage);
+  return defaultLanguage;
+}
+
+// getLocale will get the users locale from the local detector and parse it to a
+// format we can work with.
+function getLocale(storage) {
+  // Get the language from the local detector.
+  const lang = detectLanguage(storage);
+
+  // Some language strings come with additional subtags as defined in:
+  //
+  // https://www.ietf.org/rfc/bcp/bcp47.txt
+  //
+  // So we should strip that off if we find it.
+  return lang.split('-')[0];
 }
 
 export function setupTranslations() {
@@ -97,10 +113,10 @@ export function setupTranslations() {
   ta.register('da', daTA);
   ta.register('de', deTA);
   ta.register('fr', frTA);
+  ta.register('nl_NL', nlTA);
   ta.register('pt_BR', pt_BRTA);
   ta.register('zh_CN', zh_CNTA);
   ta.register('zh_TW', zh_TWTA);
-  ta.register('nl_NL', nl);
 
   timeagoInstance = ta();
 }
@@ -136,6 +152,7 @@ export function t(key, ...replacements) {
     replacements.forEach((str, i) => {
       translation = translation.replace(new RegExp(`\\{${i}\\}`, 'g'), str);
     });
+
     return translation;
   } else {
     console.warn(`${lang}.${key} and en.${key} language key not set`);

client/coral-framework/services/plugins.js

@@ -173,11 +173,30 @@ class PluginsService {
       );
     }
 
+    /**
+     * This adds a consistent keying for the slot elements.
+     * It uses the plugin name as the key. If the same plugin inserts
+     * multiple elements it will append `.${noOfOccurence}` to the
+     * key starting with the second element.
+     */
+    const getKey = (() => {
+      const map = {};
+      return component => {
+        if (map[component.talkPluginName] === undefined) {
+          map[component.talkPluginName] = 0;
+        } else {
+          map[component.talkPluginName]++;
+        }
+        const i = map[component.talkPluginName];
+        return `${component.talkPluginName}${i > 0 ? `.${i}` : ''}`;
+      };
+    })();
+
     return (size > 0 ? slots.slice(0, size) : slots)
-      .map((component, i) => ({
+      .map(component => ({
         component,
         disabled: isDisabled(component),
-        key: i,
+        key: getKey(component),
       }))
       .filter(o => !o.disabled)
       .map(({ component, key }) =>

client/coral-framework/services/storage.js

@@ -1,40 +1,116 @@
 import uuid from 'uuid/v4';
 
-function getStorage(type) {
-  let storage;
-  try {
-    storage = window[type];
-    const x = '__storage_test__';
-    storage.setItem(x, x);
-    storage.removeItem(x);
-  } catch (e) {
-    const ignore =
-      e instanceof DOMException &&
-      // everything except Firefox
-      (e.code === 22 ||
-        // SecurityError related to having 3rd party cookies disabled.
-        e.code === 18 ||
-        // Firefox
+function testStorageAccess(storage) {
+  const key = '__storage_test__';
 
-        e.code === 1014 ||
-        // test name field too, because code might not be present
+  // Create a unique test value.
+  const expectedValue = String(Date.now());
 
-        // everything except Firefox
-        e.name === 'QuotaExceededError' ||
-        // Firefox
-        e.name === 'NS_ERROR_DOM_QUOTA_REACHED');
-    if (!ignore) {
-      console.warn(e);
+  // Try to set, get, and remove that item.
+  storage.setItem(key, expectedValue);
+  const canSetGet = expectedValue === storage.getItem(key);
+  storage.removeItem(key);
+
+  if (!canSetGet) {
+    // We can't access the desired storage!
+    throw new Error('Storage access test failed');
+  }
+}
+
+// InMemoryStorage is a dumb implementation of the Storage interface that will
+// not persist the data at all. It implements the Storage interface found:
+//
+// https://developer.mozilla.org/en-US/docs/Web/API/Storage
+//
+class InMemoryStorage {
+  constructor() {
+    this.storage = {};
+  }
+
+  get length() {
+    return Object.keys(this.storage).length;
+  }
+
+  key(n) {
+    if (this.length <= n) {
+      return undefined;
     }
 
-    // When third party cookies are disabled, session storage is readable/
-    // writable, but localStorage is not. Try to get the sessionStorage to use.
-    if (type !== 'sessionStorage') {
-      return getStorage('sessionStorage');
+    return this.storage[Object.keys(this.storage)[n]];
+  }
+
+  getItem(key) {
+    return this.storage[key];
+  }
+
+  setItem(key, value) {
+    this.storage[key] = value;
+
+    try {
+      // Test sessionStorage. We could have been given access recently.
+      testStorageAccess(sessionStorage);
+
+      // Test passed! Set the item in sessionStorage.
+      sessionStorage.setItem(key, value);
+      console.log(
+        'Attempt to persist InMemoryStorage value to sessionStorage succeeded'
+      );
+    } catch (err) {
+      console.warn(
+        'Attempt to persist InMemoryStorage value to sessionStorage failed',
+        err
+      );
     }
   }
 
-  return storage;
+  removeItem(key) {
+    delete this.storage[key];
+
+    try {
+      // Test sessionStorage. We could have been given access recently.
+      testStorageAccess(sessionStorage);
+
+      // Test passed! Remove the item from sessionStorage.
+      sessionStorage.removeItem(key);
+      console.log(
+        'Attempt to persist InMemoryStorage delete to sessionStorage succeeded'
+      );
+    } catch (err) {
+      console.warn(
+        'Attempt to persist InMemoryStorage delete to sessionStorage failed',
+        err
+      );
+    }
+  }
+}
+
+// getStorage will test to see if the requested storage type is available, if it
+// is not, it will try sessionStorage, and if that is also not available, it
+// will fallback to InMemoryStorage.
+function getStorage(type) {
+  try {
+    // Get the desired storage from the window and test it out.
+    const storage = window[type];
+    testStorageAccess(storage);
+
+    // Storage test was successful! Return it.
+    return storage;
+  } catch (err) {
+    // When third party cookies are disabled, session storage is readable/
+    // writable, but localStorage is not. Try to get the sessionStorage to use.
+    if (type !== 'sessionStorage') {
+      console.warn('Could not access', type, 'trying sessionStorage', err);
+      return getStorage('sessionStorage');
+    }
+
+    console.warn(
+      'Could not access sessionStorage falling back to InMemoryStorage',
+      err
+    );
+  }
+
+  // No acceptable storage could be found, returning the InMemoryStorage.
+  return new InMemoryStorage();
 }
 
 /**

client/coral-framework/utils/index.js

@@ -1,6 +1,7 @@
 import { gql } from 'react-apollo';
 import t from 'coral-framework/services/i18n';
 import union from 'lodash/union';
+import get from 'lodash/get';
 import { capitalize } from 'coral-framework/helpers/strings';
 import assignWith from 'lodash/assignWith';
 import mapValues from 'lodash/mapValues';
@@ -221,6 +222,13 @@ export function isCommentActive(commentStatus) {
   return ['NONE', 'ACCEPTED'].indexOf(commentStatus) >= 0;
 }
 
+export function isCommentDeleted(comment) {
+  return (
+    get(comment, 'body', null) === null ||
+    get(comment, 'deleted_at', null) !== null
+  );
+}
+
 export function getShallowChanges(a, b) {
   return union(Object.keys(a), Object.keys(b)).filter(key => a[key] !== b[key]);
 }
@@ -237,7 +245,11 @@ export function getTotalReactionsCount(actionSummaries) {
 
 // Like lodash merge but does not recurse into arrays.
 export function mergeExcludingArrays(objValue, srcValue) {
-  if (typeof srcValue === 'object' && !Array.isArray(srcValue)) {
+  if (
+    typeof srcValue === 'object' &&
+    !Array.isArray(srcValue) &&
+    srcValue !== null
+  ) {
     return assignWith({}, objValue, srcValue, mergeExcludingArrays);
   }
   return srcValue;

client/coral-framework/utils/user.js

@@ -1,4 +1,5 @@
 import get from 'lodash/get';
+import moment from 'moment';
 
 /**
  * getReliability
@@ -33,3 +34,18 @@ export const isSuspended = user => {
 export const isBanned = user => {
   return get(user, 'state.status.banned.status');
 };
+
+/**
+ * canUsernameBeUpdated
+ * retrieves boolean whether a username can be updated or not
+ */
+
+export const canUsernameBeUpdated = status => {
+  const oldestEditTime = moment()
+    .subtract(14, 'days')
+    .toDate();
+
+  return !status.username.history.some(({ created_at }) =>
+    moment(created_at).isAfter(oldestEditTime)
+  );
+};

client/coral-ui/components/Icon.css

@@ -1,5 +1,5 @@
 
 .root {
-  vertical-align: middle;
+  vertical-align: sub;
   font-size: inherit;
 }

client/coral-ui/components/PopupMenu.css

@@ -9,7 +9,7 @@
   box-sizing: border-box;
   background: white;
   border-radius: 3px;
-  padding: 20px 10px;
+  padding: 10px 10px;
   z-index: 300;
   right: 1%;
 }

client/coral-ui/components/TextField.js

@@ -27,11 +27,14 @@ const TextField = ({
 );
 
 TextField.propTypes = {
+  id: PropTypes.string,
   label: PropTypes.string,
   value: PropTypes.string,
   onChange: PropTypes.func,
   errorMsg: PropTypes.string,
   type: PropTypes.string,
+  className: PropTypes.string,
+  showErrors: PropTypes.bool,
 };
 
 export default TextField;

client/jest.config.js

@@ -0,0 +1,36 @@
+const { pluginsPath } = require('../plugins');
+
+const buildTargets = ['coral-admin'];
+
+const buildEmbeds = ['stream'];
+
+const specPattern = 'client/**/__tests__/**/*.spec.js?(x)';
+
+module.exports = {
+  rootDir: '../',
+  testMatch: [
+    `<rootDir>/${specPattern}`,
+    `<rootDir>/plugins/**/${specPattern}`,
+  ],
+  setupTestFrameworkScriptFile: '<rootDir>/test/client/setupJest.js',
+  modulePaths: [
+    '<rootDir>/plugins',
+    '<rootDir>/client',
+    ...buildTargets.map(target => `<rootDir>/client/${target}/src`),
+    ...buildEmbeds.map(embed => `<rootDir>/client/coral-embed-${embed}/src`),
+  ],
+  moduleFileExtensions: ['js', 'jsx', 'json', 'yaml', 'yml'],
+  moduleDirectories: ['node_modules'],
+  transform: {
+    '^.+\\.jsx?$': 'babel-jest',
+    '\\.ya?ml$': '<rootDir>/test/client/yamlTransformer.js',
+  },
+  testResultsProcessor: process.env.JEST_REPORTER,
+  moduleNameMapper: {
+    '^plugin-api\\/(.*)$': '<rootDir>/plugin-api/$1',
+    '^plugins\\/(.*)$': '<rootDir>/plugins/$1',
+    '^pluginsConfig$': pluginsPath,
+    '\\.(scss|css|less)$': 'identity-obj-proxy',
+    '\\.(gif|ttf|eot|svg)$': '<rootDir>/test/client/fileMock.js',
+  },
+};

config.js

@@ -59,6 +59,10 @@ const CONFIG = {
   // it was built at.
   REVISION_HASH: process.env.REVISION_HASH,
 
+  // SCRAPER_HEADERS is a JSON string that will be used to override the headers
+  // on the scraper when it makes requests.
+  SCRAPER_HEADERS: process.env.TALK_SCRAPER_HEADERS || '{}',
+
   //------------------------------------------------------------------------------
   // JWT based configuration
   //------------------------------------------------------------------------------
@@ -208,6 +212,13 @@ const CONFIG = {
   RECAPTCHA_PUBLIC: process.env.TALK_RECAPTCHA_PUBLIC,
   RECAPTCHA_SECRET: process.env.TALK_RECAPTCHA_SECRET,
 
+  // RECAPTCHA_WINDOW is the rate limit's time interval
+  RECAPTCHA_WINDOW: process.env.TALK_RECAPTCHA_WINDOW || '10m',
+
+  // After RECAPTCHA_INCORRECT_TRIGGER incorrect attempts, recaptcha will be required.
+  RECAPTCHA_INCORRECT_TRIGGER:
+    process.env.TALK_RECAPTCHA_INCORRECT_TRIGGER || 5,
+
   // WEBSOCKET_LIVE_URI is the absolute url to the live endpoint.
   WEBSOCKET_LIVE_URI: process.env.TALK_WEBSOCKET_LIVE_URI || null,
 

docs/_config.yml

@@ -41,7 +41,7 @@ relative_link: false
 future: true
 highlight:
   enable: false
-  
+
 # Home page setting
 # path: Root path for your blogs index page. (default = '')
 # per_page: Posts displayed per page. (0 = disable pagination)
@@ -114,6 +114,8 @@ sidebar:
           url: /integrating/styling-css/
         - title: Translations and i18n
           url: /integrating/translations-i18n/
+        - title: GDPR Compliance
+          url: /integrating/gdpr/
     - title: Product Guide
       children:
         - title: How Talk Works
@@ -122,6 +124,8 @@ sidebar:
           url: /commenter-features/
         - title: Moderator Features
           url: /moderator-features/
+        - title: User Roles in Talk
+          url: /roles/
         - title: Trust
           url: /trust/
         - title: Toxic Comments
@@ -154,6 +158,8 @@ sidebar:
           url: /building-basic-plugin/
         - title: Customizing Plugins with Coral UI
           url: /customizing-plugins-coral-ui/
+        - title: When You've Installed Talk
+          url: /when-youve-installed-talk/
     - title: Migrating
       children:
         - title: Migrating to v4.0.0

docs/source/01-01-talk-quickstart.md

@@ -167,14 +167,10 @@ TALK_REDIS_URL=redis://127.0.0.1:6379
 TALK_ROOT_URL=http://127.0.0.1:3000
 TALK_PORT=3000
 TALK_JWT_SECRET=password
-TALK_FACEBOOK_APP_ID=A-Facebook-App-ID
-TALK_FACEBOOK_APP_SECRET=A-Facebook-App-Secret
 ```
 
 This is only the bare minimum needed to run the demo, for more configuration
-variables, check out the [Configuration](/talk/configuration/) section. Facebook login above
-will definitely not work unless you change those values as well.
-
+variables, check out the [Configuration](/talk/configuration/) section.
 
 You can now start the application by running:
 

docs/source/01-03-installation-from-source.md

@@ -57,14 +57,11 @@ TALK_REDIS_URL=redis://127.0.0.1:6379
 TALK_ROOT_URL=http://127.0.0.1:3000
 TALK_PORT=3000
 TALK_JWT_SECRET=password
-TALK_FACEBOOK_APP_ID=A-Facebook-App-ID
-TALK_FACEBOOK_APP_SECRET=A-Facebook-App-Secret
 ```
 
 This is the bare minimum needed to start Talk, for more configuration
 variables, check out the [Configuration](/talk/configuration/)
-section. Facebook login above will definitely not work unless you change those
-values as well.
+section.
 
 
 You can now start the application by running:

docs/source/02-02-advanced-configuration.md

@@ -316,6 +316,18 @@ default to providing only a time based lockout. Refer to
 [reCAPTCHA](https://www.google.com/recaptcha/intro/index.html) for information
 on getting an account setup.
 
+## TALK_RECAPTCHA_WINDOW
+
+The rate limit time interval that there can be [TALK_RECAPTCHA_INCORRECT_TRIGGER](#talk_recaptcha_incorrect_trigger) incorrect attempts until the reCAPTCHA is
+marked as required, parsed by
+[ms](https://www.npmjs.com/package/ms). (Default `10m`)
+
+## TALK_RECAPTCHA_INCORRECT_TRIGGER
+
+The number of times that an incorrect login can be entered before within a time
+perioud indicated by [TALK_RECAPTCHA_WINDOW](#talk_recaptcha_window) until the
+reCAPTCHA is marked as required. (Default `5`)
+
 ## TALK_REDIS_CLIENT_CONFIGURATION
 
 Configuration overrides for the redis client configuration in a JSON encoded
@@ -524,4 +536,11 @@ Sets the logging level for the context logger (from [Bunyan](https://github.com/
 - `warn`
 - `info`
 - `debug`
-- `trace`
+- `trace`
+
+## TALK_SCRAPER_HEADERS
+
+A JSON string representing the configuration passed to the
+[fetch](https://www.npmjs.com/package/node-fetch) call for the scraper. It
+can be used to set an authorization header, or change the user agent. (Default
+`{}`)

docs/source/03-01-product-guide-how-talk-works.md

@@ -28,8 +28,7 @@ Plugins are additional functionality which are optional to use with Talk. You
 can turn these on or off, depending on your specific needs. Plugins are either
 part of our core plugins, which ship with Talk, or they are developed by 3rd
 parties and either used privately and internally, or are open sourced for use
-across the greater community. You can explore the plugins we offer by visiting our [Default Plugins](/talk/default-plugins/)
-and [Additional Plugins](/talk/additional-plugins/) pages.
+across the greater community. You can explore the plugins we offer by visiting our [Plugin Directory](/talk/plugins-directory/).
 
 ## Recipes
 

docs/source/03-02-product-guide-commenter-features.md

@@ -24,7 +24,7 @@ All levels of comments and replies are able to be linked to via permalink. Perma
 ```text
 https://<your asset url>?commentId=<the comment id>
 ```
-{:.no-copy}
+
 
 ### Threading
 
@@ -44,7 +44,7 @@ talk-stream-comment-level-${depth}
 talk-stream-highlighted-comment
 talk-stream-pending-comment
 ```
-{:.no-copy}
+
 
 ### Automatic Updates
 

docs/source/03-03-product-guide-moderator-features.md

@@ -170,8 +170,9 @@ moderators.
 
 All your team and commenters show in the People sub-tab. From here, you can
 manage your team members’ roles (Admins, Moderators, Staff), as well as search
-for commenters and take action on them (e.g. Ban/Un-ban, Suspend, etc.). ###
-Configure
+for commenters and take action on them (e.g. Ban/Un-ban, Suspend, etc.). 
+
+### Configure
 
 See [Configuring Talk](/talk/configuring-talk/).
 

docs/source/03-04-product-guide-trust.md

@@ -1,49 +0,0 @@
----
-title: Trust
-permalink: /trust/
----
-
-Trust is a set of components within Talk that incorporate automated moderation
-features based on a user's previous behavior.
-
-## User Karma Score
-
-Using Trust’s calculations, Talk will automatically pre-moderate comments of
-users who have a negative karma score. All users start out with a `0` neutral
-karma score. If they have a comment approved by a moderator, their score
-increases by `1`; if they have a comment rejected by a moderator, it decreases
-by `1`. When a commenter is labeled as Unreliable, their comments must be
-moderated before they are posted.
-
-When a commenter has one comment rejected, their next comment must be moderated
-once in order to post freely again. If they instead get rejected again, then
-they must have two of their comments approved in order to get added back to the
-queue.
-
-Here are the default thresholds:
-
-```text
--2 and lower: Unreliable
--1 to +2: Neutral
-+3 and higher: Reliable
-```
-
-You can configure your own Trust thresholds by using [TRUST_THRESHOLD](/talk/advanced-configuration/#trust-thresholds) in your
-configuration.
-
-
-## Reliable and Unreliable Flaggers
-
-Trust also calculates how reliable users are in terms of the comments they
-report. This information is displayed to moderators in the User History drawer,
-which is accessed by clicking on a user’s name in the Admin.
-
-If a user's reports mostly match what moderators reject, their Report status
-will display to moderators as Reliable in the user information drawer. If a
-user's reports mostly differ from what moderators reject, their Report status
-will show as Unreliable.
-
-If we don't have enough reports to make a call, or the reports even out, their
-status is Neutral.
-
-Note: Report Karma doesn't include reports of "I don't agree with this comment".

docs/source/03-04-user-roles.md

@@ -0,0 +1,35 @@
+---
+title: User Roles in Talk
+permalink: /roles/
+---
+
+We have four preset roles in Talk:
+
+**Commenter**
+* A standard community member
+* Could receive a badge (eg. 'Subscriber') via [a custom newsroom Plugin Recipe](https://docs.coralproject.net/talk/plugin-recipes/#recipe-subscriber)
+* No moderation abilities
+* No configuration abilities
+
+**Staff**
+* A standard community member 
+* Receives a Staff badge when they comment
+* Comments are automatically approved
+* No moderation abilities
+* No configuration abilities
+
+**Moderator**
+* A standard community member 
+* Receives a Staff badge when they comment
+* Comments are automatically approved
+* Has full moderation privileges 
+* Can configure individual articles via the Configure tab on the article page
+* No site-wide configuration abilities 
+
+**Administrator**
+* A standard community member 
+* Receives a Staff badge when they comment
+* Comments are automatically approved
+* Has full moderation privileges 
+* Can configure individual articles via the Configure tab on the article page
+* Can configure site settings via the Configure tab in the moderation interface

docs/source/03-05-product-guide-toxic-comments.md

@@ -50,7 +50,7 @@ trying to improve a broken part of the internet.
 
 ## How do I add the Toxic Comments plugin?
 To enable this behavior, visit the
-[talk-plugin-toxic-comments](/talk/additional-plugins/#talk-plugin-toxic-comments)
+[talk-plugin-toxic-comments](/talk/plugin/talk-plugin-toxic-comments)
 plugin documentation.