feat: Show password on login screen

ios/Podfile.lock

@@ -1032,4 +1032,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 45955b00d9fe695cf6b62c8d0070f63a38904a50
 
-COCOAPODS: 1.11.3
+COCOAPODS: 1.13.0

src/components/BottomSheet/BottomSheetHeader.js

@@ -47,7 +47,7 @@ const BottomSheetModalHeader = ({ title, closeModal, colors }) => {
 
   return (
     <View style={styles.headerContainer}>
-      <Text md bold color={colors.textDark} style={styles.headerTitle}>
+      <Text accessible={true} md bold color={colors.textDark} style={styles.headerTitle}>
         {title}
       </Text>
       <Pressable style={styles.closeButton} onPress={closeModal}>

src/components/ConversationActionItem.js

@@ -81,15 +81,20 @@ const ConversationActionItem = ({
         }}>
         <View style={styles.sectionTitleView}>
           <Icon icon={iconName} color={colors.textDark} size={16} />
-          <Text sm medium color={colors.textDark} style={styles.sectionTitle}>
+          <Text accessible={true} sm medium color={colors.textDark} style={styles.sectionTitle}>
             {text}
           </Text>
         </View>
         <View style={styles.sectionActionView}>
           {shouldShowUserAvatar && (
             <UserAvatar thumbnail={thumbnail} userName={name} size={18} fontSize={8} />
           )}
-          <Text sm medium color={colors.textLight} style={styles.sectionActiveTitle}>
+          <Text
+            accessible={true}
+            sm
+            medium
+            color={colors.textLight}
+            style={styles.sectionActiveTitle}>
             {name}
           </Text>
           {(itemType === 'assignee' || itemType === 'team' || itemType === 'snooze') && (

src/components/ConversationAgentItem.js

@@ -131,7 +131,7 @@ const ConversationAgentItem = ({ colors, title, agentsList, activeValue, onClick
 
         <View style={styles.bottomSheetItemView}>
           {filteredAgentsOnSearch.length !== 0 && (
-            <Text sm medium color={colors.textDark} style={styles.itemText}>
+            <Text accessible={true} sm medium color={colors.textDark} style={styles.itemText}>
               {title}
             </Text>
           )}
@@ -151,7 +151,7 @@ const ConversationAgentItem = ({ colors, title, agentsList, activeValue, onClick
                   fontSize={12}
                   availabilityStatus={item.availability_status}
                 />
-                <Text sm medium color={colors.text} style={styles.agentName}>
+                <Text accessible={true} sm medium color={colors.text} style={styles.agentName}>
                   {`${item.name}`}
                 </Text>
               </View>
@@ -164,7 +164,7 @@ const ConversationAgentItem = ({ colors, title, agentsList, activeValue, onClick
           ))}
           {filteredAgentsOnSearch && filteredAgentsOnSearch.length === 0 && (
             <View style={styles.emptyView}>
-              <Text sm medium color={colors.textDark}>
+              <Text accessible={true} sm medium color={colors.textDark}>
                 {i18n.t('CONVERSATION_AGENTS.NO_RESULT')}
               </Text>
             </View>

src/components/ConversationDetailsItem.js

@@ -34,17 +34,21 @@ const ConversationDetailsItem = ({ value, title, type }) => {
     <React.Fragment>
       <View key={type}>
         <View style={styles.itemTitleView}>
-          <Text medium sm color={colors.textDark}>
+          <Text accessible={true} medium sm color={colors.textDark}>
             {title}
           </Text>
         </View>
         <View>
           {link ? (
-            <Text sm color={colors.primaryColor} onPress={() => openURL({ URL: value })}>
+            <Text
+              accessible={true}
+              sm
+              color={colors.primaryColor}
+              onPress={() => openURL({ URL: value })}>
               {value}
             </Text>
           ) : (
-            <Text sm color={colors.textDark}>
+            <Text accessible={true} sm color={colors.textDark}>
               {value}
             </Text>
           )}

src/components/Empty/Empty.js

@@ -55,14 +55,19 @@ const Empty = ({ image, title, subTitle }) => {
       </View>
       {title && (
         <View style={styles.titleView}>
-          <Text sm medium color={colors.textDark} style={styles.titleText}>
+          <Text accessible={true} sm medium color={colors.textDark} style={styles.titleText}>
             {title}
           </Text>
         </View>
       )}
       {subTitle && (
         <View style={styles.titleView}>
-          <Text sm appearance="hint" color={colors.textLight} style={styles.subTitleText}>
+          <Text
+            accessible={true}
+            sm
+            appearance="hint"
+            color={colors.textLight}
+            style={styles.subTitleText}>
             {subTitle}
           </Text>
         </View>

src/components/FilterButton/ClearFilterButton.js

@@ -52,7 +52,7 @@ const Dropdown = ({ onSelectItem, count }) => {
         <Icon color={colors.textDark} icon="filter-dismiss-outline" size={16} />
       </View>
       <View style={styles.dropdownCountWrapper}>
-        <Text xs bold color={colors.dangerColor}>
+        <Text accessible={true} xs bold color={colors.dangerColor}>
           {getTextSubstringWithEllipsis(count, 20)}
         </Text>
       </View>

src/components/FilterButton/FilterButton.js

@@ -57,7 +57,7 @@ const FilterButton = ({ label, onPress, isActive, hasLeftIcon, leftIconName }) =
           <Icon color={colors.textLight} icon={leftIconName} size={14} />
         </View>
       )}
-      <Text sm medium color={colors.text}>
+      <Text accessible={true} sm medium color={colors.text}>
         {getTextSubstringWithEllipsis(label, 20)}
       </Text>
       <View style={styles.arrowDownIcon}>

src/components/Header/Header.js

@@ -116,12 +116,12 @@ const Header = ({
               style={styles.headerLoader}
             />
           ) : null}
-          <Text xl bold color={colors.textDark}>
+          <Text accessible={true} xl bold color={colors.textDark}>
             {headerText}
           </Text>
           {showCount && !loading && count !== 0 && (
             <View style={styles.headerCountView}>
-              <Text xs medium color={colors.textDark} style={styles.headerCount}>
+              <Text accessible={true} xs medium color={colors.textDark} style={styles.headerCount}>
                 {`(${count})`}
               </Text>
             </View>

src/components/InboxName/InboxName.js

@@ -37,7 +37,7 @@ const InboxName = ({ inboxName, phoneNumber, channelType }) => {
       <View style={styles.inboxDetails}>
         {iconName ? <Icon color={colors.textLight} size={10} icon={iconName} /> : null}
         {inboxName ? (
-          <Text xs medium color={colors.textLight} style={styles.channelText}>
+          <Text accessible={true} xs medium color={colors.textLight} style={styles.channelText}>
             {getTextSubstringWithEllipsis(inboxName, 26)}
           </Text>
         ) : null}

src/components/LabelBox.js

@@ -54,7 +54,7 @@ const LabelBox = ({ id, title, color, onClickRemoveLabel }) => {
       <View>
         <View style={styles.labelView} key={id}>
           <View style={[getLabelColor(color)]} />
-          <Text xs medium color={colors.textDark} style={styles.label}>
+          <Text accessible={true} xs medium color={colors.textDark} style={styles.label}>
             {title}
           </Text>
           <Pressable style={styles.labelCloseIcon} onPress={() => onClickRemoveLabel()}>

src/components/Modal/ModalView.js

@@ -69,15 +69,15 @@ const ModalView = ({ showModal, headerText, contentText, buttonText, onPressClos
     <NativeModal visible={showModal} animationType="fade" transparent={true}>
       <View style={styles.modalViewWrap}>
         <View style={styles.modalView}>
-          <Text md bold color={colors.textDark}>
+          <Text accessible={true} md bold color={colors.textDark}>
             {headerText}
           </Text>
-          <Text sm color={colors.textDark} style={styles.modalText}>
+          <Text accessible={true} sm color={colors.textDark} style={styles.modalText}>
             {contentText}
           </Text>
           <View style={styles.modalButtonView}>
             <Pressable style={styles.modalButton} onPress={onPressClose}>
-              <Text sm color={colors.colorWhite} style={styles.modalButtonText}>
+              <Text accessible={true} sm color={colors.colorWhite} style={styles.modalButtonText}>
                 {buttonText}
               </Text>
             </Pressable>

src/components/NotificationActionItem.js

@@ -44,7 +44,7 @@ const NotificationActionItem = ({ text, iconName, itemType, onPressItem }) => {
       <Pressable style={styles.section} onPress={() => onPressItem({ itemType })}>
         <View style={styles.sectionTitleView}>
           <Icon icon={iconName} color={colors.primaryColor} size={22} style={styles.iconWrapper} />
-          <Text sm medium color={colors.text} style={styles.sectionText}>
+          <Text accessible={true} sm medium color={colors.text} style={styles.sectionText}>
             {text}
           </Text>
         </View>

src/components/NotificationItem.js

@@ -48,15 +48,15 @@ const NotificationItemComponent = ({ item, onSelectNotification }) => {
         )}
         <View style={styles.contentView}>
           {!read_at ? (
-            <Text xs medium color={colors.textDark} style={styles.content}>
+            <Text accessible={true} xs medium color={colors.textDark} style={styles.content}>
               {push_message_title}
             </Text>
           ) : (
-            <Text xs color={colors.textDark} style={styles.content}>
+            <Text accessible={true} xs color={colors.textDark} style={styles.content}>
               {push_message_title}
             </Text>
           )}
-          <Text xxs color={colors.textLighter}>
+          <Text accessible={true} xxs color={colors.textLighter}>
             {`${timeAgo({ time: created_at })}`}
           </Text>
         </View>

src/components/Text/Text.spec.js

@@ -9,23 +9,43 @@ describe('Text', () => {
     expect(screen.getByText('Test')).toBeTruthy();
   });
   it('should render the text with bold', () => {
-    render(<Text bold>Test</Text>);
+    render(
+      <Text accessible={true} bold>
+        Test
+      </Text>,
+    );
     expect(screen.getByText('Test')).toHaveStyle({ fontWeight: 'bold' });
   });
   it('should render the text with color', () => {
-    render(<Text color="red">Test</Text>);
+    render(
+      <Text accessible={true} color="red">
+        Test
+      </Text>,
+    );
     expect(screen.getByText('Test')).toHaveStyle({ color: 'red' });
   });
   it('should render the text with xxs', () => {
-    render(<Text xxs>Test</Text>);
+    render(
+      <Text accessible={true} xxs>
+        Test
+      </Text>,
+    );
     expect(screen.getByText('Test')).toHaveStyle({ fontSize: 10 });
   });
   it('should render the capitalize text', () => {
-    render(<Text capitalize>Test</Text>);
+    render(
+      <Text accessible={true} capitalize>
+        Test
+      </Text>,
+    );
     expect(screen.getByText('Test')).toHaveStyle({ textTransform: 'capitalize' });
   });
   it('should render the text if custom style is passed', () => {
-    render(<Text style={{ lineHeight: 20 }}>Test</Text>);
+    render(
+      <Text accessible={true} style={{ lineHeight: 20 }}>
+        Test
+      </Text>,
+    );
     expect(screen.getByText('Test')).toHaveStyle({ lineHeight: 20 });
   });
 });

src/components/Text/Text.stories.js

@@ -8,26 +8,60 @@ storiesOf('Text', module)
   .addDecorator(getStory => <CenterView>{getStory()}</CenterView>)
   .add('with font size', () => (
     <View>
-      <Text xxs>xxs</Text>
-      <Text xs>xs</Text>
-      <Text sm>sm</Text>
-      <Text md>md</Text>
-      <Text lg>lg</Text>
-      <Text xl>xl</Text>
-      <Text xxl>xxl</Text>
-      <Text xxxl>xxxl</Text>
+      <Text accessible={true} xxs>
+        xxs
+      </Text>
+      <Text accessible={true} xs>
+        xs
+      </Text>
+      <Text accessible={true} sm>
+        sm
+      </Text>
+      <Text accessible={true} md>
+        md
+      </Text>
+      <Text accessible={true} lg>
+        lg
+      </Text>
+      <Text accessible={true} xl>
+        xl
+      </Text>
+      <Text accessible={true} xxl>
+        xxl
+      </Text>
+      <Text accessible={true} xxxl>
+        xxxl
+      </Text>
     </View>
   ))
   .add('with font weight', () => (
     <View>
-      <Text thin>thin</Text>
-      <Text ultraLight>ultraLight</Text>
-      <Text light>light</Text>
-      <Text regular>regular</Text>
-      <Text medium>medium</Text>
-      <Text semiBold>semiBold</Text>
-      <Text bold>bold</Text>
-      <Text heavy>heavy</Text>
-      <Text normal>normal</Text>
+      <Text accessible={true} thin>
+        thin
+      </Text>
+      <Text accessible={true} ultraLight>
+        ultraLight
+      </Text>
+      <Text accessible={true} light>
+        light
+      </Text>
+      <Text accessible={true} regular>
+        regular
+      </Text>
+      <Text accessible={true} medium>
+        medium
+      </Text>
+      <Text accessible={true} semiBold>
+        semiBold
+      </Text>
+      <Text accessible={true} bold>
+        bold
+      </Text>
+      <Text accessible={true} heavy>
+        heavy
+      </Text>
+      <Text accessible={true} normal>
+        normal
+      </Text>
     </View>
   ));

src/components/TextInput.js

@@ -59,7 +59,7 @@ const TextInputField = ({ onChangeText, error, keyboardType, secureTextEntry, la
 
   return (
     <View>
-      <Text sm medium color={colors.textDark} style={styles.label}>
+      <Text accessible={true} sm medium color={colors.textDark} style={styles.label}>
         {label}
       </Text>
       <TextInput
@@ -72,7 +72,7 @@ const TextInputField = ({ onChangeText, error, keyboardType, secureTextEntry, la
         autoCapitalize="none"
       />
       {error && (
-        <Text sm color={colors.dangerColor} style={styles.errorLabel}>
+        <Text accessible={true} sm color={colors.dangerColor} style={styles.errorLabel}>
           {error.message}
         </Text>
       )}

src/components/UserAvatar/UserAvatar.js

@@ -165,7 +165,11 @@ const UserAvatar = ({
             borderRadius: size,
           },
         ]}>
-        <Text medium color={colors.primaryColorDark} style={{ fontSize: fontSize }}>
+        <Text
+          accessible={true}
+          medium
+          color={colors.primaryColorDark}
+          style={{ fontSize: fontSize }}>
           {getUserInitial({ userName })}
         </Text>
       </LinearGradient>

src/components/UserAvatar/UserAvatarGroup.js

@@ -32,7 +32,9 @@ const UserAvatarGroup = ({ users, size, showMoreText, moreText, length, fontSize
     const count = users.length - length;
     return (
       <View style={[styles.countContainer, styles.bubbleBorder, { height: size + 1 }]}>
-        <Text style={[styles.countText, { fontSize }]}>{`+${count} ${moreText || ''}`}</Text>
+        <Text accessible={true} style={[styles.countText, { fontSize }]}>{`+${count} ${
+          moreText || ''
+        }`}</Text>
       </View>
     );
   };

src/constants/images.js

@@ -14,6 +14,8 @@ const forgotPassword = require('../assets/images/forgotPassword.png');
 const emptyConversations = require('../assets/images/emptyConversations.png');
 const URL = require('../assets/images/url.png');
 const login = require('../assets/images/login.png');
+const eye = require('../assets/images/eye.png');
+const eyeOff = require('../assets/images/eyeOff.png');
 
 export default {
   appLogo,
@@ -32,4 +34,6 @@ export default {
   emptyConversations,
   URL,
   login,
+  eye,
+  eyeOff,
 };