1 files changed, 140 insertions, 0 deletions
diff --git a/app/features/settings/components/ServerTimeoutField.js b/app/features/settings/components/ServerTimeoutField.js
new file mode 100644
index 0000000..41c2434
--- /dev/null
+++ b/app/features/settings/components/ServerTimeoutField.js
@@ -0,0 +1,140 @@
+// @flow
+
+import { FieldTextStateless } from '@atlaskit/field-text';
+
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import type { Dispatch } from 'redux';
+
+import config from '../../config';
+
+import { setServerTimeout } from '../actions';
+
+type Props = {
+
+    /**
+     * Redux dispatch.
+     */
+    dispatch: Dispatch<*>;
+
+    /**
+     * Default Jitsi Meet Server Timeout in (redux) store.
+     */
+    _serverTimeout: number;
+};
+
+type State = {
+
+     /**
+     * Whether the timeout of the Jitsi Meet Server valid.
+     */
+    isValid: boolean;
+
+    /**
+     * Default Jitsi Meet Server Timeout in (local) state.
+     */
+    serverTimeout: number;
+};
+
+/**
+ * Default Server URL field text placed in the Settings drawer.
+ */
+class ServerTimeoutField extends Component<Props, State> {
+    /**
+     * Initializes a new {@code ServerTimeoutField} instance.
+     *
+     * @inheritdoc
+     */
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            isValid: true,
+            serverTimeout: props._serverTimeout
+        };
+
+        this._onServerTimeoutChange = this._onServerTimeoutChange.bind(this);
+        this._onServerTimeoutSubmit = this._onServerTimeoutSubmit.bind(this);
+    }
+
+    /**
+     * Render function of component.
+     *
+     * @returns {ReactElement}
+     */
+    render() {
+        return (
+            <form onSubmit = { this._onServerTimeoutSubmit }>
+                <FieldTextStateless
+                    invalidMessage
+                        = { 'Invalid Timeout' }
+                    isInvalid = { !this.state.isValid }
+                    isValidationHidden = { this.state.isValid }
+                    label = 'Server Timeout (in seconds)'
+                    onBlur = { this._onServerTimeoutSubmit }
+                    onChange = { this._onServerTimeoutChange }
+                    placeholder = { config.defaultServerTimeout }
+                    shouldFitContainer = { true }
+                    type = 'number'
+                    value = { this.state.serverTimeout } />
+            </form>
+        );
+    }
+
+    _onServerTimeoutChange: (*) => void;
+
+    /**
+     * Updates Server Timeout in (redux) state when it is updated.
+     *
+     * @param {SyntheticInputEvent<HTMLInputElement>} event - Event by which
+     * this function is called.
+     * @returns {void}
+     */
+    _onServerTimeoutChange(event: SyntheticInputEvent<HTMLInputElement>) {
+        this.setState({
+            serverTimeout: Number.parseInt(event.currentTarget.value, 10)
+        }, this._validateServerTimeout);
+    }
+
+    _onServerTimeoutSubmit: (*) => void;
+
+    /**
+     * Updates Server Timeout in (redux) store when it is updated.
+     *
+     * @param {Event} event - Event by which this function is called.
+     * @returns {void}
+     */
+    _onServerTimeoutSubmit(event: Event) {
+        event.preventDefault();
+        if (this.state.isValid) {
+            this.props.dispatch(setServerTimeout(this.state.serverTimeout));
+        }
+    }
+
+    /**
+     * Validates timeout is a valid Number.
+     *
+     * @returns {void}
+     */
+    _validateServerTimeout() {
+        this.setState({
+            isValid: Math.sign(this.state.serverTimeout) === 1
+        });
+    }
+}
+
+/**
+ * Maps (parts of) the redux store to the React props.
+ *
+ * @param {Object} state - The redux state.
+ * @returns {{
+ *     _serverURL: string
+ * }}
+ */
+function _mapStateToProps(state: Object) {
+    return {
+        _serverTimeout: state.settings.serverTimeout
+    };
+}
+
+export default connect(_mapStateToProps)(ServerTimeoutField);