1 files changed, 123 insertions, 0 deletions
diff --git a/diplomacy/web/src/gui/forms/connection_form.jsx b/diplomacy/web/src/gui/forms/connection_form.jsx
new file mode 100644
index 0000000..eb7e049
--- /dev/null
+++ b/diplomacy/web/src/gui/forms/connection_form.jsx
@@ -0,0 +1,123 @@
+// ==============================================================================
+// Copyright (C) 2019 - Philip Paquette, Steven Bocco
+//
+//  This program is free software: you can redistribute it and/or modify it under
+//  the terms of the GNU Affero General Public License as published by the Free
+//  Software Foundation, either version 3 of the License, or (at your option) any
+//  later version.
+//
+//  This program is distributed in the hope that it will be useful, but WITHOUT
+//  ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+//  FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more
+//  details.
+//
+//  You should have received a copy of the GNU Affero General Public License along
+//  with this program.  If not, see <https://www.gnu.org/licenses/>.
+// ==============================================================================
+import React from 'react';
+import {Forms} from "../components/forms";
+import {UTILS} from "../../diplomacy/utils/utils";
+import PropTypes from "prop-types";
+import {DipStorage} from "../utils/dipStorage";
+
+export class ConnectionForm extends React.Component {
+    constructor(props) {
+        super(props);
+        // Load fields values from local storage.
+        const initialState = this.initState();
+        const savedState = DipStorage.getConnectionForm();
+        if (savedState) {
+            if (savedState.hostname)
+                initialState.hostname = savedState.hostname;
+            if (savedState.port)
+                initialState.port = savedState.port;
+            if (savedState.username)
+                initialState.username = savedState.username;
+            if (savedState.showServerFields)
+                initialState.showServerFields = savedState.showServerFields;
+        }
+        this.state = initialState;
+        this.updateServerFieldsView = this.updateServerFieldsView.bind(this);
+        this.onChange = this.onChange.bind(this);
+    }
+
+    initState() {
+        return {
+            hostname: window.location.hostname,
+            port: (window.location.protocol.toLowerCase() === 'https:') ? 8433 : 8432,
+            username: '',
+            password: '',
+            showServerFields: false
+        };
+    }
+
+    updateServerFieldsView() {
+        DipStorage.setConnectionshowServerFields(!this.state.showServerFields);
+        this.setState({showServerFields: !this.state.showServerFields});
+    }
+
+    onChange(newState) {
+        const initialState = this.initState();
+        if (newState.hostname !== initialState.hostname)
+            DipStorage.setConnectionHostname(newState.hostname);
+        else
+            DipStorage.setConnectionHostname(null);
+        if (newState.port !== initialState.port)
+            DipStorage.setConnectionPort(newState.port);
+        else
+            DipStorage.setConnectionPort(null);
+        if (newState.username !== initialState.username)
+            DipStorage.setConnectionUsername(newState.username);
+        else
+            DipStorage.setConnectionUsername(null);
+        if (this.props.onChange)
+            this.props.onChange(newState);
+    }
+
+    render() {
+        const onChange = Forms.createOnChangeCallback(this, this.onChange);
+        const onSubmit = Forms.createOnSubmitCallback(this, this.props.onSubmit);
+        return (
+            <form>
+                {Forms.createRow(
+                    Forms.createColLabel('username', 'username:'),
+                    <input className={'form-control'} type={'text'} id={'username'}
+                           value={Forms.getValue(this.state, 'username')} onChange={onChange}/>
+                )}
+                {Forms.createRow(
+                    Forms.createColLabel('password', 'password:'),
+                    <input className={'form-control'} type={'password'} id={'password'}
+                           value={Forms.getValue(this.state, 'password')} onChange={onChange}/>
+                )}
+                <div>
+                    <div className={this.state.showServerFields ? 'mb-2' : 'mb-4'}>
+                    <span className={'button-server'} onClick={this.updateServerFieldsView}>
+                        server settings {this.state.showServerFields ? UTILS.html.UNICODE_BOTTOM_ARROW : UTILS.html.UNICODE_TOP_ARROW}
+                    </span>
+                    </div>
+                    {this.state.showServerFields && (
+                        <div className={'mb-4'}>
+                            {Forms.createRow(
+                                <label className={'col'} htmlFor={'hostname'}>hostname:</label>,
+                                <input className={'form-control'} type={'text'} id={'hostname'}
+                                       value={Forms.getValue(this.state, 'hostname')} onChange={onChange}/>
+                            )}
+                            {Forms.createRow(
+                                <label className={'col'} htmlFor={'port'}>port:</label>,
+                                <input className={'form-control'} type={'number'} id={'port'}
+                                       value={Forms.getValue(this.state, 'port')}
+                                       onChange={onChange}/>
+                            )}
+                        </div>
+                    )}
+                </div>
+                {Forms.createRow('', Forms.createSubmit('connect', true, onSubmit))}
+            </form>
+        );
+    }
+}
+
+ConnectionForm.propTypes = {
+    onChange: PropTypes.func,
+    onSubmit: PropTypes.func
+};