2015-05-06 03:53:30 +00:00
var ZeroTierNode = React . createClass ( {
getInitialState : function ( ) {
return {
address : '----------' ,
online : false ,
2015-05-07 00:28:11 +00:00
version : '_._._' ,
_networks : [ ] ,
_peers : [ ]
2015-05-06 03:53:30 +00:00
} ;
} ,
2015-05-07 00:28:11 +00:00
ago : function ( ms ) {
2015-05-07 00:42:29 +00:00
if ( ms > 0 ) {
var tmp = Math . round ( ( Date . now ( ) - ms ) / 1000 ) ;
return ( ( tmp > 0 ) ? tmp : 0 ) ;
} else return 0 ;
2015-05-07 00:28:11 +00:00
} ,
updatePeers : function ( ) {
Ajax . call ( {
url : 'peer?auth=' + this . props . authToken ,
cache : false ,
type : 'GET' ,
success : function ( data ) {
if ( data ) {
var pl = JSON . parse ( data ) ;
if ( Array . isArray ( pl ) ) {
this . setState ( { _peers : pl } ) ;
}
}
} . bind ( this ) ,
error : function ( ) {
} . bind ( this )
} ) ;
} ,
updateNetworks : function ( ) {
Ajax . call ( {
url : 'network?auth=' + this . props . authToken ,
cache : false ,
type : 'GET' ,
success : function ( data ) {
if ( data ) {
var nwl = JSON . parse ( data ) ;
if ( Array . isArray ( nwl ) ) {
this . setState ( { _networks : nwl } ) ;
}
}
} . bind ( this ) ,
error : function ( ) {
} . bind ( this )
} ) ;
} ,
2015-05-06 03:53:30 +00:00
updateAll : function ( ) {
Ajax . call ( {
url : 'status?auth=' + this . props . authToken ,
cache : false ,
type : 'GET' ,
success : function ( data ) {
2015-05-08 16:39:07 +00:00
this . alertedToFailure = false ;
2015-05-07 02:39:45 +00:00
if ( data ) {
var status = JSON . parse ( data ) ;
this . setState ( status ) ;
document . title = 'ZeroTier One [' + status . address + ']' ;
}
2015-05-07 00:28:11 +00:00
this . updateNetworks ( ) ;
this . updatePeers ( ) ;
2015-05-06 03:53:30 +00:00
} . bind ( this ) ,
error : function ( ) {
2015-05-08 16:39:07 +00:00
this . setState ( this . getInitialState ( ) ) ;
if ( ! this . alertedToFailure ) {
this . alertedToFailure = true ;
alert ( 'Authorization token invalid or ZeroTier One service not running.' ) ;
}
2015-05-06 03:53:30 +00:00
} . bind ( this )
2015-05-07 00:28:11 +00:00
} ) ;
} ,
joinNetwork : function ( event ) {
event . preventDefault ( ) ;
2015-05-07 02:39:45 +00:00
if ( ( this . networkToJoin ) && ( this . networkToJoin . length === 16 ) ) {
Ajax . call ( {
url : 'network/' + this . networkToJoin + '?auth=' + this . props . authToken ,
cache : false ,
type : 'POST' ,
success : function ( data ) {
2015-05-08 16:39:07 +00:00
this . networkToJoin = '' ;
if ( this . networkInputElement )
this . networkInputElement . value = '' ;
this . updateNetworks ( ) ;
2015-05-07 02:39:45 +00:00
} . bind ( this ) ,
error : function ( ) {
} . bind ( this )
} ) ;
2015-05-08 16:39:07 +00:00
} else {
alert ( 'To join a network, enter its 16-digit network ID.' ) ;
2015-05-07 02:39:45 +00:00
}
2015-05-07 00:28:11 +00:00
} ,
handleNetworkIdEntry : function ( event ) {
2015-05-08 16:39:07 +00:00
this . networkInputElement = event . target ;
2015-05-08 21:47:01 +00:00
var nid = this . networkInputElement . value ;
2015-05-07 00:28:11 +00:00
if ( nid ) {
nid = nid . toLowerCase ( ) ;
var nnid = '' ;
for ( var i = 0 ; ( ( i < nid.length ) & & ( i < 16 ) ) ; + + i ) {
if ( "0123456789abcdef" . indexOf ( nid . charAt ( i ) ) >= 0 )
nnid += nid . charAt ( i ) ;
}
this . networkToJoin = nnid ;
2015-05-08 21:47:01 +00:00
this . networkInputElement . value = nnid ;
2015-05-07 00:28:11 +00:00
} else {
this . networkToJoin = '' ;
2015-05-08 21:47:01 +00:00
this . networkInputElement . value = '' ;
2015-05-07 00:28:11 +00:00
}
2015-05-06 03:53:30 +00:00
} ,
2015-05-08 16:39:07 +00:00
handleNetworkDelete : function ( nwid ) {
var networks = [ ] ;
for ( var i = 0 ; i < this.state._networks.length ; + + i ) {
if ( this . state . _networks [ i ] . nwid !== nwid )
networks . push ( this . state . _networks [ i ] ) ;
}
this . setState ( { _networks : networks } ) ;
} ,
2015-05-06 03:53:30 +00:00
componentDidMount : function ( ) {
this . updateAll ( ) ;
2015-05-07 00:42:29 +00:00
this . updateIntervalId = setInterval ( this . updateAll , 2500 ) ;
2015-05-06 03:53:30 +00:00
} ,
componentWillUnmount : function ( ) {
2015-05-07 00:28:11 +00:00
clearInterval ( this . updateIntervalId ) ;
2015-05-06 03:53:30 +00:00
} ,
render : function ( ) {
return (
2015-05-07 00:28:11 +00:00
< div className = "zeroTierNode" >
2015-05-08 21:47:01 +00:00
< div className = "middle" > < div className = "middleCell" >
2015-05-07 00:28:11 +00:00
< div className = "middleScroll" >
2015-11-16 22:30:25 +00:00
< div className = "networks" key = "_networks" >
{
this . state . _networks . map ( function ( network ) {
network [ 'authToken' ] = this . props . authToken ;
network [ 'onNetworkDeleted' ] = this . handleNetworkDelete ;
return React . createElement ( 'div' , { className : 'network' , key : network . nwid } , React . createElement ( ZeroTierNetwork , network ) ) ;
} . bind ( this ) )
}
< / div >
2015-05-07 00:28:11 +00:00
< / div >
2015-05-08 21:47:01 +00:00
< / div > < / div >
2015-05-07 00:28:11 +00:00
< div className = "bottom" >
< div className = "left" >
2015-06-03 23:47:07 +00:00
< span className = "statusLine" > < span className = "zeroTierAddress" > { this . state . address } < / span > & nbsp ; & nbsp ; { this . state . online ? ( this . state . tcpFallbackActive ? 'TUNNELED' : 'ONLINE' ) : 'OFFLINE' } & nbsp ; & nbsp ; { this . state . version } < / span >
2015-05-06 03:53:30 +00:00
< / div >
2015-05-07 00:28:11 +00:00
< div className = "right" >
2015-05-08 21:47:01 +00:00
< form onSubmit = { this . joinNetwork } > < input type = "text" maxlength = "16" placeholder = "[ Network ID ]" onChange = { this . handleNetworkIdEntry } size = "16" / > < button type = "button" onClick = { this . joinNetwork } > Join < / button > < / form >
2015-05-06 03:53:30 +00:00
< / div >
< / div >
< / div >
) ;
}
} ) ;