Setup the secret key and start synapse.

synapse/storage/deviceinbox.py

@@ -51,7 +51,7 @@ class DeviceInboxWorkerStore(SQLBaseStore):
 
         def get_new_messages_for_device_txn(txn):
             sql = (
-                "SELECT stream_id, message_json FROM device_inbox"
+                "SELECT stream_id, message_json, context FROM device_inbox"
                 " WHERE user_id = ? AND device_id = ?"
                 " AND ? < stream_id AND stream_id <= ?"
                 " ORDER BY stream_id ASC"
@@ -61,11 +61,22 @@ class DeviceInboxWorkerStore(SQLBaseStore):
                 sql, (user_id, device_id, last_stream_id, current_stream_id, limit)
             )
             messages = []
+            references = []
             for row in txn:
                 stream_pos = row[0]
                 messages.append(json.loads(row[1]))
+                references.append(
+                    opentracing.extract_text_map(
+                        json.loads(json.loads(row[2])["opentracing"])
+                    )
+                )
             if len(messages) < limit:
                 stream_pos = current_stream_id
+            with opentracing.start_active_span(
+                "do we have send??"  # , child_of=references[0]
+            ):
+                opentracing.set_tag("ref", references)
+                pass
             return (messages, stream_pos)
 
         return self.runInteraction(
@@ -281,6 +292,7 @@ class DeviceInboxStore(DeviceInboxWorkerStore, BackgroundUpdateStore):
                 allow_none=True,
             )
             if already_inserted is not None:
+                opentracing.log_kv({"message": "message already received"})
                 return
 
             # Add an entry for this message_id so that we know we've processed
@@ -294,6 +306,9 @@ class DeviceInboxStore(DeviceInboxWorkerStore, BackgroundUpdateStore):
                     "received_ts": now_ms,
                 },
             )
+            opentracing.log_kv(
+                {"message": "device message added to device_federation_inbox"}
+            )
 
             # Add the messages to the approriate local device inboxes so that
             # they'll be sent to the devices when they next sync.
@@ -336,6 +351,13 @@ class DeviceInboxStore(DeviceInboxWorkerStore, BackgroundUpdateStore):
                     messages_json_for_user[device] = message_json
             else:
                 if not devices:
