Merge pull request #1667 from coralproject/fix-dropdown-display

Fix DropDown display bug

.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,12 @@
   "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",
+    "https://nodesecurity.io/advisories/654"
   ]
 }

Dockerfile.onbuild

@@ -7,6 +7,7 @@ ONBUILD ARG TALK_REPLY_COMMENTS_LOAD_DEPTH=3
 ONBUILD ARG TALK_THREADING_LEVEL=3
 ONBUILD ARG TALK_DEFAULT_STREAM_TAB=all
 ONBUILD ARG TALK_DEFAULT_LANG=en
+ONBUILD ARG TALK_WHITELISTED_LANGUAGES
 ONBUILD ARG TALK_PLUGINS_JSON
 ONBUILD ARG TALK_WEBPACK_SOURCE_MAP
 
@@ -20,4 +21,4 @@ ONBUILD COPY . /usr/src/app
 ONBUILD RUN cli plugins reconcile && \
             yarn && \
             yarn build && \
-            yarn cache clean
+            yarn cache clean

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,8 @@
 const express = require('express');
-const morgan = require('morgan');
+const nunjucks = require('nunjucks');
+const cons = require('consolidate');
+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 +15,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 +37,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) {
@@ -67,7 +74,26 @@ app.use(
 // VIEW CONFIGURATION
 //==============================================================================
 
-app.set('views', path.join(__dirname, 'views'));
+// configure the default views directory.
+const views = path.join(__dirname, 'views');
+app.set('views', views);
+
+// reconfigure nunjucks.
+cons.requires.nunjucks = nunjucks.configure(views, {
+  autoescape: true,
+  trimBlocks: true,
+  lstripBlocks: true,
+  watch: process.env.NODE_ENV === 'development',
+});
+
+// assign the nunjucks engine to .njk files.
+app.engine('njk', cons.nunjucks);
+
+// assign the ejs engine to .ejs and .html files.
+app.engine('ejs', cons.ejs);
+app.engine('html', cons.ejs);
+
+// set .ejs as the default extension.
 app.set('view engine', 'ejs');
 
 //==============================================================================

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

@@ -7,12 +7,13 @@
 const util = require('./util');
 const program = require('commander');
 const parseDuration = require('ms');
-const Table = require('cli-table');
+const Table = require('cli-table2');
 const AssetModel = require('../models/asset');
 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-token

@@ -8,7 +8,7 @@ const util = require('./util');
 const program = require('commander');
 const mongoose = require('../services/mongoose');
 const TokensService = require('../services/tokens');
-const Table = require('cli-table');
+const Table = require('cli-table2');
 
 // Register the shutdown criteria.
 util.onshutdown([() => mongoose.disconnect()]);

bin/cli-users

@@ -8,7 +8,7 @@ const util = require('./util');
 const program = require('commander');
 const inquirer = require('inquirer');
 const { stripIndent } = require('common-tags');
-const Table = require('cli-table');
+const Table = require('cli-table2');
 
 // Make things colorful!
 require('colors');
@@ -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/ApproveButton.js

@@ -14,7 +14,8 @@ const ApproveButton = ({ active, minimal, onClick, className, disabled }) => {
       className={cn(
         styles.root,
         { [styles.minimal]: minimal, [styles.active]: active },
-        className
+        className,
+        'talk-admin-approve-button'
       )}
       onClick={onClick}
       disabled={disabled || active}

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

@@ -19,7 +19,7 @@ class BanUserDialog extends React.Component {
   }
 
   handleMessageChange = e => {
-    const { value: message } = e;
+    const { target: { value: message } } = e;
     this.setState({ message });
   };
 
@@ -30,6 +30,12 @@ class BanUserDialog extends React.Component {
     });
   };
 
+  handlePerform = () => {
+    this.props.onPerform({
+      message: this.state.message,
+    });
+  };
+
   renderStep0() {
     const { onCancel, username, info } = this.props;
 
@@ -63,7 +69,7 @@ class BanUserDialog extends React.Component {
   }
 
   renderStep1() {
-    const { onCancel, onPerform } = this.props;
+    const { onCancel } = this.props;
     const { message } = this.state;
 
     return (
@@ -95,7 +101,7 @@ class BanUserDialog extends React.Component {
           <Button
             className={cn('talk-ban-user-dialog-button-confirm')}
             cStyle="black"
-            onClick={onPerform}
+            onClick={this.handlePerform}
             raised
           >
             {t('bandialog.send')}

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/CommentLabels.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Label from 'coral-ui/components/Label';
 import Slot from 'coral-framework/components/Slot';
+import { t } from 'coral-framework/services/i18n';
 import FlagLabel from 'coral-ui/components/FlagLabel';
 import cn from 'classnames';
 import styles from './CommentLabels.css';
@@ -63,10 +64,14 @@ const CommentLabels = ({
           <FlagLabel iconName="person">{getUserFlaggedType(actions)}</FlagLabel>
         )}
         {hasSuspectedWords(actions) && (
-          <FlagLabel iconName="sms_failed">Suspect</FlagLabel>
+          <FlagLabel iconName="sms_failed">
+            {t('flags.reasons.comment.suspect_word')}
+          </FlagLabel>
         )}
         {hasHistoryFlag(actions) && (
-          <FlagLabel iconName="sentiment_very_dissatisfied">History</FlagLabel>
+          <FlagLabel iconName="sentiment_very_dissatisfied">
+            {t('flags.reasons.comment.trust')}
+          </FlagLabel>
         )}
       </div>
       <Slot

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

@@ -0,0 +1,16 @@
+.external {
+  margin-bottom: 20px;
+}
+
+.separator h5 {
+  text-align: center;
+  font-size: 1.2em;
+}
+
+.slot > * {
+margin-bottom: 8px;
+
+&:last-child {
+  margin-bottom: 0px;
+}
+}

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './External.css';
+import Slot from 'coral-framework/components/Slot';
+import IfSlotIsNotEmpty from 'coral-framework/components/IfSlotIsNotEmpty';
+
+const External = ({ slot }) => (
+  <IfSlotIsNotEmpty slot={slot}>
+    <div>
+      <div className={styles.external}>
+        <Slot fill={slot} className={styles.slot} />
+      </div>
+      <div className={styles.separator}>
+        <h5>Or</h5>
+      </div>
+    </div>
+  </IfSlotIsNotEmpty>
+);
+
+External.propTypes = {
+  slot: PropTypes.string.isRequired,
+};
+
+export default External;

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/KarmaTooltip.css

@@ -0,0 +1,103 @@
+.karmaTooltip {
+  position: relative;
+  display: inline-block;
+  margin: 2px 4px 0;
+}
+
+.icon {
+  font-size: 16px;
+  color: #0D5B8F;
+  user-select: none;
+  -webkit-tap-highlight-color:rgba(0,0,0,0);
+
+  > i {
+    vertical-align: baseline;
+  }
+}
+
+.icon:hover {
+  cursor: pointer;
+}
+
+.menu {
+  background-color: white;
+  border: solid 1px #999;
+  border-radius: 3px;
+  padding: 10px;
+  position: absolute;
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
+  z-index: 10;
+  top: 32px;
+  left: -100px;
+  width: 150px;
+  text-align: left;
+  color: #616161;
+}
+
+.menu::before{
+  content: '';
+  border: 10px solid transparent;
+  border-top-color: #999;
+  position: absolute;
+  left: 96px;
+  top: -20px;
+  transform: rotate(180deg);
+}
+
+.menu::after{
+  content: '';
+  border: 10px solid transparent;
+  border-top-color: white;
+  position: absolute;
+  left: 96px;
+  top: -19px;
+  transform: rotate(180deg);
+}
+
+.menu ul {
+  list-style: none;
+  padding: 0;
+  
+  li {
+    display: flex;
+    justify-content: space-between;
+    margin: 5px 0;
+  }
+}
+
+.label {
+  padding: 4px 5px;
+  border-radius: 3px;
+  color: #fff;
+  font-weight: 400;
+  text-align: center;
+  font-size: .9em;
+  line-height: normal;
+  letter-spacing: .4px;
+  min-width: 25px;
+  display: block;
+
+  /* &.reliable { background-color: #03AB61; } */
+  /* &.neutral { background-color: #616161; } */
+  &.unreliable { background-color: #F44336; }
+}
+
+.descriptionList {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.strongItem {
+  margin-right: 3px;
+}
+
+.descriptionItem {
+  font-size: 0.9em;
+}
+
+.link {
+  color: #2B7EB5;
+  text-decoration: underline;
+  display: block;
+}

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

@@ -0,0 +1,82 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'classnames';
+import { Icon } from 'coral-ui';
+import styles from './KarmaTooltip.css';
+import ClickOutside from 'coral-framework/components/ClickOutside';
+import t from 'coral-framework/services/i18n';
+
+const initialState = { menuVisible: false };
+
+class KarmaTooltip extends React.Component {
+  static propTypes = {
+    thresholds: PropTypes.shape({
+      reliable: PropTypes.number.isRequired,
+      unreliable: PropTypes.number.isRequired,
+    }).isRequired,
+  };
+
+  state = initialState;
+
+  toogleMenu = () => {
+    this.setState({ menuVisible: !this.state.menuVisible });
+  };
+
+  hideMenu = () => {
+    this.setState({ menuVisible: false });
+  };
+
+  render() {
+    const { thresholds: { unreliable } } = this.props;
+    const { menuVisible } = this.state;
+
+    return (
+      <ClickOutside onClickOutside={this.hideMenu}>
+        <div className={cn(styles.karmaTooltip, 'talk-admin-karma-tooltip')}>
+          <span
+            onClick={this.toogleMenu}
+            className={cn(styles.icon, 'talk-admin-karma-tooltip-icon')}
+          >
+            <Icon name="info" />
+          </span>
+
+          {menuVisible && (
+            <div className={cn(styles.menu, 'talk-admin-karma-tooltip-menu')}>
+              <strong>{t('user_detail.user_karma_score')}</strong>
+              <ul>
+                {/* NOTE: we may display this data in the future, keeping around for that eventuality */}
+                {/* <li>
+                  <span>Reliable</span>{' '}
+                  <span className={cn(styles.label, styles.reliable)}>
+                    &ge; {reliable}
+                  </span>
+                </li>
+                <li>
+                  <span>Neutral</span>{' '}
+                  <span className={cn(styles.label, styles.neutral)}>
+                    &lt; {reliable}, &gt; {unreliable}
+                  </span>
+                </li> */}
+                <li>
+                  <span>{t('user_detail.unreliable')}</span>{' '}
+                  <span className={cn(styles.label, styles.unreliable)}>
+                    &le; {unreliable}
+                  </span>
+                </li>
+              </ul>
+              <a
+                className={styles.link}
+                href={t('user_detail.karma_docs_link')}
+                target="_blank"
+              >
+                {t('user_detail.learn_more')}
+              </a>
+            </div>
+          )}
+        </div>
+      </ClickOutside>
+    );
+  }
+}
+
+export default KarmaTooltip;

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

@@ -14,7 +14,8 @@ const RejectButton = ({ active, minimal, onClick, className, disabled }) => {
       className={cn(
         styles.root,
         { [styles.minimal]: minimal, [styles.active]: active },
-        className
+        className,
+        'talk-admin-reject-button'
       )}
       onClick={onClick}
       disabled={disabled || active}

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

@@ -4,6 +4,7 @@ import styles from './SignIn.css';
 import { Button, TextField, Alert } from 'coral-ui';
 import cn from 'classnames';
 import Recaptcha from 'coral-framework/components/Recaptcha';
+import External from './External';
 
 class SignIn extends React.Component {
   recaptcha = null;
@@ -33,48 +34,55 @@ class SignIn extends React.Component {
   render() {
     const { email, password, errorMessage, requireRecaptcha } = this.props;
     return (
-      <form className="talk-admin-login-sign-in" onSubmit={this.handleSubmit}>
-        {errorMessage && <Alert>{errorMessage}</Alert>}
-        <TextField
-          id="email"
-          label="Email Address"
-          value={email}
-          onChange={this.handleEmailChange}
-        />
-        <TextField
-          id="password"
-          label="Password"
-          value={password}
-          onChange={this.handlePasswordChange}
-          type="password"
-        />
-        {requireRecaptcha && (
-          <div className={styles.recaptcha}>
-            <Recaptcha
-              ref={this.handleRecaptchaRef}
-              onVerify={this.props.onRecaptchaVerify}
-            />
-          </div>
-        )}
-        <Button
-          className={cn(styles.signInButton, 'talk-admin-login-sign-in-button')}
-          type="submit"
-          cStyle="black"
-          full
-        >
-          Sign In
-        </Button>
-        <p className={styles.forgotPasswordCTA}>
-          Forgot your password?{' '}
-          <a
-            href="#"
-            className={styles.forgotPasswordLink}
-            onClick={this.handleForgotPasswordLink}
+      <div className="talk-admin-login-sign-in">
+        <External slot="authExternalAdminSignIn" />
+        <form onSubmit={this.handleSubmit}>
+          {errorMessage && <Alert>{errorMessage}</Alert>}
+          <TextField
+            id="email"
+            label="Email Address"
+            value={email}
+            onChange={this.handleEmailChange}
+          />
+          <TextField
+            id="password"
+            label="Password"
+            value={password}
+            onChange={this.handlePasswordChange}
+            type="password"
+          />
+          {requireRecaptcha && (
+            <div className={styles.recaptcha}>
+              <Recaptcha
+                ref={this.handleRecaptchaRef}
+                onVerify={this.props.onRecaptchaVerify}
+              />
+            </div>
+          )}
+          <Button
+            className={cn(
+              styles.signInButton,
+              'talk-admin-login-sign-in-button'
+            )}
+            type="submit"
+            cStyle="black"
+            full
           >
-            Request a new one.
-          </a>
-        </p>
-      </form>
+            Sign In
+          </Button>
+          <p className={styles.forgotPasswordCTA}>
+            {/* TODO: translate */}
+            Forgot your password?{' '}
+            <a
+              href="#"
+              className={styles.forgotPasswordLink}
+              onClick={this.handleForgotPasswordLink}
+            >
+              Request a new one.
+            </a>
+          </p>
+        </form>
+      </div>
     );
   }
 }

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

@@ -35,44 +35,49 @@
   margin-right: 20px;
 }
 
+.karmaStat {
+  display: flex;
+}
+
 .stat:last-child {
   margin-right: 0px;
 }
 
-.statItem,
-.statReportResult {
+.statItem, .statReportResult, .statKarmaResult {
   padding: 3px 5px;
   background-color: #D8D8D8;
   border-radius: 3px;
   font-weight: 500;
-  display: block;
   font-size: 0.9em;
   line-height: normal;
   letter-spacing: 0.4px;
-  min-width: 60px;
+  min-width: 25px;
+  display: block;
 }
 
 .statResult {
   font-size: 1.5em;
   padding: 5px 0;
   display: inline-block;
+  text-align: center; 
 }
 
-.statReportResult {
+.statReportResult, .statKarmaResult {
   color: white;
   margin: 5px 0;
   font-weight: 400;
+  text-align: center;
 }
 
-.statReportResult.reliable {
-  background-color: #749C48;
+.statReportResult.reliable, .statKarmaResult.good {
+  background-color: #03AB61;
 }
 
-.statReportResult.neutral {
+.statReportResult.neutral, .statKarmaResult.neutral {
   background-color: #616161;
 }
 
-.statReportResult.unreliable {
+.statReportResult.unreliable, .statKarmaResult.bad {
   background-color: #F44336;
 }
 
@@ -143,3 +148,7 @@
   border-color: #E45241;
   color: white;
 }
+
+.userDetailItem {
+  padding: 2px 0;
+}

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

@@ -3,14 +3,10 @@ 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 {
-  getReliability,
-  isSuspended,
-  isBanned,
-} from 'coral-framework/utils/user';
+import { isSuspended, isBanned, getKarma } from 'coral-framework/utils/user';
 import ButtonCopyToClipboard from './ButtonCopyToClipboard';
 import ClickOutside from 'coral-framework/components/ClickOutside';
 import {
@@ -25,29 +21,10 @@ import {
 import ActionsMenu from 'coral-admin/src/components/ActionsMenu';
 import ActionsMenuItem from 'coral-admin/src/components/ActionsMenuItem';
 import UserInfoTooltip from './UserInfoTooltip';
+import KarmaTooltip from './KarmaTooltip';
 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);
   };
@@ -99,7 +76,13 @@ class UserDetail extends React.Component {
   renderLoaded() {
     const {
       root,
-      root: { me, user, totalComments, rejectedComments },
+      root: {
+        me,
+        user,
+        totalComments,
+        rejectedComments,
+        settings: { karmaThresholds },
+      },
       activeTab,
       selectedCommentIds,
       toggleSelect,
@@ -110,6 +93,10 @@ class UserDetail extends React.Component {
       unbanUser,
       unsuspendUser,
       modal,
+      acceptComment,
+      rejectComment,
+      bulkAccept,
+      bulkReject,
     } = this.props;
 
     // if totalComments is 0, you're dividing by zero
@@ -193,7 +180,7 @@ class UserDetail extends React.Component {
 
           <div>
             <ul className={styles.userDetailList}>
-              <li>
+              <li className={styles.userDetailItem}>
                 <Icon name="assignment_ind" />
                 <span className={styles.userDetailItem}>
                   {t('user_detail.member_since')}:
@@ -201,11 +188,24 @@ class UserDetail extends React.Component {
                 {new Date(user.created_at).toLocaleString()}
               </li>
 
-              {user.profiles.map(({ id }) => (
-                <li key={id}>
-                  <Icon name="email" />
+              <li className={styles.userDetailItem}>
+                <Icon name="email" />
+                <span className={styles.userDetailItem}>
+                  {t('user_detail.email')}:
+                </span>
+                {user.email}{' '}
+                <ButtonCopyToClipboard
+                  className={styles.copyButton}
+                  icon="content_copy"
+                  copyText={user.email}
+                />
+              </li>
+
+              {user.profiles.map(({ provider, id }) => (
+                <li key={id} className={styles.userDetailItem}>
+                  <Icon name="device_hub" />
                   <span className={styles.userDetailItem}>
-                    {t('user_detail.email')}:
+                    {capitalize(provider)} {t('user_detail.id')}:
                   </span>
                   {id}{' '}
                   <ButtonCopyToClipboard
@@ -232,18 +232,21 @@ class UserDetail extends React.Component {
                   {rejectedPercent.toFixed(1)}%
                 </span>
               </li>
-              <li className={styles.stat}>
-                <span className={styles.statItem}>
-                  {t('user_detail.reports')}
-                </span>
-                <span
-                  className={cn(
-                    styles.statReportResult,
-                    styles[getReliability(user.reliable.flagger)]
-                  )}
-                >
-                  {capitalize(getReliability(user.reliable.flagger))}
-                </span>
+              <li className={cn(styles.stat, styles.karmaStat)}>
+                <div>
+                  <span className={styles.statItem}>
+                    {t('user_detail.karma')}
+                  </span>
+                  <span
+                    className={cn(
+                      styles.statKarmaResult,
+                      styles[getKarma(user.reliable.commenter)]
+                    )}
+                  >
+                    {user.reliable.commenterKarma}
+                  </span>
+                </div>
+                <KarmaTooltip thresholds={karmaThresholds.comment} />
               </li>
             </ul>
           </div>
@@ -286,7 +289,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 +307,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 +325,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/BanUserDialog.js

@@ -12,7 +12,7 @@ import { compose } from 'react-apollo';
 import t from 'coral-framework/services/i18n';
 
 class BanUserDialogContainer extends Component {
-  banUser = async () => {
+  banUser = async ({ message }) => {
     const {
       userId,
       commentId,
@@ -21,7 +21,7 @@ class BanUserDialogContainer extends Component {
       setCommentStatus,
       hideBanUserDialog,
     } = this.props;
-    await banUser({ id: userId, message: '' });
+    await banUser({ id: userId, message });
     hideBanUserDialog();
     if (commentId && commentStatus && commentStatus !== 'REJECTED') {
       await setCommentStatus({ commentId, status: 'REJECTED' });

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/SignIn.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { withSignIn } from 'coral-framework/hocs';
+import { withSignIn, withPopupAuthHandler } from 'coral-framework/hocs';
 import { compose } from 'recompose';
 import SignIn from '../components/SignIn';
 
@@ -55,4 +55,4 @@ SignInContainer.propTypes = {
   requireRecaptcha: PropTypes.bool.isRequired,
 };
 
-export default compose(withSignIn)(SignInContainer);
+export default compose(withSignIn, withPopupAuthHandler)(SignInContainer);

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`
@@ -178,12 +179,14 @@ export const withUserDetailQuery = withQuery(
       id
       username
       created_at
+      email
       profiles {
         id
         provider
       }
       reliable {
-        flagger
+        commenter
+        commenterKarma
       }
       state {
         status {
@@ -224,6 +227,14 @@ export const withUserDetailQuery = withQuery(
       }
       ${getSlotFragmentSpreads(slots, 'user')}
     }
+    settings {
+      karmaThresholds {
+        comment {
+          reliable
+          unreliable
+        }
+      }
+    }
     me {
       id
     }
@@ -245,7 +256,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

@@ -24,6 +24,25 @@ const userRoleFragment = gql`
   }
 `;
 
+/**
+ * calculateReliability will determine the reliability of a karma score based on
+ * the settings for the karma type.
+ *
+ * @param {Number} karma - the current karma value/score for the given user
+ * @param {Object} thresholds - the karma thresholds to base the karma computation on
+ */
+const calculateReliability = (karma, { reliable, unreliable }) => {
+  if (karma >= reliable) {
+    return true;
+  }
+
+  if (karma <= unreliable) {
+    return false;
+  }
+
+  return null;
+};
+
 export default {
   mutations: {
     SetUserRole: ({ variables: { id, role } }) => ({
@@ -156,7 +175,9 @@ export default {
           }
           const updated = update(prev, {
             users: {
-              nodes: { $apply: nodes => nodes.filter(node => node.id !== id) },
+              nodes: {
+                $apply: nodes => nodes.filter(node => node.id !== id),
+              },
             },
           });
           return updated;
@@ -185,7 +206,9 @@ export default {
           const updated = update(prev, {
             ...decrement,
             flaggedUsers: {
-              nodes: { $apply: nodes => nodes.filter(node => node.id !== id) },
+              nodes: {
+                $apply: nodes => nodes.filter(node => node.id !== id),
+              },
             },
           });
           return updated;
@@ -291,5 +314,62 @@ export default {
         },
       },
     }),
+    SetCommentStatus: ({ variables: { status } }) => ({
+      updateQueries: {
+        CoralAdmin_UserDetail: prev => {
+          const increment = {
+            user: {
+              reliable: {
+                commenter: {
+                  $set: calculateReliability(
+                    prev.user.reliable.commenterKarma - 1,
+                    prev.settings.karmaThresholds.comment
+                  ),
+                },
+                commenterKarma: {
+                  $apply: count => count - 1,
+                },
+              },
+            },
+            rejectedComments: {
+              $apply: count => (count < prev.totalComments ? count + 1 : count),
+            },
+          };
+
+          const decrement = {
+            user: {
+              reliable: {
+                commenter: {
+                  $set: calculateReliability(
+                    prev.user.reliable.commenterKarma + 1,
+                    prev.settings.karmaThresholds.comment
+                  ),
+                },
+                commenterKarma: {
+                  $apply: count => count + 1,
+                },
+              },
+            },
+            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/Community/components/People.css

@@ -133,6 +133,7 @@ th.header:nth-child(2), th.header:nth-child(3) {
 
 .roleDropdown {
   width: 150px;
+  text-align: left;
 }
 
 .roleOption {

client/coral-admin/src/routes/Community/components/People.js

@@ -130,7 +130,9 @@ class People extends React.Component {
                             {user.username}
                           </button>
                           <span className={styles.email}>
-                            {user.profiles.map(({ id }) => id)}
+                            {user.email
+                              ? user.email
+                              : user.profiles.map(p => p.id).join(', ')}
                           </span>
                         </td>
                         <td className="mdl-data-table__cell--non-numeric">
@@ -200,7 +202,7 @@ class People extends React.Component {
                         </td>
                         <td className="mdl-data-table__cell--non-numeric">
                           <Dropdown
-                            className={cn(
+                            toggleClassName={cn(
                               'talk-admin-community-people-dd-role',
                               styles.roleDropdown
                             )}

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/components/StreamSettings.js

@@ -82,6 +82,20 @@ class StreamSettings extends React.Component {
     this.props.updatePending({ updater });
   };
 
+  updateDisableCommenting = () => {
+    const updater = {
+      disableCommenting: {
+        $set: !this.props.settings.disableCommenting,
+      },
+    };
+    this.props.updatePending({ updater });
+  };
+
+  updateDisableCommentingMessage = value => {
+    const updater = { disableCommentingMessage: { $set: value } };
+    this.props.updatePending({ updater });
+  };
+
   updateAutoClose = () => {
     const updater = {
       autoCloseStream: { $set: !this.props.settings.autoCloseStream },
@@ -192,6 +206,25 @@ class StreamSettings extends React.Component {
            
           {t('configure.edit_comment_timeframe_text_post')}
         </ConfigureCard>
+        <ConfigureCard
+          checked={settings.disableCommenting}
+          onCheckbox={this.updateDisableCommenting}
+          title={t('configure.disable_commenting_title')}
+        >
+          <p>{t('configure.disable_commenting_desc')}</p>
+          <div
+            className={cn(
+              styles.configSettingDisableCommenting,
+              settings.disableCommenting ? null : styles.hidden
+            )}
+          >
+            <MarkdownEditor
+              className={styles.descriptionBox}
+              onChange={this.updateDisableCommentingMessage}
+              value={settings.disableCommentingMessage}
+            />
+          </div>
+        </ConfigureCard>
         <ConfigureCard
           checked={settings.autoCloseStream}
           onCheckbox={this.updateAutoClose}

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/Configure/containers/StreamSettings.js

@@ -39,6 +39,8 @@ export default compose(
         autoCloseStream
         closedTimeout
         closedMessage
+        disableCommenting
+        disableCommentingMessage
         ${getSlotFragmentSpreads(slots, 'settings')}
       }
     `,

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

@@ -1,5 +1,4 @@
 @custom-media --big-viewport (min-width: 780px);
-
 .root {
   border-bottom: 1px solid #e0e0e0;
   font-size: 18px;
@@ -13,7 +12,6 @@
   margin-top: 13px;
   min-height: 0;
   outline: 0;
-
   /*
    Fix rendering issues in Safari by promoting this
    into its own layer.
@@ -21,7 +19,6 @@
    https://www.pivotaltracker.com/story/show/151142211
   */
   transform: translateZ(0);
-
   &:last-child {
     border-bottom: none;
   }
@@ -39,7 +36,6 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-
 }
 
 .author {
@@ -74,7 +70,7 @@
   max-width: 500px;
   font-weight: 300;
   font-size: 16px;
-  word-break: break-all;
+  overflow-wrap: break-word;
 }
 
 .created {
@@ -85,13 +81,16 @@
   font-weight: 300;
 }
 
+.deleted {
+  background-color: #f0f0f0;
+}
+
 .moderateArticle {
   font-size: 14px;
   margin: 10px 0;
   font-weight: 500;
   line-height: 1.2;
   max-width: 500px;
-
   a {
     display: inline-block;
     color: #063b9a;
@@ -99,17 +98,15 @@
     font-weight: 500;
     letter-spacing: .5px;
     margin-left: 10px;
-
     font-size: 13px;
     margin-left: 5px;
     padding-bottom: 0px;
     border-bottom: solid 1px;
     line-height: 16px;
-
     &:hover {
       opacity: .9;
       cursor: pointer;
-     }
+    }
   }
 }
 
@@ -134,12 +131,10 @@
   cursor: pointer;
   font-weight: normal;
   white-space: nowrap;
-
   &:hover {
     text-decoration: underline;
     opacity: .9;
   }
-
   i {
     font-size: 12px;
     position: relative;
@@ -168,7 +163,6 @@
   align-items: center;
   justify-content: flex-end;
   margin-right: 14px;
-
   i {
     margin-right: 5px;
   }
@@ -177,7 +171,6 @@
 @media (--big-viewport) {
   .root {
     margin-bottom: 30px;
-
     &:last-child {
       border-bottom: 1px solid #e0e0e0;
     }
@@ -186,7 +179,6 @@
 
 .commentContent {
   display: flex;
-
   blockquote {
     font-size: inherit;
     line-height: inherit;

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';
@@ -24,6 +24,7 @@ const ModerationMenu = ({ asset = {}, items, getModPath, activeTab }) => {
         >
           {items.map(queue => (
             <Link
+              id={`talk-admin-moderate-tab-${queue.key}`}
               key={queue.key}
               to={getModPath(queue.key, asset.id)}
               className={cn('mdl-tabs__tab', styles.tab, {
@@ -32,7 +33,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

@@ -15,6 +15,7 @@ import {
 } from 'react-virtualized';
 import throttle from 'lodash/throttle';
 import key from 'keymaster';
+import cn from 'classnames';
 
 const hasComment = (nodes, id) => nodes.some(node => node.id === id);
 
@@ -204,7 +205,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 +213,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 +223,7 @@ class ModerationQueue extends React.Component {
       this.scrollToSelectedComment();
     }
 
-    if (moderatedLastComment && hasMoreComment) {
+    if (moderatedLastComment && hasNextPage) {
       this.props.loadMore();
     }
   }
@@ -240,10 +240,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;
@@ -384,6 +381,11 @@ class ModerationQueue extends React.Component {
       ...props
     } = this.props;
 
+    const rootClassName = cn(
+      styles.root,
+      `talk-admin-moderate-queue-${this.props.activeTab}`
+    );
+
     if (comments.length === 0) {
       return (
         <div className={styles.root}>
@@ -405,7 +407,7 @@ class ModerationQueue extends React.Component {
 
       const comment = comments[index];
       return (
-        <div className={styles.root}>
+        <div className={rootClassName}>
           <Comment
             root={this.props.root}
             key={comment.id}
@@ -427,7 +429,7 @@ class ModerationQueue extends React.Component {
     const view = this.state.view;
 
     return (
-      <div className={styles.root}>
+      <div className={rootClassName}>
         <ViewMore
           viewMore={() => this.viewNewComments()}
           count={comments.length - view.length}
@@ -467,7 +469,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-admin/src/routes/Stories/components/Stories.css

@@ -92,9 +92,6 @@
 
 .statusDropdown {
   width: 150px;
-}
-
-.statusDropdownOption {
-  min-width: 100px;
+  text-align: left;
 }
 

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

@@ -22,20 +22,12 @@ class Stories extends Component {
     const closed = !!(closedAt && new Date(closedAt).getTime() < Date.now());
     return (
       <Dropdown
-        className={styles.statusDropdown}
+        toggleClassName={styles.statusDropdown}
         value={closed}
         onChange={value => this.props.onStatusChange(value, id)}
       >
-        <Option
-          value={false}
-          label={t('streams.open')}
-          className={styles.statusDropdownOption}
-        />
-        <Option
-          value={true}
-          label={t('streams.closed')}
-          className={styles.statusDropdownOption}
-        />
+        <Option value={false} label={t('streams.open')} />
+        <Option value={true} label={t('streams.closed')} />
       </Dropdown>
     );
   };

client/coral-auth-callback/src/index.js

@@ -3,32 +3,36 @@ import { getStaticConfiguration } from 'coral-framework/services/staticConfigura
 import { createPostMessage } from 'coral-framework/services/postMessage';
 
 document.addEventListener('DOMContentLoaded', () => {
-  try {
-    const staticConfig = getStaticConfiguration();
-    const { STATIC_ORIGIN: origin } = staticConfig;
-    const postMessage = createPostMessage(origin);
+  const staticConfig = getStaticConfiguration();
+  const { STATIC_ORIGIN: origin } = staticConfig;
+  const postMessage = createPostMessage(origin);
 
-    // Get the auth element and parse it as JSON by decoding it.
-    const auth = document.getElementById('auth');
-    const doc = document.implementation.createHTMLDocument('');
-    doc.body.innerHTML = auth.innerText;
+  // Get the auth element and parse it as JSON by decoding it.
+  const auth = document.getElementById('auth');
+  const doc = document.implementation.createHTMLDocument('');
+  doc.body.innerHTML = auth.innerText;
 
-    // Auth state is contained within the node.
-    const { err, data } = JSON.parse(doc.body.textContent);
-    if (err) {
-      // TODO: send back the error message.
-      console.error(err);
+  // Auth state is contained within the node.
+  const { err, data } = JSON.parse(doc.body.textContent);
+  if (err) {
+    const errDiv = document.createElement('div');
+    if (err.message) {
+      errDiv.innerText = `${err.name}: ${err.message}`;
     } else {
-      // The data will contain a user and a token.
-      const { user, token } = data;
-
-      // Send the state back.
-      postMessage.post(HANDLE_SUCCESSFUL_LOGIN, { user, token });
+      errDiv.innerText = JSON.stringify(err);
     }
-  } finally {
-    // Always close the window.
-    setTimeout(() => {
-      window.close();
-    }, 50);
+    document.body.appendChild(errDiv);
+    throw err;
   }
+
+  // The data will contain a user and a token.
+  const { user, token } = data;
+
+  // Send the state back.
+  postMessage.post(HANDLE_SUCCESSFUL_LOGIN, { user, token });
+
+  // Close the window when all went well.
+  setTimeout(() => {
+    window.close();
+  }, 50);
 });

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/index.js

@@ -8,6 +8,14 @@ import reducers from './reducers';
 import TalkProvider from 'coral-framework/components/TalkProvider';
 import pluginsConfig from 'pluginsConfig';
 
+// Resolves touch handling issues encountered on IOS Safari under certain
+// circumstances. It may be related to issues reported here:
+//
+//  https://stackoverflow.com/questions/12363742/touchstart-event-is-not-firing-inside-iframe-ios-6
+//
+// Further details: https://www.pivotaltracker.com/story/show/157794038
+document.body.addEventListener('touchstart', () => {});
+
 async function main() {
   const context = await createContext({
     reducers,

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(
@@ -740,10 +745,27 @@ export default class Comment extends React.Component {
 
     const id = `c_${comment.id}`;
 
+    // props that are passed down the slots.
+    const slotPassthrough = {
+      action: 'deleted',
+      comment,
+    };
+
     return (
       <div className={rootClassName} id={id}>
-        {this.renderComment()}
-        {activeReplyBox === comment.id && this.renderReplyBox()}
+        {isCommentDeleted(comment) ? (
+          <Slot
+            fill="commentTombstone"
+            defaultComponent={CommentTombstone}
+            size={1}
+            passthrough={slotPassthrough}
+          />
+        ) : (
+          <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');
     }
@@ -37,6 +39,7 @@ class CommentTombstone extends React.Component {
 
 CommentTombstone.propTypes = {
   action: PropTypes.string,
+  comment: PropTypes.object,
   onUndo: PropTypes.func,
 };
 

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/components/Stream.js

@@ -4,6 +4,7 @@ import StreamError from './StreamError';
 import Comment from '../containers/Comment';
 import BannedAccount from '../../../components/BannedAccount';
 import ChangeUsername from '../containers/ChangeUsername';
+import Markdown from 'coral-framework/components/Markdown';
 import Slot from 'coral-framework/components/Slot';
 import InfoBox from './InfoBox';
 import { can } from 'coral-framework/services/perms';
@@ -181,7 +182,9 @@ class Stream extends React.Component {
                 setActiveReplyBox={setActiveReplyBox}
                 activeReplyBox={activeReplyBox}
                 notify={notify}
-                disableReply={asset.isClosed}
+                disableReply={
+                  asset.isClosed || asset.settings.disableCommenting
+                }
                 postComment={postComment}
                 currentUser={currentUser}
                 postFlag={postFlag}
@@ -215,7 +218,7 @@ class Stream extends React.Component {
       currentUser,
     } = this.props;
     const { keepCommentBox } = this.state;
-    const open = !asset.isClosed;
+    const open = !(asset.isClosed || asset.settings.disableCommenting);
 
     const banned = get(currentUser, 'status.banned.status');
     const suspensionUntil = get(currentUser, 'status.suspension.until');
@@ -293,7 +296,13 @@ class Stream extends React.Component {
             )}
           </div>
         ) : (
-          <p>{asset.settings.closedMessage}</p>
+          <div>
+            {asset.isClosed ? (
+              <p>{asset.settings.closedMessage}</p>
+            ) : (
+              <Markdown content={asset.settings.disableCommentingMessage} />
+            )}
+          </div>
         )}
 
         <Slot fill="stream" passthrough={slotPassthrough} />

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

@@ -24,6 +24,7 @@ const slots = [
   'commentAuthorName',
   'commentAuthorTags',
   'commentTimestamp',
+  'commentTombstone',
   'commentContent',
 ];
 

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 = {
@@ -433,6 +434,8 @@ const fragments = {
         questionBoxIcon
         closedTimeout
         closedMessage
+        disableCommenting
+        disableCommentingMessage
         charCountEnable
         charCount
         requireEmailConfirmation

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/components/TalkProvider.js

@@ -1,5 +1,5 @@
 import React from 'react';
-const PropTypes = require('prop-types');
+import PropTypes from 'prop-types';
 import { ApolloProvider } from 'react-apollo';
 
 class TalkProvider extends React.Component {

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

@@ -116,7 +116,7 @@ export const withRemoveTag = withMutation(
             asset_id: assetId,
             item_type: itemType,
           },
-          o3timisticResponse: {
+          optimisticResponse: {
             removeTag: {
               __typename: 'ModifyTagResponse',
               errors: null,
@@ -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!) {