Pull password settings apart into individual components

This commit is contained in:
Julia Friesel
2018-09-15 11:22:00 +02:00
parent 80f08c0642
commit 8ed26f3e59
12 changed files with 392 additions and 27 deletions
+4 -2
View File
@@ -7,7 +7,8 @@ export const shared = {
incorrectPassword: 'Password incorrect',
incorrectPasswordMessage: 'That password is incorrect.',
tryAgain: 'Try again',
ok: 'OK'
ok: 'OK',
unlock: 'Unlock'
}
export const settings = {
@@ -58,7 +59,8 @@ export const settings = {
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",
changePassword: 'Change password',
deletePassword: 'Delete password',
enterCurrent: "Please enter your current password",
enterNew: "Please enter a new password",
backupReminderTitle: 'Read this before making changes to your password',
+8 -8
View File
@@ -15,7 +15,7 @@ export default class PasswordPrompt extends Component {
}
nodejs.channel.addListener(
'message',
'check-pw',
this.passHashToDb,
this
)
@@ -27,6 +27,7 @@ export default class PasswordPrompt extends Component {
try {
await openDb({ persistConnection: true })
await saveEncryptionFlag(false)
this.props.showApp()
} catch (err) {
this.setState({ showPasswordPrompt: true })
await saveEncryptionFlag(true)
@@ -34,18 +35,16 @@ export default class PasswordPrompt extends Component {
}
}
passHashToDb = async msg => {
msg = JSON.parse(msg)
if (msg.type != 'sha512') return
passHashToDb = async hash => {
try {
await openDb({hash: msg.message, persistConnection: true })
await openDb({ hash, persistConnection: true })
} catch (err) {
Alert.alert(
shared.incorrectPassword,
shared.incorrectPasswordMessage,
[{
text: shared.tryAgain,
onPress: () => this.setState({password: null})
onPress: () => this.setState({ password: null })
}]
)
return
@@ -73,6 +72,7 @@ export default class PasswordPrompt extends Component {
text: labels.reallyDeleteData,
onPress: async () => {
await deleteDbAndOpenNew()
await saveEncryptionFlag(false)
this.props.showApp()
}
}]
@@ -83,7 +83,7 @@ export default class PasswordPrompt extends Component {
}
componentWillUnmount() {
nodejs.channel.removeListener('message', this.passHashToDb)
nodejs.channel.removeListener('check-pw', this.passHashToDb)
}
render() {
@@ -104,7 +104,7 @@ export default class PasswordPrompt extends Component {
<TouchableOpacity
style={styles.passwordPromptButton}
onPress={() => {
requestHash(this.state.password)
requestHash('check-pw', this.state.password)
}}
disabled={!this.state.password}
>
+1 -1
View File
@@ -11,7 +11,7 @@ import TempReminderPicker from './temp-reminder-picker'
import TempSlider from './temp-slider'
import openImportDialogAndImport from './import-dialog'
import openShareDialogAndExport from './export-dialog'
import PasswordSetting from './password-setting'
import PasswordSetting from './password'
export default class Settings extends Component {
constructor(props) {
@@ -0,0 +1,23 @@
import { Alert } from 'react-native'
import { openDb } from '../../../db'
import { shared } from '../../labels'
export default async function checkPassword({hash, onCancel, onTryAgain }) {
try {
await openDb({ hash, persistConnection: false })
return true
} catch (err) {
Alert.alert(
shared.incorrectPassword,
shared.incorrectPasswordMessage,
[{
text: shared.cancel,
onPress: onCancel
}, {
text: shared.tryAgain,
onPress: onTryAgain
}]
)
return false
}
}
+61
View File
@@ -0,0 +1,61 @@
import React, { Component } from 'react'
import {
View,
TouchableOpacity,
} from 'react-native'
import nodejs from 'nodejs-mobile-react-native'
import { AppText } from '../../app-text'
import styles from '../../../styles'
import { settings as labels } from '../../labels'
import { requestHash, changeEncryptionAndRestartApp } from '../../../db'
import PasswordField from './password-field'
import showBackUpReminder from './show-backup-reminder'
export default class CreatePassword extends Component {
constructor() {
super()
this.state = {
enteringNewPassword: false,
newPassword: null
}
nodejs.channel.addListener(
'create-pw-hash',
changeEncryptionAndRestartApp,
this
)
}
componentWillUnmount() {
nodejs.channel.removeListener('create-pw-hash', changeEncryptionAndRestartApp)
}
render () {
return (
<View>
{this.state.enteringNewPassword &&
<PasswordField
placeholder={labels.passwordSettings.enterNew}
value={this.state.newPassword}
onChangeText={val => this.setState({newPassword: val})}
/>
}
<TouchableOpacity
onPress={() => {
if (!this.state.enteringNewPassword) {
showBackUpReminder(() => {
this.setState({ enteringNewPassword: true })
})
} else {
requestHash('create-pw-hash', this.state.newPassword)
}
}}
disabled={this.state.enteringNewPassword && !this.state.newPassword}
style={styles.settingsButton}>
<AppText style={styles.settingsButtonText}>
{labels.passwordSettings.setPassword}
</AppText>
</TouchableOpacity>
</View>
)
}
}
+76
View File
@@ -0,0 +1,76 @@
import React, { Component } from 'react'
import {
View,
TouchableOpacity
} from 'react-native'
import nodejs from 'nodejs-mobile-react-native'
import { AppText } from '../../app-text'
import styles from '../../../styles'
import { settings as labels } from '../../labels'
import { requestHash, changeEncryptionAndRestartApp } from '../../../db'
import PasswordField from './password-field'
import showBackUpReminder from './show-backup-reminder'
import checkCurrentPassword from './check-current-password'
export default class DeletePassword extends Component {
constructor() {
super()
this.state = {
enteringCurrentPassword: false,
currentPassword: null
}
nodejs.channel.addListener(
'pre-delete-pw-check',
this.removeEncryption,
this
)
}
componentWillUnmount() {
nodejs.channel.removeListener('pre-delete-pw-check', this.removeEncryption)
}
removeEncryption = async hash => {
const passwordIsCorrect = await checkCurrentPassword({
hash,
onTryAgain: () => this.setState({currentPassword: null}),
onCancel: () => this.setState({
enteringCurrentPassword: false,
currentPassword: null
})
})
if (passwordIsCorrect) await changeEncryptionAndRestartApp()
}
render() {
return (
<View>
{this.state.enteringCurrentPassword &&
<PasswordField
onChangeText={val => this.setState({ currentPassword: val })}
value={this.state.currentPassword}
placeholder={labels.passwordSettings.enterCurrent}
/>
}
<TouchableOpacity
onPress={() => {
if (!this.state.enteringCurrentPassword) {
showBackUpReminder(() => {
this.setState({ enteringCurrentPassword: true })
})
} else {
requestHash('pre-delete-pw-check', this.state.currentPassword)
}
}}
style={styles.settingsButton}
>
<AppText style={styles.settingsButtonText}>
{labels.passwordSettings.deletePassword}
</AppText>
</TouchableOpacity>
</View>
)
}
}
+50
View File
@@ -0,0 +1,50 @@
import React, { Component } from 'react'
import { View } from 'react-native'
import CreatePassword from './create'
import ChangePassword from './update'
import DeletePassword from './delete'
import { AppText } from '../../app-text'
import {
hasEncryptionObservable
} from '../../../local-storage'
import styles from '../../../styles/index'
import { settings as labels } from '../../labels'
export default class PasswordSetting extends Component {
constructor(props) {
super(props)
this.state = {
showUpdateAndDelete: hasEncryptionObservable.value,
showCreate: !hasEncryptionObservable.value
}
}
render() {
return (
<View style={styles.settingsSegment}>
<AppText style={styles.settingsSegmentTitle}>
{labels.passwordSettings.title}
</AppText>
{this.state.showUpdateAndDelete ?
<AppText>{labels.passwordSettings.explainerEnabled}</AppText>
:
<AppText>{labels.passwordSettings.explainerDisabled}</AppText>
}
{this.state.showUpdateAndDelete &&
<View>
<ChangePassword/>
<DeletePassword/>
</View>
}
{this.state.showCreate &&
<CreatePassword/>
}
</View>
)
}
}
@@ -0,0 +1,16 @@
import React from 'react'
import { TextInput } from 'react-native'
import styles from '../../../styles'
export default function PasswordField(props) {
return (
<TextInput
style={styles.passwordField}
autoFocus={true}
secureTextEntry={true}
onChangeText={props.onChangeText}
value={props.value}
placeholder={props.placeholder}
/>
)
}
@@ -0,0 +1,16 @@
import { Alert } from 'react-native'
import { settings as labels, shared } from '../../labels'
export default function showBackUpReminder(okHandler) {
Alert.alert(
labels.passwordSettings.backupReminderTitle,
labels.passwordSettings.backupReminder,
[{
text: shared.cancel,
style: 'cancel'
}, {
text: shared.ok,
onPress: okHandler
}]
)
}
+129
View File
@@ -0,0 +1,129 @@
import React, { Component } from 'react'
import {
View,
TouchableOpacity} from 'react-native'
import nodejs from 'nodejs-mobile-react-native'
import { AppText } from '../../app-text'
import styles from '../../../styles'
import { settings as labels, shared } from '../../labels'
import { requestHash, changeEncryptionAndRestartApp } from '../../../db'
import PasswordField from './password-field'
import showBackUpReminder from './show-backup-reminder'
import checkCurrentPassword from './check-current-password'
export default class ChangePassword extends Component {
constructor() {
super()
this.state = {
enteringCurrentPassword: false,
currentPassword: null,
enteringNewPassword: false,
newPassword: null
}
nodejs.channel.addListener(
'pre-change-pw-check',
this.openNewPasswordField,
this
)
nodejs.channel.addListener(
'change-pw',
changeEncryptionAndRestartApp,
this
)
}
componentWillUnmount() {
nodejs.channel.removeListener('pre-change-pw-check', this.openNewPasswordField)
nodejs.channel.removeListener('change-pw', changeEncryptionAndRestartApp)
}
openNewPasswordField = async hash => {
const passwordCorrect = await checkCurrentPassword({
hash,
onTryAgain: () => this.setState({ currentPassword: null }),
onCancel: () => this.setState({
enteringCurrentPassword: false,
currentPassword: null
})
})
if (passwordCorrect) {
this.setState({
enteringCurrentPassword: false,
currentPassword: null,
enteringNewPassword: true
})
}
}
render() {
return (
<View>
{!this.state.enteringCurrentPassword &&
!this.state.enteringNewPassword &&
<TouchableOpacity
onPress={() => showBackUpReminder(() => {
this.setState({ enteringCurrentPassword: true })
})}
disabled={this.state.currentPassword}
style={styles.settingsButton}>
<AppText style={styles.settingsButtonText}>
{labels.passwordSettings.changePassword}
</AppText>
</TouchableOpacity>
}
{this.state.enteringCurrentPassword &&
<View>
<PasswordField
onChangeText={val => {
this.setState({
currentPassword: val,
wrongPassword: false
})
}}
value={this.state.currentPassword}
placeholder={labels.passwordSettings.enterCurrent}
/>
<TouchableOpacity
onPress={() => requestHash('pre-change-pw-check', this.state.currentPassword)}
disabled={!this.state.currentPassword}
style={styles.settingsButton}>
<AppText style={styles.settingsButtonText}>
{shared.unlock}
</AppText>
</TouchableOpacity>
</View>
}
{this.state.enteringNewPassword &&
<View>
<PasswordField
style={styles.passwordField}
onChangeText={val => {
this.setState({
newPassword: val
})
}}
value={this.state.changedPassword}
placeholder={labels.passwordSettings.enterNew}
/>
<TouchableOpacity
onPress={() => requestHash('change-pw', this.state.newPassword)}
disabled={ !this.state.newPassword }
style={styles.settingsButton}>
<AppText style={styles.settingsButtonText}>
{labels.passwordSettings.changePassword}
</AppText>
</TouchableOpacity>
</View>
}
</View>
)
}
}
+3 -6
View File
@@ -11,7 +11,6 @@ import {
longAndComplicatedCycleWithCervix,
cycleWithTempAndNoCervixShift
} from './fixtures'
import { saveEncryptionFlag } from '../local-storage'
import dbSchema from './schema'
let db
@@ -154,9 +153,9 @@ export function tryToImportWithoutDelete(cycleDays) {
})
}
export function requestHash(pw) {
nodejs.channel.send(JSON.stringify({
type: 'request-SHA512',
export function requestHash(type, pw) {
nodejs.channel.post('request-SHA512', JSON.stringify({
type: type,
message: pw
}))
}
@@ -190,7 +189,6 @@ export async function changeEncryptionAndRestartApp(hash) {
db.close()
await fs.unlink(defaultPath)
await fs.moveFile(copyPath, defaultPath)
await saveEncryptionFlag(key ? true : false)
restart.Restart()
}
@@ -198,7 +196,6 @@ export async function deleteDbAndOpenNew() {
const exists = await fs.exists(Realm.defaultPath)
if (exists) await fs.unlink(Realm.defaultPath)
await openDb({ persistConnection: true })
await saveEncryptionFlag(false)
}
function hashToInt8Array(hash) {
+2 -7
View File
@@ -3,15 +3,10 @@
const rnBridge = require('rn-bridge')
const crypto = require('crypto')
rnBridge.channel.on('message', (msg) => {
rnBridge.channel.on('request-SHA512', (msg) => {
msg = JSON.parse(msg)
if (msg.type === 'request-SHA512') {
const hash = crypto.createHash('sha512')
hash.update(msg.message)
const result = hash.digest('hex')
rnBridge.channel.send(JSON.stringify({
type: 'sha512',
message: result
}))
}
rnBridge.channel.post(msg.type, result)
})