Error reporting for cert paths

2 files changed, 25 insertions, 21 deletions

diff --git a/synapse_topology/webui/src/js/components/TLS.jsx b/synapse_topology/webui/src/js/components/TLS.jsx
index 48c27e17fb..5ddb53b75c 100644
--- a/synapse_topology/webui/src/js/components/TLS.jsx
+++ b/synapse_topology/webui/src/js/components/TLS.jsx
@@ -13,6 +13,7 @@ import { TLS_UI } from '../reducers/ui-constants';
 import { TLS_TYPES, REVERSE_PROXY_TYPES } from '../actions/constants';
 import AccordionToggle from '../containers/AccordionToggle';
 import { nextUI } from '../reducers/setup-ui-reducer';
+import InlineError from './InlineError';
 
 const tlsLink = "https://en.wikipedia.org/wiki/Transport_Layer_Security";
 const apacheLink = "http://httpd.apache.org/";
@@ -31,8 +32,6 @@ export default ({
 
     const defaultType = TLS_TYPES.REVERSE_PROXY;
 
-    const [type, setType] = useState(defaultType);
-
     const [certPath, setCertPath] = useState("");
     const [certKeyPath, setCertKeyPath] = useState("");
 
@@ -41,6 +40,8 @@ export default ({
 
     const toggle = useAccordionToggle(nextUI(TLS_UI));
 
+    console.log(certKeyPathInvalid)
+    console.log(certPathInvalid)
     return <Card>
         <AccordionToggle as={Card.Header} eventKey={TLS_UI}>
             TLS
@@ -53,7 +54,7 @@ export default ({
                     ACME, providing your own certificates, or reverse proxy handling TLS
                     certificates.
                 </p>
-                <Tabs defaultActiveKey={defaultType} onSelect={k => setType(k)}>
+                <Tabs defaultActiveKey={defaultType}>
                     <Tab eventKey={TLS_TYPES.REVERSE_PROXY} title="Reverse Proxy">
                         <p>
                             It is recommended to run Synapse behind a reverse proxy such
@@ -129,23 +130,26 @@ export default ({
                         <p>
                             Specify a path to or upload TLS certs for the domain.
                         </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)}
-                        />
+                        <InlineError error={certPathInvalid ? "The file doesn't exist or can't be accessed." : undefined}>
+                            <input
+                                className={certPathInvalid ? style.invalidInput : undefined}
+                                type="text"
+                                placeholder="/path/to/your/cert.pem"
+                                value={certPath ? certPath : undefined}
+                                onChange={e => setCertPath(e.target.value)}
+                            />
+                        </InlineError>
+
+                        <p>Please enter path to the cert's key</p>
+                        <InlineError error={certKeyPathInvalid ? "The file doesn't exist or can't be accessed." : undefined}>
+                            <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)}
+                            />
+                        </InlineError>
 
                         <button
                             className="inputButton"
diff --git a/synapse_topology/webui/src/js/containers/TLS.js b/synapse_topology/webui/src/js/containers/TLS.js
index 34150577ae..ac30e4cb8b 100644
--- a/synapse_topology/webui/src/js/containers/TLS.js
+++ b/synapse_topology/webui/src/js/containers/TLS.js
@@ -47,6 +47,6 @@ const mapDispathToProps = (dispatch) => ({
 });
 
 export default connect(
-    null,
+    mapStateToProps,
     mapDispathToProps,
 )(TLS)
\ No newline at end of file