Add forgot password flow

components/labels.js

@@ -107,5 +107,12 @@ export const bleedingPrediction = {
 
 export const passwordPrompt = {
   title: 'Unlock app',
-  enterPassword: 'Enter password here'
+  enterPassword: 'Enter password here',
+  deleteDatabaseExplainer: "If you've forgotten your password, unfortunately, there is nothing we can do to recover your data, because it is encrypted with the password only you know. You can, however, delete all your encrypted data and start fresh. Once all data has been erased, you can set a new password in the settings, if you like.",
+  forgotPassword: 'Forgot your password?',
+  deleteDatabaseTitle: 'Forgot your password?',
+  deleteData: 'Yes, delete all my data',
+  areYouSureTitle: 'Are you sure?',
+  areYouSure: 'Are you absolutely sure you want to permanently delete all your data?',
+  reallyDeleteData: 'Yes, I am sure'
 }

components/password-prompt.js

@@ -4,7 +4,7 @@ import nodejs from 'nodejs-mobile-react-native'
 import { AppText } from './app-text'
 import { hasEncryptionObservable } from '../local-storage'
 import styles from '../styles'
-import { passwordPrompt, shared } from './labels'
+import { passwordPrompt as labels, shared } from './labels'
 import { requestHash, deleteDbAndOpenNew, openDb } from '../db'
 
 export default class PasswordPrompt extends Component {
@@ -66,7 +66,7 @@ export default class PasswordPrompt extends Component {
               onChangeText={val => this.setState({ password: val })}
               style={styles.passwordPromptField}
               secureTextEntry={true}
-              placeholder={passwordPrompt.enterPassword}
+              placeholder={labels.enterPassword}
             />
             <TouchableOpacity
               style={styles.passwordPromptButton}
@@ -75,18 +75,41 @@ export default class PasswordPrompt extends Component {
               }}
             >
               <AppText style={styles.passwordPromptButtonText}>
-                {passwordPrompt.title}
+                {labels.title}
               </AppText>
             </TouchableOpacity>
             <TouchableOpacity
-              style={styles.passwordPromptButton}
               onPress={async () => {
-                await deleteDbAndOpenNew()
-                this.setState({ showApp: true })
+                Alert.alert(
+                  labels.deleteDatabaseTitle,
+                  labels.deleteDatabaseExplainer,
+                  [{
+                    text: shared.cancel,
+                    style: 'cancel'
+                  }, {
+                    text: labels.deleteData,
+                    onPress: () => {
+                      Alert.alert(
+                        labels.areYouSureTitle,
+                        labels.areYouSure,
+                        [{
+                          text: shared.cancel,
+                          style: 'cancel'
+                        }, {
+                          text: labels.reallyDeleteData,
+                          onPress: async () => {
+                            await deleteDbAndOpenNew()
+                            this.props.showApp()
+                          }
+                        }]
+                      )
+                    }
+                  }]
+                )
               }}
             >
-              <AppText style={styles.passwordPromptButtonText}>
-                {'Delete old db and make unencrypted new'}
+              <AppText style={styles.passwordPromptForgotPasswordText}>
+                {labels.forgotPassword}
               </AppText>
             </TouchableOpacity>
           </View>

styles/index.js

@@ -282,6 +282,10 @@ export default StyleSheet.create({
     color: fontOnPrimaryColor,
     fontSize: 20
   },
+  passwordPromptForgotPasswordText: {
+    marginTop: 20,
+    color: 'grey'
+  }
 })
 
 export const iconStyles = {