diff options
Diffstat (limited to 'sdnr/wt/odlux/apps/mediatorApp/src/components/editMediatorServerDialog.tsx')
-rw-r--r-- | sdnr/wt/odlux/apps/mediatorApp/src/components/editMediatorServerDialog.tsx | 63 |
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> |