__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,