__tests__/auth/__snapshots__/LoginForm.js.snap

@@ -38,36 +38,63 @@ exports[`LoginForm component should renders correctly 1`] = `
     underlineColorAndroid="transparent"
     value=""
   />
-  <TextInput
-    allowFontScaling={true}
-    autoCapitalize="none"
-    onChangeText={[Function]}
-    placeholder="Password"
-    placeholderTextColor="#444"
-    rejectResponderTermination={true}
-    returnKeyType="done"
-    secureTextEntry={true}
-    style={
-      Array [
-        Object {
-          "backgroundColor": "#f8f8f8",
-          "borderRadius": 4,
-          "color": "#444",
-          "fontSize": 16,
-          "fontWeight": "600",
-          "height": 50,
-          "letterSpacing": 2,
-          "padding": 15,
-        },
-        Object {
-          "marginTop": 10,
-        },
-      ]
-    }
-    testID="password input"
-    underlineColorAndroid="transparent"
-    value=""
-  />
+  <View>
+    <TextInput
+      allowFontScaling={true}
+      autoCapitalize="none"
+      onChangeText={[Function]}
+      placeholder="Password"
+      placeholderTextColor="#444"
+      rejectResponderTermination={true}
+      returnKeyType="done"
+      secureTextEntry={true}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#f8f8f8",
+            "borderRadius": 4,
+            "color": "#444",
+            "fontSize": 16,
+            "fontWeight": "600",
+            "height": 50,
+            "letterSpacing": 2,
+            "padding": 15,
+          },
+          Object {
+            "marginTop": 10,
+          },
+        ]
+      }
+      testID="password input"
+      underlineColorAndroid="transparent"
+      value=""
+    />
+    <Text
+      allowFontScaling={false}
+      onPress={[Function]}
+      style={
+        Array [
+          Object {
+            "color": undefined,
+            "fontSize": 25,
+          },
+          Object {
+            "position": "absolute",
+            "right": 8,
+            "top": 22,
+          },
+          Object {
+            "fontFamily": "Ionicons",
+            "fontStyle": "normal",
+            "fontWeight": "normal",
+          },
+          Object {},
+        ]
+      }
+    >
+      
+    </Text>
+  </View>
   <View
     style={
       Array [

src/auth/LoginForm.js

@@ -36,6 +36,7 @@ export default class LoginForm extends Component {
     msg: '',
     twoFactorToken: '',
     twoFactorCode: '',
+    hidePassword: true,
     inProgress: false,
     showLanguages: false,
   };
@@ -164,23 +165,30 @@ export default class LoginForm extends Component {
           key={1}
           {...testID('username input')}
         />,
-        <TextInput
-          style={[ComponentsStyle.loginInput, CommonStyle.marginTop2x]}
-          placeholder={i18n.t('auth.password')}
-          secureTextEntry={true}
-          autoCapitalize={'none'}
-          returnKeyType={'done'}
-          placeholderTextColor="#444"
-          underlineColorAndroid='transparent'
-          onChangeText={(value) => this.setState({ password: value })}
-          value={this.state.password}
-          key={2}
-          {...testID('password input')}
-        />
+        <View key={2}>
+          <TextInput
+            style={[ComponentsStyle.loginInput, CommonStyle.marginTop2x]}
+            placeholder={i18n.t('auth.password')}
+            secureTextEntry={this.state.hidePassword}
+            autoCapitalize={'none'}
+            returnKeyType={'done'}
+            placeholderTextColor="#444"
+            underlineColorAndroid='transparent'
+            onChangeText={(value) => this.setState({ password: value })}
+            value={this.state.password}
+
+            {...testID('password input')}
+          />
+          <Icon name={this.state.hidePassword ? 'md-eye' : 'md-eye-off'} size={25} style={ComponentsStyle.loginInputIcon} onPress={this.toggleHidePassword}/>
+        </View>
       ];
     }
   }
 
+  toggleHidePassword = () => {
+    this.setState({hidePassword: !this.state.hidePassword});
+  }
+
   onForgotPress = () => {
     this.props.onForgot()
   }

src/styles/Components.js

@@ -9,6 +9,11 @@ import colors from './Colors';
  * Styles
  */
 export const ComponentsStyle = StyleSheet.create({
+  loginInputIcon: {
+    position: 'absolute',
+    right:8,
+    top:22
+  },
   passwordinput: {
     borderColor: '#ECECEC',
     borderWidth: 1,