Move reusable components to separate folder, password view refactoring

components/settings/about.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import { ScrollView } from 'react-native'
 import Hyperlink from 'react-native-hyperlink'
 import AppText from '../app-text'
-import SettingsSegment from './settings-segment'
+import SettingsSegment from './common/settings-segment'
 import styles from '../../styles/index'
 import labels, { links } from '../../i18n/en/settings'
 import replace from '../helpers/replace-url-with-text'

components/settings/common/alert-error.js

@@ -1,5 +1,5 @@
 import { Alert } from 'react-native'
-import { shared as sharedLabels } from '../../i18n/en/labels'
+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 PasswordField from './password-field'
-import SettingsButton from '../settings-button'
+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/settings-button.js

@@ -2,8 +2,8 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 import { TouchableOpacity } from 'react-native'
-import AppText from '../app-text'
+import AppText from '../../app-text'
-import styles from '../../styles'
+import styles from '../../../styles'
 
 const SettingsButton = ({ children, ...props }) => {
   return (

components/settings/common/settings-segment.js

@@ -2,8 +2,8 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 import { View } from 'react-native'
-import AppText from '../app-text'
+import AppText from '../../app-text'
-import styles from '../../styles'
+import styles from '../../../styles'
 
 const SettingsSegment = ({ children, ...props }) => {
   const style = [styles.settingsSegment, props.style]

components/settings/data-management/delete-data.js

@@ -4,9 +4,9 @@ import { Alert, ToastAndroid } from 'react-native'
 
 import { clearDb, isDbEmpty } from '../../../db'
 import { hasEncryptionObservable } from '../../../local-storage'
-import SettingsButton from '../settings-button'
+import SettingsButton from '../common/settings-button'
 import ConfirmWithPassword from '../common/confirm-with-password'
-import alertError from '../alert-error'
+import alertError from '../common/alert-error'
 
 import settings from '../../../i18n/en/settings'
 import { shared as sharedLabels } from '../../../i18n/en/labels'

components/settings/data-management/export-dialog.js

@@ -2,7 +2,7 @@ import Share from 'react-native-share'
 
 import { getCycleDaysSortedByDate } from '../../../db'
 import getDataAsCsvDataUri from '../../../lib/import-export/export-to-csv'
-import alertError from '../alert-error'
+import alertError from '../common/alert-error'
 import settings from '../../../i18n/en/settings'
 import { EXPORT_FILE_NAME } from './constants'
 import RNFS from 'react-native-fs'

components/settings/data-management/import-dialog.js

@@ -4,7 +4,7 @@ import rnfs from 'react-native-fs'
 import importCsv from '../../../lib/import-export/import-from-csv'
 import { shared as sharedLabels } from '../../../i18n/en/labels'
 import labels from '../../../i18n/en/settings'
-import alertError from '../alert-error'
+import alertError from '../common/alert-error'
 
 export default function openImportDialogAndImport() {
   Alert.alert(

components/settings/data-management/index.js

@@ -1,8 +1,8 @@
 import React from 'react'
 import { ScrollView } from 'react-native'
 import AppText from '../../app-text'
-import SettingsSegment from '../settings-segment'
+import SettingsSegment from '../common/settings-segment'
-import SettingsButton from '../settings-button'
+import SettingsButton from '../common/settings-button'
 import openImportDialogAndImport from './import-dialog'
 import openShareDialogAndExport from './export-dialog'
 import DeleteData from './delete-data'

components/settings/nfp-settings/index.js

@@ -6,7 +6,7 @@ import Hyperlink from 'react-native-hyperlink'
 import styles, { iconStyles } from '../../../styles'
 import labels from '../../../i18n/en/settings'
 import AppText from '../../app-text'
-import SettingsSegment from '../settings-segment'
+import SettingsSegment from '../common/settings-segment'
 import TempSlider from './temp-slider'
 import UseCervixSetting from './use-cervix'
 import Icon from 'react-native-vector-icons/Entypo'

components/settings/nfp-settings/temp-slider.js

@@ -9,7 +9,7 @@ import {
 import { secondaryColor } from '../../../styles/index'
 import labels from '../../../i18n/en/settings'
 import config from '../../../config'
-import alertError from '../alert-error'
+import alertError from '../common/alert-error'
 
 export default class TempSlider extends Component {
   constructor(props) {

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 PasswordField from '../common/password-field'
-import SettingsButton from '../settings-button'
+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,
+      isPasswordSet: hasEncryptionObservable.value,
-      showCreate: !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 ?
+          { !isPasswordSet && <CreatePassword/> }
-            <AppText>{labels.passwordSettings.explainerEnabled}</AppText>
-            :
-            <AppText>{labels.passwordSettings.explainerDisabled}</AppText>
-          }
 
-          {
+          { (isPasswordSet && !isDeletingPassword) && (
-            showUpdateAndDelete && (
+            <ChangePassword
-              <View>
+              onStartChangingPassword = {this.onChangingPassword}
-                {(isChangingPassword
+            />
-                  || !isChangingPassword && !isDeletingPassword)
+          )}
-                && <ChangePassword
-                  onStartChangingPassword = {this.onChangingPassword}
-                />}
-                {(isDeletingPassword
-                  || !isChangingPassword && !isDeletingPassword)
-                && <DeletePassword
-                  onStartDeletingPassword = {this.onDeletingPassword}
-                />}
-              </View>
-            )
-          }
-
-          {showCreate &&
-          <CreatePassword/>
-          }
 
+          { (isPasswordSet && !isChangingPassword) && (
+            <DeletePassword
+              onStartDeletingPassword = {this.onDeletingPassword}
+            />
+          )}
         </SettingsSegment>
       </ScrollView>
     )

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'
 

components/settings/reminders/index.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import {
   ScrollView,
 } from 'react-native'
-import SettingsSegment from '../settings-segment'
+import SettingsSegment from '../common/settings-segment'
 import TempReminderPicker from './temp-reminder-picker'
 import PeriodReminderPicker from './period-reminder'
 

i18n/en/labels.js

@@ -11,7 +11,7 @@ export const shared = {
   incorrectPasswordMessage: 'That password is incorrect.',
   tryAgain: 'Try again',
   ok: 'OK',
-  unlock: 'Unlock',
+  confirmToProceed: 'Confirm to proceed',
   date: 'Date',
   cycleDayWithLinebreak: 'Cycle\nday',
   loading: 'Loading ...',