Skip to content

Commit

Permalink
Network: Wired up front end UI for network editing
Browse files Browse the repository at this point in the history
  • Loading branch information
@stephendade
stephendade committed Oct 6, 2019
1 parent 143f60a commit 4271da3
Show file tree
Hide file tree
Showing 2 changed files with 166 additions and 45 deletions.
9 changes: 9 additions & 0 deletions server/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@ app.post('/api/portmodify', function (req, res) {
sManager.updateLinkSettings(req.body.user);
})

//Get details of a network connection by name
app.post('/api/networkIP', (req, res) => {
networkManager.getConnectionDetails(req.body.conName, (err, conDetails) => {
res.setHeader('Content-Type', 'application/json');
Expand All @@ -79,6 +80,14 @@ app.post('/api/networkIP', (req, res) => {
});
});

//User wants to add/edit/delete network
app.post('/api/networkmodify', (req, res) => {
console.log('Editing network:');
console.log(req.body.conAction);
console.log(req.body.conName);
console.log(req.body.conSettings);
});

http.listen(3001, () =>
console.log('Express server is running on localhost:3001')
);
202 changes: 157 additions & 45 deletions src/networkconfig.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,40 @@ class NetworkConfig extends Component {
netConnectionFilteredSelected: null,
netConnectionDetails: {},
showIP: false,
wpaTypes: ['none', 'ieee8021x', 'wpa-none', 'wpa-psk', 'sae', 'wpa-eap'],
bandTypes: ['a', 'bg']
};
wpaTypes: [{value: 'wpa-none', text: 'wpa-none'}, {value: 'wpa-psk', text: 'wpa-psk'}],
bandTypes: [{value: 'a', text: '5 GHz'}, {value: 'bg', text: '2.4 GHz'}],
availChannels: [],
curSettings: {
ipaddresstype: {
value: ''
},
ipaddress: {
value: ''
},
subnet: {
value: ''
},
wpaType: {
value: ''
},
password: {
value: ''
},
ssid: {
value: ''
},
band: {
value: ''
}
}
};

//bind button events
this.handleNetworkSubmit = this.handleNetworkSubmit.bind(this);
this.deleteConnection = this.deleteConnection.bind(this);
this.addConnection = this.addConnection.bind(this);
//this.handleIPTypeChange = this.handleIPTypeChange.bind(this);
}

componentDidMount() {
this.handleStart();
Expand Down Expand Up @@ -108,22 +138,98 @@ class NetworkConfig extends Component {
})
}).then(response => response.json())
.then(state => this.setState(state))
.then(state => this.setState({netConnectionFilteredSelected: value}));
.then(state => this.setState({netConnectionFilteredSelected: value}))
.then(state => this.setState({ curSettings: {
ipaddresstype: {value: this.state.netConnectionDetails.DHCP},
ipaddress: {value: this.state.netConnectionDetails.IP},
subnet: {value: this.state.netConnectionDetails.subnet},
wpaType: {value: this.state.netConnectionDetails.wpaType},
password: {value: this.state.netConnectionDetails.password},
ssid: {value: this.state.netConnectionDetails.ssid},
band: {value: this.state.netConnectionDetails.band}
}}));
}
};

sendNetworkEdit = (conName, action, settings) => {
fetch('/api/networkmodify', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
conName: conName,
conAction: action,
conSettings: settings
})
});

};