+                    opentracing.log_kv(
+                        {
+                            "message": "No devices for user.",
+                            "user_id": user_id,
+                            "messages": messages_by_device,
+                        }
+                    )
                     continue
                 sql = (
                     "SELECT device_id FROM devices"
@@ -361,13 +383,17 @@ class DeviceInboxStore(DeviceInboxWorkerStore, BackgroundUpdateStore):
 
         sql = (
             "INSERT INTO device_inbox"
-            " (user_id, device_id, stream_id, message_json)"
-            " VALUES (?,?,?,?)"
+            " (user_id, device_id, stream_id, message_json, context)"
+            " VALUES (?,?,?,?,?)"
         )
         rows = []
+        # TODO: User whitelisting?
+        context = json.dumps(
+            {"opentracing": opentracing.active_span_context_as_string()}
+        )
         for user_id, messages_by_device in local_by_user_then_device.items():
             for device_id, message_json in messages_by_device.items():
-                rows.append((user_id, device_id, stream_id, message_json))
+                rows.append((user_id, device_id, stream_id, message_json, context))
 
         txn.executemany(sql, rows)
 

synapse/storage/schema/delta/55/add_span_context_to_device_inbox.sql

@@ -0,0 +1,16 @@
+/* Copyright 2019 The Matrix.org Foundation C.I.C
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+ALTER TABLE device_inbox ADD context TEXT;

synapse_topology/__init__.py

@@ -0,0 +1,45 @@
+#! python
+import argparse
+import os.path as path
+import sys
+
+import synapse_topology.controller.server as server
+import synapse_topology.model as model
+
+from twisted.internet import endpoints, reactor
+from twisted.web.server import Site
+
+from twisted.logger import (
+    eventsFromJSONLogFile,
+    textFileLogObserver,
+    globalLogPublisher,
+)
+
+globalLogPublisher.addObserver(textFileLogObserver(sys.stdout))
+
+parser = argparse.ArgumentParser(description="Synapse configuration util")
+parser.add_argument(
+    "config_dir",
+    metavar="CONFIG_DIR",
+    type=str,
+    help="Path the directory containing synapse's configuration files.",
+)
+
+
+args = parser.parse_args()
+
+if not path.isdir(args.config_dir):
+    print("'{}' is not a directory.".format(args.config_dir))
+    exit(1)
+
+
+model.set_config_dir(args.config_dir)
+
+
+backend_endpoint = endpoints.serverFromString(
+    reactor, "tcp6:port=8888:interface=localhost"
+)
+backend_endpoint.listen(Site(server.app.resource()))
+
+
+reactor.run()

synapse_topology/asdfsaf.asdf

@@ -0,0 +1 @@
+ed25519 a_altJ iZSrNbHiO1acwiNW3j6kYheALALGXe5uQMzs5NEKP2A

synapse_topology/controller/server/__init__.py

@@ -0,0 +1,7 @@
+from klein import Klein
+
+app = Klein()
+
+from . import server
+from . import error_handlers
+

synapse_topology/controller/server/error_handlers.py

@@ -0,0 +1,46 @@
+from jsonschema import ValidationError
+from simplejson.errors import JSONDecodeError
+from synapse_topology.model.errors import (
+    BasConfigInUseError,
+    BaseConfigNotFoundError,
+    ConfigNotFoundError,
+)
+
+from . import app
+
+
+@app.handle_errors(ValidationError)
+def validation_error(request, failure):
+    request.setResponseCode(400)
+    print("Invalid post schema {}".format(failure.getErrorMessage()))
+    return "Invalid post schema {}".format(failure.getErrorMessage())
+
+
+@app.handle_errors(JSONDecodeError)
+def json_decode_error(request, failure):
+    request.setResponseCode(400)
+    return "Invalid post json"
+
+
+@app.handle_errors(BaseConfigNotFoundError)
+def base_config_not_found(request, failure):
+    request.setResponseCode(500)
+    return "Config file not setup, please initialise it using the /servername endpoint"
+
+
+@app.handle_errors(ConfigNotFoundError)
+def config_not_found(request, failure):
+    request.setResponseCode(404)
+    return "The config does not exist"
+
+
+@app.handle_errors(BasConfigInUseError)
+def base_config_in_use(request, failure):
+    request.setResponseCode(409)
+    return "Sever name and keys already configured"
+
+
+@app.handle_errors(Exception)
+def handle_generic_error(request, failure):
+    request.setResponseCode(500)
+    return "Internal server error\n{}".format(failure)

synapse_topology/controller/server/schemas.py

@@ -0,0 +1,51 @@
+SERVERNAME_SCHEMA = {
+    "type": "object",
+    "properties": {
+        "server_name": {"type": "string", "minlength": 1},
+        "report_stats": {"type": "boolean"},
+    },
+    "required": ["server_name", "report_stats"],
+}
+
+BASE_CONFIG_SCHEMA = {
+    "type": "object",
+    "properties": {
+        "server_name": {"type": "string", "minlength": 1},
+        "report_stats": {"type": "boolean"},
+        "log_config": {"type": "string", "minlength": 1},
+        "media_store_path": {"type": "string", "minlength": 1},
+        "uploads_path": {"type": "string", "minlength": 1},
+        "pid_file": {"type": "string", "minlength": 1},
+        "listeners": {"type": "array"},
+        "acme": {"type": "object"},
+        "database": {"type": "object"},
+        "tls_certificate_path": {"type": "string", "minlength": 1},
+        "tls_private_key_path": {"type": "string", "minlength": 1},
+        "server_config_in_use": {"type": "boolean"},
+    },
+    "required": ["server_name", "report_stats", "database"],
+}
+
+CERT_PATHS_SCHEMA = {
+    "type": "object",
+    "properties": {
+        "cert_path": {"type": "string", "minlength": 1},
+        "cert_key_path": {"type": "string", "minlength": 1},
+    },
+    "required": ["cert_path", "cert_key_path"],
+}
+
+CERTS_SCHEMA = {
+    "type": "object",
+    "properties": {
+        "cert": {"type": "string", "minlength": 1},
+        "cert_key": {"type": "string", "minlength": 1},
+    },
+    "required": ["cert", "cert_key"],
+}
+
+PORTS_SCHEMA = {
+    "type": "object",
+    "properties": {"ports": {"type": "array"}},
+    "required": ["ports"],
+}

synapse_topology/controller/server/server.py

@@ -0,0 +1,122 @@
+from os.path import abspath, dirname, join
+
+from canonicaljson import json
+from synapse_topology import model
+
+from twisted.web.static import File
+
+from .utils import port_checker
+
+from . import error_handlers
+from .schemas import (
+    BASE_CONFIG_SCHEMA,
+    SERVERNAME_SCHEMA,
+    CERT_PATHS_SCHEMA,
+    CERTS_SCHEMA,
+    PORTS_SCHEMA,
+)
+from .utils import validate_schema, log_body_if_fail
+
+from . import app
+
+import subprocess
+import sys
+
+
+@app.route("/topology_webui/", branch=True)
+def server_webui(request):
+    client_path = abspath(join(dirname(abspath(__file__)), "../../view/webui"))
+    print(client_path)
+    return File(client_path)
+
+
+@app.route("/setup", methods=["GET"])
+def get_config_setup(request):
+    return json.dumps(
+        {
+            model.constants.CONFIG_LOCK: model.config_in_use(),
+            "config_dir": model.get_config_dir(),
+        }
+    )
+
+
+@app.route("/servername", methods=["GET"])
+def get_server_name(request):
+    return model.get_server_name()
+
+
+@app.route("/servername", methods=["POST"])
+@validate_schema(SERVERNAME_SCHEMA)
+def set_server_name(request, body):
+    model.generate_base_config(**body)
+
+
+@app.route("/secretkey", methods=["GET"])
+def get_secret_key(request):
+    return json.dumps({"secret_key": model.get_secret_key()})
+
+
+@app.route("/config", methods=["GET"])
+def get_config(request):
+    return str(model.get_config())
+
+
+@app.route("/config", methods=["POST"])
+@validate_schema(BASE_CONFIG_SCHEMA)
+def set_config(request, body):
+    model.set_config(body)
+
+
+with app.subroute("/config") as app:
+    for config in model.constants.CONFIGS:
+
+        @app.route("/config/{}".format(config), methods=["GET"])
+        def get_sub_config(request, sub_config):
+            return model.get_config(sub_config=config)
+
+        @app.route("/config/{}".format(config), methods=["POST"])
+        def set_sub_config(request, sub_config):
+            model.set_config(json.loads(request.content.read()), sub_config=config)
+
+
+@app.route("/testcertpaths", methods=["POST"])
+@log_body_if_fail
+@validate_schema(CERT_PATHS_SCHEMA)
+def test_cert_paths(request, body):
+    result = {}
+    config_path = model.get_config_dir()
+    for name, path in body.items():
+        path = abspath(join(config_path, path))
+        try:
+            with open(path, "r"):
+                result[name] = {"invalid": False, "absolute_path": path}
+        except:
+            result[name] = {"invalid": True}
+    return json.dumps(result)
+
+
+@app.route("/certs", methods=["POST"])
+@validate_schema(CERTS_SCHEMA)
+def upload_certs(request, body):
+    model.add_certs(**body)
+
+
+@app.route("/ports", methods=["POST"])
+@validate_schema(PORTS_SCHEMA)
+def check_ports(request, body):
+    results = []
+    for port in body["ports"]:
+        results.append(port_checker(port))
+    return json.dumps({"ports": results})
+
+
+@app.route("/iw", methods=["POST"])
+def start_synapse(request):
+    print("Start")
+    subprocess.Popen(["synctl", "start", model.get_config_dir() + "/homeserver.yaml"])
+    sys.exit()
+
+
+@app.route("/favicon.ico")
+def noop(request):
+    return

synapse_topology/controller/server/utils.py

@@ -0,0 +1,48 @@
+from functools import wraps
+
+from canonicaljson import json
+from jsonschema import validate
+
+from contextlib import closing
+import socket
+
+
+def validate_schema(schema):
+    def _wrap_validate(func):
+        @wraps(func)
+        def _do_validate(request):
+            body = json.loads(request.content.read())
+            validate(instance=body, schema=schema)
+            return func(request, body)
+
+        return _do_validate
+
+    return _wrap_validate
+
+
+def port_checker(port):
+    if port < 0 or 65535 < port:
+        return False
+
+    with closing(socket.socket(socket.AF_INET, socket.SOCK_STREAM)) as sock:
+        try:
+            sock.bind((socket.gethostname(), port))
+            sock.listen()
+            sock.close()
+            return True
+        except:
+            return False
+
+
+def log_body_if_fail(func):
+    @wraps(func)
+    def _log_wrapper(request):
+        try:
+            return func(request)
+        except Exception:
+            body = json.loads(request.content.read())
+            print(body)
+            raise
+
+    return _log_wrapper
+

synapse_topology/docs/README.rst

@@ -0,0 +1,16 @@
+Backend
+=======
+::
+
+  Make sure you have synapse and klein installed in your pip env
+  Windows Right click __init__.py and select run with python
+  *nix: ./__init__.py
+
+Frontend
+========
+Start the Backend and
+
+.. code:: bash
+
+  cd view/webui
+  yarn watch

synapse_topology/model/__init__.py

@@ -0,0 +1,104 @@
+import os.path as path
+
+import yaml
+
+from synapse.config.homeserver import HomeServerConfig
+
+from .constants import (
+    BASE_CONFIG,
+    CONFIG_LOCK,
+    CONFIG_LOCK_DATA,
+    DATA_SUBDIR,
+    SERVER_NAME,
+)
+from .errors import BasConfigInUseError, BaseConfigNotFoundError, ConfigNotFoundError
+
+import subprocess
+
+
+def set_config_dir(conf_dir):
+    global config_dir
+    config_dir = path.abspath(conf_dir)
+
+
+def get_config(sub_config=BASE_CONFIG):
+    if sub_config:
+        conf_path = path.join(config_dir, sub_config)
+    try:
+        with open(conf_path, "r") as f:
+            return yaml.safe_load(f)
+    except FileNotFoundError:
+        raise BaseConfigNotFoundError() if sub_config == BASE_CONFIG else ConfigNotFoundError(
+            sub_config
+        )
+
+
+def get_config_dir():
+    return config_dir
+
+
+def set_config(config, sub_config=BASE_CONFIG):
+    if sub_config == BASE_CONFIG and config_in_use():
+        raise BasConfigInUseError()
+    with open(path.join(config_dir, sub_config), "w") as f:
+        f.write(yaml.dump(config))
+
+
+def config_in_use():
+    """
+    Checks if we set whether the config is in use. If it was set up by the system
+    but synapse wasn't launched yet we will have set this to False. However if
+    it's not present we assume someone else has set up synapse before so we assume
+    the config is in use.
+    """
+    try:
+        return get_config().get(CONFIG_LOCK, True)
+    except FileNotFoundError:
+        return False
+
+
+def generate_base_config(server_name, report_stats):
+    if config_in_use():
+        raise BasConfigInUseError()
+
+    print(config_dir)
+    conf = HomeServerConfig().generate_config(
+        config_dir,
+        path.join(config_dir, DATA_SUBDIR),
+        server_name,
+        generate_secrets=True,
+        report_stats=report_stats,
+    )
+
+    with open(path.join(config_dir, BASE_CONFIG), "w") as f:
+        f.write(conf)
+        f.write(CONFIG_LOCK_DATA)
+
+
+def get_server_name():
+    config = get_config()
+    if config:
+        return config.get(SERVER_NAME)
+
+
+def get_secret_key():
+    config = get_config()
+    server_name = config.get(SERVER_NAME)
+    signing_key_path = path.join(config_dir, server_name + ".signing.key")
+    subprocess.run(["generate_signing_key.py", "-o", signing_key_path])
+    with open(signing_key_path, "r") as f:
+        return f.read()
+
+
+def verify_yaml():
+    pass
+
+
+def add_certs(cert, cert_key):
+    with open(
+        path.join(config_dir, get_server_name() + ".tls.crt"), "w"
+    ) as cert_file, open(
+        path.join(config_dir, get_server_name() + ".tls.key"), "w"
+    ) as key_file:
+        cert_file.write(cert)
+        key_file.write(cert_key)

synapse_topology/model/constants.py

@@ -0,0 +1,25 @@
+# Paths
+BASE_CONFIG = "homeserver.yaml"
+# TODO: fill in further configs
+CONFIGS = [BASE_CONFIG, "user.yaml", "optimizations.yaml", "something.yaml"]
+DATA_SUBDIR = "data"
+
+# Config options
+SERVER_NAME = "server_name"
+CONFIG_LOCK = "server_config_in_use"
+SECRET_KEY = "macaroon_secret_key"
+
+CONFIG_LOCK_DATA = """
+
+##  CONFIG LOCK ##
+
+
+# Specifies whether synapse has been started with this config.
+# If set to True the setup util will not go through the initialization
+# phase which sets the server name and server keys.
+{}: False
+
+
+""".format(
+    CONFIG_LOCK
+)

synapse_topology/model/errors.py

@@ -0,0 +1,18 @@
+from .constants import BASE_CONFIG
+
+
+class ConfigNotFoundError(FileNotFoundError):
+    def __init__(self, config_name):
+        self.config_name = config_name
+
+    def get_config_name(self):
+        return self.config_name
+
+
+class BaseConfigNotFoundError(ConfigNotFoundError):
+    def __init__(self):
+        super().__init__(BASE_CONFIG)
+
+
+class BasConfigInUseError(Exception):
+    pass

synapse_topology/view/webui/.babelrc

@@ -0,0 +1,9 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react",
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-object-rest-spread"
+  ],
+}

synapse_topology/view/webui/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

synapse_topology/view/webui/fonts/SIL Open Font License.txt

@@ -0,0 +1,46 @@
+Digitized data copyright (c) 2010 Google Corporation
+	with Reserved Font Arimo, Tinos and Cousine.
+Copyright (c) 2012 Red Hat, Inc.
+	with Reserved Font Name Liberation.
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide development of collaborative font projects, to support the font creation efforts of academic and linguistic communities, and to provide a free and open framework in which fonts may be shared and improved in partnership with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and redistributed freely as long as they are not sold by themselves. The fonts, including any derivative works, can be bundled, embedded, redistributed and/or sold with any software provided that any reserved names are not used by derivative works. The fonts and derivatives, however, cannot be released under any other type of license. The requirement for fonts to remain under this license does not apply to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright Holder(s) under this license and clearly marked as such. This may include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting, or substituting -- in part or in whole -- any of the components of the Original Version, by changing formats or by porting the Font Software to a new environment.
+
+"Author" refers to any designer, engineer, programmer, technical writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining a copy of the Font Software, to use, study, copy, merge, embed, modify, redistribute, and sell modified and unmodified copies of the Font Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components, in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled, redistributed and/or sold with any software, provided that each copy contains the above copyright notice and this license. These can be included either as stand-alone text files, human-readable headers or in the appropriate machine-readable metadata fields within text or binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font Name(s) unless explicit written permission is granted by the corresponding Copyright Holder. This restriction only applies to the primary font name as presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font Software shall not be used to promote, endorse or advertise any Modified Version, except to acknowledge the contribution(s) of the Copyright Holder(s) and the Author(s) or with their explicit written permission.
+
+5) The Font Software, modified or unmodified, in part or in whole, must be distributed entirely under this license, and must not be distributed under any other license. The requirement for fonts to remain under this license does not apply to any document created using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER DEALINGS IN THE FONT SOFTWARE.

synapse_topology/view/webui/fonts/matrix-logo.svg

@@ -0,0 +1,5 @@
+<svg width="75" height="32" xmlns="http://www.w3.org/2000/svg">
+  <g fill="#2D2D2D" fill-rule="nonzero">
+    <path d="M.936.732V31.25H3.13v.732H.095V0h3.034v.732zM9.386 10.407v1.544h.044a4.461 4.461 0 0 1 1.487-1.368c.58-.323 1.245-.485 1.993-.485.72 0 1.377.14 1.972.42.595.279 1.047.771 1.355 1.477.338-.5.796-.941 1.377-1.323.58-.383 1.266-.574 2.06-.574.602 0 1.16.074 1.674.22.514.148.954.383 1.322.707.366.323.653.746.859 1.268.205.522.308 1.15.308 1.887v7.633H20.71v-6.464c0-.383-.015-.743-.044-1.082a2.305 2.305 0 0 0-.242-.882 1.473 1.473 0 0 0-.584-.596c-.257-.146-.606-.22-1.047-.22-.44 0-.796.085-1.068.253-.272.17-.485.39-.639.662a2.654 2.654 0 0 0-.308.927 7.074 7.074 0 0 0-.078 1.048v6.354h-3.128v-6.398c0-.338-.007-.673-.021-1.004a2.825 2.825 0 0 0-.188-.916 1.411 1.411 0 0 0-.55-.673c-.258-.168-.636-.253-1.135-.253a2.33 2.33 0 0 0-.584.1 1.94 1.94 0 0 0-.705.374c-.228.184-.422.449-.584.794-.161.346-.242.798-.242 1.357v6.619H6.434V10.407h2.952zM25.842 12.084a3.751 3.751 0 0 1 1.233-1.17 5.37 5.37 0 0 1 1.685-.629 9.579 9.579 0 0 1 1.884-.187c.573 0 1.153.04 1.74.121.588.081 1.124.24 1.609.475.484.235.88.562 1.19.981.308.42.462.975.462 1.666v5.934c0 .516.03 1.008.088 1.478.058.471.161.824.308 1.06H32.87a4.435 4.435 0 0 1-.22-1.104c-.5.515-1.087.876-1.762 1.081a7.084 7.084 0 0 1-2.071.31c-.544 0-1.05-.067-1.52-.2a3.472 3.472 0 0 1-1.234-.617 2.87 2.87 0 0 1-.826-1.059c-.199-.426-.298-.934-.298-1.522 0-.647.114-1.18.342-1.6.227-.419.52-.753.881-1.004.36-.25.771-.437 1.234-.562.462-.125.929-.224 1.399-.298.47-.073.932-.132 1.387-.176.456-.044.86-.11 1.212-.199.353-.088.631-.217.837-.386.206-.169.301-.415.287-.74 0-.337-.055-.606-.166-.804a1.217 1.217 0 0 0-.44-.464 1.737 1.737 0 0 0-.639-.22 5.292 5.292 0 0 0-.782-.055c-.617 0-1.101.132-1.454.397-.352.264-.558.706-.617 1.323h-3.128c.044-.735.227-1.345.55-1.83zm6.179 4.423a5.095 5.095 0 0 1-.639.165 9.68 9.68 0 0 1-.716.11c-.25.03-.5.067-.749.11a5.616 5.616 0 0 0-.694.177 2.057 2.057 0 0 0-.594.298c-.17.125-.305.284-.408.474-.103.192-.154.434-.154.728 0 .28.051.515.154.706.103.192.242.342.419.453.176.11.381.187.617.231.234.044.477.066.726.066.617 0 1.094-.102 1.432-.309.338-.205.587-.452.75-.739.16-.286.26-.576.297-.87.036-.295.055-.53.055-.707v-1.17a1.4 1.4 0 0 1-.496.277zM43.884 10.407v2.096h-2.291v5.647c0 .53.088.883.264 1.059.176.177.529.265 1.057.265.177 0 .345-.007.507-.022.161-.015.316-.037.463-.066v2.426a7.49 7.49 0 0 1-.882.089 21.67 21.67 0 0 1-.947.022c-.484 0-.944-.034-1.377-.1a3.233 3.233 0 0 1-1.145-.386 2.04 2.04 0 0 1-.782-.816c-.191-.353-.287-.816-.287-1.39v-6.728H36.57v-2.096h1.894v-3.42h3.129v3.42h2.29zM48.355 10.407v2.118h.044a3.907 3.907 0 0 1 1.454-1.754 4.213 4.213 0 0 1 1.036-.497 3.734 3.734 0 0 1 1.145-.176c.206 0 .433.037.683.11v2.912a5.862 5.862 0 0 0-.528-.077 5.566 5.566 0 0 0-.595-.033c-.573 0-1.058.096-1.454.287a2.52 2.52 0 0 0-.958.783 3.143 3.143 0 0 0-.518 1.158 6.32 6.32 0 0 0-.154 1.434v5.14h-3.128V10.407h2.973zM54.039 8.642V6.06h3.128v2.582H54.04zm3.128 1.765v11.405H54.04V10.407h3.128zM58.797 10.407h3.569l2.005 2.978 1.982-2.978h3.459l-3.745 5.339 4.208 6.067h-3.57l-2.378-3.596-2.38 3.596h-3.502l4.097-6.001zM74.094 31.25V.732H71.9V0h3.035v31.982H71.9v-.732z"/>
+  </g>
+</svg>

synapse_topology/view/webui/index.html

@@ -0,0 +1,13 @@
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <title>Topology - The synapse configuration tool</title>
+</head>
+
+<body>
+  <div id="content" />
+  <script src="dist/bundle.js" type="text/javascript"></script>
+</body>
+
+</html>

synapse_topology/view/webui/js/actions/constants.js

@@ -0,0 +1,24 @@
+export const DELEGATION_TYPES = {
+  LOCAL: "local",
+  WELL_KNOWN: "well_known",
+  DNS: "dns",
+}
+
+export const REVERSE_PROXY_TYPES = {
+  CADDY: "CADDY",
+  APACHE: "APACHE",
+  HAPROXY: "HAPROXY",
+  NGINX: "NGINX",
+  OTHER: "OTHER",
+}
+
+export const TLS_TYPES = {
+  ACME: "ACME",
+  TLS: "TLS",
+  REVERSE_PROXY: "REVERSE_PROXY",
+}
+
+export const DATABASE_TYPES = {
+  SQLITE3: "sqlite3",
+  POSTGRES: "psycopg2",
+}

synapse_topology/view/webui/js/actions/index.js

@@ -0,0 +1,255 @@
+import {
+  ADVANCE_UI,
+  BACK_UI,
+  SET_SERVERNAME,
+  SET_STATS,
+  BASE_CONFIG_CHECKED,
+  FAIL,
+  SET_SECRET_KEY,
+  GETTING_SECRET_KEY,
+  SET_DELEGATION,
+  SET_DELEGATION_SERVERNAME,
+  SET_DELEGATION_PORTS,
+  SET_REVERSE_PROXY,
+  SET_TLS,
+  TESTING_TLS_CERT_PATHS,
+  SET_TLS_CERT_PATHS,
+  SET_TLS_CERT_PATHS_VALIDITY,
+  SET_TLS_CERT_FILES,
+  UPLOADING_TLS_CERT_PATHS,
+  TESTING_SYNAPSE_PORTS,
+  SET_SYNAPSE_PORTS,
+  SET_SYNAPSE_PORTS_FREE,
+  SET_DATABASE,
+  SET_CONFIG_DIR,
+  WRITE_CONFIG,
+} from './types';
+
+import {
+  get_server_setup,
+  post_server_name,
+  get_secretkey,
+  post_cert_paths,
+  post_certs,
+  test_ports,
+  post_config,
+  start_synapse,
+} from '../api';
+import { CONFIG_LOCK, CONFIG_DIR } from '../api/constants';
+import { base_config_to_synapse_config } from '../utils/yaml';
+
+export const startup = () => {
+  return dispatch => {
+    get_server_setup().then(
+      result => {
+        dispatch(start(result[CONFIG_LOCK]));
+        dispatch(set_config_dir(result[CONFIG_DIR]));
+      },
+      error => dispatch(fail(error)),
+    )
+  }
+}
+
+const set_config_dir = dir => ({
+  type: SET_CONFIG_DIR,
+  config_dir: dir,
+});
+
+export const generate_secret_keys = consent => {
+  return (dispatch, getState) => {
+    dispatch(getting_secret_keys());
+    post_server_name(getState().base_config.servername, consent)
+      .then(
+        result => dispatch(get_secret_key()),
+        error => dispatch(fail(error))
+      )
+  }
+}
+
+export const set_tls_cert_paths = (cert_path, cert_key_path) => {
+  return dispatch => {
+    dispatch(testing_tls_cert_paths(true));
+    post_cert_paths(cert_path, cert_key_path)
+      .then(
+        result => dispatch(check_tls_cert_path_validity(result)),
+        error => dispatch(fail(error))
+      )
+  }
+}
+
+const set_tls_certs = (cert_path, cert_key_path) => ({
+  type: SET_TLS_CERT_PATHS,
+  cert_path,
+  cert_key_path,
+})
+
+const testing_tls_cert_paths = testing => ({
+  type: TESTING_TLS_CERT_PATHS,
+  testing,
+});
+
+const check_tls_cert_path_validity = (args) => {
+  const { cert_path, cert_key_path } = args
+  console.log("!!!!!!!!!!")
+  console.log(args)
+  console.log("!!!!!!!!!!")
+  return dispatch => {
+    dispatch(testing_tls_cert_paths(false));
+    dispatch(set_tls_certs(cert_path.absolute_path, cert_key_path.absolute_path))
+    dispatch(set_cert_path_validity({ cert_path, cert_key_path }));
+    if (!cert_path.invalid && !cert_key_path.invalid) {
+      dispatch(advance_ui());
+    }
+  }
+}
+
+export const upload_tls_cert_files = (tls_cert_file, tls_cert_key_file) =>
+  dispatch => {
+    dispatch(set_tls_cert_files(tls_cert_file, tls_cert_key_file));
+    dispatch(uploading_tls_cert_files(true));
+    post_certs(tls_cert_file, tls_cert_key_file)
+      .then(
+        result => {
+          dispatch(uploading_tls_cert_files(false));
+          dispatch(advance_ui())
+        },
+        error => dispatch(fail(error)),
+      )
+  }
+
+const uploading_tls_cert_files = uploading => ({
+  type: UPLOADING_TLS_CERT_PATHS,
+  uploading
+})
+
+export const set_tls_cert_files = (tls_cert_file, tls_cert_key_file) => ({
+  type: SET_TLS_CERT_FILES,
+  tls_cert_file,
+  tls_cert_key_file,
+})
+const set_cert_path_validity = ({ cert_path, cert_key_path }) => ({
+  type: SET_TLS_CERT_PATHS_VALIDITY,
+  cert_path_invalid: cert_path.invalid,
+  cert_key_path_invalid: cert_key_path.invalid,
+});
+
+export const getting_secret_keys = () => ({
+  type: GETTING_SECRET_KEY,
+});
+
+export const get_secret_key = () => {
+  return dispatch => {
+    get_secretkey().then(
+      result => dispatch(set_secret_key(result)),
+      error => dispatch(fail(error)),
+    )
+  }
+}
+
+export const set_secret_key = key => ({
+  type: SET_SECRET_KEY,
+  key,
+});
+
+export const start = server_setup => ({
+  type: BASE_CONFIG_CHECKED,
+  base_config_done: server_setup,
+});
+
+export const fail = reason => ({
+  type: FAIL,
+  reason,
+});
+
+export const advance_ui = option => ({
+  type: ADVANCE_UI,
+  option,
+});
+
+export const set_servername = servername => ({
+  type: SET_SERVERNAME,
+  servername,
+});
+
+export const set_stats = consent => ({
+  type: SET_STATS,
+  consent,
+});
+
+export const set_delegation = delegation_type => ({
+  type: SET_DELEGATION,
+  delegation_type,
+});
+
+export const set_delegation_servername = servername => ({
+  type: SET_DELEGATION_SERVERNAME,
+  servername,
+});
+
+export const set_delegation_ports = (federation_port, client_port) => ({
+  type: SET_DELEGATION_PORTS,
+  federation_port,
+  client_port,
+});
+
+export const set_reverse_proxy = proxy_type => ({
+  type: SET_REVERSE_PROXY,
+  proxy_type,
+});
+
+export const set_tls = tls_type => ({
+  type: SET_TLS,
+  tls_type,
+});
+
+export const set_synapse_ports = (federation_port, client_port) => {
+  const fed_port_priv = federation_port < 1024;
+  const client_port_priv = client_port < 1024;
+  return dispatch => {
+    dispatch(testing_synapse_ports(true));
+    dispatch({
+      type: SET_SYNAPSE_PORTS,
+      federation_port,
+      client_port,
+    })
+    test_ports([federation_port, client_port])
+      .then(
+        results => dispatch(update_ports_free(
+          fed_port_priv ? true : results.ports[0],
+          client_port_priv ? true : results.ports[1]
+        )),
+        error => dispatch(fail(error)),
+      )
+  }
+};
+
+export const update_ports_free = (synapse_federation_port_free, synapse_client_port_free) => {
+  return dispatch => {
+    dispatch(testing_synapse_ports(false));
+    dispatch({
+      type: SET_SYNAPSE_PORTS_FREE,
+      synapse_federation_port_free,
+      synapse_client_port_free,
+    });
+    if (synapse_federation_port_free && synapse_client_port_free) {
+      dispatch(advance_ui())
+    }
+  }
+}
+
+export const testing_synapse_ports = verifying => ({
+  type: TESTING_SYNAPSE_PORTS,
+  verifying,
+})
+
+export const set_database = database => ({
+  type: SET_DATABASE,
+  database,
+})
+
+export const write_config = (config, sub_config_name) => {
+  return (dispatch, getState) => {
+    post_config(base_config_to_synapse_config(getState().base_config), sub_config_name)
+      .then(res => start_synapse(), error => dispatch(fail(error)))
+  }
+}

synapse_topology/view/webui/js/actions/types.js

@@ -0,0 +1,24 @@
+export const ADVANCE_UI = 'ADVANCE_UI';
+export const BACK_UI = 'BACK_UI';
+export const SET_SERVERNAME = 'SET_SERVERNAME';
+export const SET_STATS = 'SET_STATS';
+export const BASE_CONFIG_CHECKED = 'BASE_CONFIG_CHECKED';
+export const FAIL = 'NETWORK_FAIL';
+export const SET_SECRET_KEY = 'SET_SECRET_KEY';
+export const GETTING_SECRET_KEY = 'GETTING_SECRET_KEY';
+export const SET_DELEGATION = 'SET_DELEGATION';
+export const SET_DELEGATION_SERVERNAME = 'SET_DELEGATION_SERVERNAME';
+export const SET_DELEGATION_PORTS = 'SET_DELEGATION_PORTS';
+export const SET_REVERSE_PROXY = 'SET_REVERSE_PROXY';
+export const TESTING_TLS_CERT_PATHS = 'TESTING_TLS_CERT_PATHS';
+export const UPLOADING_TLS_CERT_PATHS = 'UPLOADING_TLS_CERT_PATHS';
+export const SET_TLS = 'SET_TLS';
+export const SET_TLS_CERT_PATHS = 'SET_TLS_CERT_PATHS';
+export const SET_TLS_CERT_PATHS_VALIDITY = 'SET_TLS_CERT_PATHS_VALIDITY';
+export const SET_TLS_CERT_FILES = 'SET_TLS_CERT_FILES';
+export const TESTING_SYNAPSE_PORTS = 'TESTING_SYNAPSE_PORTS';
+export const SET_SYNAPSE_PORTS = 'SET_SYNAPSE_PORTS';
+export const SET_SYNAPSE_PORTS_FREE = 'SET_SYNAPSE_PORTS_IN_USE';
+export const SET_DATABASE = 'SET_DATABASE';
+export const SET_CONFIG_DIR = 'SET_CONFIG_DIR';
+export const WRITE_CONFIG = 'WRITE_CONFIG';

synapse_topology/view/webui/js/api/constants.js

@@ -0,0 +1,11 @@
+export const API_URL = "http://localhost:8888/";
+export const SERVER_NAME = "/servername";
+export const SECRET_KEY = "/secretkey";
+export const CONFIG = "/config";
+export const CONFIG_SOMETHING = "/config_something";
+export const SETUP_CHECK = "/setup";
+export const CERT_PATHS = "/testcertpaths";
+export const TEST_PORTS = "/ports";
+export const CONFIG_LOCK = "server_config_in_use";
+export const CONFIG_DIR = "config_dir";
+export const START = "/start";

synapse_topology/view/webui/js/api/index.js

@@ -0,0 +1,89 @@
+import fetchAbsolute from 'fetch-absolute';
+import {
+  API_URL,
+  CONFIG,
+  SECRET_KEY,
+  SERVER_NAME,
+  SETUP_CHECK,
+  CERT_PATHS,
+  TEST_PORTS,
+  START,
+} from './constants';
+
+const fetchAbs = fetchAbsolute(fetch)(API_URL)
+
+export const get_server_name = () =>
+  fetchAbs(SERVER_NAME)
+    .then(res => res.json())
+
+export const post_server_name = (servername, consent) =>
+  fetchAbs(
+    SERVER_NAME,
+    {
+      method: 'POST',
+      body: JSON.stringify({
+        "server_name": servername,
+        "report_stats": consent
+      })
+    }
+  )
+
+export const post_cert_paths = (cert_path, cert_key_path) =>
+  fetchAbs(
+    CERT_PATHS,
+    {
+      method: 'POST',
+      body: JSON.stringify({
+        cert_path,
+        cert_key_path,
+      })
+    }
+  ).then(res => res.json())
+
+export const post_certs = (cert, cert_key) =>
+  fetchAbs(
+    CERT_PATHS,
+    {
+      method: 'POST',
+      body: JSON.stringify({
+        cert,
+        cert_key,
+      })
+    }
+  )
+
+export const test_ports = (ports) =>
+  fetchAbs(
+    TEST_PORTS,
+    {
+      method: 'POST',
+      body: JSON.stringify({
+        ports
+      })
+    }
+  ).then(res => res.json())
+
+export const get_secretkey = () =>
+  fetchAbs(SECRET_KEY)
+    .then(res => res.json())
+    .then(json => json.secret_key)
+
+export const get_config = () => {
+
+};
+
+export const post_config = (config, sub_config_name) =>
+  fetchAbs(
+    sub_config_name ? CONFIG + "/" + sub_config_name : CONFIG,
+    {
+      method: 'POST',
+      body: JSON.stringify(config),
+    }
+  )
+
+
+// Checks if the server's base config has been setup.
+export const get_server_setup = () => fetchAbs(SETUP_CHECK)
+  .then(res => res.json())
+
+export const start_synapse = () => fetchAbs(START)

synapse_topology/view/webui/js/components/BaseIntro.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import style from '../../less/main.less';
+import ContentWrapper from '../containers/ContentWrapper';
+import ButtonDisplay from './ButtonDisplay';
+
+export default ({ onClick }) =>
+  <ContentWrapper>
+    <h1>Synapse Topology</h1>
+    <p>Let's get started.</p>
+    <ButtonDisplay><button onClick={onClick}>SETUP</button></ButtonDisplay>
+  </ContentWrapper>

synapse_topology/view/webui/js/components/ButtonDisplay.jsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+import style from '../../less/main.less';
+
+export default ({ children }) => <div className={style.buttonDisplay}>{children}</div>

synapse_topology/view/webui/js/components/ConfigSelector.jsx

@@ -0,0 +1,14 @@
+import React, { useState } from 'react';
+
+import style from '../../less/main.less';
+
+export default () => {
+  return <ContentWrapper>
+    <h1>Config selection</h1>
+    <p>The base config has already been setup. Please select a config to edit:</p>
+    <p>TODO: .. well .. this.</p>
+    <div>
+      <button />
+    </div>
+  </ContentWrapper>;
+}

synapse_topology/view/webui/js/components/ContentWrapper.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import style from '../../less/main.less';
+
+export default ({ servername, children }) => {
+  if (servername) {
+    return <div>
+      <p className={style.servername}>{servername}</p>
+      <div className={style.contentWrapper}>
+        {children}
+      </div>
+    </div>
+  } else {
+    return <div className={style.contentWrapper}>{children}</div>
+  }
+}

synapse_topology/view/webui/js/components/Database.jsx

@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+
+import ContentWrapper from '../containers/ContentWrapper';
+
+import {
+  DATABASE_TYPES
+} from '../actions/constants'
+import ButtonDisplay from './ButtonDisplay';
+
+export default ({
+  onClick,
+}) => {
+  const defaultDatabase = DATABASE_TYPES.POSTGRES;
+  const [database, setDatabase] = useState(defaultDatabase)
+  return <ContentWrapper>
+    <h1>Database</h1>
+    <p>Synapse can use either SQLite3 or Postgres as it's databse.</p>
+    <p>If you don't have one of those two installed Postgres is the recommended database to use.</p>
+
+    <select defaultValue={defaultDatabase} onChange={event => setDatabase(event.target.value)}>
+      <option value={DATABASE_TYPES.POSTGRES}>PostgreSQL</option>
+      <option value={DATABASE_TYPES.SQLITE3}>SQLite3</option>
+    </select>
+    <ButtonDisplay>
+      <button onClick={() => onClick(database)}>Continue</button>
+    </ButtonDisplay>
+  </ContentWrapper>
+}

synapse_topology/view/webui/js/components/DelegationOptions.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+
+import style from '../../less/main.less';
+import ContentWrapper from '../containers/ContentWrapper';
+import ButtonDisplay from './ButtonDisplay';
+
+export default ({ servername, clickLocal, clickWellKnown, clickDNS }) => {
+  const local_button_text = `This server is ${servername}`;
+  return <ContentWrapper>
+    <h1>Delegation</h1>
+    <p>Other federation servers will connect to {servername}:8448 over the network.</p>
+    <p>
+      If you'd like the synapse install to be hosted on a different server
+      to the one known on the network by '{servername}' you can use delegation.
+    </p>
+    <p>
+      Otherwise click '{local_button_text}'.
+    </p>
+    <p>There are two forms of delegation: </p>
+    <h3>.well_known delegation</h3>
+    <p>
+      {servername} provides the url https://{servername}/.well-known/matrix/server
+      which gives federating servers information about how to contact the actual server
+      hosting the synapse install. (Don't worry! We'll print out the .well-known file for you later.)
+    </p>
+    <h3>DNS SRV delegation</h3>
+    <p>
+      You will need access to {servername}'s domain zone DNS records. This method
+      also requires the synapse install's server to provide a valid TLS cert for {servername}
+    </p>
+    <p>
+      You will need to add an SRV record to {servername}'s DNS zone. (Once again, we'll print
+      the SRV record out for you later.)
+    </p>
+
+    <h3>More info</h3>
+    <p>
+      Confused? I am too. Maybe <a href="https://github.com/matrix-org/synapse/blob/master/docs/federate.md" target="_blank">
+        this can answer some of your questions.
+      </a>
+    </p>
+    <ButtonDisplay>
+      <button onClick={clickLocal}>{local_button_text}</button>
+      <button onClick={clickWellKnown}>Use 'well known'</button>
+      <button onClick={clickDNS}>Use DNS</button>
+    </ButtonDisplay>
+  </ContentWrapper>;
+}

synapse_topology/view/webui/js/components/DelegationPortSelection.jsx

@@ -0,0 +1,76 @@
+import React, { useState } from 'react';
+
+import ContentWrapper from '../containers/ContentWrapper';
+
+import style from '../../less/main.less';
+
+export default ({ onClick }) => {
+  const [fedPort, setFedPort] = useState("");
+  const [clientPort, setClientPort] = useState("");
+  const [clientPortValid, setClientPortValid] = useState(true)
+  const [fedPortValid, setFedPortValid] = useState(true)
+
+  const updateValidity = (port, setValid) => setValid(
+    !port ||
+    (!isNaN(port) && 0 < port && port <= 65535)
+  )
+
+  const onFederationChange = event => {
+    const val = event.target.value;
+    setFedPort(val);
+    updateValidity(val, setFedPortValid);
+  }
+
+  const onClientChange = event => {
+    const val = event.target.value;
+    setClientPort(val);
+    updateValidity(val, setClientPortValid);
+  }
+
+  return <ContentWrapper>
+    <h1>Outward facing ports</h1>
+    <p>
+      Normally other matrix servers will try to contact the Synapse install's server on
+      port 8448 and clients, such as riot, riotX, neo etc., will try to contact
+      the install server on port 443.
+    </p>
+    <p>
+      Delegation let's us tell those servers and clients to try a different port!
+      (Flexible!)
+    </p>
+    <p>
+      It's perfectly fine to leave the defaults. Only change them if you have a
+      real need to.
+    </p>
+    <p>
+      I would recommend using unprivileged ports but I would recommend the
+      default ports more strongly.
+    </p>
+    <p>
+      Please choose the port for other matrix servers to contact:
+    </p>
+    <input
+      type="text"
+      onChange={onFederationChange}
+      className={fedPortValid ? undefined : style.invalidInput}
+      autoFocus
+      placeholder="Use Default 8448"
+    ></input>
+    <p>
+      Please choose the port for clients to contact:
+    </p>
+    <input
+      type="text"
+      onChange={onClientChange}
+      className={clientPortValid ? undefined : style.invalidInput}
+      autoFocus
+      placeholder="Use Default 443"
+    ></input>
+    <div>
+      <button
+        disabled={clientPortValid && fedPortValid ? undefined : true}
+        onClick={() => onClick(fedPort, clientPort)}
+      >Use These Ports</button>
+    </div>
+  </ContentWrapper>
+}

synapse_topology/view/webui/js/components/DelegationSampleConfig.jsx

@@ -0,0 +1,66 @@
+import React from 'react';
+
+import ContentWrapper from '../containers/ContentWrapper';
+import ButtonDisplay from './ButtonDisplay';
+import DownloadOrCopy from './DownloadOrCopy';
+import { DELEGATION_TYPES } from '../actions/constants';
+
+export default ({
+  delegationType,
+  serverConfig,
+  clientConfig,
+  serverConfigFileName,
+  clientConfigFileName,
+  serverName,
+  onClick
+}) => {
+  if (delegationType == DELEGATION_TYPES.DNS) {
+
+    return <ContentWrapper>
+      <h1>ConfigureDelegation</h1>
+      <p>
+        You will need to add the following SRV record to your DNS zone.
+      </p>
+      <pre>
+        <code>
+          {clientConfig}
+        </code>
+      </pre>
+      <DownloadOrCopy content={clientConfig} fileName={clientConfigFileName} />
+      <ButtonDisplay>
+        <button onClick={onClick}>Continue</button>
+      </ButtonDisplay>
+    </ContentWrapper>
+
+  } else {
+
+    return <ContentWrapper>
+      <h1>Configure delegation</h1>
+      <p>
+        The delegation configuration needs to take place outside the installer.
+      </p>
+      <p>
+        You'll need to host the following at https://{serverName}/.well-known/matrix/server
+      </p>
+      <pre>
+        <code>
+          {serverConfig}
+        </code>
+      </pre>
+      <DownloadOrCopy content={serverConfig} fileName={serverConfigFileName} />
+      <p>
+        You'll also need to host the following at https://{serverName}/.well-known/matrix/client
+      </p>
+      <pre>
+        <code>
+          {clientConfig}
+        </code>
+      </pre>
+      <DownloadOrCopy content={clientConfig} fileName={clientConfigFileName} />
+      <ButtonDisplay>
+        <button onClick={onClick}>Continue</button>
+      </ButtonDisplay>
+    </ContentWrapper>;
+
+  }
+}

synapse_topology/view/webui/js/components/DelegationServerName.jsx

@@ -0,0 +1,20 @@
+import React, { useState } from 'react';
+
+import ContentWrapper from '../containers/ContentWrapper';
+
+export default ({ onClick }) => {
+  const [servername, setServerName] = useState("");
+
+  const onChange = event => {
+    setServerName(event.target.value);
+  }
+
+  return <ContentWrapper>
+    <h1>Synapse install's servername.</h1>
+    <p>What is the Synapse Install's server called on the network?</p>
+    <input type="text" onChange={onChange} autoFocus placeholder="host.server"></input>
+    <div>
+      <button disabled={servername ? undefined : true} onClick={() => onClick(servername)}>Continue</button>
+    </div>
+  </ContentWrapper>
+}

synapse_topology/view/webui/js/components/DownloadOrCopy.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import ButtonDisplay from './ButtonDisplay';
+
+const download = (filename, text) => {
+  const e = document.createElement('a');
+  e.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
+  e.setAttribute('download', filename);
+
+  e.style.display = 'none';
+  document.body.appendChild(e);
+
+  e.click();
+
+  document.body.removeChild(e);
+}
+
+export default ({ content, fileName }) =>
+  <ButtonDisplay>
+    <button onClick={() => download(fileName, content)}>Download</button>
+    <button onClick={() => navigator.clipboard.writeText(content)}>Copy</button>
+  </ButtonDisplay>

synapse_topology/view/webui/js/components/Error.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import style from '../../less/main.less';
+import ContentWrapper from '../containers/ContentWrapper';
+
+export default () => {
+  return <ContentWrapper>
+    <h1>Damn!</h1>
+    <p>Has the config server been started?</p>
+  </ContentWrapper>;
+}

synapse_topology/view/webui/js/components/ExportKeys.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import ButtonDisplay from './ButtonDisplay';
+import ContentWrapper from '../containers/ContentWrapper';
+import DownloadOrCopy from './DownloadOrCopy';
+
+import style from '../../less/main.less';
+
+
+export default ({ secret_key_loaded, secret_key, onClick }) => {
+  if (!secret_key_loaded) {
+    return <ContentWrapper>
+      <h1>Generating secret key</h1>
+    </ContentWrapper>;
+  } else {
+    return <ContentWrapper>
+      <h1>Export keys</h1>
+      <p>
+        This is your server's secret key:
+      </p>
+      <p className={style.keyDisplay}>{secret_key}</p>
+      <DownloadOrCopy content={secret_key} fileName="secret_key.txt" />
+      <p>
+        The server uses this to identify
+        itself to other servers. You can use it to retain ownership of the server's
+        name in the event that the server itself becomes irrevocably inaccessible.
+      </p>
+      <p>Keep it safe</p>
+      <ButtonDisplay><button onClick={onClick}>Continue</button></ButtonDisplay>
+    </ContentWrapper>;
+  }
+}

synapse_topology/view/webui/js/components/Loading.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+import style from '../../less/main.less';
+import ContentWrapper from '../containers/ContentWrapper';
+
+export default () => {
+  return <ContentWrapper>
+    <h1>loading..</h1>
+  </ContentWrapper>;
+}

synapse_topology/view/webui/js/components/PortSelection.jsx

@@ -0,0 +1,107 @@
+import React, { useState } from 'react';
+
+import ContentWrapper from '../containers/ContentWrapper';
+
+import style from '../../less/main.less';
+
+export default ({
+  servername,
+  verifyingPorts,
+  fedPortInUse,
+  clientPortInUse,
+  canChangePorts,
+  defaultFedPort,
+  defaultClientPort,
+  onClick,
+}) => {
+  if (verifyingPorts) {
+    return <ContentWrapper><h1>Verifying ports.</h1></ContentWrapper>
+  }
+
+  const [fedPort, setFedPort] = useState(defaultFedPort);
+  const [clientPort, setClientPort] = useState(defaultClientPort);
+  const [clientPortValid, setClientPortValid] = useState(true)
+  const [fedPortValid, setFedPortValid] = useState(true)
+  const [clientPortPriv, setClientPortPriv] = useState(defaultClientPort < 1024)
+  const [fedPortPriv, setFedPortPriv] = useState(defaultFedPort < 1024)
+
+  const updateValidity = (port, setValid) => setValid(
+    !isNaN(port) && 0 < port && port <= 65535
+  )
+
+  const updatePriv = (port, setPriv) => setPriv(
+    port < 1024
+  )
+
+  const onFederationChange = event => {
+    const val = event.target.value ? event.target.value : defaultFedPort;
+    setFedPort(val);
+    updatePriv(val, setFedPortPriv);
+    updateValidity(val, setFedPortValid);
+  }
+
+  const onClientChange = event => {
+    const val = event.target.value ? event.target.value : defaultClientPort;
+    setClientPort(val);
+    updatePriv(val, setClientPortPriv);
+    updateValidity(val, setClientPortValid);
+  }
+
+  return <ContentWrapper>
+    <h1>{servername}'s ports</h1>
+    <p>
+      The synapse install itself will be listening on the following ports.
+    </p>
+    {
+      canChangePorts ?
+        <p>
+          Since you're using a reverse proxy you can change these to anything you
+          like as long as synapse can bind to them. We recommend not using privileged
+          ports within the range 0 to 1024.
+        </p>
+        :
+        <p>
+          Since you're not using a reverse proxy synapse will have to listen on
+          these ports. If any of these ports are already in use (we'll test them when
+          you click the button) go back and change the values you set for the ports
+          there. Otherwise you're going to have to rethink your setup.
+        </p>
+    }
+
+    <p>
+      We will check that the ports are not in use. If they are you can either
+      reconfigure the server that synapse is installed on outside of this installer
+      or you can change the ports as explained above.
+    </p>
+    <p>
+      Note: we can't check whether privileged ports are in use. If you've
+      set a privileged port <b>we will skip the check for that port</b>.
+    </p>
+
+    <h3>Federation Port</h3>
+    <input
+      type="text"
+      onChange={onFederationChange}
+      disabled={canChangePorts ? undefined : true}
+      autoFocus
+      placeholder={defaultFedPort}
+    ></input>
+    {fedPortPriv ? <p>This is a privileged port.</p> : undefined}
+
+    <h3>Client Port</h3>
+    <input
+      type="text"
+      onChange={onClientChange}
+      disabled={canChangePorts ? undefined : true}
+      autoFocus
+      placeholder={defaultClientPort}
+    ></input>
+    {clientPortPriv ? <p>This is a privileged port.</p> : undefined}
+    <div>
+      <button
+        disabled={clientPortValid && fedPortValid ? undefined : true}
+        onClick={() => onClick(parseInt(fedPort), parseInt(clientPort))}
+      >Verify These Ports</button>
+    </div>
+  </ContentWrapper>
+}

synapse_topology/view/webui/js/components/ReverseProxy.jsx

@@ -0,0 +1,38 @@
+import React, { useState } from 'react';
+
+import ContentWrapper from '../containers/ContentWrapper';
+
+import {
+  REVERSE_PROXY_TYPES
+} from '../actions/constants'
+
+
+export default ({ onClick }) => {
+  const defaultValue = REVERSE_PROXY_TYPES.NGINX;
+  const [reverseProxy, setReverseProxy] = useState(defaultValue);
+
+  const onChange = event => {
+    console.log("trigered")
+    console.log(event.target)
+    setReverseProxy(event.target.value);
+  }
+
+  return <ContentWrapper>
+    <h1>Reverse Proxy</h1>
+    <p>
+      Please choose the reverse proxy you're using. This is just so we can provide
+      you with a template later, if you already know how you're going to set yours
+      up don't worry too much about this.
+    </p>
+    <select defaultValue={defaultValue} onChange={onChange} >
+      <option value={REVERSE_PROXY_TYPES.APACHE}>Apache</option>
+      <option value={REVERSE_PROXY_TYPES.CADDY}>Caddy</option>
+      <option value={REVERSE_PROXY_TYPES.HAPROXY}>HAProxy</option>
+      <option value={REVERSE_PROXY_TYPES.NGINX}>NGiNX</option>
+      <option value={REVERSE_PROXY_TYPES.OTHER}>Some other Reverse Proxy</option>
+    </select>
+    <div>
+      <button onClick={() => onClick(reverseProxy)}>Safety First</button>
+    </div>
+  </ContentWrapper>
+}

synapse_topology/view/webui/js/components/ReverseProxySampleConfig.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import ContentWrapper from '../containers/ContentWrapper';
+import ButtonDisplay from './ButtonDisplay';
+import DownloadOrCopy from './DownloadOrCopy';
+import { REVERSE_PROXY_TYPES } from '../actions/constants';
+
+export default ({ proxyType, sampleConfig, fileName, onClick }) => {
+  console.log("SFSFD")
+  console.log(sampleConfig)
+  console.log("SFSFD")
+  return <ContentWrapper>
+    <h1>Configure the ReverseProxy</h1>
+    <p>
+      It's time for you to setup the reverse proxy outside of this installer.
+    </p>
+    {
+      proxyType == REVERSE_PROXY_TYPES.OTHER ?
+        <p>
+          Here's a sample config for Apache. Since you chose 'other' for your reverse proxy.
+          You'll have to figure it out for yourself. We believe in you.
+        </p>
+        :
+        <p>
+          We can't do it for you
+        but here's the sample configuration for your {proxyType} proxy.
+        </p>
+    }
+    <pre>
+      <code>
+        {sampleConfig}
+      </code>
+    </pre>
+    <DownloadOrCopy content={sampleConfig} fileName={fileName} />
+    <ButtonDisplay>
+      <button onClick={onClick}>Continue</button>
+    </ButtonDisplay>
+  </ContentWrapper>;
+}

synapse_topology/view/webui/js/components/ServerName.jsx

@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+
+import ContentWrapper from '../containers/ContentWrapper';
+
+export default ({ onClick }) => {
+  const [servername, setServerName] = useState("");
+
+  const onChange = event => {
+    setServerName(event.target.value);
+  }
+
+  return <ContentWrapper>
+    <h1>Select a server name</h1>
+    <p>It's important to choose a good name for your server because it cannot be changed later.</p>
+    <p>
+      The name forms a part of the user id's for the users on the server. Which will look like `@you:server.name`.
+      The name will also be what other servers look up when they're trying to reach this one.
+    </p>
+    <p>
+      Normally the server name is usually just your domain. For example <a target="_blank" href="https://matrix.org">matrix.org</a>'s server is
+      known as `matrix.org`.
+    </p>
+    <input type="text" onChange={onChange} autoFocus placeholder="synapse.dev"></input>
+    <div>
+      <button disabled={servername ? undefined : true} onClick={() => onClick(servername)}>I like it</button>
+    </div>
+  </ContentWrapper>;
+}

synapse_topology/view/webui/js/components/StatsReporter.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import style from '../../less/main.less';
+
+import ButtonDisplay from './ButtonDisplay';
+import ContentWrapper from '../containers/ContentWrapper';
+
+
+export default ({ onClick }) =>
+  <ContentWrapper>
+    <h1>Anonymous Statistics</h1>
+    <p>Would you like to report anonymouse statistics to matrix.org?</p>
+    <ButtonDisplay>
+      <button onClick={() => onClick(true)}>YES</button>
+      <button onClick={() => onClick(false)} className={style.redButton}>NO</button>
+    </ButtonDisplay>
+  </ContentWrapper >

synapse_topology/view/webui/js/components/TLS.jsx

@@ -0,0 +1,77 @@
+import React from 'react';
+
+import style from '../../less/main.less';
+
+import ButtonDisplay from './ButtonDisplay';
+import ContentWrapper from '../containers/ContentWrapper';
+
+const tlsLink = "https://en.wikipedia.org/wiki/Transport_Layer_Security";
+const apacheLink = "http://httpd.apache.org/";
+const caddyLink = "https://caddyserver.com/";
+const haproxyLink = "http://www.haproxy.org/";
+const nginxLink = "https://www.nginx.com/";
+const proxyInfoLink = "https://github.com/matrix-org/synapse/blob/master/docs/reverse_proxy.rst";
+
+export default ({ onClickACME, onClickTLS, onClickReverseProxy }) =>
+  <ContentWrapper>
+    <h1>TLS</h1>
+    <p>
+      I was going to make a <a target="_blank" href={tlsLink}>TLS</a> joke but it
+    was making me insecure..
+    </p>
+    <p>
+      TLS keeps the communication between homeservers secure. To enable TLS you'll
+      need a TLS cert. You can use ACME, provide your own certs, or let the reverse
+      proxy handle the TLS certs instead.
+    </p>
+    <h3>
+      ReverseProxy
+    </h3>
+    <p>
+      It is a good idea to use Synapse behind a reverse proxy such as <a target="_blank" href={apacheLink}>Apache</a>, <a target="_blank" href={caddyLink}>Caddy</a>, <a target="_blank" href={haproxyLink}>HAProxy</a>, or <a target="_blank" href={nginxLink}>NGiNX</a>.
+    </p>
+    <p>
+      The main benefit to this is that the reverse proxy can listen on the privilaged port
+      443 (which clients like riot expect to connect to) on behalf of synapse. The incoming traffic
+      is then forwarded to Synapse on a non privilaged port.
+      <br />
+      You need root to listen on ports 0 to 1024 inclusive and
+      running synapse with root privileges is <b>strongly discouraged</b>.
+      Reverse proxies are more secure, run with root and pass things on like nobody's business.
+      <br />
+      (Note: you can also have synapse use a non privilaged port
+      by using one of the delegation methods mentioned earlier.)
+    </p>
+    <p>
+      If you choose to use a Reverse Proxy (good for you) we'll provide you with
+      configuration templates later. Easy breasy.
+    </p>
+    <p>
+      More information about Reverse Proxies <a target="_blank" href={proxyInfoLink}> in the docs.</a>
+    </p>
+    <h3>
+      ACME
+    </h3>
+    <p>
+      ACME is <strike>a super cool initiative</strike> a protocol that allows TLS
+      certificates to be requested automagically. Synapse supports ACME by requesting
+      certs from Let's Encrypt. This is the easiest way to manage your certs because
+      once you set it up you don't need to manage it.
+    </p>
+    <p>
+      If you wish to use ACME you will need access to port 80 which usually requires
+      root privileges. Do not run Synapse as root. Use a Reverse Proxy or Authbind
+    </p>
+    <h3>
+      Provide your own TLS certs
+    </h3>
+    <p>
+      If you have your own TLS certs for the domain we'll ask you for the path
+      to them or you can upload them for synapse to use.
+    </p>
+    <ButtonDisplay>
+      <button onClick={() => onClickACME()}>Use ACME</button>
+      <button onClick={() => onClickReverseProxy()}>I already/will use a Reverse Proxy with TLS</button>
+      <button onClick={() => onClickTLS()}>I have a TLS cert</button>
+    </ButtonDisplay>
+  </ContentWrapper>

synapse_topology/view/webui/js/components/TLSCertPath.jsx

@@ -0,0 +1,61 @@
+import React, { useState } from 'react';
+
+import style from '../../less/main.less';
+
+import ButtonDisplay from './ButtonDisplay';
+import ContentWrapper from '../containers/ContentWrapper';
+
+
+export default ({ testingCertPaths, uploadingCerts, certPathInvalid, certKeyPathInvalid, onClickCertPath, onClickCertUpload }) => {
+  const [certPath, setCertPath] = useState("");
+  const [certKeyPath, setCertKeyPath] = useState("");
+  const [certFile, setCertFile] = useState();
+  const [certKeyFile, setCertKeyFile] = useState();
+
+  if (testingCertPaths) {
+    return <ContentWrapper><h1>Testing the cert paths.</h1></ContentWrapper>
+  } else if (uploadingCerts) {
+    return <ContentWrapper><h1>Uploading Certs</h1></ContentWrapper>
+  } else {
+    return <ContentWrapper>
+      <h1>TLS Path</h1>
+      <p>
+        If you have a tls cert on your server you can provide a path to it here.
+        The cert needs to be a `.pem` file that includes the
+        full certificate chain including any intermediate certificates.
+    </p>
+
+      <p>Please enter {certPathInvalid ? "a valid" : "the"} path to the cert</p>
+      <input
+        className={certPathInvalid ? style.invalidInput : undefined}
+        type="text"
+        placeholder="/path/to/your/cert.pem"
+        value={certPath ? certPath : undefined}
+        onChange={e => setCertPath(e.target.value)}
+      />
+
+      <p>Please enter {certKeyPathInvalid ? "a valid" : "the"} path to the cert's key</p>
+      <input
+        className={certKeyPathInvalid ? style.invalidInput : undefined}
+        type="text"
+        placeholder="/path/to/your/cert/key.tls.key"
+        value={certKeyPath ? certKeyPath : undefined}
+        onChange={e => setCertKeyPath(e.target.value)}
+      />
+
+      <button
+        disabled={certPath && certKeyPath ? undefined : true}
+        onClick={() => onClickCertPath(certPath, certKeyPath)}
+      >Use TLS Path</button>
+
+      <h3>OR..</h3>
+      <h1>Upload a TLS cert</h1>
+      <p>Upload a cert file.</p>
+      <input type="file" name="cert" onChange={e => setCertFile(e.target.files[0])} />
+      <p>Upload the cert's private key file.</p>
+      <input type="file" name="certkey" onChange={e => setCertKeyFile(e.target.files[0])} />
+      <button disabled={certFile && certKeyFile ? undefined : true} onClick={() => onClickCertUpload(certFile, certKeyFile)}>Upload cert</button>
+
+    </ContentWrapper >
+  }
+}

synapse_topology/view/webui/js/components/UI.jsx

@@ -0,0 +1,83 @@
+import React from 'react';
+
+import style from '../../less/main.less';
+
+import {
+  BASE_INTRO_UI,
+  SERVER_NAME_UI,
+  STATS_REPORT_UI,
+  KEY_EXPORT_UI,
+  DELEGATION_OPTIONS_UI,
+  WELL_KNOWN_UI,
+  DNS_UI,
+  WORKER_UI,
+  TLS_UI,
+  REVERSE_PROXY_UI,
+  PORT_SELECTION_UI,
+  REVERSE_PROXY_TEMPLATE_UI,
+  LOADING_UI,
+  ERROR_UI,
+  DELEGATION_SERVER_NAME_UI,
+  TLS_CERTPATH_UI,
+  DELEGATION_PORT_SELECTION_UI,
+  DELEGATION_TEMPLATE_UI,
+  DATABASE_UI,
+} from '../reducers/ui_constants';
+
+import Error from '../components/Error';
+import Loading from '../components/Loading';
+
+import IntroUi from '../containers/BaseIntro';
+import ServerName from '../containers/ServerName';
+import StatsReporter from '../containers/StatsReporter';
+import ExportKeys from '../containers/ExportKeys';
+import DelegationOptions from '../containers/DelegationOptions';
+import DelegationServerName from '../containers/DelegationServerName';
+import ReverseProxy from '../containers/ReverseProxy';
+import TLS from '../containers/TLS';
+import TLSCertPath from '../containers/TLSCertPath';
+import DelegationPortSelection from '../containers/DelegationPortSelection';
+import PortSelection from '../containers/PortSelection';
+import ReverseProxySampleConfig from '../containers/ReverseProxySampleConfig';
+import DelegationSampleConfig from '../containers/DelegationSampleConfig';
+import Database from '../containers/Database';
+
+export default ({ active_ui, dispatch }) => {
+  console.log(`switching to ui ${active_ui}`)
+  switch (active_ui) {
+    case LOADING_UI:
+      return <Loading />
+    case ERROR_UI:
+      return <Error />
+    case BASE_INTRO_UI:
+      return < IntroUi />
+    case SERVER_NAME_UI:
+      return <ServerName />
+    case STATS_REPORT_UI:
+      return <StatsReporter />
+    case KEY_EXPORT_UI:
+      return <ExportKeys />
+    case DELEGATION_OPTIONS_UI:
+      return <DelegationOptions />
+    case DELEGATION_SERVER_NAME_UI:
+      return <DelegationServerName />
+    case DELEGATION_PORT_SELECTION_UI:
+      return <DelegationPortSelection />
+    case REVERSE_PROXY_UI:
+      return <ReverseProxy />
+    case TLS_UI:
+      return <TLS />
+    case TLS_CERTPATH_UI:
+      return <TLSCertPath />
+    case PORT_SELECTION_UI:
+      return <PortSelection />
+    case REVERSE_PROXY_TEMPLATE_UI:
+      return <ReverseProxySampleConfig />
+    case DELEGATION_TEMPLATE_UI:
+      return <DelegationSampleConfig />
+    case DATABASE_UI:
+      return <Database />
+    default:
+      return <h1>how did i get here?</h1>
+  }
+}

synapse_topology/view/webui/js/containers/BaseIntro.js

@@ -0,0 +1,18 @@
+import { connect } from 'react-redux';
+
+import BaseIntro from '../components/BaseIntro';
+
+import { advance_ui } from '../actions';
+
+const mapStateToProps = (state, ownProps) => ({
+
+});
+
+const mapDispathToProps = (dispatch) => ({
+  onClick: () => dispatch(advance_ui())
+});
+
+export default connect(
+  null,
+  mapDispathToProps
+)(BaseIntro);

synapse_topology/view/webui/js/containers/ContentWrapper.js

@@ -0,0 +1,16 @@
+import { connect } from 'react-redux';
+
+import ContentWrapper from '../components/ContentWrapper';
+
+const mapStateToProps = (state, { children }) => ({
+  servername: state.base_config.servername,
+  children,
+})
+
+
+const mapDispatchToProps = (dispatch) => ({
+});
+
+export default connect(
+  mapStateToProps
+)(ContentWrapper);

synapse_topology/view/webui/js/containers/Database.js

@@ -0,0 +1,21 @@
+import { connect } from 'react-redux';
+
+import Database from '../components/Database';
+import { set_database, advance_ui, write_config } from '../actions';
+
+const mapStateToProps = (state) => {
+}
+
+
+const mapDispatchToProps = (dispatch) => ({
+  onClick: database => {
+    dispatch(set_database(database));
+    dispatch(advance_ui());
+    dispatch(write_config())
+  }
+});
+
+export default connect(
+  null,
+  mapDispatchToProps,
+)(Database);

synapse_topology/view/webui/js/containers/DelegationOptions.js

@@ -0,0 +1,32 @@
+import { connect } from 'react-redux';
+
+import DelegationOptions from '../components/DelegationOptions';
+import { set_delegation, advance_ui } from '../actions';
+import { DELEGATION_TYPES } from '../actions/constants';
+
+const mapStateToProps = (state, { children }) => {
+  return {
+    servername: state.base_config.servername,
+  }
+}
+
+
+const mapDispatchToProps = (dispatch) => ({
+  clickLocal: () => {
+    dispatch(advance_ui(DELEGATION_TYPES.LOCAL));
+    dispatch(set_delegation(DELEGATION_TYPES.LOCAL));
+  },
+  clickWellKnown: () => {
+    dispatch(advance_ui(DELEGATION_TYPES.WELL_KNOWN));
+    dispatch(set_delegation(DELEGATION_TYPES.WELL_KNOWN));
+  },
+  clickDNS: () => {
+    dispatch(advance_ui(DELEGATION_TYPES.DNS));
+    dispatch(set_delegation(DELEGATION_TYPES.DNS));
+  }
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(DelegationOptions);

synapse_topology/view/webui/js/containers/DelegationPortSelection.js

@@ -0,0 +1,21 @@
+import { connect } from 'react-redux';
+
+import DelegationPortSelection from '../components/DelegationPortSelection';
+
+import { advance_ui, set_delegation_ports } from '../actions';
+
+const mapStateToProps = (state, ownProps) => ({
+
+});
+
+const mapDispathToProps = (dispatch) => ({
+  onClick: (fedPort, clientPort) => {
+    dispatch(advance_ui());
+    dispatch(set_delegation_ports(fedPort, clientPort));
+  }
+});
+
+export default connect(
+  null,
+  mapDispathToProps
+)(DelegationPortSelection);

synapse_topology/view/webui/js/containers/DelegationSampleConfig.js

@@ -0,0 +1,56 @@
+import { connect } from 'react-redux';
+
+import DelegationSampleConfig from '../components/DelegationSampleConfig';
+
+import { advance_ui } from '../actions';
+
+import DNSConfig from '../templates/dns-srv';
+import FedWellKnownConfig from '../templates/federation-well-known'
+import ClientWellKnownConfig from '../templates/client-well-known'
+import { DELEGATION_TYPES } from '../actions/constants';
+
+// synapseServerName: state.base_config.delegation_server_name ? state.base_config.delegation_server_name : state.base_config.servername,
+
+const serverConfig = state => {
+  if (state.delegation_type == DELEGATION_TYPES.DNS) {
+    return undefined;
+  } else {
+    return FedWellKnownConfig({
+      synapseServerName: state.delegation_servername,
+      delegationSynapsePort: state.delegation_federation_port ? state.delegation_federation_port : 8448,
+    });
+  }
+}
+
+const clientConfig = state => {
+  if (state.delegation_type == DELEGATION_TYPES.WELL_KNOWN) {
+    return ClientWellKnownConfig({
+      synapseServerName: state.delegation_servername,
+      delegationClientPort: state.delegation_client_port ? state.delegation_client_port : 443,
+    });
+  } else {
+    return DNSConfig({
+      serverName: state.servername,
+      synapseServerName: state.delegation_servername,
+      delegationClientPort: state.delegation_client_port ? state.delegation_client_port : 443,
+    })
+  }
+}
+
+const mapStateToProps = state => ({
+  delegationType: state.base_config.delegation_type,
+  serverConfig: serverConfig(state.base_config),
+  clientConfig: clientConfig(state.base_config),
+  serverConfigFileName: `${state.base_config.servername}_delegation.conf`,
+  clientConfigFileName: `${state.base_config.servername}_client_delegation.conf`,
+  serverName: state.base_config.servername,
+});
+
+const mapDispatchToProps = dispatch => ({
+  onClick: () => dispatch(advance_ui()),
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(DelegationSampleConfig);

synapse_topology/view/webui/js/containers/DelegationServerName.js

@@ -0,0 +1,21 @@
+import { connect } from 'react-redux';
+
+import DelegationServerName from '../components/DelegationServerName';
+
+import { advance_ui, set_delegation_servername } from '../actions';
+
+const mapStateToProps = (state, ownProps) => ({
+
+});
+
+const mapDispathToProps = (dispatch) => ({
+  onClick: servername => {
+    dispatch(advance_ui());
+    dispatch(set_delegation_servername(servername));
+  }
+});
+
+export default connect(
+  null,
+  mapDispathToProps
+)(DelegationServerName);

synapse_topology/view/webui/js/containers/ExportKeys.js

@@ -0,0 +1,23 @@
+import { connect } from 'react-redux';
+
+import ExportKeys from '../components/ExportKeys';
+
+import { advance_ui } from '../actions';
+
+const mapStateToProps = (state, ownProps) => {
+  const secret_key_loaded = state.base_config.secret_key_loaded;
+  const secret_key = state.base_config.secret_key;
+  return {
+    secret_key_loaded,
+    secret_key,
+  }
+};
+
+const mapDispatchToProps = (dispatch) => ({
+  onClick: () => dispatch(advance_ui())
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ExportKeys);

synapse_topology/view/webui/js/containers/PortSelection.js

@@ -0,0 +1,44 @@
+import { connect } from 'react-redux';
+
+import PortSelection from '../components/PortSelection';
+
+import { set_synapse_ports } from '../actions';
+import { TLS_TYPES } from '../actions/constants';
+
+const defaultFedPort = state => {
+  console.log(state)
+  if (state.tls == TLS_TYPES.REVERSE_PROXY) {
+    return 8008;
+  }
+
+  return state.delegation_federation_port ? state.delegation_federation_port : 8448;
+}
+
+const defaultClientPort = state => {
+  if (state.tls == TLS_TYPES.REVERSE_PROXY) {
+    return 8008;
+  }
+
+  return state.delegation_federation_port ? state.delegation_federation_port : 443;
+}
+
+const mapStateToProps = (state, ownProps) => ({
+  servername: state.base_config.servername,
+  verifyingPorts: state.base_config.verifying_ports,
+  fedPortInUse: !state.base_config.synapse_federation_port_free,
+  clientPortInUse: !state.base_config.synapse_client_port_free,
+  canChangePorts: state.base_config.tls == TLS_TYPES.REVERSE_PROXY,
+  defaultFedPort: defaultFedPort(state.base_config),
+  defaultClientPort: defaultClientPort(state.base_config),
+});
+
+const mapDispathToProps = (dispatch) => ({
+  onClick: (fedPort, clientPort) => {
+    dispatch(set_synapse_ports(fedPort, clientPort));
+  }
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispathToProps
+)(PortSelection);

synapse_topology/view/webui/js/containers/ReverseProxy.js

@@ -0,0 +1,21 @@
+import { connect } from 'react-redux';
+
+import ReverseProxy from '../components/ReverseProxy';
+
+import { advance_ui, set_reverse_proxy } from '../actions';
+
+const mapStateToProps = (state, ownProps) => {
+
+};
+
+const mapDispatchToProps = (dispatch) => ({
+  onClick: proxy_type => {
+    dispatch(set_reverse_proxy(proxy_type));
+    dispatch(advance_ui());
+  }
+});
+
+export default connect(
+  null,
+  mapDispatchToProps
+)(ReverseProxy);

synapse_topology/view/webui/js/containers/ReverseProxySampleConfig.js

@@ -0,0 +1,47 @@
+import { connect } from 'react-redux';
+
+import ReverseProxySampleConfig from '../components/ReverseProxySampleConfig';
+
+import { advance_ui } from '../actions';
+import { REVERSE_PROXY_TYPES } from '../actions/constants';
+
+import apacheConfig from '../templates/apache';
+import caddyConfig from '../templates/caddy';
+import haproxyConfig from '../templates/haproxy';
+import nginxConfig from '../templates/nginx';
+
+const sampleConfig = reverseProxyType => {
+  switch (reverseProxyType) {
+    case REVERSE_PROXY_TYPES.APACHE:
+      return apacheConfig;
+    case REVERSE_PROXY_TYPES.CADDY:
+      return caddyConfig;
+    case REVERSE_PROXY_TYPES.HAPROXY:
+      return haproxyConfig;
+    case REVERSE_PROXY_TYPES.NGINX:
+      return nginxConfig;
+    case REVERSE_PROXY_TYPES.OTHER:
+      return otherConfig;
+  }
+}
+
+const mapStateToProps = state => ({
+  proxyType: state.base_config.reverse_proxy,
+  sampleConfig: sampleConfig(state.base_config.reverse_proxy)({
+    delegationFedPort: state.base_config.delegation_federation_port ? state.base_config.delegation_federation_port : 8448,
+    delegationClientPort: state.base_config.delegation_client_port ? state.base_config.delegation_client_port : 443,
+    fedPort: state.base_config.synapse_federation_port,
+    clientPort: state.base_config.synapse_client_port,
+    synapseServerName: state.base_config.delegation_server_name ? state.base_config.delegation_server_name : state.base_config.servername,
+  }),
+  fileName: "synapse_reverse_proxy.conf",
+});
+
+const mapDispatchToProps = dispatch => ({
+  onClick: () => dispatch(advance_ui()),
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ReverseProxySampleConfig);

synapse_topology/view/webui/js/containers/ServerName.js

@@ -0,0 +1,21 @@
+import { connect } from 'react-redux';
+
+import ServerName from '../components/ServerName';
+
+import { advance_ui, set_servername } from '../actions';
+
+const mapStateToProps = (state, ownProps) => ({
+
+});
+
+const mapDispathToProps = (dispatch) => ({
+  onClick: servername => {
+    dispatch(advance_ui());
+    dispatch(set_servername(servername));
+  }
+});
+
+export default connect(
+  null,
+  mapDispathToProps
+)(ServerName);

synapse_topology/view/webui/js/containers/StatsReporter.js

@@ -0,0 +1,22 @@
+import { connect } from 'react-redux';
+
+import StatsReporter from '../components/StatsReporter';
+
+import { advance_ui, set_stats, generate_secret_keys } from '../actions';
+
+const mapStateToProps = (state, ownProps) => ({
+
+});
+
+const mapDispathToProps = (dispatch) => ({
+  onClick: consent => {
+    dispatch(advance_ui());
+    dispatch(set_stats(consent));
+    dispatch(generate_secret_keys(consent))
+  }
+});
+
+export default connect(
+  null,
+  mapDispathToProps
+)(StatsReporter);

synapse_topology/view/webui/js/containers/TLS.js

@@ -0,0 +1,31 @@
+import { connect } from 'react-redux';
+
+import TLS from '../components/TLS';
+
+import { advance_ui, set_tls } from '../actions';
+
+import { TLS_TYPES } from '../actions/constants';
+
+const mapStateToProps = (state, ownProps) => ({
+
+});
+
+const mapDispathToProps = (dispatch) => ({
+  onClickACME: () => {
+    dispatch(advance_ui(TLS_TYPES.ACME));
+    dispatch(set_tls(TLS_TYPES.ACME));
+  },
+  onClickTLS: () => {
+    dispatch(advance_ui(TLS_TYPES.TLS));
+    dispatch(set_tls(TLS_TYPES.TLS));
+  },
+  onClickReverseProxy: () => {
+    dispatch(advance_ui(TLS_TYPES.REVERSE_PROXY)),
+      dispatch(set_tls(TLS_TYPES.REVERSE_PROXY))
+  },
+});
+
+export default connect(
+  null,
+  mapDispathToProps
+)(TLS)

synapse_topology/view/webui/js/containers/TLSCertPath.js

@@ -0,0 +1,26 @@
+import { connect } from 'react-redux';
+
+import TLSCertPath from '../components/TLSCertPath';
+
+import { set_tls_cert_paths, upload_tls_cert_files } from '../actions';
+
+const mapStateToProps = state => ({
+  testingCertPaths: state.base_config.testing_cert_paths,
+  uploadingCertPaths: state.base_config.uploading_certs,
+  certPathInvalid: state.base_config.cert_path_invalid,
+  certKeyPathInvalid: state.base_config.cert_key_path_invalid,
+});
+
+const mapDispathToProps = dispatch => ({
+  onClickCertPath: (cert_path, cert_key_path) => {
+    dispatch(set_tls_cert_paths(cert_path, cert_key_path));
+  },
+  onClickCertUpload: (tls_cert_file, tls_key_file) => {
+    dispatch(upload_tls_cert_files(tls_cert_file, tls_key_file));
+  },
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispathToProps
+)(TLSCertPath)

synapse_topology/view/webui/js/containers/UI.js

@@ -0,0 +1,16 @@
+import { connect } from 'react-redux';
+import UI from '../components/UI';
+
+const mapStateToProps = ({ ui }, ownProps) => ({
+  active_ui: ui.active_ui,
+  ...ownProps,
+})
+
+
+const mapDispathToProps = (dispatch, ownProps) => ({
+
+})
+
+export default connect(
+  mapStateToProps,
+)(UI)

synapse_topology/view/webui/js/index.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { render } from 'react-dom';
+import { Provider } from 'react-redux';
+import { createStore, applyMiddleware } from 'redux'
+import thunk from 'redux-thunk';
+import rootReducer from './reducers';
+import UI from './containers/UI';
+import style from '../less/main.less';
+import logo from '../fonts/matrix-logo.svg';
+
+import { startup } from './actions';
+
+const store = createStore(
+  rootReducer,
+  applyMiddleware(thunk),
+  //+  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
+);
+
+store.dispatch(startup());
+
+render(
+  <Provider store={store}>
+    {/* <img className={style.logo} src={logo} /> */}
+    <UI />
+  </Provider>,
+  document.getElementById("content")
+);

