From 8da85235581f1de5f2b93d1c1c7712dd4e65c4f3 Mon Sep 17 00:00:00 2001
From: Julia Friesel <julia.friesel@gmail.com>
Date: Fri, 14 Sep 2018 07:34:28 +0200
Subject: [PATCH] Implement wrong-password-try-again? flow
---
components/labels.js | 10 +++--
components/password-prompt.js | 26 ++++++-----
components/settings/password-setting.js | 57 +++++++++++++++++--------
styles/index.js | 13 +++++-
4 files changed, 74 insertions(+), 32 deletions(-)
diff --git a/components/labels.js b/components/labels.js
index 7ddbae18..814b6d3c 100644
--- a/components/labels.js
+++ b/components/labels.js
@@ -3,7 +3,10 @@ export const shared = {
save: 'Save',
errorTitle: 'Error',
successTitle: 'Success',
- warning: 'Warning'
+ warning: 'Warning',
+ incorrectPassword: 'Password incorrect',
+ incorrectPasswordMessage: 'That password is incorrect.',
+ tryAgain: 'Try again'
}
export const settings = {
@@ -52,8 +55,9 @@ 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.",
- explainerEnabled: "Your app's data is encrypted with your password.",
- deletePassword: "Delete password"
+ explainerEnabled: "Password protection and database encryption is currently enabled",
+ deletePassword: "Delete password",
+ enterCurrent: "Please enter your current password",
}
}
diff --git a/components/password-prompt.js b/components/password-prompt.js
index e21dba62..847859e2 100644
--- a/components/password-prompt.js
+++ b/components/password-prompt.js
@@ -1,17 +1,19 @@
import React, { Component } from 'react'
-import { View, TextInput, TouchableOpacity } from 'react-native'
+import { View, TextInput, TouchableOpacity, Alert } from 'react-native'
import nodejs from 'nodejs-mobile-react-native'
import { AppText } from './app-text'
import { hasEncryptionObservable } from '../local-storage'
import styles from '../styles'
-import { passwordPrompt } from './labels'
+import { passwordPrompt, shared } from './labels'
import { openDbConnection, requestHash, deleteDbAndOpenNew, openDb } from '../db'
import App from './app'
export default class PasswordPrompt extends Component {
constructor() {
super()
- this.state = {}
+ this.state = {
+ password: null
+ }
hasEncryptionObservable.once((hasEncryption) => {
if (hasEncryption) {
this.setState({showPasswordPrompt: true})
@@ -36,7 +38,14 @@ export default class PasswordPrompt extends Component {
await openDb({hash: msg.message, persistConnection: true })
this.setState({ showApp: true })
} catch (err) {
- this.setState({ wrongPassword: true })
+ Alert.alert(
+ shared.incorrectPassword,
+ shared.incorrectPasswordMessage,
+ [{
+ text: shared.tryAgain,
+ onPress: () => this.setState({password: null})
+ }]
+ )
}
}
@@ -50,16 +59,12 @@ export default class PasswordPrompt extends Component {
{this.state.showApp ?
<App password={this.state.password}/>
:
- <View>
+ <View style={styles.passwordPrompt}>
{this.state.showPasswordPrompt &&
<View>
<TextInput
onChangeText={val => this.setState({password: val})}
- style={{
- borderWidth: 1,
- borderColor: 'grey',
- margin: 5
- }}
+ style={styles.passwordField}
/>
<TouchableOpacity
style={styles.settingsButton}
@@ -71,7 +76,6 @@ export default class PasswordPrompt extends Component {
{ passwordPrompt.title }
</AppText>
</TouchableOpacity>
- {this.state.wrongPassword && <AppText>Wrong PAssword!</AppText>}
<TouchableOpacity
style={styles.settingsButton}
onPress={async () => {
diff --git a/components/settings/password-setting.js b/components/settings/password-setting.js
index 9fe820bc..385fa5c6 100644
--- a/components/settings/password-setting.js
+++ b/components/settings/password-setting.js
@@ -2,7 +2,8 @@ import React, { Component } from 'react'
import {
View,
TouchableOpacity,
- TextInput
+ TextInput,
+ Alert
} from 'react-native'
import nodejs from 'nodejs-mobile-react-native'
import { AppText } from '../app-text'
@@ -10,14 +11,16 @@ import {
hasEncryptionObservable
} from '../../local-storage'
import styles from '../../styles/index'
-import { settings as labels } from '../labels'
+import { settings as labels, shared } from '../labels'
import { requestHash, openDb } from '../../db'
export default class PasswordSetting extends Component {
constructor(props) {
super(props)
this.state = {
- enabled: hasEncryptionObservable.value
+ enabled: hasEncryptionObservable.value,
+ currentPassword: null,
+ enteringCurrentPassword: false
}
nodejs.start('main.js')
@@ -38,11 +41,25 @@ export default class PasswordSetting extends Component {
try {
await openDb({ hash: msg.message, persistConnection: false })
this.setState({
- wrongPassword: false,
- enterOldPassword: false
+ enteringCurrentPassword: false
})
} catch (err) {
- this.setState({wrongPassword: true})
+ Alert.alert(
+ shared.incorrectPassword,
+ shared.incorrectPasswordMessage,
+ [{
+ text: shared.cancel,
+ onPress: () => {
+ this.setState({
+ enteringCurrentPassword: false,
+ currentPassword: null
+ })
+ }
+ }, {
+ text: shared.tryAgain,
+ onPress: () => this.setState({currentPassword: null})
+ }]
+ )
}
}
@@ -57,21 +74,27 @@ export default class PasswordSetting extends Component {
:
<AppText>{labels.passwordSettings.explainerDisabled}</AppText>
}
- {this.state.enterOldPassword &&
- <TextInput
- style={{
- backgroundColor: 'white',
- }}
- onChangeText={val => this.setState({ oldPassword: val })}
- />
+ {this.state.enteringCurrentPassword &&
+ <View>
+ <TextInput
+ style={styles.passwordField}
+ onChangeText={val => {
+ this.setState({
+ currentPassword: val,
+ wrongPassword: false
+ })
+ }}
+ value={this.state.currentPassword}
+ placeholder={labels.passwordSettings.enterCurrent}
+ />
+ </View>
}
- {this.state.wrongPassword && <AppText>Wrong PAssword!</AppText>}
<TouchableOpacity
onPress={() => {
- if (!this.state.enterOldPassword) {
- this.setState({ enterOldPassword: true })
+ if (!this.state.enteringCurrentPassword) {
+ this.setState({ enteringCurrentPassword: true })
} else {
- requestHash(this.state.oldPassword)
+ requestHash(this.state.currentPassword)
}
}}
style={styles.settingsButton}>
diff --git a/styles/index.js b/styles/index.js
index 629533a3..00b958de 100644
--- a/styles/index.js
+++ b/styles/index.js
@@ -249,6 +249,17 @@ export default StyleSheet.create({
fontSize: 20,
color: secondaryColor,
marginTop: 1
+ },
+ passwordField: {
+ backgroundColor: 'white',
+ padding: 10,
+ marginTop: 10,
+ marginHorizontal: 10
+ },
+ passwordPrompt: {
+ backgroundColor: 'lightgrey',
+ flex: 1,
+ padding: 30
}
})
@@ -268,6 +279,6 @@ export const iconStyles = {
color: fontOnPrimaryColor
},
menuIconInactive: {
- color: 'lightgrey'
+ color: 'lightgrey',
},
}
\ No newline at end of file
--
GitLab