fix: check if auth params exist in hash before clearing it (#2666)

* fix: strip tags when comparing for repeat

- share the stripped tag version of the comment
- share the logger to improve pipeline clarity

* fix: renamed variables based on review

.circleci/config.yml

@@ -1,12 +1,13 @@
 # job_environment will setup the environment for any job being executed.
 job_environment: &job_environment
   NODE_ENV: test
-  WEBPACK_MAX_CORES: 2
-  NODE_OPTIONS: --max-old-space-size=4096
+  WEBPACK_MAX_CORES: 4
+  NODE_OPTIONS: --max-old-space-size=8192
 
 # job_defaults applies all the defaults for each job.
 job_defaults: &job_defaults
   working_directory: ~/coralproject/talk
+  resource_class: large
   docker:
     - image: circleci/node:10
   environment:

.eslintignore

@@ -0,0 +1,3 @@
+*.d.ts
+*.graphql.ts
+**/__generated__/**

.eslintrc.js

@@ -0,0 +1,208 @@
+const typescriptEslintRecommended = require('@typescript-eslint/eslint-plugin/dist/configs/eslint-recommended').default.overrides[0];
+const typescriptRecommended = require('@typescript-eslint/eslint-plugin/dist/configs/recommended.json');
+const typescriptRecommendedTypeChecking = require('@typescript-eslint/eslint-plugin/dist/configs/recommended-requiring-type-checking.json');
+const typescriptEslintPrettier = require('eslint-config-prettier/@typescript-eslint');
+const react = require('eslint-plugin-react').configs.recommended;
+const jsxA11y = require('eslint-plugin-jsx-a11y').configs.recommended;
+const reactPrettier = require('eslint-config-prettier/react');
+
+const typescriptOverrides = {
+  files: ["*.ts", "*.tsx"],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    sourceType: "module",
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  plugins: [
+    "@typescript-eslint",
+    "@typescript-eslint/tslint",
+    "react",
+    "jsx-a11y",
+  ],
+  settings: {
+    react: {
+      version: "detect",
+    }
+  },
+  rules: Object.assign(
+    typescriptEslintRecommended.rules,
+    typescriptRecommended.rules,
+    typescriptEslintPrettier.rules,
+    react.rules,
+    jsxA11y.rules,
+    reactPrettier.rules,
+    {
+      "@typescript-eslint/adjacent-overload-signatures": "error",
+      // TODO: (cvle) change `readonly` param to `array-simple` when upgraded typescript.
+      "@typescript-eslint/array-type": ["error", { "default": "array-simple", "readonly": "generic"}],
+      "@typescript-eslint/ban-types": "error",
+      "@typescript-eslint/camelcase": "off",
+      "@typescript-eslint/consistent-type-assertions": "error",
+      "@typescript-eslint/consistent-type-definitions": "error",
+      "@typescript-eslint/class-name-casing": "error",
+      "@typescript-eslint/explicit-function-return-type": "off",
+      "@typescript-eslint/explicit-member-accessibility": [
+        "error",
+        {
+          "overrides": {
+            "constructors": "off",
+          },
+        },
+      ],
+      "@typescript-eslint/indent": "off",
+      "@typescript-eslint/interface-name-prefix": "error",
+      "@typescript-eslint/member-delimiter-style": "off",
+      "@typescript-eslint/no-empty-function": "error",
+      "@typescript-eslint/no-empty-interface": "error",
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-misused-new": "error",
+      "@typescript-eslint/no-namespace": "error",
+      "@typescript-eslint/no-non-null-assertion": "off",
+      "@typescript-eslint/no-parameter-properties": "off",
+      "@typescript-eslint/no-unused-vars": ["error", {"args": "none", "ignoreRestSiblings": true}],
+      "@typescript-eslint/no-use-before-define": "off", // TODO: (cvle) Should be on?
+      "@typescript-eslint/no-use-before-declare": "off",
+      "@typescript-eslint/no-var-requires": "error",
+      "@typescript-eslint/prefer-for-of": "error",
+      "@typescript-eslint/prefer-function-type": "error",
+      "@typescript-eslint/prefer-namespace-keyword": "error",
+      "@typescript-eslint/triple-slash-reference": "error",
+      "@typescript-eslint/type-annotation-spacing": "off",
+      "@typescript-eslint/unified-signatures": "error",
+      // (cvle) disabled, because the way we use labels in our code cause to many
+      // false positives.
+      "jsx-a11y/label-has-associated-control": "off",
+      "react/display-name": "error",
+      "react/prop-types": "off",
+      "react/no-unescaped-entities": "off",
+    }
+  ),
+};
+
+let typescriptTypeCheckingOverrides = {
+  files: ["*.ts", "*.tsx"],
+  parserOptions: {
+    project: ["tsconfig.json", "./src/tsconfig.json", "./src/core/client/tsconfig.json"],
+    // TODO: (cvle) this is a workaround, see: https://github.com/typescript-eslint/typescript-eslint/issues/1091.
+    createDefaultProgram: true,
+  },
+  rules: Object.assign(
+    typescriptRecommendedTypeChecking.rules,
+    {
+      "@typescript-eslint/tslint/config": ["error", {
+        "rules": {
+          "ordered-imports": {
+            "options": {
+              "import-sources-order": "case-insensitive",
+              "module-source-path": "full",
+              "named-imports-order": "case-insensitive",
+            },
+          },
+        },
+      }],
+      "@typescript-eslint/require-await": "off",
+      "@typescript-eslint/no-misused-promises": "off",
+      "@typescript-eslint/unbound-method": "off", // 10.10.19: (cvle) seems to give false positive.
+    }
+  ),
+};
+
+const jestOverrides = {
+  env: {
+    jest: true,
+  },
+  files: ["test/**/*.ts", "test/**/*.tsx"],
+  globals: {
+    "expectAndFail": "readonly",
+    "fail": "readonly",
+  },
+};
+
+// Setup the overrides.
+const overrides = [jestOverrides, typescriptOverrides];
+// Skip type information to make it faster!
+if (process.env.FAST_LINT !== "true") {
+  overrides.push(typescriptTypeCheckingOverrides);
+}
+
+module.exports = {
+  overrides,
+  env: {
+    browser: true,
+    es6: true,
+    node: true,
+  },
+  extends: [
+    "eslint:recommended",
+    "plugin:jsdoc/recommended",
+    "plugin:prettier/recommended",
+  ],
+  parserOptions: {
+    "ecmaVersion": 2018,
+  },
+  rules: {
+    "arrow-body-style": "off",
+    "arrow-parens": [
+      "off",
+      "as-needed",
+    ],
+    "camelcase": "off",
+    "complexity": "off",
+    "constructor-super": "error",
+    "spaced-comment": ["error", "always"],
+    "curly": "error",
+    "dot-notation": "error",
+    "eol-last": "off",
+    "eqeqeq": "error",
+    "guard-for-in": "error",
+    "jsdoc/require-jsdoc": "off",
+    "jsdoc/require-returns": "off",
+    "jsdoc/require-param": "off",
+    "jsdoc/require-param-type": "off",
+    "jsdoc/require-returns-type": "off",
+    "linebreak-style": "off",
+    "max-classes-per-file": [
+      "error",
+      1,
+    ],
+    "member-ordering": "off",
+    "new-parens": "off",
+    "newline-per-chained-call": "off",
+    "no-bitwise": "error",
+    "no-caller": "error",
+    "no-cond-assign": "error",
+    "no-console": "error",
+    "no-debugger": "error",
+    "no-empty": "error",
+    "no-eval": "error",
+    "no-extra-semi": "off",
+    "no-fallthrough": "error",
+    "no-invalid-this": "off",
+    "no-irregular-whitespace": "off",
+    "no-multiple-empty-lines": "off",
+    "no-new-wrappers": "error",
+    "no-prototype-builtins": "off",
+    "no-shadow": "error",
+    "no-throw-literal": "error",
+    "no-undef": "off",
+    "no-undef-init": "error",
+    "no-unsafe-finally": "error",
+    "no-unused-expressions": "error",
+    "no-unused-labels": "error",
+    "no-unused-vars": ["error", {"args": "none", "ignoreRestSiblings": true}],
+    "no-var": "error",
+    "object-shorthand": "error",
+    "one-var": "off",
+    "prefer-arrow-callback": "off",
+    "prefer-const": "error",
+    "quote-props": "off",
+    "radix": "error",
+    "require-atomic-updates": "off",
+    "space-before-function-paren": "off",
+    "sort-imports": "off",
+    "use-isnan": "error",
+    "valid-typeof": "off",
+  },
+};

.github/ISSUE_TEMPLATE/BUG.md

@@ -0,0 +1,30 @@
+---
+name: Bug report
+about: Create a report to help us improve
+labels: "bug"
+---
+
+<!--
+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.
+
+Please help us by doing the following steps before logging an issue:
+  * Search: https://github.com/coralproject/talk/search
+  * Read the docs: https://docs.coralproject.net
+
+Please fill in the *entire* template below.
+-->
+
+**Expected behavior:**
+
+**Actual behavior:**
+
+**Related Issues:** <!-- Did you find other bugs that looked similar? -->
+
+**Versions:**
+
+- NodeJS:
+- NPM:
+- MongoDB:
+- Redis:
+- Browser:
+- OS:

.github/ISSUE_TEMPLATE/FEATURE.md

@@ -0,0 +1,27 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+labels: "feature idea"
+---
+
+<!--
+
+Please help us by doing the following steps before logging an issue:
+  * Search: https://github.com/coralproject/talk/search
+
+-->
+
+## Search Terms
+
+<!-- List of keywords you searched for before creating this issue. Write them down here so that others can find this suggestion more easily -->
+
+## Suggestion
+
+<!-- A summary of what you'd like to see added or changed -->
+
+## Use Cases
+
+<!--
+What do you want to use this for?
+What shortcomings exist with current approaches?
+-->

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,10 @@
+<!--
+Thank you for submitting a pull request!
+
+Please verify that:
+* [ ] Code is up-to-date with the base branch
+* [ ] You've successfully run `npm run test` locally
+
+Refer to CONTRIBUTING.MD for more details.
+  https://github.com/coralproject/talk/blob/master/CONTRIBUTING.md
+-->

.gitignore

@@ -21,3 +21,4 @@ dist
 *.css.d.ts
 __generated__
 README.md.orig
+persisted-queries.json

.vscode/extensions.json

@@ -0,0 +1,9 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "kumar-harsh.graphql-for-vscode",
+    "editorconfig.editorconfig",
+    "ms-azuretools.vscode-cosmosdb",
+    "mike-co.import-sorter"
+  ]
+}

.vscode/settings.json

@@ -1,5 +1,4 @@
 {
-  "editor.formatOnSave": true,
   "files.associations": {
     "*.css": "postcss"
   },
@@ -11,10 +10,48 @@
     "**/.DS_Store": true,
     ".vs": true
   },
-  "tslint.exclude": "**/node_modules/**",
-  "tslint.autoFixOnSave": true,
-  "tslint.jsEnable": true,
-  "tslint.nodePath": "node_modules/.bin/tslint",
+  "tslint.enable": false,
+  "eslint.validate": [
+		{ "language": "javascript", "autoFix": true },
+		{ "language": "typescript", "autoFix": true },
+		{ "language": "typescriptreact", "autoFix": true }
+	],
   "typescript.tsdk": "node_modules/typescript/lib",
-  "postcss.validate": false
+  "postcss.validate": false,
+  "javascript.preferences.importModuleSpecifier": "non-relative",
+  "importSorter.importStringConfiguration.quoteMark": "double",
+  "importSorter.importStringConfiguration.maximumNumberOfImportExpressionsPerLine.count": 80,
+  "importSorter.sortConfiguration.customOrderingRules.rules": [
+    {
+      "type": "importMember",
+      "regex": "^$",
+      "orderLevel": 70,
+      "disableSort": true
+    },
+    {
+      "regex": "__generated__",
+      "orderLevel": 40
+    },
+    {
+      "regex": "^coral-",
+      "orderLevel": 30
+    },
+    {
+      "regex": "\\.css$",
+      "orderLevel": 60,
+      "disableSort": true
+    },
+    {
+      "regex": "^[.]",
+      "orderLevel": 50
+    },
+  ],
+  "importSorter.importStringConfiguration.maximumNumberOfImportExpressionsPerLine.type": "newLineEachExpressionAfterCountLimitExceptIfOnlyOne",
+  "importSorter.importStringConfiguration.trailingComma": "multiLine",
+  "importSorter.importStringConfiguration.tabSize": 2,
+  "eslint.enable": true,
+  "importSorter.generalConfiguration.exclude": [
+    "d\\.ts$",
+    "__generated__"
+  ],
 }

CODE_OF_CONDUCT.md

@@ -0,0 +1,7 @@
+# Vox Media Code of Conduct
+
+## Introduction
+
+This code of conduct governs the environment of the Vox Product team. We created it not because we anticipate bad behavior, but because we believe that articulating our values and obligations to one another reinforces the already exceptional level of respect among the team and because having a code provides us with clear avenues to correct our culture should it ever stray from that course. We make this code public in the hopes of contributing to the ongoing conversation about inclusion in the tech, design, and media communities and encourage other teams to fork it and make it their own. To our team, we commit to enforce and evolve this code as our team grows.
+
+Read the rest here: http://code-of-conduct.voxmedia.com/

CONTRIBUTING.md

