WIP: move some things around

Update AbstractSerializer.php

.eslintignore

@@ -1,5 +0,0 @@
-**/bower_components/**/*
-**/node_modules/**/*
-vendor/**/*
-**/Gulpfile.js
-**/dist/**/*

.eslintrc

@@ -1,175 +0,0 @@
-{
-  "parser": "babel-eslint",          // https://github.com/babel/babel-eslint
-  "env": {                           // http://eslint.org/docs/user-guide/configuring.html#specifying-environments
-    "browser": true                  // browser global variables
-  },
-  "ecmaFeatures": {
-    "arrowFunctions": true,
-    "blockBindings": true,
-    "classes": true,
-    "defaultParams": true,
-    "destructuring": true,
-    "forOf": true,
-    "generators": false,
-    "modules": true,
-    "objectLiteralComputedProperties": true,
-    "objectLiteralDuplicateProperties": false,
-    "objectLiteralShorthandMethods": true,
-    "objectLiteralShorthandProperties": true,
-    "spread": true,
-    "superInFunctions": true,
-    "templateStrings": true,
-    "jsx": true
-  },
-  "globals": {
-    "m": true,
-    "app": true,
-    "$": true,
-    "moment": true
-  },
-  "plugins": [
-    "react"
-  ],
-  "rules": {
-    "react/jsx-uses-vars": 1,
-
-/**
- * Strict mode
- */
-    // babel inserts "use strict"; for us
-    "strict": [2, "never"],          // http://eslint.org/docs/rules/strict
-
-/**
- * ES6
- */
-    "no-var": 2,                     // http://eslint.org/docs/rules/no-var
-    "prefer-const": 2,               // http://eslint.org/docs/rules/prefer-const
-
-/**
- * Variables
- */
-    "no-shadow": 2,                  // http://eslint.org/docs/rules/no-shadow
-    "no-shadow-restricted-names": 2, // http://eslint.org/docs/rules/no-shadow-restricted-names
-    "no-unused-vars": [2, {          // http://eslint.org/docs/rules/no-unused-vars
-      "vars": "local",
-      "args": "after-used"
-    }],
-    "no-use-before-define": 2,       // http://eslint.org/docs/rules/no-use-before-define
-
-/**
- * Possible errors
- */
-    "comma-dangle": [2, "never"],    // http://eslint.org/docs/rules/comma-dangle
-    "no-cond-assign": [2, "always"], // http://eslint.org/docs/rules/no-cond-assign
-    "no-console": 1,                 // http://eslint.org/docs/rules/no-console
-    "no-debugger": 1,                // http://eslint.org/docs/rules/no-debugger
-    "no-alert": 1,                   // http://eslint.org/docs/rules/no-alert
-    "no-constant-condition": 1,      // http://eslint.org/docs/rules/no-constant-condition
-    "no-dupe-keys": 2,               // http://eslint.org/docs/rules/no-dupe-keys
-    "no-duplicate-case": 2,          // http://eslint.org/docs/rules/no-duplicate-case
-    "no-empty": 2,                   // http://eslint.org/docs/rules/no-empty
-    "no-ex-assign": 2,               // http://eslint.org/docs/rules/no-ex-assign
-    "no-extra-boolean-cast": 0,      // http://eslint.org/docs/rules/no-extra-boolean-cast
-    "no-extra-semi": 2,              // http://eslint.org/docs/rules/no-extra-semi
-    "no-func-assign": 2,             // http://eslint.org/docs/rules/no-func-assign
-    "no-inner-declarations": 2,      // http://eslint.org/docs/rules/no-inner-declarations
-    "no-invalid-regexp": 2,          // http://eslint.org/docs/rules/no-invalid-regexp
-    "no-irregular-whitespace": 2,    // http://eslint.org/docs/rules/no-irregular-whitespace
-    "no-obj-calls": 2,               // http://eslint.org/docs/rules/no-obj-calls
-    "no-reserved-keys": 2,           // http://eslint.org/docs/rules/no-reserved-keys
-    "no-sparse-arrays": 2,           // http://eslint.org/docs/rules/no-sparse-arrays
-    "no-unreachable": 2,             // http://eslint.org/docs/rules/no-unreachable
-    "use-isnan": 2,                  // http://eslint.org/docs/rules/use-isnan
-    "block-scoped-var": 2,           // http://eslint.org/docs/rules/block-scoped-var
-
-/**
- * Best practices
- */
-    "consistent-return": 2,          // http://eslint.org/docs/rules/consistent-return
-    "curly": [2, "multi-line"],      // http://eslint.org/docs/rules/curly
-    "default-case": 2,               // http://eslint.org/docs/rules/default-case
-    "dot-notation": [2, {            // http://eslint.org/docs/rules/dot-notation
-      "allowKeywords": true
-    }],
-    "eqeqeq": 2,                     // http://eslint.org/docs/rules/eqeqeq
-    "no-caller": 2,                  // http://eslint.org/docs/rules/no-caller
-    "no-else-return": 2,             // http://eslint.org/docs/rules/no-else-return
-    "no-eq-null": 2,                 // http://eslint.org/docs/rules/no-eq-null
-    "no-eval": 2,                    // http://eslint.org/docs/rules/no-eval
-    "no-extend-native": 2,           // http://eslint.org/docs/rules/no-extend-native
-    "no-extra-bind": 2,              // http://eslint.org/docs/rules/no-extra-bind
-    "no-fallthrough": 2,             // http://eslint.org/docs/rules/no-fallthrough
-    "no-floating-decimal": 2,        // http://eslint.org/docs/rules/no-floating-decimal
-    "no-implied-eval": 2,            // http://eslint.org/docs/rules/no-implied-eval
-    "no-lone-blocks": 2,             // http://eslint.org/docs/rules/no-lone-blocks
-    "no-loop-func": 2,               // http://eslint.org/docs/rules/no-loop-func
-    "no-multi-str": 2,               // http://eslint.org/docs/rules/no-multi-str
-    "no-native-reassign": 2,         // http://eslint.org/docs/rules/no-native-reassign
-    "no-new": 2,                     // http://eslint.org/docs/rules/no-new
-    "no-new-func": 2,                // http://eslint.org/docs/rules/no-new-func
-    "no-new-wrappers": 2,            // http://eslint.org/docs/rules/no-new-wrappers
-    "no-octal": 2,                   // http://eslint.org/docs/rules/no-octal
-    "no-octal-escape": 2,            // http://eslint.org/docs/rules/no-octal-escape
-    "no-param-reassign": 2,          // http://eslint.org/docs/rules/no-param-reassign
-    "no-proto": 2,                   // http://eslint.org/docs/rules/no-proto
-    "no-redeclare": 2,               // http://eslint.org/docs/rules/no-redeclare
-    "no-return-assign": 2,           // http://eslint.org/docs/rules/no-return-assign
-    "no-self-compare": 2,            // http://eslint.org/docs/rules/no-self-compare
-    "no-sequences": 2,               // http://eslint.org/docs/rules/no-sequences
-    "no-throw-literal": 2,           // http://eslint.org/docs/rules/no-throw-literal
-    "no-with": 2,                    // http://eslint.org/docs/rules/no-with
-    "radix": 2,                      // http://eslint.org/docs/rules/radix
-    "vars-on-top": 2,                // http://eslint.org/docs/rules/vars-on-top
-    "wrap-iife": [2, "any"],         // http://eslint.org/docs/rules/wrap-iife
-    "yoda": 2,                       // http://eslint.org/docs/rules/yoda
-
-/**
- * Style
- */
-    "indent": [2, 2],                // http://eslint.org/docs/rules/indent
-    "brace-style": [2,               // http://eslint.org/docs/rules/brace-style
-      "1tbs", {
-      "allowSingleLine": true
-    }],
-    "quotes": [
-      2, "single", "avoid-escape"    // http://eslint.org/docs/rules/quotes
-    ],
-    "camelcase": [2, {               // http://eslint.org/docs/rules/camelcase
-      "properties": "never"
-    }],
-    "comma-spacing": [2, {           // http://eslint.org/docs/rules/comma-spacing
-      "before": false,
-      "after": true
-    }],
-    "comma-style": [2, "last"],      // http://eslint.org/docs/rules/comma-style
-    "eol-last": 2,                   // http://eslint.org/docs/rules/eol-last
-    "key-spacing": [2, {             // http://eslint.org/docs/rules/key-spacing
-        "beforeColon": false,
-        "afterColon": true
-    }],
-    "new-cap": [2, {                 // http://eslint.org/docs/rules/new-cap
-      "newIsCap": true
-    }],
-    "no-multiple-empty-lines": [2, { // http://eslint.org/docs/rules/no-multiple-empty-lines
-      "max": 2
-    }],
-    "no-new-object": 2,              // http://eslint.org/docs/rules/no-new-object
-    "no-spaced-func": 2,             // http://eslint.org/docs/rules/no-spaced-func
-    "no-trailing-spaces": 2,         // http://eslint.org/docs/rules/no-trailing-spaces
-    "no-wrap-func": 2,               // http://eslint.org/docs/rules/no-wrap-func
-    "no-underscore-dangle": 0,       // http://eslint.org/docs/rules/no-underscore-dangle
-    "one-var": [2, "never"],         // http://eslint.org/docs/rules/one-var
-    "padded-blocks": [2, "never"],   // http://eslint.org/docs/rules/padded-blocks
-    "semi": [2, "always"],           // http://eslint.org/docs/rules/semi
-    "semi-spacing": [2, {            // http://eslint.org/docs/rules/semi-spacing
-      "before": false,
-      "after": true
-    }],
-    "space-after-keywords": 2,       // http://eslint.org/docs/rules/space-after-keywords
-    "space-before-blocks": 2,        // http://eslint.org/docs/rules/space-before-blocks
-    "space-before-function-paren": [2, "never"], // http://eslint.org/docs/rules/space-before-function-paren
-    "space-infix-ops": 2,            // http://eslint.org/docs/rules/space-infix-ops
-    "space-return-throw-case": 2,    // http://eslint.org/docs/rules/space-return-throw-case
-    "spaced-line-comment": 2,        // http://eslint.org/docs/rules/spaced-line-comment
-  }
-}

.gitattributes

@@ -1,5 +1,11 @@
 .gitattributes export-ignore
 .gitignore export-ignore
-stubs/extension/.gitignore -export-ignore
 .gitmodules export-ignore
 .travis.yml export-ignore
+.editorconfig export-ignore
+.styleci.yml export-ignore
+
+phpunit.xml export-ignore
+tests export-ignore
+
+js/*/dist/*.js -diff

.github/CONTRIBUTING.md

@@ -0,0 +1,3 @@
+# Contributing to Flarum
+
+Howdy! We're really excited that you are interested in contributing to Flarum. Before submitting your contribution, please take a moment and read through the [Contributing Guidelines](https://github.com/flarum/flarum/blob/master/CONTRIBUTING.md).

.github/ISSUE_TEMPLATE.md

@@ -0,0 +1,26 @@
+> Issues on Github are meant for bug reporting. Please post feature requests on the [discussion forum](https://discuss.flarum.org/t/features).
+---
+> Try to complete the below form as far as you are able and are willing to share. Add a screenshot of the issue if you can.
+
+## Bug report
+- Version of Flarum: x.y.z
+- Website URL where the bug is visible: http://example.com
+- The webserver you are running: apache, nginx or something else
+- PHP version: x.y.z
+- Hosted environment: shared or vps
+- Hosting provider: http://some-amazing-provider.com
+
+## Flarum info
+
+```
+Output of "php flarum info", run this in terminal in your Flarum directory.
+```
+
+## Additional comments
+Some additional information you'd like to share, eg what have you tried so far.
+
+## Log files
+
+```
+Put any relevant logs here.
+```

.gitignore

@@ -4,3 +4,6 @@ composer.phar
 Thumbs.db
 tests/_output/*
 .vagrant
+.idea/*
+node_modules
+bower_components

.php_cs

@@ -1,26 +0,0 @@
-<?php
-
-$header = <<<EOF
-This file is part of Flarum.
-
-(c) Toby Zerner <toby.zerner@gmail.com>
-
-For the full copyright and license information, please view the LICENSE
-file that was distributed with this source code.
-EOF;
-
-Symfony\CS\Fixer\Contrib\HeaderCommentFixer::setHeader($header);
-
-$finder = Symfony\CS\Finder\DefaultFinder::create()
-    ->exclude('stubs')
-    ->in(__DIR__);
-
-return Symfony\CS\Config\Config::create()
-    ->setUsingCache(true)
-    ->level(Symfony\CS\FixerInterface::PSR2_LEVEL)
-    ->fixers([
-        'short_array_syntax',
-        'header_comment',
-        '-psr0'
-    ])
-    ->finder($finder);

.styleci.yml

@@ -0,0 +1,18 @@
+preset: recommended
+
+enabled:
+  - logical_not_operators_with_successor_space
+
+disabled:
+  - align_double_arrow
+  - blank_line_after_opening_tag
+  - multiline_array_trailing_comma
+  - new_with_braces
+  - phpdoc_align
+  - phpdoc_order
+  - phpdoc_separation
+  - phpdoc_types
+
+finder:
+  exclude:
+    - "stubs"

.travis.yml

@@ -1,8 +1,10 @@
 language: php
 
 php:
-  - 5.5
   - 5.6
+  - 7.0
+  - 7.1
+  - hhvm
 
 matrix:
   allow_failures:
@@ -10,12 +12,12 @@ matrix:
   fast_finish: true
 
 before_script:
-  - curl -s http://getcomposer.org/installer | php
-  - php composer.phar install
+  - if [[ "$TRAVIS_PHP_VERSION" != "hhvm" ]]; then phpenv config-rm xdebug.ini; fi;
+  - composer self-update
+  - composer install
 
 script:
-  - php composer.phar style
-  - php composer.phar test
+  - vendor/bin/phpunit --coverage-clover=coverage.xml
 
 notifications:
   email:
@@ -27,4 +29,7 @@ notifications:
     on_failure: always
     on_start: false
 
+after_success:
+  - bash <(curl -s https://codecov.io/bash)
+
 sudo: false

CHANGELOG.md

@@ -1,44 +0,0 @@
-# Change Log
-All notable changes to Flarum and its bundled extensions will be documented in this file.
-This project adheres to [Semantic Versioning](http://semver.org/).
-
-## [Unreleased][unreleased]
-*nothing yet*
-
-## [0.1.0-beta.2] - 2015-09-15
-### Added
-- Check prerequisites (PHP version, extensions, etc.) before installation (#364)
-- Enforce maximum title and post length through validation (#53, #338)
-- Ctrl+Enter submits posts (#276)
-- Syntax highlighting for code blocks (#248)
-- All links open in new window, receive rel=nofollow attribute (#247)
-- Default build script for extensions (#438)
-- Input validation in installer
-
-### Changed
-- Ask for admin password confirmation in installer (#405)
-- Increased some text contrasts for accessibility (#390)
-
-### Fixed
-- Discussion list did not work with non-empty database prefix (#269, #380)
-- Non-admins could not reset their password (#229)
-- Requests ending with a slash resulted in a 404 (#334)
-- In rare cases, posts did not load correctly (#295)
-- Avatars did not show up when installed in a subfolder (#291)
-- Installer crashed when views directory was not writable (#376)
-- Table prefix could not be set in web installer (#269)
-- Enabling an extension disabled all other extensions (#402)
-- Invalid custom CSS could crash the application (#400)
-- First posts could not be restored or deleted
-- Several design bugs
-- Set cookies to be HTTP-only
-- Tags: Sometimes, tags could not be dragged for reordering in the admin panel (#341)
-- Suspend: Use correct column name in when migrating database
-- Lock: Check for correct permission when displaying lock control
-- Likes: Allow liking permissions to be configured
-
-## 0.1.0-beta - 2015-08-27
-First Version
-
-[unreleased]: https://github.com/flarum/core/compare/v0.1.0-beta.2...HEAD
-[0.1.0-beta.2]: https://github.com/flarum/core/compare/v0.1.0-beta...v0.1.0-beta.2

CONTRIBUTING.md

@@ -1,13 +0,0 @@
-# Contributing to Flarum
-
-Thanks for your interest in contributing to Flarum! Please read the [Contributing docs](http://flarum.org/docs/contributing) to learn how you can help.
-
-## Contributor License Agreement
-
-By contributing your code to Flarum you grant Toby Zerner a non-exclusive, irrevocable, worldwide, royalty-free, sublicenseable, transferable license under all of Your relevant intellectual property rights (including copyright, patent, and any other rights), to use, copy, prepare derivative works of, distribute and publicly perform and display the Contributions on any licensing terms, including without limitation: (a) open source licenses like the MIT license; and (b) binary, proprietary, or commercial licenses. Except for the licenses granted herein, You reserve all right, title, and interest in and to the Contribution.
-
-You confirm that you are able to grant us these rights. You represent that You are legally entitled to grant the above license. If Your employer has rights to intellectual property that You create, You represent that You have received permission to make the Contributions on behalf of that employer, or that Your employer has waived such rights for the Contributions.
-
-You represent that the Contributions are Your original works of authorship, and to Your knowledge, no other person claims, or has the right to claim, any right in any invention or patent related to the Contributions. You also represent that You are not legally obligated, whether by entering into an agreement or otherwise, in any way that conflicts with the terms of this license.
-
-Toby Zerner acknowledges that, except as explicitly described in this Agreement, any Contribution which you provide is on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING, WITHOUT LIMITATION, ANY WARRANTIES OR CONDITIONS OF TITLE, NON-INFRINGEMENT, MERCHANTABILITY, OR FITNESS FOR A PARTICULAR PURPOSE.

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2014-2015 Toby Zerner
+Copyright (c) 2014-2017 Toby Zerner
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,7 +1,7 @@
 # Flarum Core
 
-This repository contains the core code of Flarum. If you want to install Flarum, visit the [main Flarum repository](http://github.com/flarum/flarum).
+This repository contains Flarum's core code. If you want to set up a forum, visit the [main Flarum repository](http://github.com/flarum/flarum).
 
 ## Contributing
 
-Interested in contributing to Flarum? Please read the [Contributing docs](http://flarum.org/docs/contributing) to learn how you can help.
+Flarum is open-source and we would love your help building it! Please read the [Contributing Guide](https://github.com/flarum/flarum/blob/master/CONTRIBUTING.md) to learn how you can help.

composer.json

@@ -1,20 +1,36 @@
 {
     "name": "flarum/core",
-    "description": "",
+    "description": "Delightfully simple forum software.",
+    "keywords": ["forum", "discussion"],
+    "homepage": "http://flarum.org",
+    "license": "MIT",
     "authors": [
         {
             "name": "Toby Zerner",
-            "email": "toby@flarum.org"
+            "email": "toby.zerner@gmail.com"
+        },
+        {
+            "name": "Franz Liedke",
+            "email": "franz@develophp.org"
         }
     ],
+    "support": {
+        "issues": "https://github.com/flarum/core/issues",
+        "source": "https://github.com/flarum/core",
+        "docs": "http://flarum.org/docs"
+    },
     "require": {
-        "php": ">=5.4.0",
+        "php": ">=5.6.0",
+        "dflydev/fig-cookies": "^1.0.2",
+        "doctrine/dbal": "^2.5",
+        "components/font-awesome": "^4.6",
+        "franzl/whoops-middleware": "^0.4.0",
         "illuminate/bus": "5.1.*",
         "illuminate/cache": "5.1.*",
         "illuminate/config": "5.1.*",
         "illuminate/container": "5.1.*",
         "illuminate/contracts": "5.1.*",
-        "illuminate/database": "5.1.*",
+        "illuminate/database": "^5.1.31",
         "illuminate/events": "5.1.*",
         "illuminate/filesystem": "5.1.*",
         "illuminate/hashing": "5.1.*",
@@ -22,22 +38,26 @@
         "illuminate/support": "5.1.*",
         "illuminate/validation": "5.1.*",
         "illuminate/view": "5.1.*",
-        "league/flysystem": "^1.0.11",
-        "tobscure/json-api": "^0.1.1",
-        "oyejorge/less.php": "~1.5",
         "intervention/image": "^2.3.0",
-        "s9e/text-formatter": "^0.3.2",
-        "psr/http-message": "^1.0",
-        "zendframework/zend-diactoros": "^1.1",
+        "league/flysystem": "^1.0.11",
+        "league/oauth2-client": "~1.0",
+        "matthiasmullie/minify": "^1.3",
+        "monolog/monolog": "^1.16.0",
         "nikic/fast-route": "^0.6",
-        "dflydev/fig-cookies": "^1.0",
+        "oyejorge/less.php": "~1.5",
+        "psr/http-message": "^1.0",
         "symfony/console": "^2.7",
+        "symfony/http-foundation": "^2.7",
+        "symfony/translation": "^2.7",
         "symfony/yaml": "^2.7",
-        "doctrine/dbal": "^2.5"
+        "s9e/text-formatter": "^0.8.1",
+        "tobscure/json-api": "^0.3.0",
+        "zendframework/zend-diactoros": "^1.1",
+        "zendframework/zend-stratigility": "^1.3"
     },
     "require-dev": {
-        "squizlabs/php_codesniffer": "2.*",
-        "phpspec/phpspec": "^2.2"
+        "mockery/mockery": "^0.9.4",
+        "phpunit/phpunit": "^4.8"
     },
     "autoload": {
         "psr-4": {
@@ -47,8 +67,14 @@
             "src/helpers.php"
         ]
     },
-    "scripts": {
-        "test": "phpspec run",
-        "style": "phpcs --standard=PSR2 -np src"
+    "autoload-dev": {
+        "psr-4": {
+            "Tests\\": "tests/"
+        }
+    },
+    "extra": {
+        "branch-alias": {
+            "dev-master": "0.1.x-dev"
+        }
     }
 }

error/403.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+    <meta charset="UTF-8">
+    <title></title>
+</head>
+<body>
+
+<h1>403 Forbidden</h1>
+<p>You do not have permissions to access this page.</p>
+
+</body>
+</html>

error/404.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+  <meta charset="UTF-8">
+  <title></title>
+</head>
+<body>
+
+<h1>404 Not Found</h1>
+<p>Looks like this page could not be found.</p>
+
+</body>
+</html>

error/500.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+  <meta charset="UTF-8">
+  <title></title>
+</head>
+<body>
+
+<h1>500 Internal Server Error</h1>
+<p>Something went wrong on our server.</p>
+
+</body>
+</html>

error/503.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+  <meta charset="UTF-8">
+  <title></title>
+</head>
+<body>
+
+<h1>503 Service Unavailable</h1>
+<p>This forum is down for maintenance.</p>
+
+</body>
+</html>

js/.gitignore

@@ -1 +0,0 @@
-bower_components

js/admin/.gitignore

@@ -1,3 +1 @@
-node_modules
-mithril.js
-dist
+dist

js/admin/Gulpfile.js

@@ -1,33 +0,0 @@
-var gulp = require('flarum-gulp');
-
-var nodeDir = 'node_modules';
-var bowerDir = '../bower_components';
-
-gulp({
-  files: [
-    nodeDir + '/babel-core/external-helpers.js',
-
-    bowerDir + '/es6-micro-loader/dist/system-polyfill.js',
-
-    bowerDir + '/mithril/mithril.js',
-    bowerDir + '/jquery/dist/jquery.js',
-    bowerDir + '/moment/moment.js',
-
-    bowerDir + '/bootstrap/js/affix.js',
-    bowerDir + '/bootstrap/js/dropdown.js',
-    bowerDir + '/bootstrap/js/modal.js',
-    bowerDir + '/bootstrap/js/tooltip.js',
-    bowerDir + '/bootstrap/js/transition.js',
-
-    bowerDir + '/spin.js/spin.js',
-    bowerDir + '/spin.js/jquery.spin.js'
-  ],
-  modules: {
-    'flarum': [
-      'src/**/*.js',
-      '../lib/**/*.js'
-    ]
-  },
-  externalHelpers: true,
-  outputFile: 'dist/app.js'
-});

