Refactoring

app/containers/Passcode/Base/Dots.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { View } from 'react-native';
 import _ from 'lodash';
+import PropTypes from 'prop-types';
 
 import styles from './styles';
 import { themes } from '../../../constants/colors';
@@ -8,37 +9,22 @@ import { themes } from '../../../constants/colors';
 const SIZE_EMPTY = 8;
 const SIZE_FULL = 12;
 
-const Dots = ({
-	passcode,
-	showError,
-	changeScreen,
-	attemptFailed,
-	theme,
-	length
-}) => (
+const Dots = ({ passcode, theme, length }) => (
 	<View style={[styles.topViewCirclePasscode]}>
 		{_.range(length).map((val) => {
-			const lengthSup = ((passcode.length >= val + 1 && !changeScreen) || showError) && !attemptFailed;
+			const lengthSup = (passcode.length >= val + 1);
 			const opacity = lengthSup ? 1 : 0.5;
 			const height = lengthSup ? SIZE_FULL : SIZE_EMPTY;
 			const width = lengthSup ? SIZE_FULL : SIZE_EMPTY;
-			let color = '';
-			if (showError) {
-				color = themes[theme].dangerColor;
-			} else if (lengthSup && passcode.length > 0) {
-				color = themes[theme].titleText;
+			let backgroundColor = '';
+			if (lengthSup && passcode.length > 0) {
+				backgroundColor = themes[theme].titleText;
 			} else {
-				color = themes[theme].bodyText;
+				backgroundColor = themes[theme].bodyText;
 			}
-			const borderRadius = lengthSup
-				? SIZE_FULL / 2
-				: SIZE_EMPTY / 2;
-			const marginRight = lengthSup
-				? 10 - (SIZE_FULL - SIZE_EMPTY) / 2
-				: 10;
-			const marginLeft = lengthSup
-				? 10 - (SIZE_FULL - SIZE_EMPTY) / 2
-				: 10;
+			const borderRadius = lengthSup ? SIZE_FULL / 2 : SIZE_EMPTY / 2;
+			const marginRight = lengthSup ? 10 - (SIZE_FULL - SIZE_EMPTY) / 2 : 10;
+			const marginLeft = lengthSup ? 10 - (SIZE_FULL - SIZE_EMPTY) / 2 : 10;
 			return (
 				<View style={styles.viewCircles}>
 					<View
@@ -47,7 +33,7 @@ const Dots = ({
 							height,
 							width,
 							borderRadius,
-							backgroundColor: color,
+							backgroundColor,
 							marginRight,
 							marginLeft
 						}]}
@@ -58,4 +44,10 @@ const Dots = ({
 	</View>
 );
 
+Dots.propTypes = {
+	passcode: PropTypes.string,
+	theme: PropTypes.string,
+	length: PropTypes.string
+};
+
 export default Dots;

app/containers/Passcode/Base/index.js

@@ -120,7 +120,10 @@ Base.propTypes = {
 	theme: PropTypes.string,
 	type: PropTypes.string,
 	previousPasscode: PropTypes.string,
-	onEndProcess: PropTypes.string
+	title: PropTypes.string,
+	subtitle: PropTypes.string,
+	onEndProcess: PropTypes.func,
+	onError: PropTypes.func
 };
 
 export default Base;

app/containers/Passcode/Base/styles.js

@@ -20,10 +20,6 @@ export default StyleSheet.create({
 		alignItems: 'center',
 		height: grid.unit * 5.5
 	},
-	rowWithEmpty: {
-		flexShrink: 0,
-		justifyContent: 'flex-end'
-	},
 	colButtonCircle: {
 		flex: 0,
 		marginLeft: grid.unit / 2,
@@ -32,19 +28,6 @@ export default StyleSheet.create({
 		width: grid.unit * 4,
 		height: grid.unit * 4
 	},
-	colEmpty: {
-		flex: 0,
-		marginLeft: grid.unit / 2,
-		marginRight: grid.unit / 2,
-		width: grid.unit * 4,
-		height: grid.unit * 4
-	},
-	colIcon: {
-		alignSelf: 'center',
-		justifyContent: 'center',
-		alignItems: 'center',
-		flexDirection: 'column'
-	},
 	text: {
 		fontSize: grid.unit * 2,
 		fontWeight: '200'
@@ -86,10 +69,6 @@ export default StyleSheet.create({
 		justifyContent: 'center',
 		alignItems: 'center'
 	},
-	textDeleteButton: {
-		fontWeight: '200',
-		marginTop: 5
-	},
 	grid: {
 		justifyContent: 'flex-start',
 		width: '100%',

app/sagas/state.js

@@ -1,10 +1,9 @@
-import { takeLatest, select, put } from 'redux-saga/effects';
+import { takeLatest, select } from 'redux-saga/effects';
 
 import RocketChat from '../lib/rocketchat';
 import { setBadgeCount } from '../notifications/push';
 import log from '../utils/log';
 import { localAuthenticate, saveLastLocalAuthenticationSession } from '../utils/localAuthentication';
-import * as actions from '../actions';
 import { APP_STATE } from '../actions/actionsTypes';
 
 const appHasComeBackToForeground = function* appHasComeBackToForeground() {

app/utils/localAuthentication.js

@@ -16,7 +16,6 @@ export const saveLastLocalAuthenticationSession = async(server, serverRecord) =>
 			if (!serverRecord) {
 				serverRecord = await serversCollection.find(server);
 			}
-      console.log('saveLastLocalAuthenticationSession -> serverRecord', serverRecord);
 			await serverRecord.update((record) => {
 				record.lastLocalAuthenticatedSession = new Date();
 			});
@@ -50,7 +49,6 @@ export const localAuthenticate = async(server) => {
 
 	// if screen lock is enabled
 	if (serverRecord?.autoLock) {
-
 		// diff to last authenticated session
 		const diffToLastSession = moment().diff(serverRecord?.lastLocalAuthenticatedSession, 'seconds');
 		// console.log('localAuthenticate -> diffToLastSession', diffToLastSession);
@@ -64,18 +62,18 @@ export const localAuthenticate = async(server) => {
 			const isSupported = await LocalAuthentication.supportedAuthenticationTypesAsync();
 
 			// if biometry is enabled and enrolled on OS
-			// if (isEnrolled && isSupported) {
-			// 	// opens biometry prompt
-			// 	const authResult = await LocalAuthentication.authenticateAsync({ disableDeviceFallback: true });
-			// 	if (authResult?.success) {
-			// 		await resetAttempts();
-			// 		await saveLastLocalAuthenticationSession(server, serverRecord);
-			// 	} else {
-			// 		await localPasscode();
-			// 	}
-			// } else {
-			await localPasscode();
-			// }
+			if (isEnrolled && isSupported) {
+				// opens biometry prompt
+				const authResult = await LocalAuthentication.authenticateAsync({ disableDeviceFallback: true });
+				if (authResult?.success) {
+					await resetAttempts();
+					await saveLastLocalAuthenticationSession(server, serverRecord);
+				} else {
+					await localPasscode();
+				}
+			} else {
+				await localPasscode();
+			}
 		}
 	}
 };
@@ -90,10 +88,10 @@ export const supportedBiometryLabel = async() => {
 	const supported = await LocalAuthentication.supportedAuthenticationTypesAsync();
 
 	if (supported.includes(LocalAuthentication.AuthenticationType.FACIAL_RECOGNITION)) {
-		return isIOS ? 'FaceID' : 'facial recognition';
+		return isIOS ? 'FaceID' : 'facial recognition'; // TODO: I18n
 	}
 	if (supported.includes(LocalAuthentication.AuthenticationType.FINGERPRINT)) {
-		return isIOS ? 'TouchID' : 'fingerprint';
+		return isIOS ? 'TouchID' : 'fingerprint'; // TODO: I18n
 	}
 	return null;
 };

app/views/ChangePasscodeView.js

@@ -4,7 +4,7 @@ import { SafeAreaView } from 'react-navigation';
 import RNUserDefaults from 'rn-user-defaults';
 import Orientation from 'react-native-orientation-locker';
 
-import I18n from '../i18n';
+// import I18n from '../i18n';
 import { themedHeader } from '../utils/navigation';
 import { withTheme } from '../theme';
 import { themes } from '../constants/colors';

app/views/ScreenLockConfigView.js

@@ -48,10 +48,6 @@ const styles = StyleSheet.create({
 	listPadding: {
 		paddingVertical: 36
 	},
-	sectionSeparatorBorder: {
-		...sharedStyles.separatorVertical,
-		height: 36
-	},
 	infoContainer: {
 		padding: 15
 	},
@@ -71,21 +67,6 @@ ItemInfo.propTypes = {
 	theme: PropTypes.string
 };
 
-const SectionSeparator = React.memo(({ theme }) => (
-	<View
-		style={[
-			styles.sectionSeparatorBorder,
-			{
-				borderColor: themes[theme].separatorColor,
-				backgroundColor: themes[theme].auxiliaryBackground
-			}
-		]}
-	/>
-));
-SectionSeparator.propTypes = {
-	theme: PropTypes.string
-};
-
 class ScreenLockConfigView extends React.Component {
 	static navigationOptions = ({ screenProps }) => ({
 		title: I18n.t('Screen_lock'),

app/views/ScreenLockedView.js

@@ -12,7 +12,6 @@ import Orientation from 'react-native-orientation-locker';
 import { withTheme } from '../theme';
 import { themes } from '../constants/colors';
 import EventEmitter from '../utils/events';
-// import sharedStyles from './Styles';
 import { withSplit } from '../split';
 import { LOCAL_AUTHENTICATE_EMITTER } from '../constants/localAuthentication';
 import { isTablet } from '../utils/deviceInfo';