synapse_topology/view/webui/js/reducers/index.js

@@ -0,0 +1,10 @@
+import { combineReducers } from 'redux';
+import ui from './reducer-ui';
+import base_config from './reducer-base-config';
+import { get_server_setup } from '../api';
+import { LOADING_UI } from './ui_constants';
+
+export default (state = { ui: { active_ui: LOADING_UI }, base_config: {} }, action) => ({
+  ui: ui(state, action),
+  base_config: base_config(state.base_config, action)
+});

synapse_topology/view/webui/js/reducers/reducer-advanced-config-ui.js

@@ -0,0 +1,7 @@
+const ADVANCED_CONFIG_UI_COMPONENTS = {
+  CONFIG_SELECTION_UI: "config_selection_ui"
+}
+
+export default (state, action) => {
+  return state;
+}

synapse_topology/view/webui/js/reducers/reducer-base-config-ui.js

@@ -0,0 +1,106 @@
+import { ADVANCE_UI, BACK_UI, BASE_CONFIG_CHECKED } from '../actions/types';
+
+import {
+  BASE_INTRO_UI,
+  SERVER_NAME_UI,
+  STATS_REPORT_UI,
+  KEY_EXPORT_UI,
+  DELEGATION_OPTIONS_UI,
+  DELEGATION_SERVER_NAME_UI,
+  WELL_KNOWN_UI,
+  DNS_UI,
+  TLS_UI,
+  REVERSE_PROXY_UI,
+  PORT_SELECTION_UI,
+  REVERSE_PROXY_TEMPLATE_UI,
+  TLS_CERTPATH_UI,
+  DELEGATION_PORT_SELECTION_UI,
+  DELEGATION_TEMPLATE_UI,
+  DATABASE_UI,
+} from './ui_constants';
+
+import {
+  DELEGATION_TYPES, TLS_TYPES
+} from '../actions/constants';
+
+export default ({ ui, base_config }, action) => {
+  switch (action.type) {
+    case BASE_CONFIG_CHECKED:
+      return BASE_INTRO_UI;
+    case ADVANCE_UI:
+      switch (ui.active_ui) {
+        case BASE_INTRO_UI:
+          return SERVER_NAME_UI;
+        case SERVER_NAME_UI:
+          return STATS_REPORT_UI;
+        case STATS_REPORT_UI:
+          return KEY_EXPORT_UI;
+        case KEY_EXPORT_UI:
+          return DELEGATION_OPTIONS_UI;
+        case DELEGATION_OPTIONS_UI:
+          switch (action.option) {
+            // TODO: figure these out
+            case DELEGATION_TYPES.DNS:
+              return DELEGATION_SERVER_NAME_UI;
+            case DELEGATION_TYPES.WELL_KNOWN:
+              return DELEGATION_SERVER_NAME_UI;
+            case DELEGATION_TYPES.LOCAL:
+              return TLS_UI;
+          }
+        case DELEGATION_SERVER_NAME_UI:
+          return DELEGATION_PORT_SELECTION_UI;
+        case DELEGATION_PORT_SELECTION_UI:
+          return TLS_UI;
+        case TLS_UI:
+          switch (action.option) {
+            case TLS_TYPES.ACME:
+              return PORT_SELECTION_UI;
+            case TLS_TYPES.TLS:
+              return TLS_CERTPATH_UI;
+            case TLS_TYPES.NONE:
+              return PORT_SELECTION_UI;
+            case TLS_TYPES.REVERSE_PROXY:
+              return REVERSE_PROXY_UI;
+          }
+        case REVERSE_PROXY_UI:
+          return PORT_SELECTION_UI;
+        case TLS_CERTPATH_UI:
+          return PORT_SELECTION_UI;
+        case PORT_SELECTION_UI:
+          return base_config.tls == TLS_TYPES.REVERSE_PROXY ?
+            REVERSE_PROXY_TEMPLATE_UI :
+            base_config.delegation_type != DELEGATION_TYPES.LOCAL ?
+              DELEGATION_TEMPLATE_UI :
+              DATABASE_UI;
+        case REVERSE_PROXY_TEMPLATE_UI:
+          return base_config.delegation_type != DELEGATION_TYPES.LOCAL ?
+            DELEGATION_TEMPLATE_UI :
+            DATABASE_UI;
+        case DELEGATION_TEMPLATE_UI:
+          return DATABASE_UI;
+        case WELL_KNOWN_UI:
+        case DNS_UI:
+        default:
+          return BASE_INTRO_UI;
+      }
+
+    // TODO: Think about how back should work..
+    case BACK_UI:
+      switch (ui.active_ui) {
+        case STATS_REPORT_UI:
+          return SERVER_NAME_UI;
+        case KEY_EXPORT_UI:
+          return STATS_REPORT_UI;
+        case DELEGATION_OPTIONS_UI:
+          return KEY_EXPORT_UI;
+        case WELL_KNOWN_UI:
+          return DELEGATION_OPTIONS_UI;
+        case DNS_UI:
+          return WELL_KNOWN_UI;
+        default:
+          BASE_INTRO_UI;
+      }
+    default:
+      return ui.active_ui;
+  }
+}

