diff --git a/.gitignore b/.gitignore index 4a24c4db6..c076c26f3 100755 --- a/.gitignore +++ b/.gitignore @@ -40,3 +40,4 @@ /root-topology/test/supernodes /root-topology/test/test-root-topology /ext/mac-ui-macgap1-wrapper/MacGap.xcodeproj/project.xcworkspace/xcuserdata/* +/ui/.module-cache diff --git a/ui/Makefile b/ui/Makefile new file mode 100644 index 000000000..48b4446d9 --- /dev/null +++ b/ui/Makefile @@ -0,0 +1,5 @@ +all: + mkdir -p build + jsx --target es3 -x jsx . ./build + minify build/*.js >>ztui.min.js + rm -rf build diff --git a/ui/ZeroTierNetwork.jsx b/ui/ZeroTierNetwork.jsx index d9c384f4b..1dda11172 100644 --- a/ui/ZeroTierNetwork.jsx +++ b/ui/ZeroTierNetwork.jsx @@ -60,7 +60,7 @@ var ZeroTierNetwork = React.createClass({ { this.props['assignedAddresses'].map(function(ipAssignment) { return ( -
{ipAssignment}
+
{ipAssignment}
); }) } diff --git a/ui/ZeroTierNode.jsx b/ui/ZeroTierNode.jsx index 30817b41e..3782219ef 100644 --- a/ui/ZeroTierNode.jsx +++ b/ui/ZeroTierNode.jsx @@ -144,8 +144,8 @@ var ZeroTierNode = React.createClass({
{ (this.tabIndex === 1) ? ( -
-
+
+
Address
Version
Latency
@@ -156,7 +156,7 @@ var ZeroTierNode = React.createClass({ { this.state._peers.map(function(peer) { return ( -
+
{peer['address']}
{(peer['version'] === '-1.-1.-1') ? '-' : peer['version']}
{peer['latency']}
@@ -186,12 +186,12 @@ var ZeroTierNode = React.createClass({ }
) : ( -
+
{ this.state._networks.map(function(network) { network['authToken'] = this.props.authToken; network['onNetworkDeleted'] = this.handleNetworkDelete; - return React.createElement('div',{className: 'network'},React.createElement(ZeroTierNetwork,network)); + return React.createElement('div',{className: 'network',key: network.nwid},React.createElement(ZeroTierNetwork,network)); }.bind(this)) }
diff --git a/ui/index.html b/ui/index.html index fde06f933..e0f048b05 100644 --- a/ui/index.html +++ b/ui/index.html @@ -2,23 +2,15 @@ ZeroTier One - + + - - + - - - - - + - -
- +
+ diff --git a/ui/main.jsx b/ui/main.js similarity index 96% rename from ui/main.jsx rename to ui/main.js index aa4c8bf1c..a1647127b 100644 --- a/ui/main.jsx +++ b/ui/main.js @@ -46,6 +46,6 @@ if ((!ztAuthToken)||(ztAuthToken.length <= 0)) { } React.render( - , + React.createElement(ZeroTierNode, {authToken: ztAuthToken}), document.getElementById('main') ); diff --git a/ui/ztui.min.js b/ui/ztui.min.js new file mode 100644 index 000000000..3033df6f8 --- /dev/null +++ b/ui/ztui.min.js @@ -0,0 +1,2 @@ +var ZeroTierNetwork=React.createClass({displayName:"ZeroTierNetwork",getInitialState:function(){return{}},leaveNetwork:function(e){Ajax.call({url:"network/"+this.props.nwid+"?auth="+this.props.authToken,cache:!1,type:"DELETE",success:function(e){this.props.onNetworkDeleted&&this.props.onNetworkDeleted(this.props.nwid)}.bind(this),error:function(e){}.bind(this)}),e.preventDefault()},render:function(){return React.createElement("div",{className:"zeroTierNetwork"},React.createElement("div",{className:"networkInfo"},React.createElement("span",{className:"networkId"},this.props.nwid)," ",React.createElement("span",{className:"networkName"},this.props.name)),React.createElement("div",{className:"networkProps"},React.createElement("div",{className:"row"},React.createElement("div",{className:"name"},"Status"),React.createElement("div",{className:"value"},this.props.status)),React.createElement("div",{className:"row"},React.createElement("div",{className:"name"},"Type"),React.createElement("div",{className:"value"},this.props.type)),React.createElement("div",{className:"row"},React.createElement("div",{className:"name"},"MAC"),React.createElement("div",{className:"value zeroTierAddress"},this.props.mac)),React.createElement("div",{className:"row"},React.createElement("div",{className:"name"},"MTU"),React.createElement("div",{className:"value"},this.props.mtu)),React.createElement("div",{className:"row"},React.createElement("div",{className:"name"},"Broadcast"),React.createElement("div",{className:"value"},this.props.broadcastEnabled?"ENABLED":"DISABLED")),React.createElement("div",{className:"row"},React.createElement("div",{className:"name"},"Bridging"),React.createElement("div",{className:"value"},this.props.bridge?"ACTIVE":"DISABLED")),React.createElement("div",{className:"row"},React.createElement("div",{className:"name"},"Device"),React.createElement("div",{className:"value"},this.props.portDeviceName?this.props.portDeviceName:"(none)")),React.createElement("div",{className:"row"},React.createElement("div",{className:"name"},"Managed IPs"),React.createElement("div",{className:"value ipList"},this.props.assignedAddresses.map(function(e){return React.createElement("div",{key:e,className:"ipAddress"},e)})))),React.createElement("button",{className:"leaveNetworkButton",onClick:this.leaveNetwork},"Leave Network"))}}); var ZeroTierNode=React.createClass({displayName:"ZeroTierNode",getInitialState:function(){return{address:"----------",online:!1,version:"_._._",_networks:[],_peers:[]}},ago:function(e){if(e>0){var t=Math.round((Date.now()-e)/1e3);return t>0?t:0}return 0},updatePeers:function(){Ajax.call({url:"peer?auth="+this.props.authToken,cache:!1,type:"GET",success:function(e){if(e){var t=JSON.parse(e);Array.isArray(t)&&this.setState({_peers:t})}}.bind(this),error:function(){}.bind(this)})},updateNetworks:function(){Ajax.call({url:"network?auth="+this.props.authToken,cache:!1,type:"GET",success:function(e){if(e){var t=JSON.parse(e);Array.isArray(t)&&this.setState({_networks:t})}}.bind(this),error:function(){}.bind(this)})},updateAll:function(){Ajax.call({url:"status?auth="+this.props.authToken,cache:!1,type:"GET",success:function(e){if(this.alertedToFailure=!1,e){var t=JSON.parse(e);this.setState(t),document.title="ZeroTier One ["+t.address+"]"}this.updateNetworks(),this.updatePeers()}.bind(this),error:function(){this.setState(this.getInitialState()),this.alertedToFailure||(this.alertedToFailure=!0,alert("Authorization token invalid or ZeroTier One service not running."))}.bind(this)})},joinNetwork:function(e){e.preventDefault(),this.networkToJoin&&16===this.networkToJoin.length?Ajax.call({url:"network/"+this.networkToJoin+"?auth="+this.props.authToken,cache:!1,type:"POST",success:function(e){this.networkToJoin="",this.networkInputElement&&(this.networkInputElement.value=""),this.updateNetworks()}.bind(this),error:function(){}.bind(this)}):alert("To join a network, enter its 16-digit network ID.")},handleNetworkIdEntry:function(e){this.networkInputElement=e.target;var t=e.target.value;if(t){t=t.toLowerCase();for(var a="",s=0;ss;++s)"0123456789abcdef".indexOf(t.charAt(s))>=0&&(a+=t.charAt(s));this.networkToJoin=a,e.target.value=a}else this.networkToJoin="",e.target.value=""},handleNetworkDelete:function(e){for(var t=[],a=0;a0){var t=Math.round((Date.now()-e)/1e3);return t>0?t:0}return 0},updatePeers:function(){Ajax.call({url:"peer?auth="+this.props.authToken,cache:!1,type:"GET",success:function(e){if(e){var t=JSON.parse(e);Array.isArray(t)&&this.setState({_peers:t})}}.bind(this),error:function(){}.bind(this)})},updateNetworks:function(){Ajax.call({url:"network?auth="+this.props.authToken,cache:!1,type:"GET",success:function(e){if(e){var t=JSON.parse(e);Array.isArray(t)&&this.setState({_networks:t})}}.bind(this),error:function(){}.bind(this)})},updateAll:function(){Ajax.call({url:"status?auth="+this.props.authToken,cache:!1,type:"GET",success:function(e){if(this.alertedToFailure=!1,e){var t=JSON.parse(e);this.setState(t),document.title="ZeroTier One ["+t.address+"]"}this.updateNetworks(),this.updatePeers()}.bind(this),error:function(){this.setState(this.getInitialState()),this.alertedToFailure||(this.alertedToFailure=!0,alert("Authorization token invalid or ZeroTier One service not running."))}.bind(this)})},joinNetwork:function(e){e.preventDefault(),this.networkToJoin&&16===this.networkToJoin.length?Ajax.call({url:"network/"+this.networkToJoin+"?auth="+this.props.authToken,cache:!1,type:"POST",success:function(e){this.networkToJoin="",this.networkInputElement&&(this.networkInputElement.value=""),this.updateNetworks()}.bind(this),error:function(){}.bind(this)}):alert("To join a network, enter its 16-digit network ID.")},handleNetworkIdEntry:function(e){this.networkInputElement=e.target;var t=e.target.value;if(t){t=t.toLowerCase();for(var a="",s=0;ss;++s)"0123456789abcdef".indexOf(t.charAt(s))>=0&&(a+=t.charAt(s));this.networkToJoin=a,e.target.value=a}else this.networkToJoin="",e.target.value=""},handleNetworkDelete:function(e){for(var t=[],a=0;a