From ef75799ed5631fd3223a9eb8ea2375cf2163109a Mon Sep 17 00:00:00 2001
From: balzack <roland.osborne@gmail.com>
Date: Tue, 12 Sep 2023 22:25:50 -0700
Subject: [PATCH] removed floating label from all screens

---
 app/mobile/ios/Podfile.lock                   |   6 -
 app/mobile/package.json                       |   1 -
 .../src/session/profile/Profile.styled.js     |  25 +--
 app/mobile/src/session/settings/Settings.jsx  | 171 ++++++------------
 .../src/session/settings/Settings.styled.js   |  26 ++-
 app/mobile/src/utils/InputField.jsx           |  26 ++-
 app/mobile/yarn.lock                          |   5 -
 7 files changed, 107 insertions(+), 153 deletions(-)

diff --git a/app/mobile/ios/Podfile.lock b/app/mobile/ios/Podfile.lock
index 51e6a7f9..c9f32630 100644
--- a/app/mobile/ios/Podfile.lock
+++ b/app/mobile/ios/Podfile.lock
@@ -336,8 +336,6 @@ PODS:
     - React-Core
   - react-native-document-picker (8.2.1):
     - React-Core
-  - react-native-floating-label-input (1.4.2):
-    - React-Core
   - react-native-image-resizer (3.0.5):
     - React-Core
   - react-native-keep-awake (1.2.0):
@@ -550,7 +548,6 @@ DEPENDENCIES:
   - "react-native-blur (from `../node_modules/@react-native-community/blur`)"
   - react-native-create-thumbnail (from `../node_modules/react-native-create-thumbnail`)
   - react-native-document-picker (from `../node_modules/react-native-document-picker`)
-  - react-native-floating-label-input (from `../node_modules/react-native-floating-label-input`)
   - "react-native-image-resizer (from `../node_modules/@bam.tech/react-native-image-resizer`)"
   - "react-native-keep-awake (from `../node_modules/@sayem314/react-native-keep-awake`)"
   - react-native-receive-sharing-intent (from `../node_modules/react-native-receive-sharing-intent`)
@@ -656,8 +653,6 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-create-thumbnail"
   react-native-document-picker:
     :path: "../node_modules/react-native-document-picker"
-  react-native-floating-label-input:
-    :path: "../node_modules/react-native-floating-label-input"
   react-native-image-resizer:
     :path: "../node_modules/@bam.tech/react-native-image-resizer"
   react-native-keep-awake:
@@ -771,7 +766,6 @@ SPEC CHECKSUMS:
   react-native-blur: cfdad7b3c01d725ab62a8a729f42ea463998afa2
   react-native-create-thumbnail: e022bcdcba8a0b4529a50d3fa1a832ec921be39d
   react-native-document-picker: 69ca2094d8780cfc1e7e613894d15290fdc54bba
-  react-native-floating-label-input: 70b2864337fa690c6d71d75dad66d8ec1d6bf162
   react-native-image-resizer: 00ceb0e05586c7aadf061eea676957a6c2ec60fa
   react-native-keep-awake: caee3ff89eaa21dfe29010f0d143566874a04441
   react-native-receive-sharing-intent: 62ab28c50e6ae56d32b9e841d7452091312a0bc7
diff --git a/app/mobile/package.json b/app/mobile/package.json
index f9f65002..0150e718 100644
--- a/app/mobile/package.json
+++ b/app/mobile/package.json
@@ -33,7 +33,6 @@
     "react-native-device-info": "^10.4.0",
     "react-native-document-picker": "^8.1.3",
     "react-native-fast-image": "^8.6.3",
-    "react-native-floating-label-input": "^1.4.2",
     "react-native-fs": "^2.20.0",
     "react-native-gesture-handler": "^2.9.0",
     "react-native-image-crop-picker": "^0.39.0",
