I18n

app/containers/Passcode/Base/Button.js

@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import styles from './styles';
 import { themes } from '../../../constants/colors';
 import Touch from '../../../utils/touch';
+import I18n from '../../../i18n';
 
 const Button = ({
 	text, disabled, theme, onPress, del
@@ -19,7 +20,7 @@ const Button = ({
 			del
 				? (
 					<Text style={[styles.deleteText, { color: themes[theme].titleText }]}>
-						del
+						{I18n.t('Passcode_del')}
 					</Text>
 				)
 				: (

app/containers/Passcode/Base/grid.js

@@ -1,17 +0,0 @@
-const grid = {
-	unit: 16,
-	headline: 32,
-	title: 24,
-	subheader: 18,
-	body: 14,
-	caption: 12,
-	label: 10,
-	lineHeight: 1.5,
-	navIcon: 20,
-	border: 2,
-	borderRadius: 2,
-	lowOpacity: 0.4,
-	mediumOpacity: 0.6,
-	highOpacity: 0.8
-};
-export default grid;

app/containers/Passcode/Base/styles.js

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native';
 
-import grid from './grid';
+const UNIT = 16;
 
 export default StyleSheet.create({
 	container: {
@@ -18,39 +18,39 @@ export default StyleSheet.create({
 		flex: 0,
 		flexShrink: 1,
 		alignItems: 'center',
-		height: grid.unit * 5.5
+		height: UNIT * 5.5
 	},
 	colButtonCircle: {
 		flex: 0,
-		marginLeft: grid.unit / 2,
-		marginRight: grid.unit / 2,
+		marginLeft: UNIT / 2,
+		marginRight: UNIT / 2,
 		alignItems: 'center',
-		width: grid.unit * 4,
-		height: grid.unit * 4
+		width: UNIT * 4,
+		height: UNIT * 4
 	},
 	text: {
-		fontSize: grid.unit * 2,
+		fontSize: UNIT * 2,
 		fontWeight: '200'
 	},
 	deleteText: {
-		fontSize: grid.unit * 1.2,
+		fontSize: UNIT * 1.2,
 		fontWeight: '200'
 	},
 	buttonCircle: {
 		alignItems: 'center',
 		justifyContent: 'center',
-		width: grid.unit * 4,
-		height: grid.unit * 4,
-		borderRadius: grid.unit * 2,
+		width: UNIT * 4,
+		height: UNIT * 4,
+		borderRadius: UNIT * 2,
 		borderWidth: 1
 	},
 	textTitle: {
 		fontSize: 20,
 		fontWeight: '200',
-		lineHeight: grid.unit * 2.5
+		lineHeight: UNIT * 2.5
 	},
 	textSubtitle: {
-		fontSize: grid.unit,
+		fontSize: UNIT,
 		fontWeight: '200',
 		textAlign: 'center'
 	},

app/containers/Passcode/Locked.js

@@ -9,6 +9,7 @@ import { themes } from '../../constants/colors';
 import { resetAttempts } from '../../utils/localAuthentication';
 import { TYPE } from './constants';
 import { getLockedUntil } from './utils';
+import I18n from '../../i18n';
 
 const styles = StyleSheet.create({
 	container: {
@@ -58,7 +59,7 @@ const Timer = ({ time, theme, setStatus }) => {
 	}
 
 	return (
-		<Text style={[styles.subtitle, { color: themes[theme].bodyText }]}>Try again in {timeLeft} seconds</Text>
+		<Text style={[styles.subtitle, { color: themes[theme].bodyText }]}>{I18n.t('Passcode_app_locked_subtitle', { timeLeft })}</Text>
 	);
 };
 
@@ -76,7 +77,7 @@ const Locked = ({ theme, setStatus }) => {
 
 	return (
 		<View style={[styles.container, { backgroundColor: themes[theme].auxiliaryBackground }]}>
-			<Text style={[styles.title, { color: themes[theme].titleText }]}>App locked</Text>
+			<Text style={[styles.title, { color: themes[theme].titleText }]}>{I18n.t('Passcode_app_locked_title')}</Text>
 			<Timer theme={theme} time={lockedUntil} setStatus={setStatus} />
 		</View>
 	);

app/containers/Passcode/PasscodeChoose.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 
 import Base from './Base';
 import { TYPE } from './constants';
+import I18n from '../../i18n';
 
 const PasscodeEnter = ({
 	theme, type, finishProcess
@@ -21,7 +22,7 @@ const PasscodeEnter = ({
 
 	const onError = () => {
 		setStatus(TYPE.CHOOSE);
-		setSubtitle('Passcodes don\'t match. Try again.');
+		setSubtitle(I18n.t('Passcode_choose_error'));
 		confirmRef?.current?.animate('shake');
 	};
 
@@ -33,7 +34,7 @@ const PasscodeEnter = ({
 				type={TYPE.CONFIRM}
 				onEndProcess={changePasscode}
 				previousPasscode={previousPasscode}
-				title='Confirm your new passcode'
+				title={I18n.t('Passcode_choose_confirm_title')}
 				onError={onError}
 			/>
 		);
@@ -44,7 +45,7 @@ const PasscodeEnter = ({
 			theme={theme}
 			type={TYPE.CHOOSE}
 			onEndProcess={firstStep}
-			title='Choose your new passcode'
+			title={I18n.t('Passcode_choose_title')}
 			subtitle={subtitle}
 		/>
 	);

app/containers/Passcode/PasscodeEnter.js

@@ -11,6 +11,7 @@ import {
 } from '../../constants/localAuthentication';
 import { resetAttempts } from '../../utils/localAuthentication';
 import { getLockedUntil, getDiff } from './utils';
+import I18n from '../../i18n';
 
 const PasscodeEnter = ({
 	theme, type, finishProcess
@@ -64,7 +65,7 @@ const PasscodeEnter = ({
 		return <Locked theme={theme} setStatus={setStatus} />;
 	}
 
-	return <Base ref={ref} theme={theme} type={TYPE.ENTER} onEndProcess={onEndProcess} title='Enter your passcode' />;
+	return <Base ref={ref} theme={theme} type={TYPE.ENTER} onEndProcess={onEndProcess} title={I18n.t('Passcode_enter_title')} />;
 };
 
 PasscodeEnter.propTypes = {

app/i18n/locales/en.js

@@ -561,5 +561,14 @@ export default {
 	This_will_clear_all_your_offline_data: 'This will clear all your offline data.',
 	Mark_unread: 'Mark Unread',
 	Wait_activation_warning: 'Before you can login, your account must be manually activated by an administrator.',
-	Screen_lock: 'Screen lock'
+	Screen_lock: 'Screen lock',
+	Local_authentication_facial_recognition: 'facial_recognition',
+	Local_authentication_fingerprint: 'fingerprint',
+	Passcode_del: 'del',
+	Passcode_enter_title: 'Enter your passcode',
+	Passcode_choose_title: 'Choose your new passcode',
+	Passcode_choose_confirm_title: 'Confirm your new passcode',
+	Passcode_choose_error: 'Passcodes don\'t match. Try again.',
+	Passcode_app_locked_title: 'App locked',
+	Passcode_app_locked_subtitle: 'Try again in {{timeLeft}} seconds'
 };

app/utils/localAuthentication.js

@@ -7,6 +7,7 @@ import database from '../lib/database';
 import { isIOS } from './deviceInfo';
 import EventEmitter from './events';
 import { LOCAL_AUTHENTICATE_EMITTER, LOCKED_OUT_TIMER_KEY, ATTEMPTS_KEY } from '../constants/localAuthentication';
+import I18n from '../i18n';
 
 export const saveLastLocalAuthenticationSession = async(server, serverRecord) => {
 	const serversDB = database.servers;
@@ -42,7 +43,6 @@ export const localAuthenticate = async(server) => {
 	let serverRecord;
 	try {
 		serverRecord = await serversCollection.find(server);
-		// console.log('localAuthenticate -> serverRecord', serverRecord);
 	} catch (error) {
 		return Promise.reject();
 	}
@@ -51,7 +51,6 @@ export const localAuthenticate = async(server) => {
 	if (serverRecord?.autoLock) {
 		// diff to last authenticated session
 		const diffToLastSession = moment().diff(serverRecord?.lastLocalAuthenticatedSession, 'seconds');
-		// console.log('localAuthenticate -> diffToLastSession', diffToLastSession);
 
 		// if last authenticated session is older than configured auto lock time, authentication is required
 		if (diffToLastSession >= serverRecord?.autoLockTime) {
@@ -88,10 +87,10 @@ export const supportedBiometryLabel = async() => {
 	const supported = await LocalAuthentication.supportedAuthenticationTypesAsync();
 
 	if (supported.includes(LocalAuthentication.AuthenticationType.FACIAL_RECOGNITION)) {
-		return isIOS ? 'FaceID' : 'facial recognition'; // TODO: I18n
+		return isIOS ? 'FaceID' : I18n.t('Local_authentication_facial_recognition');
 	}
 	if (supported.includes(LocalAuthentication.AuthenticationType.FINGERPRINT)) {
-		return isIOS ? 'TouchID' : 'fingerprint'; // TODO: I18n
+		return isIOS ? 'TouchID' : I18n.t('Local_authentication_fingerprint');
 	}
 	return null;
 };

app/views/ScreenLockConfigView.js

@@ -87,7 +87,7 @@ class ScreenLockConfigView extends React.Component {
 				biometry: this.serverRecord?.biometry || true
 			});
 		} catch (error) {
-			// TODO: raise error in case server wasn't found and pop?
+			// Do nothing
 		}
 
 		const biometryLabel = await supportedBiometryLabel();