Input validation on servername

1 files changed, 15 insertions, 8 deletions

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