Chore/make function components 2
This commit is contained in:
Sofiya Tepikin
@@ -1,4 +1,4 @@
|
||||
import React, { Component } from 'react'
|
||||
import React, { useState } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
|
||||
import Button from '../../common/button'
|
||||
@@ -8,42 +8,35 @@ import showBackUpReminder from './show-backup-reminder'
|
||||
|
||||
import settings from '../../../i18n/en/settings'
|
||||
|
||||
export default class CreatePassword extends Component {
|
||||
static propTypes = {
|
||||
changeEncryptionAndRestart: PropTypes.func,
|
||||
const CreatePassword = ({ changeEncryptionAndRestart }) => {
|
||||
const [isSettingPassword, setIsSettingPassword] = useState(false)
|
||||
|
||||
const startSettingPassword = () => {
|
||||
showBackUpReminder(
|
||||
() => {
|
||||
setIsSettingPassword(true)
|
||||
},
|
||||
() => {}
|
||||
)
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super()
|
||||
const labels = settings.passwordSettings
|
||||
|
||||
this.state = { isSettingPassword: false }
|
||||
if (!isSettingPassword) {
|
||||
return (
|
||||
<Button isCTA onPress={startSettingPassword}>
|
||||
{labels.setPassword}
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
toggleSettingPassword = () => {
|
||||
const { isSettingPassword } = this.state
|
||||
this.setState({ isSettingPassword: !isSettingPassword })
|
||||
}
|
||||
|
||||
startSettingPassword = () => {
|
||||
showBackUpReminder(this.toggleSettingPassword, () => {})
|
||||
}
|
||||
|
||||
render() {
|
||||
const { isSettingPassword } = this.state
|
||||
const labels = settings.passwordSettings
|
||||
|
||||
if (!isSettingPassword) {
|
||||
return (
|
||||
<Button isCTA onPress={this.startSettingPassword}>
|
||||
{labels.setPassword}
|
||||
</Button>
|
||||
)
|
||||
} else {
|
||||
return (
|
||||
<EnterNewPassword
|
||||
changeEncryptionAndRestart={this.props.changeEncryptionAndRestart}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
return (
|
||||
<EnterNewPassword changeEncryptionAndRestart={changeEncryptionAndRestart} />
|
||||
)
|
||||
}
|
||||
|
||||
CreatePassword.propTypes = {
|
||||
changeEncryptionAndRestart: PropTypes.func,
|
||||
}
|
||||
|
||||
export default CreatePassword
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { Component } from 'react'
|
||||
import React, { useState } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
|
||||
import Button from '../../common/button'
|
||||
@@ -6,45 +6,43 @@ import ConfirmWithPassword from '../common/confirm-with-password'
|
||||
|
||||
import labels from '../../../i18n/en/settings'
|
||||
|
||||
export default class DeletePassword extends Component {
|
||||
static propTypes = {
|
||||
onStartDelete: PropTypes.func,
|
||||
onCancelDelete: PropTypes.func,
|
||||
changeEncryptionAndRestart: PropTypes.func,
|
||||
const DeletePassword = ({
|
||||
onStartDelete,
|
||||
onCancelDelete,
|
||||
changeEncryptionAndRestart,
|
||||
}) => {
|
||||
const [enteringCurrentPassword, setEnteringCurrentPassword] = useState(false)
|
||||
|
||||
const startConfirmWithPassword = () => {
|
||||
setEnteringCurrentPassword(true)
|
||||
onStartDelete()
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super()
|
||||
|
||||
this.state = { enteringCurrentPassword: false }
|
||||
const cancelConfirmationWithPassword = () => {
|
||||
setEnteringCurrentPassword(false)
|
||||
onCancelDelete()
|
||||
}
|
||||
|
||||
startConfirmWithPassword = () => {
|
||||
this.setState({ enteringCurrentPassword: true })
|
||||
this.props.onStartDelete()
|
||||
}
|
||||
|
||||
cancelConfirmationWithPassword = () => {
|
||||
this.setState({ enteringCurrentPassword: false })
|
||||
this.props.onCancelDelete()
|
||||
}
|
||||
|
||||
render() {
|
||||
const { enteringCurrentPassword } = this.state
|
||||
|
||||
if (enteringCurrentPassword) {
|
||||
return (
|
||||
<ConfirmWithPassword
|
||||
onSuccess={this.props.changeEncryptionAndRestart}
|
||||
onCancel={this.cancelConfirmationWithPassword}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
if (enteringCurrentPassword) {
|
||||
return (
|
||||
<Button isCTA onPress={this.startConfirmWithPassword}>
|
||||
{labels.passwordSettings.deletePassword}
|
||||
</Button>
|
||||
<ConfirmWithPassword
|
||||
onSuccess={changeEncryptionAndRestart}
|
||||
onCancel={cancelConfirmationWithPassword}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Button isCTA onPress={startConfirmWithPassword}>
|
||||
{labels.passwordSettings.deletePassword}
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
DeletePassword.propTypes = {
|
||||
onStartDelete: PropTypes.func,
|
||||
onCancelDelete: PropTypes.func,
|
||||
changeEncryptionAndRestart: PropTypes.func,
|
||||
}
|
||||
|
||||
export default DeletePassword
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { Component } from 'react'
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { StyleSheet } from 'react-native'
|
||||
import nodejs from 'nodejs-mobile-react-native'
|
||||
import PropTypes from 'prop-types'
|
||||
@@ -13,89 +13,67 @@ import settings from '../../../i18n/en/settings'
|
||||
|
||||
const LISTENER_TYPE = 'create-or-change-pw'
|
||||
|
||||
export default class EnterNewPassword extends Component {
|
||||
static propTypes = {
|
||||
changeEncryptionAndRestart: PropTypes.func,
|
||||
}
|
||||
constructor(props) {
|
||||
super()
|
||||
this.state = {
|
||||
password: '',
|
||||
passwordConfirmation: '',
|
||||
shouldShowErrorMessage: false,
|
||||
}
|
||||
nodejs.channel.addListener(
|
||||
const EnterNewPassword = ({ changeEncryptionAndRestart }) => {
|
||||
const [password, setPassword] = useState('')
|
||||
const [passwordConfirmation, setPasswordConfirmation] = useState('')
|
||||
const [shouldShowErrorMessage, setShouldShowErrorMessage] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
const listener = nodejs.channel.addListener(
|
||||
LISTENER_TYPE,
|
||||
props.changeEncryptionAndRestart,
|
||||
changeEncryptionAndRestart,
|
||||
this
|
||||
)
|
||||
}
|
||||
return () => listener.remove()
|
||||
}, [])
|
||||
|
||||
componentWillUnmount() {
|
||||
nodejs.channel.removeListener(
|
||||
LISTENER_TYPE,
|
||||
this.props.changeEncryptionAndRestart
|
||||
)
|
||||
}
|
||||
|
||||
savePassword = () => {
|
||||
if (this.comparePasswords()) {
|
||||
requestHash(LISTENER_TYPE, this.state.password)
|
||||
const savePassword = () => {
|
||||
if (comparePasswords()) {
|
||||
requestHash(LISTENER_TYPE, password)
|
||||
} else {
|
||||
this.setState({ shouldShowErrorMessage: true })
|
||||
setShouldShowErrorMessage(true)
|
||||
}
|
||||
}
|
||||
|
||||
comparePasswords = () => {
|
||||
return this.state.password === this.state.passwordConfirmation
|
||||
}
|
||||
const comparePasswords = () => password === passwordConfirmation
|
||||
|
||||
handlePasswordInput = (password) => {
|
||||
this.setState({ password })
|
||||
}
|
||||
const labels = settings.passwordSettings
|
||||
const isButtonActive = password.length > 0 && passwordConfirmation.length > 0
|
||||
|
||||
handleConfirmationInput = (passwordConfirmation) => {
|
||||
this.setState({ passwordConfirmation })
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<AppTextInput
|
||||
isKeyboardOffset={false}
|
||||
onChangeText={setPassword}
|
||||
placeholder={labels.enterNew}
|
||||
textContentType="password"
|
||||
value={password}
|
||||
secureTextEntry={true}
|
||||
/>
|
||||
<AppTextInput
|
||||
isKeyboardOffset={false}
|
||||
onChangeText={setPasswordConfirmation}
|
||||
placeholder={labels.confirmPassword}
|
||||
textContentType="password"
|
||||
value={passwordConfirmation}
|
||||
secureTextEntry={true}
|
||||
/>
|
||||
{shouldShowErrorMessage && (
|
||||
<AppText style={styles.error}>{labels.passwordsDontMatch}</AppText>
|
||||
)}
|
||||
<Button
|
||||
isCTA={isButtonActive}
|
||||
disabled={!isButtonActive}
|
||||
onPress={savePassword}
|
||||
>
|
||||
{labels.savePassword}
|
||||
</Button>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
render() {
|
||||
const { password, passwordConfirmation, shouldShowErrorMessage } =
|
||||
this.state
|
||||
const labels = settings.passwordSettings
|
||||
const isButtonActive =
|
||||
password.length > 0 && passwordConfirmation.length > 0
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<AppTextInput
|
||||
isKeyboardOffset={false}
|
||||
onChangeText={this.handlePasswordInput}
|
||||
placeholder={labels.enterNew}
|
||||
textContentType="password"
|
||||
value={password}
|
||||
secureTextEntry={true}
|
||||
/>
|
||||
<AppTextInput
|
||||
isKeyboardOffset={false}
|
||||
onChangeText={this.handleConfirmationInput}
|
||||
placeholder={labels.confirmPassword}
|
||||
textContentType="password"
|
||||
value={passwordConfirmation}
|
||||
secureTextEntry={true}
|
||||
/>
|
||||
{shouldShowErrorMessage && (
|
||||
<AppText style={styles.error}>{labels.passwordsDontMatch}</AppText>
|
||||
)}
|
||||
<Button
|
||||
isCTA={isButtonActive}
|
||||
disabled={!isButtonActive}
|
||||
onPress={this.savePassword}
|
||||
>
|
||||
{labels.savePassword}
|
||||
</Button>
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
EnterNewPassword.propTypes = {
|
||||
changeEncryptionAndRestart: PropTypes.func,
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
@@ -104,3 +82,5 @@ const styles = StyleSheet.create({
|
||||
marginTop: Spacing.base,
|
||||
},
|
||||
})
|
||||
|
||||
export default EnterNewPassword
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { Component } from 'react'
|
||||
import React, { useState } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
|
||||
import { changeDbEncryption } from '../../../db'
|
||||
@@ -14,81 +14,55 @@ import DeletePassword from './delete'
|
||||
import { hasEncryptionObservable } from '../../../local-storage'
|
||||
import labels from '../../../i18n/en/settings'
|
||||
|
||||
class PasswordSetting extends Component {
|
||||
static propTypes = {
|
||||
navigate: PropTypes.func,
|
||||
restartApp: PropTypes.func,
|
||||
}
|
||||
constructor(props) {
|
||||
super(props)
|
||||
const PasswordSetting = ({ restartApp, navigate }) => {
|
||||
const isPasswordSet = hasEncryptionObservable.value
|
||||
const [isChangingPassword, setIsChangingPassword] = useState(false)
|
||||
const [isDeletingPassword, setIsDeletingPassword] = useState(false)
|
||||
|
||||
this.state = {
|
||||
isPasswordSet: hasEncryptionObservable.value,
|
||||
isChangingPassword: false,
|
||||
isDeletingPassword: false,
|
||||
}
|
||||
}
|
||||
|
||||
onChangingPassword = () => {
|
||||
this.setState({ isChangingPassword: true })
|
||||
}
|
||||
|
||||
onCancelChangingPassword = () => {
|
||||
this.setState({ isChangingPassword: false })
|
||||
}
|
||||
|
||||
onDeletingPassword = () => {
|
||||
this.setState({ isDeletingPassword: true })
|
||||
}
|
||||
|
||||
onCancelDeletingPassword = () => {
|
||||
this.setState({ isDeletingPassword: false })
|
||||
}
|
||||
|
||||
changeEncryptionAndRestart = async (hash) => {
|
||||
const changeEncryptionAndRestart = async (hash) => {
|
||||
await changeDbEncryption(hash)
|
||||
await this.props.restartApp()
|
||||
this.props.navigate('Home')
|
||||
await restartApp()
|
||||
navigate('Home')
|
||||
}
|
||||
|
||||
render() {
|
||||
const { isPasswordSet, isChangingPassword, isDeletingPassword } = this.state
|
||||
const { title, explainerEnabled, explainerDisabled } = labels.passwordSettings
|
||||
|
||||
const { title, explainerEnabled, explainerDisabled } =
|
||||
labels.passwordSettings
|
||||
return (
|
||||
<AppPage>
|
||||
<Segment title={title} last>
|
||||
<AppText>
|
||||
{isPasswordSet ? explainerEnabled : explainerDisabled}
|
||||
</AppText>
|
||||
|
||||
return (
|
||||
<AppPage>
|
||||
<Segment title={title} last>
|
||||
<AppText>
|
||||
{isPasswordSet ? explainerEnabled : explainerDisabled}
|
||||
</AppText>
|
||||
{!isPasswordSet && (
|
||||
<CreatePassword
|
||||
changeEncryptionAndRestart={changeEncryptionAndRestart}
|
||||
/>
|
||||
)}
|
||||
|
||||
{!isPasswordSet && (
|
||||
<CreatePassword
|
||||
changeEncryptionAndRestart={this.changeEncryptionAndRestart}
|
||||
/>
|
||||
)}
|
||||
{isPasswordSet && !isDeletingPassword && (
|
||||
<ChangePassword
|
||||
onStartChange={() => setIsChangingPassword(true)}
|
||||
onCancelChange={() => setIsChangingPassword(false)}
|
||||
changeEncryptionAndRestart={changeEncryptionAndRestart}
|
||||
/>
|
||||
)}
|
||||
|
||||
{isPasswordSet && !isDeletingPassword && (
|
||||
<ChangePassword
|
||||
onStartChange={this.onChangingPassword}
|
||||
onCancelChange={this.onCancelChangingPassword}
|
||||
changeEncryptionAndRestart={this.changeEncryptionAndRestart}
|
||||
/>
|
||||
)}
|
||||
{isPasswordSet && !isChangingPassword && (
|
||||
<DeletePassword
|
||||
onStartDelete={() => setIsDeletingPassword(true)}
|
||||
onCancelDelete={() => setIsDeletingPassword(false)}
|
||||
changeEncryptionAndRestart={changeEncryptionAndRestart}
|
||||
/>
|
||||
)}
|
||||
</Segment>
|
||||
</AppPage>
|
||||
)
|
||||
}
|
||||
|
||||
{isPasswordSet && !isChangingPassword && (
|
||||
<DeletePassword
|
||||
onStartDelete={this.onDeletingPassword}
|
||||
onCancelDelete={this.onCancelDeletingPassword}
|
||||
changeEncryptionAndRestart={this.changeEncryptionAndRestart}
|
||||
/>
|
||||
)}
|
||||
</Segment>
|
||||
</AppPage>
|
||||
)
|
||||
}
|
||||
PasswordSetting.propTypes = {
|
||||
navigate: PropTypes.func,
|
||||
restartApp: PropTypes.func,
|
||||
}
|
||||
|
||||
export default PasswordSetting
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { Component } from 'react'
|
||||
import React, { useState } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
|
||||
import Button from '../../common/button'
|
||||
@@ -9,83 +9,71 @@ import ConfirmWithPassword from '../common/confirm-with-password'
|
||||
|
||||
import settings from '../../../i18n/en/settings'
|
||||
|
||||
export default class ChangePassword extends Component {
|
||||
static propTypes = {
|
||||
onStartChange: PropTypes.func,
|
||||
onCancelChange: PropTypes.func,
|
||||
changeEncryptionAndRestart: PropTypes.func,
|
||||
}
|
||||
const ChangePassword = ({
|
||||
changeEncryptionAndRestart,
|
||||
onStartChange,
|
||||
onCancelChange,
|
||||
}) => {
|
||||
const [currentPassword, setCurrentPassword] = useState(null)
|
||||
const [enteringCurrentPassword, setEnteringCurrentPassword] = useState(false)
|
||||
const [enteringNewPassword, setEnteringNewPassword] = useState(false)
|
||||
|
||||
constructor() {
|
||||
super()
|
||||
|
||||
this.state = {
|
||||
currentPassword: null,
|
||||
enteringCurrentPassword: false,
|
||||
enteringNewPassword: false,
|
||||
}
|
||||
}
|
||||
|
||||
startChangingPassword = () => {
|
||||
const startChangingPassword = () => {
|
||||
showBackUpReminder(
|
||||
this.startEnteringCurrentPassword,
|
||||
this.cancelConfirmationWithPassword
|
||||
startEnteringCurrentPassword,
|
||||
cancelConfirmationWithPassword
|
||||
)
|
||||
}
|
||||
|
||||
startEnteringCurrentPassword = () => {
|
||||
this.setState({ enteringCurrentPassword: true })
|
||||
this.props.onStartChange()
|
||||
const startEnteringCurrentPassword = () => {
|
||||
setEnteringCurrentPassword(true)
|
||||
onStartChange()
|
||||
}
|
||||
|
||||
startEnteringNewPassword = () => {
|
||||
this.setState({
|
||||
currentPassword: null,
|
||||
enteringNewPassword: true,
|
||||
enteringCurrentPassword: false,
|
||||
})
|
||||
const startEnteringNewPassword = () => {
|
||||
setCurrentPassword(null)
|
||||
setEnteringNewPassword(true)
|
||||
setEnteringCurrentPassword(false)
|
||||
}
|
||||
|
||||
cancelConfirmationWithPassword = () => {
|
||||
this.setState({
|
||||
currentPassword: null,
|
||||
enteringNewPassword: false,
|
||||
enteringCurrentPassword: false,
|
||||
})
|
||||
this.props.onCancelChange()
|
||||
const cancelConfirmationWithPassword = () => {
|
||||
setCurrentPassword(null)
|
||||
setEnteringNewPassword(false)
|
||||
setEnteringCurrentPassword(false)
|
||||
onCancelChange()
|
||||
}
|
||||
|
||||
render() {
|
||||
const { enteringCurrentPassword, enteringNewPassword, currentPassword } =
|
||||
this.state
|
||||
const labels = settings.passwordSettings
|
||||
const isPasswordSet = currentPassword !== null
|
||||
|
||||
if (enteringCurrentPassword) {
|
||||
return (
|
||||
<ConfirmWithPassword
|
||||
onSuccess={this.startEnteringNewPassword}
|
||||
onCancel={this.cancelConfirmationWithPassword}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
if (enteringNewPassword) {
|
||||
return (
|
||||
<EnterNewPassword
|
||||
changeEncryptionAndRestart={this.props.changeEncryptionAndRestart}
|
||||
/>
|
||||
)
|
||||
}
|
||||
const labels = settings.passwordSettings
|
||||
const isPasswordSet = currentPassword !== null
|
||||
|
||||
if (enteringCurrentPassword) {
|
||||
return (
|
||||
<Button
|
||||
disabled={isPasswordSet}
|
||||
isCTA
|
||||
onPress={this.startChangingPassword}
|
||||
>
|
||||
{labels.changePassword}
|
||||
</Button>
|
||||
<ConfirmWithPassword
|
||||
onSuccess={startEnteringNewPassword}
|
||||
onCancel={cancelConfirmationWithPassword}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
if (enteringNewPassword) {
|
||||
return (
|
||||
<EnterNewPassword
|
||||
changeEncryptionAndRestart={changeEncryptionAndRestart}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Button disabled={isPasswordSet} isCTA onPress={startChangingPassword}>
|
||||
{labels.changePassword}
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
export default ChangePassword
|
||||
|
||||
ChangePassword.propTypes = {
|
||||
onStartChange: PropTypes.func,
|
||||
onCancelChange: PropTypes.func,
|
||||
changeEncryptionAndRestart: PropTypes.func,
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user