synapse_topology/view/webui/js/reducers/reducer-base-config.js

@@ -0,0 +1,129 @@
+import {
+  SET_SERVERNAME,
+  SET_STATS,
+  SET_SECRET_KEY,
+  GETTING_SECRET_KEY,
+  SET_DELEGATION,
+  SET_DELEGATION_SERVERNAME,
+  SET_REVERSE_PROXY,
+  SET_TLS,
+  TESTING_TLS_CERT_PATHS,
+  SET_TLS_CERT_PATHS,
+  SET_TLS_CERT_PATHS_VALIDITY,
+  SET_TLS_CERT_FILES,
+  UPLOADING_TLS_CERT_PATHS,
+  TESTING_SYNAPSE_PORTS,
+  SET_SYNAPSE_PORTS,
+  SET_SYNAPSE_PORTS_FREE,
+  SET_DATABASE,
+  SET_CONFIG_DIR,
+} from "../actions/types";
+
+export default (state = { servername: undefined }, action) => {
+  switch (action.type) {
+    case SET_SERVERNAME:
+      return {
+        ...state,
+        servername: action.servername,
+      }
+    case SET_STATS:
+      return {
+        ...state,
+        report_stats: action.consent,
+      }
+    case GETTING_SECRET_KEY:
+      return {
+        ...state,
+        secret_key_loaded: false,
+      }
+    case SET_SECRET_KEY:
+      return {
+        ...state,
+        secret_key_loaded: true,
+        secret_key: action.key,
+      };
+    case SET_DELEGATION:
+      return {
+        ...state,
+        delegation_type: action.delegation_type,
+      }
+    case SET_DELEGATION_SERVERNAME:
+      return {
+        ...state,
+        delegation_servername: action.servername,
+      }
+    case SET_DELEGATION_SERVERNAME:
+      return {
+        ...state,
+        delegation_federation_port: action.federation_port,
+        delegation_client_port: action.client_port,
+      }
+    case SET_REVERSE_PROXY:
+      return {
+        ...state,
+        reverse_proxy: action.proxy_type,
+      }
+    case SET_TLS:
+      return {
+        ...state,
+        tls: action.tls_type,
+      }
+    case TESTING_TLS_CERT_PATHS:
+      return {
+        ...state,
+        testing_cert_paths: action.testing,
+      }
+    case SET_TLS_CERT_PATHS_VALIDITY:
+      return {
+        ...state,
+        cert_path_invalid: action.cert_path_invalid,
+        cert_key_path_invalid: action.cert_key_path_invalid,
+      }
+    case SET_TLS_CERT_PATHS:
+      return {
+        ...state,
+        tls_cert_path: action.cert_path,
+        tls_cert_key_path: action.cert_key_path,
+      }
+    case SET_TLS_CERT_FILES:
+      return {
+        ...state,
+        tls_cert_file: action.tls_cert_file,
+        tls_cert_key_file: action.tls_cert_key_file,
+      }
+    case UPLOADING_TLS_CERT_PATHS:
+      return {
+        ...state,
+        uploading_certs: action.uploading,
+      }
+    case TESTING_SYNAPSE_PORTS:
+      return {
+        ...state,
+        verifying_ports: action.verifying,
+      }
+    case SET_SYNAPSE_PORTS:
+      return {
+        ...state,
+        synapse_federation_port: action.federation_port,
+        synapse_client_port: action.client_port,
+      }
+    case SET_SYNAPSE_PORTS_FREE:
+      return {
+        ...state,
+        synapse_federation_port_free: action.synapse_federation_port_free,
+        synapse_client_port_free: action.synapse_client_port_free,
+      }
+    case SET_DATABASE:
+      return {
+        ...state,
+        database: action.database,
+      }
+    case SET_CONFIG_DIR:
+      return {
+        ...state,
+        config_dir: action.config_dir,
+      }
+    default:
+      return state;
+  }
+};

