Move reusable components to separate folder, password view refactoring

components/settings/common/alert-error.js

@@ -0,0 +1,6 @@
+import { Alert } from 'react-native'
+import { shared as sharedLabels } from '../../../i18n/en/labels'
+
+export default function alertError(msg) {
+  Alert.alert(sharedLabels.errorTitle, msg)
+}

components/settings/common/confirm-with-password.js

@@ -4,8 +4,8 @@ import { View, Alert } from 'react-native'
 import nodejs from 'nodejs-mobile-react-native'
 import { requestHash, openDb } from '../../../db'
 
-import PasswordField from '../password/password-field'
-import SettingsButton from '../settings-button'
+import PasswordField from './password-field'
+import SettingsButton from '../common/settings-button'
 
 import settings from '../../../i18n/en/settings'
 import { shared } from '../../../i18n/en/labels'
@@ -79,7 +79,7 @@ export default class ConfirmWithPassword extends Component {
           onPress={this.initPasswordCheck}
           disabled={!password}
         >
-          {settings.deleteSegment.title}
+          {shared.confirmToProceed}
         </SettingsButton>
       </View>
     )

components/settings/common/password-field.js

@@ -0,0 +1,19 @@
+import React from 'react'
+import { TextInput } from 'react-native'
+import styles, {secondaryColor} from '../../../styles'
+
+export default function PasswordField(props) {
+  return (
+    <TextInput
+      style={styles.passwordField}
+      autoFocus={props.autoFocus === false ? false : true}
+      secureTextEntry={true}
+      onChangeText={props.onChangeText}
+      value={props.value}
+      placeholder={props.placeholder}
+      borderWidth={1}
+      borderColor={secondaryColor}
+      borderStyle={'solid'}
+    />
+  )
+}

components/settings/common/settings-button.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { TouchableOpacity } from 'react-native'
+import AppText from '../../app-text'
+import styles from '../../../styles'
+
+const SettingsButton = ({ children, ...props }) => {
+  return (
+    <TouchableOpacity
+      style={[
+        styles.settingsButton,
+        props.disabled ? styles.settingsButtonDisabled : null
+      ]}
+      { ...props }
+    >
+      <AppText style={styles.settingsButtonText}>
+        {children}
+      </AppText>
+    </TouchableOpacity>
+  )
+}
+
+SettingsButton.propTypes = {
+  onPress: PropTypes.func.isRequired,
+  disabled: PropTypes.bool
+}
+
+export default SettingsButton

components/settings/common/settings-segment.js

@@ -0,0 +1,31 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { View } from 'react-native'
+import AppText from '../../app-text'
+import styles from '../../../styles'
+
+const SettingsSegment = ({ children, ...props }) => {
+  const style = [styles.settingsSegment, props.style]
+  if (props.last) style.push(styles.settingsSegmentLast)
+  return (
+<<<<<<< HEAD
+    <View style={style}>
+      <AppText style={styles.settingsSegmentTitle}>{props.title}</AppText>
+=======
+    <View style={[styles.settingsSegment, props.style]}>
+      {
+        props.title
+        && <AppText style={styles.settingsSegmentTitle}>{props.title}</AppText>
+      }
+>>>>>>> Refactor npf settings component
+      {children}
+    </View>
+  )
+}
+
+SettingsSegment.propTypes = {
+  title: PropTypes.string
+}
+
+export default SettingsSegment