js/admin/package.json

@@ -1,8 +0,0 @@
-{
-  "private": true,
-  "devDependencies": {
-    "gulp": "^3.8.11",
-    "flarum-gulp": "git+https://github.com/flarum/gulp.git",
-    "babel-core": "^5.0.0"
-  }
-}

js/admin/src/AdminApplication.tsx

@@ -0,0 +1,53 @@
+import * as m from 'mithril';
+import Application from './lib/Application';
+import routes from './routes';
+import Nav from './components/Nav';
+
+export default class AdminApplication extends Application {
+  /**
+   * A map of extension names to their settings callbacks.
+   *
+   * @type {Object}
+   */
+  extensionSettings = {};
+
+  /**
+   * Construct a list of permissions required to have the given permission.
+   *
+   * @param {String} permission
+   * @return {Array}
+   */
+  getRequiredPermissions(permission) {
+    const required = [];
+
+    if (permission === 'startDiscussion' || permission.indexOf('discussion.') === 0) {
+      required.push('viewDiscussions');
+    }
+    if (permission === 'discussion.delete') {
+      required.push('discussion.hide');
+    }
+    if (permission === 'discussion.deletePosts') {
+      required.push('discussion.editPosts');
+    }
+
+    return required;
+  }
+
+  /**
+   * @inheritdoc
+   */
+  mount() {
+    m.route.prefix('#');
+
+    super.mount();
+
+    m.mount(document.getElementById('nav'), <Nav/>);
+  }
+
+  /**
+   * @inheritdoc
+   */
+  registerDefaultRoutes(router) {
+    routes(router);
+  }
+}

js/admin/src/app.js

@@ -1,17 +0,0 @@
-import App from 'flarum/App';
-import store from 'flarum/initializers/store';
-import preload from 'flarum/initializers/preload';
-import routes from 'flarum/initializers/routes';
-import boot from 'flarum/initializers/boot';
-
-const app = new App();
-
-app.initializers.add('store', store);
-app.initializers.add('routes', routes);
-
-app.initializers.add('preload', preload, -100);
-app.initializers.add('boot', boot, -100);
-
-app.extensionSettings = {};
-
-export default app;

js/admin/src/components/AddExtensionModal.js

@@ -1,30 +0,0 @@
-/*
- * This file is part of Flarum.
- *
- * (c) Toby Zerner <toby.zerner@gmail.com>
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-import Modal from 'flarum/components/Modal';
-
-export default class AddExtensionModal extends Modal {
-  className() {
-    return 'AddExtensionModal Modal--small';
-  }
-
-  title() {
-    return 'Add Extension';
-  }
-
-  content() {
-    return (
-      <div className="Modal-body">
-        <p>One day in the not-too-distant future, this dialog will allow you to add an extension to your forum with ease. We're building an ecosystem as we speak!</p>
-        <p>In the meantime, if you manage to get your hands on a new extension, simply drop it in your forum's <code>extensions</code> directory.</p>
-        <p>If you're a developer, you can <a href="http://flarum.org/docs/extend">read the docs</a> and have a go at building your own.</p>
-      </div>
-    );
-  }
-}

js/admin/src/components/AddExtensionModal.tsx

@@ -0,0 +1,40 @@
+/*
+ * This file is part of Flarum.
+ *
+ * (c) Toby Zerner <toby.zerner@gmail.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+import flarum from 'flarum';
+import Modal from 'flarum/lib/components/Modal';
+
+export default class AddExtensionModal extends Modal {
+  /**
+   * @inheritdoc
+   */
+  className() {
+    return super.className() + ' AddExtensionModal Modal--small';
+  }
+
+  /**
+   * @inheritdoc
+   */
+  title() {
+    return flarum.translator.trans('admin.add_extension.title');
+  }
+
+  /**
+   * @inheritdoc
+   */
+  content() {
+    return (
+      <div className="Modal-body">
+        <p>{flarum.translator.trans('admin.add_extension.temporary_text')}</p>
+        <p>{flarum.translator.trans('admin.add_extension.install_text', {a: <a href="https://discuss.flarum.org/t/extensions" target="_blank"/>})}</p>
+        <p>{flarum.translator.trans('admin.add_extension.developer_text', {a: <a href="http://flarum.org/docs/extend" target="_blank"/>})}</p>
+      </div>
+    );
+  }
+}

js/admin/src/components/AdminLinkButton.js

@@ -1,24 +0,0 @@
-/*
- * This file is part of Flarum.
- *
- * (c) Toby Zerner <toby.zerner@gmail.com>
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-import LinkButton from 'flarum/components/LinkButton';
-
-export default class AdminLinkButton extends LinkButton {
-  getButtonContent() {
-    const content = super.getButtonContent();
-
-    content.push(
-      <div className="AdminLinkButton-description">
-        {this.props.description}
-      </div>
-    );
-
-    return content;
-  }
-}

js/admin/src/components/AdminLinkButton.tsx

@@ -0,0 +1,33 @@
+/*
+ * This file is part of Flarum.
+ *
+ * (c) Toby Zerner <toby.zerner@gmail.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+import LinkButton from 'flarum/lib/components/LinkButton';
+
+/**
+ *
+ */
+export default class AdminLinkButton extends LinkButton {
+  /**
+   * @inheritdoc
+   */
+  className() {
+    return super.className() + ' AdminLinkButton';
+  }
+
+  /**
+   * @inheritdoc
+   */
+  content() {
+    const content = super.content();
+
+    content.push(<div className="AdminLinkButton-description">{this.attrs.description}</div>);
+
+    return content;
+  }
+}

js/admin/src/components/AdminNav.js

@@ -1,72 +0,0 @@
-/*
- * This file is part of Flarum.
- *
- * (c) Toby Zerner <toby.zerner@gmail.com>
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-import Component from 'flarum/Component';
-import AdminLinkButton from 'flarum/components/AdminLinkButton';
-import SelectDropdown from 'flarum/components/SelectDropdown';
-
-import ItemList from 'flarum/utils/ItemList';
-
-export default class AdminNav extends Component {
-  view() {
-    return (
-      <SelectDropdown
-        className="AdminNav App-titleControl"
-        buttonClassName="Button"
-        children={this.items().toArray()}
-        />
-    );
-  }
-
-  /**
-   * Build an item list of links to show in the admin navigation.
-   *
-   * @return {ItemList}
-   */
-  items() {
-    const items = new ItemList();
-
-    items.add('dashboard', AdminLinkButton.component({
-      href: app.route('dashboard'),
-      icon: 'bar-chart',
-      children: 'Dashboard',
-      description: 'Your forum at a glance.'
-    }));
-
-    items.add('basics', AdminLinkButton.component({
-      href: app.route('basics'),
-      icon: 'pencil',
-      children: 'Basics',
-      description: 'Set your forum title, language, and other basic settings.'
-    }));
-
-    items.add('permissions', AdminLinkButton.component({
-      href: app.route('permissions'),
-      icon: 'key',
-      children: 'Permissions',
-      description: 'Configure who can see and do what.'
-    }));
-
-    items.add('appearance', AdminLinkButton.component({
-      href: app.route('appearance'),
-      icon: 'paint-brush',
-      children: 'Appearance',
-      description: 'Customize your forum\'s colors, logos, and other variables.'
-    }));
-
-    items.add('extensions', AdminLinkButton.component({
-      href: app.route('extensions'),
-      icon: 'puzzle-piece',
-      children: 'Extensions',
-      description: 'Add extra functionality to your forum and make it your own.'
-    }));
-
-    return items;
-  }
-}

js/admin/src/components/AdminNav.tsx

@@ -0,0 +1,52 @@
+/*
+ * This file is part of Flarum.
+ *
+ * (c) Toby Zerner <toby.zerner@gmail.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+import Component from 'flarum/lib/Component';
+import ItemList from 'flarum/lib/utils/ItemList';
+import AdminLinkButton from 'flarum/components/AdminLinkButton';
+import SelectDropdown from 'flarum/components/SelectDropdown';
+
+function addLink(items, route, icon) {
+  items.add(route, <AdminLinkButton
+    href={flarum.router.to(route)}
+    icon={icon}
+    children={flarum.translator.trans(`admin.nav.${route}_button`)}
+    description={flarum.translator.trans(`admin.nav.${route}_text`)}/>);
+}
+
+/**
+ *
+ */
+export default class Nav extends Component {
+  /**
+   * @inheritdoc
+   */
+  view() {
+    return <SelectDropdown className="Nav" buttonClassName="Button" children={this.items().toArray()}/>;
+  }
+
+  /**
+   * Build an item list of links to show in the admin navigation.
+   *
+   * @return {ItemList}
+   * @public
+   */
+  items() {
+    const items = new ItemList();
+
+    addLink(items, 'dashboard', 'bar-chart'));
+    addLink(items, 'basics', 'pencil'));
+    addLink(items, 'mail', 'envelope'));
+    addLink(items, 'permissions', 'key'));
+    addLink(items, 'appearance', 'paint-brush'));
+    addLink(items, 'extensions', 'puzzle-piece'));
+
+    return items;
+  }
+}

js/admin/src/components/AppearancePage.js

@@ -1,88 +0,0 @@
-import Component from 'flarum/Component';
-import Button from 'flarum/components/Button';
-import Switch from 'flarum/components/Switch';
-import EditCustomCssModal from 'flarum/components/EditCustomCssModal';
-import saveConfig from 'flarum/utils/saveConfig';
-
-export default class AppearancePage extends Component {
-  constructor(...args) {
-    super(...args);
-
-    this.primaryColor = m.prop(app.config.theme_primary_color);
-    this.secondaryColor = m.prop(app.config.theme_secondary_color);
-    this.darkMode = m.prop(app.config.theme_dark_mode === '1');
-    this.coloredHeader = m.prop(app.config.theme_colored_header === '1');
-  }
-
-  view() {
-    return (
-      <div className="AppearancePage">
-        <div className="container">
-          <form onsubmit={this.onsubmit.bind(this)}>
-            <fieldset className="AppearancePage-colors">
-              <legend>Colors</legend>
-              <div className="helpText">
-                Choose two colors to theme your forum with. The first will be used as a highlight color, while the second will be used to style background elements.
-              </div>
-
-              <div className="AppearancePage-colors-input">
-                <input className="FormControl" placeholder="#aaaaaa" value={this.primaryColor()} onchange={m.withAttr('value', this.primaryColor)}/>
-                <input className="FormControl" placeholder="#aaaaaa" value={this.secondaryColor()} onchange={m.withAttr('value', this.secondaryColor)}/>
-              </div>
-
-              {Switch.component({
-                state: this.darkMode(),
-                children: 'Dark Mode',
-                onchange: this.darkMode
-              })}
-
-              {Switch.component({
-                state: this.coloredHeader(),
-                children: 'Colored Header',
-                onchange: this.coloredHeader
-              })}
-
-              {Button.component({
-                className: 'Button Button--primary',
-                children: 'Save Changes',
-                loading: this.loading
-              })}
-            </fieldset>
-          </form>
-
-          <fieldset>
-            <legend>Custom Styles</legend>
-            <div className="helpText">
-              Customize your forum's appearance by adding your own LESS/CSS code to be applied on top of Flarum's default styles.
-            </div>
-            {Button.component({
-              className: 'Button',
-              children: 'Edit Custom CSS',
-              onclick: () => app.modal.show(new EditCustomCssModal())
-            })}
-          </fieldset>
-        </div>
-      </div>
-    );
-  }
-
-  onsubmit(e) {
-    e.preventDefault();
-
-    const hex = /^#[0-9a-f]{3}([0-9a-f]{3})?$/i;
-
-    if (!hex.test(this.primaryColor()) || !hex.test(this.secondaryColor())) {
-      alert('Please enter a hexadecimal color code.');
-      return;
-    }
-
-    this.loading = true;
-
-    saveConfig({
-      theme_primary_color: this.primaryColor(),
-      theme_secondary_color: this.secondaryColor(),
-      theme_dark_mode: this.darkMode(),
-      theme_colored_header: this.coloredHeader()
-    }).then(() => window.location.reload());
-  }
-}

js/admin/src/components/AppearancePage.tsx

@@ -0,0 +1,119 @@
+import Page from 'flarum/components/Page';
+import Button from 'flarum/components/Button';
+import Switch from 'flarum/components/Switch';
+import EditCustomCssModal from 'flarum/components/EditCustomCssModal';
+import EditCustomHeaderModal from 'flarum/components/EditCustomHeaderModal';
+import UploadImageButton from 'flarum/components/UploadImageButton';
+import saveSettings from 'flarum/utils/saveSettings';
+
+export default class AppearancePage extends Page {
+  init() {
+    super.init();
+
+    this.primaryColor = m.prop(app.data.settings.theme_primary_color);
+    this.secondaryColor = m.prop(app.data.settings.theme_secondary_color);
+    this.darkMode = m.prop(app.data.settings.theme_dark_mode === '1');
+    this.coloredHeader = m.prop(app.data.settings.theme_colored_header === '1');
+  }
+
+  view() {
+    return (
+      <div className="AppearancePage">
+        <div className="container">
+          <form onsubmit={this.onsubmit.bind(this)}>
+            <fieldset className="AppearancePage-colors">
+              <legend>{app.translator.trans('core.admin.appearance.colors_heading')}</legend>
+              <div className="helpText">
+                {app.translator.trans('core.admin.appearance.colors_text')}
+              </div>
+
+              <div className="AppearancePage-colors-input">
+                <input className="FormControl" type="color" placeholder="#aaaaaa" value={this.primaryColor()} onchange={m.withAttr('value', this.primaryColor)}/>
+                <input className="FormControl" type="color" placeholder="#aaaaaa" value={this.secondaryColor()} onchange={m.withAttr('value', this.secondaryColor)}/>
+              </div>
+
+              {Switch.component({
+                state: this.darkMode(),
+                children: app.translator.trans('core.admin.appearance.dark_mode_label'),
+                onchange: this.darkMode
+              })}
+
+              {Switch.component({
+                state: this.coloredHeader(),
+                children: app.translator.trans('core.admin.appearance.colored_header_label'),
+                onchange: this.coloredHeader
+              })}
+
+              {Button.component({
+                className: 'Button Button--primary',
+                type: 'submit',
+                children: app.translator.trans('core.admin.appearance.submit_button'),
+                loading: this.loading
+              })}
+            </fieldset>
+          </form>
+
+          <fieldset>
+            <legend>{app.translator.trans('core.admin.appearance.logo_heading')}</legend>
+            <div className="helpText">
+              {app.translator.trans('core.admin.appearance.logo_text')}
+            </div>
+            <UploadImageButton name="logo"/>
+          </fieldset>
+
+          <fieldset>
+            <legend>{app.translator.trans('core.admin.appearance.favicon_heading')}</legend>
+            <div className="helpText">
+              {app.translator.trans('core.admin.appearance.favicon_text')}
+            </div>
+            <UploadImageButton name="favicon"/>
+          </fieldset>
+
+          <fieldset>
+            <legend>{app.translator.trans('core.admin.appearance.custom_header_heading')}</legend>
+            <div className="helpText">
+              {app.translator.trans('core.admin.appearance.custom_header_text')}
+            </div>
+            {Button.component({
+              className: 'Button',
+              children: app.translator.trans('core.admin.appearance.edit_header_button'),
+              onclick: () => app.modal.show(new EditCustomHeaderModal())
+            })}
+          </fieldset>
+
+          <fieldset>
+            <legend>{app.translator.trans('core.admin.appearance.custom_styles_heading')}</legend>
+            <div className="helpText">
+              {app.translator.trans('core.admin.appearance.custom_styles_text')}
+            </div>
+            {Button.component({
+              className: 'Button',
+              children: app.translator.trans('core.admin.appearance.edit_css_button'),
+              onclick: () => app.modal.show(new EditCustomCssModal())
+            })}
+          </fieldset>
+        </div>
+      </div>
+    );
+  }
+
+  onsubmit(e) {
+    e.preventDefault();
+
+    const hex = /^#[0-9a-f]{3}([0-9a-f]{3})?$/i;
+
+    if (!hex.test(this.primaryColor()) || !hex.test(this.secondaryColor())) {
+      alert(app.translator.trans('core.admin.appearance.enter_hex_message'));
+      return;
+    }
+
+    this.loading = true;
+
+    saveSettings({
+      theme_primary_color: this.primaryColor(),
+      theme_secondary_color: this.secondaryColor(),
+      theme_dark_mode: this.darkMode(),
+      theme_colored_header: this.coloredHeader()
+    }).then(() => window.location.reload());
+  }
+}

js/admin/src/components/BasicsPage.tsx

@@ -1,13 +1,15 @@
-import Component from 'flarum/Component';
+import Page from 'flarum/components/Page';
 import FieldSet from 'flarum/components/FieldSet';
 import Select from 'flarum/components/Select';
 import Button from 'flarum/components/Button';
 import Alert from 'flarum/components/Alert';
-import saveConfig from 'flarum/utils/saveConfig';
+import saveSettings from 'flarum/utils/saveSettings';
+import ItemList from 'flarum/utils/ItemList';
+import Switch from 'flarum/components/Switch';
 