synapse_topology/view/webui/js/reducers/reducer-ui.js

@@ -0,0 +1,39 @@
+import base_config_ui from './reducer-base-config-ui';
+import advanced_config_ui from './reducer-advanced-config-ui';
+import { LOADING_UI, ERROR_UI } from './ui_constants';
+import { BASE_CONFIG_CHECKED, FAIL } from '../actions/types';
+
+
+export default (state, action) => {
+  console.log(state)
+  console.log(action)
+  switch (action.type) {
+    case FAIL:
+      return {
+        ...state.ui,
+        active_ui: ERROR_UI
+      }
+    case BASE_CONFIG_CHECKED:
+      if (action.base_config_done) {
+        return {
+          base_config_done: true,
+          active_ui: advanced_config_ui(state, action),
+        }
+      } else {
+        return {
+          base_config_done: false,
+          active_ui: base_config_ui(state, action),
+        }
+      }
+    default:
+      const newstate = { ...state.ui };
+      if ('base_config_done' in state.ui) {
+        if (state.ui.base_config_done) {
+          newstate.active_ui = advanced_ui(state, action);
+        } else {
+          newstate.active_ui = base_config_ui(state, action);
+        }
+      }
+      return newstate;
+  }
+}

synapse_topology/view/webui/js/reducers/state.js

