Merge pull request #1525 from coralproject/storage-fixes

Storage Fixes
version bump
2026-09-13 13:10:43 +08:00 · 2018-04-12 13:50:08 -06:00 · 2018-04-12 13:37:42 -06:00 · 2018-04-12 13:24:56 -06:00 · 2018-04-12 13:22:20 -06:00 · 2018-04-12 12:58:30 -06:00
850 changed files with 25523 additions and 9519 deletions
@@ -1,6 +1,6 @@
 {
  "presets": [
-    ["es2015", {modules: false}]
+    ["es2015", {"modules": false}]
  ],
  "plugins": [
    "transform-class-properties",
@@ -0,0 +1,300 @@
+# job_defaults applies all the defaults for each job.
+job_defaults: &job_defaults
+  working_directory: ~/coralproject/talk
+  docker:
+    - image: circleci/node:8
+
+# integration_environment is the environment that configures the tests.
+integration_environment: &integration_environment
+  NODE_ENV: test
+  CIRCLE_TEST_REPORTS: /tmp/circleci-test-results
+  E2E_MAX_RETRIES: 3
+
+# integration_job runs the integration tests and saves the test results.
+integration_job: &integration_job
+  <<: *job_defaults
+  environment:
+    <<: *integration_environment
+  docker:
+    # TODO: replace with node:8-browsers when build issues are resolved.
+    # - image: circleci/node:8-browsers
+    - image: coralproject/ci
+    - image: circleci/mongo:3
+    - image: circleci/redis:4-alpine
+  steps:
+    - checkout
+    - attach_workspace:
+        at: ~/coralproject/talk
+    - run:
+        name: Setup the database with defaults
+        command: ./bin/cli setup --defaults
+    - run:
+        name: Run the integration tests
+        command: bash .circleci/e2e.sh
+    - store_test_results:
+        when: always
+        path: /tmp/circleci-test-results
+    - store_artifacts:
+        when: always
+        path: /tmp/circleci-test-results
+
+
+version: 2
+jobs:
+  # npm_dependencies will install the dependencies used by all other steps.
+  npm_dependencies:
+    <<: *job_defaults
+    steps:
+      - checkout
+      - attach_workspace:
+          at: ~/coralproject/talk
+      - restore_cache:
+          key: dependency-cache-{{ checksum "yarn.lock" }}
+      - run:
+          name: Install dependencies
+          command: |
+            yarn global add node-gyp &&
+            yarn install --frozen-lockfile
+      - save_cache:
+          key: dependency-cache-{{ checksum "yarn.lock" }}
+          paths:
+            - ./node_modules
+      - persist_to_workspace:
+          root: .
+          paths: node_modules
+
+  # lint will perform file linting.
+  lint:
+    <<: *job_defaults
+    steps:
+      - checkout
+      - attach_workspace:
+          at: ~/coralproject/talk
+      - run:
+          name: Perform linting
+          command: yarn lint
+
+  # build_assets will build the static assets.
+  build_assets:
+    <<: *job_defaults
+    steps:
+      - checkout
+      - attach_workspace:
+          at: ~/coralproject/talk
+      - restore_cache:
+          keys:
+            - build-cache-{{ .Branch }}-{{ .Revision }}
+            - build-cache-{{ .Branch }}-
+            - build-cache-
+      - run:
+          name: Build static assets
+          command: yarn build
+      - save_cache:
+          key: build-cache-{{ .Branch }}-{{ .Revision }}
+          paths:
+            - ./node_modules/.cache/babel-loader
+      - persist_to_workspace:
+          root: .
+          paths: dist
+
+  # test_unit will run the unit tests.
+  test_unit:
+    <<: *job_defaults
+    docker:
+      - image: circleci/node:8
+      - image: circleci/mongo:3
+      - image: circleci/redis:4-alpine
+    steps:
+      - checkout
+      - attach_workspace:
+          at: ~/coralproject/talk
+      - run:
+          name: Setup the test results directory
+          command: mkdir -p /tmp/circleci-test-results
+      - run:
+          name: Run the client unit tests
+          command: yarn test:client --ci
+          environment:
+            JEST_JUNIT_OUTPUT: /tmp/circleci-test-results/jest/test-results.xml
+            JEST_REPORTER: jest-junit
+      - run:
+          name: Run the server unit tests
+          command: yarn test:server
+          environment:
+            MOCHA_FILE: /tmp/circleci-test-results/mocha/test-results.xml
+            MOCHA_REPORTER: mocha-junit-reporter
+      - store_test_results:
+          when: always
+          path: /tmp/circleci-test-results
+
+  # test_integration_chrome_local will run the integration tests locally with
+  # chrome headless.
+  test_integration_chrome_local:
+    <<: *integration_job
+    environment:
+      <<: *integration_environment
+      E2E_BROWSERS: chrome
+
+  # test_integration_firefox_local will run the integration tests locally with
+  # firefox headless.
+  test_integration_firefox_local:
+    <<: *integration_job
+    environment:
+      <<: *integration_environment
+      E2E_BROWSERS: firefox
+
+  # test_integration_chrome will run the integration tests with chrome in
+  # browserstack.
+  test_integration_chrome:
+    <<: *integration_job
+    environment:
+      <<: *integration_environment
+      BROWSERSTACK: true
+      E2E_BROWSERS: chrome
+
+  # test_integration_firefox will run the integration tests with firefox in
+  # browserstack.
+  test_integration_firefox:
+    <<: *integration_job
+    environment:
+      <<: *integration_environment
+      BROWSERSTACK: true
+      E2E_BROWSERS: firefox
+
+  # test_integration_edge will run the integration tests with edge in
+  # browserstack.
+  test_integration_edge:
+    <<: *integration_job
+    environment:
+      <<: *integration_environment
+      BROWSERSTACK: true
+      E2E_BROWSERS: edge
+
+  # test_integration_ie will run the integration tests with ie in
+  # browserstack.
+  test_integration_ie:
+    <<: *integration_job
+    environment:
+      <<: *integration_environment
+      BROWSERSTACK: true
+      E2E_BROWSERS: ie
+      # TODO: remove when more reliable
+      E2E_MAX_RETRIES: 1
+
+  # test_integration_safari will run the integration tests with safari in
+  # browserstack.
+  test_integration_safari:
+    <<: *integration_job
+    environment:
+      <<: *integration_environment
+      BROWSERSTACK: true
+      E2E_BROWSERS: safari
+      # TODO: remove when more reliable
+      E2E_MAX_RETRIES: 1
+
+  # deploy will deploy the application as a docker image.
+  deploy:
+    <<: *job_defaults
+    steps:
+      - checkout
+      - setup_remote_docker
+      - run:
+          name: Deploy the code
+          command: bash ./scripts/docker.sh deploy
+
+# filter_deploy will add the filters for a deploy job in a workflow to make it
+# only execute on a deploy related job.
+filter_deploy: &filter_deploy
+  filters:
+    branches:
+      only:
+        - master
+        - next
+    tags:
+      only: /v[0-9]+(\.[0-9]+)*/
+
+# filter_develop will add the filters for a development related commit.
+filter_develop: &filter_develop
+  filters:
+    branches:
+      ignore:
+        - master
+        - next
+
+workflows:
+  version: 2
+
+  # All PR's will hit this workflow.
+  build-and-test:
+    jobs:
+      - npm_dependencies:
+          <<: *filter_develop
+      - lint:
+          <<: *filter_develop
+          requires:
+            - npm_dependencies
+      - test_unit:
+          <<: *filter_develop
+          requires:
+            - npm_dependencies
+      - build_assets:
+          <<: *filter_develop
+          requires:
+            - npm_dependencies
+      - test_integration_chrome_local:
+          <<: *filter_develop
+          requires:
+            - build_assets
+      # TODO: uncomment when more reliable
+      # - test_integration_firefox_local:
+      #     <<: *filter_develop
+      #     requires:
+      #       - build_assets
+  deploy-tagged:
+    jobs:
+      - npm_dependencies:
+          <<: *filter_deploy
+      - lint:
+          <<: *filter_deploy
+          requires:
+            - npm_dependencies
+      - test_unit:
+          <<: *filter_deploy
+          requires:
+            - npm_dependencies
+      - build_assets:
+          <<: *filter_deploy
+          requires:
+            - npm_dependencies
+      - test_integration_chrome:
+          <<: *filter_deploy
+          requires:
+            - build_assets
+      - test_integration_firefox:
+          <<: *filter_deploy
+          requires:
+            - build_assets
+      - test_integration_edge:
+          <<: *filter_deploy
+          requires:
+            - build_assets
+      # TODO: uncomment when more reliable
+      # - test_integration_ie:
+      #    <<: *filter_deploy
+      #    requires:
+      #      - build_assets
+      # - test_integration_safari:
+      #    <<: *filter_deploy
+      #    requires:
+      #      - build_assets
+      - deploy:
+          <<: *filter_deploy
+          requires:
+            - lint
+            - test_unit
+            - test_integration_chrome
+            - test_integration_firefox
+            - test_integration_edge
+            # TODO: uncomment when more reliable
+            # - test_integration_ie
+            # - test_integration_safari
@@ -19,11 +19,11 @@ if [[ "${E2E_DISABLE}" == "true" ]]; then
  exit
 fi

-if [[ "${CIRCLE_BRANCH}" == "master" && -n "$BROWSERSTACK_KEY" ]]; then
+if [[ "$BROWSERSTACK" == "true" && -n "$BROWSERSTACK_KEY" ]]; then
  echo Testing on browserstack
-  yarn e2e --reports-folder "$REPORTS_FOLDER" --bs-key "$BROWSERSTACK_KEY" --retries "$E2E_MAX_RETRIES" --timeout "$E2E_WAIT_FOR_TIMEOUT" --browsers "$E2E_BROWSERS"
+  node scripts/e2e.js --reports-folder "$REPORTS_FOLDER" --retries "$E2E_MAX_RETRIES" --timeout "$E2E_WAIT_FOR_TIMEOUT" --browsers "$E2E_BROWSERS" --browserstack
 else
-  # When browserstack is not available test locally using chrome headless.
+  # When browserstack is not available test locally.
  echo Testing locally
-  yarn e2e --reports-folder "$REPORTS_FOLDER" --retries "$E2E_MAX_RETRIES" --headless
+  node scripts/e2e.js --reports-folder "$REPORTS_FOLDER" --retries "$E2E_MAX_RETRIES" --timeout "$E2E_WAIT_FOR_TIMEOUT" --browsers "$E2E_BROWSERS" --headless
 fi
@@ -1,34 +1,5 @@
 **/*.html
 dist
-docs
 node_modules
-plugins/*
 public
-
-!plugins/talk-plugin-akismet
-!plugins/talk-plugin-auth
-!plugins/talk-plugin-author-menu
-!plugins/talk-plugin-comment-content
-!plugins/talk-plugin-deep-reply-count
-!plugins/talk-plugin-facebook-auth
-!plugins/talk-plugin-featured-comments
-!plugins/talk-plugin-flag-details
-!plugins/talk-plugin-ignore-user
-!plugins/talk-plugin-like
-!plugins/talk-plugin-love
-!plugins/talk-plugin-member-since
-!plugins/talk-plugin-mod
-!plugins/talk-plugin-moderation-actions
-!plugins/talk-plugin-offtopic
-!plugins/talk-plugin-permalink
-!plugins/talk-plugin-remember-sort
-!plugins/talk-plugin-respect
-!plugins/talk-plugin-sort-most-liked
-!plugins/talk-plugin-sort-most-loved
-!plugins/talk-plugin-sort-most-replied
-!plugins/talk-plugin-sort-most-respected
-!plugins/talk-plugin-sort-newest
-!plugins/talk-plugin-sort-oldest
-!plugins/talk-plugin-subscriber
-!plugins/talk-plugin-toxic-comments
-!plugins/talk-plugin-viewing-options
+**/*.min.js
@@ -1,5 +1,34 @@
-### Expected behavior
+<!--

-### Actual behavior
+  Thank you for filing an issue on Coral Talk!

-### Steps to reproduce behavior
+  Please fill out the questions below so we can take action on your issue as soon as we can.
+
+  If you're filing a feature request, you do not need to follow the outline below. Instead please include "Feature Idea" in your issue title and explain a specific example in which that feature would be useful.
+  
+-->
+
+#### Do you want to request a **feature** or report a **bug**?
+
+
+#### Intended outcome:
+<!--
+What you were trying to accomplish when the bug occurred?
+-->
+
+#### Actual outcome:
+<!--
+What happened instead?
+
+Please provide as much detail as possible, including a screenshot or copy-paste of any related error messages, logs, or other output that might be related. Places to look for information include your browser console, server console, and network logs. The more information you can give the better.
+-->
+
+#### How to reproduce the issue:
+<!--
+Instructions for how the issue can be reproduced by someone from our team or by a contributor. Be as specific as possible, and only mention what is necessary to reproduce the bug. If possible, try to isolate the exact circumstances in which the bug occurs and avoid speculation over what the cause might be.
+-->
+
+#### Version and environment
+<!--
+List what version of Talk you're using, as well as any other relevant environment information, such as operating system or browser
+-->
@@ -6,6 +6,7 @@ npm-debug.log*
 dump.rdb

 client/coral-framework/graphql/introspection.json
+docs/source/_data/introspection.json

 .env
 *.cfg
@@ -14,6 +15,7 @@ client/coral-framework/graphql/introspection.json
 *.swp
 *.DS_STORE
 .prettierrc.json
+.vscode

 coverage/
 test/e2e/reports/
@@ -22,36 +24,49 @@ test/e2e/selenium-debug.log
 browserstack.err

 plugins.json
+
 plugins/*
 !plugins/talk-plugin-akismet
-!plugins/talk-plugin-facebook-auth
 !plugins/talk-plugin-auth
-!plugins/talk-plugin-respect
-!plugins/talk-plugin-offtopic
-!plugins/talk-plugin-like
-!plugins/talk-plugin-mod
-!plugins/talk-plugin-love
-!plugins/talk-plugin-viewing-options
+!plugins/talk-plugin-author-menu
 !plugins/talk-plugin-comment-content
-!plugins/talk-plugin-permalink
+!plugins/talk-plugin-deep-reply-count
+!plugins/talk-plugin-downvote
+!plugins/talk-plugin-facebook-auth
 !plugins/talk-plugin-featured-comments
-!plugins/talk-plugin-toxic-comments
-!plugins/talk-plugin-sort-newest
-!plugins/talk-plugin-sort-oldest
-!plugins/talk-plugin-sort-most-replied
+!plugins/talk-plugin-flag-details
+!plugins/talk-plugin-google-auth
+!plugins/talk-plugin-ignore-user
+!plugins/talk-plugin-like
+!plugins/talk-plugin-love
+!plugins/talk-plugin-member-since
+!plugins/talk-plugin-mod
+!plugins/talk-plugin-moderation-actions
+!plugins/talk-plugin-notifications
+!plugins/talk-plugin-notifications-category-featured
+!plugins/talk-plugin-notifications-category-reply
+!plugins/talk-plugin-notifications-category-staff
+!plugins/talk-plugin-notifications-digest-daily
+!plugins/talk-plugin-notifications-digest-hourly
+!plugins/talk-plugin-offtopic
+!plugins/talk-plugin-permalink
+!plugins/talk-plugin-profile-settings
+!plugins/talk-plugin-remember-sort
+!plugins/talk-plugin-respect
+!plugins/talk-plugin-slack-notifications
+!plugins/talk-plugin-sort-most-downvoted
 !plugins/talk-plugin-sort-most-liked
 !plugins/talk-plugin-sort-most-loved
+!plugins/talk-plugin-sort-most-replied
 !plugins/talk-plugin-sort-most-respected
-!plugins/talk-plugin-author-menu
-!plugins/talk-plugin-member-since
-!plugins/talk-plugin-ignore-user
-!plugins/talk-plugin-moderation-actions
-!plugins/talk-plugin-toxic-comments
-!plugins/talk-plugin-remember-sort
-!plugins/talk-plugin-deep-reply-count
+!plugins/talk-plugin-sort-most-upvoted
+!plugins/talk-plugin-sort-newest
+!plugins/talk-plugin-sort-oldest
 !plugins/talk-plugin-subscriber
-!plugins/talk-plugin-flag-details
-!plugins/talk-plugin-slack-notifications
+!plugins/talk-plugin-toxic-comments
+!plugins/talk-plugin-upvote
+!plugins/talk-plugin-viewing-options
+!plugins/talk-plugin-rich-text

 **/node_modules/*
 yarn-error.log
@@ -0,0 +1,13 @@
+{
+  "linters": {
+    "*.js": [
+      "git-exec-and-restage eslint --fix --"
+    ],
+    "bin/cli*": [
+      "git-exec-and-restage eslint --fix --"
+    ],
+    "*.yml": [
+      "yamllint"
+    ]
+  }
+}
@@ -1,7 +1,6 @@
 {
  "exec": "npm-run-all --parallel generate-introspection start:development",
-  "verbose": true,
-  "ignore": ["test/*", "client/*", "dist/*", "plugins/*/client"],
+  "ignore": ["test/*", "client/*", "dist/*", "plugins/*/client", "docs/*"],
  "ext": "js,json,graphql,yml",
  "watch": [
    ".",
@@ -1,6 +1,7 @@
 {
  "exceptions": [
    "https://nodesecurity.io/advisories/531",
-    "https://nodesecurity.io/advisories/532"
+    "https://nodesecurity.io/advisories/532",
+    "https://nodesecurity.io/advisories/566"
  ]
 }
@@ -54,12 +54,12 @@ We are looking for _documentarians_ to:
 * take the lead in making sections, or the over all structure better.

 Our documentation is stored in markdown files in the [docs](docs) directory. We
-use Jekyll to provide our docs. To preview:
+use [Hexo](https://hexo.io/) to provide our docs. To preview:

 ```shell
 cd docs
-bundle install
-bundle exec jekyll serve
+yarn
+yarn start
 ```

 Then visit http://127.0.0.1:4000/talk/.
@@ -15,10 +15,13 @@ COPY . /usr/src/app
 # Ensure the runtime of the container is in production mode.
 ENV NODE_ENV production

+# Store the current git revision.
+ARG REVISION_HASH
+ENV REVISION_HASH=${REVISION_HASH}
+
 # Install app dependencies and build static assets.
 RUN yarn global add node-gyp && \
    yarn install --frozen-lockfile && \
-    cli plugins reconcile && \
    yarn build && \
    yarn cache clean

@@ -1,6 +1,9 @@
 FROM coralproject/talk:latest

 # Setup the build arguments
+ONBUILD ARG TALK_ADDTL_COMMENTS_ON_LOAD_MORE=10
+ONBUILD ARG TALK_ASSET_COMMENTS_LOAD_DEPTH=10
+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
@@ -15,5 +18,6 @@ ONBUILD COPY . /usr/src/app
 # clear out the development dependencies again. After this we of course need to
 # clear out the yarn cache, this saves quite a lot of size.
 ONBUILD RUN cli plugins reconcile && \
+            yarn && \
            yarn build && \
            yarn cache clean
@@ -1,4 +1,4 @@
-# Talk &middot; [![CircleCI](https://circleci.com/gh/coralproject/talk.svg?style=svg)](https://circleci.com/gh/coralproject/talk) &middot; [![NSP Status](https://nodesecurity.io/orgs/coralproject/projects/07ce2e4c-99fb-48f8-b50b-69d2d2c081b8/badge)](https://nodesecurity.io/orgs/coralproject/projects/07ce2e4c-99fb-48f8-b50b-69d2d2c081b8) &middot; [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](CONTRIBUTING.md#pull-requests)
+# Talk &middot; [![CircleCI](https://circleci.com/gh/coralproject/talk.svg?style=svg)](https://circleci.com/gh/coralproject/talk) &middot; [![NSP Status](https://nodesecurity.io/orgs/coralproject/projects/7bd7d26c-47ed-4a5f-8c4a-b919bf1c2946/badge)](https://nodesecurity.io/orgs/coralproject/projects/7bd7d26c-47ed-4a5f-8c4a-b919bf1c2946) &middot; [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](CONTRIBUTING.md#pull-requests)

 Online comments are broken. Our open-source commenting platform, Talk, rethinks how moderation, comment display, and conversation function, creating the opportunity for safer, smarter discussions around your work. [Read more about Talk here](https://coralproject.net/products/talk.html).

@@ -12,19 +12,23 @@ You're just one click away from trying Talk - all you need is a Heroku account a

 ## Technical Documentation

-From getting up and running, to advanced configuration, to how to scale Talk, our [Talk Technical Docs](https://coralproject.github.io/talk/) have everything you need to know.
+From getting up and running, to advanced configuration, to how to scale Talk, our [Talk Technical Docs](https://docs.coralproject.net/talk/) have everything you need to know.

 ## Product Guide

-Learn more about Talk, including a deep dive into features for commenters and moderators, and FAQs in our [Talk Product Guide](https://coralproject.github.io/talk/how-talk-works).
+Learn more about Talk, including a deep dive into features for commenters and moderators, and FAQs in our [Talk Product Guide](https://docs.coralproject.net/talk/how-talk-works).

-## Relevant Links
+## Pre-Launch Guide

+You’ve installed Talk on your server, and you’re preparing to launch it on your site. The real community work starts now, before you go live. You have a unique opportunity pre-launch to set your community up for success. Read our [Talk Community Guide](https://blog.coralproject.net/youve-installed-talk-now-what/).
+
+## More Resources
+
+- [Talk Product Roadmap](https://www.pivotaltracker.com/n/projects/1863625)
 - [Our Blog](https://blog.coralproject.net/)
 - [Community Forums](https://community.coralproject.net/)
 - [Community Guides for Journalism](https://guides.coralproject.net/)
 - [More About Us](https://coralproject.net/)
- [Talk Roadmap](https://www.pivotaltracker.com/n/projects/1863625)

 ## End-to-End Testing

@@ -1,11 +1,10 @@
 const express = require('express');
-const morgan = require('morgan');
+const trace = require('./middleware/trace');
+const logging = require('./middleware/logging');
 const path = require('path');
-const uuid = require('uuid');
 const merge = require('lodash/merge');
 const helmet = require('helmet');
 const plugins = require('./services/plugins');
-const compression = require('compression');
 const { HELMET_CONFIGURATION } = require('./config');
 const { MOUNT_PATH } = require('./url');
 const routes = require('./routes');
@@ -14,12 +13,9 @@ const { ENABLE_TRACING, APOLLO_ENGINE_KEY, PORT } = require('./config');

 const app = express();

-// Request Identity Middleware
-app.use((req, res, next) => {
-  req.id = uuid.v4();
-
-  next();
-});
+// Add the trace middleware first, it will create a request ID for each request
+// downstream.
+app.use(trace);

 //==============================================================================
 // PLUGIN PRE APPLICATION MIDDLEWARE
@@ -39,7 +35,7 @@ plugins.get('server', 'app').forEach(({ plugin, app: callback }) => {

 // Add the logging middleware only if we aren't testing.
 if (process.env.NODE_ENV !== 'test') {
-  app.use(morgan('dev'));
+  app.use(logging.log);
 }

 if (ENABLE_TRACING && APOLLO_ENGINE_KEY) {
@@ -72,9 +68,6 @@ app.use(
  )
 );

-// Compress the responses if appropriate.
-app.use(compression());
-
 //==============================================================================
 // VIEW CONFIGURATION
 //==============================================================================
@@ -13,6 +13,7 @@ const CommentModel = require('../models/comment');
 const AssetsService = require('../services/assets');
 const mongoose = require('../services/mongoose');
 const scraper = require('../services/scraper');
+const Context = require('../graph/context');
 const inquirer = require('inquirer');
 const { URL } = require('url');

@@ -52,22 +53,27 @@ async function refreshAssets(ageString) {
    const ageMs = parseDuration(ageString);
    const age = new Date(now - ageMs);

-    let assets = await AssetModel.find({
-      $or: [
-        {
-          scraped: {
-            $lte: age,
+    let assets = await AssetModel.find(
+      {
+        $or: [
+          {
+            scraped: {
+              $lte: age,
+            },
          },
-        },
-        {
-          scraped: null,
-        },
-      ],
-    });
+          {
+            scraped: null,
+          },
+        ],
+      },
+      { id: 1 }
+    );
+
+    // Create a graph context.
+    const ctx = Context.forSystem();

    // Queue all the assets for scraping.
-    await Promise.all(assets.map(scraper.create));
-
+    await Promise.all(assets.map(({ id }) => scraper.create(ctx, id)));
    console.log('Assets were queued to be scraped');
    util.shutdown();
  } catch (e) {
@@ -6,8 +6,7 @@

 const util = require('./util');
 const program = require('commander');
-const scraper = require('../services/scraper');
-const mailer = require('../services/mailer');
+const jobs = require('../jobs');
 const mongoose = require('../services/mongoose');
 const kue = require('../services/kue');

@@ -21,11 +20,8 @@ function processJobs() {
  // started.
  util.onshutdown([() => kue.Task.shutdown()]);

-  // Start the scraper processor.
-  scraper.process();
-
-  // Start the mail processor.
-  mailer.process();
+  // Start the jobs processor.
+  jobs.process();
 }

 /**
@@ -135,22 +135,15 @@ function reconcilePackages({ quiet = false, upgradeRemote = false }) {
  return { local, fetchable, upgradable };
 }

-async function reconcileRemotePlugins({ skipLocal, dryRun, upgradeRemote }) {
-  console.log(
-    `\n[${skipLocal ? '1/2' : '2/3'}] ${emoji.get(
-      'mag'
-    )} Reconciling plugins...`.yellow
-  );
+async function reconcileRemotePlugins({ dryRun, upgradeRemote }) {
+  console.log(`\n['1/2'] ${emoji.get('mag')} Reconciling plugins...`.yellow);
  const { fetchable, upgradable } = reconcilePackages({ upgradeRemote });

-  console.log(
-    `[${skipLocal ? '2/2' : '3/3'}] ${emoji.get('truck')} Fetching plugins...\n`
-      .yellow
-  );
+  console.log(`['2/2'] ${emoji.get('truck')} Fetching plugins...\n`.yellow);

  if (fetchable.length > 0) {
    console.log(
-      `$ yarn add --ignore-scripts ${fetchable.map(
+      `$ yarn add --ignore-scripts --ignore-workspace-root-check ${fetchable.map(
        ({ name, version }) => `${name}@${version}`.cyan
      )}`
    );
@@ -159,6 +152,7 @@ async function reconcileRemotePlugins({ skipLocal, dryRun, upgradeRemote }) {
      let args = [
        'add',
        '--ignore-scripts',
+        '--ignore-workspace-root-check',
        ...fetchable.map(({ name, version }) => `${name}@${version}`),
      ];

@@ -206,98 +200,41 @@ async function reconcileRemotePlugins({ skipLocal, dryRun, upgradeRemote }) {
  return { upgradable, fetchable };
 }

-async function reconcileLocalPlugins({ skipRemote, dryRun }) {
-  console.log(
-    `\n[${skipRemote ? '1/1' : '1/3'}] ${emoji.get(
-      'pick'
-    )} Installing local plugin dependencies...\n`.yellow
-  );
-  const { local } = reconcilePackages({ quiet: true });
-
-  for (let i in local) {
-    let { name } = local[i];
-
-    if (!fs.existsSync(path.join(dir, 'plugins', name, 'package.json'))) {
-      continue;
-    }
-
-    let wd = path.join(dir, 'plugins', name);
-
-    console.log(`$ cd ${wd.cyan} && yarn`);
-
-    if (!dryRun) {
-      let args = [];
-
-      let output = spawn.sync('yarn', args, {
-        stdio: ['ignore', 'pipe', 'inherit'],
-        cwd: wd,
-      });
-
-      if (output.status) {
-        throw new Error(
-          'Could not install local plugin dependencies, errors occurred during install'
-        );
-      }
-
-      console.log(output.stdout.toString());
-    }
-  }
-}
-
 // This traverses the local plugins and installs any dependencies listed there,
 // this only is really needed for plugins that are installed via docker because
 // core plugins will have their dependencies already included in core.
-async function reconcilePluginDeps({
-  skipLocal,
-  skipRemote,
-  dryRun,
-  upgradeRemote,
-}) {
+async function reconcilePluginDeps({ dryRun, upgradeRemote }) {
  try {
    let startTime = new Date();

-    // We don't need to do anything if we skip everything....
-    if (skipLocal && skipRemote) {
-      return;
-    }
-
-    // Traverse local plugins and install dependencies if enabled.
-    if (!skipLocal) {
-      await reconcileLocalPlugins({ skipRemote, dryRun });
-    }
-
    // Locate any external plugins and install them.
-    if (!skipRemote) {
-      const results = await reconcileRemotePlugins({
-        skipLocal,
-        skipRemote,
-        dryRun,
-        upgradeRemote,
-      });
+    const results = await reconcileRemotePlugins({
+      dryRun,
+      upgradeRemote,
+    });

-      let status;
-      if (dryRun) {
-        status = '[dry-run] success'.green;
-      } else {
-        status = 'success'.green;
-      }
-
-      let message;
-      if (results.upgradable.length === 0 && results.fetchable.length === 0) {
-        message = 'Already up-to-date.';
-      } else if (results.upgradable.length === 0) {
-        message = `Fetched ${results.fetchable.length} new plugins.`;
-      } else if (results.fetchable.length === 0) {
-        message = `Upgraded ${results.upgradable.length} new plugins.`;
-      } else {
-        message = `Fetched ${results.fetchable.length} new plugins, upgraded ${
-          results.upgradable.length
-        } plugins.`;
-      }
-
-      console.log(`\n${status} ${message}`);
+    let status;
+    if (dryRun) {
+      status = '[dry-run] success'.green;
+    } else {
+      status = 'success'.green;
    }

+    let message;
+    if (results.upgradable.length === 0 && results.fetchable.length === 0) {
+      message = 'Already up-to-date.';
+    } else if (results.upgradable.length === 0) {
+      message = `Fetched ${results.fetchable.length} new plugins.`;
+    } else if (results.fetchable.length === 0) {
+      message = `Upgraded ${results.upgradable.length} new plugins.`;
+    } else {
+      message = `Fetched ${results.fetchable.length} new plugins, upgraded ${
+        results.upgradable.length
+      } plugins.`;
+    }
+
+    console.log(`\n${status} ${message}`);
+
    let endTime = new Date();

    let totalTime = ((endTime.getTime() - startTime.getTime()) / 1000).toFixed(
@@ -440,16 +377,12 @@ program

 program
  .command('reconcile')
-  .description(
-    'reconciles local plugin dependencies and downloads external plugins'
-  )
+  .description('reconciles dependencies by downloading external plugins')
  .option('-u, --upgrade-remote', 'upgrades remote dependencies')
  .option(
    '-d, --dry-run',
    'does not actually change anything on the filesystem acts only as a simulation'
  )
-  .option('--skip-local', 'skips the local dependancy reconciliation')
-  .option('--skip-remote', 'skips the remote plugin reconciliation')
  .action(reconcilePluginDeps);

 program.parse(process.argv);
@@ -10,6 +10,12 @@ const serve = require('../serve');

 program
  .option('-j, --jobs', 'enable job processing on this thread')
+  .option(
+    '--disabled-jobs <jobs>',
+    'disable jobs specified if the -j option is passed, specified as a comma separated list',
+    val => val.split(','),
+    []
+  )
  .option(
    '-w, --websockets',
    'enable the websocket (subscriptions) handler on this thread'
@@ -17,7 +23,7 @@ program
  .parse(process.argv);

 // Start serving.
-serve({ jobs: program.jobs, websockets: program.websockets }).catch(err => {
+serve(program).catch(err => {
  console.error(err);
  util.shutdown(1);
 });
@@ -14,7 +14,8 @@ 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.
 util.onshutdown([() => mongoose.disconnect()]);
@@ -40,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) {
@@ -184,7 +187,8 @@ const performSetup = async () => {
    },
  ]);

-  let { user: newUser } = await SetupService.setup({
+  const ctx = Context.forSystem();
+  let { user: newUser } = await SetupService.setup(ctx, {
    settings: settings.toObject(),
    user: {
      email: user.email,
@@ -7,8 +7,6 @@
 const util = require('./util');
 const program = require('commander');
 const inquirer = require('inquirer');
-const { graphql } = require('graphql');
-const helpers = require('../services/migration/helpers');
 const { stripIndent } = require('common-tags');
 const Table = require('cli-table');

@@ -21,31 +19,15 @@ inquirer.registerPrompt(
  require('inquirer-autocomplete-prompt')
 );

-const schema = require('../graph/schema');
 const Context = require('../graph/context');
 const UsersService = require('../services/users');
 const UserModel = require('../models/user');
-const CommentModel = require('../models/comment');
-const ActionModel = require('../models/action');
 const USER_ROLES = require('../models/enum/user_roles');
 const mongoose = require('../services/mongoose');

 // Register the shutdown criteria.
 util.onshutdown([() => mongoose.disconnect()]);

-/**
- * transforms a specific action to a removal action on the target model.
- */
-const actionDecrTransformer = ({ item_id, action_type, group_id }) => ({
-  query: { id: item_id },
-  update: {
-    $inc: {
-      [`action_counts.${action_type.toLowerCase()}`]: -1,
-      [`action_counts.${action_type.toLowerCase()}_${group_id.toLowerCase()}`]: -1,
-    },
-  },
-});
-
 /**
 * Deletes a user and cleans up their associated verifications.
 */
@@ -76,66 +58,29 @@ async function deleteUser(userID) {
      return util.shutdown();
    }

-    const { transformSingleWithCursor } = helpers({
-      queryBatchSize: 10000,
-      updateBatchSize: 10000,
-    });
+    const ctx = Context.forSystem();

-    console.warn("Removing user's actions");
-
-    // Remove all actions against comments.
-    await transformSingleWithCursor(
-      ActionModel.collection.find({ user_id: user.id, item_type: 'COMMENTS' }),
-      actionDecrTransformer,
-      CommentModel
+    const { data, errors } = await ctx.graphql(
+      `
+      mutation DeleteUser($user_id: ID!) {
+        delUser(id: $user_id) {
+          errors {
+            translation_key
+          }
+        }
+      }
+    `,
+      { user_id: user.id }
    );
+    if (errors) {
+      throw errors;
+    }

-    // Remove all actions against users.
-    await transformSingleWithCursor(
-      ActionModel.collection.find({ user_id: user.id, item_type: 'USERS' }),
-      actionDecrTransformer,
-      UserModel
-    );
+    if (data.errors) {
+      throw data.errors;
+    }

-    // Remove all the user's actions.
-    await ActionModel.where({ user_id: user.id })
-      .setOptions({ multi: true })
-      .remove();
-
-    console.warn("Removing user's comments");
-
-    // Removes all the user's reply counts on each of the comments that they
-    // have commented on.
-    await transformSingleWithCursor(
-      CommentModel.collection.aggregate([
-        { $match: { author_id: user.id } },
-        {
-          $group: {
-            _id: '$parent_id',
-            count: { $sum: 1 },
-          },
-        },
-      ]),
-      ({ _id: parent_id, count }) => ({
-        query: { id: parent_id },
-        update: {
-          $inc: {
-            reply_count: -1 * count,
-          },
-        },
-      }),
-      CommentModel
-    );
-
-    // Remove all the user's comments.
-    await CommentModel.where({ author_id: user.id })
-      .setOptions({ multi: true })
-      .remove();
-
-    console.warn('Removing the user');
-
-    // Remove the user.
-    await user.remove();
+    console.log('User was deleted.');

    util.shutdown();
  } catch (err) {
@@ -197,7 +142,7 @@ async function searchUsers() {
          value = '';
        }

-        const { data, errors } = await graphql(schema, searchQuery, {}, ctx, {
+        const { data, errors } = await ctx.graphql(searchQuery, {
          value,
        });
        if (errors && errors.length > 0) {
@@ -312,10 +257,59 @@ async function verifyUserEmail(userID, email) {
  }
 }

+/**
+ * createUser will prompt the user for the user information when creating a
+ * local user.
+ */
+async function createUser() {
+  try {
+    const answers = await inquirer.prompt([
+      {
+        name: 'email',
+        message: 'Email',
+      },
+      {
+        name: 'username',
+        message: 'Username',
+      },
+      {
+        name: 'password',
+        message: 'Password',
+        type: 'password',
+      },
+      {
+        name: 'role',
+        message: 'Role',
+        type: 'list',
+        choices: USER_ROLES,
+      },
+    ]);
+
+    const { email, username, password, role } = answers;
+
+    // Create the user.
+    const user = await UsersService.createLocalUser(email, password, username);
+
+    // Set the role.
+    await UsersService.setRole(user.id, role);
+
+    console.log(`Created User[${user.id}]`);
+    util.shutdown(0);
+  } catch (err) {
+    console.error(err);
+    util.shutdown(1);
+  }
+}
+
 //==============================================================================
 // Setting up the program command line arguments.
 //==============================================================================

+program
+  .command('create')
+  .description('creates a local user')
+  .action(createUser);
+
 program
  .command('delete <userID>')
  .description('delete a user')
@@ -12,7 +12,7 @@ class MyPluginComponent extends React.Component {

          <small>
            To read more about plugins check{' '}
-            <a href="https://coralproject.github.io/talk/plugins-client.html">
+            <a href="https://docs.coralproject.net/talk/plugins-client">
              our docs and guides!
            </a>
          </small>
@@ -13,7 +13,7 @@
  };
  ```

-  To read more info on how to build client plugins. Please, go to: https://coralproject.github.io/talk/plugins-client.html
+  To read more info on how to build client plugins. Please, go to: https://docs.coralproject.net/talk/plugins-client
 */

 import MyPluginComponent from './components/MyPluginComponent';
@@ -2,6 +2,7 @@
 require('../services/env');

 const debug = require('debug')('talk:util');
+const { uniq } = require('lodash');

 const util = (module.exports = {});

@@ -23,11 +24,7 @@ util.shutdown = (defaultCode = 0, signal = null) => {

  debug(`${util.toshutdown.length} jobs now being called`);

-  Promise.all(
-    util.toshutdown
-      .map(func => (func ? func(signal) : null))
-      .filter(func => func)
-  )
+  Promise.all(util.toshutdown.map(func => (func ? func(signal) : null)))
    .then(() => {
      debug('Shutdown complete, now exiting');
      process.exit(defaultCode);
@@ -49,14 +46,14 @@ util.onshutdown = jobs => {
  debug(`${jobs.length} jobs registered to be called during shutdown`);

  // Add the new jobs to shutdown to the object reference.
-  util.toshutdown = util.toshutdown.concat(jobs);
+  util.toshutdown = uniq(util.toshutdown.concat(jobs));
 };

 // Attach to the SIGTERM + SIGINT handles to ensure a clean shutdown in the
 // event that we have an external event. SIGUSR2 is called when the app is asked
 // to be 'killed', same procedure here.
-process.on('SIGTERM', () => util.shutdown(0, 'SIGTERM'));
-process.on('SIGINT', () => util.shutdown(0, 'SIGINT'));
+process.once('SIGTERM', () => util.shutdown(0, 'SIGTERM'));
+process.once('SIGINT', () => util.shutdown(0, 'SIGINT'));
 process.once('SIGUSR2', () => util.shutdown(0, 'SIGUSR2'));

 // Makes the script crash on unhandled rejections instead of silently
@@ -1,75 +0,0 @@
-machine:
-  node:
-    version: 8
-  services:
-    - docker
-    - redis
-  environment:
-    PATH: "${PATH}:${HOME}/${CIRCLE_PROJECT_REPONAME}/node_modules/.bin"
-    NODE_ENV: "test"
-    MOCHA_FILE: "${CIRCLE_TEST_REPORTS}/junit/test-results.xml"
-    MOCHA_REPORTER: "mocha-junit-reporter"
-  pre:
-    # TODO: use the following to add in support for MongoDB 3.4.
-    # # Upgrade the database version to 3.4.
-    # - sudo apt-get purge mongodb-org*
-    # - sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 0C49F3730359A14518585931BC711F9BA15703C6
-    # - echo "deb [ arch=amd64 ] http://repo.mongodb.org/apt/ubuntu precise/mongodb-org/3.4 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-3.4.list
-    # - sudo apt-get update
-    # - sudo apt-get install -y mongodb-org
-    # - sudo service mongod restart
-
-    # Force sync the time.
-    - date
-    - sudo service ntp stop
-    - sudo ntpdate -s time.nist.gov
-    - sudo service ntp start
-    - date
-
-    # Install chromium for e2e and remove old google-chrome
-    - sudo rm -rf /opt/google/chrome
-    - sudo rm -f /usr/bin/google-chrome*
-    - sudo apt-get update
-    - sudo apt-get install chromium-browser
-
-dependencies:
-  override:
-
-    # Install node dependencies.
-    - yarn --version
-    - yarn global add node-gyp --force
-    - yarn
-
-  post:
-    # Build the static assets.
-    - yarn build
-    # Lint the project here, before tests are ran.
-    - yarn lint
-
-database:
-  post:
-    # Initialize the settings in the database, this will create indicies for the
-    # database.
-    - ./bin/cli setup --defaults
-    - sleep 2
-
-test:
-  override:
-    # Run the tests using the junit reporter.
-    - yarn test
-    # Run the end to end tests
-    - yarn e2e:ci
-
-deployment:
-  release:
-    tag: /v[0-9]+(\.[0-9]+)*/
-    commands:
-      - bash ./scripts/docker.sh deploy
-
-  latest:
-    branch:
-      - master
-      - next
-    owner: coralproject
-    commands:
-      - bash ./scripts/docker.sh deploy
@@ -2,10 +2,15 @@ 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 { ModerationLayout, Moderation } from 'routes/Moderation';

 import Layout from 'containers/Layout';
@@ -15,7 +20,14 @@ 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} />
+        <IndexRedirect to="stream" />
+      </Route>
+
      <Route path="stories" component={Stories} />

      {/* Community Routes */}
@@ -1,181 +0,0 @@
-import bowser from 'bowser';
-import * as actions from '../constants/auth';
-import t from 'coral-framework/services/i18n';
-import jwtDecode from 'jwt-decode';
-
-//==============================================================================
-// SIGN IN
-//==============================================================================
-
-export const handleLogin = (email, password, recaptchaResponse) => (
-  dispatch,
-  _,
-  { rest, client, localStorage }
-) => {
-  dispatch({ type: actions.LOGIN_REQUEST });
-
-  const params = {
-    method: 'POST',
-    body: {
-      email,
-      password,
-    },
-  };
-
-  if (recaptchaResponse) {
-    params.headers = {
-      'X-Recaptcha-Response': recaptchaResponse,
-    };
-  }
-
-  return rest('/auth/local', params)
-    .then(({ user, token }) => {
-      if (!user) {
-        if (!bowser.safari && !bowser.ios && localStorage) {
-          localStorage.removeItem('token');
-          localStorage.removeItem('exp');
-        }
-        return dispatch(checkLoginFailure('not logged in'));
-      }
-
-      dispatch(handleAuthToken(token));
-      client.resetWebsocket();
-      dispatch(checkLoginSuccess(user));
-    })
-    .catch(error => {
-      console.error(error);
-      const errorMessage = error.translation_key
-        ? t(`error.${error.translation_key}`)
-        : error.toString();
-
-      if (error.translation_key === 'NOT_AUTHORIZED') {
-        // invalid credentials
-        dispatch({
-          type: actions.LOGIN_FAILURE,
-          message: t('error.email_password'),
-        });
-      } else if (error.translation_key === 'LOGIN_MAXIMUM_EXCEEDED') {
-        dispatch({
-          type: actions.LOGIN_MAXIMUM_EXCEEDED,
-          message: t(`error.${error.translation_key}`),
-        });
-      } else {
-        dispatch({
-          type: actions.LOGIN_FAILURE,
-          message: errorMessage,
-        });
-      }
-    });
-};
-
-//==============================================================================
-// FORGOT PASSWORD
-//==============================================================================
-
-const forgotPasswordRequest = () => ({
-  type: actions.FETCH_FORGOT_PASSWORD_REQUEST,
-});
-
-const forgotPasswordSuccess = () => ({
-  type: actions.FETCH_FORGOT_PASSWORD_SUCCESS,
-});
-
-const forgotPasswordFailure = error => ({
-  type: actions.FETCH_FORGOT_PASSWORD_FAILURE,
-  error,
-});
-
-export const requestPasswordReset = email => (dispatch, _, { rest }) => {
-  dispatch(forgotPasswordRequest(email));
-  const redirectUri = location.href;
-
-  return rest('/account/password/reset', {
-    method: 'POST',
-    body: { email, loc: redirectUri },
-  })
-    .then(() => dispatch(forgotPasswordSuccess()))
-    .catch(error => {
-      console.error(error);
-      const errorMessage = error.translation_key
-        ? t(`error.${error.translation_key}`)
-        : error.toString();
-      dispatch(forgotPasswordFailure(errorMessage));
-    });
-};
-
-//==============================================================================
-// CHECK LOGIN
-//==============================================================================
-
-const checkLoginRequest = () => ({
-  type: actions.CHECK_LOGIN_REQUEST,
-});
-
-const checkLoginSuccess = (user, isAdmin) => ({
-  type: actions.CHECK_LOGIN_SUCCESS,
-  user,
-  isAdmin,
-});
-
-const checkLoginFailure = error => ({
-  type: actions.CHECK_LOGIN_FAILURE,
-  error,
-});
-
-export const checkLogin = () => (
-  dispatch,
-  _,
-  { rest, client, localStorage }
-) => {
-  dispatch(checkLoginRequest());
-  return rest('/auth')
-    .then(({ user }) => {
-      if (!user) {
-        if (!bowser.safari && !bowser.ios && localStorage) {
-          localStorage.removeItem('token');
-          localStorage.removeItem('exp');
-        }
-        return dispatch(checkLoginFailure('not logged in'));
-      }
-
-      client.resetWebsocket();
-      dispatch(checkLoginSuccess(user));
-    })
-    .catch(error => {
-      console.error(error);
-      const errorMessage = error.translation_key
-        ? t(`error.${error.translation_key}`)
-        : error.toString();
-      dispatch(checkLoginFailure(errorMessage));
-    });
-};
-
-//==============================================================================
-// LOGOUT
-//==============================================================================
-
-export const logout = () => (dispatch, _, { rest, client, localStorage }) => {
-  return rest('/auth', { method: 'DELETE' }).then(() => {
-    if (localStorage) {
-      localStorage.removeItem('token');
-      localStorage.removeItem('exp');
-    }
-
-    // Reset the websocket.
-    client.resetWebsocket();
-
-    dispatch({ type: actions.LOGOUT });
-  });
-};
-
-//==============================================================================
-// AUTH TOKEN
-//==============================================================================
-
-export const handleAuthToken = token => (dispatch, _, { localStorage }) => {
-  if (localStorage) {
-    localStorage.setItem('exp', jwtDecode(token).exp);
-    localStorage.setItem('token', token);
-  }
-  dispatch({ type: 'HANDLE_AUTH_TOKEN' });
-};
@@ -1,7 +0,0 @@
-export const CONFIG_UPDATED = 'CONFIG_UPDATED';
-
-export const fetchConfig = () => dispatch => {
-  let json = document.getElementById('data');
-  let data = JSON.parse(json.textContent);
-  dispatch({ type: CONFIG_UPDATED, data });
-};
@@ -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 };
 };
@@ -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 });
 };

@@ -15,6 +15,10 @@
  }
 }

+.username {
+  word-break: break-all;
+}
+
 .headerRowItem {
  color: #595959;
  font-weight: bold;
@@ -5,13 +5,16 @@ import styles from './AccountHistory.css';
 import cn from 'classnames';
 import flatten from 'lodash/flatten';
 import orderBy from 'lodash/orderBy';
+import has from 'lodash/has';
 import moment from 'moment';
+import t from 'coral-framework/services/i18n';
+import { Icon } from 'coral-ui';

 const buildUserHistory = (userState = {}) => {
  return orderBy(
    flatten(
      Object.keys(userState.status)
-        .filter(k => k !== '__typename')
+        .filter(k => !k.startsWith('__'))
        .map(k => userState.status[k].history)
    ),
    'created_at',
@@ -19,25 +22,49 @@ const buildUserHistory = (userState = {}) => {
  );
 };

-const buildActionResponse = (typename, until, status) => {
+/** readableDuration returns a readable duration of the suspension/ban in hours or days
+ * @param  {} startDate
+ * @param  {} endDate
+ */
+const readableDuration = (startDate, endDate) => {
+  const dur = moment.duration(moment(endDate).diff(moment(startDate)));
+  const durAsDays = dur.asDays().toFixed(0);
+  const durAsHours = dur.asHours().toFixed(0);
+
+  return durAsHours > 23
+    ? durAsDays > 1
+      ? t('suspenduser.days', durAsDays)
+      : t('suspenduser.day', durAsDays)
+    : durAsHours > 1
+      ? t('suspenduser.hours', durAsHours)
+      : t('suspenduser.hour', durAsHours);
+};
+
+const buildActionResponse = (typename, created_at, until, status) => {
  switch (typename) {
    case 'UsernameStatusHistory':
-      return `Username ${status}`;
+      return t('account_history.username_status', status);
    case 'BannedStatusHistory':
-      return status ? 'User banned' : 'Ban removed';
+      return status
+        ? t('account_history.user_banned')
+        : t('account_history.ban_removed');
    case 'SuspensionStatusHistory':
-      return until ? 'Account Suspended' : 'Suspension removed';
+      return until
+        ? t('account_history.suspended', readableDuration(created_at, until))
+        : t('account_history.suspension_removed');
    default:
      return '-';
  }
 };

-const getModerationValue = (userId, assignedBy = {}) => {
-  if (assignedBy && userId !== assignedBy.id) {
-    return assignedBy.username;
-  }
-  return 'SYSTEM';
-};
+const getModerationValue = assignedBy =>
+  has(assignedBy, 'username') ? (
+    assignedBy.username
+  ) : (
+    <span>
+      <Icon name="computer" /> {t('account_history.system')}
+    </span>
+  );

 class AccountHistory extends React.Component {
  render() {
@@ -52,9 +79,15 @@ class AccountHistory extends React.Component {
              'talk-admin-account-history-header-row'
            )}
          >
-            <div className={styles.headerRowItem}>Date</div>
-            <div className={styles.headerRowItem}>Action</div>
-            <div className={styles.headerRowItem}>Moderation</div>
+            <div className={styles.headerRowItem}>
+              {t('account_history.date')}
+            </div>
+            <div className={styles.headerRowItem}>
+              {t('account_history.action')}
+            </div>
+            <div className={styles.headerRowItem}>
+              {t('account_history.taken_by')}
+            </div>
          </div>
          {userHistory.map(
            ({ __typename, created_at, assigned_by, until, status }) => (
@@ -77,15 +110,16 @@ class AccountHistory extends React.Component {
                    'talk-admin-account-history-row-status'
                  )}
                >
-                  {buildActionResponse(__typename, until, status)}
+                  {buildActionResponse(__typename, created_at, until, status)}
                </div>
                <div
                  className={cn(
                    styles.item,
+                    styles.username,
                    'talk-admin-account-history-row-assigned-by'
                  )}
                >
-                  {getModerationValue(user.id, assigned_by)}
+                  {getModerationValue(assigned_by)}
                </div>
              </div>
            )
@@ -25,37 +25,29 @@ class CommentDetails extends Component {
  };

  render() {
-    const { data, root, comment, clearHeightCache } = this.props;
+    const { root, comment, clearHeightCache } = this.props;
    const { showDetail } = this.state;
-    const queryData = {
+
+    const slotPassthrough = {
+      clearHeightCache,
      root,
      comment,
+      more: showDetail,
    };

    return (
      <div className={styles.root}>
        <IfSlotIsNotEmpty
-          queryData={queryData}
          slot={['adminCommentMoreDetails', 'adminCommentMoreFlagDetails']}
+          passthrough={slotPassthrough}
        >
          <a onClick={this.toggleDetail} className={styles.moreDetail}>
            {showDetail ? t('modqueue.less_detail') : t('modqueue.more_detail')}
          </a>
        </IfSlotIsNotEmpty>
-        <Slot
-          fill="adminCommentDetailArea"
-          data={data}
-          clearHeightCache={clearHeightCache}
-          queryData={queryData}
-          more={showDetail}
-        />
+        <Slot fill="adminCommentDetailArea" passthrough={slotPassthrough} />
        {showDetail && (
-          <Slot
-            fill="adminCommentMoreDetails"
-            data={data}
-            clearHeightCache={clearHeightCache}
-            queryData={queryData}
-          />
+          <Slot fill="adminCommentMoreDetails" passthrough={slotPassthrough} />
        )}
      </div>
    );
@@ -63,7 +55,6 @@ class CommentDetails extends Component {
 }

 CommentDetails.propTypes = {
-  data: PropTypes.object.isRequired,
  root: PropTypes.object.isRequired,
  comment: PropTypes.object.isRequired,
  clearHeightCache: PropTypes.func,
@@ -1,109 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { matchLinks } from '../utils';
-import memoize from 'lodash/memoize';
-
-function escapeRegExp(string) {
-  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
-}
-
-// generate a regulare expression that catches the `phrases`.
-function generateRegExp(phrases) {
-  const inner = phrases
-    .map(phrase =>
-      phrase
-        .split(/\s+/)
-        .map(word => escapeRegExp(word))
-        .join('[\\s"?!.]+')
-    )
-    .join('|');
-
-  const pattern = `(^|[^\\w])(${inner})(?=[^\\w]|$)`;
-  try {
-    return new RegExp(pattern, 'iu');
-  } catch (_err) {
-    // IE does not support unicode support, so we'll create one without.
-    return new RegExp(pattern, 'i');
-  }
-}
-
-// Generate a regular expression detecting `suspectWords` and `bannedWords` phrases.
-function getPhrasesRegexp(suspectWords, bannedWords) {
-  return generateRegExp([...suspectWords, ...bannedWords]);
-}
-
-// Memoized version as arguments rarely change.
-const getPhrasesRegexpMemoized = memoize(getPhrasesRegexp);
-
-// markPhrases looks for `supsectWords` and `bannedWords` inside `body` and highlights them by returning
-// an array of React Elements.
-function markPhrases(body, suspectWords, bannedWords, keyPrefix) {
-  const regexp = getPhrasesRegexpMemoized(suspectWords, bannedWords);
-  const tokens = body.split(regexp);
-  return tokens.map(
-    (token, i) =>
-      i % 3 === 2 ? <mark key={`${keyPrefix}_${i}`}>{token}</mark> : token
-  );
-}
-
-// markLinks looks for links inside `body` and highlights them by returning
-// an array of React Elements.
-function markLinks(body) {
-  const matches = matchLinks(body);
-  const content = [];
-  let index = 0;
-  if (matches) {
-    matches.forEach((match, i) => {
-      content.push(body.substring(index, match.index));
-      content.push(<mark key={i}>{match.text}</mark>);
-      index = match.lastIndex;
-    });
-  }
-  content.push(body.substring(index));
-  return content;
-}
-
-const CommentFormatter = ({
-  body,
-  suspectWords,
-  bannedWords,
-  className = 'comment',
-  ...rest
-}) => {
-  // Breaking the body by line break
-  const textbreaks = body.split('\n');
-
-  return (
-    <span className={`${className}-text`} {...rest}>
-      {textbreaks.map((line, i) => {
-        const content = markLinks(line).map((element, index) => {
-          // Keep highlighted links.
-          if (typeof element !== 'string') {
-            return element;
-          }
-
-          // Highlight suspect and banned phrase inside this part of text.
-          return markPhrases(element, suspectWords, bannedWords, index);
-        });
-
-        return (
-          <span key={i} className={`${className}-line`}>
-            {content}
-            {i !== textbreaks.length - 1 && (
-              <br className={`${className}-linebreak`} />
-            )}
-          </span>
-        );
-      })}
-    </span>
-  );
-};
-
-CommentFormatter.propTypes = {
-  className: PropTypes.string,
-  bannedWords: PropTypes.array,
-  suspectWords: PropTypes.array,
-  body: PropTypes.string,
-};
-
-export default CommentFormatter;
@@ -43,6 +43,9 @@ const CommentLabels = ({
  comment,
  comment: { className, status, actions, hasParent },
 }) => {
+  const slotPassthrough = {
+    comment,
+  };
  return (
    <div className={cn(className, styles.root)}>
      <div className={styles.coreLabels}>
@@ -69,7 +72,7 @@ const CommentLabels = ({
      <Slot
        className={styles.slot}
        fill="adminCommentLabels"
-        queryData={{ comment }}
+        passthrough={slotPassthrough}
      />
    </div>
  );
@@ -7,12 +7,12 @@ import t from 'coral-framework/services/i18n';
 import { can } from 'coral-framework/services/perms';
 import cn from 'classnames';

-const CoralDrawer = ({ handleLogout, auth = {} }) => (
+const CoralDrawer = ({ handleLogout, currentUser }) => (
  <Drawer className={cn('talk-admin-drawer-nav', styles.drawer)}>
-    {auth && auth.user && can(auth.user, 'ACCESS_ADMIN') ? (
+    {currentUser && can(currentUser, 'ACCESS_ADMIN') ? (
      <div>
        <Navigation className={styles.nav}>
-          {can(auth.user, 'MODERATE_COMMENTS') && (
+          {can(currentUser, 'MODERATE_COMMENTS') && (
            <IndexLink
              className={cn('talk-admin-nav-moderate', styles.navLink)}
              to="/admin/moderate"
@@ -35,7 +35,7 @@ const CoralDrawer = ({ handleLogout, auth = {} }) => (
          >
            {t('configure.community')}
          </Link>
-          {can(auth.user, 'UPDATE_CONFIG') && (
+          {can(currentUser, 'UPDATE_CONFIG') && (
            <Link
              className={cn('talk-admin-nav-configure', styles.navLink)}
              to="/admin/configure"
@@ -55,7 +55,7 @@ const CoralDrawer = ({ handleLogout, auth = {} }) => (
 CoralDrawer.propTypes = {
  handleLogout: PropTypes.func.isRequired,
  restricted: PropTypes.bool, // hide app elements from a logged out user
-  auth: PropTypes.object,
+  currentUser: PropTypes.object,
 };

 export default CoralDrawer;
@@ -0,0 +1,8 @@
+.container {
+  max-width: 1280px;
+  margin: 0 auto;
+}
+
+.copy {
+  padding: 20px 0;
+}
@@ -0,0 +1,13 @@
+import React from 'react';
+import styles from './Forbidden.css';
+
+const Forbidden = () => (
+  <div className={styles.container}>
+    <p className={styles.copy}>
+      This page is for team use only. Please contact an administrator if you
+      want to join this team.
+    </p>
+  </div>
+);
+
+export default Forbidden;
@@ -0,0 +1,20 @@
+
+.header, .cta, .success {
+  text-align: center;
+  font-size: 16px;
+}
+
+.success {
+  cursor: pointer;
+  padding: 8px 14px;
+}
+
+.signInLink {
+  color: blue;
+  font-weight: normal;
+  text-decoration: none;
+}
+
+.signInLink:hover {
+  text-decoration: underline;
+}
@@ -0,0 +1,82 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './ForgotPassword.css';
+import { Button, TextField, Alert, Success } from 'coral-ui';
+import t from 'coral-framework/services/i18n';
+
+class ForgotPassword extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  handleEmailChange = e => this.props.onEmailChange(e.target.value);
+
+  handleSubmit = e => {
+    e.preventDefault();
+    this.props.onSubmit();
+  };
+
+  handleSignInLink = e => {
+    e.preventDefault();
+    this.props.onSignInLink();
+  };
+
+  renderSuccess() {
+    return (
+      <div className={styles.success} onClick={this.handleSignInLink}>
+        {t('password_reset.mail_sent')}{' '}
+        <a
+          className={styles.signInLink}
+          href="#"
+          onClick={this.handleSignInLink}
+        >
+          Sign in
+        </a>
+        <Success />
+      </div>
+    );
+  }
+
+  renderForm() {
+    const { email, errorMessage } = this.props;
+    return (
+      <form onSubmit={this.handleSubmit}>
+        {errorMessage && <Alert>{errorMessage}</Alert>}
+        <TextField
+          label="Email Address"
+          value={email}
+          onChange={this.handleEmailChange}
+        />
+        <Button type="submit" cStyle="black" full>
+          Reset Password
+        </Button>
+        <p className={styles.cta}>
+          Go back to{' '}
+          <a
+            href="#"
+            className={styles.signInLink}
+            onClick={this.handleSignInLink}
+          >
+            Sign In
+          </a>
+          .
+        </p>
+      </form>
+    );
+  }
+
+  render() {
+    return this.props.success ? this.renderSuccess() : this.renderForm();
+  }
+}
+
+ForgotPassword.propTypes = {
+  success: PropTypes.bool.isRequired,
+  email: PropTypes.string.isRequired,
+  onEmailChange: PropTypes.func.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  errorMessage: PropTypes.string,
+  onSignInLink: PropTypes.func.isRequired,
+};
+
+export default ForgotPassword;
@@ -13,7 +13,7 @@ import CommunityIndicator from '../routes/Community/containers/Indicator';
 const CoralHeader = ({
  handleLogout,
  showShortcuts = () => {},
-  auth,
+  currentUser,
  root,
  data,
 }) => {
@@ -22,9 +22,9 @@ const CoralHeader = ({
      <Header className={styles.header}>
        <Logo className={styles.logo} />
        <div>
-          {auth && auth.user && can(auth.user, 'ACCESS_ADMIN') ? (
+          {currentUser && can(currentUser, 'ACCESS_ADMIN') ? (
            <Navigation className={styles.nav}>
-              {can(auth.user, 'MODERATE_COMMENTS') && (
+              {can(currentUser, 'MODERATE_COMMENTS') && (
                <IndexLink
                  id="moderateNav"
                  className={cn('talk-admin-nav-moderate', styles.navLink)}
@@ -54,7 +54,7 @@ const CoralHeader = ({
                <CommunityIndicator root={root} data={data} />
              </Link>

-              {can(auth.user, 'UPDATE_CONFIG') && (
+              {can(currentUser, 'UPDATE_CONFIG') && (
                <Link
                  id="configureNav"
                  className={cn('talk-admin-nav-configure', styles.navLink)}
@@ -97,12 +97,14 @@ const CoralHeader = ({
                        Report a bug or give feedback
                      </a>
                    </MenuItem>
-                    <MenuItem
-                      onClick={handleLogout}
-                      className="talk-admin-header-sign-out"
-                    >
-                      {t('configure.sign_out')}
-                    </MenuItem>
+                    {currentUser && (
+                      <MenuItem
+                        onClick={handleLogout}
+                        className="talk-admin-header-sign-out"
+                      >
+                        {t('configure.sign_out')}
+                      </MenuItem>
+                    )}
                  </Menu>
                </div>
              </li>
@@ -116,7 +118,7 @@ const CoralHeader = ({
 };

 CoralHeader.propTypes = {
-  auth: PropTypes.object,
+  currentUser: PropTypes.object,
  showShortcuts: PropTypes.func,
  handleLogout: PropTypes.func.isRequired,
  root: PropTypes.object.isRequired,
@@ -1,5 +1,5 @@
 import React from 'react';
-import { matchLinks } from '../utils';
+import matchLinks from 'coral-framework/utils/matchLinks';

 export default ({ text, children }) => {
  const hasLinks = !!matchLinks(text);
@@ -1,4 +1,6 @@
 .layout {
  margin: 0 auto;
  background-color: #FAFAFA;
-}
+  height: inherit;
+  min-height: calc(100vh - 58px);
+}
@@ -10,22 +10,26 @@ const Layout = ({
  handleLogout = () => {},
  toggleShortcutModal = () => {},
  restricted = false,
-  auth,
+  currentUser,
 }) => (
  <LayoutMDL className={styles.layout} fixedDrawer>
    <Header
      handleLogout={handleLogout}
      showShortcuts={toggleShortcutModal}
-      auth={auth}
+      currentUser={currentUser}
+    />
+    <Drawer
+      handleLogout={handleLogout}
+      restricted={restricted}
+      currentUser={currentUser}
    />
-    <Drawer handleLogout={handleLogout} restricted={restricted} auth={auth} />
    <div className={styles.layout}>{children}</div>
  </LayoutMDL>
 );

 Layout.propTypes = {
  children: PropTypes.node,
-  auth: PropTypes.object,
+  currentUser: PropTypes.object,
  handleLogout: PropTypes.func,
  toggleShortcutModal: PropTypes.func,
  restricted: PropTypes.bool, // hide elements from a user that's logged out
@@ -0,0 +1,18 @@
+.layout {
+  max-width: 400px;
+  margin: 0 auto;
+}
+
+.header, .cta {
+  text-align: center;
+  font-size: 16px;
+}
+
+.layout h1 {
+  font-size: 40px;
+}
+
+.header {
+  font-size: 30px;
+}
+
@@ -0,0 +1,37 @@
+import React, { Component } from 'react';
+import SignIn from '../containers/SignIn';
+import ForgotPassword from '../containers/ForgotPassword';
+import PropTypes from 'prop-types';
+import styles from './Login.css';
+import Layout from 'coral-admin/src/components/Layout';
+import cn from 'classnames';
+
+class LoginContainer extends Component {
+  renderForm() {
+    return this.props.forgotPassword ? (
+      <ForgotPassword onSignInLink={this.props.onSignInLink} />
+    ) : (
+      <SignIn onForgotPasswordLink={this.props.onForgotPasswordLink} />
+    );
+  }
+
+  render() {
+    return (
+      <Layout fixedDrawer restricted={true}>
+        <div className={cn(styles.layout, 'talk-admin-login')}>
+          <h1 className={styles.header}>Team sign in</h1>
+          <p className={styles.cta}>Sign in to interact with your community.</p>
+          {this.renderForm()}
+        </div>
+      </Layout>
+    );
+  }
+}
+
+LoginContainer.propTypes = {
+  forgotPassword: PropTypes.bool.isRequired,
+  onForgotPasswordLink: PropTypes.func.isRequired,
+  onSignInLink: PropTypes.func.isRequired,
+};
+
+export default LoginContainer;
@@ -3,35 +3,3 @@
  margin: 0 auto;
 }

-.loginLayout {
-  max-width: 400px;
-  margin: 0 auto;
-}
-
-.loginHeader, .loginCTA, .forgotPasswordCTA, .passwordRequestSuccess {
-  text-align: center;
-  font-size: 16px;
-}
-
-.forgotPasswordLink, .signInLink {
-  color: blue;
-  font-weight: normal;
-  text-decoration: none;
-}
-
-.forgotPasswordLink:hover, .signInLink:hover {
-  text-decoration: underline;
-}
-
-.layout h1 {
-  font-size: 40px;
-}
-
-.loginHeader {
-  font-size: 30px;
-}
-
-.passwordRequestSuccess {
-  cursor: pointer;
-  padding: 8px 14px;
-}
@@ -0,0 +1,23 @@
+.forgotPasswordCTA {
+  text-align: center;
+  font-size: 16px;
+}
+
+.forgotPasswordLink:hover {
+  text-decoration: underline;
+}
+
+.forgotPasswordLink {
+  color: blue;
+  font-weight: normal;
+  text-decoration: none;
+}
+
+.recaptcha {
+  margin-top: 16px;
+  margin-bottom: 6px;
+}
+
+.signInButton {
+  margin-top: 10px;
+}
@@ -0,0 +1,94 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './SignIn.css';
+import { Button, TextField, Alert } from 'coral-ui';
+import cn from 'classnames';
+import Recaptcha from 'coral-framework/components/Recaptcha';
+
+class SignIn extends React.Component {
+  recaptcha = null;
+
+  handleForgotPasswordLink = e => {
+    e.preventDefault();
+    this.props.onForgotPasswordLink();
+  };
+  handleEmailChange = e => this.props.onEmailChange(e.target.value);
+  handlePasswordChange = e => this.props.onPasswordChange(e.target.value);
+
+  handleSubmit = e => {
+    e.preventDefault();
+    this.props.onSubmit();
+
+    // Reset recaptcha because each response can only
+    // be used once.
+    if (this.recaptcha) {
+      this.recaptcha.reset();
+    }
+  };
+
+  handleRecaptchaRef = ref => {
+    this.recaptcha = ref;
+  };
+
+  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}
+          >
+            Request a new one.
+          </a>
+        </p>
+      </form>
+    );
+  }
+}
+
+SignIn.propTypes = {
+  email: PropTypes.string.isRequired,
+  password: PropTypes.string.isRequired,
+  onEmailChange: PropTypes.func.isRequired,
+  onPasswordChange: PropTypes.func.isRequired,
+  onForgotPasswordLink: PropTypes.func.isRequired,
+  onRecaptchaVerify: PropTypes.func.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  errorMessage: PropTypes.string,
+  requireRecaptcha: PropTypes.bool.isRequired,
+};
+
+export default SignIn;
@@ -98,7 +98,6 @@ class UserDetail extends React.Component {

  renderLoaded() {
    const {
-      data,
      root,
      root: { me, user, totalComments, rejectedComments },
      activeTab,
@@ -123,6 +122,11 @@ class UserDetail extends React.Component {
    const banned = isBanned(user);
    const suspended = isSuspended(user);

+    const slotPassthrough = {
+      root,
+      user,
+    };
+
    return (
      <ClickOutside onClickOutside={modal ? null : hideUserDetail}>
        <Drawer
@@ -244,11 +248,7 @@ class UserDetail extends React.Component {
            </ul>
          </div>

-          <Slot
-            fill="userProfile"
-            data={this.props.data}
-            queryData={{ root, user }}
-          />
+          <Slot fill="userProfile" passthrough={slotPassthrough} />

          <hr />

@@ -301,7 +301,6 @@ class UserDetail extends React.Component {
              <UserDetailCommentList
                user={user}
                root={root}
-                data={data}
                loadMore={loadMore}
                toggleSelect={toggleSelect}
                viewUserDetail={viewUserDetail}
@@ -320,7 +319,6 @@ class UserDetail extends React.Component {
              <UserDetailCommentList
                user={user}
                root={root}
-                data={data}
                loadMore={loadMore}
                toggleSelect={toggleSelect}
                viewUserDetail={viewUserDetail}
@@ -368,9 +366,7 @@ UserDetail.propTypes = {
  bulkReject: PropTypes.func.isRequired,
  toggleSelectAll: PropTypes.func.isRequired,
  loading: PropTypes.bool.isRequired,
-  data: PropTypes.shape({
-    refetch: PropTypes.func.isRequired,
-  }),
+  data: PropTypes.object,
  activeTab: PropTypes.string.isRequired,
  selectedCommentIds: PropTypes.array.isRequired,
  viewUserDetail: PropTypes.any.isRequired,
@@ -78,6 +78,12 @@
  font-weight: 300;
  font-size: 16px;
  max-width: 360px;
+
+  blockquote {
+    font-size: inherit;
+    line-height: inherit;
+    letter-spacing: inherit;
+  }
 }

 .sideActions {
@@ -1,11 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import Slot from 'coral-framework/components/Slot';
 import { Link } from 'react-router';
-
 import { Icon } from 'coral-ui';
 import CommentDetails from './CommentDetails';
 import styles from './UserDetailComment.css';
-import CommentFormatter from 'coral-admin/src/components/CommentFormatter';
+import AdminCommentContent from 'coral-framework/components/AdminCommentContent';
 import IfHasLink from 'coral-admin/src/components/IfHasLink';
 import cn from 'classnames';
 import CommentAnimatedEdit from './CommentAnimatedEdit';
@@ -32,10 +32,17 @@ class UserDetailComment extends React.Component {
      selected,
      toggleSelect,
      className,
-      data,
-      root: { settings: { wordlist: { banned, suspect } } },
+      root: { settings },
    } = this.props;

+    const slotPassthrough = {
+      root,
+      comment,
+      suspectWords: settings.wordlist.suspect,
+      bannedWords: settings.wordlist.banned,
+      body: comment.body,
+    };
+
    return (
      <li
        tabIndex={0}
@@ -68,7 +75,8 @@ class UserDetailComment extends React.Component {
            </div>
          </div>
          <div className={styles.story}>
-            Story: {comment.asset.title}
+            {t('common.story')}:{' '}
+            {comment.asset.title ? comment.asset.title : comment.asset.url}
            {
              <Link to={`/admin/moderate/${comment.asset.id}`}>
                {t('modqueue.moderate')}
@@ -78,11 +86,15 @@ class UserDetailComment extends React.Component {
          <CommentAnimatedEdit body={comment.body}>
            <div className={styles.bodyContainer}>
              <div className={styles.body}>
-                <CommentFormatter
-                  suspectWords={suspect}
-                  bannedWords={banned}
-                  body={comment.body}
-                  className="talk-admin-user-detail-comment"
+                <Slot
+                  fill="userDetailCommentContent"
+                  className={cn(
+                    styles.commentContent,
+                    'talk-admin-user-detail-comment'
+                  )}
+                  size={1}
+                  defaultComponent={AdminCommentContent}
+                  passthrough={slotPassthrough}
                />
                <a
                  className={styles.external}
@@ -95,6 +107,7 @@ class UserDetailComment extends React.Component {
              <div className={styles.sideActions}>
                <IfHasLink text={comment.body}>
                  <span className={styles.hasLinks}>
+                    {/* TODO: translate string */}
                    <Icon name="error_outline" /> Contains Link
                  </span>
                </IfHasLink>
@@ -114,7 +127,7 @@ class UserDetailComment extends React.Component {
            </div>
          </CommentAnimatedEdit>
        </div>
-        <CommentDetails data={data} root={root} comment={comment} />
+        <CommentDetails root={root} comment={comment} />
      </li>
    );
  }
@@ -122,7 +135,6 @@ class UserDetailComment extends React.Component {

 UserDetailComment.propTypes = {
  selected: PropTypes.bool,
-  data: PropTypes.object,
  user: PropTypes.object.isRequired,
  viewUserDetail: PropTypes.func.isRequired,
  acceptComment: PropTypes.func.isRequired,
@@ -9,7 +9,6 @@ import ApproveButton from './ApproveButton';

 const UserDetailCommentList = props => {
  const {
-    data,
    root,
    root: { user, comments: { nodes, hasNextPage } },
    acceptComment,
@@ -70,7 +69,6 @@ const UserDetailCommentList = props => {
            key={comment.id}
            user={user}
            root={root}
-            data={data}
            comment={comment}
            acceptComment={acceptComment}
            rejectComment={rejectComment}
@@ -93,7 +91,6 @@ UserDetailCommentList.propTypes = {
  root: PropTypes.object.isRequired,
  acceptComment: PropTypes.func.isRequired,
  rejectComment: PropTypes.func.isRequired,
-  data: PropTypes.object.isRequired,
  selectedCommentIds: PropTypes.array.isRequired,
  viewUserDetail: PropTypes.any.isRequired,
  loadMore: PropTypes.any.isRequired,
@@ -28,8 +28,8 @@
  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;
-  right: 0px;
-  width: 140px;
+  left: -100px;
+  width: 200px;
  text-align: left;
  color: #616161;
 }
@@ -39,7 +39,7 @@
  border: 10px solid transparent;
  border-top-color: #999;
  position: absolute;
-  right: 0px;
+  left: 96px;
  top: -20px;
  transform: rotate(180deg);
 }
@@ -49,7 +49,7 @@
  border: 10px solid transparent;
  border-top-color: white;
  position: absolute;
-  right: 0px;
+  left: 96px;
  top: -19px;
  transform: rotate(180deg);
 }
@@ -67,7 +67,7 @@ class UserInfoTooltip extends React.Component {
                          new Date(
                            this.getLastHistoryItem(user, 'banned').created_at
                          )
-                        ).format('MMMM Do YYYY, h:mm:ss a')}
+                        ).format('MMM Do YYYY, h:mm:ss a')}
                      </span>
                    </li>
                    <li
@@ -139,7 +139,7 @@ class UserInfoTooltip extends React.Component {
                              'suspension'
                            ).created_at
                          )
-                        ).format('MMMM Do YYYY, h:mm:ss a')}
+                        ).format('MMM Do YYYY, h:mm:ss a')}
                      </span>
                    </li>
                    <li
@@ -154,7 +154,7 @@ class UserInfoTooltip extends React.Component {
                          new Date(
                            this.getLastHistoryItem(user, 'suspension').until
                          )
-                        ).format('MMMM Do YYYY, h:mm:ss a')}
+                        ).format('MMM Do YYYY, h:mm:ss a')}
                      </span>
                    </li>
                  </ul>
@@ -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`;
@@ -0,0 +1,41 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { withForgotPassword } from 'coral-framework/hocs';
+import { compose } from 'recompose';
+import ForgotPassword from '../components/ForgotPassword';
+
+class ForgotPasswordContainer extends Component {
+  state = {
+    email: '',
+  };
+
+  handleSubmit = () => {
+    this.props.forgotPassword(this.state.email);
+  };
+
+  handleEmailChange = email => {
+    this.setState({ email });
+  };
+
+  render() {
+    return (
+      <ForgotPassword
+        onSubmit={this.handleSubmit}
+        onEmailChange={this.handleEmailChange}
+        email={this.state.email}
+        errorMessage={this.props.errorMessage}
+        success={this.props.success}
+        onSignInLink={this.props.onSignInLink}
+      />
+    );
+  }
+}
+
+ForgotPasswordContainer.propTypes = {
+  success: PropTypes.bool.isRequired,
+  forgotPassword: PropTypes.func.isRequired,
+  errorMessage: PropTypes.string,
+  onSignInLink: PropTypes.func.isRequired,
+};
+
+export default compose(withForgotPassword)(ForgotPasswordContainer);
@@ -2,86 +2,56 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import Layout from '../components/Layout';
-import { fetchConfig } from '../actions/config';
-import AdminLogin from '../components/AdminLogin';
+import Login from '../containers/Login';
 import { FullLoading } from '../components/FullLoading';
 import BanUserDialog from './BanUserDialog';
 import SuspendUserDialog from './SuspendUserDialog';
 import { toggleModal as toggleShortcutModal } from '../actions/moderation';
-import {
-  checkLogin,
-  handleLogin,
-  requestPasswordReset,
-  logout,
-} from '../actions/auth';
+import { logout } from 'coral-framework/actions/auth';
 import { can } from 'coral-framework/services/perms';
 import UserDetail from 'coral-admin/src/containers/UserDetail';
 import PropTypes from 'prop-types';
+import Forbidden from '../components/Forbidden';

 class LayoutContainer extends React.Component {
-  componentWillMount() {
-    const { checkLogin, fetchConfig } = this.props;
-
-    checkLogin();
-    fetchConfig();
-  }
-
  render() {
    const {
-      user,
-      loggedIn,
-      loadingUser,
-      loginError,
-      loginMaxExceeded,
-      passwordRequestSuccess,
-    } = this.props.auth;
-
-    const {
+      currentUser,
+      checkedInitialLogin,
      children,
      logout,
      toggleShortcutModal,
-      TALK_RECAPTCHA_PUBLIC,
    } = this.props;

-    if (loadingUser) {
+    if (!checkedInitialLogin) {
      return <FullLoading />;
    }

-    if (!loggedIn) {
-      return (
-        <AdminLogin
-          loginMaxExceeded={loginMaxExceeded}
-          handleLogin={this.props.handleLogin}
-          requestPasswordReset={this.props.requestPasswordReset}
-          passwordRequestSuccess={passwordRequestSuccess}
-          recaptchaPublic={TALK_RECAPTCHA_PUBLIC}
-          errorMessage={loginError}
-        />
-      );
+    if (!currentUser) {
+      return <Login />;
    }

-    if (can(user, 'ACCESS_ADMIN') && loggedIn) {
-      return (
-        <Layout
-          handleLogout={logout}
-          toggleShortcutModal={toggleShortcutModal}
-          auth={this.props.auth}
-        >
-          <BanUserDialog />
-          <SuspendUserDialog />
-          <UserDetail />
-          {children}
-        </Layout>
-      );
-    } else if (loggedIn) {
-      return (
-        <Layout handleLogout={logout} {...this.props}>
-          <p>
-            This page is for team use only. Please contact an administrator if
-            you want to join this team.
-          </p>
-        </Layout>
-      );
+    if (currentUser) {
+      if (can(currentUser, 'ACCESS_ADMIN')) {
+        return (
+          <Layout
+            handleLogout={logout}
+            toggleShortcutModal={toggleShortcutModal}
+            currentUser={this.props.currentUser}
+          >
+            <BanUserDialog />
+            <SuspendUserDialog />
+            <UserDetail />
+            {children}
+          </Layout>
+        );
+      } else {
+        return (
+          <Layout {...this.props} handleLogout={logout}>
+            <Forbidden />
+          </Layout>
+        );
+      }
    }
    return <FullLoading />;
  }
@@ -89,29 +59,20 @@ class LayoutContainer extends React.Component {

 LayoutContainer.propTypes = {
  children: PropTypes.node,
-  requestPasswordReset: PropTypes.func,
-  handleLogin: PropTypes.func,
-  auth: PropTypes.object,
-  handleLogout: PropTypes.func,
+  currentUser: PropTypes.object,
+  checkedInitialLogin: PropTypes.bool,
  logout: PropTypes.func,
  toggleShortcutModal: PropTypes.func,
-  TALK_RECAPTCHA_PUBLIC: PropTypes.string,
-  checkLogin: PropTypes.func,
-  fetchConfig: PropTypes.func,
 };

 const mapStateToProps = state => ({
-  auth: state.auth,
-  TALK_RECAPTCHA_PUBLIC: state.config.data.TALK_RECAPTCHA_PUBLIC,
+  currentUser: state.auth.user,
+  checkedInitialLogin: state.auth.checkedInitialLogin,
 });

 const mapDispatchToProps = dispatch =>
  bindActionCreators(
    {
-      checkLogin,
-      fetchConfig,
-      handleLogin,
-      requestPasswordReset,
      toggleShortcutModal,
      logout,
    },
@@ -0,0 +1,30 @@
+import React, { Component } from 'react';
+import Login from '../components/Login';
+
+class LoginContainer extends Component {
+  state = {
+    forgotPassword: false,
+  };
+
+  switchToForgotPassword = () => {
+    this.setState({ forgotPassword: true });
+  };
+
+  switchToSignIn = () => {
+    this.setState({ forgotPassword: false });
+  };
+
+  render() {
+    return (
+      <Login
+        forgotPassword={this.state.forgotPassword}
+        onForgotPasswordLink={this.switchToForgotPassword}
+        onSignInLink={this.switchToSignIn}
+      />
+    );
+  }
+}
+
+LoginContainer.propTypes = {};
+
+export default LoginContainer;
@@ -0,0 +1,58 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { withSignIn } from 'coral-framework/hocs';
+import { compose } from 'recompose';
+import SignIn from '../components/SignIn';
+
+class SignInContainer extends Component {
+  state = {
+    email: '',
+    password: '',
+    recaptchaResponse: null,
+  };
+
+  handleSubmit = () => {
+    this.props.signIn(
+      this.state.email,
+      this.state.password,
+      this.state.recaptchaResponse
+    );
+  };
+
+  handleEmailChange = email => {
+    this.setState({ email });
+  };
+
+  handlePasswordChange = password => {
+    this.setState({ password });
+  };
+
+  handleRecaptchaVerify = recaptchaResponse => {
+    this.setState({ recaptchaResponse });
+  };
+
+  render() {
+    return (
+      <SignIn
+        onSubmit={this.handleSubmit}
+        onEmailChange={this.handleEmailChange}
+        onPasswordChange={this.handlePasswordChange}
+        email={this.state.email}
+        password={this.state.password}
+        errorMessage={this.props.errorMessage}
+        onForgotPasswordLink={this.props.onForgotPasswordLink}
+        onRecaptchaVerify={this.handleRecaptchaVerify}
+        requireRecaptcha={this.props.requireRecaptcha}
+      />
+    );
+  }
+}
+
+SignInContainer.propTypes = {
+  signIn: PropTypes.func.isRequired,
+  errorMessage: PropTypes.string,
+  onForgotPasswordLink: PropTypes.func.isRequired,
+  requireRecaptcha: PropTypes.bool.isRequired,
+};
+
+export default compose(withSignIn)(SignInContainer);
@@ -4,6 +4,9 @@ import withFragments from 'coral-framework/hocs/withFragments';
 import { getDefinitionName } from 'coral-framework/utils';
 import CommentLabels from './CommentLabels';
 import CommentDetails from './CommentDetails';
+import { getSlotFragmentSpreads } from 'coral-framework/utils';
+
+const slots = ['userDetailCommentContent'];

 export default withFragments({
  root: gql`
@@ -14,6 +17,7 @@ export default withFragments({
          suspect
        }
      }
+      ${getSlotFragmentSpreads(slots, 'root')}
      ...${getDefinitionName(CommentLabels.fragments.root)}
      ...${getDefinitionName(CommentDetails.fragments.root)}
    }
@@ -38,6 +42,7 @@ export default withFragments({
      status_history {
        type
      }
+      ${getSlotFragmentSpreads(slots, 'comment')}
      ...${getDefinitionName(CommentLabels.fragments.comment)}
      ...${getDefinitionName(CommentDetails.fragments.comment)}
    }
@@ -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());
  }
 }
@@ -1,65 +0,0 @@
-import * as actions from '../constants/auth';
-
-const initialState = {
-  loggedIn: false,
-  user: null,
-  loginError: null,
-  loginMaxExceeded: false,
-  passwordRequestSuccess: null,
-};
-
-export default function auth(state = initialState, action) {
-  switch (action.type) {
-    case actions.CHECK_LOGIN_REQUEST:
-      return {
-        ...state,
-        loadingUser: true,
-      };
-    case actions.CHECK_LOGIN_FAILURE:
-      return {
-        ...state,
-        loggedIn: false,
-        loadingUser: false,
-        user: null,
-      };
-    case actions.CHECK_LOGIN_SUCCESS:
-      return {
-        ...state,
-        loggedIn: true,
-        loadingUser: false,
-        user: action.user,
-      };
-    case actions.LOGOUT:
-      return initialState;
-    case actions.LOGIN_SUCCESS:
-      return {
-        ...state,
-        loginMaxExceeded: false,
-        loginError: null,
-      };
-    case actions.LOGIN_FAILURE:
-      return {
-        ...state,
-        loginError: action.message,
-      };
-    case actions.FETCH_FORGOT_PASSWORD_REQUEST:
-      return {
-        ...state,
-        passwordRequestSuccess: null,
-      };
-    case actions.FETCH_FORGOT_PASSWORD_SUCCESS:
-      return {
-        ...state,
-        passwordRequestSuccess:
-          'If you have a registered account, a password reset link was sent to that email.',
-      };
-    case actions.LOGIN_MAXIMUM_EXCEEDED:
-      return {
-        ...state,
-        loginMaxExceeded: true,
-        loginError: action.message,
-      };
-    default:
-      return state;
-  }
-}
@@ -1,17 +0,0 @@
-import * as actions from '../actions/config';
-
-const initialState = {
-  data: {},
-};
-
-export default function config(state = initialState, action) {
-  switch (action.type) {
-    case actions.CONFIG_UPDATED:
-      return {
-        ...state,
-        data: action.data,
-      };
-    default:
-      return state;
-  }
-}
@@ -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;
 }
@@ -1,17 +1,14 @@
-import auth from './auth';
 import stories from './stories';
 import configure from './configure';
 import community from './community';
 import moderation from './moderation';
 import install from './install';
-import config from './config';
 import banUserDialog from './banUserDialog';
 import suspendUserDialog from './suspendUserDialog';
 import userDetail from './userDetail';
 import ui from './ui';

 export default {
-  auth,
  banUserDialog,
  configure,
  suspendUserDialog,
@@ -20,6 +17,5 @@ export default {
  community,
  moderation,
  install,
-  config,
  ui,
 };
@@ -130,3 +130,12 @@ th.header:nth-child(2), th.header:nth-child(3) {
 .loadMore {
  margin-top: 24px;
 }
+
+.roleDropdown {
+  width: 150px;
+}
+
+.roleOption {
+  min-width: 100px;
+}
+
@@ -200,24 +200,31 @@ class People extends React.Component {
                        </td>
                        <td className="mdl-data-table__cell--non-numeric">
                          <Dropdown
-                            containerClassName="talk-admin-community-people-dd-role"
+                            className={cn(
+                              'talk-admin-community-people-dd-role',
+                              styles.roleDropdown
+                            )}
                            value={user.role}
                            placeholder={t('community.role')}
                            onChange={role => setUserRole(user.id, role)}
                          >
                            <Option
+                              className={styles.roleOption}
                              value={COMMENTER}
                              label={t('community.commenter')}
                            />
                            <Option
+                              className={styles.roleOption}
                              value={STAFF}
                              label={t('community.staff')}
                            />
                            <Option
+                              className={styles.roleOption}
                              value={MODERATOR}
                              label={t('community.moderator')}
                            />
                            <Option
+                              className={styles.roleOption}
                              value={ADMIN}
                              label={t('community.admin')}
                            />
@@ -1,50 +1,37 @@
-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 {
-      auth: { user },
-      canSave,
-      savePending,
-      setActiveSection,
-      activeSection,
-    } = this.props;
-    const SectionComponent = this.getSectionComponent(activeSection);
+    const { canSave, currentUser, root, savePending, settings } = this.props;

-    if (!can(user, '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>
-      );
+    if (!can(currentUser, 'UPDATE_CONFIG')) {
+      return <p>{t('configure.access_message')}</p>;
    }

+    const passProps = {
+      root,
+      settings,
+    };
+
    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>
@@ -74,11 +61,7 @@ export default class Configure extends Component {
          </div>
        </div>
        <div className={styles.mainContent}>
-          <SectionComponent
-            data={this.props.data}
-            root={this.props.root}
-            settings={this.props.settings}
-          />
+          {React.cloneElement(this.props.children, passProps)}
        </div>
      </div>
    );
@@ -87,11 +70,17 @@ export default class Configure extends Component {

 Configure.propTypes = {
  savePending: PropTypes.func.isRequired,
-  auth: PropTypes.object.isRequired,
-  data: PropTypes.object.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,
 };
+
+export default Configure;
@@ -52,7 +52,7 @@ class ModerationSettings extends React.Component {
  };

  render() {
-    const { settings, data, root, updatePending, errors } = this.props;
+    const { settings, slotPassthrough } = this.props;

    return (
      <ConfigurePage title={t('configure.moderation_settings')}>
@@ -82,13 +82,7 @@ class ModerationSettings extends React.Component {
          suspectWords={settings.wordlist.suspect}
          onChangeWordlist={this.updateWordlist}
        />
-        <Slot
-          fill="adminModerationSettings"
-          data={data}
-          queryData={{ root, settings }}
-          updatePending={updatePending}
-          errors={errors}
-        />
+        <Slot fill="adminModerationSettings" passthrough={slotPassthrough} />
      </ConfigurePage>
    );
  }
@@ -97,9 +91,8 @@ class ModerationSettings extends React.Component {
 ModerationSettings.propTypes = {
  updatePending: PropTypes.func.isRequired,
  errors: PropTypes.object.isRequired,
-  data: PropTypes.object.isRequired,
-  root: PropTypes.object.isRequired,
  settings: PropTypes.object.isRequired,
+  slotPassthrough: PropTypes.object.isRequired,
 };

 export default ModerationSettings;
@@ -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;
+}
@@ -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;
@@ -107,7 +107,7 @@ class StreamSettings extends React.Component {
  };

  render() {
-    const { settings, data, root, errors, updatePending } = this.props;
+    const { settings, slotPassthrough, errors } = this.props;

    return (
      <ConfigurePage title={t('configure.stream_settings')}>
@@ -220,13 +220,7 @@ class StreamSettings extends React.Component {
          </div>
        </ConfigureCard>
        {/* the above card should be the last one if at all possible because of z-index issues with the selects */}
-        <Slot
-          fill="adminStreamSettings"
-          data={data}
-          queryData={{ root, settings }}
-          updatePending={updatePending}
-          errors={errors}
-        />
+        <Slot fill="adminStreamSettings" passthrough={slotPassthrough} />
      </ConfigurePage>
    );
  }
@@ -235,9 +229,8 @@ class StreamSettings extends React.Component {
 StreamSettings.propTypes = {
  updatePending: PropTypes.func.isRequired,
  errors: PropTypes.object.isRequired,
-  data: PropTypes.object.isRequired,
-  root: PropTypes.object.isRequired,
  settings: PropTypes.object.isRequired,
+  slotPassthrough: PropTypes.object.isRequired,
 };

 export default StreamSettings;
@@ -34,7 +34,7 @@ class TechSettings extends React.Component {
  };

  render() {
-    const { settings, data, root, errors, updatePending } = this.props;
+    const { settings, slotPassthrough } = this.props;
    return (
      <ConfigurePage title={t('configure.tech_settings')}>
        <Domainlist
@@ -50,13 +50,7 @@ class TechSettings extends React.Component {
            onChange={this.updateCustomCssUrl}
          />
        </ConfigureCard>
-        <Slot
-          fill="adminTechSettings"
-          data={data}
-          queryData={{ root, settings }}
-          updatePending={updatePending}
-          errors={errors}
-        />
+        <Slot fill="adminTechSettings" passthrough={slotPassthrough} />
      </ConfigurePage>
    );
  }
@@ -64,10 +58,9 @@ class TechSettings extends React.Component {

 TechSettings.propTypes = {
  updatePending: PropTypes.func.isRequired,
-  errors: PropTypes.object.isRequired,
-  data: PropTypes.object.isRequired,
-  root: PropTypes.object.isRequired,
  settings: PropTypes.object.isRequired,
+  slotPassthrough: PropTypes.object.isRequired,
+  errors: PropTypes.object,
 };

 export default TechSettings;
@@ -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,70 @@ 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 { withRouter } from 'react-router';
+
+class ConfigureContainer extends React.Component {
+  state = { nextRoute: '' };

-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 = () => {
+    const { nextRoute } = this.state;
+    if (nextRoute) {
+      this.props.router.push(nextRoute);
+      this.setState({ nextRoute: '' });
+    }
+  };
+
+  handleSectionChange = async section => {
+    const nextRoute = `/admin/configure/${section}`;
+
+    if (this.shouldShowSaveDialog()) {
+      await this.setState({ nextRoute });
+      this.props.showSaveDialog();
+    } else {
+      // Just go to the section
+      this.props.router.push(nextRoute);
+    }
+  };
+
+  shouldShowSaveDialog = () => {
+    return !!Object.keys(this.props.pending).length;
+  };
+
+  routeLeave = ({ pathname }) => {
+    if (this.shouldShowSaveDialog()) {
+      this.setState({ nextRoute: pathname });
+      this.props.showSaveDialog();
+      return false;
+    }
+  };
+
+  componentDidMount() {
+    this.props.router.setRouteLeaveHook(this.props.route, this.routeLeave);
+  }
+
  render() {
    if (this.props.data.error) {
      return <div>{this.props.data.error.message}</div>;
@@ -30,15 +85,20 @@ class ConfigureContainer extends Component {

    return (
      <Configure
-        auth={this.props.auth}
-        data={this.props.data}
+        saveChanges={this.saveChanges}
+        discardChanges={this.discardChanges}
+        saveDialog={this.props.saveDialog}
+        activeSection={this.props.routes[3].path}
+        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}
        savePending={this.savePending}
-        setActiveSection={this.props.setActiveSection}
-        activeSection={this.props.activeSection}
-      />
+      >
+        {this.props.children}
+      </Configure>
    );
  }
 }
@@ -71,22 +131,25 @@ const withConfigureQuery = withQuery(
 );

 const mapStateToProps = state => ({
-  auth: state.auth,
+  currentUser: state.auth.user,
  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,
@@ -94,14 +157,20 @@ export default compose(
 )(ConfigureContainer);

 ConfigureContainer.propTypes = {
+  activeSection: PropTypes.string,
  updateSettings: PropTypes.func.isRequired,
  clearPending: PropTypes.func.isRequired,
-  setActiveSection: PropTypes.func.isRequired,
-  auth: PropTypes.object.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,
 };
@@ -5,6 +5,7 @@ import ModerationSettings from '../components/ModerationSettings';
 import withFragments from 'coral-framework/hocs/withFragments';
 import { getSlotFragmentSpreads } from 'coral-framework/utils';
 import { updatePending } from '../../../actions/configure';
+import { mapProps } from 'recompose';

 const slots = ['adminModerationSettings'];

@@ -41,5 +42,17 @@ export default compose(
      }
    `,
  }),
-  connect(mapStateToProps, mapDispatchToProps)
+  connect(mapStateToProps, mapDispatchToProps),
+  mapProps(({ root, settings, updatePending, errors, ...rest }) => ({
+    slotPassthrough: {
+      root,
+      settings,
+      updatePending,
+      errors,
+    },
+    updatePending,
+    settings,
+    errors,
+    ...rest,
+  }))
 )(ModerationSettings);
@@ -5,6 +5,7 @@ import StreamSettings from '../components/StreamSettings';
 import withFragments from 'coral-framework/hocs/withFragments';
 import { getSlotFragmentSpreads } from 'coral-framework/utils';
 import { updatePending } from '../../../actions/configure';
+import { mapProps } from 'recompose';

 const slots = ['adminStreamSettings'];

@@ -42,5 +43,17 @@ export default compose(
      }
    `,
  }),
-  connect(mapStateToProps, mapDispatchToProps)
+  connect(mapStateToProps, mapDispatchToProps),
+  mapProps(({ root, settings, updatePending, errors, ...rest }) => ({
+    slotPassthrough: {
+      root,
+      settings,
+      updatePending,
+      errors,
+    },
+    updatePending,
+    settings,
+    errors,
+    ...rest,
+  }))
 )(StreamSettings);
@@ -5,6 +5,7 @@ import TechSettings from '../components/TechSettings';
 import withFragments from 'coral-framework/hocs/withFragments';
 import { getSlotFragmentSpreads } from 'coral-framework/utils';
 import { updatePending } from '../../../actions/configure';
+import { mapProps } from 'recompose';

 const slots = ['adminTechSettings'];

@@ -38,5 +39,17 @@ export default compose(
      }
    `,
  }),
-  connect(mapStateToProps, mapDispatchToProps)
+  connect(mapStateToProps, mapDispatchToProps),
+  mapProps(({ root, settings, updatePending, errors, ...rest }) => ({
+    slotPassthrough: {
+      root,
+      settings,
+      updatePending,
+      errors,
+    },
+    updatePending,
+    settings,
+    errors,
+    ...rest,
+  }))
 )(TechSettings);
@@ -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>
  );
 };
@@ -72,9 +72,9 @@
  flex: 1;
  color: black;
  max-width: 500px;
-  word-wrap: break-word;
  font-weight: 300;
  font-size: 16px;
+  word-break: break-all;
 }

 .created {
@@ -133,7 +133,6 @@
  color: #063b9a;
  cursor: pointer;
  font-weight: normal;
-  margin-left: 10px;
  white-space: nowrap;

  &:hover {
@@ -143,7 +142,6 @@

  i {
    font-size: 12px;
-    top: 2px;
    position: relative;
  }
 }
@@ -185,3 +183,17 @@
    }
  }
 }
+
+.commentContent {
+  display: flex;
+
+  blockquote {
+    font-size: inherit;
+    line-height: inherit;
+    letter-spacing: inherit;
+  }
+}
+
+.commentContentFooter {
+  flex: 1;
+}
@@ -8,7 +8,7 @@ import styles from './Comment.css';
 import CommentLabels from 'coral-admin/src/components/CommentLabels';
 import CommentAnimatedEdit from 'coral-admin/src/components/CommentAnimatedEdit';
 import Slot from 'coral-framework/components/Slot';
-import CommentFormatter from 'coral-admin/src/components/CommentFormatter';
+import AdminCommentContent from 'coral-framework/components/AdminCommentContent';
 import IfHasLink from 'coral-admin/src/components/IfHasLink';
 import cn from 'classnames';
 import ApproveButton from 'coral-admin/src/components/ApproveButton';
@@ -53,7 +53,6 @@ class Comment extends React.Component {
      comment,
      selected,
      className,
-      data,
      root,
      root: { settings },
      currentAsset,
@@ -62,7 +61,19 @@ class Comment extends React.Component {
    } = this.props;

    const selectionStateCSS = selected ? 'mdl-shadow--16dp' : 'mdl-shadow--2dp';
-    const queryData = { root, comment, asset: comment.asset };
+
+    const formatterSettings = {
+      suspectWords: settings.wordlist.suspect,
+      bannedWords: settings.wordlist.banned,
+      body: comment.body,
+    };
+
+    const slotPassthrough = {
+      clearHeightCache,
+      root,
+      comment,
+      asset: comment.asset,
+    };

    return (
      <li
@@ -107,16 +118,15 @@ class Comment extends React.Component {
                <CommentLabels comment={comment} />
                <Slot
                  fill="adminCommentInfoBar"
-                  data={data}
-                  clearHeightCache={clearHeightCache}
-                  queryData={queryData}
+                  passthrough={slotPassthrough}
                />
              </div>
            </div>
          </div>

          <div className={styles.moderateArticle}>
-            Story: {comment.asset.title}
+            {t('common.story')}:{' '}
+            {comment.asset.title ? comment.asset.title : comment.asset.url}
            {!currentAsset && (
              <Link to={`/admin/moderate/${comment.asset.id}`}>
                {t('modqueue.moderate')}
@@ -126,29 +136,28 @@ class Comment extends React.Component {
          <CommentAnimatedEdit body={comment.body}>
            <div className={styles.itemBody}>
              <div className={styles.body}>
-                <CommentFormatter
-                  suspectWords={settings.wordlist.suspect}
-                  bannedWords={settings.wordlist.banned}
-                  className="talk-admin-comment"
-                  body={comment.body}
+                <Slot
+                  fill="adminCommentContent"
+                  className={cn(styles.commentContent, 'talk-admin-comment')}
+                  size={1}
+                  defaultComponent={AdminCommentContent}
+                  passthrough={{ ...slotPassthrough, ...formatterSettings }}
                />
-                <a
-                  className={styles.external}
-                  href={`${comment.asset.url}?commentId=${comment.id}`}
-                  target="_blank"
-                >
-                  <Icon name="open_in_new" /> {t('comment.view_context')}
-                </a>
+                <div className={styles.commentContentFooter}>
+                  <a
+                    className={styles.external}
+                    href={`${comment.asset.url}?commentId=${comment.id}`}
+                    target="_blank"
+                  >
+                    <Icon name="open_in_new" /> {t('comment.view_context')}
+                  </a>
+                </div>
              </div>
-              <Slot
-                fill="adminCommentContent"
-                data={data}
-                clearHeightCache={clearHeightCache}
-                queryData={queryData}
-              />
+
              <div className={styles.sideActions}>
                <IfHasLink text={comment.body}>
                  <span className={styles.hasLinks}>
+                    {/* TODO: translate string */}
                    <Icon name="error_outline" /> Contains Link
                  </span>
                </IfHasLink>
@@ -162,18 +171,12 @@ class Comment extends React.Component {
                    onClick={this.reject}
                  />
                </div>
-                <Slot
-                  fill="adminSideActions"
-                  data={data}
-                  clearHeightCache={clearHeightCache}
-                  queryData={queryData}
-                />
+                <Slot fill="adminSideActions" passthrough={slotPassthrough} />
              </div>
            </div>
          </CommentAnimatedEdit>
        </div>
        <CommentDetails
-          data={data}
          root={root}
          comment={comment}
          clearHeightCache={clearHeightCache}
@@ -211,7 +214,6 @@ Comment.propTypes = {
      id: PropTypes.string,
    }),
  }),
-  data: PropTypes.object.isRequired,
  root: PropTypes.object.isRequired,
  selected: PropTypes.bool,
 };
@@ -126,7 +126,6 @@ class Moderation extends Component {
  render() {
    const {
      root,
-      data,
      moderation,
      viewUserDetail,
      activeTab,
@@ -148,6 +147,13 @@ class Moderation extends Component {
      count: root[`${queue}Count`],
    }));

+    const slotPassthrough = {
+      root,
+      asset,
+      activeTab,
+      handleCommentChange,
+    };
+
    return (
      <div>
        <ModerationHeader
@@ -171,7 +177,6 @@ class Moderation extends Component {
          />
          <ModerationQueue
            key={`${activeTab}_${this.props.moderation.sortOrder}`}
-            data={this.props.data}
            root={this.props.root}
            currentAsset={asset}
            comments={comments.nodes}
@@ -185,7 +190,7 @@ class Moderation extends Component {
            commentBelongToQueue={this.props.commentBelongToQueue}
            isLoadingMore={this.state.isLoadingMore}
            commentCount={activeTabCount}
-            currentUserId={this.props.auth.user.id}
+            currentUserId={this.props.currentUser.id}
            viewUserDetail={viewUserDetail}
            selectCommentId={props.selectCommentId}
            cleanUpQueue={props.cleanUpQueue}
@@ -204,13 +209,7 @@ class Moderation extends Component {
          closeSearch={this.closeSearch}
          storySearchChange={this.props.storySearchChange}
        />
-        <Slot
-          data={data}
-          queryData={{ root, asset }}
-          activeTab={activeTab}
-          handleCommentChange={handleCommentChange}
-          fill="adminModeration"
-        />
+        <Slot fill="adminModeration" passthrough={slotPassthrough} />
      </div>
    );
  }
@@ -225,7 +224,7 @@ Moderation.propTypes = {
  cleanUpQueue: PropTypes.func.isRequired,
  storySearchChange: PropTypes.func.isRequired,
  moderation: PropTypes.object.isRequired,
-  auth: PropTypes.object.isRequired,
+  currentUser: PropTypes.object.isRequired,
  queueConfig: PropTypes.object.isRequired,
  commentBelongToQueue: PropTypes.func.isRequired,
  handleCommentChange: PropTypes.func.isRequired,
@@ -6,10 +6,6 @@
  margin-top: 16px;
 }

-:global(html) {
-  height: inherit;
-}
-
 .list {
  outline: none;
 }
@@ -344,7 +344,6 @@ class ModerationQueue extends React.Component {
      child = (
        <div style={style}>
          <Comment
-            data={this.props.data}
            root={this.props.root}
            comment={comment}
            dangling={
@@ -408,7 +407,6 @@ class ModerationQueue extends React.Component {
      return (
        <div className={styles.root}>
          <Comment
-            data={this.props.data}
            root={this.props.root}
            key={comment.id}
            comment={comment}
@@ -476,7 +474,6 @@ ModerationQueue.propTypes = {
  hasNextPage: PropTypes.bool,
  comments: PropTypes.array,
  activeTab: PropTypes.string.isRequired,
-  data: PropTypes.object.isRequired,
  root: PropTypes.object.isRequired,
  currentUserId: PropTypes.string.isRequired,
 };
@@ -111,14 +111,14 @@ class IndicatorContainer extends Component {
      return null;
    }

+    const slotPassthrough = {
+      handleCommentChange: this.handleCommentChange,
+    };
+
    return (
      <span>
        <Indicator />
-        <Slot
-          data={this.props.data}
-          handleCommentChange={this.handleCommentChange}
-          fill="adminModerationIndicator"
-        />
+        <Slot fill="adminModerationIndicator" passthrough={slotPassthrough} />
      </span>
    );
  }
@@ -110,7 +110,7 @@ class ModerationContainer extends Component {
            comment.status_history[comment.status_history.length - 1]
              .assigned_by;
          const notifyText =
-            this.props.auth.user.id === user.id
+            this.props.currentUser.id === user.id
              ? ''
              : t(
                  'modqueue.notify_accepted',
@@ -131,7 +131,7 @@ class ModerationContainer extends Component {
            comment.status_history[comment.status_history.length - 1]
              .assigned_by;
          const notifyText =
-            this.props.auth.user.id === user.id
+            this.props.currentUser.id === user.id
              ? ''
              : t(
                  'modqueue.notify_rejected',
@@ -152,7 +152,7 @@ class ModerationContainer extends Component {
            comment.status_history[comment.status_history.length - 1]
              .assigned_by;
          const notifyText =
-            this.props.auth.user.id === user.id
+            this.props.currentUser.id === user.id
              ? ''
              : t(
                  'modqueue.notify_reset',
@@ -515,7 +515,7 @@ const withModQueueQuery = withQuery(

 const mapStateToProps = state => ({
  moderation: state.moderation,
-  auth: state.auth,
+  currentUser: state.auth.user,
 });

 const mapDispatchToProps = dispatch => ({
@@ -89,3 +89,12 @@
    display: inline-block;
  }
 }
+
+.statusDropdown {
+  width: 150px;
+}
+
+.statusDropdownOption {
+  min-width: 100px;
+}
+
@@ -22,11 +22,20 @@ class Stories extends Component {
    const closed = !!(closedAt && new Date(closedAt).getTime() < Date.now());
    return (
      <Dropdown
+        className={styles.statusDropdown}
        value={closed}
        onChange={value => this.props.onStatusChange(value, id)}
      >
-        <Option value={false} label={t('streams.open')} />
-        <Option value={true} label={t('streams.closed')} />
+        <Option
+          value={false}
+          label={t('streams.open')}
+          className={styles.statusDropdownOption}
+        />
+        <Option
+          value={true}
+          label={t('streams.closed')}
+          className={styles.statusDropdownOption}
+        />
      </Dropdown>
    );
  };
@@ -1,12 +1,3 @@
-import LinkifyIt from 'linkify-it';
-import tlds from 'tlds';
-const linkify = new LinkifyIt();
-linkify.tlds(tlds);
-
-export function matchLinks(text) {
-  return linkify.match(text);
-}
-
 export const isPremod = mod => mod === 'PRE';

 export const getModPath = (type = 'all', assetId) =>
@@ -1,14 +1,34 @@
+import { HANDLE_SUCCESSFUL_LOGIN } from 'coral-framework/constants/auth';
+import { getStaticConfiguration } from 'coral-framework/services/staticConfiguration';
+import { createPostMessage } from 'coral-framework/services/postMessage';
+
 document.addEventListener('DOMContentLoaded', () => {
-  // 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;
+  try {
+    const staticConfig = getStaticConfiguration();
+    const { STATIC_ORIGIN: origin } = staticConfig;
+    const postMessage = createPostMessage(origin);

-  // Set the item in localStorage.
-  localStorage.setItem('auth', doc.body.textContent);
+    // 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;

-  // Close the window.
-  setTimeout(() => {
-    window.close();
-  }, 50);
+    // 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);
+    } 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 });
+    }
+  } finally {
+    // Always close the window.
+    setTimeout(() => {
+      window.close();
+    }, 50);
+  }
 });
@@ -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'));
@@ -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());
-}
@@ -1,25 +0,0 @@
-import React from 'react';
-import { Router, Route } from 'react-router';
-import PropTypes from 'prop-types';
-
-import Embed from './containers/Embed';
-import { LoginContainer } from './containers/LoginContainer';
-
-const routes = (
-  <div>
-    <Route exact path="/embed/stream/login" component={LoginContainer} />
-    <Route path="*" component={Embed} />
-  </div>
-);
-
-class AppRouter extends React.Component {
-  static contextTypes = {
-    history: PropTypes.object,
-  };
-
-  render() {
-    return <Router history={this.context.history} routes={routes} />;
-  }
-}
-
-export default AppRouter;
@@ -1,75 +0,0 @@
-import * as actions from '../constants/asset';
-import { notify } from 'coral-framework/actions/notification';
-
-import t from 'coral-framework/services/i18n';
-
-export const fetchAssetRequest = () => ({ type: actions.FETCH_ASSET_REQUEST });
-export const fetchAssetSuccess = asset => ({
-  type: actions.FETCH_ASSET_SUCCESS,
-  asset,
-});
-export const fetchAssetFailure = error => ({
-  type: actions.FETCH_ASSET_FAILURE,
-  error,
-});
-
-const updateAssetSettingsRequest = () => ({
-  type: actions.UPDATE_ASSET_SETTINGS_REQUEST,
-});
-const updateAssetSettingsSuccess = settings => ({
-  type: actions.UPDATE_ASSET_SETTINGS_SUCCESS,
-  settings,
-});
-const updateAssetSettingsFailure = error => ({
-  type: actions.UPDATE_ASSET_SETTINGS_FAILURE,
-  error,
-});
-
-export const updateConfiguration = newConfig => (
-  dispatch,
-  getState,
-  { rest }
-) => {
-  const assetId = getState().asset.id;
-  dispatch(updateAssetSettingsRequest());
-  rest(`/assets/${assetId}/settings`, { method: 'PUT', body: newConfig })
-    .then(() => {
-      dispatch(notify('success', t('framework.success_update_settings')));
-      dispatch(updateAssetSettingsSuccess(newConfig));
-    })
-    .catch(error => {
-      console.error(error);
-      dispatch(updateAssetSettingsFailure(error));
-    });
-};
-
-export const updateOpenStream = closedBody => (
-  dispatch,
-  getState,
-  { rest }
-) => {
-  const assetId = getState().asset.id;
-  dispatch(fetchAssetRequest());
-  rest(`/assets/${assetId}/status`, { method: 'PUT', body: closedBody })
-    .then(() => {
-      dispatch(notify('success', t('framework.success_update_settings')));
-      dispatch(fetchAssetSuccess(closedBody));
-    })
-    .catch(error => {
-      console.error(error);
-      dispatch(fetchAssetFailure(error));
-    });
-};
-
-const openStream = () => ({ type: actions.OPEN_COMMENTS });
-const closeStream = () => ({ type: actions.CLOSE_COMMENTS });
-
-export const updateOpenStatus = status => dispatch => {
-  if (status === 'open') {
-    dispatch(openStream());
-    dispatch(updateOpenStream({ closedAt: null }));
-  } else {
-    dispatch(closeStream());
-    dispatch(updateOpenStream({ closedAt: new Date().getTime() }));
-  }
-};
@@ -1,415 +0,0 @@
-import jwtDecode from 'jwt-decode';
-import bowser from 'bowser';
-import * as actions from '../constants/auth';
-import { notify } from 'coral-framework/actions/notification';
-import t from 'coral-framework/services/i18n';
-import get from 'lodash/get';
-
-export const updateStatus = status => ({
-  type: actions.UPDATE_STATUS,
-  status,
-});
-
-export const showSignInDialog = () => ({
-  type: actions.SHOW_SIGNIN_DIALOG,
-});
-
-export const hideSignInDialog = () => dispatch => {
-  if (window.opener && window.opener !== window) {
-    // TODO: We need to address this when we refactor the
-    // login popup out of the embed.
-
-    // we are in a popup
-    window.close();
-  } else {
-    dispatch(checkLogin());
-  }
-  dispatch({ type: actions.HIDE_SIGNIN_DIALOG });
-};
-
-export const resetSignInDialog = () => dispatch => {
-  dispatch({ type: actions.HIDE_SIGNIN_DIALOG });
-};
-
-export const focusSignInDialog = () => ({
-  type: actions.FOCUS_SIGNIN_DIALOG,
-});
-
-export const blurSignInDialog = () => ({
-  type: actions.BLUR_SIGNIN_DIALOG,
-});
-
-export const showCreateUsernameDialog = () => ({
-  type: actions.SHOW_CREATEUSERNAME_DIALOG,
-});
-
-export const hideCreateUsernameDialog = () => ({
-  type: actions.HIDE_CREATEUSERNAME_DIALOG,
-});
-
-export const updateUsername = username => ({
-  type: actions.UPDATE_USERNAME,
-  username,
-});
-
-export const changeView = view => dispatch => {
-  dispatch({
-    type: actions.CHANGE_VIEW,
-    view,
-  });
-
-  switch (view) {
-    case 'SIGNUP':
-      window.resizeTo(500, 800);
-      break;
-    case 'FORGOT':
-      window.resizeTo(500, 400);
-      break;
-    default:
-      window.resizeTo(500, 550);
-  }
-};
-
-export const cleanState = () => ({
-  type: actions.CLEAN_STATE,
-});
-
-// Sign In Actions
-
-const signInRequest = email => ({
-  type: actions.FETCH_SIGNIN_REQUEST,
-  email,
-});
-
-const signInFailure = error => ({
-  type: actions.FETCH_SIGNIN_FAILURE,
-  error,
-});
-
-//==============================================================================
-// AUTH TOKEN
-//==============================================================================
-
-export const handleAuthToken = token => (dispatch, _, { localStorage }) => {
-  if (localStorage) {
-    localStorage.setItem('exp', jwtDecode(token).exp);
-    localStorage.setItem('token', token);
-  }
-
-  dispatch({ type: 'HANDLE_AUTH_TOKEN' });
-};
-
-//==============================================================================
-// SIGN IN
-//==============================================================================
-
-export const fetchSignIn = formData => {
-  return (dispatch, _, { rest }) => {
-    dispatch(signInRequest(formData.email));
-
-    return rest('/auth/local', { method: 'POST', body: formData })
-      .then(({ token }) => {
-        if (!bowser.safari && !bowser.ios) {
-          dispatch(handleAuthToken(token));
-        }
-        dispatch(hideSignInDialog());
-      })
-      .catch(error => {
-        console.error(error);
-        if (error.metadata) {
-          // the user might not have a valid email. prompt the user user re-request the confirmation email
-          dispatch(
-            signInFailure(t('error.email_not_verified', error.metadata))
-          );
-        } else if (error.translation_key === 'NOT_AUTHORIZED') {
-          // invalid credentials
-          dispatch(signInFailure(t('error.email_password'), error.metadata));
-        } else {
-          dispatch(signInFailure(error));
-        }
-      });
-  };
-};
-
-//==============================================================================
-// SIGN IN - FACEBOOK
-//==============================================================================
-
-const signInFacebookRequest = () => ({
-  type: actions.FETCH_SIGNIN_FACEBOOK_REQUEST,
-});
-
-const signInFacebookSuccess = user => ({
-  type: actions.FETCH_SIGNIN_FACEBOOK_SUCCESS,
-  user,
-});
-
-const signInFacebookFailure = error => ({
-  type: actions.FETCH_SIGNIN_FACEBOOK_FAILURE,
-  error,
-});
-
-export const fetchSignInFacebook = () => (dispatch, _, { rest }) => {
-  dispatch(signInFacebookRequest());
-  window.open(
-    `${rest.uri}/auth/facebook`,
-    'Continue with Facebook',
-    'menubar=0,resizable=0,width=500,height=500,top=200,left=500'
-  );
-};
-
-//==============================================================================
-// SIGN UP - FACEBOOK
-//==============================================================================
-
-const signUpFacebookRequest = () => ({
-  type: actions.FETCH_SIGNUP_FACEBOOK_REQUEST,
-});
-
-export const fetchSignUpFacebook = () => (dispatch, _, { rest }) => {
-  dispatch(signUpFacebookRequest());
-  window.open(
-    `${rest.uri}/auth/facebook`,
-    'Continue with Facebook',
-    'menubar=0,resizable=0,width=500,height=500,top=200,left=500'
-  );
-};
-
-export const facebookCallback = (err, data) => dispatch => {
-  if (err) {
-    dispatch(signInFacebookFailure(err));
-    return;
-  }
-  try {
-    dispatch(handleAuthToken(data.token));
-    dispatch(signInFacebookSuccess(data.user));
-    dispatch(hideSignInDialog());
-  } catch (err) {
-    dispatch(signInFacebookFailure(err));
-    return;
-  }
-};
-
-//==============================================================================
-// SIGN UP
-//==============================================================================
-
-const signUpRequest = () => ({ type: actions.FETCH_SIGNUP_REQUEST });
-const signUpSuccess = user => ({ type: actions.FETCH_SIGNUP_SUCCESS, user });
-const signUpFailure = error => ({ type: actions.FETCH_SIGNUP_FAILURE, error });
-
-export const fetchSignUp = formData => (dispatch, getState, { rest }) => {
-  const redirectUri = getState().auth.redirectUri;
-  dispatch(signUpRequest());
-
-  rest('/users', {
-    method: 'POST',
-    body: formData,
-    headers: { 'X-Pym-Url': redirectUri },
-  })
-    .then(({ user }) => {
-      dispatch(signUpSuccess(user));
-    })
-    .catch(error => {
-      console.error(error);
-      const errorMessage = error.translation_key
-        ? t(`error.${error.translation_key}`)
-        : error.toString();
-      dispatch(signUpFailure(errorMessage));
-    });
-};
-
-//==============================================================================
-// FORGOT PASSWORD
-//==============================================================================
-
-const forgotPasswordRequest = () => ({
-  type: actions.FETCH_FORGOT_PASSWORD_REQUEST,
-});
-
-const forgotPasswordSuccess = () => ({
-  type: actions.FETCH_FORGOT_PASSWORD_SUCCESS,
-});
-
-const forgotPasswordFailure = error => ({
-  type: actions.FETCH_FORGOT_PASSWORD_FAILURE,
-  error,
-});
-
-export const fetchForgotPassword = email => (dispatch, getState, { rest }) => {
-  dispatch(forgotPasswordRequest(email));
-  const redirectUri = getState().auth.redirectUri;
-  rest('/account/password/reset', {
-    method: 'POST',
-    body: { email, loc: redirectUri },
-  })
-    .then(() => dispatch(forgotPasswordSuccess()))
-    .catch(error => {
-      console.error(error);
-      const errorMessage = error.translation_key
-        ? t(`error.${error.translation_key}`)
-        : error.toString();
-      dispatch(forgotPasswordFailure(errorMessage));
-    });
-};
-
-//==============================================================================
-// LOGOUT
-//==============================================================================
-
-export const logout = () => async (
-  dispatch,
-  _,
-  { rest, client, pym, localStorage }
-) => {
-  await rest('/auth', { method: 'DELETE' });
-
-  if (localStorage) {
-    localStorage.removeItem('token');
-    localStorage.removeItem('exp');
-  }
-
-  // Reset the websocket.
-  client.resetWebsocket();
-
-  dispatch({ type: actions.LOGOUT });
-  pym.sendMessage('coral-auth-changed');
-};
-
-//==============================================================================
-// CHECK LOGIN
-//==============================================================================
-
-const checkLoginRequest = () => ({ type: actions.CHECK_LOGIN_REQUEST });
-const checkLoginFailure = error => ({
-  type: actions.CHECK_LOGIN_FAILURE,
-  error,
-});
-
-const checkLoginSuccess = (user, isAdmin) => ({
-  type: actions.CHECK_LOGIN_SUCCESS,
-  user,
-  isAdmin,
-});
-
-const ErrNotLoggedIn = new Error('Not logged in');
-
-export const checkLogin = () => (
-  dispatch,
-  _,
-  { rest, client, pym, localStorage }
-) => {
-  dispatch(checkLoginRequest());
-  rest('/auth')
-    .then(result => {
-      if (!result.user) {
-        if (localStorage) {
-          localStorage.removeItem('token');
-          localStorage.removeItem('exp');
-        }
-        throw ErrNotLoggedIn;
-      }
-
-      // Reset the websocket.
-      client.resetWebsocket();
-
-      dispatch(checkLoginSuccess(result.user));
-      pym.sendMessage('coral-auth-changed', JSON.stringify(result.user));
-
-      // This is for login via social. Usernames should be set.
-      if (
-        get(result.user, 'status.username.status') === 'UNSET' &&
-        !get(result.user, 'status.banned.status')
-      ) {
-        dispatch(showCreateUsernameDialog());
-      }
-    })
-    .catch(error => {
-      if (error !== ErrNotLoggedIn) {
-        console.error(error);
-      }
-      if (error.status && error.status === 401 && localStorage) {
-        // Unauthorized.
-        localStorage.removeItem('token');
-        localStorage.removeItem('exp');
-      }
-      const errorMessage = error.translation_key
-        ? t(`error.${error.translation_key}`)
-        : error.toString();
-      dispatch(checkLoginFailure(errorMessage));
-    });
-};
-
-export const validForm = () => ({ type: actions.VALID_FORM });
-export const invalidForm = error => ({ type: actions.INVALID_FORM, error });
-
-//==============================================================================
-// VERIFY EMAIL
-//==============================================================================
-
-const verifyEmailRequest = () => ({
-  type: actions.VERIFY_EMAIL_REQUEST,
-});
-
-const verifyEmailSuccess = () => ({
-  type: actions.VERIFY_EMAIL_SUCCESS,
-});
-
-const verifyEmailFailure = error => ({
-  type: actions.VERIFY_EMAIL_FAILURE,
-  error,
-});
-
-export const requestConfirmEmail = email => (dispatch, getState, { rest }) => {
-  const redirectUri = getState().auth.redirectUri;
-  dispatch(verifyEmailRequest());
-  return rest('/users/resend-verify', {
-    method: 'POST',
-    body: { email },
-    headers: { 'X-Pym-Url': redirectUri },
-  })
-    .then(() => {
-      dispatch(verifyEmailSuccess());
-    })
-    .catch(error => {
-      console.error(error);
-      dispatch(verifyEmailFailure(error));
-      throw error;
-    });
-};
-
-// Login Popup actions.
-export const setRequireEmailVerification = required => ({
-  type: actions.SET_REQUIRE_EMAIL_VERIFICATION,
-  required,
-});
-
-export const setRedirectUri = uri => ({
-  type: actions.SET_REDIRECT_URI,
-  uri,
-});
-
-//==============================================================================
-// Edit Username
-//==============================================================================
-
-const editUsernameFailure = error => ({
-  type: actions.EDIT_USERNAME_FAILURE,
-  error,
-});
-const editUsernameSuccess = () => ({ type: actions.EDIT_USERNAME_SUCCESS });
-
-export const editName = username => (dispatch, _, { rest }) => {
-  return rest('/account/username', { method: 'PUT', body: { username } })
-    .then(() => {
-      dispatch(editUsernameSuccess());
-      dispatch(notify('success', t('framework.success_name_update')));
-    })
-    .catch(error => {
-      console.error(error);
-      const errorMessage = error.translation_key
-        ? t(`error.${error.translation_key}`)
-        : error.toString();
-      dispatch(editUsernameFailure(errorMessage));
-    });
-};
@@ -1,6 +0,0 @@
-import { ADD_EXTERNAL_CONFIG } from '../constants/config';
-
-export const addExternalConfig = config => ({
-  type: ADD_EXTERNAL_CONFIG,
-  config,
-});
@@ -0,0 +1,15 @@
+import * as actions from '../constants/login';
+
+export const showSignInDialog = () => ({
+  type: actions.SHOW_SIGNIN_DIALOG,
+});
+
+export const hideSignInDialog = () => ({ type: actions.HIDE_SIGNIN_DIALOG });
+
+export const focusSignInDialog = () => ({
+  type: actions.FOCUS_SIGNIN_DIALOG,
+});
+
+export const blurSignInDialog = () => ({
+  type: actions.BLUR_SIGNIN_DIALOG,
+});
@@ -0,0 +1,3 @@
+import * as actions from '../constants/profile';
+
+export const setActiveTab = tab => ({ type: actions.SET_ACTIVE_TAB, tab });
@@ -71,16 +71,19 @@ export const setActiveTab = tab => dispatch => {
  dispatch({ type: actions.SET_ACTIVE_TAB, tab });
 };

+// @Deprecated
 export const addCommentBoxTag = tag => ({
  type: actions.ADD_COMMENT_BOX_TAG,
  tag,
 });

+// @Deprecated
 export const removeCommentBoxTag = idx => ({
  type: actions.REMOVE_COMMENT_BOX_TAG,
  idx,
 });

+// @Deprecated
 export const clearCommentBoxTags = () => ({
  type: actions.CLEAR_COMMENT_BOX_TAGS,
 });
@@ -9,24 +9,13 @@ import AutomaticAssetClosure from '../containers/AutomaticAssetClosure';

 import ExtendableTabPanel from '../containers/ExtendableTabPanel';
 import { Tab, TabPane } from 'coral-ui';
-import ProfileContainer from '../tabs/profile/containers/ProfileContainer';
+import Profile from '../tabs/profile/containers/Profile';
 import Popup from 'coral-framework/components/Popup';
 import IfSlotIsNotEmpty from 'coral-framework/components/IfSlotIsNotEmpty';
 import cn from 'classnames';

 export default class Embed extends React.Component {
-  changeTab = tab => {
-    // TODO: move data fetching to appropiate containers.
-    switch (tab) {
-      case 'profile':
-        this.props.data.refetch();
-        break;
-    }
-    this.props.setActiveTab(tab);
-  };
-
  getTabs() {
-    const { user } = this.props.auth;
    const tabs = [
      <Tab
        key="stream"
@@ -43,7 +32,7 @@ export default class Embed extends React.Component {
        {t('framework.my_profile')}
      </Tab>,
    ];
-    if (can(user, 'UPDATE_ASSET_CONFIG')) {
+    if (can(this.props.currentUser, 'UPDATE_ASSET_CONFIG')) {
      tabs.push(
        <Tab
          key="config"
@@ -60,17 +49,21 @@ export default class Embed extends React.Component {
  render() {
    const {
      activeTab,
+      setActiveTab,
      commentId,
      root,
      root: { asset },
      data,
-      auth: { showSignInDialog, signInDialogFocus },
+      showSignInDialog,
+      signInDialogFocus,
      blurSignInDialog,
      focusSignInDialog,
      hideSignInDialog,
-      router: { location: { query: { parentUrl } } },
+      parentUrl,
    } = this.props;
    const hasHighlightedComment = !!commentId;
+    const popupUrl = `login?parentUrl=${encodeURIComponent(parentUrl)}`;
+    const slotPassthrough = { root };

    return (
      <div
@@ -81,9 +74,7 @@ export default class Embed extends React.Component {
        <AutomaticAssetClosure asset={asset} />
        <IfSlotIsNotEmpty slot="login">
          <Popup
-            href={`embed/stream/login?parentUrl=${encodeURIComponent(
-              parentUrl
-            )}`}
+            href={popupUrl}
            title="Login"
            features="menubar=0,resizable=0,width=500,height=550,top=200,left=500"
            open={showSignInDialog}
@@ -94,18 +85,17 @@ export default class Embed extends React.Component {
          />
        </IfSlotIsNotEmpty>

-        <Slot data={data} queryData={{ root }} fill="embed" />
+        <Slot passthrough={slotPassthrough} fill="embed" />

        <ExtendableTabPanel
          className="talk-embed-stream-tab-bar"
          activeTab={activeTab}
-          setActiveTab={this.changeTab}
+          setActiveTab={setActiveTab}
          fallbackTab="stream"
          tabSlot="embedStreamTabs"
          tabSlotPrepend="embedStreamTabsPrepend"
          tabPaneSlot="embedStreamTabPanes"
-          slotProps={{ data }}
-          queryData={{ root }}
+          slotPassthrough={slotPassthrough}
          tabs={this.getTabs()}
          tabPanes={[
            <TabPane
@@ -120,7 +110,7 @@ export default class Embed extends React.Component {
              tabId="profile"
              className="talk-embed-stream-profile-tab-pane"
            >
-              <ProfileContainer />
+              <Profile />
            </TabPane>,
            <TabPane
              key="config"
@@ -138,17 +128,15 @@ export default class Embed extends React.Component {

 Embed.propTypes = {
  setActiveTab: PropTypes.func,
-  auth: PropTypes.object,
+  currentUser: PropTypes.object,
+  showSignInDialog: PropTypes.bool,
+  signInDialogFocus: PropTypes.bool,
  blurSignInDialog: PropTypes.func,
  focusSignInDialog: PropTypes.func,
  hideSignInDialog: PropTypes.func,
-  router: PropTypes.object,
+  parentUrl: PropTypes.string,
  commentId: PropTypes.string,
  root: PropTypes.object,
  activeTab: PropTypes.string,
-  data: PropTypes.shape({
-    loading: PropTypes.bool,
-    error: PropTypes.object,
-    refetch: PropTypes.func,
-  }).isRequired,
+  data: PropTypes.object.isRequired,
 };
@@ -1,10 +0,0 @@
-export const FETCH_ASSET_REQUEST = 'FETCH_ASSET_REQUEST';
-export const FETCH_ASSET_FAILURE = 'FETCH_ASSET_FAILURE';
-export const FETCH_ASSET_SUCCESS = 'FETCH_ASSET_SUCCESS';
-
-export const UPDATE_ASSET_SETTINGS_REQUEST = 'UPDATE_ASSET_SETTINGS_REQUEST';
-export const UPDATE_ASSET_SETTINGS_SUCCESS = 'UPDATE_ASSET_SETTINGS_SUCCESS';
-export const UPDATE_ASSET_SETTINGS_FAILURE = 'UPDATE_ASSET_SETTINGS_FAILURE';
-
-export const OPEN_COMMENTS = 'OPEN_COMMENTS';
-export const CLOSE_COMMENTS = 'CLOSE_COMMENTS';
--- a/Show More
+++ b/Show More