-export default class BasicsPage extends Component {
-  constructor(...args) {
-    super(...args);
+export default class BasicsPage extends Page {
+  init() {
+    super.init();
 
     this.loading = false;
 
@@ -15,20 +17,23 @@ export default class BasicsPage extends Component {
       'forum_title',
       'forum_description',
       'default_locale',
+      'show_language_selector',
       'default_route',
       'welcome_title',
       'welcome_message'
     ];
     this.values = {};
 
-    const config = app.config;
-    this.fields.forEach(key => this.values[key] = m.prop(config[key]));
+    const settings = app.data.settings;
+    this.fields.forEach(key => this.values[key] = m.prop(settings[key] || false));
 
     this.localeOptions = {};
-    const locales = app.locales;
+    const locales = app.data.locales;
     for (const i in locales) {
       this.localeOptions[i] = `${locales[i]} (${i})`;
     }
+
+    if (typeof this.values.show_language_selector() !== "number") this.values.show_language_selector(1);
   }
 
   view() {
@@ -37,17 +42,17 @@ export default class BasicsPage extends Component {
         <div className="container">
           <form onsubmit={this.onsubmit.bind(this)}>
             {FieldSet.component({
-              label: 'Forum Title',
+              label: app.translator.trans('core.admin.basics.forum_title_heading'),
               children: [
                 <input className="FormControl" value={this.values.forum_title()} oninput={m.withAttr('value', this.values.forum_title)}/>
               ]
             })}
 
             {FieldSet.component({
-              label: 'Forum Description',
+              label: app.translator.trans('core.admin.basics.forum_description_heading'),
               children: [
                 <div className="helpText">
-                  Enter a short sentence or two that describes your community. This will appear in the meta tag and show up in search engines.
+                  {app.translator.trans('core.admin.basics.forum_description_text')}
                 </div>,
                 <textarea className="FormControl" value={this.values.forum_description()} oninput={m.withAttr('value', this.values.forum_description)}/>
               ]
@@ -55,44 +60,47 @@ export default class BasicsPage extends Component {
 
             {Object.keys(this.localeOptions).length > 1
               ? FieldSet.component({
-                label: 'Default Language',
+                label: app.translator.trans('core.admin.basics.default_language_heading'),
                 children: [
                   Select.component({
                     options: this.localeOptions,
+                    value: this.values.default_locale(),
                     onchange: this.values.default_locale
                   })
                 ]
               })
               : ''}
 
+            {Switch.component({
+              state: this.values.show_language_selector(),
+              onchange: this.values.show_language_selector,
+              children: app.translator.trans('core.admin.basics.show_language_selector_label'),
+            })}
+
+            <br/>
+
             {FieldSet.component({
-              label: 'Home Page',
+              label: app.translator.trans('core.admin.basics.home_page_heading'),
               className: 'BasicsPage-homePage',
               children: [
                 <div className="helpText">
-                  Choose the page which users will first see when they visit your forum. If entering a custom value, use the path relative to the forum root.
+                  {app.translator.trans('core.admin.basics.home_page_text')}
                 </div>,
-                <label className="checkbox">
-                  <input type="radio" name="homePage" value="/all" checked={this.values.default_route() === '/all'} onclick={m.withAttr('value', this.values.default_route)}/>
-                  All Discussions
-                </label>,
-                <label className="checkbox">
-                  <input type="radio" name="homePage" value="custom" checked={this.values.default_route() !== '/all'} onclick={() => {
-                    this.values.default_route('');
-                    m.redraw(true);
-                    this.$('.BasicsPage-homePage input').select();
-                  }}/>
-                  Custom <input className="FormControl" value={this.values.default_route()} oninput={m.withAttr('value', this.values.default_route)} style={this.values.default_route() !== '/all' ? 'margin-top: 5px' : 'display:none'}/>
-                </label>
+                this.homePageItems().toArray().map(({path, label}) =>
+                  <label className="checkbox">
+                    <input type="radio" name="homePage" value={path} checked={this.values.default_route() === path} onclick={m.withAttr('value', this.values.default_route)}/>
+                    {label}
+                  </label>
+                )
               ]
             })}
 
             {FieldSet.component({
-              label: 'Welcome Banner',
+              label: app.translator.trans('core.admin.basics.welcome_banner_heading'),
               className: 'BasicsPage-welcomeBanner',
               children: [
                 <div className="helpText">
-                  Configure the text that displays in the banner on the All Discussions page. Use this to welcome guests to your forum.
+                  {app.translator.trans('core.admin.basics.welcome_banner_text')}
                 </div>,
                 <div className="BasicsPage-welcomeBanner-input">
                   <input className="FormControl" value={this.values.welcome_title()} oninput={m.withAttr('value', this.values.welcome_title)}/>
@@ -104,7 +112,7 @@ export default class BasicsPage extends Component {
             {Button.component({
               type: 'submit',
               className: 'Button Button--primary',
-              children: 'Save Changes',
+              children: app.translator.trans('core.admin.basics.submit_button'),
               loading: this.loading,
               disabled: !this.changed()
             })}
@@ -115,9 +123,25 @@ export default class BasicsPage extends Component {
   }
 
   changed() {
-    const config = app.config;
+    return this.fields.some(key => this.values[key]() !== app.data.settings[key]);
+  }
 
-    return this.fields.some(key => this.values[key]() !== config[key]);
+  /**
+   * Build a list of options for the default homepage. Each option must be an
+   * object with `path` and `label` properties.
+   *
+   * @return {ItemList}
+   * @public
+   */
+  homePageItems() {
+    const items = new ItemList();
+
+    items.add('allDiscussions', {
+      path: '/all',
+      label: app.translator.trans('core.admin.basics.all_discussions_label')
+    });
+
+    return items;
   }
 
   onsubmit(e) {
@@ -128,15 +152,16 @@ export default class BasicsPage extends Component {
     this.loading = true;
     app.alerts.dismiss(this.successAlert);
 
-    const config = {};
+    const settings = {};
 
-    this.fields.forEach(key => config[key] = this.values[key]());
+    this.fields.forEach(key => settings[key] = this.values[key]());
 
-    saveConfig(config)
+    saveSettings(settings)
       .then(() => {
-        app.alerts.show(this.successAlert = new Alert({type: 'success', children: 'Your changes were saved.'}));
+        app.alerts.show(this.successAlert = new Alert({type: 'success', children: app.translator.trans('core.admin.basics.saved_message')}));
       })
-      .finally(() => {
+      .catch(() => {})
+      .then(() => {
         this.loading = false;
         m.redraw();
       });

js/admin/src/components/DashboardPage.js

@@ -1,21 +0,0 @@
-import Component from 'flarum/Component';
-
-export default class DashboardPage extends Component {
-  view() {
-    return (
-      <div className="DashboardPage">
-        <div className="container">
-          <h2>Welcome to Flarum Beta</h2>
-          <p>Thanks for trying out Flarum! You are running version <strong>{app.forum.attribute('version')}</strong>. This is beta software, and should not be used in production.</p>
-          <ul>
-            <li>Having problems? Read the <a href="http://flarum.org/docs/troubleshooting" target="_blank">Troubleshooting docs</a>.</li>
-            <li>Found a bug? Please <a href="https://github.com/flarum/core/issues" target="_blank">report it on GitHub</a>.</li>
-            <li>Got some feedback? Let us know what you think on the <a href="http://discuss.flarum.org" target="_blank">Support Forum</a>.</li>
-            <li>Want to contribute? Read the <a href="http://flarum.org/docs/contributing" target="_blank">Contributing docs</a>.</li>
-            <li>Interested in developing extensions? Read the <a href="http://flarum.org/docs/extend" target="_blank">Extension docs</a>.</li>
-          </ul>
-        </div>
-      </div>
-    );
-  }
-}

js/admin/src/components/DashboardPage.tsx

@@ -0,0 +1,22 @@
+import Page from 'flarum/components/Page';
+
+export default class DashboardPage extends Page {
+  view() {
+    return (
+      <div className="DashboardPage">
+        <div className="container">
+          <h2>{app.translator.trans('core.admin.dashboard.welcome_text')}</h2>
+          <p>{app.translator.trans('core.admin.dashboard.version_text', {version: <strong>{app.forum.attribute('version')}</strong>})}</p>
+          <p>{app.translator.trans('core.admin.dashboard.beta_warning_text', {strong: <strong/>})}</p>
+          <ul>
+            <li>{app.translator.trans('core.admin.dashboard.contributing_text', {a: <a href="http://flarum.org/docs/contributing" target="_blank"/>})}</li>
+            <li>{app.translator.trans('core.admin.dashboard.troubleshooting_text', {a: <a href="http://flarum.org/docs/troubleshooting" target="_blank"/>})}</li>
+            <li>{app.translator.trans('core.admin.dashboard.support_text', {a: <a href="http://discuss.flarum.org/t/support" target="_blank"/>})}</li>
+            <li>{app.translator.trans('core.admin.dashboard.features_text', {a: <a href="http://discuss.flarum.org/t/features" target="_blank"/>})}</li>
+            <li>{app.translator.trans('core.admin.dashboard.extension_text', {a: <a href="http://flarum.org/docs/extend" target="_blank"/>})}</li>
+          </ul>
+        </div>
+      </div>
+    );
+  }
+}

js/admin/src/components/EditCustomCssModal.js

@@ -1,51 +0,0 @@
-import Modal from 'flarum/components/Modal';
-import Button from 'flarum/components/Button';
-import saveConfig from 'flarum/utils/saveConfig';
-
-export default class EditCustomCssModal extends Modal {
-  constructor(...args) {
-    super(...args);
-
-    this.customLess = m.prop(app.config.custom_less || '');
-  }
-
-  className() {
-    return 'EditCustomCssModal Modal--large';
-  }
-
-  title() {
-    return 'Edit Custom CSS';
-  }
-
-  content() {
-    return (
-      <div className="Modal-body">
-        <p>Customize your forum's appearance by adding your own LESS/CSS code to be applied on top of Flarum's default styles. <a href="">Read the documentation</a> for more information.</p>
-
-        <div className="Form">
-          <div className="Form-group">
-            <textarea className="FormControl" rows="30" value={this.customLess()} onchange={m.withAttr('value', this.customLess)}/>
-          </div>
-
-          <div className="Form-group">
-            {Button.component({
-              className: 'Button Button--primary',
-              children: 'Save Changes',
-              loading: this.loading
-            })}
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  onsubmit(e) {
-    e.preventDefault();
-
-    this.loading = true;
-
-    saveConfig({
-      custom_less: this.customLess()
-    }).then(() => window.location.reload());
-  }
-}

js/admin/src/components/EditCustomCssModal.tsx

@@ -0,0 +1,24 @@
+import SettingsModal from 'flarum/components/SettingsModal';
+
+export default class EditCustomCssModal extends SettingsModal {
+  className() {
+    return 'EditCustomCssModal Modal--large';
+  }
+
+  title() {
+    return app.translator.trans('core.admin.edit_css.title');
+  }
+
+  form() {
+    return [
+      <p>{app.translator.trans('core.admin.edit_css.customize_text', {a: <a href="https://github.com/flarum/core/tree/master/less" target="_blank"/>})}</p>,
+      <div className="Form-group">
+        <textarea className="FormControl" rows="30" bidi={this.setting('custom_less')}/>
+      </div>
+    ];
+  }
+
+  onsaved() {
+    window.location.reload();
+  }
+}

js/admin/src/components/EditCustomHeaderModal.tsx

@@ -0,0 +1,24 @@
+import SettingsModal from 'flarum/components/SettingsModal';
+
+export default class EditCustomHeaderModal extends SettingsModal {
+  className() {
+    return 'EditCustomHeaderModal Modal--large';
+  }
+
+  title() {
+    return app.translator.trans('core.admin.edit_header.title');
+  }
+
+  form() {
+    return [
+      <p>{app.translator.trans('core.admin.edit_header.customize_text')}</p>,
+      <div className="Form-group">
+        <textarea className="FormControl" rows="30" bidi={this.setting('custom_header')}/>
+      </div>
+    ];
+  }
+
+  onsaved() {
+    window.location.reload();
+  }
+}

js/admin/src/components/EditGroupModal.tsx

@@ -8,9 +8,7 @@ import Group from 'flarum/models/Group';
  * to create or edit a group.
  */
 export default class EditGroupModal extends Modal {
-  constructor(...args) {
-    super(...args);
-
+  init() {
     this.group = this.props.group || app.store.createRecord('groups');
 
     this.nameSingular = m.prop(this.group.nameSingular() || '');
@@ -30,7 +28,7 @@ export default class EditGroupModal extends Modal {
         style: {backgroundColor: this.color()}
       }) : '',
       ' ',
-      this.namePlural() || 'Create Group'
+      this.namePlural() || app.translator.trans('core.admin.edit_group.title')
     ];
   }
 
@@ -39,22 +37,22 @@ export default class EditGroupModal extends Modal {
       <div className="Modal-body">
         <div className="Form">
           <div className="Form-group">
-            <label>Name</label>
+            <label>{app.translator.trans('core.admin.edit_group.name_label')}</label>
             <div className="EditGroupModal-name-input">
-              <input className="FormControl" placeholder="Singular (e.g. Mod)" value={this.nameSingular()} oninput={m.withAttr('value', this.nameSingular)}/>
-              <input className="FormControl" placeholder="Plural (e.g. Mods)" value={this.namePlural()} oninput={m.withAttr('value', this.namePlural)}/>
+              <input className="FormControl" placeholder={app.translator.trans('core.admin.edit_group.singular_placeholder')} value={this.nameSingular()} oninput={m.withAttr('value', this.nameSingular)}/>
+              <input className="FormControl" placeholder={app.translator.trans('core.admin.edit_group.plural_placeholder')} value={this.namePlural()} oninput={m.withAttr('value', this.namePlural)}/>
             </div>
           </div>
 
           <div className="Form-group">
-            <label>Color</label>
+            <label>{app.translator.trans('core.admin.edit_group.color_label')}</label>
             <input className="FormControl" placeholder="#aaaaaa" value={this.color()} oninput={m.withAttr('value', this.color)}/>
           </div>
 
           <div className="Form-group">
-            <label>Icon</label>
+            <label>{app.translator.trans('core.admin.edit_group.icon_label')}</label>
             <div className="helpText">
-              Enter the name of any <a href="http://fortawesome.github.io/Font-Awesome/icons/" tabindex="-1">FontAwesome</a> icon class, <em>without</em> the <code>fa-</code> prefix.
+              {app.translator.trans('core.admin.edit_group.icon_text', {a: <a href="http://fortawesome.github.io/Font-Awesome/icons/" tabindex="-1"/>})}
             </div>
             <input className="FormControl" placeholder="bolt" value={this.icon()} oninput={m.withAttr('value', this.icon)}/>
           </div>
@@ -64,11 +62,11 @@ export default class EditGroupModal extends Modal {
               type: 'submit',
               className: 'Button Button--primary EditGroupModal-save',
               loading: this.loading,
-              children: 'Save Changes'
+              children: app.translator.trans('core.admin.edit_group.submit_button')
             })}
             {this.group.exists && this.group.id() !== Group.ADMINISTRATOR_ID ? (
-              <button type="button" className="Button EditGroupModal-delete" onclick={this.delete.bind(this)}>
-                Delete Group
+              <button type="button" className="Button EditGroupModal-delete" onclick={this.deleteGroup.bind(this)}>
+                {app.translator.trans('core.admin.edit_group.delete_button')}
               </button>
             ) : ''}
           </div>
@@ -87,17 +85,16 @@ export default class EditGroupModal extends Modal {
       namePlural: this.namePlural(),
       color: this.color(),
       icon: this.icon()
-    }).then(
-      () => this.hide(),
-      () => {
+    }, {errorHandler: this.onerror.bind(this)})
+      .then(this.hide.bind(this))
+      .catch(() => {
         this.loading = false;
         m.redraw();
-      }
-    );
+      });
   }
 
-  delete() {
-    if (confirm('Are you sure you want to delete this group? The group members will NOT be deleted.')) {
+  deleteGroup() {
+    if (confirm(app.translator.trans('core.admin.edit_group.delete_confirmation'))) {
       this.group.delete().then(() => m.redraw());
       this.hide();
     }

js/admin/src/components/ExtensionsPage.js

@@ -1,115 +0,0 @@
-import Component from 'flarum/Component';
-import LinkButton from 'flarum/components/LinkButton';
-import Button from 'flarum/components/Button';
-import Dropdown from 'flarum/components/Dropdown';
-import Separator from 'flarum/components/Separator';
-import AddExtensionModal from 'flarum/components/AddExtensionModal';
-import LoadingModal from 'flarum/components/LoadingModal';
-import ItemList from 'flarum/utils/ItemList';
-import icon from 'flarum/helpers/icon';
-
-export default class ExtensionsPage extends Component {
-  view() {
-    return (
-      <div className="ExtensionsPage">
-        <div className="ExtensionsPage-header">
-          <div className="container">
-            {Button.component({
-              children: 'Add Extension',
-              icon: 'plus',
-              className: 'Button Button--primary',
-              onclick: () => app.modal.show(new AddExtensionModal())
-            })}
-          </div>
-        </div>
-
-        <div className="ExtensionsPage-list">
-          <div className="container">
-            <ul className="ExtensionList">
-              {app.extensions
-                .sort((a, b) => a.name.localeCompare(b.name))
-                .map(extension => (
-                  <li className={'ExtensionListItem ' + (!this.isEnabled(extension.name) ? 'disabled' : '')}>
-                    {Dropdown.component({
-                      icon: 'ellipsis-v',
-                      children: this.controlItems(extension).toArray(),
-                      className: 'ExtensionListItem-controls',
-                      buttonClassName: 'Button Button--icon Button--flat',
-                      menuClassName: 'Dropdown-menu--right'
-                    })}
-                    <div className="ExtensionListItem-content">
-                      <span className="ExtensionListItem-icon ExtensionIcon" style={extension.icon}>
-                        {extension.icon ? icon(extension.icon.name) : ''}
-                      </span>
-                      <h4 className="ExtensionListItem-title">
-                        {extension.title}{' '}
-                        <small className="ExtensionListItem-version">{extension.version}</small>
-                      </h4>
-                      <div className="ExtensionListItem-description">{extension.description}</div>
-                    </div>
-                  </li>
-                ))}
-            </ul>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  controlItems(extension) {
-    const items = new ItemList();
-    const enabled = this.isEnabled(extension.name);
-
-    if (app.extensionSettings[extension.name]) {
-      items.add('settings', Button.component({
-        icon: 'cog',
-        children: 'Settings',
-        onclick: app.extensionSettings[extension.name]
-      }));
-    }
-
-    items.add('toggle', Button.component({
-      icon: 'power-off',
-      children: enabled ? 'Disable' : 'Enable',
-      onclick: () => {
-        app.request({
-          url: app.forum.attribute('apiUrl') + '/extensions/' + extension.name,
-          method: 'PATCH',
-          data: {enabled: !enabled}
-        }).then(() => window.location.reload());
-
-        app.modal.show(new LoadingModal());
-      }
-    }));
-
-    if (!enabled) {
-      items.add('uninstall', Button.component({
-        icon: 'trash-o',
-        children: 'Uninstall',
-        onclick: () => {
-          app.request({
-            url: app.forum.attribute('apiUrl') + '/extensions/' + extension.name,
-            method: 'DELETE',
-          }).then(() => window.location.reload());
-
-          app.modal.show(new LoadingModal());
-        }
-      }));
-    }
-
-    // items.add('separator2', Separator.component());
-
-    // items.add('support', LinkButton.component({
-    //   icon: 'support',
-    //   children: 'Support'
-    // }));
-
-    return items;
-  }
-
-  isEnabled(name) {
-    const enabled = JSON.parse(app.config.extensions_enabled);
-
-    return enabled.indexOf(name) !== -1;
-  }
-}

js/admin/src/components/ExtensionsPage.tsx

@@ -0,0 +1,114 @@
+import Page from 'flarum/components/Page';
+import LinkButton from 'flarum/components/LinkButton';
+import Button from 'flarum/components/Button';
+import Dropdown from 'flarum/components/Dropdown';
+import Separator from 'flarum/components/Separator';
+import AddExtensionModal from 'flarum/components/AddExtensionModal';
+import LoadingModal from 'flarum/components/LoadingModal';
+import ItemList from 'flarum/utils/ItemList';
+import icon from 'flarum/helpers/icon';
+import listItems from 'flarum/helpers/listItems';
+
+export default class ExtensionsPage extends Page {
+  view() {
+    return (
+      <div className="ExtensionsPage">
+        <div className="ExtensionsPage-header">
+          <div className="container">
+            {Button.component({
+              children: app.translator.trans('core.admin.extensions.add_button'),
+              icon: 'plus',
+              className: 'Button Button--primary',
+              onclick: () => app.modal.show(new AddExtensionModal())
+            })}
+          </div>
+        </div>
+
+        <div className="ExtensionsPage-list">
+          <div className="container">
+            <ul className="ExtensionList">
+              {Object.keys(app.data.extensions)
+                .map(id => {
+                  const extension = app.data.extensions[id];
+                  const controls = this.controlItems(extension.id).toArray();
+
+                  return <li className={'ExtensionListItem ' + (!this.isEnabled(extension.id) ? 'disabled' : '')}>
+                    <div className="ExtensionListItem-content">
+                      <span className="ExtensionListItem-icon ExtensionIcon" style={extension.icon}>
+                        {extension.icon ? icon(extension.icon.name) : ''}
+                      </span>
+                      {controls.length ? (
+                        <Dropdown
+                          className="ExtensionListItem-controls"
+                          buttonClassName="Button Button--icon Button--flat"
+                          menuClassName="Dropdown-menu--right"
+                          icon="ellipsis-h">
+                          {controls}
+                        </Dropdown>
+                      ) : ''}
+                      <label className="ExtensionListItem-title">
+                        <input type="checkbox" checked={this.isEnabled(extension.id)} onclick={this.toggle.bind(this, extension.id)}/> {' '}
+                        {extension.extra['flarum-extension'].title}
+                      </label>
+                      <div className="ExtensionListItem-version">{extension.version}</div>
+                    </div>
+                  </li>;
+                })}
+            </ul>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  controlItems(name) {
+    const items = new ItemList();
+    const enabled = this.isEnabled(name);
+
+    if (app.extensionSettings[name]) {
+      items.add('settings', Button.component({
+        icon: 'cog',
+        children: app.translator.trans('core.admin.extensions.settings_button'),
+        onclick: app.extensionSettings[name]
+      }));
+    }
+
+    if (!enabled) {
+      items.add('uninstall', Button.component({
+        icon: 'trash-o',
+        children: app.translator.trans('core.admin.extensions.uninstall_button'),
+        onclick: () => {
+          app.request({
+            url: app.forum.attribute('apiUrl') + '/extensions/' + name,
+            method: 'DELETE'
+          }).then(() => window.location.reload());
+
+          app.modal.show(new LoadingModal());
+        }
+      }));
+    }
+
+    return items;
+  }
+
+  isEnabled(name) {
+    const enabled = JSON.parse(app.data.settings.extensions_enabled);
+
+    return enabled.indexOf(name) !== -1;
+  }
+
+  toggle(id) {
+    const enabled = this.isEnabled(id);
+
+    app.request({
+      url: app.forum.attribute('apiUrl') + '/extensions/' + id,
+      method: 'PATCH',
+      data: {enabled: !enabled}
+    }).then(() => {
+      if (!enabled) localStorage.setItem('enabledExtension', id);
+      window.location.reload();
+    });
+
+    app.modal.show(new LoadingModal());
+  }
+}

js/admin/src/components/Header.tsx

@@ -0,0 +1,25 @@
+import Component from 'flarum/Component';
+import ItemList from 'flarum/utils/ItemList';
+import SessionDropdown from './SessionDropdown';
+
+export default class Header extends Component {
+  /**
+   * @inheritdoc
+   */
+  view() {
+    return this.items().toVnodes();
+  }
+
+  /**
+   * Build an item list for the header contents.
+   *
+   * @return {ItemList}
+   */
+  items() {
+    const items = new ItemList();
+
+    items.add('session', <SessionDropdown/>);
+
+    return items;
+  }
+}

js/admin/src/components/HeaderSecondary.js

@@ -1,30 +0,0 @@
-import Component from 'flarum/Component';
-import SessionDropdown from 'flarum/components/SessionDropdown';
-import ItemList from 'flarum/utils/ItemList';
-import listItems from 'flarum/helpers/listItems';
-
-/**
- * The `HeaderSecondary` component displays secondary header controls.
- */
-export default class HeaderSecondary extends Component {
-  view() {
-    return (
-      <ul className="Header-controls">
-        {listItems(this.items().toArray())}
-      </ul>
-    );
-  }
-
-  /**
-   * Build an item list for the controls.
-   *
-   * @return {ItemList}
-   */
-  items() {
-    const items = new ItemList();
-
-    items.add('session', SessionDropdown.component());
-
-    return items;
-  }
-}

js/admin/src/components/LoadingModal.tsx

@@ -10,7 +10,7 @@ export default class LoadingModal extends Modal {
   }
 
   title() {
-    return 'Please Wait...';
+    return app.translator.trans('core.admin.loading.title');
   }
 
   content() {

js/admin/src/components/MailPage.tsx

@@ -0,0 +1,124 @@
+import Page from 'flarum/components/Page';
+import FieldSet from 'flarum/components/FieldSet';
+import Button from 'flarum/components/Button';
+import Alert from 'flarum/components/Alert';
+import saveSettings from 'flarum/utils/saveSettings';
+
+export default class MailPage extends Page {
+  init() {
+    super.init();
+
+    this.loading = false;
+
+    this.fields = [
+      'mail_driver',
+      'mail_host',
+      'mail_from',
+      'mail_port',
+      'mail_username',
+      'mail_password',
+      'mail_encryption'
+    ];
+    this.values = {};
+
+    const settings = app.data.settings;
+    this.fields.forEach(key => this.values[key] = m.prop(settings[key]));
+
+    this.localeOptions = {};
+    const locales = app.locales;
+    for (const i in locales) {
+      this.localeOptions[i] = `${locales[i]} (${i})`;
+    }
+  }
+
+  view() {
+    return (
+      <div className="MailPage">
+        <div className="container">
+          <form onsubmit={this.onsubmit.bind(this)}>
+            <h2>{app.translator.trans('core.admin.email.heading')}</h2>
+            <div className="helpText">
+              {app.translator.trans('core.admin.email.text')}
+            </div>
+
+            {FieldSet.component({
+              label: app.translator.trans('core.admin.email.server_heading'),
+              className: 'MailPage-MailSettings',
+              children: [
+                <div className="MailPage-MailSettings-input">
+                  <label>{app.translator.trans('core.admin.email.driver_label')}</label>
+                  <input className="FormControl" value={this.values.mail_driver() || ''} oninput={m.withAttr('value', this.values.mail_driver)} />
+                  <label>{app.translator.trans('core.admin.email.host_label')}</label>
+                  <input className="FormControl" value={this.values.mail_host() || ''} oninput={m.withAttr('value', this.values.mail_host)} />
+                  <label>{app.translator.trans('core.admin.email.port_label')}</label>
+                  <input className="FormControl" value={this.values.mail_port() || ''} oninput={m.withAttr('value', this.values.mail_port)} />
+                  <label>{app.translator.trans('core.admin.email.encryption_label')}</label>
+                  <input className="FormControl" value={this.values.mail_encryption() || ''} oninput={m.withAttr('value', this.values.mail_encryption)} />
+                </div>
+              ]
+            })}
+
+            {FieldSet.component({
+              label: app.translator.trans('core.admin.email.account_heading'),
+              className: 'MailPage-MailSettings',
+              children: [
+                <div className="MailPage-MailSettings-input">
+                  <label>{app.translator.trans('core.admin.email.username_label')}</label>
+                  <input className="FormControl" value={this.values.mail_username() || ''} oninput={m.withAttr('value', this.values.mail_username)} />
+                  <label>{app.translator.trans('core.admin.email.password_label')}</label>
+                  <input className="FormControl" value={this.values.mail_password() || ''} oninput={m.withAttr('value', this.values.mail_password)} />
+                </div>
+              ]
+            })}
+
+            {FieldSet.component({
+              label: app.translator.trans('core.admin.email.addresses_heading'),
+              className: 'MailPage-MailSettings',
+              children: [
+                <div className="MailPage-MailSettings-input">
+                  <label>{app.translator.trans('core.admin.email.from_label')}</label>
+                  <input className="FormControl" value={this.values.mail_from() || ''} oninput={m.withAttr('value', this.values.mail_from)} />
+                </div>
+              ]
+            })}
+
+            {Button.component({
+              type: 'submit',
+              className: 'Button Button--primary',
+              children: app.translator.trans('core.admin.email.submit_button'),
+              loading: this.loading,
+              disabled: !this.changed()
+            })}
+          </form>
+        </div>
+      </div>
+    );
+  }
+
+  changed() {
+    return this.fields.some(key => this.values[key]() !== app.data.settings[key]);
+  }
+
+  onsubmit(e) {
+    e.preventDefault();
+
+    if (this.loading) return;
+
+    this.loading = true;
+    app.alerts.dismiss(this.successAlert);
+
+    const settings = {};
+
+    this.fields.forEach(key => settings[key] = this.values[key]());
+
+    saveSettings(settings)
+      .then(() => {
+        app.alerts.show(this.successAlert = new Alert({type: 'success', children: app.translator.trans('core.admin.basics.saved_message')}));
+      })
+      .catch(() => {})
+      .then(() => {
+        this.loading = false;
+        m.redraw();
+      });
+  }
+}

js/admin/src/components/Page.tsx

@@ -0,0 +1,32 @@
+import Component from 'flarum/Component';
+
+/**
+ * The `Page` component
+ *
+ * @abstract
+ */
+export default class Page extends Component {
+  init() {
+    app.previous = app.current;
+    app.current = this;
+
+    app.modal.close();
+
+    /**
+     * A class name to apply to the body while the route is active.
+     *
+     * @type {String}
+     */
+    this.bodyClass = '';
+  }
+
+  config(isInitialized, context) {
+    if (isInitialized) return;
+
+    if (this.bodyClass) {
+      $('#app').addClass(this.bodyClass);
+
+      context.onunload = () => $('#app').removeClass(this.bodyClass);
+    }
+  }
+}

js/admin/src/components/PermissionDropdown.js

@@ -1,115 +0,0 @@
-import Dropdown from 'flarum/components/Dropdown';
-import Button from 'flarum/components/Button';
-import Separator from 'flarum/components/Separator';
-import Group from 'flarum/models/Group';
-import GroupBadge from 'flarum/components/GroupBadge';
-
-function badgeForId(id) {
-  const group = app.store.getById('groups', id);
-
-  return group ? GroupBadge.component({group, label: null}) : '';
-}
-
-export default class PermissionDropdown extends Dropdown {
-  static initProps(props) {
-    super.initProps(props);
-
-    props.className = 'PermissionDropdown';
-    props.buttonClassName = 'Button Button--text';
-  }
-
-  view() {
-    this.props.children = [];
-
-    const groupIds = app.permissions[this.props.permission] || [];
-    const everyone = groupIds.indexOf(Group.GUEST_ID) !== -1;
-    const members = groupIds.indexOf(Group.MEMBER_ID) !== -1;
-    const adminGroup = app.store.getById('groups', Group.ADMINISTRATOR_ID);
-
-    if (everyone) {
-      this.props.label = 'Everyone';
-    } else if (members) {
-      this.props.label = 'Members';
-    } else {
-      this.props.label = [
-        badgeForId(Group.ADMINISTRATOR_ID),
-        groupIds.map(badgeForId)
-      ];
-    }
-
-    if (this.props.allowGuest) {
-      this.props.children.push(
-        Button.component({
-          children: 'Everyone',
-          icon: everyone ? 'check' : true,
-          onclick: () => this.save([Group.GUEST_ID])
-        })
-      );
-    }
-
-    this.props.children.push(
-      Button.component({
-        children: 'Members',
-        icon: members ? 'check' : true,
-        onclick: () => this.save([Group.MEMBER_ID])
-      }),
-
-      Separator.component(),
-
-      Button.component({
-        children: [GroupBadge.component({group: adminGroup, label: null}), ' ', adminGroup.namePlural()],
-        icon: !everyone && !members ? 'check' : true,
-        disabled: !everyone && !members,
-        onclick: e => {
-          e.stopPropagation();
-          this.save([]);
-        }
-      })
-    );
-
-    [].push.apply(
-      this.props.children,
-      app.store.all('groups')
-        .filter(group => [Group.ADMINISTRATOR_ID, Group.GUEST_ID, Group.MEMBER_ID].indexOf(group.id()) === -1)
-        .map(group => Button.component({
-          children: [GroupBadge.component({group, label: null}), ' ', group.namePlural()],
-          icon: groupIds.indexOf(group.id()) !== -1 ? 'check' : true,
-          onclick: (e) => {
-            e.stopPropagation();
-            this.toggle(group.id());
-          }
-        }))
-    );
-
-    return super.view();
-  }
-
-  save(groupIds) {
-    const permission = this.props.permission;
-
-    app.permissions[permission] = groupIds;
-
-    app.request({
-      method: 'POST',
-      url: app.forum.attribute('apiUrl') + '/permission',
-      data: {permission, groupIds}
-    });
-  }
-
-  toggle(groupId) {
-    const permission = this.props.permission;
-
-    let groupIds = app.permissions[permission] || [];
-
-    const index = groupIds.indexOf(groupId);
-
-    if (index !== -1) {
-      groupIds.splice(index, 1);
-    } else {
-      groupIds.push(groupId);
-      groupIds = groupIds.filter(id => [Group.GUEST_ID, Group.MEMBER_ID].indexOf(id) === -1);
-    }
-
-    this.save(groupIds);
-  }
-}

js/admin/src/components/PermissionDropdown.tsx

@@ -0,0 +1,149 @@
+import Dropdown from 'flarum/components/Dropdown';
+import Button from 'flarum/components/Button';
+import Separator from 'flarum/components/Separator';
+import Group from 'flarum/models/Group';
+import Badge from 'flarum/components/Badge';
+import GroupBadge from 'flarum/components/GroupBadge';
+
+function badgeForId(id) {
+  const group = app.store.getById('groups', id);
+
+  return group ? GroupBadge.component({group, label: null}) : '';
+}
+
+function filterByRequiredPermissions(groupIds, permission) {
+  app.getRequiredPermissions(permission)
+    .forEach(required => {
+      const restrictToGroupIds = app.data.permissions[required] || [];
+
+      if (restrictToGroupIds.indexOf(Group.GUEST_ID) !== -1) {
+        // do nothing
+      } else if (restrictToGroupIds.indexOf(Group.MEMBER_ID) !== -1) {
+        groupIds = groupIds.filter(id => id !== Group.GUEST_ID);
+      } else if (groupIds.indexOf(Group.MEMBER_ID) !== -1) {
+        groupIds = restrictToGroupIds;
+      } else {
+        groupIds = restrictToGroupIds.filter(id => groupIds.indexOf(id) !== -1);
+      }
+
+      groupIds = filterByRequiredPermissions(groupIds, required);
+    });
+
+  return groupIds;
+}
+
+export default class PermissionDropdown extends Dropdown {
+  static initProps(props) {
+    super.initProps(props);
+
+    props.className = 'PermissionDropdown';
+    props.buttonClassName = 'Button Button--text';
+  }
+
+  view() {
+    this.props.children = [];
+
+    let groupIds = app.data.permissions[this.props.permission] || [];
+
+    groupIds = filterByRequiredPermissions(groupIds, this.props.permission);
+
+    const everyone = groupIds.indexOf(Group.GUEST_ID) !== -1;
+    const members = groupIds.indexOf(Group.MEMBER_ID) !== -1;
+    const adminGroup = app.store.getById('groups', Group.ADMINISTRATOR_ID);
+
+    if (everyone) {
+      this.props.label = Badge.component({icon: 'globe'});
+    } else if (members) {
+      this.props.label = Badge.component({icon: 'user'});
+    } else {
+      this.props.label = [
+        badgeForId(Group.ADMINISTRATOR_ID),
+        groupIds.map(badgeForId)
+      ];
+    }
+
+    if (this.showing) {
+      if (this.props.allowGuest) {
+        this.props.children.push(
+          Button.component({
+            children: [Badge.component({icon: 'globe'}), ' ', app.translator.trans('core.admin.permissions_controls.everyone_button')],
+            icon: everyone ? 'check' : true,
+            onclick: () => this.save([Group.GUEST_ID]),
+            disabled: this.isGroupDisabled(Group.GUEST_ID)
+          })
+        );
+      }
+
+      this.props.children.push(
+        Button.component({
+          children: [Badge.component({icon: 'user'}), ' ', app.translator.trans('core.admin.permissions_controls.members_button')],
+          icon: members ? 'check' : true,
+          onclick: () => this.save([Group.MEMBER_ID]),
+          disabled: this.isGroupDisabled(Group.MEMBER_ID)
+        }),
+
+        Separator.component(),
+
+        Button.component({
+          children: [badgeForId(adminGroup.id()), ' ', adminGroup.namePlural()],
+          icon: !everyone && !members ? 'check' : true,
+          disabled: !everyone && !members,
+          onclick: e => {
+            if (e.shiftKey) e.stopPropagation();
+            this.save([]);
+          }
+        })
+      );
+
+      [].push.apply(
+        this.props.children,
+        app.store.all('groups')
+          .filter(group => [Group.ADMINISTRATOR_ID, Group.GUEST_ID, Group.MEMBER_ID].indexOf(group.id()) === -1)
+          .map(group => Button.component({
+            children: [badgeForId(group.id()), ' ', group.namePlural()],
+            icon: groupIds.indexOf(group.id()) !== -1 ? 'check' : true,
+            onclick: (e) => {
+              if (e.shiftKey) e.stopPropagation();
+              this.toggle(group.id());
+            },
+            disabled: this.isGroupDisabled(group.id()) && this.isGroupDisabled(Group.MEMBER_ID) && this.isGroupDisabled(Group.GUEST_ID)
+          }))
+      );
+    }
+
+    return super.view();
+  }
+
+  save(groupIds) {
+    const permission = this.props.permission;
+
+    app.data.permissions[permission] = groupIds;
+
+    app.request({
+      method: 'POST',
+      url: app.forum.attribute('apiUrl') + '/permission',
+      data: {permission, groupIds}
+    });
+  }
+
+  toggle(groupId) {
+    const permission = this.props.permission;
+
+    let groupIds = app.data.permissions[permission] || [];
+
+    const index = groupIds.indexOf(groupId);
+
+    if (index !== -1) {
+      groupIds.splice(index, 1);
+    } else {
+      groupIds.push(groupId);
+      groupIds = groupIds.filter(id => [Group.GUEST_ID, Group.MEMBER_ID].indexOf(id) === -1);
+    }
+
+    this.save(groupIds);
+  }
+
+  isGroupDisabled(id) {
+    return filterByRequiredPermissions([id], this.props.permission).indexOf(id) === -1;
+  }
+}

js/admin/src/components/PermissionGrid.js

@@ -1,212 +0,0 @@
-import Component from 'flarum/Component';
-import PermissionDropdown from 'flarum/components/PermissionDropdown';
-import ConfigDropdown from 'flarum/components/ConfigDropdown';
-import Button from 'flarum/components/Button';
-import ItemList from 'flarum/utils/ItemList';
-
-export default class PermissionGrid extends Component {
-  constructor(...args) {
-    super(...args);
-
-    this.permissions = this.permissionItems().toArray();
-  }
-
-  view() {
-    const scopes = this.scopeItems().toArray();
-
-    const permissionCells = permission => {
-      return scopes.map(scope => (
-        <td>
-          {scope.render(permission)}
-        </td>
-      ));
-    };
-
-    return (
-      <table className="PermissionGrid">
-        <thead>
-          <tr>
-            <td></td>
-            {scopes.map(scope => (
-              <th>
-                {scope.label}{' '}
-                {scope.onremove ? Button.component({icon: 'times', className: 'Button Button--text PermissionGrid-removeScope', onclick: scope.onremove}) : ''}
-              </th>
-            ))}
-            <th>{this.scopeControlItems().toArray()}</th>
-          </tr>
-        </thead>
-        {this.permissions.map(section => (
-          <tbody>
-            <tr className="PermissionGrid-section">
-              <th>{section.label}</th>
-              {permissionCells(section)}
-              <td/>
-            </tr>
-            {section.children.map(child => (
-              <tr className="PermissionGrid-child">
-                <th>{child.label}</th>
-                {permissionCells(child)}
-                <td/>
-              </tr>
-            ))}
-          </tbody>
-        ))}
-      </table>
-    );
-  }
-
-  permissionItems() {
-    const items = new ItemList();
-
-    items.add('view', {
-      label: 'View the forum',
-      children: this.viewItems().toArray()
-    });
-
-    items.add('start', {
-      label: 'Start discussions',
-      children: this.startItems().toArray()
-    });
-
-    items.add('reply', {
-      label: 'Reply to discussions',
-      children: this.replyItems().toArray()
-    });
-
-    items.add('moderate', {
-      label: 'Moderate',
-      children: this.moderateItems().toArray()
-    });
-
-    return items;
-  }
-
-  viewItems() {
-    const items = new ItemList();
-
-    items.add('view', {
-      label: 'View discussions',
-      permission: 'forum.view',
-      allowGuest: true
-    });
-
-    items.add('signUp', {
-      label: 'Sign up',
-      setting: () => ConfigDropdown.component({
-        key: 'allow_sign_up',
-        options: [
-          {value: '1', label: 'Open'},
-          {value: '0', label: 'Closed'}
-        ]
-      })
-    });
-
-    return items;
-  }
-
-  startItems() {
-    const items = new ItemList();
-
-    items.add('start', {
-      label: 'Start discussions',
-      permission: 'forum.startDiscussion'
-    });
-
-    items.add('allowRenaming', {
-      label: 'Allow renaming',
-      setting: () => {
-        const minutes = parseInt(app.config.allow_renaming, 10);
-
-        return ConfigDropdown.component({
-          defaultLabel: minutes ? `For ${minutes} minutes` : 'Indefinitely',
-          key: 'allow_renaming',
-          options: [
-            {value: '-1', label: 'Indefinitely'},
-            {value: '10', label: 'For 10 minutes'},
-            {value: 'reply', label: 'Until next reply'}
-          ]
-        });
-      }
-    });
-
-    return items;
-  }
-
-  replyItems() {
-    const items = new ItemList();
-
-    items.add('reply', {
-      label: 'Reply to discussions',
-      permission: 'discussion.reply'
-    });
-
-    items.add('allowPostEditing', {
-      label: 'Allow post editing',
-      setting: () => {
-        const minutes = parseInt(app.config.allow_post_editing, 10);
-
-        return ConfigDropdown.component({
-          defaultLabel: minutes ? `For ${minutes} minutes` : 'Indefinitely',
-          key: 'allow_post_editing',
-          options: [
-            {value: '-1', label: 'Indefinitely'},
-            {value: '10', label: 'For 10 minutes'},
-            {value: 'reply', label: 'Until next reply'}
-          ]
-        });
-      }
-    });
-
-    return items;
-  }
-
-  moderateItems() {
-    const items = new ItemList();
-
-    items.add('editPosts', {
-      label: 'Edit posts',
-      permission: 'discussion.editPosts'
-    });
-
-    items.add('deletePosts', {
-      label: 'Delete posts',
-      permission: 'discussion.deletePosts'
-    });
-
-    items.add('renameDiscussions', {
-      label: 'Rename discussions',
-      permission: 'discussion.rename'
-    });
-
-    items.add('deleteDiscussions', {
-      label: 'Delete discussions',
-      permission: 'discussion.delete'
-    });
-
-    return items;
-  }
-
-  scopeItems() {
-    const items = new ItemList();
-
-    items.add('global', {
-      label: 'Global',
-      render: item => {
-        if (item.setting) {
-          return item.setting();
-        } else if (item.permission) {
-          return PermissionDropdown.component(Object.assign({}, item));
-        }
-
-        return '';
-      }
-    });
-
-    return items;
-  }
-
-  scopeControlItems() {
-    return new ItemList();
-  }
-}

js/admin/src/components/PermissionGrid.tsx

@@ -0,0 +1,247 @@
+import Component from 'flarum/Component';
+import PermissionDropdown from 'flarum/components/PermissionDropdown';
+import SettingDropdown from 'flarum/components/SettingDropdown';
+import Button from 'flarum/components/Button';
+import ItemList from 'flarum/utils/ItemList';
+import icon from 'flarum/helpers/icon';
+
+export default class PermissionGrid extends Component {
+  init() {
+    this.permissions = this.permissionItems().toArray();
+  }
+
+  view() {
+    const scopes = this.scopeItems().toArray();
+
+    const permissionCells = permission => {
+      return scopes.map(scope => (
+        <td>
+          {scope.render(permission)}
+        </td>
+      ));
+    };
+
+    return (
+      <table className="PermissionGrid">
+        <thead>
+          <tr>
+            <td></td>
+            {scopes.map(scope => (
+              <th>
+                {scope.label}{' '}
+                {scope.onremove ? Button.component({icon: 'times', className: 'Button Button--text PermissionGrid-removeScope', onclick: scope.onremove}) : ''}
+              </th>
+            ))}
+            <th>{this.scopeControlItems().toArray()}</th>
+          </tr>
+        </thead>
+        {this.permissions.map(section => (
+          <tbody>
+            <tr className="PermissionGrid-section">
+              <th>{section.label}</th>
+              {permissionCells(section)}
+              <td/>
+            </tr>
+            {section.children.map(child => (
+              <tr className="PermissionGrid-child">
+                <th>{icon(child.icon)}{child.label}</th>
+                {permissionCells(child)}
+                <td/>
+              </tr>
+            ))}
+          </tbody>
+        ))}
+      </table>
+    );
+  }
+
+  permissionItems() {
+    const items = new ItemList();
+
+    items.add('view', {
+      label: app.translator.trans('core.admin.permissions.read_heading'),
+      children: this.viewItems().toArray()
+    }, 100);
+
+    items.add('start', {
+      label: app.translator.trans('core.admin.permissions.create_heading'),
+      children: this.startItems().toArray()
+    }, 90);
+
+    items.add('reply', {
+      label: app.translator.trans('core.admin.permissions.participate_heading'),
+      children: this.replyItems().toArray()
+    }, 80);
+
+    items.add('moderate', {
+      label: app.translator.trans('core.admin.permissions.moderate_heading'),
+      children: this.moderateItems().toArray()
+    }, 70);
+
+    return items;
+  }
+
+  viewItems() {
+    const items = new ItemList();
+
+    items.add('viewDiscussions', {
+      icon: 'eye',
+      label: app.translator.trans('core.admin.permissions.view_discussions_label'),
+      permission: 'viewDiscussions',
+      allowGuest: true
+    }, 100);
+
+    items.add('viewUserList', {
+      icon: 'users',
+      label: app.translator.trans('core.admin.permissions.view_user_list_label'),
+      permission: 'viewUserList',
+      allowGuest: true
+    }, 100);
+
+    items.add('signUp', {
+      icon: 'user-plus',
+      label: app.translator.trans('core.admin.permissions.sign_up_label'),
+      setting: () => SettingDropdown.component({
+        key: 'allow_sign_up',
+        options: [
+          {value: '1', label: app.translator.trans('core.admin.permissions_controls.signup_open_button')},
+          {value: '0', label: app.translator.trans('core.admin.permissions_controls.signup_closed_button')}
+        ]
+      })
+    }, 90);
+
+    return items;
+  }
+
+  startItems() {
+    const items = new ItemList();
+
+    items.add('start', {
+      icon: 'edit',
+      label: app.translator.trans('core.admin.permissions.start_discussions_label'),
+      permission: 'startDiscussion'
+    }, 100);
+
+    items.add('allowRenaming', {
+      icon: 'i-cursor',
+      label: app.translator.trans('core.admin.permissions.allow_renaming_label'),
+      setting: () => {
+        const minutes = parseInt(app.data.settings.allow_renaming, 10);
+
+        return SettingDropdown.component({
+          defaultLabel: minutes
+            ? app.translator.transChoice('core.admin.permissions_controls.allow_some_minutes_button', minutes, {count: minutes})
+            : app.translator.trans('core.admin.permissions_controls.allow_indefinitely_button'),
+          key: 'allow_renaming',
+          options: [
+            {value: '-1', label: app.translator.trans('core.admin.permissions_controls.allow_indefinitely_button')},
+            {value: '10', label: app.translator.trans('core.admin.permissions_controls.allow_ten_minutes_button')},
+            {value: 'reply', label: app.translator.trans('core.admin.permissions_controls.allow_until_reply_button')}
+          ]
+        });
+      }
+    }, 90);
+
+    return items;
+  }
+
+  replyItems() {
+    const items = new ItemList();
+
+    items.add('reply', {
+      icon: 'reply',
+      label: app.translator.trans('core.admin.permissions.reply_to_discussions_label'),
+      permission: 'discussion.reply'
+    }, 100);
+
+    items.add('allowPostEditing', {
+      icon: 'pencil',
+      label: app.translator.trans('core.admin.permissions.allow_post_editing_label'),
+      setting: () => {
+        const minutes = parseInt(app.data.settings.allow_post_editing, 10);
+
+        return SettingDropdown.component({
+          defaultLabel: minutes
+            ? app.translator.transChoice('core.admin.permissions_controls.allow_some_minutes_button', minutes, {count: minutes})
+            : app.translator.trans('core.admin.permissions_controls.allow_indefinitely_button'),
+          key: 'allow_post_editing',
+          options: [
+            {value: '-1', label: app.translator.trans('core.admin.permissions_controls.allow_indefinitely_button')},
+            {value: '10', label: app.translator.trans('core.admin.permissions_controls.allow_ten_minutes_button')},
+            {value: 'reply', label: app.translator.trans('core.admin.permissions_controls.allow_until_reply_button')}
+          ]
+        });
+      }
+    }, 90);
+
+    return items;
+  }
+
+  moderateItems() {
+    const items = new ItemList();
+
+    items.add('viewIpsPosts', {
+      icon: 'bullseye',
+      label: app.translator.trans('core.admin.permissions.view_post_ips_label'),
+      permission: 'discussion.viewIpsPosts'
+    }, 110);
+
+    items.add('renameDiscussions', {
+      icon: 'i-cursor',
+      label: app.translator.trans('core.admin.permissions.rename_discussions_label'),
+      permission: 'discussion.rename'
+    }, 100);
+
+    items.add('hideDiscussions', {
+      icon: 'trash-o',
+      label: app.translator.trans('core.admin.permissions.delete_discussions_label'),
+      permission: 'discussion.hide'
+    }, 90);
+
+    items.add('deleteDiscussions', {
+      icon: 'times',
+      label: app.translator.trans('core.admin.permissions.delete_discussions_forever_label'),
+      permission: 'discussion.delete'
+    }, 80);
+
+    items.add('editPosts', {
+      icon: 'pencil',
+      label: app.translator.trans('core.admin.permissions.edit_and_delete_posts_label'),
+      permission: 'discussion.editPosts'
+    }, 70);
+
+    items.add('deletePosts', {
+      icon: 'times',
+      label: app.translator.trans('core.admin.permissions.delete_posts_forever_label'),
+      permission: 'discussion.deletePosts'
+    }, 60);
+
+    return items;
+  }
+
+  scopeItems() {
+    const items = new ItemList();
+
+    items.add('global', {
+      label: app.translator.trans('core.admin.permissions.global_heading'),
+      render: item => {
+        if (item.setting) {
+          return item.setting();
+        } else if (item.permission) {
+          return PermissionDropdown.component({
+            permission: item.permission,
+            allowGuest: item.allowGuest
+          });
+        }
+
+        return '';
+      }
+    }, 100);
+
+    return items;
+  }
+
+  scopeControlItems() {
+    return new ItemList();
+  }
+}

js/admin/src/components/PermissionsPage.tsx

@@ -1,11 +1,11 @@
-import Component from 'flarum/Component';
+import Page from 'flarum/components/Page';
 import GroupBadge from 'flarum/components/GroupBadge';
 import EditGroupModal from 'flarum/components/EditGroupModal';
 import Group from 'flarum/models/Group';
 import icon from 'flarum/helpers/icon';
 import PermissionGrid from 'flarum/components/PermissionGrid';
 
-export default class PermissionsPage extends Component {
+export default class PermissionsPage extends Page {
   view() {
     return (
       <div className="PermissionsPage">
@@ -25,7 +25,7 @@ export default class PermissionsPage extends Component {
               ))}
             <button className="Button Group Group--add" onclick={() => app.modal.show(new EditGroupModal())}>
               {icon('plus', {className: 'Group-icon'})}
-              <span className="Group-name">New Group</span>
+              <span className="Group-name">{app.translator.trans('core.admin.permissions.new_group_button')}</span>
             </button>
           </div>
         </div>

js/admin/src/components/SessionDropdown.tsx

@@ -43,7 +43,7 @@ export default class SessionDropdown extends Dropdown {
     items.add('logOut',
       Button.component({
         icon: 'sign-out',
-        children: app.trans('core.log_out'),
+        children: app.translator.trans('core.admin.header.log_out_button'),
         onclick: app.session.logout.bind(app.session)
       }),
       -100

js/admin/src/components/SettingDropdown.tsx

@@ -1,23 +1,23 @@
 import SelectDropdown from 'flarum/components/SelectDropdown';
 import Button from 'flarum/components/Button';
-import saveConfig from 'flarum/utils/saveConfig';
+import saveSettings from 'flarum/utils/saveSettings';
 
-export default class ConfigDropdown extends SelectDropdown {
+export default class SettingDropdown extends SelectDropdown {
   static initProps(props) {
     super.initProps(props);
 
-    props.className = 'ConfigDropdown';
+    props.className = 'SettingDropdown';
     props.buttonClassName = 'Button Button--text';
     props.caretIcon = 'caret-down';
     props.defaultLabel = 'Custom';
 
     props.children = props.options.map(({value, label}) => {
-      const active = app.config[props.key] === value;
+      const active = app.data.settings[props.key] === value;
 
       return Button.component({
         children: label,
         icon: active ? 'check' : true,
-        onclick: saveConfig.bind(this, {[props.key]: value}),
+        onclick: saveSettings.bind(this, {[props.key]: value}),
         active
       });
     });

js/admin/src/components/SettingsModal.tsx

@@ -0,0 +1,79 @@
+import Modal from 'flarum/components/Modal';
+import Button from 'flarum/components/Button';
+import saveSettings from 'flarum/utils/saveSettings';
+
+export default class SettingsModal extends Modal {
+  init() {
+    this.settings = {};
+    this.loading = false;
+  }
+
+  form() {
+    return '';
+  }
+
+  content() {
+    return (
+      <div className="Modal-body">
+        <div className="Form">
+          {this.form()}
+
+          <div className="Form-group">
+            {this.submitButton()}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  submitButton() {
+    return (
+      <Button
+        type="submit"
+        className="Button Button--primary"
+        loading={this.loading}
+        disabled={!this.changed()}>
+        {app.translator.trans('core.admin.settings.submit_button')}
+      </Button>
+    );
+  }
+
+  setting(key, fallback = '') {
+    this.settings[key] = this.settings[key] || m.prop(app.data.settings[key] || fallback);
+
+    return this.settings[key];
+  }
+
+  dirty() {
+    const dirty = {};
+
+    Object.keys(this.settings).forEach(key => {
+      const value = this.settings[key]();
+
+      if (value !== app.data.settings[key]) {
+        dirty[key] = value;
+      }
+    });
+
+    return dirty;
+  }
+
+  changed() {
+    return Object.keys(this.dirty()).length;
+  }
+
+  onsubmit(e) {
+    e.preventDefault();
+
+    this.loading = true;
+
+    saveSettings(this.dirty()).then(
+      this.onsaved.bind(this),
+      this.loaded.bind(this)
+    );
+  }
+
+  onsaved() {
+    this.hide();
+  }
+}

js/admin/src/components/UploadImageButton.tsx

@@ -0,0 +1,97 @@
+import Button from 'flarum/components/Button';
+
+export default class UploadImageButton extends Button {
+  init() {
+    this.loading = false;
+  }
+
+  view() {
+    this.props.loading = this.loading;
+    this.props.className = (this.props.className || '') + ' Button';
+
+    if (app.data.settings[this.props.name + '_path']) {
+      this.props.onclick = this.remove.bind(this);
+      this.props.children = app.translator.trans('core.admin.upload_image.remove_button');
+
+      return (
+        <div>
+          <p><img src={app.forum.attribute(this.props.name+'Url')} alt=""/></p>
+          <p>{super.view()}</p>
+        </div>
+      );
+    } else {
+      this.props.onclick = this.upload.bind(this);
+      this.props.children = app.translator.trans('core.admin.upload_image.upload_button');
+    }
+
+    return super.view();
+  }
+
+  /**
+   * Prompt the user to upload an image.
+   */
+  upload() {
+    if (this.loading) return;
+
+    const $input = $('<input type="file">');
+
+    $input.appendTo('body').hide().click().on('change', e => {
+      const data = new FormData();
+      data.append(this.props.name, $(e.target)[0].files[0]);
+
+      this.loading = true;
+      m.redraw();
+
+      app.request({
+        method: 'POST',
+        url: this.resourceUrl(),
+        serialize: raw => raw,
+        data
+      }).then(
+        this.success.bind(this),
+        this.failure.bind(this)
+      );
+    });
+  }
+
+  /**
+   * Remove the logo.
+   */
+  remove() {
+    this.loading = true;
+    m.redraw();
+
+    app.request({
+      method: 'DELETE',
+      url: this.resourceUrl()
+    }).then(
+      this.success.bind(this),
+      this.failure.bind(this)
+    );
+  }
+
+  resourceUrl() {
+    return app.forum.attribute('apiUrl') + '/' + this.props.name;
+  }
+
+  /**
+   * After a successful upload/removal, reload the page.
+   *
+   * @param {Object} response
+   * @protected
+   */
+  success(response) {
+    window.location.reload();
+  }
+
+  /**
+   * If upload/removal fails, stop loading.
+   *
+   * @param {Object} response
+   * @protected
+   */
+  failure(response) {
+    this.loading = false;
+    m.redraw();
+  }
+}

js/admin/src/index.ts

@@ -0,0 +1,9 @@
+import AdminApplication from './AdminApplication';
+
+export const app = new AdminApplication();
+
+export const extensions = [];
+
+// Export public API
+// export { default as Extend } from './Extend';
+// export { IndexPage, DicsussionList } from './components';

js/admin/src/initializers/boot.js

@@ -1,57 +0,0 @@
-/*global FastClick*/
-
-import ScrollListener from 'flarum/utils/ScrollListener';
-import Drawer from 'flarum/utils/Drawer';
-import mapRoutes from 'flarum/utils/mapRoutes';
-
-import Navigation from 'flarum/components/Navigation';
-import HeaderPrimary from 'flarum/components/HeaderPrimary';
-import HeaderSecondary from 'flarum/components/HeaderSecondary';
-import AdminNav from 'flarum/components/AdminNav';
-import ModalManager from 'flarum/components/ModalManager';
-import AlertManager from 'flarum/components/AlertManager';
-
-/**
- * The `boot` initializer boots up the admin app. It initializes some app
- * globals, mounts components to the page, and begins routing.
- *
- * @param {ForumApp} app
- */
-export default function boot(app) {
-  m.startComputation();
-
-  m.mount(document.getElementById('app-navigation'), Navigation.component({className: 'App-backControl', drawer: true}));
-  m.mount(document.getElementById('header-navigation'), Navigation.component());
-  m.mount(document.getElementById('header-primary'), HeaderPrimary.component());
-  m.mount(document.getElementById('header-secondary'), HeaderSecondary.component());
-  m.mount(document.getElementById('admin-navigation'), AdminNav.component());
-
-  app.drawer = new Drawer();
-  app.modal = m.mount(document.getElementById('modal'), ModalManager.component());
-  app.alerts = m.mount(document.getElementById('alerts'), AlertManager.component());
-  app.history = {
-    canGoBack: () => true,
-    backUrl: () => app.forum.attribute('baseUrl'),
-    back: function() {
-      window.location = this.backUrl();
-    }
-  };
-
-  m.route.mode = 'hash';
-  m.route(document.getElementById('content'), '/', mapRoutes(app.routes));
-
-  m.endComputation();
-
-  // Add a class to the body which indicates that the page has been scrolled
-  // down.
-  new ScrollListener(top => {
-    const $app = $('#app');
-    const offset = $app.offset().top;
-
-    $app
-      .toggleClass('affix', top >= offset)
-      .toggleClass('scrolled', top > offset);
-  }).start();
-
-  app.booted = true;
-}

js/admin/src/initializers/routes.js

@@ -1,20 +0,0 @@
-import DashboardPage from 'flarum/components/DashboardPage';
-import BasicsPage from 'flarum/components/BasicsPage';
-import PermissionsPage from 'flarum/components/PermissionsPage';
-import AppearancePage from 'flarum/components/AppearancePage';
-import ExtensionsPage from 'flarum/components/ExtensionsPage';
-
-/**
- * The `routes` initializer defines the admin app's routes.
- *
- * @param {App} app
- */
-export default function(app) {
-  app.routes = {
-    'dashboard': {path: '/', component: DashboardPage.component()},
-    'basics': {path: '/basics', component: BasicsPage.component()},
-    'permissions': {path: '/permissions', component: PermissionsPage.component()},
-    'appearance': {path: '/appearance', component: AppearancePage.component()},
-    'extensions': {path: '/extensions', component: ExtensionsPage.component()}
-  };
-}

js/admin/src/lib

@@ -0,0 +1 @@
+/Users/toby/Projects/Flarum/app/packages/core/js/lib

js/admin/src/routes.ts

@@ -0,0 +1,15 @@
+import DashboardPage from './components/DashboardPage';
+import BasicsPage from './components/BasicsPage';
+import PermissionsPage from './components/PermissionsPage';
+import AppearancePage from './components/AppearancePage';
+import ExtensionsPage from './components/ExtensionsPage';
+import MailPage from './components/MailPage';
+
+export default function(router) {
+  router.add('dashboard', '/', DashboardPage);
+  router.add('basics', '/basics', BasicsPage);
+  router.add('permissions', '/permissions', PermissionsPage);
+  router.add('appearance', '/appearance', AppearancePage);
+  router.add('extensions', '/extensions', ExtensionsPage);
+  router.add('mail', '/mail', MailPage);
+}

js/admin/src/utils/saveConfig.js

@@ -1,14 +0,0 @@
-export default function saveConfig(config) {
-  const oldConfig = JSON.parse(JSON.stringify(app.config));
-
-  Object.assign(app.config, config);
-
-  return app.request({
-    method: 'POST',
-    url: app.forum.attribute('apiUrl') + '/config',
-    data: {config}
-  }).catch(error => {
-    app.config = oldConfig;
-    throw error;
-  });
-}

js/admin/src/utils/saveSettings.tsx

@@ -0,0 +1,22 @@
+import flarum from 'flarum';
+
+/**
+ * Make a request to save the given settings to the database.
+ *
+ * @param {Object} settings
+ * @return {Promise}
+ */
+export default function saveSettings(settings) {
+  const oldSettings = JSON.parse(JSON.stringify(flarum.data.settings));
+
+  Object.assign(flarum.data.settings, settings);
+
+  return flarum.ajax.request({
+    method: 'POST',
+    url: flarum.forum.apiUrl + '/settings',
+    data: settings
+  }).catch(error => {
+    flarum.data.settings = oldSettings;
+    throw error;
+  });
+}

js/admin/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist/",
+    "sourceMap": true,
+    "noImplicitAny": false,
+    "module": "commonjs",
+    "target": "es5",
+    "jsx": "react",
+    "jsxFactory": "m",
+    "declaration": true,
+    "lib": ["dom", "es2015"],
+    "types": [
+      "mithril",
+      "classnames"
+    ]
+  },
+  "include": [
+    "./src/**/*"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

js/admin/webpack.config.js

@@ -0,0 +1,30 @@
+const path = require('path');
+const { CheckerPlugin } = require('awesome-typescript-loader');
+
+module.exports = {
+  entry: path.resolve(__dirname, 'src/index.tsx'),
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js', '.jsx']
+  },
+  devtool: 'source-map',
+  output: {
+    filename: 'bundle.js',
+    path: path.resolve(__dirname, 'dist'),
+    library: 'flarum',
+    libraryTarget: 'var'
+  },
+  module: {
+    loaders: [
+      {
+        test: /\.tsx?$/,
+        loader: 'awesome-typescript-loader'
+      }
+    ]
+  },
+  plugins: [
+    new CheckerPlugin()
+  ],
+  externals: {
+    mithril: 'm'
+  }
+};

js/bower.json

@@ -1,15 +0,0 @@
-{
-  "name": "flarum",
-  "dependencies": {
-    "jquery": "~2.1.3",
-    "jquery.hotkeys": "jeresig/jquery.hotkeys#0.2.0",
-    "bootstrap": "~3.3.2",
-    "spin.js": "~2.0.1",
-    "moment": "~2.8.4",
-    "color-thief": "v2.0",
-    "mithril": "lhorie/mithril.js#next",
-    "es6-micro-loader": "caridy/es6-micro-loader#v0.2.1",
-    "fastclick": "~1.0.6",
-    "autolink": "*"
-  }
-}

js/forum/.gitignore

@@ -1,3 +1 @@
-node_modules
-mithril.js
-dist
+dist

js/forum/Gulpfile.js

@@ -1,37 +0,0 @@
-var gulp = require('flarum-gulp');
-
-var nodeDir = 'node_modules';
-var bowerDir = '../bower_components';
-
-gulp({
-  files: [
-    nodeDir + '/babel-core/external-helpers.js',
-
-    bowerDir + '/es6-micro-loader/dist/system-polyfill.js',
-
-    bowerDir + '/mithril/mithril.js',
-    bowerDir + '/jquery/dist/jquery.js',
-    bowerDir + '/jquery.hotkeys/jquery.hotkeys.js',
-    bowerDir + '/color-thief/js/color-thief.js',
-    bowerDir + '/moment/moment.js',
-    bowerDir + '/autolink/autolink.js',
-
-    bowerDir + '/bootstrap/js/affix.js',
-    bowerDir + '/bootstrap/js/dropdown.js',
-    bowerDir + '/bootstrap/js/modal.js',
-    bowerDir + '/bootstrap/js/tooltip.js',
-    bowerDir + '/bootstrap/js/transition.js',
-
-    bowerDir + '/spin.js/spin.js',
-    bowerDir + '/spin.js/jquery.spin.js',
-    bowerDir + '/fastclick/lib/fastclick.js'
-  ],
-  modules: {
-    'flarum': [
-      'src/**/*.js',
-      '../lib/**/*.js'
-    ]
-  },
-  externalHelpers: true,
-  outputFile: 'dist/app.js'
-});

js/forum/package.json

@@ -1,8 +0,0 @@
-{
-  "private": true,
-  "devDependencies": {
-    "gulp": "^3.8.11",
-    "flarum-gulp": "git+https://github.com/flarum/gulp.git",
-    "babel-core": "^5.0.0"
-  }
-}

js/forum/src/ForumApp.js

@@ -1,79 +0,0 @@
-import History from 'flarum/utils/History';
-import App from 'flarum/App';
-import Search from 'flarum/components/Search';
-import Composer from 'flarum/components/Composer';
-import ReplyComposer from 'flarum/components/ReplyComposer';
-import DiscussionPage from 'flarum/components/DiscussionPage';
-
-export default class ForumApp extends App {
-  constructor(...args) {
-    super(...args);
-
-    /**
-     * The app's history stack, which keeps track of which routes the user visits
-     * so that they can easily navigate back to the previous route.
-     *
-     * @type {History}
-     */
-    this.history = new History();
-
-    /**
-     * An object which controls the state of the page's side pane.
-     *
-     * @type {Pane}
-     */
-    this.pane = null;
-
-    /**
-     * The page's search component instance.
-     *
-     * @type {SearchBox}
-     */
-    this.search = new Search();
-
-    /**
-     * An object which controls the state of the page's drawer.
-     *
-     * @type {Drawer}
-     */
-    this.drawer = null;
-
-    /**
-     * A map of post types to their components.
-     *
-     * @type {Object}
-     */
-    this.postComponents = {};
-
-    /**
-     * A map of notification types to their components.
-     *
-     * @type {Object}
-     */
-    this.notificationComponents = {};
-  }
-
-  /**
-   * Check whether or not the user is currently composing a reply to a
-   * discussion.
-   *
-   * @param {Discussion} discussion
-   * @return {Boolean}
-   */
-  composingReplyTo(discussion) {
-    return this.composer.component instanceof ReplyComposer &&
-      this.composer.component.props.discussion === discussion &&
-      this.composer.position !== Composer.PositionEnum.HIDDEN;
-  }
-
-  /**
-   * Check whether or not the user is currently viewing a discussion.
-   *
-   * @param {Discussion} discussion
-   * @return {Boolean}
-   */
-  viewingDiscussion(discussion) {
-    return this.current instanceof DiscussionPage &&
-      this.current.discussion === discussion;
-  }
-}

js/forum/src/ForumApplication.tsx

@@ -0,0 +1,86 @@
+import Application from './lib/Application';
+import routes from './routes';
+import Search from './components/Search';
+
+export default class ForumApplication extends Application {
+  /**
+   * The page's search component instance.
+   *
+   * @type {SearchBox}
+   */
+  search = new Search();
+
+  /**
+   * A map of notification types to their components.
+   *
+   * @type {Object}
+   */
+  notificationComponents = {};
+
+  /**
+   * A map of post types to their components.
+   *
+   * @type {Object}
+   */
+  postComponents = {};
+
+  //app.postComponents.comment = CommentPost;
+  //app.postComponents.discussionRenamed = DiscussionRenamedPost;
+
+  // app.notificationComponents.discussionRenamed = DiscussionRenamedNotification;
+
+  /**
+   * @inheritdoc
+   */
+  registerDefaultRoutes(router) {
+    routes(router);
+  }
+
+  // TODO: work out where to put these helper functions
+  // /**
+  //  * Check whether or not the user is currently composing a reply to a
+  //  * discussion.
+  //  *
+  //  * @param {Discussion} discussion
+  //  * @return {Boolean}
+  //  */
+  // composingReplyTo(discussion) {
+  //   return this.composer.component instanceof ReplyComposer &&
+  //     this.composer.component.props.discussion === discussion &&
+  //     this.composer.position !== Composer.PositionEnum.HIDDEN;
+  // }
+//
+  // /**
+  //  * Check whether or not the user is currently viewing a discussion.
+  //  *
+  //  * @param {Discussion} discussion
+  //  * @return {Boolean}
+  //  */
+  // viewingDiscussion(discussion) {
+  //   return this.current instanceof DiscussionPage &&
+  //     this.current.discussion === discussion;
+  // }
+//
+  // /**
+  //  * Callback for when an external authenticator (social login) action has
+  //  * completed.
+  //  *
+  //  * If the payload indicates that the user has been logged in, then the page
+  //  * will be reloaded. Otherwise, a SignUpModal will be opened, prefilled
+  //  * with the provided details.
+  //  *
+  //  * @param {Object} payload A dictionary of props to pass into the sign up
+  //  *     modal. A truthy `authenticated` prop indicates that the user has logged
+  //  *     in, and thus the page is reloaded.
+  //  * @public
+  //  */
+  // authenticationComplete(payload) {
+  //   if (payload.authenticated) {
+  //     window.location.reload();
+  //   } else {
+  //     const modal = new SignUpModal(payload);
+  //     this.modal.show(modal);
+  //     modal.$('[name=password]').focus();
+  //   }
+  // }
+}

js/forum/src/app.js

@@ -1,19 +0,0 @@
-import ForumApp from 'flarum/ForumApp';
-import store from 'flarum/initializers/store';
-import preload from 'flarum/initializers/preload';
-import routes from 'flarum/initializers/routes';
-import components from 'flarum/initializers/components';
-import humanTime from 'flarum/initializers/humanTime';
-import boot from 'flarum/initializers/boot';
-
-const app = new ForumApp();
-
-app.initializers.add('store', store);
-app.initializers.add('routes', routes);
-app.initializers.add('components', components);
-app.initializers.add('humanTime', humanTime);
-
-app.initializers.add('preload', preload, -100);
-app.initializers.add('boot', boot, -100);
-
-export default app;

js/forum/src/components/AvatarEditor.tsx

@@ -16,9 +16,7 @@ import LoadingIndicator from 'flarum/components/LoadingIndicator';
  * - `user`
  */
 export default class AvatarEditor extends Component {
-  constructor(...args) {
-    super(...args);
-
+  init() {
     /**
      * Whether or not an avatar upload is in progress.
      *
@@ -39,10 +37,11 @@ export default class AvatarEditor extends Component {
     return (
       <div className={'AvatarEditor Dropdown ' + this.props.className + (this.loading ? ' loading' : '')}>
         {avatar(user)}
-        <a className="Dropdown-toggle"
+        <a className={ user.avatarUrl() ? "Dropdown-toggle" : "Dropdown-toggle AvatarEditor--noAvatar" }
+          title={app.translator.trans('core.forum.user.avatar_upload_tooltip')}
           data-toggle="dropdown"
           onclick={this.quickUpload.bind(this)}>
-          {this.loading ? LoadingIndicator.component() : icon('pencil')}
+          {this.loading ? LoadingIndicator.component() : (user.avatarUrl() ? icon('pencil') : icon('plus-circle'))}
         </a>
         <ul className="Dropdown-menu Menu">
           {listItems(this.controlItems().toArray())}
@@ -62,7 +61,7 @@ export default class AvatarEditor extends Component {
     items.add('upload',
       Button.component({
         icon: 'upload',
-        children: app.trans('core.upload'),
+        children: app.translator.trans('core.forum.user.avatar_upload_button'),
         onclick: this.upload.bind(this)
       })
     );
@@ -70,7 +69,7 @@ export default class AvatarEditor extends Component {
     items.add('remove',
       Button.component({
         icon: 'times',
-        children: app.trans('core.remove'),
+        children: app.translator.trans('core.forum.user.avatar_remove_button'),
         onclick: this.remove.bind(this)
       })
     );
@@ -163,7 +162,8 @@ export default class AvatarEditor extends Component {
    * @param {Object} response
    * @protected
    */
-  failure() {
+  failure(response) {
     this.loading = false;
+    m.redraw();
   }
 }

js/forum/src/components/ChangeEmailModal.tsx

@@ -6,8 +6,8 @@ import Button from 'flarum/components/Button';
  * to change their email address.
  */
 export default class ChangeEmailModal extends Modal {
-  constructor(...args) {
-    super(...args);
+  init() {
+    super.init();
 
     /**
      * Whether or not the email has been changed successfully.
@@ -22,6 +22,13 @@ export default class ChangeEmailModal extends Modal {
      * @type {function}
      */
     this.email = m.prop(app.session.user.email());
+
+    /**
+     * The value of the password input.
+     *
+     * @type {function}
+     */
+    this.password = m.prop('');
   }
 
   className() {
@@ -29,21 +36,19 @@ export default class ChangeEmailModal extends Modal {
   }
 
   title() {
-    return app.trans('core.change_email');
+    return app.translator.trans('core.forum.change_email.title');
   }
 
   content() {
     if (this.success) {
-      const emailProviderName = this.email().split('@')[1];
-
       return (
         <div className="Modal-body">
           <div className="Form Form--centered">
-            <p className="helpText">{app.trans('core.confirmation_email_sent', {email: <strong>{this.email()}</strong>})}</p>
+            <p className="helpText">{app.translator.trans('core.forum.change_email.confirmation_message', {email: <strong>{this.email()}</strong>})}</p>
             <div className="Form-group">
-              <a href={'http://' + emailProviderName} className="Button Button--primary Button--block">
-                {app.trans('core.go_to', {location: emailProviderName})}
-              </a>
+              <Button className="Button Button--primary Button--block" onclick={this.hide.bind(this)}>
+                {app.translator.trans('core.forum.change_email.dismiss_button')}
+              </Button>
             </div>
           </div>
         </div>
@@ -56,8 +61,13 @@ export default class ChangeEmailModal extends Modal {
           <div className="Form-group">
             <input type="email" name="email" className="FormControl"
               placeholder={app.session.user.email()}
-              value={this.email()}
-              onchange={m.withAttr('value', this.email)}
+              bidi={this.email}
+              disabled={this.loading}/>
+          </div>
+          <div className="Form-group">
+            <input type="password" name="password" className="FormControl"
+              placeholder={app.translator.trans('core.forum.change_email.confirm_password_placeholder')}
+              bidi={this.password}
               disabled={this.loading}/>
           </div>
           <div className="Form-group">
@@ -65,7 +75,7 @@ export default class ChangeEmailModal extends Modal {
               className: 'Button Button--primary Button--block',
               type: 'submit',
               loading: this.loading,
-              children: app.trans('core.save_changes')
+              children: app.translator.trans('core.forum.change_email.submit_button')
             })}
           </div>
         </div>
@@ -83,17 +93,24 @@ export default class ChangeEmailModal extends Modal {
       return;
     }
 
+    const oldEmail = app.session.user.email();
+
     this.loading = true;
 
-    app.session.user.save({email: this.email()}).then(
-      () => {
-        this.loading = false;
-        this.success = true;
-        m.redraw();
-      },
-      () => {
-        this.loading = false;
-      }
-    );
+    app.session.user.save({email: this.email()}, {
+      errorHandler: this.onerror.bind(this),
+      meta: {password: this.password()}
+    })
+      .then(() => this.success = true)
+      .catch(() => {})
+      .then(this.loaded.bind(this));
+  }
+
+  onerror(error) {
+    if (error.status === 401) {
+      error.alert.props.children = app.translator.trans('core.forum.change_email.incorrect_password_message');
+    }
+
+    super.onerror(error);
   }
 }

js/forum/src/components/ChangePasswordModal.tsx

@@ -11,20 +11,20 @@ export default class ChangePasswordModal extends Modal {
   }
 
   title() {
-    return app.trans('core.change_password');
+    return app.translator.trans('core.forum.change_password.title');
   }
 
   content() {
     return (
       <div className="Modal-body">
         <div className="Form Form--centered">
-          <p className="helpText">{app.trans('core.change_password_help')}</p>
+          <p className="helpText">{app.translator.trans('core.forum.change_password.text')}</p>
           <div className="Form-group">
             {Button.component({
               className: 'Button Button--primary Button--block',
               type: 'submit',
               loading: this.loading,
-              children: app.trans('core.send_password_reset_email')
+              children: app.translator.trans('core.forum.change_password.send_button')
             })}
           </div>
         </div>
@@ -42,8 +42,8 @@ export default class ChangePasswordModal extends Modal {
       url: app.forum.attribute('apiUrl') + '/forgot',
       data: {email: app.session.user.email()}
     }).then(
-      () => this.hide(),
-      () => this.loading = false
+      this.hide.bind(this),
+      this.loaded.bind(this)
     );
   }
 }

js/forum/src/components/CommentPost.tsx

@@ -6,7 +6,6 @@ import PostUser from 'flarum/components/PostUser';
 import PostMeta from 'flarum/components/PostMeta';
 import PostEdited from 'flarum/components/PostEdited';
 import EditPostComposer from 'flarum/components/EditPostComposer';
-import Composer from 'flarum/components/Composer';
 import ItemList from 'flarum/utils/ItemList';
 import listItems from 'flarum/helpers/listItems';
 import Button from 'flarum/components/Button';
@@ -21,8 +20,8 @@ import Button from 'flarum/components/Button';
  * - `post`
  */
 export default class CommentPost extends Post {
-  constructor(...args) {
-    super(...args);
+  init() {
+    super.init();
 
     /**
      * If the post has been hidden, then this flag determines whether or not its
@@ -42,16 +41,17 @@ export default class CommentPost extends Post {
   }
 
   content() {
-    return [
-      <header className="Post-header"><ul>{listItems(this.headerItems().toArray())}</ul></header>,
+    // Note: we avoid using JSX for the <ul> below because it results in some
+    // weirdness in Mithril.js 0.1.x (see flarum/core#975). This workaround can
+    // be reverted when we upgrade to Mithril 1.0.
+    return super.content().concat([
+      <header className="Post-header">{m('ul', listItems(this.headerItems().toArray()))}</header>,
       <div className="Post-body">
         {this.isEditing()
           ? <div className="Post-preview" config={this.configPreview.bind(this)}/>
           : m.trust(this.props.post.contentHtml())}
-      </div>,
-      <footer className="Post-footer"><ul>{listItems(this.footerItems().toArray())}</ul></footer>,
-      <aside className="Post-actions"><ul>{listItems(this.actionItems().toArray())}</ul></aside>
-    ];
+      </div>
+    ]);
   }
 
   config(isInitialized, context) {
@@ -59,62 +59,36 @@ export default class CommentPost extends Post {
 
     const contentHtml = this.isEditing() ? '' : this.props.post.contentHtml();
 
+    // If the post content has changed since the last render, we'll run through
+    // all of the <script> tags in the content and evaluate them. This is
+    // necessary because TextFormatter outputs them for e.g. syntax highlighting.
     if (context.contentHtml !== contentHtml) {
-      if (typeof hljs === 'undefined') {
-        this.loadHljs();
-      } else {
-        this.$('pre code').each(function(i, elm) {
-          hljs.highlightBlock(elm);
-        });
-      }
+      this.$('.Post-body script').each(function() {
+        eval.call(window, $(this).text());
+      });
     }
 
     context.contentHtml = contentHtml;
   }
 
-  /**
-   * Load the highlight.js library and initialize highlighting when done.
-   *
-   * @private
-   */
-  loadHljs() {
-    const head = document.getElementsByTagName('head')[0];
-
-    const stylesheet = document.createElement('link');
-    stylesheet.type = 'text/css';
-    stylesheet.rel = 'stylesheet';
-    stylesheet.href = '//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.7/styles/default.min.css';
-    head.appendChild(stylesheet);
-
-    const script = document.createElement('script');
-    script.type = 'text/javascript';
-    script.onload = () => {
-      hljs._ = {};
-      hljs.initHighlighting();
-    };
-    script.async = true;
-    script.src = '//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.7/highlight.min.js';
-    head.appendChild(script);
-  }
-
   isEditing() {
     return app.composer.component instanceof EditPostComposer &&
-      app.composer.component.props.post === this.props.post &&
-      app.composer.position !== Composer.PositionEnum.MINIMIZED;
+      app.composer.component.props.post === this.props.post;
   }
 
   attrs() {
     const post = this.props.post;
+    const attrs = super.attrs();
 
-    return {
-      className: classList({
-        'CommentPost': true,
-        'Post--hidden': post.isHidden(),
-        'Post--edited': post.isEdited(),
-        'revealContent': this.revealContent,
-        'editing': this.isEditing()
-      })
-    };
+    attrs.className += ' '+classList({
+      'CommentPost': true,
+      'Post--hidden': post.isHidden(),
+      'Post--edited': post.isEdited(),
+      'revealContent': this.revealContent,
+      'editing': this.isEditing()
+    });
+
+    return attrs;
   }
 
   configPreview(element, isInitialized, context) {
@@ -176,22 +150,4 @@ export default class CommentPost extends Post {
 
     return items;
   }
-
-  /**
-   * Build an item list for the post's footer.
-   *
-   * @return {ItemList}
-   */
-  footerItems() {
-    return new ItemList();
-  }
-
-  /**
-   * Build an item list for the post's actions.
-   *
-   * @return {ItemList}
-   */
-  actionItems() {
-    return new ItemList();
-  }
 }

js/forum/src/components/Composer.tsx

@@ -11,9 +11,7 @@ import computed from 'flarum/utils/computed';
  * `show`, `hide`, `close`, `minimize`, `fullScreen`, and `exitFullScreen`.
  */
 class Composer extends Component {
-  constructor(...args) {
-    super(...args);
-
+  init() {
     /**
      * The composer's current position.
      *
@@ -21,13 +19,6 @@ class Composer extends Component {
      */
     this.position = Composer.PositionEnum.HIDDEN;
 
-    /**
-     * The composer's previous position.
-     *
-     * @type {Composer.PositionEnum}
-     */
-    this.oldPosition = null;
-
     /**
      * The composer's intended height, which can be modified by the user
      * (by dragging the composer handle).
@@ -36,6 +27,13 @@ class Composer extends Component {
      */
     this.height = null;
 
+    /**
+     * Whether or not the composer currently has focus.
+     *
+     * @type {Boolean}
+     */
+    this.active = false;
+
     /**
      * Computed the composer's current height, based on the intended height, and
      * the composer's current state. This will be applied to the composer's
@@ -61,20 +59,19 @@ class Composer extends Component {
 
   view() {
     const classes = {
+      'normal': this.position === Composer.PositionEnum.NORMAL,
       'minimized': this.position === Composer.PositionEnum.MINIMIZED,
-      'fullScreen': this.position === Composer.PositionEnum.FULLSCREEN
+      'fullScreen': this.position === Composer.PositionEnum.FULLSCREEN,
+      'active': this.active
     };
-    classes.visible = this.position === Composer.PositionEnum.NORMAL || classes.minimized || classes.fullScreen;
+    classes.visible = classes.normal || classes.minimized || classes.fullScreen;
 
     // If the composer is minimized, tell the composer's content component that
     // it shouldn't let the user interact with it. Set up a handler so that if
     // the content IS clicked, the composer will be shown.
     if (this.component) this.component.props.disabled = classes.minimized;
 
-    const showIfMinimized = () => {
-      if (this.position === Composer.PositionEnum.MINIMIZED) this.show();
-      m.redraw.strategy('none');
-    };
+    const showIfMinimized = this.position === Composer.PositionEnum.MINIMIZED ? this.show.bind(this) : undefined;
 
     return (
       <div className={'Composer ' + classList(classes)}>
@@ -88,7 +85,11 @@ class Composer extends Component {
   }
 
   config(isInitialized, context) {
-    this.updateHeight();
+    let defaultHeight;
+
+    if (!isInitialized) {
+      defaultHeight = this.$().height();
+    }
 
     if (isInitialized) return;
 
@@ -99,12 +100,15 @@ class Composer extends Component {
     // Initialize the composer's intended height based on what the user has set
     // it at previously, or otherwise the composer's default height. After that,
     // we'll hide the composer.
-    this.height = localStorage.getItem('composerHeight') || this.$().height();
-    this.$().hide();
+    this.height = localStorage.getItem('composerHeight') || defaultHeight;
+    this.$().hide().css('bottom', -this.height);
 
     // Whenever any of the inputs inside the composer are have focus, we want to
     // add a class to the composer to draw attention to it.
-    this.$().on('focus blur', ':input', e => this.$().toggleClass('active', e.type === 'focusin'));
+    this.$().on('focus blur', ':input', e => {
+      this.active = e.type === 'focusin';
+      m.redraw();
+    });
 
     // When the escape key is pressed on any inputs, close the composer.
     this.$().on('keydown', ':input', 'esc', () => this.close());
@@ -113,7 +117,7 @@ class Composer extends Component {
     // component a chance to scream at the user to make sure they don't
     // unintentionally lose any contnet.
     window.onbeforeunload = () => {
-      return (this.component && this.component.preventExit()) || null;
+      return (this.component && this.component.preventExit()) || undefined;
     };
 
     const handlers = {};
@@ -146,7 +150,7 @@ class Composer extends Component {
     const composer = this;
 
     $(element).css('cursor', 'row-resize')
-      .bind('dragstart mousedown', e => e.preventDefault())
+      .on('dragstart mousedown', e => e.preventDefault())
       .mousedown(function(e) {
         composer.mouseStart = e.clientY;
         composer.heightStart = composer.$().height();
@@ -198,19 +202,17 @@ class Composer extends Component {
    * of any flexible elements inside the composer's body.
    */
   updateHeight() {
-    // TODO: update this in a way that is independent of the TextEditor being
-    // present.
     const height = this.computedHeight();
-    const $flexible = this.$('.TextEditor-flexible');
+    const $flexible = this.$('.Composer-flexible');
 
     this.$().height(height);
 
     if ($flexible.length) {
       const headerHeight = $flexible.offset().top - this.$().offset().top;
       const paddingBottom = parseInt($flexible.css('padding-bottom'), 10);
-      const footerHeight = this.$('.TextEditor-controls').outerHeight(true);
+      const footerHeight = this.$('.Composer-footer').outerHeight(true);
 
-      $flexible.height(height - headerHeight - paddingBottom - footerHeight);
+      $flexible.height(this.$().outerHeight() - headerHeight - paddingBottom - footerHeight);
     }
   }
 
@@ -221,99 +223,27 @@ class Composer extends Component {
    */
   updateBodyPadding() {
     const visible = this.position !== Composer.PositionEnum.HIDDEN &&
-                    this.position !== Composer.PositionEnum.MINIMIZED;
+      this.position !== Composer.PositionEnum.MINIMIZED &&
+      this.$().css('position') !== 'absolute';
 
     const paddingBottom = visible
       ? this.computedHeight() - parseInt($('#app').css('padding-bottom'), 10)
       : 0;
+
     $('#content').css({paddingBottom});
   }
 
   /**
-   * Update (and animate) the DOM to reflect the composer's current state.
+   * Determine whether or not the Composer is covering the screen.
+   *
+   * This will be true if the Composer is in full-screen mode on desktop, or
+   * if the Composer is positioned absolutely as on mobile devices.
+   *
+   * @return {Boolean}
+   * @public
    */
-  update() {
-    // Before we redraw the composer to its new state, we need to save the
-    // current height of the composer, as well as the page's scroll position, so
-    // that we can smoothly transition from the old to the new state.
-    const $composer = this.$().stop(true);
-    const oldHeight = $composer.is(':visible') ? $composer.outerHeight() : 0;
-    const scrollTop = $(window).scrollTop();
-
-    m.redraw(true);
-
-    // Now that we've redrawn and the composer's DOM has been updated, we want
-    // to update the composer's height. Once we've done that, we'll capture the
-    // real value to use as the end point for our animation later on.
-    $composer.show();
-    this.updateHeight();
-
-    const newHeight = $composer.outerHeight();
-
-    switch (this.position) {
-      case Composer.PositionEnum.NORMAL:
-        // If the composer is being opened, we will make it visible and animate
-        // it growing/sliding up from the bottom of the viewport. Or if the user
-        // has just exited fullscreen mode, we will simply tell the content to
-        // take focus.
-        if (this.oldPosition !== Composer.PositionEnum.FULLSCREEN) {
-          $composer.show()
-            .css({height: oldHeight})
-            .animate({bottom: 0, height: newHeight}, 'fast', this.component.focus.bind(this.component));
-
-          if ($composer.css('position') === 'absolute') {
-            $composer.css('top', $(window).scrollTop());
-
-            this.$backdrop = $('<div/>')
-              .addClass('composer-backdrop')
-              .appendTo('body');
-          }
-        } else {
-          this.component.focus();
-        }
-        break;
-
-      case Composer.PositionEnum.MINIMIZED:
-        // If the composer has been minimized, we will animate it shrinking down
-        // to its new smaller size.
-        $composer.css({top: 'auto', height: oldHeight})
-          .animate({height: newHeight}, 'fast');
-
-        if (this.$backdrop) this.$backdrop.remove();
-        break;
-
-      case Composer.PositionEnum.HIDDEN:
-        // If the composer has been hidden, then we will animate it sliding down
-        // beyond the edge of the viewport. Once the animation is complete, we
-        // un-draw the composer's component.
-        $composer.css({top: 'auto', height: oldHeight})
-          .animate({bottom: -newHeight}, 'fast', () => {
-            $composer.hide();
-            this.clear();
-            m.redraw();
-          });
-
-        if (this.$backdrop) this.$backdrop.remove();
-        break;
-
-      case Composer.PositionEnum.FULLSCREEN:
-        this.component.focus();
-        break;
-
-      default:
-        // no default
-    }
-
-    // Provided the composer isn't in fullscreen mode, we'll want to update the
-    // body's padding to make sure all of the page's content can still be seen.
-    // Plus, we'll scroll back to where we were before the composer was opened,
-    // as its opening may have changed the content of the page.
-    if (this.position !== Composer.PositionEnum.FULLSCREEN) {
-      this.updateBodyPadding();
-      $('html, body').scrollTop(scrollTop);
-    }
-
-    this.oldPosition = this.position;
+  isFullScreen() {
+    return this.position === Composer.PositionEnum.FULLSCREEN || this.$().css('position') === 'absolute';
   }
 
   /**
@@ -363,20 +293,77 @@ class Composer extends Component {
     this.component = null;
   }
 
+  /**
+   * Animate the Composer into the given position.
+   *
+   * @param {Composer.PositionEnum} position
+   */
+  animateToPosition(position) {
+    // Before we redraw the composer to its new state, we need to save the
+    // current height of the composer, as well as the page's scroll position, so
+    // that we can smoothly transition from the old to the new state.
+    const oldPosition = this.position;
+    const $composer = this.$().stop(true);
+    const oldHeight = $composer.outerHeight();
+    const scrollTop = $(window).scrollTop();
+
+    this.position = position;
+
+    m.redraw(true);
+
+    // Now that we've redrawn and the composer's DOM has been updated, we want
+    // to update the composer's height. Once we've done that, we'll capture the
+    // real value to use as the end point for our animation later on.
+    $composer.show();
+    this.updateHeight();
+
+    const newHeight = $composer.outerHeight();
+
+    if (oldPosition === Composer.PositionEnum.HIDDEN) {
+      $composer.css({bottom: -newHeight, height: newHeight});
+    } else {
+      $composer.css({height: oldHeight});
+    }
+
+    $composer.animate({bottom: 0, height: newHeight}, 'fast', () => this.component.focus());
+
+    this.updateBodyPadding();
+    $(window).scrollTop(scrollTop);
+  }
+
+  /**
+   * Show the Composer backdrop.
+   */
+  showBackdrop() {
+    this.$backdrop = $('<div/>')
+      .addClass('composer-backdrop')
+      .appendTo('body');
+  }
+
+  /**
+   * Hide the Composer backdrop.
+   */
+  hideBackdrop() {
+    if (this.$backdrop) this.$backdrop.remove();
+  }
+
   /**
    * Show the composer.
    *
    * @public
    */
   show() {
-    // If the composer is hidden or minimized, we'll need to update its
-    // position. Otherwise, if the composer is already showing (whether it's
-    // fullscreen or not), we can leave it as is.
-    if ([Composer.PositionEnum.MINIMIZED, Composer.PositionEnum.HIDDEN].indexOf(this.position) !== -1) {
-      this.position = Composer.PositionEnum.NORMAL;
+    if (this.position === Composer.PositionEnum.NORMAL || this.position === Composer.PositionEnum.FULLSCREEN) {
+      return;
     }
 
-    this.update();
+    this.animateToPosition(Composer.PositionEnum.NORMAL);
+
+    if (this.isFullScreen()) {
+      this.$().css('top', $(window).scrollTop());
+      this.showBackdrop();
+      this.component.focus();
+    }
   }
 
   /**
@@ -385,8 +372,20 @@ class Composer extends Component {
    * @public
    */
   hide() {
-    this.position = Composer.PositionEnum.HIDDEN;
-    this.update();
+    const $composer = this.$();
+
+    // Animate the composer sliding down off the bottom edge of the viewport.
+    // Only when the animation is completed, update the Composer state flag and
+    // other elements on the page.
+    $composer.stop(true).animate({bottom: -$composer.height()}, 'fast', () => {
+      this.position = Composer.PositionEnum.HIDDEN;
+      this.clear();
+      m.redraw();
+
+      $composer.hide();
+      this.hideBackdrop();
+      this.updateBodyPadding();
+    });
   }
 
   /**
@@ -407,10 +406,12 @@ class Composer extends Component {
    * @public
    */
   minimize() {
-    if (this.position !== Composer.PositionEnum.HIDDEN) {
-      this.position = Composer.PositionEnum.MINIMIZED;
-      this.update();
-    }
+    if (this.position === Composer.PositionEnum.HIDDEN) return;
+
+    this.animateToPosition(Composer.PositionEnum.MINIMIZED);
+
+    this.$().css('top', 'auto');
+    this.hideBackdrop();
   }
 
   /**
@@ -422,7 +423,9 @@ class Composer extends Component {
   fullScreen() {
     if (this.position !== Composer.PositionEnum.HIDDEN) {
       this.position = Composer.PositionEnum.FULLSCREEN;
-      this.update();
+      m.redraw();
+      this.updateHeight();
+      this.component.focus();
     }
   }
 
@@ -434,7 +437,9 @@ class Composer extends Component {
   exitFullScreen() {
     if (this.position === Composer.PositionEnum.FULLSCREEN) {
       this.position = Composer.PositionEnum.NORMAL;
-      this.update();
+      m.redraw();
+      this.updateHeight();
+      this.component.focus();
     }
   }
 
@@ -449,28 +454,28 @@ class Composer extends Component {
     if (this.position === Composer.PositionEnum.FULLSCREEN) {
       items.add('exitFullScreen', ComposerButton.component({
         icon: 'compress',
-        title: app.trans('core.exit_full_screen'),
+        title: app.translator.trans('core.forum.composer.exit_full_screen_tooltip'),
         onclick: this.exitFullScreen.bind(this)
       }));
     } else {
       if (this.position !== Composer.PositionEnum.MINIMIZED) {
         items.add('minimize', ComposerButton.component({
           icon: 'minus minimize',
-          title: app.trans('core.minimize'),
+          title: app.translator.trans('core.forum.composer.minimize_tooltip'),
           onclick: this.minimize.bind(this),
           itemClassName: 'App-backControl'
         }));
 
         items.add('fullScreen', ComposerButton.component({
           icon: 'expand',
-          title: app.trans('core.full_screen'),
+          title: app.translator.trans('core.forum.composer.full_screen_tooltip'),
           onclick: this.fullScreen.bind(this)
         }));
       }
 
       items.add('close', ComposerButton.component({
         icon: 'times',
-        title: app.trans('core.close'),
+        title: app.translator.trans('core.forum.composer.close_tooltip'),
         onclick: this.close.bind(this)
       }));
     }

js/forum/src/components/ComposerBody.tsx

@@ -22,9 +22,7 @@ import ItemList from 'flarum/utils/ItemList';
  * @abstract
  */
 export default class ComposerBody extends Component {
-  constructor(props) {
-    super(props);
-
+  init() {
     /**
      * Whether or not the component is loading.
      *
@@ -58,7 +56,7 @@ export default class ComposerBody extends Component {
     this.editor.props.disabled = this.loading;
 
     return (
-      <div className="ComposerBody">
+      <div className={'ComposerBody ' + (this.props.className || '')}>
         {avatar(this.props.user, {className: 'ComposerBody-avatar'})}
         <div className="ComposerBody-content">
           <ul className="ComposerBody-header">{listItems(this.headerItems().toArray())}</ul>
@@ -104,4 +102,12 @@ export default class ComposerBody extends Component {
    */
   onsubmit() {
   }
+
+  /**
+   * Stop loading.
+   */
+  loaded() {
+    this.loading = false;
+    m.redraw();
+  }
 }

js/forum/src/components/DiscussionComposer.tsx

@@ -1,4 +1,5 @@
 import ComposerBody from 'flarum/components/ComposerBody';
+import extractText from 'flarum/utils/extractText';
 
 /**
  * The `DiscussionComposer` component displays the composer content for starting
@@ -12,8 +13,8 @@ import ComposerBody from 'flarum/components/ComposerBody';
  * - `titlePlaceholder`
  */
 export default class DiscussionComposer extends ComposerBody {
-  constructor(...args) {
-    super(...args);
+  init() {
+    super.init();
 
     /**
      * The value of the title input.
@@ -26,16 +27,19 @@ export default class DiscussionComposer extends ComposerBody {
   static initProps(props) {
     super.initProps(props);
 
-    props.placeholder = props.placeholder || app.trans('core.write_a_post');
-    props.submitLabel = props.submitLabel || app.trans('core.post_discussion');
-    props.confirmExit = props.confirmExit || app.trans('core.confirm_discard_discussion');
-    props.titlePlaceholder = props.titlePlaceholder || app.trans('core.discussion_title');
+    props.placeholder = props.placeholder || extractText(app.translator.trans('core.forum.composer_discussion.body_placeholder'));
+    props.submitLabel = props.submitLabel || app.translator.trans('core.forum.composer_discussion.submit_button');
+    props.confirmExit = props.confirmExit || extractText(app.translator.trans('core.forum.composer_discussion.discard_confirmation'));
+    props.titlePlaceholder = props.titlePlaceholder || extractText(app.translator.trans('core.forum.composer_discussion.title_placeholder'));
+    props.className = 'ComposerBody--discussion';
   }
 
   headerItems() {
     const items = super.headerItems();
 
-    items.add('title', (
+    items.add('title', <h3>{app.translator.trans('core.forum.composer_discussion.title')}</h3>, 100);
+
+    items.add('discussionTitle', (
       <h3>
         <input className="FormControl"
           value={this.title()}
@@ -64,23 +68,6 @@ export default class DiscussionComposer extends ComposerBody {
     m.redraw.strategy('none');
   }
 
-  config(isInitialized, context) {
-    super.config(isInitialized, context);
-
-    // If the user presses the backspace key in the text editor, and the cursor
-    // is already at the start, then we'll move the focus back into the title
-    // input.
-    this.editor.$('textarea').keydown((e) => {
-      if (e.which === 8 && e.target.selectionStart === 0 && e.target.selectionEnd === 0) {
-        e.preventDefault();
-
-        const $title = this.$(':input:enabled:visible:first')[0];
-        $title.focus();
-        $title.selectionStart = $title.selectionEnd = $title.value.length;
-      }
-    });
-  }
-
   preventExit() {
     return (this.title() || this.content()) && this.props.confirmExit;
   }
@@ -108,11 +95,7 @@ export default class DiscussionComposer extends ComposerBody {
         app.cache.discussionList.addDiscussion(discussion);
         m.route(app.route.discussion(discussion));
       },
-      response => {
-        this.loading = false;
-        m.redraw();
-        app.alertErrors(response.errors);
-      }
+      this.loaded.bind(this)
     );
   }
 }

js/forum/src/components/DiscussionList.tsx

@@ -13,9 +13,7 @@ import Placeholder from 'flarum/components/Placeholder';
  *   to send along in the API request to get discussion results.
  */
 export default class DiscussionList extends Component {
-  constructor(...args) {
-    super(...args);
-
+  init() {
     /**
      * Whether or not discussion results are loading.
      *
@@ -48,14 +46,14 @@ export default class DiscussionList extends Component {
       loading = LoadingIndicator.component();
     } else if (this.moreResults) {
       loading = Button.component({
-        children: app.trans('core.load_more'),
+        children: app.translator.trans('core.forum.discussion_list.load_more_button'),
         className: 'Button',
         onclick: this.loadMore.bind(this)
       });
     }
 
     if (this.discussions.length === 0 && !this.loading) {
-      const text = 'Looks like there are no discussions here. Why don\'t you create a new one?';
+      const text = app.translator.trans('core.forum.discussion_list.empty_text');
       return (
         <div className="DiscussionList">
           {Placeholder.component({text})}
@@ -117,7 +115,7 @@ export default class DiscussionList extends Component {
     map.latest = '-lastTime';
     map.top = '-commentsCount';
     map.newest = '-startTime';
-    map.oldest = '+startTime';
+    map.oldest = 'startTime';
 
     return map;
   }

js/forum/src/components/DiscussionListItem.tsx

@@ -13,6 +13,7 @@ import SubtreeRetainer from 'flarum/utils/SubtreeRetainer';
 import DiscussionControls from 'flarum/utils/DiscussionControls';
 import slidable from 'flarum/utils/slidable';
 import extractText from 'flarum/utils/extractText';
+import classList from 'flarum/utils/classList';
 
 /**
  * The `DiscussionListItem` component shows a single discussion in the
@@ -24,9 +25,7 @@ import extractText from 'flarum/utils/extractText';
  * - `params`
  */
 export default class DiscussionListItem extends Component {
-  constructor(...args) {
-    super(...args);
-
+  init() {
     /**
      * Set up a subtree retainer so that the discussion will not be redrawn
      * unless new data comes in.
@@ -43,6 +42,16 @@ export default class DiscussionListItem extends Component {
     );
   }
 
+  attrs() {
+    return {
+      className: classList([
+        'DiscussionListItem',
+        this.active() ? 'active' : '',
+        this.props.discussion.isHidden() ? 'DiscussionListItem--hidden' : ''
+      ])
+    };
+  }
+
   view() {
     const retain = this.subtree.retain();
 
@@ -56,9 +65,10 @@ export default class DiscussionListItem extends Component {
     const jumpTo = Math.min(discussion.lastPostNumber(), (discussion.readNumber() || 0) + 1);
     const relevantPosts = this.props.params.q ? discussion.relevantPosts() : [];
     const controls = DiscussionControls.controls(discussion, this).toArray();
+    const attrs = this.attrs();
 
     return (
-      <div className={'DiscussionListItem ' + (this.active() ? 'active' : '')}>
+      <div {...attrs}>
 
         {controls.length ? Dropdown.component({
           icon: 'ellipsis-v',
@@ -75,7 +85,7 @@ export default class DiscussionListItem extends Component {
         <div className={'DiscussionListItem-content Slidable-content' + (isUnread ? ' unread' : '') + (isRead ? ' read' : '')}>
           <a href={startUser ? app.route.user(startUser) : '#'}
             className="DiscussionListItem-author"
-            title={extractText(app.trans('core.discussion_started', {user: startUser, ago: humanTime(discussion.startTime())}))}
+            title={extractText(app.translator.trans('core.forum.discussion_list.started_text', {user: startUser, ago: humanTime(discussion.startTime())}))}
             config={function(element) {
               $(element).tooltip({placement: 'right'});
               m.route.apply(this, arguments);
@@ -96,7 +106,7 @@ export default class DiscussionListItem extends Component {
 
           <span className="DiscussionListItem-count"
             onclick={this.markAsRead.bind(this)}
-            title={showUnread ? app.trans('core.mark_as_read') : ''}>
+            title={showUnread ? app.translator.trans('core.forum.discussion_list.mark_as_read_tooltip') : ''}>
             {abbreviateNumber(discussion[showUnread ? 'unreadCount' : 'repliesCount']())}
           </span>
 

js/forum/src/components/DiscussionPage.tsx

@@ -13,8 +13,8 @@ import DiscussionControls from 'flarum/utils/DiscussionControls';
  * the discussion list pane, the hero, the posts, and the sidebar.
  */
 export default class DiscussionPage extends Page {
-  constructor(...args) {
-    super(...args);
+  init() {
+    super.init();
 
     /**
      * The discussion that is being viewed.
@@ -128,7 +128,7 @@ export default class DiscussionPage extends Page {
       // component for the first time on page load, then any calls to m.redraw
       // will be ineffective and thus any configs (scroll code) will be run
       // before stuff is drawn to the page.
-      setTimeout(this.show.bind(this, preloadedDiscussion));
+      setTimeout(this.show.bind(this, preloadedDiscussion), 0);
     } else {
       const params = this.requestParams();
 
@@ -159,6 +159,7 @@ export default class DiscussionPage extends Page {
   show(discussion) {
     this.discussion = discussion;
 
+    app.history.push('discussion', discussion.title());
     app.setTitle(discussion.title());
     app.setTitleCount(0);
 
@@ -183,7 +184,7 @@ export default class DiscussionPage extends Page {
     // the specific post that was routed to.
     this.stream = new PostStream({discussion, includedPosts});
     this.stream.on('positionChanged', this.positionChanged.bind(this));
-    this.stream.goToNumber(m.route.param('near') || includedPosts[0].number(), true);
+    this.stream.goToNumber(m.route.param('near') || (includedPosts[0] && includedPosts[0].number()), true);
   }
 
   /**
@@ -273,7 +274,7 @@ export default class DiscussionPage extends Page {
     m.route(url, true);
     window.history.replaceState(null, document.title, url);
 
-    app.history.push('discussion');
+    app.history.push('discussion', discussion.title());
 
     // If the user hasn't read past here before, then we'll update their read
     // state and redraw.

js/forum/src/components/DiscussionRenamedNotification.tsx

@@ -20,6 +20,6 @@ export default class DiscussionRenamedNotification extends Notification {
   }
 
   content() {
-    return app.trans('core.discussion_renamed_notification', {user: this.props.notification.sender()});
+    return app.translator.trans('core.forum.notifications.discussion_renamed_text', {user: this.props.notification.sender()});
   }
 }

js/forum/src/components/DiscussionRenamedPost.tsx

@@ -1,4 +1,5 @@
 import EventPost from 'flarum/components/EventPost';
+import extractText from 'flarum/utils/extractText';
 
 /**
  * The `DiscussionRenamedPost` component displays a discussion event post
@@ -13,8 +14,11 @@ export default class DiscussionRenamedPost extends EventPost {
     return 'pencil';
   }
 
-  descriptionKey() {
-    return 'core.discussion_renamed_post';
+  description(data) {
+    const renamed = app.translator.trans('core.forum.post_stream.discussion_renamed_text', data);
+    const oldName = app.translator.trans('core.forum.post_stream.discussion_renamed_old_tooltip', data);
+
+    return <span title={extractText(oldName)}>{renamed}</span>;
   }
 
   descriptionData() {
@@ -23,7 +27,7 @@ export default class DiscussionRenamedPost extends EventPost {
     const newTitle = post.content()[1];
 
     return {
-      'old': <strong className="DiscussionRenamedPost-old">{oldTitle}</strong>,
+      'old': oldTitle,
       'new': <strong className="DiscussionRenamedPost-new">{newTitle}</strong>
     };
   }

js/forum/src/components/DiscussionsSearchSource.tsx

@@ -13,6 +13,8 @@ export default class DiscussionsSearchSource {
   }
 
   search(query) {
+    query = query.toLowerCase();
+
     this.results[query] = [];
 
     const params = {
@@ -25,14 +27,16 @@ export default class DiscussionsSearchSource {
   }
 
   view(query) {
+    query = query.toLowerCase();
+
     const results = this.results[query] || [];
 
     return [
-      <li className="Dropdown-header">{app.trans('core.discussions')}</li>,
+      <li className="Dropdown-header">{app.translator.trans('core.forum.search.discussions_heading')}</li>,
       <li>
         {LinkButton.component({
           icon: 'search',
-          children: app.trans('core.search_all_discussions', {query}),
+          children: app.translator.trans('core.forum.search.all_discussions_button', {query}),
           href: app.route('index', {q: query})
         })}
       </li>,

js/forum/src/components/DiscussionsUserPage.tsx

@@ -6,8 +6,8 @@ import DiscussionList from 'flarum/components/DiscussionList';
  * page.
  */
 export default class DiscussionsUserPage extends UserPage {
-  constructor(...args) {
-    super(...args);
+  init() {
+    super.init();
 
     this.loadUser(m.route.param('username'));
   }

js/forum/src/components/EditPostComposer.tsx

@@ -1,6 +1,13 @@
 import ComposerBody from 'flarum/components/ComposerBody';
 import icon from 'flarum/helpers/icon';
 
+function minimizeComposerIfFullScreen(e) {
+  if (app.composer.isFullScreen()) {
+    app.composer.minimize();
+    e.stopPropagation();
+  }
+}
+
 /**
  * The `EditPostComposer` component displays the composer content for editing a
  * post. It sets the initial content to the content of the post that is being
@@ -12,10 +19,12 @@ import icon from 'flarum/helpers/icon';
  * - `post`
  */
 export default class EditPostComposer extends ComposerBody {
-  constructor(...args) {
-    super(...args);
+  init() {
+    super.init();
+
+    this.editor.props.preview = e => {
+      minimizeComposerIfFullScreen(e);
 
-    this.editor.props.preview = () => {
       m.route(app.route.post(this.props.post));
     };
   }
@@ -23,8 +32,8 @@ export default class EditPostComposer extends ComposerBody {
   static initProps(props) {
     super.initProps(props);
 
-    props.submitLabel = props.submitLabel || app.trans('core.save_changes');
-    props.confirmExit = props.confirmExit || app.trans('core.confirm_discard_edit');
+    props.submitLabel = props.submitLabel || app.translator.trans('core.forum.composer_edit.submit_button');
+    props.confirmExit = props.confirmExit || app.translator.trans('core.forum.composer_edit.discard_confirmation');
     props.originalContent = props.originalContent || props.post.content();
     props.user = props.user || props.post.user();
 
@@ -35,11 +44,17 @@ export default class EditPostComposer extends ComposerBody {
     const items = super.headerItems();
     const post = this.props.post;
 
+    const routeAndMinimize = function(element, isInitialized) {
+      if (isInitialized) return;
+      $(element).on('click', minimizeComposerIfFullScreen);
+      m.route.apply(this, arguments);
+    };
+
     items.add('title', (
       <h3>
-        {icon('pencil')}{' '}
-        <a href={app.route.discussion(post.discussion(), post.number())} config={m.route}>
-          {app.trans('core.editing_post', {number: post.number(), discussion: post.discussion().title()})}
+        {icon('pencil')} {' '}
+        <a href={app.route.discussion(post.discussion(), post.number())} config={routeAndMinimize}>
+          {app.translator.trans('core.forum.composer_edit.post_link', {number: post.number(), discussion: post.discussion().title()})}
         </a>
       </h3>
     ));
@@ -64,11 +79,8 @@ export default class EditPostComposer extends ComposerBody {
     const data = this.data();
 
     this.props.post.save(data).then(
-      () => {
-        app.composer.hide();
-        m.redraw();
-      },
-      () => this.loading = false
+      () => app.composer.hide(),
+      this.loaded.bind(this)
     );
   }
 }

js/forum/src/components/EditUserModal.js

@@ -1,131 +0,0 @@
-import Modal from 'flarum/components/Modal';
-import Button from 'flarum/components/Button';
-import GroupBadge from 'flarum/components/GroupBadge';
-import Group from 'flarum/models/Group';
-
-/**
- * The `EditUserModal` component displays a modal dialog with a login form.
- */
-export default class EditUserModal extends Modal {
-  constructor(...args) {
-    super(...args);
-
-    const user = this.props.user;
-
-    this.username = m.prop(user.username() || '');
-    this.email = m.prop(user.email() || '');
-    this.setPassword = m.prop(false);
-    this.password = m.prop(user.password() || '');
-    this.groups = {};
-
-    app.store.all('groups')
-      .filter(group => [Group.GUEST_ID, Group.MEMBER_ID].indexOf(group.id()) === -1)
-      .forEach(group => this.groups[group.id()] = m.prop(user.groups().indexOf(group) !== -1));
-  }
-
-  className() {
-    return 'EditUserModal Modal--small';
-  }
-
-  title() {
-    return 'Edit User';
-  }
-
-  content() {
-    return (
-      <div className="Modal-body">
-        <div className="Form">
-          <div className="Form-group">
-            <label>Username</label>
-            <input className="FormControl" placeholder={app.trans('core.username')}
-              value={this.username()}
-              onchange={m.withAttr('value', this.username)} />
-          </div>
-
-          <div className="Form-group">
-            <label>Email</label>
-            <div>
-              <input className="FormControl" placeholder={app.trans('core.email')}
-                value={this.email()}
-                onchange={m.withAttr('value', this.email)} />
-            </div>
-          </div>
-
-          <div className="Form-group">
-            <label>Password</label>
-            <div>
-              <label className="checkbox">
-                <input type="checkbox" checked={this.setPassword()} onchange={e => {
-                  this.setPassword(e.target.checked);
-                  m.redraw(true);
-                  if (e.target.checked) this.$('[name=password]').select();
-                  m.redraw.strategy('none');
-                }}/>
-                Set new password
-              </label>
-              {this.setPassword() ? (
-                <input className="FormControl" type="password" name="password" placeholder={app.trans('core.password')}
-                  value={this.password()}
-                  onchange={m.withAttr('value', this.password)} />
-              ) : ''}
-            </div>
-          </div>
-
-          <div className="Form-group EditUserModal-groups">
-            <label>Groups</label>
-            <div>
-              {Object.keys(this.groups)
-                .map(id => app.store.getById('groups', id))
-                .map(group => (
-                  <label className="checkbox">
-                    <input type="checkbox"
-                      checked={this.groups[group.id()]()}
-                      disabled={this.props.user.id() === '1' && group.id() === Group.ADMINISTRATOR_ID}
-                      onchange={m.withAttr('checked', this.groups[group.id()])}/>
-                    {GroupBadge.component({group, label: ''})} {group.nameSingular()}
-                  </label>
-                ))}
-            </div>
-          </div>
-
-          <div className="Form-group">
-            {Button.component({
-              className: 'Button Button--primary',
-              type: 'submit',
-              loading: this.loading,
-              children: app.trans('core.save_changes')
-            })}
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  onsubmit(e) {
-    e.preventDefault();
-
-    this.loading = true;
-
-    const groups = Object.keys(this.groups)
-      .filter(id => this.groups[id]())
-      .map(id => app.store.getById('groups', id));
-
-    const data = {
-      username: this.username(),
-      email: this.email(),
-      relationships: {groups}
-    };
-
-    if (this.setPassword()) {
-      data.password = this.password();
-    }
-
-    this.props.user.save(data).then(
-      () => this.hide(),
-      response => {
-        this.loading = false;
-        this.handleErrors(response);
-      }
-    );
-  }
-}

js/forum/src/components/EditUserModal.tsx

@@ -0,0 +1,165 @@
+import Modal from 'flarum/components/Modal';
+import Button from 'flarum/components/Button';
+import GroupBadge from 'flarum/components/GroupBadge';
+import Group from 'flarum/models/Group';
+import extractText from 'flarum/utils/extractText';
+
+/**
+ * The `EditUserModal` component displays a modal dialog with a login form.
+ */
+export default class EditUserModal extends Modal {
+  init() {
+    super.init();
+
+    const user = this.props.user;
+
+    this.username = m.prop(user.username() || '');
+    this.email = m.prop(user.email() || '');
+    this.isActivated = m.prop(user.isActivated() || false);
+    this.setPassword = m.prop(false);
+    this.password = m.prop(user.password() || '');
+    this.groups = {};
+
+    app.store.all('groups')
+      .filter(group => [Group.GUEST_ID, Group.MEMBER_ID].indexOf(group.id()) === -1)
+      .forEach(group => this.groups[group.id()] = m.prop(user.groups().indexOf(group) !== -1));
+  }
+
+  className() {
+    return 'EditUserModal Modal--small';
+  }
+
+  title() {
+    return app.translator.trans('core.forum.edit_user.title');
+  }
+
+  content() {
+    return (
+      <div className="Modal-body">
+        <div className="Form">
+          <div className="Form-group">
+            <label>{app.translator.trans('core.forum.edit_user.username_heading')}</label>
+            <input className="FormControl" placeholder={extractText(app.translator.trans('core.forum.edit_user.username_label'))}
+              bidi={this.username} />
+          </div>
+
+          {app.session.user !== this.props.user ? [
+            <div className="Form-group">
+              <label>{app.translator.trans('core.forum.edit_user.email_heading')}</label>
+              <div>
+                <input className="FormControl" placeholder={extractText(app.translator.trans('core.forum.edit_user.email_label'))}
+                  bidi={this.email} />
+              </div>
+              {!this.isActivated() ? (
+                <div>
+                  {Button.component({
+                    className: 'Button Button--block',
+                    children: app.translator.trans('core.forum.edit_user.activate_button'),
+                    loading: this.loading,
+                    onclick: this.activate.bind(this)
+                  })}
+                </div>
+              ) : ''}
+            </div>,
+
+            <div className="Form-group">
+              <label>{app.translator.trans('core.forum.edit_user.password_heading')}</label>
+              <div>
+                <label className="checkbox">
+                  <input type="checkbox" checked={this.setPassword()} onchange={e => {
+                    this.setPassword(e.target.checked);
+                    m.redraw(true);
+                    if (e.target.checked) this.$('[name=password]').select();
+                    m.redraw.strategy('none');
+                  }}/>
+                  {app.translator.trans('core.forum.edit_user.set_password_label')}
+                </label>
+                {this.setPassword() ? (
+                  <input className="FormControl" type="password" name="password" placeholder={extractText(app.translator.trans('core.forum.edit_user.password_label'))}
+                    bidi={this.password} />
+                ) : ''}
+              </div>
+            </div>
+          ] : ''}
+
+          <div className="Form-group EditUserModal-groups">
+            <label>{app.translator.trans('core.forum.edit_user.groups_heading')}</label>
+            <div>
+              {Object.keys(this.groups)
+                .map(id => app.store.getById('groups', id))
+                .map(group => (
+                  <label className="checkbox">
+                    <input type="checkbox"
+                      bidi={this.groups[group.id()]}
+                      disabled={this.props.user.id() === '1' && group.id() === Group.ADMINISTRATOR_ID} />
+                    {GroupBadge.component({group, label: ''})} {group.nameSingular()}
+                  </label>
+                ))}
+            </div>
+          </div>
+
+          <div className="Form-group">
+            {Button.component({
+              className: 'Button Button--primary',
+              type: 'submit',
+              loading: this.loading,
+              children: app.translator.trans('core.forum.edit_user.submit_button')
+            })}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  activate() {
+    this.loading = true;
+    const data = {
+      username: this.username(),
+      isActivated: true,
+    };
+    this.props.user.save(data, {errorHandler: this.onerror.bind(this)})
+      .then(() => {
+        this.isActivated(true);
+        this.loading = false;
+        m.redraw();
+      })
+      .catch(() => {
+        this.loading = false;
+        m.redraw();
+      });
+  }
+
+  data() {
+    const groups = Object.keys(this.groups)
+      .filter(id => this.groups[id]())
+      .map(id => app.store.getById('groups', id));
+
+    const data = {
+      username: this.username(),
+      relationships: {groups}
+    };
+
+    if (app.session.user !== this.props.user) {
+      data.email = this.email();
+    }
+
+    if (this.setPassword()) {
+      data.password = this.password();
+    }
+
+    return data;
+  }
+
+  onsubmit(e) {
+    e.preventDefault();
+
+    this.loading = true;
+
+    this.props.user.save(this.data(), {errorHandler: this.onerror.bind(this)})
+      .then(this.hide.bind(this))
+      .catch(() => {
+        this.loading = false;
+        m.redraw();
+      });
+  }
+}

js/forum/src/components/EventPost.tsx

@@ -16,9 +16,11 @@ import icon from 'flarum/helpers/icon';
  */
 export default class EventPost extends Post {
   attrs() {
-    return {
-      className: 'EventPost ' + ucfirst(this.props.post.contentType()) + 'Post'
-    };
+    const attrs = super.attrs();
+
+    attrs.className += ' EventPost ' + ucfirst(this.props.post.contentType()) + 'Post';
+
+    return attrs;
   }
 
   content() {
@@ -31,12 +33,12 @@ export default class EventPost extends Post {
         : username
     });
 
-    return [
+    return super.content().concat([
       icon(this.icon(), {className: 'EventPost-icon'}),
       <div class="EventPost-info">
-        {app.trans(this.descriptionKey(), data)}
+        {this.description(data)}
       </div>
-    ];
+    ]);
   }
 
   /**
@@ -48,6 +50,16 @@ export default class EventPost extends Post {
     return '';
   }
 
+  /**
+   * Get the description text for the event.
+   *
+   * @param {Object} data
+   * @return {String|Object} The description to render in the DOM
+   */
+  description(data) {
+    return app.translator.transChoice(this.descriptionKey(), data.count, data);
+  }
+
   /**
    * Get the translation key for the description of the event.
    *

js/forum/src/components/ForgotPasswordModal.tsx

@@ -1,6 +1,7 @@
 import Modal from 'flarum/components/Modal';
 import Alert from 'flarum/components/Alert';
 import Button from 'flarum/components/Button';
+import extractText from 'flarum/utils/extractText';
 
 /**
  * The `ForgotPasswordModal` component displays a modal which allows the user to
@@ -11,8 +12,8 @@ import Button from 'flarum/components/Button';
  * - `email`
  */
 export default class ForgotPasswordModal extends Modal {
-  constructor(...args) {
-    super(...args);
+  init() {
+    super.init();
 
     /**
      * The value of the email input.
@@ -34,21 +35,19 @@ export default class ForgotPasswordModal extends Modal {
   }
 
   title() {
-    return app.trans('core.forgot_password');
+    return app.translator.trans('core.forum.forgot_password.title');
   }
 
   content() {
     if (this.success) {
-      const emailProviderName = this.email().split('@')[1];
-
       return (
         <div className="Modal-body">
           <div className="Form Form--centered">
-            <p className="helpText">{app.trans('core.password_reset_email_sent')}</p>
+            <p className="helpText">{app.translator.trans('core.forum.forgot_password.email_sent_message')}</p>
             <div className="Form-group">
-              <a href={'http://' + emailProviderName} className="Button Button--primary Button--block">
-                {app.trans('core.go_to', {location: emailProviderName})}
-              </a>
+              <Button className="Button Button--primary Button--block" onclick={this.hide.bind(this)}>
+                {app.translator.trans('core.forum.forgot_password.dismiss_button')}
+              </Button>
             </div>
           </div>
         </div>
@@ -58,9 +57,9 @@ export default class ForgotPasswordModal extends Modal {
     return (
       <div className="Modal-body">
         <div className="Form Form--centered">
-          <p className="helpText">{app.trans('core.forgot_password_help')}</p>
+          <p className="helpText">{app.translator.trans('core.forum.forgot_password.text')}</p>
           <div className="Form-group">
-            <input className="FormControl" name="email" type="email" placeholder={app.trans('core.email')}
+            <input className="FormControl" name="email" type="email" placeholder={extractText(app.translator.trans('core.forum.forgot_password.email_placeholder'))}
               value={this.email()}
               onchange={m.withAttr('value', this.email)}
               disabled={this.loading} />
@@ -70,7 +69,7 @@ export default class ForgotPasswordModal extends Modal {
               className: 'Button Button--primary Button--block',
               type: 'submit',
               loading: this.loading,
-              children: app.trans('core.recover_password')
+              children: app.translator.trans('core.forum.forgot_password.submit_button')
             })}
           </div>
         </div>
@@ -87,23 +86,21 @@ export default class ForgotPasswordModal extends Modal {
       method: 'POST',
       url: app.forum.attribute('apiUrl') + '/forgot',
       data: {email: this.email()},
-      handlers: {
-        404: () => {
-          this.alert = new Alert({type: 'warning', message: 'That email wasn\'t found in our database.'});
-          throw new Error();
-        }
-      }
-    }).then(
-      () => {
-        this.loading = false;
+      errorHandler: this.onerror.bind(this)
+    })
+      .then(() => {
         this.success = true;
         this.alert = null;
-        m.redraw();
-      },
-      response => {
-        this.loading = false;
-        this.handleErrors(response);
-      }
-    );
+      })
+      .catch(() => {})
+      .then(this.loaded.bind(this));
+  }
+
+  onerror(error) {
+    if (error.status === 404) {
+      error.alert.props.children = app.translator.trans('core.forum.forgot_password.not_found_message');
+    }
+
+    super.onerror(error);
   }
 }

js/forum/src/components/HeaderPrimary.js

@@ -1,28 +0,0 @@
-import Component from 'flarum/Component';
-import ItemList from 'flarum/utils/ItemList';
-import listItems from 'flarum/helpers/listItems';
-import SelectDropdown from 'flarum/components/SelectDropdown';
-import Button from 'flarum/components/Button';
-
-/**
- * The `HeaderPrimary` component displays primary header controls. On the
- * default skin, these are shown just to the right of the forum title.
- */
-export default class HeaderPrimary extends Component {
-  view() {
-    return (
-      <ul className="Header-controls">
-        {listItems(this.items().toArray())}
-      </ul>
-    );
-  }
-
-  /**
-   * Build an item list for the controls.
-   *
-   * @return {ItemList}
-   */
-  items() {
-    return new ItemList();
-  }
-}

js/forum/src/components/HeaderPrimary.tsx

@@ -15,6 +15,13 @@ export default class HeaderPrimary extends Component {
     );
   }
 
+  config(isInitialized, context) {
+    // Since this component is 'above' the content of the page (that is, it is a
+    // part of the global UI that persists between routes), we will flag the DOM
+    // to be retained across route changes.
+    context.retain = true;
+  }
+
   /**
    * Build an item list for the controls.
    *

js/forum/src/components/HeaderSecondary.tsx

@@ -22,6 +22,13 @@ export default class HeaderSecondary extends Component {
     );
   }
 
+  config(isInitialized, context) {
+    // Since this component is 'above' the content of the page (that is, it is a
+    // part of the global UI that persists between routes), we will flag the DOM
+    // to be retained across route changes.
+    context.retain = true;
+  }
+
   /**
    * Build an item list for the controls.
    *
@@ -32,14 +39,14 @@ export default class HeaderSecondary extends Component {
 
     items.add('search', app.search.render(), 30);
 
-    if (Object.keys(app.locales).length > 1) {
+    if (app.forum.attribute("showLanguageSelector") && Object.keys(app.data.locales).length > 1) {
       const locales = [];
 
-      for (const locale in app.locales) {
+      for (const locale in app.data.locales) {
         locales.push(Button.component({
-          active: app.locale === locale,
-          children: app.locales[locale],
-          icon: app.locale === locale ? 'check' : true,
+          active: app.data.locale === locale,
+          children: app.data.locales[locale],
+          icon: app.data.locale === locale ? 'check' : true,
           onclick: () => {
             if (app.session.user) {
               app.session.user.savePreferences({locale}).then(() => window.location.reload());
@@ -64,7 +71,7 @@ export default class HeaderSecondary extends Component {
       if (app.forum.attribute('allowSignUp')) {
         items.add('signUp',
           Button.component({
-            children: app.trans('core.sign_up'),
+            children: app.translator.trans('core.forum.header.sign_up_link'),
             className: 'Button Button--link',
             onclick: () => app.modal.show(new SignUpModal())
           }), 10
@@ -73,7 +80,7 @@ export default class HeaderSecondary extends Component {
 
       items.add('logIn',
         Button.component({
-          children: app.trans('core.log_in'),
+          children: app.translator.trans('core.forum.header.log_in_link'),
           className: 'Button Button--link',
           onclick: () => app.modal.show(new LogInModal())
         }), 0

js/forum/src/components/IndexPage.tsx

@@ -2,6 +2,7 @@ import { extend } from 'flarum/extend';
 import Page from 'flarum/components/Page';
 import ItemList from 'flarum/utils/ItemList';
 import listItems from 'flarum/helpers/listItems';
+import icon from 'flarum/helpers/icon';
 import DiscussionList from 'flarum/components/DiscussionList';
 import WelcomeHero from 'flarum/components/WelcomeHero';
 import DiscussionComposer from 'flarum/components/DiscussionComposer';
@@ -17,8 +18,8 @@ import SelectDropdown from 'flarum/components/SelectDropdown';
  * hero, the sidebar, and the discussion list.
  */
 export default class IndexPage extends Page {
-  constructor(...args) {
-    super(...args);
+  init() {
+    super.init();
 
     // If the user is returning from a discussion page, then take note of which
     // discussion they have just visited. After the view is rendered, we will
@@ -54,7 +55,7 @@ export default class IndexPage extends Page {
       app.cache.discussionList = new DiscussionList({params});
     }
 
-    app.history.push('index');
+    app.history.push('index', icon('bars'));
 
     this.bodyClass = 'App--index';
   }
@@ -97,14 +98,19 @@ export default class IndexPage extends Page {
 
     // Work out the difference between the height of this hero and that of the
     // previous hero. Maintain the same scroll position relative to the bottom
-    // of the hero so that the 'fixed' sidebar doesn't jump around.
-    const heroHeight = this.$('.Hero').outerHeight();
+    // of the hero so that the sidebar doesn't jump around.
+    const oldHeroHeight = app.cache.heroHeight;
+    const heroHeight = app.cache.heroHeight = this.$('.Hero').outerHeight();
     const scrollTop = app.cache.scrollTop;
 
     $('#app').css('min-height', $(window).height() + heroHeight);
-    $(window).scrollTop(scrollTop - (app.cache.heroHeight - heroHeight));
 
-    app.cache.heroHeight = heroHeight;
+    // Scroll to the remembered position. We do this after a short delay so that
+    // it happens after the browser has done its own "back button" scrolling,
+    // which isn't right. https://github.com/flarum/core/issues/835
+    const scroll = () => $(window).scrollTop(scrollTop - oldHeroHeight + heroHeight);
+    scroll();
+    setTimeout(scroll, 1);
 
     // If we've just returned from a discussion page, then the constructor will
     // have set the `lastDiscussion` property. If this is the case, we want to
@@ -143,11 +149,11 @@ export default class IndexPage extends Page {
    */
   sidebarItems() {
     const items = new ItemList();
-    const canStartDiscussion = app.forum.canStartDiscussion() || !app.session.user;
+    const canStartDiscussion = app.forum.attribute('canStartDiscussion') || !app.session.user;
 
     items.add('newDiscussion',
       Button.component({
-        children: canStartDiscussion ? app.trans('core.start_a_discussion') : 'Can\'t Start Discussion',
+        children: app.translator.trans(canStartDiscussion ? 'core.forum.index.start_discussion_button' : 'core.forum.index.cannot_start_discussion_button'),
         icon: 'edit',
         className: 'Button Button--primary IndexPage-newDiscussion',
         itemClassName: 'App-primaryControl',
@@ -180,7 +186,7 @@ export default class IndexPage extends Page {
     items.add('allDiscussions',
       LinkButton.component({
         href: app.route('index', params),
-        children: app.trans('core.all_discussions'),
+        children: app.translator.trans('core.forum.index.all_discussions_link'),
         icon: 'comments-o'
       }),
       100
@@ -198,16 +204,17 @@ export default class IndexPage extends Page {
    */
   viewItems() {
     const items = new ItemList();
+    const sortMap = app.cache.discussionList.sortMap();
 
     const sortOptions = {};
-    for (const i in app.cache.discussionList.sortMap()) {
-      sortOptions[i] = app.trans('core.sort_' + i);
+    for (const i in sortMap) {
+      sortOptions[i] = app.translator.trans('core.forum.index_sort.' + i + '_button');
     }
 
     items.add('sort',
       Select.component({
         options: sortOptions,
-        value: this.params().sort,
+        value: this.params().sort || Object.keys(sortMap)[0],
         onchange: this.changeSort.bind(this)
       })
     );
@@ -226,17 +233,23 @@ export default class IndexPage extends Page {
 
     items.add('refresh',
       Button.component({
-        title: app.trans('core.refresh'),
+        title: app.translator.trans('core.forum.index.refresh_tooltip'),
         icon: 'refresh',
         className: 'Button Button--icon',
-        onclick: () => app.cache.discussionList.refresh()
+        onclick: () => {
+          app.cache.discussionList.refresh();
+          if (app.session.user) {
+            app.store.find('users', app.session.user.id());
+            m.redraw();
+          }
+        }
       })
     );
 
     if (app.session.user) {
       items.add('markAllAsRead',
         Button.component({
-          title: app.trans('core.mark_all_as_read'),
+          title: app.translator.trans('core.forum.index.mark_all_as_read_tooltip'),
           icon: 'check',
           className: 'Button Button--icon',
           onclick: this.markAllAsRead.bind(this)
@@ -357,6 +370,10 @@ export default class IndexPage extends Page {
    * @return void
    */
   markAllAsRead() {
-    app.session.user.save({readTime: new Date()});
+    const confirmation = confirm(app.translator.trans('core.forum.index.mark_all_as_read_confirmation'));
+
+    if (confirmation) {
+      app.session.user.save({readTime: new Date()});
+    }
   }
 }

js/forum/src/components/LogInButton.tsx

@@ -0,0 +1,30 @@
+import Button from 'flarum/components/Button';
+
+/**
+ * The `LogInButton` component displays a social login button which will open
+ * a popup window containing the specified path.
+ *
+ * ### Props
+ *
+* - `path`
+ */
+export default class LogInButton extends Button {
+  static initProps(props) {
+    props.className = (props.className || '') + ' LogInButton';
+
+    props.onclick = function() {
+      const width = 600;
+      const height = 400;
+      const $window = $(window);
+
+      window.open(app.forum.attribute('baseUrl') + props.path, 'logInPopup',
+        `width=${width},` +
+        `height=${height},` +
+        `top=${$window.height() / 2 - height / 2},` +
+        `left=${$window.width() / 2 - width / 2},` +
+        'status=no,scrollbars=no,resizable=no');
+    };
+
+    super.initProps(props);
+  }
+}

js/forum/src/components/LogInButtons.tsx

@@ -0,0 +1,25 @@
+import Component from 'flarum/Component';
+import ItemList from 'flarum/utils/ItemList';
+
+/**
+ * The `LogInButtons` component displays a collection of social login buttons.
+ */
+export default class LogInButtons extends Component {
+  view() {
+    return (
+      <div className="LogInButtons">
+        {this.items().toArray()}
+      </div>
+    );
+  }
+
+  /**
+   * Build a list of LogInButton components.
+   *
+   * @return {ItemList}
+   * @public
+   */
+  items() {
+    return new ItemList();
+  }
+}