Renames common->shared component directory

components/settings/shared/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/shared/confirm-with-password.js

@@ -0,0 +1,88 @@
+import React, { Component } from 'react'
+import { View, Alert } from 'react-native'
+
+import nodejs from 'nodejs-mobile-react-native'
+import { requestHash, openDb } from '../../../db'
+
+import PasswordField from './password-field'
+import SettingsButton from '../shared/settings-button'
+
+import settings from '../../../i18n/en/settings'
+import { shared } from '../../../i18n/en/labels'
+
+export default class ConfirmWithPassword extends Component {
+  constructor() {
+    super()
+    this.state = {
+      password: null
+    }
+    nodejs.channel.addListener(
+      'password-check',
+      this.checkPassword,
+      this
+    )
+  }
+
+  componentWillUnmount() {
+    nodejs.channel.removeListener('password-check', this.checkPassword)
+  }
+
+  resetPasswordInput = () => {
+    this.setState({ password: null })
+  }
+
+
+  onIncorrectPassword = () => {
+    Alert.alert(
+      shared.incorrectPassword,
+      shared.incorrectPasswordMessage,
+      [{
+        text: shared.cancel,
+        onPress: this.props.onCancel
+      }, {
+        text: shared.tryAgain,
+        onPress: this.resetPasswordInput
+      }]
+    )
+  }
+
+  checkPassword = async hash => {
+    try {
+      await openDb(hash)
+      this.props.onSuccess()
+    } catch (err) {
+      this.onIncorrectPassword()
+    }
+  }
+
+  handlePasswordInput = (password) => {
+    this.setState({ password })
+  }
+
+  initPasswordCheck = () => {
+    requestHash('password-check', this.state.password)
+  }
+
+  render() {
+
+    const { password } = this.state
+    const labels = settings.passwordSettings
+
+    return (
+      <View>
+        <PasswordField
+          placeholder={labels.enterCurrent}
+          value={password}
+          onChangeText={this.handlePasswordInput}
+        />
+        <SettingsButton
+          onPress={this.initPasswordCheck}
+          disabled={!password}
+        >
+          {shared.confirmToProceed}
+        </SettingsButton>
+      </View>
+    )
+
+  }
+}

components/settings/shared/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/shared/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/shared/settings-segment.js

@@ -0,0 +1,26 @@
+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 (
+    <View style={[styles.settingsSegment, props.style]}>
+      {
+        props.title
+        && <AppText style={styles.settingsSegmentTitle}>{props.title}</AppText>
+      }
+      {children}
+    </View>
+  )
+}
+
+SettingsSegment.propTypes = {
+  title: PropTypes.string
+}
+
+export default SettingsSegment