@@ -0,0 +1,66 @@
+# Contributor's Guide
+
+Welcome! We are very excited that you are interested in contributing to Coral.
+
+This document is a companion to help you approach contributing. If it does not
+do so, please [let us know how we can improve it](https://github.com/coralproject/talk/issues)!
+
+By contributing to this project you agree to the
+[Code of Conduct](CODE_OF_CONDUCT.md).
+
+## What should I Contribute?
+
+There are at least three ways to contribute to Coral:
+
+- Writing Code
+- Providing Translations
+
+## Writing Code
+
+Conversation surrounding contributions begins in
+[issues](https://github.com/coralproject/talk/issues).
+
+### When should I create an issue?
+
+File an issue as soon as you have an idea of something you'd like to contribute.
+We would love to hear what you're thinking and help refine the idea to make it
+into the Coral ecosystem.
+
+Please file issues if you would like to contribute to Coral.
+
+### What should I include?
+
+Coral has adopted an iterative, agile development philosophy. All contributions
+that make it into the Coral repository should start with a user story in this
+form:
+
+> As a [type of Coral user] I'd like to [do something] so that I can [get some result/value].
+
+This exercise does two things:
+
+- allows us to ground our technical choices in a clear, simple product need.
+- expresses that product need in a way that doesn't imply a specific technical
+  solution allowing for debate as to the best way to solve the problem.
+
+Please feel free to provide as much detail as possible when filing the issue but
+please do keep the initial issue specific to one need and try to avoid including
+technical or design solutions.
+
+If you have a specific technical or design solution in mind, please submit it as
+the first comment on the thread.
+
+## Localization
+
+We use the [fluent](http://projectfluent.org/) library and store our
+translations in [FTL](http://projectfluent.org/fluent/guide/) files in
+`src/locales/` and `src/core/server/locales/`.
+
+Strings are added or removed from localization bundles in the translation files
+as needed. Strings **MUST NOT** be _changed_ after they've been committed and
+pushed to master. Changing a string requires creating a new ID with a new name
+(preferably descriptive instead of incremented) and deletion of the obsolete ID.
+It's often useful to add a comment above the string with info about how and
+where the string is used.
+
+Once a language has enough coverage, it should be added to
+`src/core/common/helpers/i18n/locales.ts`.

README.md

@@ -9,294 +9,32 @@ Built with <3 by The Coral Project, a part of [Vox Media](https://product.voxmed
 
 Preview Coral easily by running Coral via a Heroku App:
 
-[![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy?template=https://github.com/coralproject/talk/tree/next)
+[![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy?template=https://github.com/coralproject/talk)
 
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 ## Table of Contents
 
-- [Requirements](#requirements)
-- [Running](#running)
-  - [Docker](#docker)
-  - [Source](#source)
-  - [Development](#development)
-    - [Embed On Your Site](#embed-on-your-site)
-    - [Email](#email)
-    - [Design Language System (UI Components)](#design-language-system-ui-components)
-- [Configuration](#configuration)
+- [Documentation](#documentation)
+- [Pre-Launch Guide](#pre-launch-guide)
+- [More Resources](#more-resources)
 - [License](#license)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
-## Requirements
+## Documentation
 
-- MongoDB >=3.6
-- Redis >=3.2
-- NodeJS >=10
-- NPM >=6.7
+You can get started with Coral using our [Documentation](https://docs.coralproject.net/talk/).
 
-## Running
+## Pre-Launch Guide
 
-You can install Coral using Docker or via Source. We recommend Docker, as it
-provides the easiest deployment solution going forward, as all the dependencies
-are baked and shipped with the provided
-[coralproject/talk:next](https://hub.docker.com/r/coralproject/talk) image.
-When v5 releases to master, you'll be able to select it using
-`coralproject/talk:5`.
+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://coralproject.net/blog/youve-installed-talk-now-what/).
 
-### Docker
+## More Resources
 
-The easiest way to get started with Coral is through our published Docker image
-and provided example `docker-compose.yml` file. The following assumes that you
-have Docker and Docker Compose installed on your local machine:
-
-- Install Docker: https://docs.docker.com/install/
-- Install Docker Compose: https://docs.docker.com/compose/install/ (this is typically included in the Docker Desktop editions already)
-
-```bash
-# Create directories to persist the data in MongoDB and Redis.
-mkdir -p data/{mongo,redis}
-
-# Create the `docker-compose.yml` file to get started.
-cat > docker-compose.yml <<EOF
-version: "2"
-services:
-  talk:
-    image: coralproject/talk:next
-    restart: always
-    ports:
-      - "127.0.0.1:3000:5000"
-    depends_on:
-      - mongo
-      - redis
-    environment:
-      - MONGODB_URI=mongodb://mongo:27017/coral
-      - REDIS_URI=redis://redis:6379
-      - SIGNING_SECRET=<replace me with something secret>
-  mongo:
-    image: mongo:3.6
-    volumes:
-      - ./data/mongo:/data/db
-  redis:
-    image: redis:3.2
-    volumes:
-      - ./data/redis:/data
-EOF
-
-# Start up Coral using Docker.
-docker-compose up -d
-```
-
-Then head on over to http://localhost:3000 to install Coral!
-
-### Source
-
-Coral requires NodeJS >=10, we recommend using `nvm` to help manage node
-versions: https://github.com/creationix/nvm.
-
-```bash
-# Clone and cd into the Coral directory.
-git clone https://github.com/coralproject/talk.git
-cd talk
-
-# Install dependencies.
-npm install
-
-# Build the application dependencies.
-# This might take a while.
-npm run build
-```
-
-This should output all the compiled application code to `./dist`.
-
-Running Coral with default settings assumes that you have:
-
-- MongoDB >=3.6 running on `127.0.0.1:27017`
-- Redis >=3.2 running on `127.0.0.1:6379`
-
-If you don't already have these databases running, you can execute the following
-assuming you have Docker installed on your local machine:
-
-```bash
-docker run -d -p 27017:27017 --restart always --name mongo mongo:3.6
-docker run -d -p 6379:6379 --restart always --name redis redis:3.2
-```
-
-Then start Coral with:
-
-```bash
-# Start the server in production mode.
-npm run start
-```
-
-Then head on over to http://localhost:3000 to install Coral!
-
-### Development
-
-Running Coral for development is very similar to installing Coral via Source as
-described above.
-
-Coral requires NodeJS >=10, we recommend using `nvm` to help manage node
-versions: https://github.com/creationix/nvm.
-
-```bash
-# Clone and cd into the Coral directory.
-git clone https://github.com/coralproject/talk.git
-cd talk
-
-# Install dependencies.
-npm install
-```
-
-Running Coral with default settings assumes that you have:
-
-- MongoDB >=3.6 running on `127.0.0.1:27017`
-- Redis >=3.2 running on `127.0.0.1:6379`
-
-If you don't already have these databases running, you can execute the following
-assuming you have Docker installed on your local machine:
-
-```bash
-docker run -d -p 27017:27017 --restart always --name mongo mongo:3.6
-docker run -d -p 6379:6379 --restart always --name redis redis:3.2
-```
-
-Then start Coral with:
-
-```bash
-# Run the server in development mode in order to facilitate auto-restarting and
-# rebuilding when file changes are detected. This might take a while to fully run.
-npm run watch
-```
-
-When the client code has been built, navigate to http://localhost:8080/install
-to start the installation wizard. **Note: Ensure `localhost:8080` is used in the permitted domains list.**
-
-To see the comment stream goto http://localhost:8080/.
-
-To run linting and tests use the following commands:
-
-```bash
-# Run the linters.
-npm run lint
-
-# Run our unit and integration tests.
-npm run test
-```
-
-#### Embed On Your Site
-With Coral setup and running locally you can test embeding the comment stream with this sample embed script:
-
-```
-<div id="coral_thread"></div>
-<script type="text/javascript">
-(function() {
-    var talk = document.createElement('script'); talk.type = 'text/javascript'; talk.async = true;
-    var url = '{{ CORAL_DOMAIN_NAME }}';
-    talk.src = '//' + url + '/assets/js/embed.js';
-    talk.onload = function() {
-        Coral.createStreamEmbed({
-            id: "coral_thread",
-            autoRender: true,
-            rootURL: '//' + url,
-        });
-    };
-    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(talk);
-})();
-</script>
-```
-Replace the value of CORAL_DOMAIN_NAME with the location of your running instance of Coral.
-
-#### Email
-
-To test out the email sending functionality, you can run [inbucket](https://www.inbucket.org/)
-which provides a test SMTP server that can visualize emails in the browser:
-
-```bash
-docker run -d --name inbucket -p 2500:2500 -p 9000:9000 inbucket/inbucket
-```
-
-You can then configure the email server on Coral by updating the Tenant with:
-
-```js
-{
-  // ...
-  "email": {
-    "enabled": true,
-    "smtpURI": "smtp://localhost:2500",
-    "fromAddress": "community@test.com"
-  },
-  // ...
-}
-```
-
-Restarting Coral will be needed. Navigate to http://localhost:9000, click the
-"Monitor" tab. New emails received on this screen.
-
-#### Design Language System (UI Components)
-
-We use [docz](https://docz.site) to document and develop our Design Language System. To start docz run:
-
-```bash
-# Make sure CSS types are generated.
-# This is not required when `npm run watch` is already running.
-npm run generate:css-types
-
-# Run docz in development.
-npm run docz -- dev
-```
-
-After compilation has finished you can access docz at http://localhost:3030/.
-
-## Configuration
-
-The following environment variables can be set to configure the Coral Server. You
-can expose them in your shell via `export NODE_ENV=development` or by placing
-the variables in a `.env` file in the root of the project in a simple
-`NODE_ENV=development` format delimited by newlines.
-
-- `NODE_ENV` - Can be one of `production` or `development`. All production
-  deployments should use `production`. Defaults to `production` when ran with
-  `npm run start` and `development` when run with `npm run start:development`.
-- `PORT` - The port to listen for HTTP and Websocket requests. (Default `3000`)
-- `MONGODB_URI` - The MongoDB database URI to connect to.
-  (Default `mongodb://127.0.0.1:27017/coral`)
-- `REDIS_URI` - The Redis database URI to connect to.
-  (Default `redis://127.0.0.1:6379`)
-- `REDIS_OPTIONS` - A JSON string with optional configuration options to be used
-  when connecting to Redis as specified in the [ioredis](https://github.com/luin/ioredis/blob/1dac50a63753c2afc969315cfe38faf0edc50bc5/API.md#new_Redis_new) documentation.
-  (Default: `{}`)
-- `SIGNING_SECRET` - The shared secret to use to sign JSON Web Tokens (JWT) with
-  the selected signing algorithm. 🚨 **Don't forget to set this variable!** 🚨
-  (Default: `keyboard cat`)
-- `SIGNING_ALGORITHM` - The signing algorithm to use for signing JWT's.
-  (Default `HS256`).
-- `LOGGING_LEVEL` - The logging level that can be set to one of `fatal`,
-  `error`, `warn`, `info`, `debug`, or `trace`. (Default `info`)
-- `STATIC_URI` - The URI that static assets can be accessed from. This URI can
-  be to a proxy that uses this Coral server on `PORT` as the upstream. Disabled
-  by default.
-- `DISABLE_TENANT_CACHING` - When `true`, all tenants will be loaded from the
-  database when needed rather than keeping a in-memory copy in sync via
-  published events on Redis. (Default `false`)
-- `DISABLE_MONGODB_AUTOINDEXING` - When `true`, Coral will not perform indexing
-  operations when it starts up. This can be desired when you've already
-  installed Coral on the target MongoDB, but want to improve start performance.
-  (Default `false`)
-- `LOCALE` - Specify the default locale to use for all requests without a locale
-  specified. (Default `en-US`)
-- `ENABLE_GRAPHIQL` - When `true`, it will enable the `/graphiql` even in
-  production, use with care. (Default `false`)
-- `CONCURRENCY` - The number of worker nodes to spawn to handle web traffic,
-  this should be tied to the number of CPU's available. (Default
-  `os.cpus().length`)
-- `DEV_PORT` - The port where the Webpack Development server is running on.
-  (Default `8080`)
-- `METRICS_USERNAME` - The username for _Basic Authentication_ at the `/metrics` and `/cluster_metrics`
-  endpoint.
-- `METRICS_PASSWORD` - The password for _Basic Authentication_ at the `/metrics` and `/cluster_metrics`
-  endpoint.
-- `CLUSTER_METRICS_PORT` - If `CONCURRENCY` is more than `1`, the metrics are provided at this port under `/cluster_metrics`. (Default `3001`)
+- [Our Blog](https://coralproject.net/blog)
+- [Community Guides for Journalism](https://guides.coralproject.net/)
+- [More About Us](https://coralproject.net/)
 
 ## License
 

app.json

@@ -21,6 +21,10 @@
     "ENABLE_GRAPHIQL": {
       "description": "When true, this will enable the GraphiQL routes",
       "value": "false"
+    },
+    "TRUST_PROXY": {
+      "description": "When set to 1, it instructs Coral to trust up to one proxy, this is needed for authentication support",
+      "value": "1"
     }
   },
   "addons": [

config/jest/client.config.js

@@ -29,10 +29,12 @@ module.exports = {
     "^coral-account/(.*)$": "<rootDir>/src/core/client/account/$1",
     "^coral-admin/(.*)$": "<rootDir>/src/core/client/admin/$1",
     "^coral-auth/(.*)$": "<rootDir>/src/core/client/auth/$1",
+    "^coral-count/(.*)$": "<rootDir>/src/core/client/count/$1",
     "^coral-ui/(.*)$": "<rootDir>/src/core/client/ui/$1",
     "^coral-stream/(.*)$": "<rootDir>/src/core/client/stream/$1",
     "^coral-framework/(.*)$": "<rootDir>/src/core/client/framework/$1",
     "^coral-common/(.*)$": "<rootDir>/src/core/common/$1",
+    "^coral-test/(.*)$": "<rootDir>/src/core/client/test/$1",
   },
   moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node", "ftl"],
   snapshotSerializers: ["enzyme-to-json/serializer"],

config/watcher.ts

@@ -27,7 +27,7 @@ const config: Config = {
         "**/test/**/*",
         "core/**/*.spec.*",
       ],
-      executor: new CommandExecutor("npm run --silent generate:relay-stream", {
+      executor: new CommandExecutor("npm run --silent generate:relay:stream", {
         runOnInit: true,
       }),
     },
@@ -44,7 +44,7 @@ const config: Config = {
         "**/test/**/*",
         "core/**/*.spec.*",
       ],
-      executor: new CommandExecutor("npm run generate:relay-account", {
+      executor: new CommandExecutor("npm run generate:relay:account", {
         runOnInit: true,
       }),
     },
@@ -61,7 +61,7 @@ const config: Config = {
         "**/test/**/*",
         "core/**/*.spec.*",
       ],
-      executor: new CommandExecutor("npm run --silent generate:relay-admin", {
+      executor: new CommandExecutor("npm run --silent generate:relay:admin", {
         runOnInit: true,
       }),
     },
@@ -78,7 +78,7 @@ const config: Config = {
         "**/test/**/*",
         "core/**/*.spec.*",
       ],
-      executor: new CommandExecutor("npm run --silent generate:relay-auth", {
+      executor: new CommandExecutor("npm run --silent generate:relay:auth", {
         runOnInit: true,
       }),
     },
@@ -95,7 +95,7 @@ const config: Config = {
         "**/test/**/*",
         "core/**/*.spec.*",
       ],
-      executor: new CommandExecutor("npm run --silent generate:relay-install", {
+      executor: new CommandExecutor("npm run --silent generate:relay:install", {
         runOnInit: true,
       }),
     },

config/webpackDevServer.config.ts

@@ -71,7 +71,7 @@ export default function({
         { from: /^\/account/, to: "/account.html" },
         { from: /^\/admin/, to: "/admin.html" },
         { from: /^\/embed\/stream/, to: "/stream.html" },
-        { from: /^\/embed\/auth/, to: "/auth.html" },
+        { from: /^\/embed\/auth$/, to: "/auth.html" },
         { from: /^\/embed\/auth\/callback/, to: "/auth-callback.html" },
         { from: /^\/install/, to: "/install.html" },
       ],

gulpfile.js

@@ -67,9 +67,18 @@ gulp.task("server:static", () =>
     .pipe(gulp.dest(resolveDistFolder() + "/core/server"))
 );
 
+gulp.task("locales", () =>
+  gulp
+    .src(["./src/locales/**/*"])
+    .pipe(gulp.dest(resolveDistFolder() + "/locales"))
+);
+
 gulp.task(
   "server",
-  gulp.series("server:schema", gulp.parallel("server:scripts", "server:static"))
+  gulp.series(
+    "server:schema",
+    gulp.parallel("server:scripts", "server:static", "locales")
+  )
 );
 
 gulp.task("default", gulp.series("clean", "server"));

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coralproject/talk",
-  "version": "5.0.0-beta.3",
+  "version": "5.2.0",
   "author": "The Coral Project",
   "homepage": "https://coralproject.net/",
   "sideEffects": [
@@ -12,7 +12,7 @@
   },
   "engines": {
     "node": ">=10.0.0",
-    "npm": ">=6.7.0"
+    "npm": ">=6.9.0"
   },
   "bugs": "https://github.com/coralproject/talk/issues",
   "contributors": [
@@ -20,27 +20,31 @@
   ],
   "description": "A better commenting experience from Mozilla, The Washington Post, and The New York Times.",
   "scripts": {
-    "build": "NODE_ENV=production WEBPACK_DISABLE_SOURCEMAPS=1 npm-run-all generate --parallel lint:client build:client build:server",
-    "build:development": "NODE_ENV=development npm-run-all generate --parallel lint:client build:client build:server",
+    "build": "NODE_ENV=production npm-run-all generate-persist --parallel build:client build:server",
+    "build:development": "NODE_ENV=development npm-run-all generate --parallel build:client build:server",
     "build:client": "ts-node --transpile-only ./scripts/build.ts",
     "build:server": "gulp server",
+    "migration:create": "ts-node --transpile-only ./scripts/migration/create.ts",
     "doctoc": "doctoc --title='## Table of Contents' --github README.md",
-    "generate": "npm-run-all --parallel generate:*",
+    "generate": "npm-run-all generate:css-types generate:schema generate:relay",
+    "generate-persist": "npm-run-all generate:css-types generate:schema generate:relay-persist",
     "generate:css-types": "tcm src/core/client/",
-    "generate:relay-stream": "ts-node --transpile-only ./scripts/compileRelay --src ./src/core/client/stream --schema tenant",
-    "generate:relay-account": "ts-node --transpile-only ./scripts/compileRelay --src ./src/core/client/account --schema tenant",
-    "generate:relay-auth": "ts-node --transpile-only ./scripts/compileRelay --src ./src/core/client/auth --schema tenant",
-    "generate:relay-install": "ts-node --transpile-only ./scripts/compileRelay --src ./src/core/client/install --schema tenant",
-    "generate:relay-admin": "ts-node --transpile-only ./scripts/compileRelay --src ./src/core/client/admin --schema tenant",
+    "generate:relay": "npm-run-all --parallel generate:relay:*",
+    "generate:relay-persist": "npm-run-all --parallel 'generate:relay:* -- --persist'",
+    "generate:relay:stream": "ts-node --transpile-only ./scripts/compileRelay --src ./src/core/client/stream --schema tenant",
+    "generate:relay:account": "ts-node --transpile-only ./scripts/compileRelay --src ./src/core/client/account --schema tenant",
+    "generate:relay:auth": "ts-node --transpile-only ./scripts/compileRelay --src ./src/core/client/auth --schema tenant",
+    "generate:relay:install": "ts-node --transpile-only ./scripts/compileRelay --src ./src/core/client/install --schema tenant",
+    "generate:relay:admin": "ts-node --transpile-only ./scripts/compileRelay --src ./src/core/client/admin --schema tenant",
     "generate:schema": "node ./scripts/generateSchemaTypes.js",
     "docz": "docz",
     "start": "NODE_ENV=production node dist/index.js",
     "start:development": "NODE_ENV=development CONCURRENCY=${CONCURRENCY:-1} TS_NODE_PROJECT=./src/tsconfig.json ts-node-dev --inspect --transpile-only --no-notify -r tsconfig-paths/register ./src/index.ts",
     "start:webpackDevServer": "ts-node --transpile-only ./scripts/start.ts",
     "lint": "npm-run-all --parallel lint:* tscheck:*",
-    "lint:server": "tslint --project ./src/tsconfig.json",
-    "lint:client": "tslint --project ./src/core/client/tsconfig.json",
-    "lint:scripts": "tslint --project ./tsconfig.json",
+    "lint:server": "eslint 'src/**/*.{js,ts,tsx}' --ignore-pattern 'src/core/client/**'",
+    "lint:client": "eslint 'src/core/client/**/*.{js,ts,tsx}'",
+    "lint:scripts": "eslint 'scripts/**/*.{js,ts,tsx}'",
     "lint:graphql": "graphql-schema-linter src/core/server/graph/tenant/schema/schema.graphql",
     "lint-fix": "npm run lint:server -- --fix && npm run lint:client -- --fix && npm run lint:scripts -- --fix",
     "test": "node scripts/test.js --env=jsdom",
@@ -54,7 +58,8 @@
   "dependencies": {
     "@coralproject/bunyan-prettystream": "^0.1.4",
     "akismet-api": "^4.2.0",
-    "apollo-server-express": "^2.1.0",
+    "apollo-server-express": "^2.8.1",
+    "archiver": "^3.0.3",
     "basic-auth": "^2.0.1",
     "bcryptjs": "^2.4.3",
     "bull": "^3.8.1",
@@ -63,7 +68,11 @@
     "consolidate": "0.14.0",
     "content-security-policy-builder": "^2.0.0",
     "convict": "^4.3.1",
+    "cookie": "^0.4.0",
+    "cookie-parser": "^1.4.4",
     "cors": "^2.8.4",
+    "cron": "^1.7.1",
+    "csv-stringify": "^5.3.0",
     "dataloader": "^1.4.0",
     "dompurify": "^1.0.8",
     "dotenv": "^6.0.0",
@@ -71,11 +80,8 @@
     "env-rewrite": "^1.0.2",
     "express": "^4.16.3",
     "express-static-gzip": "^0.3.2",
-    "farce": "^0.2.6",
     "fluent": "^0.10.0",
     "fluent-dom": "^0.4.1",
-    "found": "^0.4.0-alpha.17",
-    "found-relay": "^0.4.0-alpha.8",
     "fs-extra": "^6.0.1",
     "graphql": "^0.13.2",
     "graphql-config": "^2.0.1",
@@ -93,9 +99,10 @@
     "jsonwebtoken": "^8.3.0",
     "juice": "^5.2.0",
     "jwks-rsa": "^1.3.0",
-    "linkify-it": "^2.1.0",
+    "keymaster": "^1.6.2",
     "linkifyjs": "^2.1.8",
-    "lodash": "^4.17.10",
+    "lodash": "^4.17.15",
+    "lru-cache": "^5.1.1",
     "luxon": "^1.12.0",
     "metascraper-author": "^3.11.8",
     "metascraper-date": "^3.11.4",
@@ -120,14 +127,14 @@
     "prom-client": "^11.3.0",
     "proxy-agent": "^3.1.0",
     "querystringify": "^2.1.0",
-    "react-relay-network-modern": "^3.0.4",
+    "react-helmet": "^5.2.1",
     "source-map-support": "^0.5.12",
     "stack-utils": "^1.0.2",
     "striptags": "^3.1.1",
     "throng": "^4.0.0",
-    "tlds": "^1.203.1",
     "tsscmp": "^1.0.6",
-    "uuid": "^3.3.2",
+    "url-regex": "^5.0.0",
+    "uuid": "^3.3.3",
     "verror": "^1.10.0"
   },
   "devDependencies": {
@@ -142,6 +149,7 @@
     "@coralproject/rte": "^0.10.15",
     "@intervolga/optimize-cssnano-plugin": "^1.0.6",
     "@types/agent-base": "^4.2.0",
+    "@types/archiver": "^3.0.0",
     "@types/basic-auth": "^1.1.2",
     "@types/bcryptjs": "^2.4.1",
     "@types/bull": "^3.5.12",
@@ -150,10 +158,14 @@
     "@types/cheerio": "^0.22.8",
     "@types/classnames": "^2.2.7",
     "@types/commander": "^2.12.2",
+    "@types/common-tags": "^1.8.0",
     "@types/compression-webpack-plugin": "^2.0.0",
     "@types/consolidate": "0.0.34",
     "@types/convict": "^4.2.0",
+    "@types/cookie": "^0.3.3",
+    "@types/cookie-parser": "^1.4.1",
     "@types/cors": "^2.8.4",
+    "@types/cron": "^1.7.1",
     "@types/cross-spawn": "^6.0.0",
     "@types/dotenv": "^4.0.3",
     "@types/enzyme": "^3.1.15",
@@ -171,9 +183,9 @@
     "@types/joi": "^13.0.8",
     "@types/jsdom": "^12.2.3",
     "@types/jsonwebtoken": "^7.2.7",
-    "@types/linkify-it": "^2.1.0",
     "@types/linkifyjs": "^2.1.1",
     "@types/lodash": "^4.14.118",
+    "@types/lru-cache": "^5.1.0",
     "@types/luxon": "^1.12.0",
     "@types/marked": "^0.6.0",
     "@types/mini-css-extract-plugin": "^0.2.0",
@@ -183,6 +195,7 @@
     "@types/node-fetch": "^2.3.3",
     "@types/nodemailer": "^4.6.2",
     "@types/nunjucks": "^3.1.1",
+    "@types/object-diff": "0.0.0",
     "@types/on-finished": "^2.3.1",
     "@types/passport": "^0.4.6",
     "@types/passport-facebook": "^2.1.8",
@@ -194,6 +207,7 @@
     "@types/react": "^16.8.15",
     "@types/react-copy-to-clipboard": "^4.2.6",
     "@types/react-dom": "^16.8.4",
+    "@types/react-helmet": "^5.0.10",
     "@types/react-relay": "^1.3.14",
     "@types/react-responsive": "^3.0.1",
     "@types/react-test-renderer": "^16.8.1",
@@ -207,7 +221,6 @@
     "@types/source-map-support": "^0.5.0",
     "@types/stack-utils": "^1.0.1",
     "@types/throng": "^4.0.2",
-    "@types/tlds": "^1.199.0",
     "@types/uuid": "^3.4.4",
     "@types/verror": "^1.10.3",
     "@types/vinyl": "^2.0.2",
@@ -216,6 +229,9 @@
     "@types/webpack-bundle-analyzer": "^2.13.1",
     "@types/webpack-dev-server": "^3.1.5",
     "@types/ws": "^5.1.2",
+    "@typescript-eslint/eslint-plugin": "2.3.3",
+    "@typescript-eslint/eslint-plugin-tslint": "2.3.3",
+    "@typescript-eslint/parser": "2.3.3",
     "acorn": "^6.1.1",
     "ansi-styles": "^3.2.0",
     "autoprefixer": "^9.5.1",
@@ -235,6 +251,7 @@
     "classnames": "^2.2.6",
     "commander": "^2.20.0",
     "comment-json": "^1.1.3",
+    "common-tags": "^1.8.0",
     "compression-webpack-plugin": "^2.0.0",
     "copy-webpack-plugin": "^5.0.3",
     "cross-spawn": "^6.0.5",
@@ -246,13 +263,22 @@
     "enzyme": "^3.9.0",
     "enzyme-adapter-react-16": "^1.12.1",
     "enzyme-to-json": "^3.3.5",
+    "eslint": "^6.5.1",
+    "eslint-config-prettier": "^6.3.0",
+    "eslint-plugin-jsdoc": "^15.9.7",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-prettier": "^3.1.1",
+    "eslint-plugin-react": "^7.15.1",
     "eventemitter2": "^5.0.1",
+    "farce": "^0.2.6",
     "final-form": "4.11.0",
     "flat": "^4.1.0",
     "fluent-intl-polyfill": "^0.1.0",
     "fluent-langneg": "^0.1.1",
     "fluent-react": "^0.8.4",
-    "fork-ts-checker-webpack-plugin": "^1.3.0",
+    "fork-ts-checker-webpack-plugin": "^1.5.0",
+    "found": "^0.4.0-alpha.17",
+    "found-relay": "^0.4.0-alpha.8",
     "graphql-schema-linter": "^0.2.0",
     "graphql-schema-typescript": "^1.2.9",
     "gulp": "^4.0.2",
@@ -269,10 +295,11 @@
     "jest-mock-console": "^1.0.0",
     "lint-staged": "^8.1.6",
     "loader-utils": "^1.2.3",
-    "lodash-es": "^4.17.11",
-    "marked": "^0.6.0",
+    "lodash-es": "^4.17.14",
+    "marked": "^0.7.0",
     "material-design-icons": "^3.0.1",
     "mini-css-extract-plugin": "^0.6.0",
+    "object-diff": "0.0.4",
     "postcss-advanced-variables": "^3.0.0",
     "postcss-css-variables": "^0.11.0",
     "postcss-flexbugs-fixes": "^4.1.0",
@@ -284,7 +311,7 @@
     "postcss-nested": "^4.1.1",
     "postcss-prepend-imports": "^1.0.1",
     "postcss-preset-env": "^6.5.0",
-    "prettier": "^1.17.0",
+    "prettier": "^1.18.2",
     "prop-types": "^15.6.2",
     "pstree.remy": "^1.1.6",
     "pym.js": "^1.3.2",
@@ -297,6 +324,7 @@
     "react-final-form": "4.0.2",
     "react-popper": "^1.3.2",
     "react-relay": "^4.0.0",
+    "react-relay-network-modern": "^4.0.4",
     "react-responsive": "^7.0.0",
     "react-test-renderer": "^16.9.0-alpha.0",
     "react-timeago": "^4.1.9",
@@ -307,6 +335,7 @@
     "relay-compiler-language-typescript": "^4.1.0",
     "relay-local-schema": "^0.8.0",
     "relay-runtime": "^4.0.0",
+    "resize-observer-polyfill": "^1.5.1",
     "sane": "^4.1.0",
     "shallow-equals": "^1.0.0",
     "simplemde": "^1.11.2",
@@ -325,10 +354,7 @@
     "ts-node-dev": "^1.0.0-pre.37",
     "tsconfig-paths": "^3.8.0",
     "tsconfig-paths-webpack-plugin": "^3.2.0",
-    "tslint": "^5.16.0",
-    "tslint-config-prettier": "^1.18.0",
-    "tslint-plugin-prettier": "^2.0.1",
-    "tslint-react": "^4.0.0",
+    "tslint": "^5.20.0",
     "typed-css-modules": "^0.4.2",
     "typeface-manuale": "^0.0.71",
     "typeface-source-sans-pro": "^0.0.54",
@@ -344,12 +370,12 @@
   },
   "husky": {
     "hooks": {
-      "pre-commit": "lint-staged"
+      "pre-commit": "FAST_LINT=true lint-staged"
     }
   },
   "lint-staged": {
     "*.{j,t}s{,x}": [
-      "tslint"
+      "eslint"
     ],
     "src/core/server/graph/tenant/schema/schema.graphql": [
       "graphql-schema-linter"

scripts/WebpackDevServerUtils.js

@@ -12,7 +12,7 @@
  */
 "use strict";
 
-// tslint:disable:no-console
+/* eslint-disable no-console */
 
 const address = require("address");
 const url = require("url");
@@ -21,7 +21,6 @@ const clearConsole = require("react-dev-utils/clearConsole");
 const formatWebpackMessages = require("react-dev-utils/formatWebpackMessages");
 const typescriptFormatter = require("react-dev-utils/typescriptFormatter");
 const forkTsCheckerWebpackPlugin = require("react-dev-utils/ForkTsCheckerWebpackPlugin");
-const Stats = require("webpack/lib/Stats");
 
 // (cvle): Changed to false as we are sharing the tty with other processes.
 // const isInteractive = process.stdout.isTTY && false;
@@ -142,7 +141,7 @@ function createCompiler({
   });
 
   let isFirstCompile = true;
-  let tsMessagesPromises = [];
+  const tsMessagesPromises = [];
 
   if (useTypeScript) {
     compiler.compilers.forEach(singleCompiler => {

scripts/build.ts

@@ -17,7 +17,7 @@ import paths from "../config/paths";
 import config from "../src/core/build/config";
 import createWebpackConfig from "../src/core/build/createWebpackConfig";
 
-// tslint:disable: no-console
+/* eslint-disable no-console */
 
 process.env.WEBPACK = "true";
 process.env.NODE_ENV = process.env.NODE_ENV || "production";

scripts/compileRelay.ts

@@ -2,7 +2,7 @@
 
 import program from "commander";
 import spawn from "cross-spawn";
-import fs from "fs";
+import fs from "fs-extra";
 import path from "path";
 
 const config = JSON.parse(
@@ -14,33 +14,34 @@ program
   .usage("--src ./src/core/client/stream --schema tenant")
   .option("--src <folder>", "Find gql recursively in this folder")
   .option("--schema <schema>", "Identifier of schema")
+  .option("--persist", "Use persisted queries")
   .description("Compile relay gql data")
   .parse(process.argv);
 
 if (!program.schema) {
-  // tslint:disable-next-line:no-console
+  // eslint-disable-next-line no-console
   console.error("Schema identifier not provided");
   process.exit(1);
 }
 
 if (!program.src) {
-  // tslint:disable-next-line:no-console
+  // eslint-disable-next-line no-console
   console.error("Src not provided");
   process.exit(1);
 }
 
 if (!config.projects) {
-  // tslint:disable-next-line:no-console
+  // eslint-disable-next-line no-console
   console.error("Missing projects key in .graphqconfig");
   process.exit(1);
 }
 if (!config.projects[program.schema]) {
-  // tslint:disable-next-line:no-console
+  // eslint-disable-next-line no-console
   console.error(`Project ${program.schema} not found in .graphqconfig`);
   process.exit(1);
 }
 if (!config.projects[program.schema].schemaPath) {
-  // tslint:disable-next-line:no-console
+  // eslint-disable-next-line no-console
   console.error(
     `SchemaPath for project ${program.schema} not found in .graphqconfig`
   );
@@ -57,8 +58,30 @@ const args = [
   `${program.src}/__generated__`,
   "--schema",
   config.projects[program.schema].schemaPath,
-  // "--persist-output",
-  // `${program.src}/persisted-queries.json`,
 ];
 
+// Set the persisted query path.
+const persist = program.persist
+  ? `${program.src}/persisted-queries.json`
+  : null;
+if (persist) {
+  args.push("--persist-output", persist);
+}
+
 spawn.sync("relay-compiler", args, { stdio: "inherit" });
+
+if (persist) {
+  if (fs.existsSync(persist)) {
+    // Create the new filename.
+    const name = path.basename(program.src);
+    const generated = "./src/core/server/graph/common/persisted/__generated__";
+
+    // Create the generated directory if it doesn't exist.
+    fs.ensureDirSync(generated);
+
+    // Copy the file over to the destination directory.
+    fs.copySync(persist, `${generated}/${name}.json`, {
+      overwrite: true,
+    });
+  }
+}

scripts/generateSchemaTypes.js

@@ -1,4 +1,3 @@
-const { Linter, Configuration } = require("tslint");
 const { generateTSTypesAsString } = require("graphql-schema-typescript");
 const { getGraphQLConfig } = require("graphql-config");
 const path = require("path");
@@ -19,7 +18,7 @@ async function main() {
         contextType: "TenantContext",
         importStatements: [
           'import TenantContext from "coral-server/graph/tenant/context";',
-          'import { Cursor } from "coral-server/models/helpers/connection";',
+          'import { Cursor } from "coral-server/models/helpers";',
         ],
         customScalarType: { Cursor: "Cursor", Time: "Date" },
       },
@@ -69,12 +68,12 @@ if (require.main === module) {
   main()
     .then(files => {
       for (const { fileName } of files) {
-        // tslint:disable-next-line:no-console
+        // eslint-disable-next-line no-console
         console.log(`Generated ${fileName}`);
       }
     })
     .catch(err => {
-      // tslint:disable-next-line:no-console
+      // eslint-disable-next-line no-console
       console.error(err);
     });
 }

scripts/migration/create.ts

@@ -0,0 +1,52 @@
+#!/usr/bin/env ts-node
+
+/**
+ * This script can be invoked via:
+ *
+ *   npm run migration:create <migration name>
+ *
+ * To create new database migrations.
+ */
+
+/* eslint-disable no-console */
+
+import fs from "fs-extra";
+import lodash from "lodash";
+import path from "path";
+
+const templateFilePath = path.resolve(
+  path.join(
+    __dirname,
+    "../../src/core/server/services/migrate/migration_sample.ts"
+  )
+);
+
+const argv = process.argv.slice(2);
+if (argv.length !== 1) {
+  console.error("usage: npm run migration:create <migration name>");
+  process.exit(1);
+}
+
+// Get the name of the new migration.
+const name = lodash.snakeCase(argv[0]);
+
+// Get the version of the new migration.
+const version = Date.now();
+
+// Get the filePath of the new migration.
+const filePath = path.resolve(
+  path.join(
+    __dirname,
+    `../../src/core/server/services/migrate/migrations/${version}_${name}.ts`
+  )
+);
+
+if (fs.existsSync(filePath)) {
+  console.error(`migration already exists at: ${filePath}`);
+  process.exit(1);
+}
+
+// Write the template out to the file.
+fs.copyFileSync(templateFilePath, filePath);
+
+console.log(`created new migration at: ${filePath}`);

scripts/start.ts

@@ -14,7 +14,7 @@ import createDevServerConfig from "../config/webpackDevServer.config";
 import config from "../src/core/build/config";
 import createWebpackConfig from "../src/core/build/createWebpackConfig";
 
-// tslint:disable: no-console
+/* eslint-disable no-console */
 
 // Enforce environment to be development.
 config.validate().set("env", "development");

scripts/test.js

@@ -24,7 +24,7 @@ process.on("unhandledRejection", err => {
 const paths = require("../config/paths.ts").default;
 
 const jest = require("jest");
-let argv = process.argv.slice(2);
+const argv = process.argv.slice(2);
 argv.push("--config", paths.appJestConfig);
 
 // Watch unless on CI or in coverage mode

scripts/watcher/CommandExecutor.ts

@@ -21,8 +21,8 @@ export default class CommandExecutor implements Executor {
   private args?: ReadonlyArray<string>;
   private spawnMultiple: boolean;
   private runOnInit: boolean;
-  private isRunning: boolean = false;
-  private shouldRespawn: boolean = false;
+  private isRunning = false;
+  private shouldRespawn = false;
   private spawnProcessDebounced?: (() => void) & Cancelable;
 
   constructor(cmd: string, opts: CommandExecutorOptions = {}) {
@@ -67,7 +67,7 @@ export default class CommandExecutor implements Executor {
     child.on("close", (code: number) => {
       this.isRunning = false;
       if (code !== 0 && code !== null) {
-        // tslint:disable-next-line: no-console
+        // eslint-disable-next-line no-console
         console.log(chalk.red(`Command exited with ${code}`));
       }
       if (this.shouldRespawn) {

scripts/watcher/LongRunningExecutor.ts

@@ -17,8 +17,8 @@ export default class LongRunningExecutor implements Executor {
   private cmd: string;
   private args?: ReadonlyArray<string>;
   private process: ChildProcess | null = null;
-  private isRunning: boolean = false;
-  private shouldRestart: boolean = false;
+  private isRunning = false;
+  private shouldRestart = false;
   private restartDebounced: (() => void) & Cancelable;
 
   constructor(cmd: string, opts: LongRunningExecutorOptions = {}) {
@@ -37,11 +37,11 @@ export default class LongRunningExecutor implements Executor {
       shell: !this.args,
     });
 
-    this.process!.on("exit", (code: number) => {
+    this.process.on("exit", (code: number) => {
       this.isRunning = false;
 
       if (code !== 0 && code !== null) {
-        // tslint:disable-next-line: no-console
+        // eslint-disable-next-line no-console
         console.log(chalk.red(`Command exited with ${code}`));
         return;
       }

scripts/watcher/SaneWatcher.ts

@@ -18,7 +18,7 @@ function canUseWatchman(): boolean {
   try {
     execSync("watchman --version", { stdio: ["ignore"] });
     return true;
-    // tslint:disable-next-line:no-empty
+    // eslint-disable-next-line no-empty
   } catch (e) {}
   return false;
 }
@@ -34,7 +34,7 @@ export default class SaneWatcher implements Watcher {
     // Autodetect watchman.
     if (this.watchman === undefined && canUseWatchman()) {
       this.watchman = true;
-      // tslint:disable-next-line:no-console
+      // eslint-disable-next-line no-console
       console.log(chalk.grey(`Watchman detected`));
     }
   }

scripts/watcher/bin/watcher.ts

@@ -14,7 +14,7 @@ async function run(
     throw new Error("Config file not specified");
   }
 
-  // tslint:disable-next-line:no-var-requires
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
   let config: any = require(path.resolve(configFile));
   if (config.__esModule) {
     config = config.default;
@@ -31,7 +31,7 @@ const cmd = program
   .parse(process.argv);
 
 run(cmd.args, cmd.opts()).catch(err => {
-  // tslint:disable-next-line:no-console
+  // eslint-disable-next-line no-console
   console.error(err);
   process.exit(1);
 });

scripts/watcher/watch.ts

@@ -21,7 +21,7 @@ async function beginWatch(
     await executor.onInit();
   }
   for await (const filePath of watcher.watch(rootDir, paths, { ignore })) {
-    // tslint:disable-next-line:no-console
+    // eslint-disable-next-line no-console
     console.log(chalk.cyanBright(`Execute "${key}"`));
     executor.execute(filePath);
   }
@@ -72,7 +72,7 @@ function filterOnly(
   }
   return pickBy(watchers, (value, key) => {
     if (resolved.indexOf(key) === -1) {
-      // tslint:disable-next-line:no-console
+      // eslint-disable-next-line no-console
       console.log(chalk.grey(`Disabled watcher "${key}"`));
       return false;
     }
@@ -98,11 +98,11 @@ export default async function watch(config: Config, options: Options = {}) {
   }
 
   for (const key of Object.keys(watchersConfigs)) {
-    // tslint:disable-next-line:no-console
+    // eslint-disable-next-line no-console
     console.log(chalk.cyanBright(`Start watcher "${key}"`));
     const watcherConfig = watchersConfigs[key];
     beginWatch(watcher, key, watcherConfig, rootDir).catch(err => {
-      // tslint:disable-next-line:no-console
+      // eslint-disable-next-line no-console
       console.error(err);
       process.exit(1);
     });

scripts/webpackHotDevClient.js

@@ -7,7 +7,7 @@
 
 "use strict";
 
-// tslint:disable:no-console
+/* eslint-disable */
 
 // This alternative WebpackDevServer combines the functionality of:
 // https://github.com/webpack/webpack-dev-server/blob/webpack-1/client/index.js

src/core/build/config.ts

@@ -1,5 +1,7 @@
 import convict from "convict";
 
+import { LOCALES } from "../common/helpers/i18n/locales";
+
 const config = convict({
   env: {
     doc: "The application environment.",
@@ -21,6 +23,12 @@ const config = convict({
     env: "DEV_PORT",
     arg: "dev-port",
   },
+  defaultLocale: {
+    doc: "Specify the default locale to use",
+    format: LOCALES,
+    default: "en-US",
+    env: "LOCALE",
+  },
   generateReport: {
     doc: "Generate a report using webpack-bundle-analyzer",
     format: Boolean,

src/core/build/createWebpackConfig.ts

@@ -1,4 +1,5 @@
 import OptimizeCssnanoPlugin from "@intervolga/optimize-cssnano-plugin";
+import bunyan from "bunyan";
 import CaseSensitivePathsPlugin from "case-sensitive-paths-webpack-plugin";
 import CompressionPlugin from "compression-webpack-plugin";
 import ForkTsCheckerWebpackPlugin from "fork-ts-checker-webpack-plugin";
@@ -30,6 +31,12 @@ import paths from "./paths";
 const filterPlugins = (plugins: Array<Plugin | null>): Plugin[] =>
   plugins.filter(identity) as Plugin[];
 
+// Create the build logger.
+const logger = bunyan.createLogger({
+  name: "coral",
+  level: "debug",
+});
+
 interface CreateWebpackOptions {
   appendPlugins?: any[];
   watch?: boolean;
@@ -41,6 +48,8 @@ export default function createWebpackConfig(
   config: Config,
   { appendPlugins = [], watch = false }: CreateWebpackOptions = {}
 ): Configuration[] {
+  logger.debug({ config: config.toString() }, "loaded configuration");
+
   const maxCores = config.get("maxCores");
   const env = createClientEnv(config);
   const disableSourcemaps = config.get("disableSourcemaps");
@@ -83,23 +92,23 @@ export default function createWebpackConfig(
   const localesOptions = {
     pathToLocales: paths.appLocales,
 
-    // Default locale if non could be negotiated.
-    defaultLocale: "en-US",
+    // Default locale if none was specified.
+    defaultLocale: config.get("defaultLocale"),
 
     // Fallback locale if a translation was not found.
     // If not set, will use the text that is already
     // in the code base.
-    fallbackLocale: "en-US",
+    fallbackLocale: config.get("defaultLocale"),
 
     // Common fluent files are always included in the locale bundles.
     commonFiles: ["framework.ftl", "common.ftl", "ui.ftl"],
 
     // Locales that come with the main bundle. Others are loaded on demand.
-    bundled: ["en-US"],
+    bundled: [config.get("defaultLocale")],
 
     // All available locales can be loadable on demand.
     // To restrict available locales set:
-    // availableLocales: ["en-US"],
+    // availableLocales: [config.get("defaultLocale")],
   };
 
   const additionalPlugins = [
@@ -144,6 +153,16 @@ export default function createWebpackConfig(
     ),
   ];
 
+  const devtool = disableSourcemaps
+    ? false
+    : isProduction
+    ? // We generate sourcemaps in production. This is slow but gives good results.
+      // You can exclude the *.map files from the build during deployment.
+      "source-map"
+    : // You may want 'eval' instead if you prefer to see the compiled output in DevTools.
+      // See the discussion in https://github.com/facebookincubator/create-react-app/issues/343.
+      "cheap-module-source-map";
+
   const baseConfig: Configuration = {
     stats: {
       // https://github.com/TypeStrong/ts-loader#transpileonly-boolean-defaultfalse
@@ -192,15 +211,7 @@ export default function createWebpackConfig(
         }),
       ],
     },
-    devtool: disableSourcemaps
-      ? false
-      : isProduction
-      ? // We generate sourcemaps in production. This is slow but gives good results.
-        // You can exclude the *.map files from the build during deployment.
-        "source-map"
-      : // You may want 'eval' instead if you prefer to see the compiled output in DevTools.
-        // See the discussion in https://github.com/facebookincubator/create-react-app/issues/343.
-        "cheap-module-source-map",
+    devtool,
     // These are the "entry points" to our application.
     // This means they will be the "root" imports that are included in JS bundle.
     // The first two entry points enable "hot" CSS and auto-refreshes for JS.
@@ -212,10 +223,10 @@ export default function createWebpackConfig(
       // Generated JS file names (with nested folders).
       // There will be one main bundle, and one file per asynchronous chunk.
       filename: isProduction
-        ? "assets/js/[name].[chunkhash:8].js"
+        ? "assets/js/[name].[chunkhash].js"
         : "assets/js/[name].js",
       chunkFilename: isProduction
-        ? "assets/js/[name].[chunkhash:8].chunk.js"
+        ? "assets/js/[name].[chunkhash].chunk.js"
         : "assets/js/[name].chunk.js",
       // We inferred the "public path" (such as / or /my-project) from homepage.
       publicPath,
@@ -346,7 +357,7 @@ export default function createWebpackConfig(
               options: {
                 limit: 10000,
                 name: isProduction
-                  ? "assets/media/[name].[hash:8].[ext]"
+                  ? "assets/media/[name].[hash].[ext]"
                   : "assets/media/[name].[ext]",
               },
             },
@@ -359,7 +370,7 @@ export default function createWebpackConfig(
                   options: {
                     modules: true,
                     importLoaders: 2,
-                    localIdentName: "[name]-[local]-[hash:base64:5]",
+                    localIdentName: "[name]-[local]-[contenthash]",
                     sourceMap: !disableSourcemaps,
                   },
                 },
@@ -499,6 +510,11 @@ export default function createWebpackConfig(
               exclude: [/\.(js|ts|tsx)$/, /\.html$/, /\.json$/],
               loader: require.resolve("file-loader"),
               options: {
+                // Because the resources loaded via CSS can sometimes be loaded
+                // directly from a CSS file, this will ensure that they are
+                // relative to those referencing files.
+                publicPath: (loaderPublicPath: string) =>
+                  "../../" + loaderPublicPath,
                 name: isProduction
                   ? "assets/media/[name].[hash:8].[ext]"
                   : "assets/media/[name].[ext]",
@@ -514,9 +530,9 @@ export default function createWebpackConfig(
       // TODO: (cvle) this should work in build too but for some reasons it terminates the build afterwards.
       // Preventing from running post build steps.
       ...ifWatch(
-        // We run tslint in a separate process to have a quicker build.
+        // We run eslint in a separate process to have a quicker build.
         new ForkTsCheckerWebpackPlugin({
-          tslint: true,
+          eslint: true,
           typescript: require.resolve("typescript"),
           async: true,
           // TODO: (cvle) For some reason if incremental build is turned on it does not find lint errors during initial build.
@@ -736,5 +752,44 @@ export default function createWebpackConfig(
         ),
       ]),
     },
+    /* Webpack config for count */
+    {
+      ...baseConfig,
+      optimization: {
+        ...baseConfig.optimization,
+        // Ensure that we never split the count into chunks.
+        splitChunks: {
+          chunks: "async",
+        },
+        // We can turn on sideEffects here as we don't use
+        // css here and don't run into: https://github.com/webpack/webpack/issues/7094
+        sideEffects: true,
+      },
+      entry: [paths.appCountIndex],
+      output: {
+        ...baseConfig.output,
+        // don't hash the count, cache-busting must be completed by the requester
+        // as this lives in a static template on the embed site.
+        filename: "assets/js/count.js",
+      },
+      plugins: filterPlugins([
+        ...baseConfig.plugins!,
+        ...ifWatch(
+          // Generates an `embed.html` file with the <script> injected.
+          new HtmlWebpackPlugin({
+            filename: "count.html",
+            template: paths.appCountHTML,
+            inject: "body",
+          })
+        ),
+        ...ifBuild(
+          new WebpackAssetsManifest({
+            output: "count-asset-manifest.json",
+            entrypoints: true,
+            integrity: true,
+          })
+        ),
+      ]),
+    },
   ];
 }

src/core/build/loaders/locales-loader.js

@@ -59,7 +59,6 @@ function generateTarget(target, context) {
     defaultLocale,
     fallbackLocale,
     pathToLocales,
-    resourcePath,
     locales,
     bundled,
   } = context;

src/core/build/paths.ts

@@ -34,6 +34,9 @@ export default {
   appAuthCallbackHTML: resolveSrc("core/client/auth-callback/index.html"),
   appAuthCallbackIndex: resolveSrc("core/client/auth-callback/index.ts"),
 
+  appCountHTML: resolveSrc("core/client/count/index.html"),
+  appCountIndex: resolveSrc("core/client/count/index.ts"),
+
   appInstallHTML: resolveSrc("core/client/install/index.html"),
   appInstallLocalesTemplate: resolveSrc("core/client/install/locales.ts"),
   appInstallIndex: resolveSrc("core/client/install/index.tsx"),

src/core/build/postcss.config.js

@@ -23,12 +23,6 @@ const flatKebabVariables = mapKeys(
   (_, k) => kebabCase(k)
 );
 
-// These are the default css standard variables.
-const cssVariables = pickBy(
-  flatKebabVariables,
-  (v, k) => !k.startsWith("breakpoints-")
-);
-
 // These are sass style variables used in media queries.
 const mediaQueryVariables = mapValues(
   pickBy(flatKebabVariables, (v, k) => k.startsWith("breakpoints-")),

src/core/build/publicPath.js

@@ -1,2 +1,2 @@
 __webpack_public_path__ =
-  JSON.parse(document.getElementById("config").innerText) || "/";
+  JSON.parse(document.getElementById("config").innerText).staticURI || "/";

src/core/client/account/App/App.tsx

@@ -1,10 +1,10 @@
-import TransitionControl from "coral-framework/testHelpers/TransitionControl";
 import { BrowserProtocol, queryMiddleware } from "farce";
 import { createFarceRouter, ElementsRenderer } from "found";
 import { Resolver } from "found-relay";
 import React, { FunctionComponent } from "react";
 
 import { CoralContextConsumer } from "coral-framework/lib/bootstrap/CoralContext";
+import TransitionControl from "coral-framework/testHelpers/TransitionControl";
 
 import routeConfig from "../routeConfig";
 import NotFound from "../routes/NotFound";
@@ -16,16 +16,17 @@ const Router = createFarceRouter({
   historyProtocol: new BrowserProtocol(),
   historyMiddlewares: [queryMiddleware],
   routeConfig,
-  renderReady: ({ elements }) => (
-    <>
-      <ElementsRenderer elements={elements} />
-      {// this enables router transition control when writing tests.
-      process.env.NODE_ENV === "test" && <TransitionControl />}
-    </>
-  ),
-  renderError: ({ error }) => (
-    <div>{error.status === 404 ? <NotFound /> : "Error"}</div>
-  ),
+  renderReady: function FarceRouterReady({ elements }) {
+    return (
+      <>
+        <ElementsRenderer elements={elements} />
+        {process.env.NODE_ENV === "test" && <TransitionControl />}
+      </>
+    );
+  },
+  renderError: function FarceRouterError({ error }) {
+    return <div>{error.status === 404 ? <NotFound /> : "Error"}</div>;
+  },
 });
 
 const EntryContainer: FunctionComponent = () => (

src/core/client/account/App/MainLayout.css

@@ -4,12 +4,7 @@
 }
 
 .centered {
-  max-width: calc(70 * var(--mini-unit));
   margin: 10% auto;
   padding: 0 calc(0.5 * var(--mini-unit));
   box-sizing: border-box;
-
-  @media (min-width: $breakpoints-xs) {
-    max-width: calc(42 * var(--mini-unit));
-  }
-}
+}

src/core/client/account/components/Loading.tsx

@@ -0,0 +1,13 @@
+import React, { FunctionComponent } from "react";
+
+import { Delay, Flex, Spinner } from "coral-ui/components";
+
+const Loading: FunctionComponent = () => (
+  <Flex justifyContent="center">
+    <Delay>
+      <Spinner />
+    </Delay>
+  </Flex>
+);
+
+export default Loading;

src/core/client/account/index.tsx

@@ -1,7 +1,8 @@
-import { createManaged } from "coral-framework/lib/bootstrap";
 import React, { FunctionComponent } from "react";
 import ReactDOM from "react-dom";
 
+import { createManaged } from "coral-framework/lib/bootstrap";
+
 import App from "./App";
 import { initLocalState } from "./local";
 import localesData from "./locales";
@@ -13,7 +14,6 @@ async function main() {
   const ManagedCoralContextProvider = await createManaged({
     initLocalState,
     localesData,
-    userLocales: navigator.languages,
   });
 
   const Index: FunctionComponent = () => (

src/core/client/account/local/local.graphql

@@ -2,7 +2,6 @@ type Local {
   accessToken: String
   accessTokenExp: Int
   accessTokenJTI: String
-  loggedIn: Boolean!
 }
 
 extend type Query {

src/core/client/account/locales.ts

@@ -6,4 +6,5 @@
  */
 
 import { LocalesData } from "coral-framework/lib/i18n";
+
 export default {} as LocalesData;

src/core/client/account/routeConfig.tsx

@@ -1,7 +1,9 @@
 import { makeRouteConfig, Route } from "found";
 import React from "react";
 
+import DownloadRoute from "./routes/download/Download";
 import ConfirmRoute from "./routes/email/Confirm";
+import UnsubscribeRoute from "./routes/notifications/Unsubscribe";
 import ResetRoute from "./routes/password/Reset";
 
 export default makeRouteConfig(
@@ -12,5 +14,9 @@ export default makeRouteConfig(
     <Route path="email">
       <Route path="confirm" {...ConfirmRoute.routeConfig} />
     </Route>
+    <Route path="download" {...DownloadRoute.routeConfig} />
+    <Route path="notifications">
+      <Route path="unsubscribe" {...UnsubscribeRoute.routeConfig} />
+    </Route>
   </Route>
 );

src/core/client/account/routes/NotFound.tsx

@@ -1,6 +1,7 @@
-import { HorizontalGutter, Typography } from "coral-ui/components";
 import React, { FunctionComponent } from "react";
 
+import { HorizontalGutter, Typography } from "coral-ui/components";
+
 const NotFound: FunctionComponent = () => (
   <HorizontalGutter>
     <Typography variant="heading3">Not Found</Typography>

src/core/client/account/routes/download/Download/DownloadDescription.css

@@ -0,0 +1,48 @@
+.title {
+  font-family: var(--font-family-serif);
+  font-weight: 600;
+  font-style: normal;
+  font-size: calc(48rem / var(--rem-base));
+  line-height: calc(42em / 48);
+  text-align: center;
+
+  color: var(--palette-common-black);
+}
+
+.content {
+  padding: var(--spacing-2) var(--spacing-3) var(--spacing-3) var(--spacing-3);
+}
+
+.section {
+  margin-bottom: var(--spacing-4);
+}
+
+.sectionText {
+  font-family: var(--font-family-sans-serif);
+  font-weight: normal;
+  font-style: normal;
+  font-size: calc(24rem / var(--rem-base));
+  line-height: calc(34em / 24);
+  letter-spacing: 0.3px;
+
+  color: var(--palette-text-primary);
+}
+
+.list {
+  list-style: none;
+  margin-left: calc(-1 * var(--spacing-5));
+}
+
+.list li {
+  margin-bottom: calc(16em / 24);
+}
+
+.listContent {
+  display: inline-flex;
+}
+
+.bullet {
+  display: inline-block;
+  min-width: 24px;
+  margin-right: var(--spacing-2);
+}

src/core/client/account/routes/download/Download/DownloadDescription.tsx

@@ -0,0 +1,101 @@
+import cn from "classnames";
+import { Localized } from "fluent-react/compat";
+import React, { FunctionComponent } from "react";
+
+import { Flex, HorizontalGutter, Icon, Typography } from "coral-ui/components";
+
+import styles from "./DownloadDescription.css";
+
+const DownloadDescription: FunctionComponent = () => {
+  return (
+    <HorizontalGutter size="double">
+      <Localized id="download-landingPage-title">
+        <div className={styles.title}>Download Your Comment History</div>
+      </Localized>
+      <div className={styles.content}>
+        <div className={styles.section}>
+          <Localized id="download-landingPage-description">
+            <Typography variant="bodyCopy" className={styles.sectionText}>
+              Your comment history will be downloaded into a .zip file. After
+              your comment history is unzipped you will have a comma separated
+              value (or .csv) file that you can easily import into your favorite
+              spreadsheet application.
+            </Typography>
+          </Localized>
+        </div>
+
+        <div className={styles.section}>
+          <Localized id="download-landingPage-contentsDescription">
+            <Typography variant="bodyCopy" className={styles.sectionText}>
+              For each of your comments the following information is included:
+            </Typography>
+          </Localized>
+          <ul className={styles.list}>
+            <li>
+              <Flex alignItems="center">
+                <Icon size="lg" className={styles.bullet}>
+                  check
+                </Icon>
+                <Localized id="download-landingPage-contentsDate">
+                  <Typography
+                    variant="bodyCopy"
+                    className={cn(styles.sectionText, styles.listContent)}
+                  >
+                    When you wrote the comment
+                  </Typography>
+                </Localized>
+              </Flex>
+            </li>
+            <li>
+              <Flex alignItems="center">
+                <Icon size="lg" className={styles.bullet}>
+                  check
+                </Icon>
+                <Localized id="download-landingPage-contentsUrl">
+                  <Typography
+                    variant="bodyCopy"
+                    className={cn(styles.sectionText, styles.listContent)}
+                  >
+                    The permalink URL for the comment
+                  </Typography>
+                </Localized>
+              </Flex>
+            </li>
+            <li>
+              <Flex alignItems="center">
+                <Icon size="lg" className={styles.bullet}>
+                  check
+                </Icon>
+                <Localized id="download-landingPage-contentsText">
+                  <Typography
+                    variant="bodyCopy"
+                    className={cn(styles.sectionText, styles.listContent)}
+                  >
+                    The comment text
+                  </Typography>
+                </Localized>
+              </Flex>
+            </li>
+            <li>
+              <Flex alignItems="center">
+                <Icon size="lg" className={styles.bullet}>
+                  check
+                </Icon>
+                <Localized id="download-landingPage-contentsStoryUrl">
+                  <Typography
+                    variant="bodyCopy"
+                    className={cn(styles.sectionText, styles.listContent)}
+                  >
+                    The URL on the article or story where the comment appears
+                  </Typography>
+                </Localized>
+              </Flex>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </HorizontalGutter>
+  );
+};
+
+export default DownloadDescription;

src/core/client/account/routes/download/Download/DownloadForm.css

@@ -0,0 +1,8 @@
+.form {
+  text-align: center;
+}
+
+.downloadButton {
+  font-size: calc(18rem / var(--rem-base));
+  line-height: calc(23em / 18);
+}

src/core/client/account/routes/download/Download/DownloadForm.tsx

@@ -0,0 +1,43 @@
+import { Localized } from "fluent-react/compat";
+import React, { FunctionComponent, useCallback, useState } from "react";
+
+import { Button, HorizontalGutter } from "coral-ui/components";
+
+import styles from "./DownloadForm.css";
+
+interface Props {
+  token: string;
+}
+
+const DownloadForm: FunctionComponent<Props> = ({ token }) => {
+  const [submitted, setSubmitted] = useState(false);
+  const onClick = useCallback(() => {
+    setSubmitted(true);
+  }, [setSubmitted]);
+
+  return (
+    <HorizontalGutter size="double">
+      <form
+        className={styles.form}
+        method="post"
+        action="/api/account/download"
+      >
+        <input name="token" type="hidden" value={token} />
+        <Localized id="download-landingPage-downloadComments ">
+          <Button
+            type="submit"
+            variant="filled"
+            color="primary"
+            disabled={submitted}
+            onClick={onClick}
+            className={styles.downloadButton}
+          >
+            Download My Comment History
+          </Button>
+        </Localized>
+      </form>
+    </HorizontalGutter>
+  );
+};
+
+export default DownloadForm;

src/core/client/account/routes/download/Download/DownloadRoute.css

@@ -0,0 +1,16 @@
+.container {
+  width: 100%;
+  text-align: center;
+}
+
+.root {
+  display: inline-block;
+
+  max-width: calc(70 * var(--mini-unit));
+
+  @media (min-width: $breakpoints-xs) {
+    max-width: calc(90 * var(--mini-unit));
+  }
+
+  text-align: left;
+}

src/core/client/account/routes/download/Download/DownloadRoute.tsx

@@ -0,0 +1,75 @@
+import React, { FunctionComponent } from "react";
+import { Environment } from "relay-runtime";
+
+import Loading from "coral-account/components/Loading";
+import { useToken } from "coral-framework/hooks";
+import { createFetch } from "coral-framework/lib/relay";
+import { withRouteConfig } from "coral-framework/lib/router";
+import { parseHashQuery } from "coral-framework/utils";
+import { HorizontalGutter } from "coral-ui/components";
+
+import DownloadDescription from "./DownloadDescription";
+import DownloadForm from "./DownloadForm";
+import Sorry from "./Sorry";
+
+import styles from "./DownloadRoute.css";
+
+const fetcher = createFetch(
+  "downloadToken",
+  async (environment: Environment, variables: { token: string }, { rest }) =>
+    await rest.fetch<void>("/account/download", {
+      method: "GET",
+      token: variables.token,
+    })
+);
+
+interface Props {
+  token: string | undefined;
+}
+
+const DownloadRoute: FunctionComponent<Props> = ({ token }) => {
+  const [state, error] = useToken(fetcher, token);
+
+  if (state === "UNCHECKED") {
+    return (
+      <div className={styles.container}>
+        <div className={styles.root}>
+          <HorizontalGutter size="double">
+            <Loading />
+          </HorizontalGutter>
+        </div>
+      </div>
+    );
+  }
+  if (state !== "VALID" || error) {
+    return (
+      <div className={styles.container}>
+        <div className={styles.root}>
+          <HorizontalGutter size="double">
+            <DownloadDescription />
+            <Sorry />
+          </HorizontalGutter>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.root}>
+        <DownloadDescription />
+        <DownloadForm token={token!} />
+      </div>
+    </div>
+  );
+};
+
+const enhanced = withRouteConfig<Props>({
+  render: function DownloadRouteRender({ match, Component }) {
+    return (
+      <Component token={parseHashQuery(match.location.hash).downloadToken} />
+    );
+  },
+})(DownloadRoute);
+
+export default enhanced;

src/core/client/account/routes/download/Download/Sorry.css

@@ -0,0 +1,7 @@
+.icon {
+  margin-right: var(--spacing-2);
+}
+
+.callout {
+  justify-content: left;
+}

src/core/client/account/routes/download/Download/Sorry.tsx

@@ -0,0 +1,23 @@
+import { Localized } from "fluent-react/compat";
+import React, { FunctionComponent } from "react";
+
+import { CallOut, Flex, Icon } from "coral-ui/components";
+
+import styles from "./Sorry.css";
+
+const Sorry: FunctionComponent = () => {
+  return (
+    <CallOut color="error" fullWidth className={styles.callout}>
+      <Flex>
+        <Icon size="md" className={styles.icon}>
+          error
+        </Icon>
+        <Localized id="download-landingPage-sorry">
+          Your download link is invalid.
+        </Localized>
+      </Flex>
+    </CallOut>
+  );
+};
+
+export default Sorry;

src/core/client/account/routes/download/Download/index.ts

@@ -0,0 +1 @@
+export { default, default as DownloadRoute } from "./DownloadRoute";

src/core/client/account/routes/email/Confirm/CheckConfirmTokenFetch.tsx

@@ -1,14 +0,0 @@
-import { Environment } from "relay-runtime";
-
-import { createFetch } from "coral-framework/lib/relay";
-
-const CheckConfirmTokenFetch = createFetch(
-  "confirm",
-  async (environment: Environment, variables: { token: string }, { rest }) =>
-    await rest.fetch<void>("/account/confirm", {
-      method: "GET",
-      token: variables.token,
-    })
-);
-
-export default CheckConfirmTokenFetch;

src/core/client/account/routes/email/Confirm/ConfirmForm.tsx

@@ -30,39 +30,37 @@ const ConfirmForm: React.FunctionComponent<Props> = ({ onSuccess, token }) => {
     return;
   }, [token]);
   return (
-    <div>
-      <Form onSubmit={onSubmit}>
-        {({ handleSubmit, submitting }) => (
-          <form autoComplete="off" onSubmit={handleSubmit}>
-            <HorizontalGutter size="double">
-              <HorizontalGutter>
-                <Localized id="confirmEmail-emailConfirmation">
-                  <Typography variant="heading1">Email Confirmation</Typography>
-                </Localized>
-                <Localized id="confirmEmail-pleaseClickToConfirm">
-                  <Typography variant="bodyCopy">
-                    Click below to confirm your email address.
-                  </Typography>
-                </Localized>
-              </HorizontalGutter>
-              <HorizontalGutter>
-                <Localized id="confirmEmail-confirmEmail">
-                  <Button
-                    type="submit"
-                    variant="filled"
-                    color="primary"
-                    disabled={submitting}
-                    fullWidth
-                  >
-                    Confirm email
-                  </Button>
-                </Localized>
-              </HorizontalGutter>
+    <Form onSubmit={onSubmit}>
+      {({ handleSubmit, submitting }) => (
+        <form autoComplete="off" onSubmit={handleSubmit}>
+          <HorizontalGutter size="double">
+            <HorizontalGutter>
+              <Localized id="confirmEmail-emailConfirmation">
+                <Typography variant="heading1">Email Confirmation</Typography>
+              </Localized>
+              <Localized id="confirmEmail-pleaseClickToConfirm">
+                <Typography variant="bodyCopy">
+                  Click below to confirm your email address.
+                </Typography>
+              </Localized>
             </HorizontalGutter>
-          </form>
-        )}
-      </Form>
-    </div>
+            <HorizontalGutter>
+              <Localized id="confirmEmail-confirmEmail">
+                <Button
+                  type="submit"
+                  variant="filled"
+                  color="primary"
+                  disabled={submitting}
+                  fullWidth
+                >
+                  Confirm email
+                </Button>
+              </Localized>
+            </HorizontalGutter>
+          </HorizontalGutter>
+        </form>
+      )}
+    </Form>
   );
 };
 

src/core/client/account/routes/email/Confirm/ConfirmRoute.css

@@ -0,0 +1,16 @@
+.container {
+  width: 100%;
+  text-align: center;
+}
+
+.root {
+  display: inline-block;
+
+  max-width: calc(70 * var(--mini-unit));
+
+  @media (min-width: $breakpoints-xs) {
+    max-width: calc(42 * var(--mini-unit));
+  }
+
+  text-align: left;
+}

src/core/client/account/routes/email/Confirm/ConfirmRoute.tsx

@@ -1,33 +1,79 @@
 import React, { useCallback, useState } from "react";
+import { Environment } from "relay-runtime";
 
+import Loading from "coral-account/components/Loading";
+import { useToken } from "coral-framework/hooks";
+import { createFetch } from "coral-framework/lib/relay";
 import { withRouteConfig } from "coral-framework/lib/router";
 import { parseHashQuery } from "coral-framework/utils";
 
 import ConfirmForm from "./ConfirmForm";
-import ConfirmTokenChecker from "./ConfirmTokenChecker";
+import Sorry from "./Sorry";
 import Success from "./Success";
 
+import styles from "./ConfirmRoute.css";
+
+const fetcher = createFetch(
+  "confirmToken",
+  async (environment: Environment, variables: { token: string }, { rest }) =>
+    await rest.fetch<void>("/account/confirm", {
+      method: "GET",
+      token: variables.token,
+    })
+);
+
 interface Props {
   token: string | undefined;
 }
 
 const ConfirmRoute: React.FunctionComponent<Props> = ({ token }) => {
-  const [suceeded, setSuceeded] = useState<boolean>(false);
+  const [finished, setFinished] = useState(false);
   const onSuccess = useCallback(() => {
-    setSuceeded(true);
+    setFinished(true);
   }, []);
-  return (
-    <ConfirmTokenChecker token={token}>
-      {!suceeded && <ConfirmForm token={token!} onSuccess={onSuccess} />}
-      {suceeded && <Success />}
-    </ConfirmTokenChecker>
+  const [state, error] = useToken(fetcher, token);
+
+  if (state === "UNCHECKED") {
+    return (
+      <div className={styles.container}>
+        <div className={styles.root}>
+          <Loading />
+        </div>
+      </div>
+    );
+  }
+
+  if (state !== "VALID" || error) {
+    return (
+      <div className={styles.container}>
+        <div className={styles.root}>
+          <Sorry reason={error} />
+        </div>
+      </div>
+    );
+  }
+
+  return !finished ? (
+    <div className={styles.container}>
+      <div className={styles.root}>
+        <ConfirmForm token={token!} onSuccess={onSuccess} />
+      </div>
+    </div>
+  ) : (
+    <div className={styles.container}>
+      <div className={styles.root}>
+        <Success />
+      </div>
+    </div>
   );
 };
 
 const enhanced = withRouteConfig<Props>({
-  render: ({ match, Component }) => (
-    <Component token={parseHashQuery(match.location.hash).confirmToken} />
-  ),
+  render: function ConfirmRouteRender({ match, Component }) {
+    return (
+      <Component token={parseHashQuery(match.location.hash).confirmToken} />
+    );
+  },
 })(ConfirmRoute);
 
 export default enhanced;

src/core/client/account/routes/email/Confirm/ConfirmTokenChecker.tsx

@@ -1,93 +0,0 @@
-import { ERROR_CODES } from "coral-common/errors";
-import { InvalidRequestError } from "coral-framework/lib/errors";
-import { useFetch } from "coral-framework/lib/relay";
-import { Delay, Flex, Spinner } from "coral-ui/components";
-import { Localized } from "fluent-react/compat";
-import React, { useEffect, useState } from "react";
-
-import CheckConfirmTokenFetch from "./CheckConfirmTokenFetch";
-import Sorry from "./Sorry";
-
-interface Props {
-  token: string | undefined;
-}
-
-type TokenState =
-  | "VALID"
-  | "INVALID"
-  | "EXPIRED"
-  | "MISSING"
-  | "RATE_LIMIT_EXCEEDED"
-  | "UNKNOWN"
-  | "UNCHECKED";
-
-const ConfirmTokenChecker: React.FunctionComponent<Props> = ({
-  token,
-  children,
-}) => {
-  const checkConfirmToken = useFetch(CheckConfirmTokenFetch);
-  const [tokenState, setTokenState] = useState<TokenState>("UNCHECKED");
-  const [reason, setReason] = useState<string>("");
-  useEffect(() => {
-    if (token) {
-      async function setAndCheckToken() {
-        try {
-          await checkConfirmToken({ token: token! });
-          setTokenState("VALID");
-        } catch (e) {
-          setReason(e.message);
-          if (e instanceof InvalidRequestError) {
-            switch (e.code) {
-              case ERROR_CODES.RATE_LIMIT_EXCEEDED:
-                setTokenState("RATE_LIMIT_EXCEEDED");
-                return;
-              case ERROR_CODES.EMAIL_CONFIRM_TOKEN_EXPIRED:
-                setTokenState("EXPIRED");
-                return;
-              case ERROR_CODES.INTEGRATION_DISABLED:
-              case ERROR_CODES.USER_NOT_FOUND:
-              case ERROR_CODES.TOKEN_INVALID:
-                setTokenState("INVALID");
-                return;
-              default:
-                setTokenState("UNKNOWN");
-                return;
-            }
-          }
-          setTokenState("UNKNOWN");
-        }
-      }
-      setAndCheckToken();
-    } else {
-      setTokenState("MISSING");
-    }
-    return;
-  }, [token]);
-
-  switch (tokenState) {
-    case "VALID":
-      return <>{children}</>;
-    case "UNCHECKED":
-      return (
-        <Flex justifyContent="center">
-          <Delay>
-            <Spinner />
-          </Delay>
-        </Flex>
-      );
-    case "MISSING":
-      return (
-        <Sorry
-          reason={
-            <Localized id="confirmEmail-missingConfirmToken">
-              <span>The Confirm Token seems to be missing.</span>
-            </Localized>
-          }
-        />
-      );
-    default:
-      return <Sorry reason={reason} />;
-  }
-};
-
-export default ConfirmTokenChecker;

src/core/client/account/routes/email/Confirm/Sorry.tsx

@@ -14,7 +14,16 @@ const Sorry: React.FunctionComponent<Props> = ({ reason }) => {
         <Typography variant="heading1">Oops Sorry!</Typography>
       </Localized>
       <CallOut color="error" fullWidth>
-        {reason}
+        {reason ? (
+          reason
+        ) : (
+          <Localized id="account-tokenNotFound">
+            <span data-testid="invalid-link">
+              The specified link is invalid, check to see if it was copied
+              correctly.
+            </span>
+          </Localized>
+        )}
       </CallOut>
     </HorizontalGutter>
   );

src/core/client/account/routes/notifications/Unsubscribe/Sorry.tsx

@@ -0,0 +1,32 @@
+import { Localized } from "fluent-react/compat";
+import React from "react";
+
+import { CallOut, HorizontalGutter, Typography } from "coral-ui/components";
+
+interface Props {
+  reason: React.ReactNode;
+}
+
+const Sorry: React.FunctionComponent<Props> = ({ reason }) => {
+  return (
+    <HorizontalGutter size="double">
+      <Localized id="unsubscribe-oopsSorry">
+        <Typography variant="heading1">Oops Sorry!</Typography>
+      </Localized>
+      <CallOut color="error" fullWidth>
+        {reason ? (
+          reason
+        ) : (
+          <Localized id="account-tokenNotFound">
+            <span data-testid="invalid-link">
+              The specified link is invalid, check to see if it was copied
+              correctly.
+            </span>
+          </Localized>
+        )}
+      </CallOut>
+    </HorizontalGutter>
+  );
+};
+
+export default Sorry;

src/core/client/account/routes/notifications/Unsubscribe/Success.tsx

@@ -0,0 +1,18 @@
+import { Localized } from "fluent-react/compat";
+import React from "react";
+
+import { HorizontalGutter, Typography } from "coral-ui/components";
+
+const Success: React.FunctionComponent = () => {
+  return (
+    <HorizontalGutter data-testid="success" size="double">
+      <Localized id="unsubscribe-successfullyUnsubscribed">
+        <Typography variant="heading1">
+          You are now unsubscribed from all notifications
+        </Typography>
+      </Localized>
+    </HorizontalGutter>
+  );
+};
+
+export default Success;

src/core/client/account/routes/notifications/Unsubscribe/UnsubscribeForm.tsx

@@ -0,0 +1,76 @@
+import { FORM_ERROR } from "final-form";
+import { Localized } from "fluent-react/compat";
+import React, { useCallback } from "react";
+import { Form } from "react-final-form";
+
+import { InvalidRequestError } from "coral-framework/lib/errors";
+import { useMutation } from "coral-framework/lib/relay";
+import {
+  Button,
+  CallOut,
+  HorizontalGutter,
+  Typography,
+} from "coral-ui/components";
+
+import UnsubscribeNotificationsMutation from "./UnsubscribeNotificationsMutation";
+
+interface Props {
+  token: string;
+  disabled?: boolean;
+  onSuccess: () => void;
+}
+
+const UnsubscribeForm: React.FunctionComponent<Props> = ({
+  onSuccess,
+  token,
+}) => {
+  const unsubscribe = useMutation(UnsubscribeNotificationsMutation);
+  const onSubmit = useCallback(async () => {
+    try {
+      await unsubscribe({ token });
+      onSuccess();
+    } catch (error) {
+      if (error instanceof InvalidRequestError) {
+        return error.invalidArgs;
+      }
+      return { [FORM_ERROR]: error.message };
+    }
+    return;
+  }, [token]);
+  return (
+    <div data-testid="unsubscribe-form">
+      <Form onSubmit={onSubmit}>
+        {({ handleSubmit, submitting, submitError }) => (
+          <form onSubmit={handleSubmit}>
+            <HorizontalGutter>
+              <Localized id="unsubscribe-clickToConfirm">
+                <Typography variant="heading1">
+                  Click below to confirm that you want to unsubscribe from all
+                  notifications.
+                </Typography>
+              </Localized>
+              {submitError && (
+                <CallOut color="error" fullWidth>
+                  {submitError}
+                </CallOut>
+              )}
+              <Localized id="unsubscribe-confirm">
+                <Button
+                  type="submit"
+                  variant="filled"
+                  color="primary"
+                  disabled={submitting}
+                  fullWidth
+                >
+                  Confirm
+                </Button>
+              </Localized>
+            </HorizontalGutter>
+          </form>
+        )}
+      </Form>
+    </div>
+  );
+};
+
+export default UnsubscribeForm;

src/core/client/account/routes/notifications/Unsubscribe/UnsubscribeNotificationsMutation.tsx

@@ -0,0 +1,14 @@
+import { Environment } from "relay-runtime";
+
+import { createMutation } from "coral-framework/lib/relay";
+
+const UnsubscribeNotificationsMutation = createMutation(
+  "unsubscribeNotifications",
+  async (environment: Environment, variables: { token: string }, { rest }) =>
+    await rest.fetch<void>("/account/notifications/unsubscribe", {
+      method: "DELETE",
+      token: variables.token,
+    })
+);
+
+export default UnsubscribeNotificationsMutation;

src/core/client/account/routes/notifications/Unsubscribe/UnsubscribeRoute.css

@@ -0,0 +1,16 @@
+.container {
+  width: 100%;
+  text-align: center;
+}
+
+.root {
+  display: inline-block;
+
+  max-width: calc(70 * var(--mini-unit));
+
+  @media (min-width: $breakpoints-xs) {
+    max-width: calc(42 * var(--mini-unit));
+  }
+
+  text-align: left;
+}

src/core/client/account/routes/notifications/Unsubscribe/UnsubscribeRoute.tsx

@@ -0,0 +1,79 @@
+import React, { useCallback, useState } from "react";
+import { Environment } from "relay-runtime";
+
+import Loading from "coral-account/components/Loading";
+import { useToken } from "coral-framework/hooks";
+import { createFetch } from "coral-framework/lib/relay";
+import { withRouteConfig } from "coral-framework/lib/router";
+import { parseHashQuery } from "coral-framework/utils";
+
+import Sorry from "./Sorry";
+import Success from "./Success";
+import UnsubscribeForm from "./UnsubscribeForm";
+
+import styles from "./UnsubscribeRoute.css";
+
+const fetcher = createFetch(
+  "unsubscribeToken",
+  async (environment: Environment, variables: { token: string }, { rest }) =>
+    await rest.fetch<void>("/account/notifications/unsubscribe", {
+      method: "GET",
+      token: variables.token,
+    })
+);
+
+interface Props {
+  token: string | undefined;
+}
+
+const UnsubscribeRoute: React.FunctionComponent<Props> = ({ token }) => {
+  const [finished, setFinished] = useState(false);
+  const onSuccess = useCallback(() => {
+    setFinished(true);
+  }, []);
+  const [state, error] = useToken(fetcher, token);
+
+  if (state === "UNCHECKED") {
+    return (
+      <div className={styles.container}>
+        <div className={styles.root}>
+          <Loading />
+        </div>
+      </div>
+    );
+  }
+
+  if (state !== "VALID" || error) {
+    return (
+      <div className={styles.container}>
+        <div className={styles.root}>
+          <Sorry reason={error} />
+        </div>
+      </div>
+    );
+  }
+
+  return !finished ? (
+    <div className={styles.container}>
+      <div className={styles.root}>
+        <UnsubscribeForm token={token!} onSuccess={onSuccess} />
+      </div>
+    </div>
+  ) : (
+    <div className={styles.container}>
+      <div className={styles.root}>
+        <Success />
+      </div>
+    </div>
+  );
+};
+
+const enhanced = withRouteConfig<Props>({
+  render: function UnsubscribeRouteRender({ match, Component }) {
+    return (
+      <Component token={parseHashQuery(match.location.hash).unsubscribeToken} />
+    );
+  },
+})(UnsubscribeRoute);
+
+export default enhanced;

src/core/client/account/routes/notifications/Unsubscribe/index.ts

@@ -0,0 +1 @@
+export { default, default as UnsubscribeRoute } from "./UnsubscribeRoute";

src/core/client/account/routes/password/Reset/CheckResetTokenFetch.tsx

@@ -1,14 +0,0 @@
-import { Environment } from "relay-runtime";
-
-import { createFetch } from "coral-framework/lib/relay";
-
-const CheckResetTokenFetch = createFetch(
-  "resetToken",
-  async (environment: Environment, variables: { token: string }, { rest }) =>
-    await rest.fetch<void>("/auth/local/forgot", {
-      method: "GET",
-      token: variables.token,
-    })
-);
-
-export default CheckResetTokenFetch;

src/core/client/account/routes/password/Reset/ResetPasswordForm.tsx

@@ -4,6 +4,7 @@ import React, { useCallback } from "react";
 import { Field, Form } from "react-final-form";
 
 import { InvalidRequestError } from "coral-framework/lib/errors";
+import { colorFromMeta, ValidationMessage } from "coral-framework/lib/form";
 import { useMutation } from "coral-framework/lib/relay";
 import {
   composeValidators,
@@ -19,7 +20,6 @@ import {
   InputLabel,
   PasswordField,
   Typography,
-  ValidationMessage,
 } from "coral-ui/components";
 
 import ResetPasswordMutation from "./ResetPasswordMutation";
@@ -99,32 +99,23 @@ const ResetPasswordForm: React.FunctionComponent<Props> = ({
                       >
                         <PasswordField
                           id={input.name}
-                          name={input.name}
-                          onChange={input.onChange}
-                          value={input.value}
                           placeholder="Password"
-                          color={
-                            meta.touched && (meta.error || meta.submitError)
-                              ? "error"
-                              : "regular"
-                          }
-                          disabled={disabled}
+                          color={colorFromMeta(meta)}
+                          autoComplete="new-password"
+                          disabled={disabled || meta.submitting}
                           fullWidth
+                          {...input}
                         />
                       </Localized>
-                      {submitError && (
-                        <CallOut color="error" fullWidth>
-                          {submitError}
-                        </CallOut>
-                      )}
-                      {meta.touched && (meta.error || meta.submitError) && (
-                        <ValidationMessage fullWidth>
-                          {meta.error || meta.submitError}
-                        </ValidationMessage>
-                      )}
+                      <ValidationMessage meta={meta} fullWidth />
                     </FormField>
                   )}
                 </Field>
+                {submitError && (
+                  <CallOut color="error" fullWidth>
+                    {submitError}
+                  </CallOut>
+                )}
                 <Localized id="resetPassword-resetPassword">
                   <Button
                     type="submit"

src/core/client/account/routes/password/Reset/ResetRoute.css

@@ -0,0 +1,16 @@
+.container {
+  width: 100%;
+  text-align: center;
+}
+
+.root {
+  display: inline-block;
+
+  max-width: calc(70 * var(--mini-unit));
+
+  @media (min-width: $breakpoints-xs) {
+    max-width: calc(42 * var(--mini-unit));
+  }
+
+  text-align: left;
+}

src/core/client/account/routes/password/Reset/ResetRoute.tsx

@@ -1,33 +1,77 @@
 import React, { useCallback, useState } from "react";
+import { Environment } from "relay-runtime";
 
+import Loading from "coral-account/components/Loading";
+import { useToken } from "coral-framework/hooks";
+import { createFetch } from "coral-framework/lib/relay";
 import { withRouteConfig } from "coral-framework/lib/router";
-
 import { parseHashQuery } from "coral-framework/utils";
+
 import ResetPasswordForm from "./ResetPasswordForm";
-import ResetTokenChecker from "./ResetTokenChecker";
+import Sorry from "./Sorry";
 import Success from "./Success";
 
+import styles from "./ResetRoute.css";
+
+const fetcher = createFetch(
+  "resetToken",
+  async (environment: Environment, variables: { token: string }, { rest }) =>
+    await rest.fetch<void>("/auth/local/forgot", {
+      method: "GET",
+      token: variables.token,
+    })
+);
+
 interface Props {
   token: string | undefined;
 }
 
 const ResetRoute: React.FunctionComponent<Props> = ({ token }) => {
-  const [suceeded, setSuceeded] = useState<boolean>(false);
+  const [finished, setFinished] = useState(false);
   const onSuccess = useCallback(() => {
-    setSuceeded(true);
+    setFinished(true);
   }, []);
-  return (
-    <ResetTokenChecker token={token}>
-      {!suceeded && <ResetPasswordForm token={token!} onSuccess={onSuccess} />}
-      {suceeded && <Success />}
-    </ResetTokenChecker>
+  const [state, error] = useToken(fetcher, token);
+
+  if (state === "UNCHECKED") {
+    return (
+      <div className={styles.container}>
+        <div className={styles.root}>
+          <Loading />
+        </div>
+      </div>
+    );
+  }
+
+  if (state !== "VALID" || error) {
+    return (
+      <div className={styles.container}>
+        <div className={styles.root}>
+          <Sorry reason={error} />
+        </div>
+      </div>
+    );
+  }
+
+  return !finished ? (
+    <div className={styles.container}>
+      <div className={styles.root}>
+        <ResetPasswordForm token={token!} onSuccess={onSuccess} />
+      </div>
+    </div>
+  ) : (
+    <div className={styles.container}>
+      <div className={styles.root}>
+        <Success />
+      </div>
+    </div>
   );
 };
 
 const enhanced = withRouteConfig<Props>({
-  render: ({ match, Component }) => (
-    <Component token={parseHashQuery(match.location.hash).resetToken} />
-  ),
+  render: function ResetRouteRender({ match, Component }) {
+    return <Component token={parseHashQuery(match.location.hash).resetToken} />;
+  },
 })(ResetRoute);
 
 export default enhanced;

src/core/client/account/routes/password/Reset/ResetTokenChecker.tsx

@@ -1,93 +0,0 @@
-import { ERROR_CODES } from "coral-common/errors";
-import { InvalidRequestError } from "coral-framework/lib/errors";
-import { useFetch } from "coral-framework/lib/relay";
-import { Delay, Flex, Spinner } from "coral-ui/components";
-import { Localized } from "fluent-react/compat";
-import React, { useEffect, useState } from "react";
-
-import CheckResetTokenFetch from "./CheckResetTokenFetch";
-import Sorry from "./Sorry";
-
-interface Props {
-  token: string | undefined;
-}
-
-type TokenState =
-  | "VALID"
-  | "INVALID"
-  | "EXPIRED"
-  | "MISSING"
-  | "RATE_LIMIT_EXCEEDED"
-  | "UNKNOWN"
-  | "UNCHECKED";
-
-const ResetTokenChecker: React.FunctionComponent<Props> = ({
-  token,
-  children,
-}) => {
-  const checkResetToken = useFetch(CheckResetTokenFetch);
-  const [tokenState, setTokenState] = useState<TokenState>("UNCHECKED");
-  const [reason, setReason] = useState<string>("");
-  useEffect(() => {
-    if (token) {
-      async function setAndCheckToken() {
-        try {
-          await checkResetToken({ token: token! });
-          setTokenState("VALID");
-        } catch (e) {
-          setReason(e.message);
-          if (e instanceof InvalidRequestError) {
-            switch (e.code) {
-              case ERROR_CODES.RATE_LIMIT_EXCEEDED:
-                setTokenState("RATE_LIMIT_EXCEEDED");
-                return;
-              case ERROR_CODES.PASSWORD_RESET_TOKEN_EXPIRED:
-                setTokenState("EXPIRED");
-                return;
-              case ERROR_CODES.INTEGRATION_DISABLED:
-              case ERROR_CODES.USER_NOT_FOUND:
-              case ERROR_CODES.TOKEN_INVALID:
-                setTokenState("INVALID");
-                return;
-              default:
-                setTokenState("UNKNOWN");
-                return;
-            }
-          }
-          setTokenState("UNKNOWN");
-        }
-      }
-      setAndCheckToken();
-    } else {
-      setTokenState("MISSING");
-    }
-    return;
-  }, [token]);
-
-  switch (tokenState) {
-    case "VALID":
-      return <>{children}</>;
-    case "UNCHECKED":
-      return (
-        <Flex justifyContent="center">
-          <Delay>
-            <Spinner />
-          </Delay>
-        </Flex>
-      );
-    case "MISSING":
-      return (
-        <Sorry
-          reason={
-            <Localized id="resetPassword-missingResetToken">
-              <span>The Reset Token seems to be missing.</span>
-            </Localized>
-          }
-        />
-      );
-    default:
-      return <Sorry reason={reason} />;
-  }
-};
-
-export default ResetTokenChecker;

src/core/client/account/routes/password/Reset/Sorry.tsx

@@ -14,7 +14,16 @@ const Sorry: React.FunctionComponent<Props> = ({ reason }) => {
         <Typography variant="heading1">Oops Sorry!</Typography>
       </Localized>
       <CallOut color="error" fullWidth>
-        {reason}
+        {reason ? (
+          reason
+        ) : (
+          <Localized id="account-tokenNotFound">
+            <span data-testid="invalid-link">
+              The specified link is invalid, check to see if it was copied
+              correctly.
+            </span>
+          </Localized>
+        )}
       </CallOut>
     </HorizontalGutter>
   );

src/core/client/account/test/__snapshots__/confirmEmail.spec.tsx.snap

@@ -10,46 +10,54 @@ exports[`renders form 1`] = `
   <div
     className="MainLayout-centered"
   >
-    <div>
-      <form
-        autoComplete="off"
-        onSubmit={[Function]}
+    <div
+      className="ConfirmRoute-container"
+    >
+      <div
+        className="ConfirmRoute-root"
       >
-        <div
-          className="Box-root HorizontalGutter-root HorizontalGutter-double"
+        <form
+          autoComplete="off"
+          onSubmit={[Function]}
         >
           <div
-            className="Box-root HorizontalGutter-root HorizontalGutter-full"
+            className="Box-root HorizontalGutter-root HorizontalGutter-double"
           >
-            <h1
-              className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary"
+            <div
+              className="Box-root HorizontalGutter-root HorizontalGutter-full"
             >
-              Email Confirmation
-            </h1>
-            <p
-              className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+              <h1
+                className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary"
+              >
+                Email Confirmation
+              </h1>
+              <p
+                className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+              >
+                Click below to confirm your email address.
+              </p>
+            </div>
+            <div
+              className="Box-root HorizontalGutter-root HorizontalGutter-full"
             >
-              Click below to confirm your email address.
-            </p>
+              <button
+                className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth"
+                data-color="primary"
+                data-variant="filled"
+                disabled={false}
+                onBlur={[Function]}
+                onFocus={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="submit"
+              >
+                Confirm email
+              </button>
+            </div>
           </div>
-          <div
-            className="Box-root HorizontalGutter-root HorizontalGutter-full"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth"
-              disabled={false}
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="submit"
-            >
-              Confirm email
-            </button>
-          </div>
-        </div>
-      </form>
+        </form>
+      </div>
     </div>
   </div>
 </div>
@@ -66,20 +74,30 @@ exports[`renders missing confirm token 1`] = `
     className="MainLayout-centered"
   >
     <div
-      className="Box-root HorizontalGutter-root HorizontalGutter-double"
+      className="ConfirmRoute-container"
     >
-      <h1
-        className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary"
-      >
-        Oops Sorry!
-      </h1>
       <div
-        className="CallOut-root CallOut-colorError CallOut-fullWidth"
+        className="ConfirmRoute-root"
       >
-        <div>
-          <span>
-            The Confirm Token seems to be missing.
-          </span>
+        <div
+          className="Box-root HorizontalGutter-root HorizontalGutter-double"
+        >
+          <h1
+            className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary"
+          >
+            Oops Sorry!
+          </h1>
+          <div
+            className="CallOut-root CallOut-colorError CallOut-fullWidth"
+          >
+            <div>
+              <span
+                data-testid="invalid-link"
+              >
+                The specified link is invalid, check to see if it was copied correctly.
+              </span>
+            </div>
+          </div>
         </div>
       </div>
     </div>

src/core/client/account/test/__snapshots__/resetPassword.spec.tsx.snap

@@ -10,93 +10,111 @@ exports[`renders form 1`] = `
   <div
     className="MainLayout-centered"
   >
-    <div>
-      <form
-        autoComplete="off"
-        onSubmit={[Function]}
+    <div
+      className="ResetRoute-container"
+    >
+      <div
+        className="ResetRoute-root"
       >
-        <div
-          className="Box-root HorizontalGutter-root HorizontalGutter-double"
-        >
-          <div
-            className="Box-root HorizontalGutter-root HorizontalGutter-full"
-          >
-            <h1
-              className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary"
-            >
-              Reset your password
-            </h1>
-            <p
-              className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-            >
-              Please enter a new password to use to sign in to your account.
-Make sure it is unique and be sure to keep it secure.
-            </p>
-          </div>
-          <div
-            className="Box-root HorizontalGutter-root HorizontalGutter-full"
+        <div>
+          <form
+            autoComplete="off"
+            onSubmit={[Function]}
           >
             <div
-              className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+              className="Box-root HorizontalGutter-root HorizontalGutter-double"
             >
-              <label
-                className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
-                htmlFor="password"
-              >
-                Password
-              </label>
-              <p
-                className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
-              >
-                Must be at least 8 characters
-              </p>
               <div
-                className="PasswordField-fullWidth PasswordField-root"
+                className="Box-root HorizontalGutter-root HorizontalGutter-full"
+              >
+                <h1
+                  className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary"
+                >
+                  Reset your password
+                </h1>
+                <p
+                  className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                >
+                  Please enter a new password to use to sign in to your account.
+Make sure it is unique and be sure to keep it secure.
+                </p>
+              </div>
+              <div
+                className="Box-root HorizontalGutter-root HorizontalGutter-full"
               >
                 <div
-                  className="PasswordField-wrapper"
+                  className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
                 >
-                  <input
-                    className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
-                    id="password"
-                    name="password"
-                    onChange={[Function]}
-                    placeholder="Password"
-                    type="password"
-                    value=""
-                  />
-                  <div
-                    className="PasswordField-icon"
-                    onClick={[Function]}
-                    role="button"
-                    tabIndex={0}
-                    title="Hide password"
+                  <label
+                    className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                    htmlFor="password"
                   >
-                    <span
-                      aria-hidden="true"
-                      className="Icon-root Icon-sm"
+                    Password
+                  </label>
+                  <p
+                    className="Box-root Typography-root Typography-fieldDescription Typography-colorTextSecondary"
+                  >
+                    Must be at least 8 characters
+                  </p>
+                  <div
+                    className="PasswordField-fullWidth PasswordField-root"
+                  >
+                    <div
+                      className="PasswordField-wrapper"
                     >
-                      visibility
-                    </span>
+                      <input
+                        autoCapitalize="off"
+                        autoComplete="new-password"
+                        autoCorrect="off"
+                        className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
+                        disabled={false}
+                        id="password"
+                        name="password"
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        onFocus={[Function]}
+                        placeholder="Password"
+                        spellCheck={false}
+                        type="password"
+                        value=""
+                      />
+                      <div
+                        className="PasswordField-icon"
+                        onClick={[Function]}
+                        onKeyUp={[Function]}
+                        role="button"
+                        tabIndex={0}
+                        title="Hide password"
+                      >
+                        <i
+                          aria-hidden="true"
+                          className="Icon-root Icon-sm"
+                        >
+                          visibility
+                        </i>
+                      </div>
+                    </div>
                   </div>
                 </div>
+                <button
+                  className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth"
+                  data-color="primary"
+                  data-variant="filled"
+                  disabled={false}
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseOut={[Function]}
+                  onMouseOver={[Function]}
+                  onTouchEnd={[Function]}
+                  type="submit"
+                >
+                  Reset Password
+                </button>
               </div>
             </div>
-            <button
-              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth"
-              disabled={false}
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="submit"
-            >
-              Reset Password
-            </button>
-          </div>
+          </form>
         </div>
-      </form>
+      </div>
     </div>
   </div>
 </div>
@@ -113,20 +131,30 @@ exports[`renders missing reset token 1`] = `
     className="MainLayout-centered"
   >
     <div
-      className="Box-root HorizontalGutter-root HorizontalGutter-double"
+      className="ResetRoute-container"
     >
-      <h1
-        className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary"
-      >
-        Oops Sorry!
-      </h1>
       <div
-        className="CallOut-root CallOut-colorError CallOut-fullWidth"
+        className="ResetRoute-root"
       >
-        <div>
-          <span>
-            The Reset Token seems to be missing.
-          </span>
+        <div
+          className="Box-root HorizontalGutter-root HorizontalGutter-double"
+        >
+          <h1
+            className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary"
+          >
+            Oops Sorry!
+          </h1>
+          <div
+            className="CallOut-root CallOut-colorError CallOut-fullWidth"
+          >
+            <div>
+              <span
+                data-testid="invalid-link"
+              >
+                The specified link is invalid, check to see if it was copied correctly.
+              </span>
+            </div>
+          </div>
         </div>
       </div>
     </div>

src/core/client/account/test/__snapshots__/unsubscribeNotifications.spec.tsx.snap

@@ -0,0 +1,96 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders form 1`] = `
+<div
+  data-testid="main-layout"
+>
+  <div
+    className="MainLayout-bar"
+  />
+  <div
+    className="MainLayout-centered"
+  >
+    <div
+      className="UnsubscribeRoute-container"
+    >
+      <div
+        className="UnsubscribeRoute-root"
+      >
+        <div
+          data-testid="unsubscribe-form"
+        >
+          <form
+            onSubmit={[Function]}
+          >
+            <div
+              className="Box-root HorizontalGutter-root HorizontalGutter-full"
+            >
+              <h1
+                className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary"
+              >
+                Click below to confirm that you want to unsubscribe from all notifications.
+              </h1>
+              <button
+                className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth"
+                data-color="primary"
+                data-variant="filled"
+                disabled={false}
+                onBlur={[Function]}
+                onFocus={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="submit"
+              >
+                Confirm
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders missing confirm token 1`] = `
+<div
+  data-testid="main-layout"
+>
+  <div
+    className="MainLayout-bar"
+  />
+  <div
+    className="MainLayout-centered"
+  >
+    <div
+      className="UnsubscribeRoute-container"
+    >
+      <div
+        className="UnsubscribeRoute-root"
+      >
+        <div
+          className="Box-root HorizontalGutter-root HorizontalGutter-double"
+        >
+          <h1
+            className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary"
+          >
+            Oops Sorry!
+          </h1>
+          <div
+            className="CallOut-root CallOut-colorError CallOut-fullWidth"
+          >
+            <div>
+              <span
+                data-testid="invalid-link"
+              >
+                The specified link is invalid, check to see if it was copied correctly.
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

src/core/client/account/test/confirmEmail.spec.tsx

@@ -1,5 +1,7 @@
 import sinon from "sinon";
 
+import { ERROR_CODES } from "coral-common/errors";
+import { InvalidRequestError } from "coral-framework/lib/errors";
 import { GQLResolver } from "coral-framework/schema";
 import {
   act,
@@ -10,8 +12,6 @@ import {
   within,
 } from "coral-framework/testHelpers";
 
-import { ERROR_CODES } from "coral-common/errors";
-import { InvalidRequestError } from "coral-framework/lib/errors";
 import create from "./create";
 
 const token = createAccessToken();
@@ -30,11 +30,7 @@ async function createTestRenderer(
 it("renders missing confirm token", async () => {
   replaceHistoryLocation("http://localhost/account/email/confirm");
   const { root } = await createTestRenderer();
-  await waitForElement(() =>
-    within(root).getByText("The Confirm Token seems to be missing", {
-      exact: false,
-    })
-  );
+  await waitForElement(() => within(root).getByTestID("invalid-link"));
   expect(within(root).toJSON()).toMatchSnapshot();
 });
 

src/core/client/account/test/resetPassword.spec.tsx

@@ -1,5 +1,7 @@
 import sinon from "sinon";
 
+import { ERROR_CODES } from "coral-common/errors";
+import { InvalidRequestError } from "coral-framework/lib/errors";
 import { GQLResolver } from "coral-framework/schema";
 import {
   act,
@@ -10,8 +12,6 @@ import {
   within,
 } from "coral-framework/testHelpers";
 
-import { ERROR_CODES } from "coral-common/errors";
-import { InvalidRequestError } from "coral-framework/lib/errors";
 import create from "./create";
 
 const token = createAccessToken();
@@ -30,11 +30,7 @@ async function createTestRenderer(
 it("renders missing reset token", async () => {
   replaceHistoryLocation("http://localhost/account/password/reset");
   const { root } = await createTestRenderer();
-  await waitForElement(() =>
-    within(root).getByText("The Reset Token seems to be missing", {
-      exact: false,
-    })
-  );
+  await waitForElement(() => within(root).getByTestID("invalid-link"));
   expect(within(root).toJSON()).toMatchSnapshot();
 });
 

src/core/client/account/test/unsubscribeNotifications.spec.tsx

@@ -0,0 +1,134 @@
+import sinon from "sinon";
+
+import { ERROR_CODES } from "coral-common/errors";
+import { InvalidRequestError } from "coral-framework/lib/errors";
+import { GQLResolver } from "coral-framework/schema";
+import {
+  act,
+  createAccessToken,
+  CreateTestRendererParams,
+  replaceHistoryLocation,
+  waitForElement,
+  within,
+} from "coral-framework/testHelpers";
+
+import create from "./create";
+
+const token = createAccessToken();
+
+async function createTestRenderer(
+  params: CreateTestRendererParams<GQLResolver> = {}
+) {
+  const { testRenderer, context } = create();
+  return {
+    context,
+    testRenderer,
+    root: testRenderer.root,
+  };
+}
+
+it("renders missing confirm token", async () => {
+  replaceHistoryLocation("http://localhost/account/notifications/unsubscribe");
+  const { root } = await createTestRenderer();
+  await waitForElement(() => within(root).getByTestID("invalid-link"));
+  expect(within(root).toJSON()).toMatchSnapshot();
+});
+
+it("renders form", async () => {
+  replaceHistoryLocation(
+    `http://localhost/account/notifications/unsubscribe#unsubscribeToken=${token}`
+  );
+  const { root, context } = await createTestRenderer();
+
+  const restMock = sinon.mock(context.rest);
+  restMock
+    .expects("fetch")
+    .withArgs("/account/notifications/unsubscribe", {
+      method: "GET",
+      token,
+    })
+    .once();
+
+  await act(async () => {
+    await waitForElement(() => within(root).getByTestID("unsubscribe-form"));
+  });
+  expect(within(root).toJSON()).toMatchSnapshot();
+  restMock.verify();
+});
+
+it("renders error from server", async () => {
+  replaceHistoryLocation(
+    `http://localhost/account/notifications/unsubscribe#unsubscribeToken=${token}`
+  );
+
+  const codes = [
+    ERROR_CODES.RATE_LIMIT_EXCEEDED,
+    ERROR_CODES.INTEGRATION_DISABLED,
+    ERROR_CODES.USER_NOT_FOUND,
+    ERROR_CODES.TOKEN_INVALID,
+  ];
+
+  for (const code of codes) {
+    const { root, context } = await createTestRenderer();
+
+    const restMock = sinon.mock(context.rest);
+    restMock
+      .expects("fetch")
+      .withArgs("/account/notifications/unsubscribe", {
+        method: "GET",
+        token,
+      })
+      .once()
+      .throwsException(
+        new InvalidRequestError({
+          code,
+        })
+      );
+
+    await act(async () => {
+      await waitForElement(() =>
+        within(root).getByText(code, {
+          exact: false,
+        })
+      );
+    });
+    restMock.verify();
+  }
+});
+
+it("submits form", async () => {
+  replaceHistoryLocation(
+    `http://localhost/account/notifications/unsubscribe#unsubscribeToken=${token}`
+  );
+  const { root, context } = await createTestRenderer();
+
+  const restMock = sinon.mock(context.rest);
+  restMock
+    .expects("fetch")
+    .withArgs("/account/notifications/unsubscribe", {
+      method: "GET",
+      token,
+    })
+    .once();
+
+  restMock
+    .expects("fetch")
+    .withArgs("/account/notifications/unsubscribe", {
+      method: "DELETE",
+      token,
+    })
+    .once();
+
+  await act(async () => {
+    await waitForElement(() => within(root).getByTestID("unsubscribe-form"));
+  });
+  const form = within(root).getByType("form");
+
+  // Submit valid form.
+  await act(async () => {
+    form.props.onSubmit();
+    await waitForElement(() => within(root).getByTestID("success"));
+  });
+
+  restMock.verify();
+});

src/core/client/admin/App/App.tsx

@@ -1,10 +1,10 @@
-import TransitionControl from "coral-framework/testHelpers/TransitionControl";
 import { BrowserProtocol, queryMiddleware } from "farce";
 import { createFarceRouter, ElementsRenderer } from "found";
 import { Resolver } from "found-relay";
 import React, { FunctionComponent } from "react";
 
 import { CoralContextConsumer } from "coral-framework/lib/bootstrap/CoralContext";
+import TransitionControl from "coral-framework/testHelpers/TransitionControl";
 
 import routeConfig from "../routeConfig";
 import NotFound from "../routes/NotFound";
@@ -13,16 +13,17 @@ const Router = createFarceRouter({
   historyProtocol: new BrowserProtocol(),
   historyMiddlewares: [queryMiddleware],
   routeConfig,
-  renderReady: ({ elements }) => (
-    <>
-      <ElementsRenderer elements={elements} />
-      {// this enables router transition control when writing tests.
-      process.env.NODE_ENV === "test" && <TransitionControl />}
-    </>
-  ),
-  renderError: ({ error }) => (
-    <div>{error.status === 404 ? <NotFound /> : "Error"}</div>
-  ),
+  renderReady: function FarceRouterReady({ elements }) {
+    return (
+      <>
+        <ElementsRenderer elements={elements} />
+        {process.env.NODE_ENV === "test" && <TransitionControl />}
+      </>
+    );
+  },
+  renderError: function FarceRouterError({ error }) {
+    return <div>{error.status === 404 ? <NotFound /> : "Error"}</div>;
+  },
 });
 
 const App: FunctionComponent = () => (

src/core/client/admin/App/DecisionHistory/ApprovedComment.tsx

@@ -1,6 +1,8 @@
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 
+import { Typography } from "coral-ui/components";
+
 import ApprovedIcon from "./ApprovedIcon";
 import DecisionItem from "./DecisionItem";
 import DotDivider from "./DotDivider";
@@ -9,8 +11,6 @@ import GoToCommentLink from "./GoToCommentLink";
 import Info from "./Info";
 import Timestamp from "./Timestamp";
 
-import { Typography } from "coral-ui/components";
-
 interface Props {
   href: string;
   username: string;

src/core/client/admin/App/DecisionHistory/DecisionHistoryContainer.tsx

@@ -1,9 +1,10 @@
 import React from "react";
 import { graphql, RelayPaginationProp } from "react-relay";
 
+import { withPaginationContainer } from "coral-framework/lib/relay";
+
 import { DecisionHistoryContainer_viewer as ViewerData } from "coral-admin/__generated__/DecisionHistoryContainer_viewer.graphql";
 import { DecisionHistoryContainerPaginationQueryVariables } from "coral-admin/__generated__/DecisionHistoryContainerPaginationQuery.graphql";
-import { withPaginationContainer } from "coral-framework/lib/relay";
 
 import DecisionHistory from "./DecisionHistory";
 
@@ -45,7 +46,7 @@ export class DecisionHistoryContainer extends React.Component<
       error => {
         this.setState({ disableLoadMore: false });
         if (error) {
-          // tslint:disable-next-line:no-console
+          // eslint-disable-next-line no-console
           console.error(error);
         }
       }

src/core/client/admin/App/DecisionHistory/DecisionHistoryItemContainer.tsx

@@ -1,9 +1,10 @@
 import React from "react";
 import { graphql } from "react-relay";
 
-import { DecisionHistoryItemContainer_action as ActionData } from "coral-admin/__generated__/DecisionHistoryItemContainer_action.graphql";
 import { withFragmentContainer } from "coral-framework/lib/relay";
 
+import { DecisionHistoryItemContainer_action as ActionData } from "coral-admin/__generated__/DecisionHistoryItemContainer_action.graphql";
+
 import ApprovedComment from "./ApprovedComment";
 import RejectedComment from "./RejectedComment";
 
@@ -16,9 +17,7 @@ class DecisionHistoryItemContainer extends React.Component<
   DecisionHistoryItemContainerProps
 > {
   public render() {
-    const href = `/admin/moderate/comment/${
-      this.props.action.revision.comment.id
-    }`;
+    const href = `/admin/moderate/comment/${this.props.action.revision.comment.id}`;
     const username =
       (this.props.action.revision.comment.author &&
         this.props.action.revision.comment.author.username) ||

src/core/client/admin/App/DecisionHistory/DecisionHistoryQuery.tsx

@@ -1,6 +1,7 @@
-import { graphql, QueryRenderer } from "coral-framework/lib/relay";
 import React, { Component } from "react";
 
+import { graphql, QueryRenderer } from "coral-framework/lib/relay";
+
 import { DecisionHistoryQuery as QueryTypes } from "coral-admin/__generated__/DecisionHistoryQuery.graphql";
 
 import DecisionHistoryContainer from "./DecisionHistoryContainer";

src/core/client/admin/App/DecisionHistory/RejectedComment.tsx

@@ -1,6 +1,8 @@
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 
+import { Typography } from "coral-ui/components";
+
 import DecisionItem from "./DecisionItem";
 import DotDivider from "./DotDivider";
 import Footer from "./Footer";
@@ -9,8 +11,6 @@ import Info from "./Info";
 import RejectedIcon from "./RejectedIcon";
 import Timestamp from "./Timestamp";
 
-import { Typography } from "coral-ui/components";
-
 interface Props {
   href: string;
   username: string;

src/core/client/admin/App/Main.spec.tsx

@@ -1,7 +1,7 @@
-import { removeFragmentRefs } from "coral-framework/testHelpers";
 import React from "react";
 import { createRenderer } from "react-test-renderer/shallow";
 
+import { removeFragmentRefs } from "coral-framework/testHelpers";
 import { PropTypesOf } from "coral-framework/types";
 
 import Main from "./Main";

src/core/client/admin/App/Main.tsx

@@ -1,7 +1,7 @@
 import React, { FunctionComponent } from "react";
 
 import { PropTypesOf } from "coral-framework/types";
-import { Logo } from "coral-ui/components";
+import { LogoHorizontal } from "coral-ui/components";
 import { AppBar, Begin, Divider, End } from "coral-ui/components/AppBar";
 
 import { DecisionHistoryButton } from "./DecisionHistory";
@@ -22,8 +22,7 @@ const Main: FunctionComponent<Props> = ({ children, viewer }) => (
     <AppBar gutterBegin gutterEnd>
       <Begin itemGutter="double">
         <div className={styles.logoContainer}>
-          <Logo />
-          <Version />
+          <LogoHorizontal />
         </div>
         <NavigationContainer viewer={viewer} />
       </Begin>
@@ -34,6 +33,7 @@ const Main: FunctionComponent<Props> = ({ children, viewer }) => (
       </End>
     </AppBar>
     {children}
+    <Version />
   </div>
 );
 

src/core/client/admin/App/MainRoute.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 
-import { MainRouteQueryResponse } from "coral-admin/__generated__/MainRouteQuery.graphql";
-
 import { graphql } from "coral-framework/lib/relay";
 import { withRouteConfig } from "coral-framework/lib/router";
 
+import { MainRouteQueryResponse } from "coral-admin/__generated__/MainRouteQuery.graphql";
+
 import Main from "./Main";
 
 interface Props {

src/core/client/admin/App/Navigation/NavigationContainer.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 
-import { NavigationContainer_viewer as ViewerData } from "coral-admin/__generated__/NavigationContainer_viewer.graphql";
 import { Ability, can } from "coral-admin/permissions";
 import { graphql, withFragmentContainer } from "coral-framework/lib/relay";
 import {
@@ -8,6 +7,8 @@ import {
   withSignOutMutation,
 } from "coral-framework/mutations";
 
+import { NavigationContainer_viewer as ViewerData } from "coral-admin/__generated__/NavigationContainer_viewer.graphql";
+
 import Navigation from "./Navigation";
 
 interface Props {

src/core/client/admin/App/UserMenu/UserMenuContainer.tsx

@@ -1,12 +1,13 @@
 import React from "react";
 
-import { UserMenuContainer_viewer as ViewerData } from "coral-admin/__generated__/UserMenuContainer_viewer.graphql";
 import { graphql, withFragmentContainer } from "coral-framework/lib/relay";
 import {
   SignOutMutation,
   withSignOutMutation,
 } from "coral-framework/mutations";
 
+import { UserMenuContainer_viewer as ViewerData } from "coral-admin/__generated__/UserMenuContainer_viewer.graphql";
+
 import UserMenu from "./UserMenu";
 
 interface Props {

src/core/client/admin/App/Version.css

@@ -1,6 +1,6 @@
 .version {
-  position: absolute;
-  right: 0;
-  top: 23px;
   font-size: calc(10rem / var(--rem-base));
+  color: var(--palette-text-secondary);
+  text-align: center;
+  padding-bottom: var(--spacing-3);
 }

src/core/client/admin/App/__snapshots__/Main.spec.tsx.snap

@@ -14,8 +14,7 @@ exports[`renders correctly 1`] = `
       <div
         className="Main-logoContainer"
       >
-        <withPropsOnChange(Logo) />
-        <Version />
+        <withPropsOnChange(LogoHorizontal) />
       </div>
       <withContext(createMutationContainer(Relay(NavigationContainer)))
         viewer={Object {}}
@@ -30,5 +29,6 @@ exports[`renders correctly 1`] = `
     </withPropsOnChange(End)>
   </withPropsOnChange(AppBar)>
   child
+  <Version />
 </div>
 `;

src/core/client/admin/Head.tsx

@@ -0,0 +1,30 @@
+import React, { FunctionComponent } from "react";
+import { Helmet } from "react-helmet";
+
+import favicon120 from "./assets/favicon120.png";
+import favicon128 from "./assets/favicon128.png";
+import favicon152 from "./assets/favicon152.png";
+import favicon180 from "./assets/favicon180.png";
+import favicon196 from "./assets/favicon196.png";
+import favicon228 from "./assets/favicon228.png";
+import favicon32 from "./assets/favicon32.png";
+import favicon57 from "./assets/favicon57.png";
+import favicon76 from "./assets/favicon76.png";
+import favicon96 from "./assets/favicon96.png";
+
+const Head: FunctionComponent = () => (
+  <Helmet>
+    <link rel="icon" href={favicon32} sizes="32x32" />
+    <link rel="icon" href={favicon57} sizes="57x57" />
+    <link rel="icon" href={favicon76} sizes="76x76" />
+    <link rel="icon" href={favicon96} sizes="96x96" />
+    <link rel="icon" href={favicon128} sizes="128x128" />
+    <link rel="icon" href={favicon228} sizes="228x228" />
+    <link rel="shortcut icon" sizes="196x196" href={favicon196} />
+    <link rel="apple-touch-icon" href={favicon120} sizes="120x120" />
+    <link rel="apple-touch-icon" href={favicon152} sizes="152x152" />
+    <link rel="apple-touch-icon" href={favicon180} sizes="180x180" />
+  </Helmet>
+);
+
+export default Head;