1 files changed, 55 insertions, 8 deletions
diff --git a/sdnr/wt/odlux/apps/mediatorApp/src/components/editMediatorServerDialog.tsx b/sdnr/wt/odlux/apps/mediatorApp/src/components/editMediatorServerDialog.tsx
index d38fb0b6e..882a6b37e 100644
--- a/sdnr/wt/odlux/apps/mediatorApp/src/components/editMediatorServerDialog.tsx
+++ b/sdnr/wt/odlux/apps/mediatorApp/src/components/editMediatorServerDialog.tsx
@@ -29,6 +29,7 @@ import { IDispatcher, connect, Connect } from '../../../../framework/src/flux/co
 
 import { addAvaliableMediatorServerAsyncActionCreator, removeAvaliableMediatorServerAsyncActionCreator, updateAvaliableMediatorServerAsyncActionCreator } from '../actions/avaliableMediatorServersActions';
 import { MediatorServer } from '../models/mediatorServer';
+import { Typography } from '@material-ui/core';
 
 export enum EditMediatorServerDialogMode {
   None = "none",
@@ -94,19 +95,54 @@ type EditMediatorServerDialogComponentProps = Connect<undefined, typeof mapDispa
   onClose: () => void;
 };
 
-type EditMediatorServerDialogComponentState = MediatorServer;
+const urlRegex = RegExp("^https?://");
+
+type EditMediatorServerDialogComponentState = MediatorServer & { errorMessage: string[] };
 
 class EditMediatorServerDialogComponent extends React.Component<EditMediatorServerDialogComponentProps, EditMediatorServerDialogComponentState> {
-  constructor (props: EditMediatorServerDialogComponentProps) {
+  constructor(props: EditMediatorServerDialogComponentProps) {
     super(props);
 
     this.state = {
-      ...this.props.mediatorServer
+      ...this.props.mediatorServer,
+      errorMessage: []
     };
   }
 
+  areFieldsValid = () => {
+    return this.state.name.trim().length > 0 && this.state.url.trim().length > 0 && urlRegex.test(this.state.url);
+  }
+
+  createErrorMessages = () => {
+
+    let messages = [];
+    if (this.state.name.trim().length === 0 && this.state.url.trim().length === 0) {
+      messages.push("The server name and the url must not be empty.")
+    }
+    else
+      if (this.state.url.trim().length === 0) {
+        messages.push("The server url must not be empty.")
+
+      } else if (this.state.name.trim().length === 0) {
+        messages.push("The server name must not be empty.")
+      }
+
+    if (!urlRegex.test(this.state.url)) {
+      if (messages.length > 0) {
+        return messages.concat(["The server url must start with 'http(s)://'."])
+      } else {
+        return ["The server url must start with 'http(s)://'."]
+      }
+    }
+
+    return messages;
+  }
+
+
+
   render(): JSX.Element {
     const setting = settings[this.props.mode];
+
     return (
       <Dialog open={this.props.mode !== EditMediatorServerDialogMode.None}>
         <DialogTitle id="form-dialog-title">{setting.dialogTitle}</DialogTitle>
@@ -117,14 +153,25 @@ class EditMediatorServerDialogComponent extends React.Component<EditMediatorServ
           {/* <TextField disabled spellCheck={false} autoFocus margin="dense" id="id" label="Id" type="text" fullWidth value={ this.state._id } onChange={(event)=>{ this.setState({_id: event.target.value}); } } /> */}
           <TextField disabled={setting.readonly} spellCheck={false} margin="dense" id="name" label="Name" type="text" fullWidth value={this.state.name} onChange={(event) => { this.setState({ name: event.target.value }); }} />
           <TextField disabled={setting.readonly} spellCheck={false} margin="dense" id="url" label="Url" type="text" fullWidth value={this.state.url} onChange={(event) => { this.setState({ url: event.target.value }); }} />
+
+          <Typography id="errorMessage" component={"div"} color="error">{this.state.errorMessage.map((error, index) => <div key={index}>{error}</div>)}</Typography>
+
         </DialogContent>
         <DialogActions>
           <Button onClick={(event) => {
-            this.onApply({
-              _id: this.state._id,
-              name: this.state.name,
-              url: this.state.url,
-            });
+
+            if (this.areFieldsValid()) {
+              this.setState({ errorMessage: [] })
+              this.onApply({
+                id: this.state.id,
+                name: this.state.name,
+                url: this.state.url
+              });
+            } else {
+              const errorMessage = this.createErrorMessages()
+              this.setState({ errorMessage: errorMessage })
+            }
+
             event.preventDefault();
             event.stopPropagation();
           }} > {setting.applyButtonText} </Button>