From c0d475a5e247d97f2926df8c98846fd57b3c4fc9 Mon Sep 17 00:00:00 2001
From: KshitizSareen <kshitizsareen709@gmail.com>
Date: Thu, 9 Feb 2023 12:15:04 -0800
Subject: [PATCH] PasswordInput: Fix 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 Input to take up as much space as
  needed. I did this by setting a flex of 1 to the Password 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 removed hide text from messages_en.json since it is not in the
  app.

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

Fixes: #5614
---
 src/common/PasswordInput.js          | 26 +++++++++++++++++---------
 static/translations/messages_en.json |  1 -
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/common/PasswordInput.js b/src/common/PasswordInput.js
index 5c21ec21bb6..8d90e84b2ef 100644
--- a/src/common/PasswordInput.js
+++ b/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>
   );
diff --git a/static/translations/messages_en.json b/static/translations/messages_en.json
index cee337d8a1f..b153479ce93 100644
--- a/static/translations/messages_en.json
+++ b/static/translations/messages_en.json
@@ -279,7 +279,6 @@
   "Stream settings": "Stream settings",
   "Failed to show stream settings": "Failed to show stream settings",
   "show": "show",
-  "hide": "hide",
   "Debug": "Debug",
   "Administrators": "Administrators",
   "Normal users": "Normal users",