@@ -0,0 +1,34 @@
+const state = {
+  ui: {
+    base_config_done: true,
+    active_ui
+  },
+  base_config: {
+    servername: "server_name",
+    report_stats: false,
+    getting_secret_key: false,
+    secret_key: "asdfsadf",
+    delegation_type: "local|well_known|DNS_SRV",
+    delegation_server_name: "name",
+    delegation_federation_port: "\"\"|325",
+    delegation_client_port: "\"\"|325",
+    reverse_proxy: "nginx|caddy|apache|haproxy|other|none",
+    tls: "acme|tls|reverseproxy",
+    testing_cert_paths: true,
+    uploading_certs: true,
+    cert_path_invalid: true,
+    cert_key_path_invalid: true,
+    tls_cert_path: "sadfaf",
+    tls_cert_key_path: "sdfasdf",
+    tls_cert_file: "sadfa;dlf;sad;fkla;sdlfjkas;dlfkjas;dflkja;sdfkljadf ------",
+    tls_cert_key_file: "sadfa;dlf;sad;fkla;sdlfjkas;dlfkjas;dflkja;sdfkljadf ------",
+    tls_path: "sdasfaf/a/fdasfd/a/fasd/",
+    verifying_ports: true,
+    synapse_federation_port_free: true,
+    synapse_client_port_free: true,
+    synapse_federation_port: 1234,
+    synapse_client_port: 1234,
+    database: "sqlite3|postgres",
+    config_dir: "sadfasdf",
+  }
+}

