Merge pull request #209 from libremesh/fix-navigation

Fix navigation and FBW

i18n/generic.json

@@ -21,6 +21,7 @@
     "create_network_d229d642": "Create network",
     "create_new_network_28805f92": "Create new network",
     "current_status_830c5a75": "Current status",
+    "error_98e81528": "Error",
     "from_fdd4956d": "From",
     "full_path_metrics_2859608f": "Full path metrics",
     "ground_routing_12ab04c9": "Ground Routing",
@@ -47,6 +48,8 @@
     "notes_of_a44a4158": "Notes of",
     "ok_ff1b646a": "Ok",
     "only_gateway_727b1656": "Only gateway",
+    "only_letters_and_dots_are_allowed_8c45f013": "Only letters and dots are allowed",
+    "only_letters_numbers_and_underscores_are_allowed_ea6180da": "Only letters, numbers and underscores are allowed",
     "packet_loss_1afe48a8": "Packet loss",
     "please_configure_your_network_d6eb8b76": "Please configure your network",
     "please_wait_62914c7c": "Please wait",

i18n/translations/es.json

@@ -87,5 +87,8 @@
     "please_configure_your_network_d6eb8b76": "Por favor configure su conexión de red",
     "your_router_has_not_yet_been_configured_you_can_us_2b40cea3": "Su router aún no ha sido configurado, puede utilizar nuestro asistente para incorporarlo a una red existente o crear una nueva. Si ignora este mensaje, continuará funcionando con la configuración predeterminada.",
     "ok_ff1b646a": "Ok",
-    "last_known_internet_path_45f31c9a": "Este es el último recorrido hasta Internet que funcionó"
+    "last_known_internet_path_45f31c9a": "Este es el último recorrido hasta Internet que funcionó",
+    "only_letters_and_dots_are_allowed_8c45f013": "Solo letras y puntos son permitidos",
+    "only_letters_numbers_and_underscores_are_allowed_ea6180da": "Solo letras, números y guiones bajos son permitidos"
+
 }

plugins/lime-plugin-core/src/metaReducer.js

@@ -39,6 +39,11 @@ export const initialState = {
 	menuHidden: false
 };
 
