From 27135d9a28224d76300d2d9af2c6e84eaa5688b2 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens <joriks@matrix.org>
Date: Tue, 27 Aug 2019 15:46:53 +0100
Subject: Input validation on servername

---
 .../webui/src/js/components/ServerName.jsx         | 23 ++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

(limited to 'synapse_topology')

diff --git a/synapse_topology/webui/src/js/components/ServerName.jsx b/synapse_topology/webui/src/js/components/ServerName.jsx
index c502bcdbcf..240dd61e04 100644
--- a/synapse_topology/webui/src/js/components/ServerName.jsx
+++ b/synapse_topology/webui/src/js/components/ServerName.jsx
@@ -6,17 +6,22 @@ import { SERVER_NAME_UI } from '../reducers/ui-constants';
 import AccordionToggle from '../containers/AccordionToggle';
 import useAccordionToggle from 'react-bootstrap/useAccordionToggle';
 import { nextUI } from '../reducers/setup-ui-reducer';
+import InlineError from './InlineError';
 
 export default ({ onClick }) => {
 
     const [servername, setServerName] = useState("");
+    const [serverNameValid, setServerNameValid] = useState(true);
+    const validator = /^[0-9a-zA-Z.-]+$/;
 
     const onChange = event => {
 
         setServerName(event.target.value);
+        setServerNameValid(validator.test(event.target.value));
 
     };
 
+
     const toggle = useAccordionToggle(nextUI(SERVER_NAME_UI));
     const decoratedOnClick = () => {
 
@@ -38,16 +43,18 @@ export default ({ onClick }) => {
                 <p>
                     Your server name will be used to establish User IDs (e.g.
                     `@user:server.name`) and Room Aliases (e.g. `#room:server.name`).
-                        </p>
-                <input
-                    type="text"
-                    onChange={onChange}
-                    autoFocus
-                    placeholder="Enter server name"
-                />
+                </p>
+                <InlineError error={!serverNameValid ? "The servername may only be alphanumeric characters" : undefined}>
+                    <input
+                        type="text"
+                        onChange={onChange}
+                        autoFocus
+                        placeholder="Enter server name"
+                    />
+                </InlineError>
                 <div>
                     <button
-                        disabled={servername ? undefined : true}
+                        disabled={servername && serverNameValid ? undefined : true}
                         onClick={decoratedOnClick}
                     >
                         Next
-- 
cgit 1.5.1