diff --git a/packages/app-mobile/components/screens/encryption-config.tsx b/packages/app-mobile/components/screens/encryption-config.tsx
index b4512113f..c4bfe1b52 100644
--- a/packages/app-mobile/components/screens/encryption-config.tsx
+++ b/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 ? {decryptedStatText(stats)} : 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.length; i++) {
+ for (let i = 0; i < props.masterKeys.filter(mk => masterKeyEnabled(mk)).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 (
-
- {
+
+
{_('For more information about End-To-End Encryption (E2EE) and advice on how to enable it please check the documentation:')}
{
https://joplinapp.org/help/apps/sync/e2ee
- }
- {_('Status')}
- {_('Encryption is: %s', props.encryptionEnabled ? _('Enabled') : _('Disabled'))}
- {decryptedItemsInfo}
- {renderMasterPassword()}
- {toggleButton}
- {passwordPromptComp}
- {mkComps}
- {nonExistingMasterKeySection}
-
+ {_('Status')}
+ {_('Encryption is: %s', props.encryptionEnabled ? _('Enabled') : _('Disabled'))}
+ {decryptedItemsInfo}
+ {renderMasterPassword()}
+ {toggleButton}
+ {passwordPromptComp}
+ {mkComps}
+ {nonExistingMasterKeySection}
+
+
+ setShowDisabledKeys(st => !st)}
+ >
+
+ {disabledMkComps}
+
+
);