Mobile: Resolves #11486: Add an accordion for disabled master keys on encryption screen (#11529)

packages/app-mobile/components/screens/encryption-config.tsx

@@ -9,9 +9,10 @@ import time from '@joplin/lib/time';
 import { decryptedStatText, enableEncryptionConfirmationMessages, onSavePasswordClick, useInputMasterPassword, useInputPasswords, usePasswordChecker, useStats } from '@joplin/lib/components/EncryptionConfigScreen/utils';
 import { MasterKeyEntity } from '@joplin/lib/services/e2ee/types';
 import { State } from '@joplin/lib/reducer';
-import { SyncInfo } from '@joplin/lib/services/synchronizer/syncInfoUtils';
+import { masterKeyEnabled, SyncInfo } from '@joplin/lib/services/synchronizer/syncInfoUtils';
 import { getDefaultMasterKey, setupAndDisableEncryption, toggleAndSetupEncryption } from '@joplin/lib/services/e2ee/utils';
 import { useMemo, useState } from 'react';
+import { Divider, List } from 'react-native-paper';
 import shim from '@joplin/lib/shim';
 
 interface Props {
@@ -34,8 +35,10 @@ const EncryptionConfigScreen = (props: Props) => {
 	const { passwordChecks, masterPasswordKeys } = usePasswordChecker(props.masterKeys, props.activeMasterKeyId, props.masterPassword, props.passwords);
 	const { inputPasswords, onInputPasswordChange } = useInputPasswords(props.passwords);
 	const { inputMasterPassword, onMasterPasswordSave, onMasterPasswordChange } = useInputMasterPassword(props.masterKeys, props.activeMasterKeyId);
+	const [showDisabledKeys, setShowDisabledKeys] = useState(false);
 
 	const mkComps = [];
+	const disabledMkComps = [];
 
 	const nonExistingMasterKeyIds = props.notLoadedMasterKeys.slice();
 
@@ -78,6 +81,10 @@ const EncryptionConfigScreen = (props: Props) => {
 				flex: 1,
 				padding: theme.margin,
 			},
+			disabledContainer: {
+				paddingLeft: theme.margin,
+				paddingRight: theme.margin,
+			},
 		};
 
 		return StyleSheet.create(styles);
@@ -85,7 +92,7 @@ const EncryptionConfigScreen = (props: Props) => {
 
 	const decryptedItemsInfo = props.encryptionEnabled ? <Text style={styles.normalText}>{decryptedStatText(stats)}</Text> : null;
 
-	const renderMasterKey = (_num: number, mk: MasterKeyEntity) => {
+	const renderMasterKey = (mk: MasterKeyEntity) => {
 		const theme = themeStyle(props.themeId);
 
 		const password = inputPasswords[mk.id] ? inputPasswords[mk.id] : '';
@@ -226,16 +233,19 @@ const EncryptionConfigScreen = (props: Props) => {
 		}
 	};
 
-
+	for (let i = 0; i < props.masterKeys.filter(mk => masterKeyEnabled(mk)).length; i++) {
-
-	for (let i = 0; i < props.masterKeys.length; i++) {
 		const mk = props.masterKeys[i];
-		mkComps.push(renderMasterKey(i + 1, mk));
+		mkComps.push(renderMasterKey(mk));
 
 		const idx = nonExistingMasterKeyIds.indexOf(mk.id);
 		if (idx >= 0) nonExistingMasterKeyIds.splice(idx, 1);
 	}
 
+	for (let i = 0; i < props.masterKeys.filter(mk => !masterKeyEnabled(mk)).length; i++) {
+		const mk = props.masterKeys[i];
+		disabledMkComps.push(renderMasterKey(mk));
+	}
+
 	const onToggleButtonClick = async () => {
 		if (props.encryptionEnabled) {
 			const ok = await shim.showConfirmationDialog(_('Disabling encryption means *all* your notes and attachments are going to be re-synchronised and sent unencrypted to the sync target. Do you wish to continue?'));
@@ -286,8 +296,8 @@ const EncryptionConfigScreen = (props: Props) => {
 	return (
 		<View style={rootStyle}>
 			<ScreenHeader title={_('Encryption Config')} />
-			<ScrollView style={styles.container}>
+			<ScrollView>
-				{
+				<View style={styles.container}>
 					<View style={{ backgroundColor: theme.warningBackgroundColor, paddingTop: 5, paddingBottom: 5, paddingLeft: 10, paddingRight: 10 }}>
 						<Text>{_('For more information about End-To-End Encryption (E2EE) and advice on how to enable it please check the documentation:')}</Text>
 						<TouchableOpacity
@@ -298,7 +308,6 @@ const EncryptionConfigScreen = (props: Props) => {
 							<Text>https://joplinapp.org/help/apps/sync/e2ee</Text>
 						</TouchableOpacity>
 					</View>
-				}
 
 					<Text style={styles.titleText}>{_('Status')}</Text>
 					<Text style={styles.normalText}>{_('Encryption is: %s', props.encryptionEnabled ? _('Enabled') : _('Disabled'))}</Text>
@@ -308,7 +317,18 @@ const EncryptionConfigScreen = (props: Props) => {
 					{passwordPromptComp}
 					{mkComps}
 					{nonExistingMasterKeySection}
-				<View style={{ flex: 1, height: 20 }}></View>
+				</View>
+				<Divider />
+				<List.Accordion
+					title={_('Disabled keys')}
+					titleStyle={styles.titleText}
+					expanded={showDisabledKeys}
+					onPress={() => setShowDisabledKeys(st => !st)}
+				>
+					<View style={styles.disabledContainer}>
+						{disabledMkComps}
+					</View>
+				</List.Accordion>
 			</ScrollView>
 		</View>
 	);