1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
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
};
|
