Fix text for tlx and remove dud component.

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

@@ -6,11 +6,6 @@ import {
   REVERSE_PROXY_TYPES
 } from '../actions/constants'
 
-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 ({ onClick }) => {
   const [reverseProxy, setReverseProxy] = useState(REVERSE_PROXY_TYPES.NONE);
@@ -21,28 +16,7 @@ export default ({ onClick }) => {
 
   return <ContentWrapper>
     <h1>Reverse Proxy</h1>
-    <p>
-      It is recommended 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 chose to use a Reverse Proxy (good for you) we'll provide you with
-      configuration templates later. Easy breasy.
-    </p>
-    <p>
-      More information <a target="_blank" href={proxyInfoLink}> in the docs.</a>
-    </p>
+
     <select defaultValue={REVERSE_PROXY_TYPES.NGINX} onChange={(e) => setReverseProxy(e.target.value)}>
       <option value={REVERSE_PROXY_TYPES.APACHE}>Apache</option>
       <option value={REVERSE_PROXY_TYPES.CADDY}>Caddy</option>

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

@@ -6,12 +6,17 @@ 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, onClickNoTLS }) =>
   <ContentWrapper>
     <h1>TLS</h1>
     <p>
-      I was going to make a <a target="_blank" href={tlsLink}>TLS</a> joke but
+      I was going to make a <a target="_blank" href={tlsLink}>TLS</a> joke but it
     was making me insecure..
     </p>
     <p>
@@ -28,18 +33,41 @@ export default ({ onClickACME, onClickTLS, onClickNoTLS }) =>
       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
     </h3>
     <p>
-      If you have your own TLS certs for the domain name you can specify a path
+      If you have your own TLS certs for the domain you can specify a path
       to them or you can upload them for synapse to use.
     </p>
     <h3>
       ReverseProxy
     </h3>
     <p>
-      Using a ReverseProxy is considered a very good idea.
+      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 <a target="_blank" href={proxyInfoLink}> in the docs.</a>
     </p>
     <h3>
       Don't use TLS
@@ -52,5 +80,7 @@ export default ({ onClickACME, onClickTLS, onClickNoTLS }) =>
       <button onClick={() => onClickTLS()}>I have a TLS cert</button>
       <button onClick={() => onClickReverseProxy()}>Use a Reverse Proxy</button>
     </ButtonDisplay>
-    <button className={style.redButton} onClick={() => onClickNoTLS()}>Do not use TLS</button>
+    <ButtonDisplay>
+      <button className={style.redButton} onClick={() => onClickNoTLS()}>Do not use TLS</button>
+    </ButtonDisplay>
   </ContentWrapper >

synapse_topology/view/webui/less/main.less

@@ -53,6 +53,8 @@ a {
     flex-direction: row;
     justify-content: space-evenly;
     color: lighten(@font, 20%);
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
   }
 
   .keyDisplay {