diff --git a/app/mobile/src/session/profile/Profile.styled.js b/app/mobile/src/session/profile/Profile.styled.js
index 88cc2104..150ce2e3 100644
--- a/app/mobile/src/session/profile/Profile.styled.js
+++ b/app/mobile/src/session/profile/Profile.styled.js
@@ -196,12 +196,14 @@ export const styles = StyleSheet.create({
   field: {
     input: {
       backgroundColor: Colors.inputBase,
-      color: Colors.inputText,
       borderRadius: 8,
       minHeight: 48,
       maxHeight: 128,
       paddingLeft: 8,
     },
+    inputText: {
+      color: Colors.inputText,
+    },
     label: {
       height: 16,
       paddingLeft: 8,
@@ -217,27 +219,6 @@ export const styles = StyleSheet.create({
       paddingTop: 8,
     },
   },
-  floatingInput: {
-    color: Colors.inputText,
-    paddingTop: 20,
-    paddingBottom: 4,
-  },
-  floatingLabel: {
-    color: Colors.text,
-  },
-  floatingCustomLabel: {
-    colorFocused: Colors.inputPlaceholder,
-    colorBlurred: Colors.inputPlaceholder,
-    fontSizeFocused: 12,
-  },
-  floatingContainer: {
-    paddingHorizontal: 12,
-    backgroundColor: Colors.inputBase,
-    width: '100%',
-    borderRadius: 8,
-    minHeight: 48,
-    maxHeight: 128,
-  },
   buttons: {
     display: 'flex',
     width: '100%',
diff --git a/app/mobile/src/session/settings/Settings.jsx b/app/mobile/src/session/settings/Settings.jsx
index f5770f38..782f0bd1 100644
--- a/app/mobile/src/session/settings/Settings.jsx
+++ b/app/mobile/src/session/settings/Settings.jsx
@@ -7,7 +7,7 @@ import { useSettings } from './useSettings.hook';
 import MatIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import Colors from 'constants/Colors';
 import { BlurView } from "@react-native-community/blur";
-import { FloatingLabelInput } from 'react-native-floating-label-input';
+import { InputField } from 'utils/InputField';
 import { Logo } from 'utils/Logo';
 
 export function Settings() {
@@ -344,24 +344,14 @@ export function Settings() {
                 <>
                   <Text style={styles.modalDescription}>{ state.strings.sealUnset }</Text>
 
-                  <View style={styles.modalInput}>
-                    <FloatingLabelInput
-                      label={state.strings.password}
-                      isPassword={true}
-                      value={state.sealPassword}
-                      autoCapitalize={'none'} 
-                      spellCheck={false}
-
-                      inputStyles={styles.floatingInput}
-                      labelStyles={styles.floatingLabel}
-                      customLabelStyles={styles.floatingCustomLabel}
-                      containerStyles={styles.floatingContainer}
-
-                      onChangeText={actions.setSealPassword}
-                      customShowPasswordComponent={<MatIcons name="eye-outline" size={16} color={Colors.inputPlaceholder} />}
-                      customHidePasswordComponent={<MatIcons name="eye-off-outline" size={16} color={Colors.inputPlaceholder} />}
-                    />
-                  </View>
+                  <InputField style={styles.field}
+                    label={state.strings.password}
+                    secret={true}
+                    value={state.sealPassword}
+                    autoCapitalize={'none'} 
+                    spellCheck={false}
+                    onChangeText={actions.setSealPassword}
+                  />
      
                   { state.sealPassword && (
                     <TouchableOpacity style={styles.enabledButton} activeOpacity={1} onPress={() => sealAction(actions.generateKey)}>
@@ -380,24 +370,14 @@ export function Settings() {
                 <>
                   <Text style={styles.modalDescription}>{ state.strings.sealLocked }</Text>
 
-                  <View style={styles.modalInput}>
-                    <FloatingLabelInput
-                      label={state.strings.password}
-                      isPassword={true}
-                      value={state.sealPassword}
-                      autoCapitalize={'none'}
-                      spellCheck={false}
-
-                      inputStyles={styles.floatingInput}
-                      labelStyles={styles.floatingLabel}
-                      customLabelStyles={styles.floatingCustomLabel}
-                      containerStyles={styles.floatingContainer}
-
-                      onChangeText={actions.setSealPassword}
-                      customShowPasswordComponent={<MatIcons name="eye-outline" size={16} color={Colors.inputPlaceholder} />}
-                      customHidePasswordComponent={<MatIcons name="eye-off-outline" size={16} color={Colors.inputPlaceholder} />}
-                    />
-                  </View>
+                  <InputField style={styles.field}
+                    label={state.strings.password}
+                    secret={true}
+                    value={state.sealPassword}
+                    autoCapitalize={'none'}
+                    spellCheck={false}
+                    onChangeText={actions.setSealPassword}
+                  />
 
                   <View style={styles.buttons}>
                     { state.sealPassword && (
@@ -433,19 +413,13 @@ export function Settings() {
               { state.sealEnabled && state.sealRemove && (
                 <>
                   <Text style={styles.modalDescription}>{ state.strings.sealDelete }</Text>
-                  <View style={styles.modalInput}>
-                    <FloatingLabelInput
-                      label={state.strings.typeDelete}
-                      value={state.sealDelete}
-                      autoCapitalize={'none'}
-                      spellCheck={false}
-                      inputStyles={styles.floatingInput}
-                      labelStyles={styles.floatingLabel}
-                      customLabelStyles={styles.floatingCustomLabel}
-                      containerStyles={styles.floatingContainer}
-                      onChangeText={actions.setSealDelete}
-                    />
-                  </View>
+                  <InputField style={styles.field}
+                    label={state.strings.typeDelete}
+                    value={state.sealDelete}
+                    autoCapitalize={'none'}
+                    spellCheck={false}
+                    onChangeText={actions.setSealDelete}
+                  />
                   { state.sealDelete === state.strings.deleteKey && (
                     <TouchableOpacity style={styles.dangerButton} activeOpacity={1} onPress={() => sealAction(actions.removeKey)}>
                       <Text style={styles.dangerButtonText}>{ state.strings.delete }</Text>
@@ -470,24 +444,14 @@ export function Settings() {
                 <>
                   <Text style={styles.modalDescription}>{ state.strings.changePassword }</Text>
 
-                  <View style={styles.modalInput}>
-                    <FloatingLabelInput
-                      label={state.strings.password}
-                      isPassword={true}
-                      value={state.sealPassword}
-                      autoCapitalize={'none'} 
-                      spellCheck={false}
-
-                      inputStyles={styles.floatingInput}
-                      labelStyles={styles.floatingLabel}
-                      customLabelStyles={styles.floatingCustomLabel}
-                      containerStyles={styles.floatingContainer}
-
-                      onChangeText={actions.setSealPassword}
-                      customShowPasswordComponent={<MatIcons name="eye-outline" size={16} color={Colors.inputPlaceholder} />}
-                      customHidePasswordComponent={<MatIcons name="eye-off-outline" size={16} color={Colors.inputPlaceholder} />}
-                    />
-                  </View>
+                  <InputField style={styles.field}
+                    label={state.strings.password}
+                    isPassword={true}
+                    value={state.sealPassword}
+                    autoCapitalize={'none'} 
+                    spellCheck={false}
+                    onChangeText={actions.setSealPassword}
+                  />
 
                   { state.sealPassword && (
                     <TouchableOpacity style={styles.enabledButton} activeOpacity={1} onPress={() => sealAction(actions.updateKey)}>
@@ -531,43 +495,26 @@ export function Settings() {
               <ActivityIndicator style={styles.modalBusy} animating={busy} color={Colors.primary} />
 
               <Text textAlign={'center'} style={styles.modalDescription}>{ state.strings.changeMessage }</Text>
-              <View style={styles.modalInput}>
-                <FloatingLabelInput
-                  label={state.strings.username}
-                  value={state.username}
-                  autoCapitalize={'none'} 
-                  spellCheck={false}
-                  staticLabel={false}
-                  autoCorrect={false}
-                  autoComplete={'off'}
 
-                  inputStyles={styles.floatingInput}
-                  labelStyles={styles.floatingLabel}
-                  customLabelStyles={styles.floatingCustomLabel}
-                  containerStyles={styles.floatingContainer}
+              <InputField
+                label={state.strings.username}
+                value={state.username}
+                autoCapitalize={'none'}
+                spellCheck={false}
+                style={styles.field}
+                onChangeText={actions.setUsername}
+              /> 
 
-                  onChangeText={actions.setUsername}
-                />
-              </View>
+              <InputField
+                label={state.strings.password}
+                value={state.password}
+                autoCapitalize={'none'}
+                spellCheck={false}
+                style={styles.field}
+                onChangeText={actions.setPassword}
+                secret={true}
+              /> 
 
-              <View style={styles.modalInput}>
-                <FloatingLabelInput
-                  label={state.strings.password}
-                  isPassword={true}
-                  value={state.password}
-                  autoCapitalize={'none'} 
-                  spellCheck={false}
-
-                  inputStyles={styles.floatingInput}
-                  labelStyles={styles.floatingLabel}
-                  customLabelStyles={styles.floatingCustomLabel}
-                  containerStyles={styles.floatingContainer}
-
-                  onChangeText={actions.setPassword}
-                  customShowPasswordComponent={<MatIcons name="eye-outline" size={16} color={Colors.inputPlaceholder} />}
-                  customHidePasswordComponent={<MatIcons name="eye-off-outline" size={16} color={Colors.inputPlaceholder} />}
-                />
-              </View>
               <View style={styles.availableStatus}>
                 { state.validated && !state.available && (
                   <Text style={styles.notAvailable}>{ state.strings.notAvailable }</Text>
@@ -609,19 +556,13 @@ export function Settings() {
               <Text style={styles.modalHeader}>{ state.strings.deleteAccount }</Text>
               <ActivityIndicator style={styles.modalBusy} animating={busy} color={Colors.primary} />
 
-              <View style={styles.modalInput}>
-                <FloatingLabelInput
-                  label={state.strings.typeDelete}
-                  value={state.confirm}
-                  autoCapitalize={'none'} 
-                  spellCheck={false}
-                  inputStyles={styles.floatingInput}
-                  labelStyles={styles.floatingLabel}
-                  customLabelStyles={styles.floatingCustomLabel}
-                  containerStyles={styles.floatingContainer}
-                  onChangeText={actions.setConfirm}
-                />
-              </View>
+              <InputField style={styles.field}
+                label={state.strings.typeDelete}
+                value={state.confirm}
+                autoCapitalize={'none'} 
+                spellCheck={false}
+                onChangeText={actions.setConfirm}
+              />
  
               <View style={styles.buttons}>
                 { state.confirm === state.strings.deleteKey && (
diff --git a/app/mobile/src/session/settings/Settings.styled.js b/app/mobile/src/session/settings/Settings.styled.js
index 6c314d36..4eb03b35 100644
--- a/app/mobile/src/session/settings/Settings.styled.js
+++ b/app/mobile/src/session/settings/Settings.styled.js
@@ -369,6 +369,30 @@ export const styles = StyleSheet.create({
     width: '100%',
     height: 32,
   },
-
+  field: {
+    input: {
+      backgroundColor: Colors.inputBase,
+      borderRadius: 8,
+      minHeight: 48,
+      maxHeight: 128,
+    },
+    inputText: {
+      color: Colors.inputText,
+    },
+    label: {
+      height: 16,
+      paddingLeft: 8,
+    },
+    labelText: {
+      color: Colors.inputPlaceholder,
+      fontSize: 12,
+    },
+    container: { 
+      width: '100%', 
+      paddingLeft: 16,
+      paddingRight: 16,
+      paddingTop: 8,
+    },
+  },
 });
 
diff --git a/app/mobile/src/utils/InputField.jsx b/app/mobile/src/utils/InputField.jsx
index 68b8b87a..e711d5db 100644
--- a/app/mobile/src/utils/InputField.jsx
+++ b/app/mobile/src/utils/InputField.jsx
@@ -1,6 +1,10 @@
-import { TextInput, Text, View } from 'react-native';
+import { TextInput, Text, View, TouchableOpacity } from 'react-native';
+import { useState } from 'react';
+import MatIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 
-export function InputField({ label, value, autoCapitalize, spellCheck, multiline, onChangeText, style }) {
+export function InputField({ label, value, secret, autoCapitalize, spellCheck, multiline, onChangeText, style }) {
+
+  const [hidden, setHidden] = useState(true);
 
   return (
     <View style={style?.container}>
@@ -9,7 +13,23 @@ export function InputField({ label, value, autoCapitalize, spellCheck, multiline
           <Text style={style?.labelText}>{ label }</Text>
         )}
       </View>
-      <TextInput placeholder={label} lineBreakStategyIOS={'standard'} placeholderTextColor={style?.labelText?.color} value={value} autoCapitalize={autoCapitalize} spellCheck={spellCheck} multiline={multiline} style={style?.input} onChangeText={onChangeText} />
+      <View style={{...style?.input, paddingLeft: 8, display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
+        <View style={{ flexGrow: 1 }}>
+          <TextInput placeholder={label} placeholderTextColor={style?.labelText?.color} value={value}
+              autoCapitalize={autoCapitalize} spellCheck={spellCheck} multiline={multiline}
+              secureTextEntry={secret && hidden} onChangeText={onChangeText} style={{ ...style?.inputText, padding: 8 }} />
+        </View>
+        { secret && !hidden && (
+          <TouchableOpacity style={{ width: 48, display: 'flex', alignItems: 'center' }} onPress={() => setHidden(true)}>
+            <MatIcons name="eye-off-outline" size={20} color={style?.labelText?.color} />
+          </TouchableOpacity>
+        )}
+        { secret && hidden && (
+          <TouchableOpacity style={{ width: 48, display: 'flex', alignItems: 'center' }} onPress={() => setHidden(false)}>
+            <MatIcons name="eye-outline" size={20} color={style?.labelText?.color} />
+          </TouchableOpacity>
+        )}
+      </View>
     </View>
   );
 }
diff --git a/app/mobile/yarn.lock b/app/mobile/yarn.lock
index ebcaad5b..7ddce191 100644
--- a/app/mobile/yarn.lock
+++ b/app/mobile/yarn.lock
@@ -6501,11 +6501,6 @@ react-native-fast-image@^8.6.3:
   resolved "https://registry.yarnpkg.com/react-native-fast-image/-/react-native-fast-image-8.6.3.tgz#6edc3f9190092a909d636d93eecbcc54a8822255"
   integrity sha512-Sdw4ESidXCXOmQ9EcYguNY2swyoWmx53kym2zRsvi+VeFCHEdkO+WG1DK+6W81juot40bbfLNhkc63QnWtesNg==
 
-react-native-floating-label-input@^1.4.2:
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/react-native-floating-label-input/-/react-native-floating-label-input-1.4.2.tgz#4db85aca6ef8509f0c4fb369b55b1fd1915ebe1e"
-  integrity sha512-fHN+gQC+ghZgRuB+gJfNNo5IJRDy0grOia0gJpEmXbx9YqPud6nonQYunGWaHc9/b9GpL5n1q4VgWvZDTV+QLQ==
-
 react-native-fs@^2.20.0:
   version "2.20.0"
   resolved "https://registry.yarnpkg.com/react-native-fs/-/react-native-fs-2.20.0.tgz#05a9362b473bfc0910772c0acbb73a78dbc810f6"