+const formatHostList = (hostList, {selectedHost = ''}) => hostList
+	.filter(node => node !== selectedHost)
+	.concat([selectedHost])
+	.sort();
+
 export const reducer = (state = initialState, { type, payload }) => {
 	switch (type) {
 		case CONECTION_START:
@@ -59,7 +64,7 @@ export const reducer = (state = initialState, { type, payload }) => {
 		case CONECTION_CHANGE_CURRENT_BASE:
 			return Object.assign({}, state, { selectedHost: '' });
 		case CONECTION_LOAD_NEIGHBORS_SUCCESS:
-			return Object.assign({}, state, { stations: payload.concat([state.selectedHost]).sort(),status: 'ready' });
+			return Object.assign({}, state, { stations: formatHostList(payload, state), status: 'ready' });
 		case COMMUNITY_SETTINGS_LOAD_SUCCESS:
 			return Object.assign({}, state, { settings: Object.assign({},defaultSettings, payload) });
 		case 'NOTIFICATION':

plugins/lime-plugin-fbw/src/containers/NetworkForm.js

@@ -11,11 +11,21 @@ import I18n from 'i18n-js';
 
 class NetworkForm extends Component {
 	_changeName (e){
-		this.setState({ communityName: e.target.value || '' });
+		if(!/[^a-zA-Z.]/.test(e.target.value)) {
+			this.setState({ communityName: e.target.value || '' });
+		} else {
+			e.target.value = this.state.communityName || '';
+			this.props.showNotification(I18n.t('Only letters and dots are allowed'))
+		}
 	}
 
 	_changeHostName (e){
-		this.setState({ hostName: e.target.value || '' });
+		if(!/[^a-zA-Z0-9_]/.test(e.target.value)) {
+			this.setState({ hostName: e.target.value || '' });
+		} else {
+			e.target.value = this.state.hostName || '';
+			this.props.showNotification(I18n.t('Only letters, numbers and underscores are allowed'))
+		}
 	}
 
 	_changePassword (e){
@@ -39,9 +49,9 @@ class NetworkForm extends Component {
 		return (<div class="container" style={{ paddingTop: '100px' }}>
 			<h4><span>{I18n.t('Configure your new community network')}</span></h4>
 			<label>{I18n.t('Choose a name for your network')}</label>
-			<input type="text" placeholder={I18n.t('Community name')} class="u-full-width" onChange={this._changeName} />
+			<input type="text" placeholder={I18n.t('Community name')} class="u-full-width" onInput={this._changeName}/>
 			<label>{I18n.t('Choose a name for this node')}</label>
-			<input type="text" placeholder={I18n.t('Host name')} class="u-full-width" value={this.state.hostName} onChange={this._changeHostName} />
+			<input type="text" placeholder={I18n.t('Host name')} class="u-full-width" value={this.state.hostName} onInput={this._changeHostName} />
 			{/* <label>{I18n.t('Choose a password for this node')}</label>
 			<input type="text" placeholder={I18n.t('Password')} class="u-full-width" value={this.state.password} onChange={this._changePassword} /> */}
 			<div class="row">
@@ -68,9 +78,17 @@ class NetworkForm extends Component {
 }
 
 
+const showNotification = (msg) => (dispatch) => {
+	dispatch({
+		type: 'NOTIFICATION',
+		payload: { msg }
+	})
+}
+
 const mapStateToProps = (state) => ({});
 
 const mapDispatchToProps = (dispatch) => ({
+	showNotification: bindActionCreators(showNotification, dispatch),
 	createNetwork: bindActionCreators(createNetwork ,dispatch)
 });
 

plugins/lime-plugin-fbw/src/containers/Scan.js

@@ -55,7 +55,12 @@ class Scan extends Component {
 
 	/* Input to state function*/
 	_changeName (e){
-		this.setState({ hostname: e.target.value || '' });
+		if(!/[^a-zA-Z0-9_]/.test(e.target.value)) {
+			this.setState({ hostname: e.target.value || '' });
+		} else {
+			e.target.value = this.state.hostname || '';
+			this.props.showNotification(I18n.t('Only letters, numbers and underscores are allowed'))
+		}
 	}
 
 	/* Input to state function*/
@@ -113,7 +118,7 @@ class Scan extends Component {
 											{this.props.networks.map((network, key) => (<option value={key}>{network.ap+ ' ('+ network.config.wifi.ap_ssid +')'}</option>))}
 										</select>
 										<label>{I18n.t('Choose a name for this node')}</label>
-										<input type="text" placeholder={I18n.t('Host name')} class="u-full-width" value={this.state.hostname} onChange={this._changeName} />
+										<input type="text" placeholder={I18n.t('Host name')} class="u-full-width" value={this.state.hostname} onInput={this._changeName} />
 										{/* <label>{I18n.t('Choose a password for this node')}</label>
 										<input type="text" placeholder={I18n.t('Password')} class="u-full-width" value={this.state.password} onChange={this._changePassword} /> */}
 									</div>}
@@ -156,6 +161,12 @@ class Scan extends Component {
 	}
 }
 
+const showNotification = (msg) => (dispatch) => {
+	dispatch({
+		type: 'NOTIFICATION',
+		payload: { msg }
+	})
+}
 
 const mapStateToProps = (state) => ({
 	logs: state.firstbootwizard.logs,
@@ -167,7 +178,8 @@ const mapStateToProps = (state) => ({
 const mapDispatchToProps = (dispatch) => ({
 	getStatus: bindActionCreators(getStatus, dispatch),
 	searchNetworks: bindActionCreators(searchNetworks ,dispatch),
-	setNetwork: bindActionCreators(setNetwork ,dispatch)
+	setNetwork: bindActionCreators(setNetwork ,dispatch),
+	showNotification: bindActionCreators(showNotification, dispatch)
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(Scan);

plugins/lime-plugin-metrics/src/metricsActions.js

@@ -32,7 +32,3 @@ export const getMetricsGateway = ( hostname ) => (dispatch) => {
 		type: GET_INTERNET_STATUS
 	});
 };
-
-export const changeNode = (hostname) => (dispatch) => {
-	dispatch(push('changeNode/'+hostname));
-};

plugins/lime-plugin-metrics/src/metricsPage.js

@@ -3,7 +3,7 @@ import { h, Component } from 'preact';
 import { bindActionCreators } from 'redux';
 import { connect } from 'preact-redux';
 
-import { getMetrics, getMetricsAll, getMetricsGateway, changeNode } from './metricsActions';
+import { getMetrics, getMetricsAll, getMetricsGateway } from './metricsActions';
 import { getNodeData, getSettings } from '../../lime-plugin-rx/src/rxSelectors';
 
 import Loading from '../../../src/components/loading';
@@ -139,17 +139,9 @@ class Metrics extends Component {
 	isGateway(hostname, gateway) {
 		return (hostname === gateway);
 	}
-
-	wrapperChangeNode (station) {
-		return () => {
-			this.props.changeNode(station.host.hostname);
-		};
-	}
-
-
+
 	constructor(props) {
 		super(props);
-		this.wrapperChangeNode = this.wrapperChangeNode.bind(this);
 		this.clickGateway = this.clickGateway.bind(this);
 	}
 
@@ -168,7 +160,7 @@ class Metrics extends Component {
 				{this.props.metrics.error.map(x => this.showError(x))}
 				<div style={style.box}>{I18n.t('From')+' '+this.props.meta.selectedHost}</div>
 				{this.props.metrics.metrics.map(station => (
-					<MetricsBox settings={this.props.settings} station={station} click={this.wrapperChangeNode(station)} gateway={this.isGateway(station.host.hostname,this.props.metrics.gateway)} />
+					<MetricsBox settings={this.props.settings} station={station} gateway={this.isGateway(station.host.hostname,this.props.metrics.gateway)} />
 				))}
 				<div style={style.box}>{I18n.t('To Internet')}</div>
 				{this.showInternetStatus(this.props.metrics.loading, this.props.node)}
@@ -190,8 +182,7 @@ const mapStateToProps = (state) => ({
 const mapDispatchToProps = (dispatch) => ({
 	getMetrics: bindActionCreators(getMetrics,dispatch),
 	getMetricsGateway: bindActionCreators(getMetricsGateway,dispatch),
-	getMetricsAll: bindActionCreators(getMetricsAll,dispatch),
-	changeNode: bindActionCreators(changeNode,dispatch)
+	getMetricsAll: bindActionCreators(getMetricsAll,dispatch)
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(Metrics);

src/containers/app.js

@@ -87,14 +87,7 @@ const hideAlert = () => (dispatch) => {
 };
 
 const changeNode = (hostname) => (dispatch) => {
-	dispatch({
-		type: 'meta/CONECTION_CHANGE_URL',
-		payload: 'http://'+ hostname +'/ubus'
-	});
-	dispatch({
-		type: 'meta/CONECTION_CHANGE_CURRENT_BASE',
-		payload: hostname
-	});
+	window.location.href = 'http://'+hostname;
 };
 
 const mapDispatchToProps = (dispatch) => ({