Move reusable components to separate folder, password view refactoring

components/settings/password/check-current-password.js

@@ -1,23 +0,0 @@
-import { Alert } from 'react-native'
-import { openDb } from '../../../db'
-import { shared } from '../../../i18n/en/labels'
-
-export default async function checkPassword({hash, onCancel, onTryAgain }) {
-  try {
-    await openDb(hash)
-    return true
-  } catch (err) {
-    Alert.alert(
-      shared.incorrectPassword,
-      shared.incorrectPasswordMessage,
-      [{
-        text: shared.cancel,
-        onPress: onCancel
-      }, {
-        text: shared.tryAgain,
-        onPress: onTryAgain
-      }]
-    )
-    return false
-  }
-}

components/settings/password/create.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import { View } from 'react-native'
 import settings from '../../../i18n/en/settings'
 import EnterNewPassword from './enter-new-password'
-import SettingsButton from '../settings-button'
+import SettingsButton from '../common/settings-button'
 import showBackUpReminder from './show-backup-reminder'
 
 export default class CreatePassword extends Component {

components/settings/password/delete.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import labels from '../../../i18n/en/settings'
 import { changeEncryptionAndRestartApp } from '../../../db'
 import ConfirmWithPassword from '../common/confirm-with-password'
-import SettingsButton from '../settings-button'
+import SettingsButton from '../common/settings-button'
 
 export default class DeletePassword extends Component {
   constructor() {

components/settings/password/enter-new-password.js

@@ -4,8 +4,8 @@ import nodejs from 'nodejs-mobile-react-native'
 
 import { requestHash, changeEncryptionAndRestartApp } from '../../../db'
 import AppText from '../../app-text'
-import PasswordField from './password-field'
-import SettingsButton from '../settings-button'
+import PasswordField from '../common/password-field'
+import SettingsButton from '../common/settings-button'
 
 import styles from '../../../styles'
 import settings from '../../../i18n/en/settings'

components/settings/password/index.js

@@ -1,9 +1,9 @@
 import React, { Component } from 'react'
-import { View, ScrollView } from 'react-native'
+import { ScrollView } from 'react-native'
 import CreatePassword from './create'
 import ChangePassword from './update'
 import DeletePassword from './delete'
-import SettingsSegment from '../settings-segment'
+import SettingsSegment from '../common/settings-segment'
 import AppText from '../../app-text'
 import {
   hasEncryptionObservable
@@ -14,8 +14,7 @@ export default class PasswordSetting extends Component {
   constructor(props) {
     super(props)
     this.state = {
-      showUpdateAndDelete: hasEncryptionObservable.value,
-      showCreate: !hasEncryptionObservable.value,
+      isPasswordSet: hasEncryptionObservable.value,
       isChangingPassword: false,
       isDeletingPassword: false
     }
@@ -32,43 +31,37 @@ export default class PasswordSetting extends Component {
   render() {
 
     const {
-      showUpdateAndDelete,
+      isPasswordSet,
       isChangingPassword,
       isDeletingPassword,
-      showCreate
     } = this.state
 
+    const {
+      title,
+      explainerEnabled,
+      explainerDisabled
+    } = labels.passwordSettings
+
     return (
       <ScrollView>
-        <SettingsSegment title={labels.passwordSettings.title}>
+        <SettingsSegment title={title}>
+          <AppText>
+            { isPasswordSet ? explainerEnabled : explainerDisabled }
+          </AppText>
 
-          {showUpdateAndDelete ?
-            <AppText>{labels.passwordSettings.explainerEnabled}</AppText>
-            :
-            <AppText>{labels.passwordSettings.explainerDisabled}</AppText>
-          }
+          { !isPasswordSet && <CreatePassword/> }
 
-          {
-            showUpdateAndDelete && (
-              <View>
-                {(isChangingPassword
-                  || !isChangingPassword && !isDeletingPassword)
-                && <ChangePassword
-                  onStartChangingPassword = {this.onChangingPassword}
-                />}
-                {(isDeletingPassword
-                  || !isChangingPassword && !isDeletingPassword)
-                && <DeletePassword
-                  onStartDeletingPassword = {this.onDeletingPassword}
-                />}
-              </View>
-            )
-          }
-
-          {showCreate &&
-          <CreatePassword/>
-          }
+          { (isPasswordSet && !isDeletingPassword) && (
+            <ChangePassword
+              onStartChangingPassword = {this.onChangingPassword}
+            />
+          )}
 
+          { (isPasswordSet && !isChangingPassword) && (
+            <DeletePassword
+              onStartDeletingPassword = {this.onDeletingPassword}
+            />
+          )}
         </SettingsSegment>
       </ScrollView>
     )

components/settings/password/password-field.js

@@ -1,19 +0,0 @@
-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/password/update.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import settings from '../../../i18n/en/settings'
 import EnterNewPassword from './enter-new-password'
-import SettingsButton from '../settings-button'
+import SettingsButton from '../common/settings-button'
 import showBackUpReminder from './show-backup-reminder'
 import ConfirmWithPassword from '../common/confirm-with-password'