synapse_topology/view/webui/js/reducers/ui_constants.js

@@ -0,0 +1,26 @@
+// Base config
+export const BASE_INTRO_UI = "INTRO_UI";
+export const SERVER_NAME_UI = "server_name_ui";
+export const STATS_REPORT_UI = "stats_report_ui";
+export const KEY_EXPORT_UI = "key_export_ui";
+export const DELEGATION_OPTIONS_UI = "delegation_options_ui";
+export const DELEGATION_SERVER_NAME_UI = "delegation_server_name_ui";
+export const DELEGATION_PORT_SELECTION_UI = "delegation_port_selection_ui";
+export const WELL_KNOWN_UI = "well_known_ui";
+export const DNS_UI = "dns_ui";
+export const TLS_UI = "tls_ui";
+export const TLS_CERTPATH_UI = "tls_certpath_ui";
+export const REVERSE_PROXY_UI = "reverse_proxy_ui";
+export const PORT_SELECTION_UI = "port_selection_ui";
+export const REVERSE_PROXY_TEMPLATE_UI = "reverse_proxy_tamplate_ui";
+export const DELEGATION_TEMPLATE_UI = "delegation_tamplate_ui";
+export const DATABASE_UI = "database_ui";
+
+// Advanced Config
+export const CONFIG_SELECTION_UI = "config_selection_ui";
+
+// Loading screen:
+export const LOADING_UI = "loading_ui";
+
+// Error screen:
+export const ERROR_UI = "error_ui";

synapse_topology/view/webui/js/templates/apache.js

@@ -0,0 +1,25 @@
+export default ({
+  delegationFedPort,
+  delegationClientPort,
+  fedPort,
+  clientPort,
+  synapseServerName,
+}) => `
+<VirtualHost *:${delegationClientPort}>
+    SSLEngine on
+    ServerName ${synapseServerName};
+
+    AllowEncodedSlashes NoDecode
+    ProxyPass /_matrix http://127.0.0.1:${clientPort}/_matrix nocanon
+    ProxyPassReverse /_matrix http://127.0.0.1:${clientPort}/_matrix
+</VirtualHost>
+
+<VirtualHost *:${delegationFedPort}>
+    SSLEngine on
+    ServerName ${synapseServerName};
+
+    AllowEncodedSlashes NoDecode
+    ProxyPass /_matrix http://127.0.0.1:${fedPort}/_matrix nocanon
+    ProxyPassReverse /_matrix http://127.0.0.1:${fedPort}/_matrix
+</VirtualHost>
+`

synapse_topology/view/webui/js/templates/caddy.js

