PasswordInput: Fixed Overlap for long Passwords and show/hide button

Long Passwords and show/hide buttons overlap with each other. I fixed this problem by doing the following:

- I changed the style of Password Text Input to take up as much space as needed. I did this by setting a flex of 1 to the password text input.

- I changed the positioning of the show/hide button from absolute to relative.

- I ensured Horizontal Alignment by setting the flex-direction of the parent view to 'row'.

- To fix the problem of the changing width of the text input, when the show/hide text changes, I replaced the show/hide text with a show/icon. The show/hide icon is an eye-open/eye-closed icon. This icon always has a fixed width and does not affect the text input.

I tested this on Android and IOS devices with different screen sizes, and it works fine on both platforms.

Fixes: zulip#5614

Author: KshitizSareen

src/common/PasswordInput.js

@@ -3,24 +3,26 @@ import React, { useState, useCallback } from 'react';
 import type { Node } from 'react';
 import { View } from 'react-native';
 
+import { Icon } from './Icons';
 import Input from './Input';
 import type { Props as InputProps } from './Input';
 import { BRAND_COLOR, createStyleSheet } from '../styles';
-import ZulipTextIntl from './ZulipTextIntl';
 import Touchable from './Touchable';
 
 const styles = createStyleSheet({
   showPasswordButton: {
-    position: 'absolute',
-    right: 0,
-    top: 0,
-    bottom: 0,
     justifyContent: 'center',
   },
-  showPasswordButtonText: {
+  showPasswordButtonIcon: {
     margin: 8,
     color: BRAND_COLOR,
   },
+  passwordTextInput: {
+    flex: 1,
+  },
+  passwordInputView: {
+    flexDirection: 'row',
+  },
 });
 
 // Prettier wants a ", >" here, which is silly.
@@ -44,10 +46,16 @@ export default function PasswordInput(props: Props): Node {
   }, []);
 
   return (
-    <View>
-      <Input {...props} secureTextEntry={isHidden} autoCorrect={false} autoCapitalize="none" />
+    <View style={styles.passwordInputView}>
+      <Input
+        {...props}
+        secureTextEntry={isHidden}
+        autoCorrect={false}
+        autoCapitalize="none"
+        style={styles.passwordTextInput}
+      />
       <Touchable style={styles.showPasswordButton} onPress={handleShow}>
-        <ZulipTextIntl style={styles.showPasswordButtonText} text={isHidden ? 'show' : 'hide'} />
+        <Icon name={isHidden ? 'eye-off' : 'eye'} size={24} style={styles.showPasswordButtonIcon} />
       </Touchable>
     </View>
   );