handleIPTypeChange = (event) => {
//IP type radio buttons changed
this.setState({netConnectionDetails: {...this.state.netConnectionDetails, DHCP: event.target.value}});
handleNetworkSubmit = (event) =>{
//save network button clicked
this.sendNetworkEdit(this.state.netConnectionFilteredSelected.value, "edit", this.state.curSettings);
event.preventDefault();
};

//this.setState((state) => {
// console.log(event.target.value);
// return {netConnectionDetails: {...state.netConnectionDetails, DHCP: event.target.value}};
//});
deleteConnection = (event) =>{
//delete network button clicked
if (window.confirm('Confirm you wish to delete this network'))
//if it's a new connection, go back to old connection
if (this.state.netConnectionFilteredSelected.value === "new") {
this.handleConnectionChange(this.state.netConnection[0], {action: "select-option"});
}
else {
this.sendNetworkEdit(this.state.netConnectionFilteredSelected.value, "delete", null);
}
event.preventDefault();
};

addConnection = (event) =>{
//add new network button clicked
const enteredName = prompt('Please enter new connection name');
if (enteredName !== '' && enteredName !== null) {
this.setState({netConnectionFilteredSelected: {value: 'new', label: enteredName, type: this.state.netDeviceSelected.type, state: ""}});
//this.setState();
}
//this.sendNetworkEdit(this.state.netConnectionFilteredSelected.label, "addnew", this.state.curSettings);
event.preventDefault();
};

changeHandler = event => {
//form change handler
const name = event.target.name;
const value = event.target.value;

this.setState({
curSettings: {
...this.state.curSettings,
[name]: {
...this.state.curSettings[name],
value
}
}
});
}

resetForm = (event) => {
//if it's a new connection, go back to old connection
if (this.state.netConnectionFilteredSelected.value === "new") {
this.handleConnectionChange(this.state.netConnection[0], {action: "select-option"});
}
//reset the form
this.setState({ curSettings: {
ipaddresstype: {value: this.state.netConnectionDetails.DHCP},
ipaddress: {value: this.state.netConnectionDetails.IP},
subnet: {value: this.state.netConnectionDetails.subnet},
wpaType: {value: this.state.netConnectionDetails.wpaType},
password: {value: this.state.netConnectionDetails.password},
ssid: {value: this.state.netConnectionDetails.ssid},
band: {value: this.state.netConnectionDetails.band}
}});
}

render() {
return (
<div>
Expand All @@ -133,40 +239,46 @@ class NetworkConfig extends Component {
<h1>Network Configuration</h1>
Adapters: <Select onChange={this.handleAdapterChange} options={this.state.netDevice} value={this.state.netDeviceSelected}/>
Connections: <Select onChange={this.handleConnectionChange} options={this.state.netConnectionFiltered} value={this.state.netConnectionFilteredSelected}/>
<div nameclass="ipconfig" style={{ display: (this.state.showIP && this.state.netConnectionDetails.mode !== "adhoc" && this.state.netConnectionDetails.mode !== "ap") ? "block" : "none" }}><h3>IP Address</h3>
<label><input type="radio" name="ip-type" value="auto" onChange={this.handleIPTypeChange} checked={this.state.netConnectionDetails.DHCP === "auto"}/>DHCP</label>
<label><input type="radio" name="ip-type" value="manual" onChange={this.handleIPTypeChange} checked={this.state.netConnectionDetails.DHCP === "manual"}/>Static IP</label>
<br />
<label><input type="text" disabled={this.state.netConnectionDetails.DHCP === "auto"} defaultValue={this.state.netConnectionDetails.IP || ''}/>IP Address</label>
<br />
<label><input type="text" disabled={this.state.netConnectionDetails.DHCP === "auto"} defaultValue={this.state.netConnectionDetails.subnet || ''}/>Subnet Mask</label>
</div>
<div nameclass="wificlientconfig" style={{ display: this.state.netConnectionDetails.mode === "infrastructure" ? "block" : "none" }}><h3>Wifi Client</h3>
<label>
<select value={this.state.netConnectionDetails.wpaType}>
{this.state.wpaTypes.map((option, index) => (
<option key={index} value={option}>{option}</option>
))}
</select>
Security</label>
<br />
<label><input type="text" defaultValue={this.state.netConnectionDetails.password || ''}/>Password</label>
</div>
<div nameclass="wifiapconfig" style={{ display: (this.state.netConnectionDetails.mode === "ap" || this.state.netConnectionDetails.mode === "adhoc")? "block" : "none" }}><h3>Wifi AP</h3>
<label><input type="text" defaultValue={this.state.netConnectionDetails.ssid || ''}/>SSID Name</label>
<br />
<label>
<select value={this.state.netConnectionDetails.band || ''}>
{this.state.bandTypes.map((option, index) => (
<option key={index} value={option}>{option}</option>
))}
</select>
Band</label>
<br />
<label><input value={this.state.netConnectionDetails.password || ''} type="text"/>Password</label>
<br />
<label><input value={this.state.netConnectionDetails.IP_AP || ''} type="text"/>Starting IP address</label>
</div>
<button onClick={this.deleteConnection} nameclass="deleteConnection">Delete</button>
<button onClick={this.addConnection} nameclass="addConnection">Add new</button>
<form onSubmit={this.handleNetworkSubmit}>
<div nameclass="ipconfig" style={{ display: (this.state.showIP && this.state.netConnectionDetails.mode !== "adhoc" && this.state.netConnectionDetails.mode !== "ap") ? "block" : "none" }}><h3>IP Address</h3>
<label><input type="radio" name="ipaddresstype" value="auto" onChange={this.changeHandler} checked={this.state.curSettings.ipaddresstype.value === "auto"}/>DHCP</label>
<label><input type="radio" name="ipaddresstype" value="manual" onChange={this.changeHandler} checked={this.state.curSettings.ipaddresstype.value === "manual"}/>Static IP</label>
<br />
<label><input type="text" name="ipaddress" disabled={this.state.curSettings.ipaddresstype.value === "auto"} onChange={this.changeHandler} value={this.state.curSettings.ipaddress.value}/>IP Address</label>
<br />
<label><input type="text" name="subnet" disabled={this.state.curSettings.ipaddresstype.value === "auto"} onChange={this.changeHandler} value={this.state.curSettings.subnet.value}/>Subnet Mask</label>
</div>
<div nameclass="wificlientconfig" style={{ display: this.state.netConnectionDetails.mode === "infrastructure" ? "block" : "none" }}><h3>Wifi Client</h3>
<label>
<select name="wpaType" value={this.state.curSettings.wpaType.value} onChange={this.changeHandler}>
{this.state.wpaTypes.map((option, index) => (
<option key={option.value} value={option.value}>{option.text}</option>
))}
</select>
Security</label>
<br />
<label><input name="password" type="text" value={this.state.curSettings.password.value} onChange={this.changeHandler}/>Password</label>
</div>
<div nameclass="wifiapconfig" style={{ display: (this.state.netConnectionDetails.mode === "ap" || this.state.netConnectionDetails.mode === "adhoc")? "block" : "none" }}><h3>Wifi Access Point</h3>
<label><input name="ssid" onChange={this.changeHandler} value={this.state.curSettings.ssid.value} type="text"/>SSID Name</label>
<br />
<label>
<select name="band" onChange={this.changeHandler} value={this.state.curSettings.band.value}>
{this.state.bandTypes.map((option, index) => (
<option key={option.value} value={option.value}>{option.text}</option>
))}
</select>
Band</label>
<br />
<label><input name="password" onChange={this.changeHandler} value={this.state.curSettings.password.value} type="text"/>Password</label>
<br />
<label><input name="ipaddress" onChange={this.changeHandler} value={this.state.curSettings.ipaddress.value} type="text"/>Starting IP address</label>
</div>
<input type="submit" value="Save Changes" />
<input type="button" value="Discard Changes" onClick={this.resetForm}/>
</form>
</div>
);
}
Expand Down

0 comments on commit 4271da3

Please sign in to comment.