Desktop: Resolves #8493: Link to FAQ when encryption password may have been reset by an update (#8667)

Co-authored-by: Laurent Cozic <laurent22@users.noreply.github.com>

.eslintignore

@@ -133,6 +133,7 @@ packages/app-desktop/gui/ClipperConfigScreen.js
 packages/app-desktop/gui/ConfigScreen/ButtonBar.js
 packages/app-desktop/gui/ConfigScreen/ConfigScreen.js
 packages/app-desktop/gui/ConfigScreen/Sidebar.js
+packages/app-desktop/gui/ConfigScreen/controls/MissingPasswordHelpLink.js
 packages/app-desktop/gui/ConfigScreen/controls/ToggleAdvancedSettingsButton.js
 packages/app-desktop/gui/ConfigScreen/controls/plugins/PluginBox.js
 packages/app-desktop/gui/ConfigScreen/controls/plugins/PluginsStates.js

.gitignore

@@ -119,6 +119,7 @@ packages/app-desktop/gui/ClipperConfigScreen.js
 packages/app-desktop/gui/ConfigScreen/ButtonBar.js
 packages/app-desktop/gui/ConfigScreen/ConfigScreen.js
 packages/app-desktop/gui/ConfigScreen/Sidebar.js
+packages/app-desktop/gui/ConfigScreen/controls/MissingPasswordHelpLink.js
 packages/app-desktop/gui/ConfigScreen/controls/ToggleAdvancedSettingsButton.js
 packages/app-desktop/gui/ConfigScreen/controls/plugins/PluginBox.js
 packages/app-desktop/gui/ConfigScreen/controls/plugins/PluginsStates.js

packages/app-desktop/gui/ConfigScreen/ConfigScreen.tsx

@@ -21,8 +21,7 @@ import getDefaultPluginsInfo from '@joplin/lib/services/plugins/defaultPlugins/d
 import JoplinCloudConfigScreen from '../JoplinCloudConfigScreen';
 import ToggleAdvancedSettingsButton from './controls/ToggleAdvancedSettingsButton';
 import shouldShowMissingPasswordWarning from '@joplin/lib/components/shared/config/shouldShowMissingPasswordWarning';
-import shim from '@joplin/lib/shim';
+import MacOSMissingPasswordHelpLink from './controls/MissingPasswordHelpLink';
-import StyledLink from '../style/StyledLink';
 const { KeymapConfigScreen } = require('../KeymapConfig/KeymapConfigScreen');
 
 const settingKeyToControl: any = {
@@ -190,25 +189,14 @@ class ConfigScreenComponent extends React.Component<any, any> {
 			// saved yet).
 			const matchesSavedTarget = settings['sync.target'] === this.props.settings['sync.target'];
 			if (matchesSavedTarget && shouldShowMissingPasswordWarning(settings['sync.target'], settings)) {
-				const openMissingPasswordFAQ = () =>
-					bridge().openExternal('https://joplinapp.org/faq#why-did-my-sync-and-encryption-passwords-disappear-after-updating-joplin');
-
-				const macInfoLink = (
-					<StyledLink href="#"
-						onClick={openMissingPasswordFAQ}
-						style={theme.linkStyle}
-					>
-						{_('Help')}
-					</StyledLink>
-				);
-
-				// The FAQ section related to missing passwords is specific to MacOS/ARM -- only show it
-				// in that case.
-				const showMacInfoLink = shim.isMac() && process.arch === 'arm64';
-
 				settingComps.push(
 					<p key='missing-password-warning' style={warningStyle}>
-						{_('Warning: Missing password.')}{' '}{showMacInfoLink ? macInfoLink : null}
+						{_('%s: Missing password.', _('Warning'))}
+						{' '}
+						<MacOSMissingPasswordHelpLink
+							theme={theme}
+							text={_('Help')}
+						/>
 					</p>
 				);
 			}

packages/app-desktop/gui/ConfigScreen/controls/MissingPasswordHelpLink.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+
+import shim from '@joplin/lib/shim';
+import bridge from '../../../services/bridge';
+import StyledLink from '../../style/StyledLink';
+
+interface Props {
+	theme: any;
+	text: string;
+}
+
+const openMissingPasswordFAQ = () =>
+	bridge().openExternal('https://joplinapp.org/faq#why-did-my-sync-and-encryption-passwords-disappear-after-updating-joplin');
+
+// A link to a specific part of the FAQ related to passwords being cleared when upgrading
+// to a MacOS/ARM release.
+const MacOSMissingPasswordHelpLink: React.FunctionComponent<Props> = props => {
+	const macInfoLink = (
+		<StyledLink href="#"
+			onClick={openMissingPasswordFAQ}
+			style={props.theme.linkStyle}
+		>
+			{props.text}
+		</StyledLink>
+	);
+
+	// The FAQ section related to missing passwords is specific to MacOS/ARM -- only show it
+	// in that case.
+	const newArchitectureReleasedRecently = Date.now() <= Date.UTC(2023, 11); // 11 = December
+	const showMacInfoLink = shim.isMac() && process.arch === 'arm64' && newArchitectureReleasedRecently;
+
+	return showMacInfoLink ? macInfoLink : null;
+};
+
+export default MacOSMissingPasswordHelpLink;

packages/app-desktop/gui/EncryptionConfigScreen/EncryptionConfigScreen.tsx

@@ -17,6 +17,7 @@ import Setting from '@joplin/lib/models/Setting';
 import CommandService from '@joplin/lib/services/CommandService';
 import { PublicPrivateKeyPair } from '@joplin/lib/services/e2ee/ppk';
 import ToggleAdvancedSettingsButton from '../ConfigScreen/controls/ToggleAdvancedSettingsButton';
+import MacOSMissingPasswordHelpLink from '../ConfigScreen/controls/MissingPasswordHelpLink';
 
 interface Props {
 	themeId: any;
@@ -252,7 +253,16 @@ const EncryptionConfigScreen = (props: Props) => {
 		const buttonTitle = CommandService.instance().label('openMasterPasswordDialog');
 
 		const needPasswordMessage = !needMasterPassword ? null : (
-			<p className="needpassword">{_('Your password is needed to decrypt some of your data.')}<br/>{_('Please click on "%s" to proceed, or set the passwords in the "%s" list below.', buttonTitle, _('Encryption keys'))}</p>
+			<p className="needpassword">
+				{_('Your password is needed to decrypt some of your data.')}
+				<br/>
+				{_('Please click on "%s" to proceed, or set the passwords in the "%s" list below.', buttonTitle, _('Encryption keys'))}
+				<br/>
+				<MacOSMissingPasswordHelpLink
+					theme={theme}
+					text={_('%s: Missing password', _('Help'))}
+				/>
+			</p>
 		);
 
 		return (