Move create password flow to settings page

components/home.js

@@ -6,10 +6,9 @@ import {
   ScrollView
 } from 'react-native'
 import { LocalDate, ChronoUnit } from 'js-joda'
-import nodejs from 'nodejs-mobile-react-native'
 import styles from '../styles/index'
 import cycleModule from '../lib/cycle'
-import { requestHash, getOrCreateCycleDay, getBleedingDaysSortedByDate, fillWithMucusDummyData, fillWithCervixDummyData, changeEncryptionAndRestartApp } from '../db'
+import { getOrCreateCycleDay, getBleedingDaysSortedByDate, fillWithMucusDummyData, fillWithCervixDummyData } from '../db'
 import {bleedingPrediction as labels} from './labels'
 
 export default class Home extends Component {
@@ -35,22 +34,10 @@ export default class Home extends Component {
     })(this)
 
     getBleedingDaysSortedByDate().addListener(this.setStateWithCurrentText)
-
-    this.startEncryption = async (msg) => {
-      msg = JSON.parse(msg)
-      changeEncryptionAndRestartApp(msg.message)
-    }
-
-    nodejs.channel.addListener(
-      'message',
-      this.startEncryption,
-      this
-    )
   }
 
   componentWillUnmount() {
     getBleedingDaysSortedByDate().removeListener(this.setStateWithCurrentText)
-    nodejs.channel.removeListener('message', this.startEncryption)
   }
 
   passTodayToDayView() {
@@ -84,14 +71,6 @@ export default class Home extends Component {
               title="fill with example data for cervix&temp">
             </Button>
           </View>
-          <View style={styles.homeButton}>
-            <Button
-              onPress={() => {
-                requestHash()
-              }}
-              title="encrypt, yo">
-            </Button>
-          </View>
         </View>
       </ScrollView>
     )

components/labels.js

@@ -55,10 +55,12 @@ export const settings = {
   },
   passwordSettings: {
     title: 'App password',
-    explainerDisabled: "Encrypt the app's database with a password. You have to enter the password every time the app is started.",
+    explainerDisabled: "Encrypt the app's database with a password. You need to enter the password every time the app is started.",
     explainerEnabled: "Password protection and database encryption is currently enabled",
+    setPassword: 'Set password',
     deletePassword: "Delete password",
     enterCurrent: "Please enter your current password",
+    enterNew: "Please enter a new password",
     backupReminderTitle: 'Have you made a backup of your data?',
     backupReminder: 'When you make changes to your password, we delete your old data and store it in a new version. To be safe, please backup your data using the export function before making changes to your password. Making any changes to your password setting will also restart the app immediately.',
   }

components/settings/password-setting.js

@@ -18,7 +18,7 @@ export default class PasswordSetting extends Component {
   constructor(props) {
     super(props)
     this.state = {
-      enabled: hasEncryptionObservable.value,
+      encryptionEnabled: hasEncryptionObservable.value,
       currentPassword: null,
       enteringCurrentPassword: false
     }
@@ -38,8 +38,20 @@ export default class PasswordSetting extends Component {
   passHashToDb = async (msg) => {
     msg = JSON.parse(msg)
     if (msg.type != 'sha512') return
+    if (this.state.encryptionEnabled) {
+      await this.removeEncryption(msg.message)
+    } else if (!this.state.encryptionEnabled) {
+      await changeEncryptionAndRestartApp(msg.message)
+    }
+  }
+
+  addEncryption = async hash => {
+    changeEncryptionAndRestartApp(hash)
+  }
+
+  removeEncryption = async hash => {
     try {
-      await openDb({ hash: msg.message, persistConnection: false })
+      await openDb({ hash, persistConnection: false })
     } catch (err) {
       console.log(err)
       Alert.alert(
@@ -69,7 +81,7 @@ export default class PasswordSetting extends Component {
         <AppText style={styles.settingsSegmentTitle}>
           {labels.passwordSettings.title}
         </AppText>
-        {this.state.enabled ?
+        {this.state.encryptionEnabled ?
           <AppText>{labels.passwordSettings.explainerEnabled}</AppText>
           :
           <AppText>{labels.passwordSettings.explainerDisabled}</AppText>
@@ -90,20 +102,13 @@ export default class PasswordSetting extends Component {
             />
           </View>
         }
+        {this.state.encryptionEnabled &&
           <TouchableOpacity
             onPress={() => {
               if (!this.state.enteringCurrentPassword) {
-              Alert.alert(
-                labels.passwordSettings.backupReminderTitle,
-                labels.passwordSettings.backupReminder,
-                [{
-                  text: shared.cancel,
-                  style: 'cancel'
-                }, {
-                  text: shared.ok,
-                  onPress: () => this.setState({enteringCurrentPassword: true})
-                }]
-              )
+                showBackUpReminder(() => {
+                  this.setState({ enteringCurrentPassword: true })
+                })
               } else {
                 requestHash(this.state.currentPassword)
               }
@@ -113,7 +118,55 @@ export default class PasswordSetting extends Component {
               {labels.passwordSettings.deletePassword}
             </AppText>
           </TouchableOpacity>
+        }
+
+        {this.state.enteringNewPassword &&
+          <View>
+            <TextInput
+              style={styles.passwordField}
+              onChangeText={val => {
+                this.setState({
+                  newPassword: val
+                })
+              }}
+              value={this.state.newPassword}
+              placeholder={labels.passwordSettings.enterNew}
+              secureTextEntry={true}
+            />
+          </View>
+        }
+        {!this.state.encryptionEnabled &&
+          <TouchableOpacity
+            onPress={() => {
+              if (!this.state.enteringNewPassword) {
+                showBackUpReminder(() => {
+                  this.setState({ enteringNewPassword: true })
+                })
+              } else {
+                requestHash(this.state.newPassword)
+              }
+            }}
+            style={styles.settingsButton}>
+            <AppText style={styles.settingsButtonText}>
+              {labels.passwordSettings.setPassword}
+            </AppText>
+          </TouchableOpacity>
+        }
       </View>
     )
   }
 }
+
+function showBackUpReminder(okHandler) {
+  Alert.alert(
+    labels.passwordSettings.backupReminderTitle,
+    labels.passwordSettings.backupReminder,
+    [{
+      text: shared.cancel,
+      style: 'cancel'
+    }, {
+      text: shared.ok,
+      onPress: okHandler
+    }]
+  )
+}

db/index.js

@@ -157,7 +157,7 @@ export function tryToImportWithoutDelete(cycleDays) {
 export function requestHash(pw) {
   nodejs.channel.send(JSON.stringify({
     type: 'request-SHA512',
-    message: pw || 'mypassword'
+    message: pw
   }))
 }