Templates

17 files changed, 283 insertions, 23 deletions

diff --git a/synapse_topology/view/webui/js/components/DelegationSampleConfig.jsx b/synapse_topology/view/webui/js/components/DelegationSampleConfig.jsx
new file mode 100644
index 0000000000..bed9bd7a20
--- /dev/null
+++ b/synapse_topology/view/webui/js/components/DelegationSampleConfig.jsx
@@ -0,0 +1,26 @@
+import React from 'react';
+
+import ContentWrapper from '../containers/ContentWrapper';
+import ButtonDisplay from './ButtonDisplay';
+import DownloadOrCopy from './DownloadOrCopy';
+import { REVERSE_PROXY_TYPES, DELEGATION_TYPES } from '../actions/constants';
+
+export default (delegationType, serverConfig, clientConfig, fileName, serverName, onClick) => {
+  const delegationExplanation = delegationType == DELEGATION_TYPES.DNS ?
+    "You will need to add the following SRV record to your DNS zone." :
+    `You'll need to host the following at https://${serverName}/.well-known/matrix/server`
+  return <ContentWrapper>
+    <h1>Configure delegation</h1>
+    <p>
+      The delegation configuration needs to take place outside the installer.
+    </p>
+    {delegationExplanation}
+    <code>
+      {sampleConfig}
+    </code>
+    <DownloadOrCopy content={sampleConfig} fileName={fileName} />
+    <ButtonDisplay>
+      <button onClick={onClick}>Continue</button>
+    </ButtonDisplay>
+  </ContentWrapper>;
+}
\ No newline at end of file
diff --git a/synapse_topology/view/webui/js/components/DownloadOrCopy.jsx b/synapse_topology/view/webui/js/components/DownloadOrCopy.jsx
new file mode 100644
index 0000000000..34e2302755
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/synapse_topology/view/webui/js/components/ExportKeys.jsx b/synapse_topology/view/webui/js/components/ExportKeys.jsx
index 0e33753eb3..00147e42b8 100644
--- a/synapse_topology/view/webui/js/components/ExportKeys.jsx
+++ b/synapse_topology/view/webui/js/components/ExportKeys.jsx
@@ -2,21 +2,10 @@ import React from 'react';
 
 import ButtonDisplay from './ButtonDisplay';
 import ContentWrapper from '../containers/ContentWrapper';
+import DownloadOrCopy from './DownloadOrCopy';
 
 import style from '../../less/main.less';
 
