Change passcode

app/containers/Passcode/Base/Button.js

@@ -3,8 +3,8 @@ import { Text } from 'react-native';
 import PropTypes from 'prop-types';
 
 import styles from './styles';
-import { themes } from '../../constants/colors';
+import { themes } from '../../../constants/colors';
-import Touch from '../../utils/touch';
+import Touch from '../../../utils/touch';
 
 const Button = ({
 	text, disabled, theme, onPress

app/containers/Passcode/Base/Dots.js

@@ -3,7 +3,7 @@ import { View } from 'react-native';
 import _ from 'lodash';
 
 import styles from './styles';
-import { themes } from '../../constants/colors';
+import { themes } from '../../../constants/colors';
 
 const SIZE_EMPTY = 8;
 const SIZE_FULL = 12;

app/containers/Passcode/Base/index.js

@@ -1,5 +1,5 @@
 import React, { useState, forwardRef, useImperativeHandle } from 'react';
-import { View } from 'react-native';
+import { View, Text } from 'react-native';
 import { Col, Row, Grid } from 'react-native-easy-grid';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
@@ -7,14 +7,13 @@ import PropTypes from 'prop-types';
 import styles from './styles';
 import Button from './Button';
 import Dots from './Dots';
-import Title from './Title';
+import { TYPE } from '../constants';
-import Subtitle from './Subtitle';
+import { themes } from '../../../constants/colors';
-import { TYPE } from './constants';
 
 const PASSCODE_LENGTH = 6;
 
 const Base = forwardRef(({
-	theme, type, onEndProcess, previousPasscode
+	theme, type, onEndProcess, previousPasscode, title, subtitle
 }, ref) => {
 	const [passcode, setPasscode] = useState('');
 
@@ -36,6 +35,7 @@ const Base = forwardRef(({
 					// }
 					break;
 				case TYPE.CONFIRM:
+					console.log('currentPasscode', currentPasscode, previousPasscode);
 					if (currentPasscode !== previousPasscode) {
 						// this.showError();
 						alert('SHOW ERROR');
@@ -73,8 +73,8 @@ const Base = forwardRef(({
 		<View style={styles.container}>
 			<View style={styles.container}>
 				<View style={styles.viewTitle}>
-					<Title theme={theme} />
+					<Text style={[styles.textTitle, { color: themes[theme].titleText }]}>{title}</Text>
-					<Subtitle theme={theme} />
+					{subtitle ? <Text style={[styles.textSubtitle, { color: themes[theme].bodyText }]}>{subtitle}</Text> : null}
 				</View>
 				<View style={styles.flexCirclePasscode}>
 					<Dots passcode={passcode} theme={theme} length={PASSCODE_LENGTH} />

app/containers/Passcode/PasscodeChoose.js

@@ -0,0 +1,34 @@
+import React, { useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+
+import Base from './Base';
+import { TYPE } from './constants';
+
+const PasscodeEnter = ({
+	theme, type, finishProcess
+}) => {
+	const ref = useRef(null);
+	const [status, setStatus] = useState(type);
+	const [previousPasscode, setPreviouPasscode] = useState(null);
+
+	const firstStep = (p) => {
+		setStatus(TYPE.CONFIRM);
+		setPreviouPasscode(p);
+	};
+
+	const changePasscode = p => finishProcess && finishProcess(p);
+
+	if (status === TYPE.CONFIRM) {
+		return <Base ref={ref} theme={theme} type={TYPE.CONFIRM} onEndProcess={changePasscode} previousPasscode={previousPasscode} title='Confirm your new passcode' />;
+	}
+
+	return <Base ref={ref} theme={theme} type={TYPE.CHOOSE} onEndProcess={firstStep} title='Choose your new passcode' />;
+};
+
+PasscodeEnter.propTypes = {
+	theme: PropTypes.string,
+	type: PropTypes.string,
+	finishProcess: PropTypes.func
+};
+
+export default PasscodeEnter;

app/containers/Passcode/PasscodeEnter.js

@@ -0,0 +1,76 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { useAsyncStorage } from '@react-native-community/async-storage';
+import RNUserDefaults from 'rn-user-defaults';
+import PropTypes from 'prop-types';
+
+import Base from './Base';
+import Locked from './Locked';
+import { TYPE } from './constants';
+import {
+	ATTEMPTS_KEY, LOCKED_OUT_TIMER_KEY, PASSCODE_KEY, MAX_ATTEMPTS
+} from '../../constants/localAuthentication';
+import { resetAttempts } from '../../utils/localAuthentication';
+import { getLockedUntil, getDiff } from './utils';
+
+const PasscodeEnter = ({
+	theme, type, finishProcess
+}) => {
+	const ref = useRef(null);
+	let attempts = 0;
+	let lockedUntil = false;
+	let passcode = null;
+	const [status, setStatus] = useState(type);
+	const { getItem: getAttempts, setItem: setAttempts } = useAsyncStorage(ATTEMPTS_KEY);
+	const { setItem: setLockedUntil } = useAsyncStorage(LOCKED_OUT_TIMER_KEY);
+
+	const fetchPasscode = async() => {
+		passcode = await RNUserDefaults.get(PASSCODE_KEY);
+	};
+
+	const readStorage = async() => {
+		lockedUntil = await getLockedUntil();
+		if (lockedUntil) {
+			const diff = getDiff(lockedUntil);
+			if (diff <= 1) {
+				resetAttempts();
+			} else {
+				attempts = await getAttempts();
+				setStatus(TYPE.LOCKED);
+			}
+		}
+		fetchPasscode();
+	};
+
+	useEffect(() => {
+		readStorage();
+	}, []);
+
+	const onEndProcess = (p) => {
+		if (p === passcode) {
+			finishProcess();
+		} else {
+			attempts += 1;
+			if (attempts >= MAX_ATTEMPTS) {
+				setStatus(TYPE.LOCKED);
+				setLockedUntil(new Date().toISOString());
+			} else {
+				ref.current.wrongPasscode();
+				setAttempts(attempts?.toString());
+			}
+		}
+	};
+
+	if (status === TYPE.LOCKED) {
+		return <Locked theme={theme} setStatus={setStatus} />;
+	}
+
+	return <Base ref={ref} theme={theme} type={TYPE.ENTER} onEndProcess={onEndProcess} title='Enter your passcode' />;
+};
+
+PasscodeEnter.propTypes = {
+	theme: PropTypes.string,
+	type: PropTypes.string,
+	finishProcess: PropTypes.func
+};
+
+export default PasscodeEnter;

app/containers/Passcode/Subtitle.js

@@ -1,25 +0,0 @@
-import React from 'react';
-import { Text } from 'react-native';
-import PropTypes from 'prop-types';
-
-import styles from './styles';
-import { themes } from '../../constants/colors';
-
-const Subtitle = ({ theme }) => (
-	<Text
-		style={[
-			styles.textSubtitle,
-			{
-				color: themes[theme].bodyText
-			}
-		]}
-	>
-		Subtitle
-	</Text>
-);
-
-Subtitle.propTypes = {
-	theme: PropTypes.string
-};
-
-export default Subtitle;

app/containers/Passcode/Title.js

@@ -1,25 +0,0 @@
-import React from 'react';
-import { Text } from 'react-native';
-import PropTypes from 'prop-types';
-
-import styles from './styles';
-import { themes } from '../../constants/colors';
-
-const Title = ({ theme }) => (
-	<Text
-		style={[
-			styles.textTitle,
-			{
-				color: themes[theme].titleText,
-			}
-		]}
-	>
-		Title
-	</Text>
-);
-
-Title.propTypes = {
-	theme: PropTypes.string
-};
-
-export default Title;

app/containers/Passcode/index.js

@@ -1,76 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import PasscodeEnter from './PasscodeEnter';
-import { useAsyncStorage } from '@react-native-community/async-storage';
+import PasscodeChoose from './PasscodeChoose';
-import RNUserDefaults from 'rn-user-defaults';
-import PropTypes from 'prop-types';
 
-import Base from './Base';
+export { PasscodeEnter, PasscodeChoose };
-import Locked from './Locked';
-import { TYPE } from './constants';
-import {
-	ATTEMPTS_KEY, LOCKED_OUT_TIMER_KEY, PASSCODE_KEY, MAX_ATTEMPTS
-} from '../../constants/localAuthentication';
-import { resetAttempts } from '../../utils/localAuthentication';
-import { getLockedUntil, getDiff } from './utils';
-
-const PasscodeEnter = ({
-	theme, type, finishProcess
-}) => {
-	const ref = useRef(null);
-	let attempts = 0;
-	let lockedUntil = false;
-	let passcode = null;
-	const [status, setStatus] = useState(type);
-	const { getItem: getAttempts, setItem: setAttempts } = useAsyncStorage(ATTEMPTS_KEY);
-	const { setItem: setLockedUntil } = useAsyncStorage(LOCKED_OUT_TIMER_KEY);
-
-	const fetchPasscode = async() => {
-		passcode = await RNUserDefaults.get(PASSCODE_KEY);
-	};
-
-	const readStorage = async() => {
-		lockedUntil = await getLockedUntil();
-		if (lockedUntil) {
-			const diff = getDiff(lockedUntil);
-			if (diff <= 1) {
-				resetAttempts();
-			} else {
-				attempts = await getAttempts();
-				setStatus(TYPE.LOCKED);
-			}
-		}
-		fetchPasscode();
-	};
-
-	useEffect(() => {
-		readStorage();
-	}, []);
-
-	const onEndProcess = (p) => {
-		if (p === passcode) {
-			finishProcess();
-		} else {
-			attempts += 1;
-			if (attempts >= MAX_ATTEMPTS) {
-				setStatus(TYPE.LOCKED);
-				setLockedUntil(new Date().toISOString());
-			} else {
-				ref.current.wrongPasscode();
-				setAttempts(attempts?.toString());
-			}
-		}
-	};
-
-	if (status === TYPE.LOCKED) {
-		return <Locked theme={theme} setStatus={setStatus} />;
-	}
-
-	return <Base ref={ref} theme={theme} type={TYPE.ENTER} onEndProcess={onEndProcess} />;
-};
-
-PasscodeEnter.propTypes = {
-	theme: PropTypes.string,
-	type: PropTypes.string,
-	finishProcess: PropTypes.func
-};
-
-export default PasscodeEnter;

app/views/ChangePasscodeView.js

@@ -12,6 +12,8 @@ import { themes } from '../constants/colors';
 import sharedStyles from './Styles';
 import { PASSCODE_KEY, PASSCODE_LENGTH } from '../constants/localAuthentication';
 import { isTablet } from '../utils/deviceInfo';
+import { TYPE } from '../containers/Passcode/constants';
+import { PasscodeChoose } from '../containers/Passcode';
 
 const ScreenLockConfigView = React.memo(({ navigation, theme }) => {
 	const savePasscode = async(passcode) => {
@@ -34,7 +36,7 @@ const ScreenLockConfigView = React.memo(({ navigation, theme }) => {
 		<SafeAreaView
 			style={[sharedStyles.container, { backgroundColor: themes[theme].auxiliaryBackground }]}
 		>
-			<PINCode
+			{/* <PINCode
 				status={PinStatus.choose}
 				passwordLength={PASSCODE_LENGTH}
 				customBackSpaceIcon={() => null}
@@ -59,7 +61,8 @@ const ScreenLockConfigView = React.memo(({ navigation, theme }) => {
 				titleChoose='Enter your new passcode'
 				titleConfirm='Confirm your passcode'
 				subtitleChoose=''
-			/>
+			/> */}
+			<PasscodeChoose theme={theme} type={TYPE.choose} finishProcess={savePasscode} />
 		</SafeAreaView>
 	);
 });

app/views/ScreenLockConfigView.js

@@ -21,8 +21,6 @@ import { supportedBiometryLabel } from '../utils/localAuthentication';
 import { DisclosureImage } from '../containers/DisclosureIndicator';
 import { PASSCODE_KEY } from '../constants/localAuthentication';
 
-// RNUserDefaults.set(PASSCODE_KEY, '')
-
 const DEFAULT_AUTO_LOCK = [
 	{
 		title: 'After 1 minute',

app/views/ScreenLockedView.js

@@ -17,7 +17,7 @@ import EventEmitter from '../utils/events';
 import { withSplit } from '../split';
 import { LOCAL_AUTHENTICATE_EMITTER } from '../constants/localAuthentication';
 import { isTablet } from '../utils/deviceInfo';
-import Passcode from '../containers/Passcode';
+import { PasscodeEnter } from '../containers/Passcode';
 import { TYPE } from '../containers/Passcode/constants';
 
 const styles = StyleSheet.create({
@@ -99,7 +99,7 @@ const ScreenLockedView = ({ theme }) => {
 					pinAttemptsAsyncStorageName={ATTEMPTS_KEY}
 					lockedPage={<AppLocked />}
 				/> */}
-				<Passcode theme={theme} type={TYPE.ENTER} finishProcess={onSubmit} />
+				<PasscodeEnter theme={theme} type={TYPE.ENTER} finishProcess={onSubmit} />
 			</View>
 		</Modal>
 	);