Merge pull request #286 from paritytech/tbaut-security-header

Security header refresh

android/app/src/main/AndroidManifest.xml

@@ -2,7 +2,6 @@
     xmlns:tools="http://schemas.android.com/tools"
     package="io.parity.signer">
 
-    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
     <uses-permission android:name="android.permission.INTERNET" />
     <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
     <uses-permission android:name="android.permission.CAMERA" />

src/components/SecurityHeader.js

@@ -14,45 +14,42 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
+import NetInfo from '@react-native-community/netinfo';
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import { withNavigation } from 'react-navigation';
-import { Subscribe } from 'unstated';
+
 import colors from '../colors';
-import SecurityStore from '../stores/SecurityStore';
 import TouchableItem from './TouchableItem';
 
-export default class SecurityHeader extends React.Component {
-  render() {
-    return (
-      <Subscribe to={[SecurityStore]}>
-         {securityStore => (
-          <SecurityHeaderView level={securityStore.getLevel()} />
-        )}
-      </Subscribe>
-    );
+class SecurityHeader extends React.Component {
+  state = {
+    isConnected: false
+  };
+
+  componentDidMount() {
+    this.unsubscribe = NetInfo.addEventListener(state => {
+      this.setState({ isConnected: state.isConnected });
+    });
+  }
+
+  componentWillUnmount() {
+    this.unsubscribe();
   }
-}
 
-class _SecurityHeaderView extends React.PureComponent {
   render() {
-    const { level } = this.props;
-    const color = {
-      green: colors.bg_positive,
-      red: colors.bg_alert
-    }[level];
+    const { isConnected } = this.state;
 
-    const message = {
-      green: 'Secure',
-      red: 'Not Secure'
-    }[level];
+    if (!isConnected) {
+      return null
+    }
 
     return (
       <TouchableItem onPress={() => this.props.navigation.navigate('Security')}>
         <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-          <Icon style={[styles.headerSecureIcon, { color }]} name="security" />
-          <Text style={[styles.headerTextRight, { color }]}>{message}</Text>
+          <Icon style={styles.headerSecureIcon} name="security" />
+          <Text style={styles.headerTextRight}>Not Secure</Text>
         </View>
       </TouchableItem>
     );
@@ -65,16 +62,16 @@ const styles = StyleSheet.create({
     fontSize: 20,
     fontWeight: 'bold',
     paddingRight: 5,
-    color: colors.bg_text_positive
+    color: colors.bg_alert
   },
   headerTextRight: {
     marginLeft: 0,
     fontSize: 17,
     fontFamily: 'Roboto',
     fontWeight: 'bold',
-    color: colors.bg_text_positive,
+    color: colors.bg_alert,
     paddingRight: 14,
   }
 });
 
-const SecurityHeaderView = withNavigation(_SecurityHeaderView);
+export default withNavigation(SecurityHeader);

src/screens/Security.js

@@ -17,68 +17,24 @@
 import React from 'react';
 import { ScrollView, StyleSheet, Text, View } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialIcons';
-import { Subscribe } from 'unstated';
+
 import colors from '../colors';
-import SecurityStore from '../stores/SecurityStore';
 
 export default class Security extends React.PureComponent {
   render() {
-    return (
-      <Subscribe to={[SecurityStore]}>
-        {securityStore => <SecurityView level={securityStore.getLevel()} />}
-      </Subscribe>
-    );
-  }
-}
-
-class SecurityView extends React.PureComponent {
-  render() {
-    const { level } = this.props;
-    const backgroundColor = {
-      green: colors.bg_positive,
-      red: colors.bg_alert
-    }[level];
-
-    const message = {
-      green: 'Secure',
-      red: 'Not Secure'
-    }[level];
-
     return (
       <ScrollView style={styles.body} contentContainerStyle={{ padding: 20 }}>
-        <Text style={styles.title}>YOUR DEVICE IS</Text>
-        <View style={[styles.card, { backgroundColor, marginBottom: 20 }]}>
+        <View style={[styles.card, { backgroundColor: colors.bg_alert, marginBottom: 20 }]}>
           <Icon
             style={[styles.cardText, { marginRight: 10, fontSize: 30 }]}
             name="security"
           />
-          <Text style={styles.cardText}>{message}</Text>
-        </View>
-        <Text style={styles.title}>DEVICE SECURITY</Text>
-        <View style={styles.headerContainer}>
-          <Icon
-            style={[styles.headerSecureIcon, { color: colors.bg_positive }]}
-            name="security"
-          />
-          <Text style={[styles.headerTextRight, { color: colors.bg_positive }]}>
-            Secure
-          </Text>
+          <Text style={styles.cardText}>NOT SECURE</Text>
         </View>
         <Text style={styles.text}>
-          A device is considered secure if it does not have any internet access.
-        </Text>
-        <View style={styles.headerContainer}>
-          <Icon
-            style={[styles.headerSecureIcon, { color: colors.bg_alert }]}
-            name="security"
-          />
-          <Text style={[styles.headerTextRight, { color: colors.bg_alert }]}>
-            Not Secure
-          </Text>
-        </View>
-        <Text style={styles.text}>
-          A device is considered not secure if it has access to the internet. We recommend not keeping high balances
-          on this device.
+          A device is considered not secure if it has access to the internet or has any kind of connectivity enabled.
+          Parity Signer is meant to be used on a device that will be kept offline at any time. Enabling any connectivity such as 
+          wifi, cellular network, bluetooth, NFC, usb is a threat to the safety of the private keys stored on the device.
         </Text>
       </ScrollView>
     );
@@ -118,23 +74,4 @@ const styles = StyleSheet.create({
     fontSize: 14,
     color: colors.card_bg
   },
-  headerContainer: {
-    marginBottom: 15,
-    flexDirection: 'row',
-    alignItems: 'center'
-  },
-  headerSecureIcon: {
-    marginLeft: 0,
-    fontSize: 20,
-    fontWeight: 'bold',
-    paddingRight: 5,
-    color: colors.bg_text_positive
-  },
-  headerTextRight: {
-    marginLeft: 0,
-    fontSize: 17,
-    fontFamily: 'Roboto',
-    fontWeight: 'bold',
-    color: colors.bg_text_positive
-  }
 });

src/stores/SecurityStore.js

-// Copyright 2015-2019 Parity Technologies (UK) Ltd.
-// This file is part of Parity.
-
-// Parity is free software: you can redistribute it and/or modify
-// it under the terms of the GNU General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-
-// Parity 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 General Public License for more details.
-
-// You should have received a copy of the GNU General Public License
-// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
-
-// @flow
-import NetInfo from '@react-native-community/netinfo';
-import { Container } from 'unstated';
-
-type SecurityState = {
-  signedTxs: Map<string, Object>
-};
-
-export default class SecurityStore extends Container<SecurityState> {
-  state = {
-    level: 'green'
-  };
-
-  constructor(...args) {
-    super(...args);
-    this.connectionChangeListener = this.connectionChangeListener.bind(this);
-    NetInfo.addEventListener('connectionChange', this.connectionChangeListener);
-    NetInfo.getConnectionInfo().then(this.connectionChangeListener);
-  }
-
-  connectionChangeListener(connectionInfo) {
-    if (connectionInfo.type !== 'none') {
-      this.setState({ level: 'red' });
-    } else {
-      this.setState({ level: 'green' });
-    }
-  }
-
-  getLevel() {
-    return this.state.level;
-  }
-}