-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 ({ secret_key_loaded, secret_key, onClick }) => {
   if (!secret_key_loaded) {
@@ -30,10 +19,7 @@ export default ({ secret_key_loaded, secret_key, onClick }) => {
         This is your server's secret key:
       </p>
       <p className={style.keyDisplay}>{secret_key}</p>
-      <ButtonDisplay>
-        <button onClick={() => download("secret_key.txt", secret_key)}>Download</button>
-        <button onClick={() => navigator.clipboard.writeText(secret_key)}>Copy</button>
-      </ButtonDisplay>
+      <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
diff --git a/synapse_topology/view/webui/js/components/PortSelection.jsx b/synapse_topology/view/webui/js/components/PortSelection.jsx
index 143a9d5ccf..3e727c943e 100644
--- a/synapse_topology/view/webui/js/components/PortSelection.jsx
+++ b/synapse_topology/view/webui/js/components/PortSelection.jsx
@@ -69,7 +69,7 @@ export default ({
     }
 
     <p>
-      We will check that the port are not in use. If they are you can either
+      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>
diff --git a/synapse_topology/view/webui/js/components/ReverseProxySampleConfig.jsx b/synapse_topology/view/webui/js/components/ReverseProxySampleConfig.jsx
new file mode 100644
index 0000000000..069fb3ab22
--- /dev/null
+++ b/synapse_topology/view/webui/js/components/ReverseProxySampleConfig.jsx
@@ -0,0 +1,34 @@
+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) => {
+  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>
+    }
+    <code>
+      {sampleConfig}
+    </code>
+    <DownloadOrCopy content={sampleConfig} fileName={fileName} />
+    <ButtonDisplay>
+      <button onClick={onClick}>Continue</button>
+    </ButtonDisplay>
+  </ContentWrapper>;
+}
\ No newline at end of file
diff --git a/synapse_topology/view/webui/js/components/UI.jsx b/synapse_topology/view/webui/js/components/UI.jsx
index b24ec1aa53..dcca04ebe0 100644
--- a/synapse_topology/view/webui/js/components/UI.jsx
+++ b/synapse_topology/view/webui/js/components/UI.jsx
@@ -68,7 +68,6 @@ export default ({ active_ui, dispatch }) => {
       return <PortSelection />
     case WELL_KNOWN_UI:
     case DNS_UI:
-    case WORKER_UI:
     case REVERSE_PROXY_TEMPLATE_UI:
     default:
       return <h1>how did i get here?</h1>
diff --git a/synapse_topology/view/webui/js/containers/DelegationSampleConfig.js b/synapse_topology/view/webui/js/containers/DelegationSampleConfig.js
new file mode 100644
index 0000000000..e69de29bb2
--- /dev/null
+++ b/synapse_topology/view/webui/js/containers/DelegationSampleConfig.js
diff --git a/synapse_topology/view/webui/js/containers/ReverseProxySampleConfig.js b/synapse_topology/view/webui/js/containers/ReverseProxySampleConfig.js
new file mode 100644
index 0000000000..4c6bb94eb0
--- /dev/null
+++ b/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);
\ No newline at end of file
diff --git a/synapse_topology/view/webui/js/reducers/reducer-base-config-ui.js b/synapse_topology/view/webui/js/reducers/reducer-base-config-ui.js
index 3d5142b11a..8e28f59a07 100644
--- a/synapse_topology/view/webui/js/reducers/reducer-base-config-ui.js
+++ b/synapse_topology/view/webui/js/reducers/reducer-base-config-ui.js
@@ -9,12 +9,10 @@ import {
   DELEGATION_SERVER_NAME_UI,
   WELL_KNOWN_UI,
   DNS_UI,
-  WORKER_UI,
   TLS_UI,
   REVERSE_PROXY_UI,
   PORT_SELECTION_UI,
   REVERSE_PROXY_TEMPLATE_UI,
-  LOADING_UI,
   TLS_CERTPATH_UI,
   DELEGATION_PORT_SELECTION_UI,
 } from './ui_constants';
@@ -69,8 +67,6 @@ export default (state, action) => {
         case WELL_KNOWN_UI:
         case DNS_UI:
         case PORT_SELECTION_UI:
-          return WORKER_UI;
-        case WORKER_UI:
           return REVERSE_PROXY_TEMPLATE_UI;
         default:
           return BASE_INTRO_UI;
diff --git a/synapse_topology/view/webui/js/reducers/ui_constants.js b/synapse_topology/view/webui/js/reducers/ui_constants.js
index 5cf4d87b98..8515329765 100644
--- a/synapse_topology/view/webui/js/reducers/ui_constants.js
+++ b/synapse_topology/view/webui/js/reducers/ui_constants.js
@@ -8,7 +8,6 @@ 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 WORKER_UI = "worker_ui";
 export const TLS_UI = "tls_ui";
 export const TLS_CERTPATH_UI = "tls_certpath_ui";
 export const REVERSE_PROXY_UI = "reverse_proxy_ui";
diff --git a/synapse_topology/view/webui/js/templates/apache.js b/synapse_topology/view/webui/js/templates/apache.js
new file mode 100644
index 0000000000..cd7f7797f3
--- /dev/null
+++ b/synapse_topology/view/webui/js/templates/apache.js
@@ -0,0 +1,25 @@
+export default config = ({
+  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>
+`
\ No newline at end of file
diff --git a/synapse_topology/view/webui/js/templates/caddy.js b/synapse_topology/view/webui/js/templates/caddy.js
new file mode 100644
index 0000000000..b2702b2030
--- /dev/null
+++ b/synapse_topology/view/webui/js/templates/caddy.js
@@ -0,0 +1,19 @@
+export default config = ({
+  delegationFedPort,
+  delegationClientPort,
+  fedPort,
+  clientPort,
+  synapseServerName,
+}) => `
+${synapseServerName}:${delegationClientPort} {
+  proxy /_matrix http://localhost:${clientPort} {
+    transparent
+  }
+}
+
+${synapseServerName}:${delegationFedPort} {
+  proxy / http://localhost:${fedPort} {
+    transparent
+  }
+}
+`
\ No newline at end of file
diff --git a/synapse_topology/view/webui/js/templates/client-well-known.js b/synapse_topology/view/webui/js/templates/client-well-known.js
new file mode 100644
index 0000000000..053acadc35
--- /dev/null
+++ b/synapse_topology/view/webui/js/templates/client-well-known.js
@@ -0,0 +1,14 @@
+export default config = ({
+  synapseServerName,
+  delegationClientPort,
+}) => `
+{
+  "m.homeserver": {
+    "base_url": "https://${synapseServerName}${delegationClientPort ? `:${delegationClientPort}` : ""}"
+  },
+}
+`
+// TODO: Maybe include this?
+// "m.identity_server": {
+//   "base_url": "https://identity.example.com"
+// },
\ No newline at end of file
diff --git a/synapse_topology/view/webui/js/templates/dns-srv.js b/synapse_topology/view/webui/js/templates/dns-srv.js
new file mode 100644
index 0000000000..2b4defd739
--- /dev/null
+++ b/synapse_topology/view/webui/js/templates/dns-srv.js
@@ -0,0 +1,10 @@
+export default config = ({
+  delegationFedPort,
+  delegationClientPort,
+  fedPort,
+  clientPort,
+  serverName,
+  synapseServerName,
+}) => `
+_matrix._tcp.${serverName} 3600 IN SRV 10 5 ${delegationClientPort} ${synapseServerName}
+`
\ No newline at end of file
diff --git a/synapse_topology/view/webui/js/templates/federation-well-known.js b/synapse_topology/view/webui/js/templates/federation-well-known.js
new file mode 100644
index 0000000000..63f559f2a2
--- /dev/null
+++ b/synapse_topology/view/webui/js/templates/federation-well-known.js
@@ -0,0 +1,8 @@
+export const config = (
+  synapseServerName,
+  delegationSynapsePort,
+) => `
+{
+  "m.server": "${synapseServerName}:${delegationSynapsePort}"
+}
+`
\ No newline at end of file
diff --git a/synapse_topology/view/webui/js/templates/haproxy.js b/synapse_topology/view/webui/js/templates/haproxy.js
new file mode 100644
index 0000000000..78b21a29a8
--- /dev/null
+++ b/synapse_topology/view/webui/js/templates/haproxy.js
@@ -0,0 +1,47 @@
+export default config = ({
+  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}
+`
+  }
+}
\ No newline at end of file
diff --git a/synapse_topology/view/webui/js/templates/nginx.js b/synapse_topology/view/webui/js/templates/nginx.js
new file mode 100644
index 0000000000..31e5f7e89a
--- /dev/null
+++ b/synapse_topology/view/webui/js/templates/nginx.js
@@ -0,0 +1,29 @@
+export default config = ({
+  delegationFedPort,
+  delegationClientPort,
+  fedPort,
+  clientPort,
+  synapseServerName,
+}) => `
+server {
+    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 example.com;
+
+    location / {
+        proxy_pass http://localhost:${fedPort};
+        proxy_set_header X-Forwarded-For $remote_addr;
+    }
+}
+`
\ No newline at end of file