Present the Reverse Proxy choice as a TLS config option.

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

@@ -16,5 +16,6 @@ export const REVERSE_PROXY_TYPES = {
 export const TLS_TYPES = {
   ACME: "ACME",
   TLS: "TLS",
+  REVERSE_PROXY: "REVERSE_PROXY",
   NONE: "NONE",
 }

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

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import style from '../../less/main.less';
+
 import ButtonDisplay from './ButtonDisplay';
 import ContentWrapper from '../containers/ContentWrapper';
 
@@ -29,12 +31,26 @@ export default ({ onClickACME, onClickTLS, onClickNoTLS }) =>
     <h3>
       Provide your own
     </h3>
+    <p>
+      If you have your own TLS certs for the domain name you can specify a path
+      to them or you can upload them for synapse to use.
+    </p>
     <h3>
-      ReverseProxy / optout
+      ReverseProxy
     </h3>
+    <p>
+      Using a ReverseProxy is considered a very good idea.
+    </p>
+    <h3>
+      Don't use TLS
+    </h3>
+    <p>
+      Please don't do this.
+    </p>
     <ButtonDisplay>
       <button onClick={() => onClickACME()}>Use ACME</button>
       <button onClick={() => onClickTLS()}>I have a TLS cert</button>
-      <button onClick={() => onClickNoTLS()}>Do not use TLS</button>
+      <button onClick={() => onClickReverseProxy()}>Use a Reverse Proxy</button>
     </ButtonDisplay>
+    <button className={style.redButton} onClick={() => onClickNoTLS()}>Do not use TLS</button>
   </ContentWrapper >

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

@@ -20,9 +20,13 @@ const mapDispathToProps = (dispatch) => ({
     dispatch(set_tls(TLS_TYPES.TLS));
   },
   onClickNoTLS: () => {
-    dispatch(advance_ui());
+    dispatch(advance_ui(TLS_TYPES.NONE));
     dispatch(set_tls(TLS_TYPES.NONE));
   },
+  onClickReverseProxy: () => {
+    dispatch(advance_ui(TLS_TYPES.REVERSE_PROXY)),
+      dispatch(set_tls(TLS_TYPES.REVERSE_PROXY))
+  },
 });
 
 export default connect(

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

@@ -49,8 +49,6 @@ export default (state, action) => {
               return DELEGATION_OPTIONS_UI;
           }
         case DELEGATION_SERVER_NAME_UI:
-          return REVERSE_PROXY_UI;
-        case REVERSE_PROXY_UI:
           return TLS_UI;
         case TLS_UI:
           switch (action.option) {
@@ -60,7 +58,11 @@ export default (state, action) => {
               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 WELL_KNOWN_UI:

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

@@ -11,7 +11,7 @@ const state = {
     delegation_type: "local|well_known|DNS_SRV",
     delegation_server_name: "name",
     reverse_proxy: "nginx|caddy|apache|haproxy|other|none",
-    tls: "acme|tls|none",
+    tls: "acme|tls|none|reverseproxy",
     testing_cert_paths: true,
     uploading_certs: true,
     cert_path_invalid: true,