@@ -0,0 +1,17 @@
+export default ({
+  delegationFedPort,
+  delegationClientPort,
+  fedPort,
+  clientPort,
+  synapseServerName,
+}) => `${synapseServerName}:${delegationClientPort} {
+  proxy /_matrix http://localhost:${clientPort} {
+    transparent
+  }
+}
+
+${synapseServerName}:${delegationFedPort} {
+  proxy / http://localhost:${fedPort} {
+    transparent
+  }
+}`

synapse_topology/view/webui/js/templates/client-well-known.js

@@ -0,0 +1,12 @@
+export default ({
+  synapseServerName,
+  delegationClientPort,
+}) => `{
+  "m.homeserver": {
+    "base_url": "https://${synapseServerName}${delegationClientPort ? `:${delegationClientPort}` : ""}"
+  },
+}`
+// TODO: Maybe include this?
+// "m.identity_server": {
+//   "base_url": "https://identity.example.com"
+// },

synapse_topology/view/webui/js/templates/dns-srv.js

@@ -0,0 +1,8 @@
+export default ({
+  delegationFedPort,
+  delegationClientPort,
+  fedPort,
+  clientPort,
+  serverName,
+  synapseServerName,
+}) => `_matrix._tcp.${serverName} 3600 IN SRV 10 5 ${delegationClientPort} ${synapseServerName}`

synapse_topology/view/webui/js/templates/federation-well-known.js

@@ -0,0 +1,6 @@
+export default ({
+  synapseServerName,
+  delegationSynapsePort,
+}) => `{
+  "m.server": "${synapseServerName}:${delegationSynapsePort}"
+}`

synapse_topology/view/webui/js/templates/haproxy.js

@@ -0,0 +1,44 @@
+export default ({
+  delegationFedPort,
+  delegationClientPort,
+  fedPort,
+  clientPort,
+  synapseServerName,
+}) => {
+  if (fedPort == clientPort) {
+    return `frontend https
+  bind :::${delegationClientPort} v4v6 ssl crt /etc/ssl/haproxy/ strict-sni alpn h2,http/1.1
+
+  # Matrix client traffic
+  acl matrix-host hdr(host) -i ${synapseServerName}
+  acl matrix-path path_beg /_matrix
+
+  use_backend matrix if matrix-host matrix-path
+
+frontend matrix-federation
+  bind :::${delegationFedPort} v4v6 ssl crt /etc/ssl/haproxy/<your_tls_cert>.pem alpn h2,http/1.1
+  default_backend matrix
+
+backend matrix
+  server matrix 127.0.0.1:${fedPort}
+`
+  } else {
+    return `frontend https
+  bind:::${delegationClientPort} v4v6 ssl crt /etc/ssl/haproxy/ strict-sni alpn h2, http / 1.1
+
+# Matrix client traffic
+acl matrix-host hdr(host) -i ${synapseServerName}
+acl matrix-path path_beg /_matrix
+
+use_backend matrix-client if matrix-host matrix-path
+
+frontend matrix - federation
+bind::: ${delegationFedPort} v4v6 ssl crt /etc/ssl/haproxy/<your_tls_cert>.pem alpn h2,http/1.1
+default_backend matrix
+
+backend matrix
+  server matrix 127.0.0.1:${fedPort}
+
+backend matrix-client 127.0.0.1:${clientPort}`
+  }
+}

synapse_topology/view/webui/js/templates/nginx.js

@@ -0,0 +1,27 @@
+import React from 'react';
+export default ({
+  delegationFedPort,
+  delegationClientPort,
+  fedPort,
+  clientPort,
+  synapseServerName,
+}) => `listen {delegationClientPort} ssl;
+listen [::]:${delegationClientPort} ssl;
+server_name ${synapseServerName};
+
+  location /_matrix {
+    proxy_pass http://localhost:${clientPort};
+    proxy_set_header X-Forwarded-For $remote_addr;
+  }
+}
+
+server {
+  listen ${delegationFedPort} ssl default_server;
+  listen [::]:${delegationFedPort} ssl default_server;
+  server_name ${synapseServerName};
+
+  location / {
+    proxy_pass http://localhost:${fedPort};
+    proxy_set_header X-Forwarded-For $remote_addr;
+  }
+}`

synapse_topology/view/webui/js/utils/yaml.js

@@ -0,0 +1,117 @@
+import yaml from 'yaml';
+import { TLS_TYPES, REVERSE_PROXY_TYPES } from '../actions/constants';
+import { CONFIG_LOCK } from '../api/constants';
+
+const listeners = config => {
+  const listeners = [];
+  if (config.tls == TLS_TYPES.TLS) {
+    listeners.push({
+      port: config.synapse_federation_port,
+      tls: true,
+      bind_addresses: ['::1', '127.0.0.1'],
+      type: "http",
+      x_forwarded: true,
+
+      resources: [{
+        names: ["federation"],
+        compress: false,
+      }],
+    });
+  } else {
+    listeners.push({
+      port: config.synapse_federation_port,
+      tls: true,
+      type: "http",
+
+      resources: [{
+        names: ["federation"],
+      }],
+    });
+  }
+
+  if (config.synapse_client_port == config.synapse_federation_port) {
+    listeners[0].resources[0].names.push("client");
+  } else if (config.tls == TLS_TYPES.TLS) {
+    listeners.push({
+      port: config.synapse_client_port,
+      tls: true,
+      bind_addresses: ['::1', '127.0.0.1'],
+      type: "http",
+      x_forwarded: true,
+
+      resources: [{
+        names: ["client"],
+        compress: false,
+      }],
+    });
+  } else {
+    listeners.push({
+      port: config.synapse_client_port,
+      tls: true,
+      type: "http",
+
+      resources: [{
+        names: ["client"],
+      }],
+    });
+  }
+  return { listeners: listeners };
+}
+
+const tls_paths = config => {
+  if (config.reverse_proxy == REVERSE_PROXY_TYPES.TLS) {
+    return {
+      tls_certificate_path: config.tls_cert_path,
+      tls_private_key_path: config.tls_cert_key_path,
+    }
+  } else if (config.reverser_proxy == REVERSE_PROXY_TYPES.ACME) {
+    return {
+      tls_certificate_path: config.config_dir + "/" + config.server_name + ".tls.cert",
+      tls_private_key_path: config.config_dir + "/" + config.server_name + ".tls.key",
+    }
+  } else {
+    return {}
+  }
+}
+
+const acme = config => {
+  if (config.tls == TLS_TYPES.ACME) {
+    return {
+      acme: {
+        url: "https://acme-v01.api.letsencrypt.org/directory",
+        port: 80,
+        bind_addresses: ['::', '0.0.0.0'],
+        reprovision_threshold: 30,
+        domain: config.delegation_server_name ? config.delegation_server_name : servername,
+        account_key_file: config.config_dir + "/data/acme_account.key",
+      }
+    }
+  } else {
+    return {}
+  }
+}
+
+const database = config => ({
+  database: {
+    name: config.database,
+    args: config.config_dir + "/data/homeserver.db"
+  }
+})
+
+export const base_config_to_synapse_config = config => {
+  const conf = {
+    server_name: config.servername,
+    report_stats: config.report_stats,
+    log_config: config.config_dir + "/" + config.servername + ".log.config",
+    media_store_path: config.config_dir + "/data/media_store",
+    uploads_path: config.config_dir + "/data/uploads",
+    pid_file: config.config_dir + "/data/homeserver.pid",
+    ...listeners(config),
+    ...tls_paths(config),
+    ...acme(config),
+    ...database(config),
+    [CONFIG_LOCK]: true,
+  }
+  console.log(conf)
+  return conf
+}

synapse_topology/view/webui/less/animations.less

@@ -0,0 +1,38 @@
+.rippler {
+  position: relative;
+  overflow: hidden;
+  transform: translate3d(0, 0, 0);
+
+  &:after {
+    content: "";
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+    background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
+    background-repeat: no-repeat;
+    background-position: 50%;
+    transform: scale(10, 10);
+    opacity: 0;
+    transition: transform .5s, opacity 1s;
+  }
+
+  &:active:after {
+    transform: scale(0, 0);
+    opacity: .3;
+    transition: 0s;
+  }
+}
+
+
+.dropshadowed {
+  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+
+  &:hover {
+    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
+  }
+}

synapse_topology/view/webui/less/main.less

@@ -0,0 +1,146 @@
+@import url('./themes.less');
+@import url('./animations.less');
+
+@font-face {
+  font-family: "Helvetica Neue", "Helvetica", Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  src: url('../fonts/LiberationSans-Bold.ttf') format('truetype');
+}
+
+.theme {
+  .dark();
+}
+
+html {
+  box-sizing: border-box;
+  font-family: Ariel, sans-serif;
+  font-size: 2rem;
+}
+
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+body {
+  .theme();
+  background-color: @primary;
+  color: @font;
+  margin: 0;
+}
+
+a {
+  .theme();
+  color: @link;
+  text-decoration: none;
+}
+
+.logo {
+  position: absolute;
+  top:0;
+  right: 0;
+  margin: 0.5rem;
+}
+
+.servername {
+  position: absolute;
+  margin-top: 0.5rem;
+  margin-left: 0.5rem;
+  color: darken(silver, 20%);
+}
+
+
+.contentWrapper {
+  .theme();
+  margin: 0 20% 2rem 20%;
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  justify-content: space-evenly;
+  min-height: 100%;
+
+  .buttonDisplay {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .keyDisplay {
+    word-wrap: break-word;
+  }
+
+  button {
+    .rippler();
+    .dropshadowed();
+    border-radius: 0.5rem;
+    font-size: 1rem;
+    padding: 0.6rem;
+    color: @font;
+    background-color: @tertiary;
+    border: none;
+    display: inline-block;
+    text-transform: capitalize;
+    font-style: bold;
+    color: @primary;
+    margin-left: 0.4rem;
+    margin-right: 0.4rem;
+  }
+
+
+  button[disabled] {
+    background-color: darken(@secondary, 20%);
+    color: lighten(@font, 20%);
+  }
+
+  input, .select {
+    padding: 0.4rem;
+    font-size: 1rem;
+    background-color: @secondary;
+    border-width: 0.1rem;
+    border-radius: 0.5rem;
+    color: lighten(@font, 20%);
+    margin-bottom: 1rem;
+    border-style: solid;
+    border-color: darken(@secondary, 50%);
+  }
+
+  select {
+    .select();
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+
+    &:after {
+      content: ▸;
+      transform: rotate(90deg);
+      position: absolute;
+    }
+  }
+
+  pre {
+    padding: 0.4rem;
+    font-size: 0.6rem;
+    text-align: left;
+    border-style: solid;
+    border-color: darken(@secondary, 50%);
+    border-radius: 0.5rem;
+    text-decoration: none;
+  }
+
+  .redButton {
+    background-color: red;
+  }
+
+  .invalidInput {
+    border-color: red;
+  }
+  p {
+    text-align: justify;
+    text-align-last: center;
+  }
+}
+
+h1 {
+  .theme();
+  font-size: 2rem;
+}

synapse_topology/view/webui/less/themes.less

@@ -0,0 +1,8 @@
+.dark {
+  @primary: #ffffff;
+  @secondary: #f4f4f4;
+  @tertiary: #3b444b;
+  @font:  #333;
+  @highlight: #4AEFF0;
+  @link: #0098d4;
+}

synapse_topology/view/webui/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "synapse_topology_webui",
+  "version": "0.0.0",
+  "description": "A simple webui for initialising the synapse startup",
+  "main": "index.js",
+  "author": "Jorik Schellekens (matrix.org)",
+  "license": "Apache-2.0",
+  "private": true,
+  "devDependencies": {
+    "@babel/cli": "^7.5.5",
+    "@babel/core": "^7.5.5",
+    "@babel/node": "^7.5.5",
+    "@babel/plugin-proposal-object-rest-spread": "^7.5.5",
+    "@babel/preset-env": "^7.5.5",
+    "@babel/preset-react": "^7.0.0",
+    "@babel/register": "^7.5.5",
+    "babel-loader": "^8.0.6",
+    "css-loader": "^3.1.0",
+    "file-loader": "^4.1.0",
+    "html-webpack-plugin": "^3.2.0",
+    "less": "^3.9.0",
+    "less-loader": "^5.0.0",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "redux-devtools-extension": "^2.13.8",
+    "style-loader": "^0.23.1",
+    "webpack": "^4.38.0",
+    "webpack-cli": "^3.3.6",
+    "webpack-dev-server": "^3.7.2"
+  },
+  "scripts": {
+    "build": "webpack -p --progress --config webpack.config.babel.js",
+    "dev-build": "webpack --progress -d --config webpack.config.babel.js",
+    "watch": "webpack --progress -d --config webpack.config.babel.js --watch"
+  },
+  "dependencies": {
+    "fetch-absolute": "^1.0.0",
+    "react-localize-redux": "^3.5.3",
+    "react-redux": "^7.1.0",
+    "redux": "^4.0.4",
+    "redux-thunk": "^2.3.0",
+    "yaml": "^1.6.0"
+  }
+}

synapse_topology/view/webui/webpack.config.babel.js

@@ -0,0 +1,55 @@
+import 'webpack';
+import { Path } from 'path';
+
+export default {
+  entry: __dirname + '/js/index.jsx',
+  output: {
+    path: __dirname + '/dist',
+    filename: 'bundle.js',
+  },
+  resolve: {
+    extensions: ['.js', '.jsx', '.css']
+  },
+  module: {
+    rules: [
+      {
+        test: /\.jsx$/,
+        exclude: /node_modules/,
+        use: ['babel-loader'],
+      },
+      {
+        test: /\.less$/,
+        use: [
+          {
+            loader: 'style-loader',
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              sourceMap: true,
+              modules: {
+                localIdentName: '[local]___[hash:base64:5]'
+              }
+            },
+          },
+          {
+            loader: 'less-loader',
+          },
+        ],
+      },
+      {
+        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              name: '[name].[ext]',
+              outputPath: 'fonts/'
+            }
+          }
+        ]
+      }
+    ]
+  },
+};
+