Mobile: Plugins: Show information page before enabling plugin support (#10348)

2025-07-13 00:10:37 +02:00 · 2024-05-02 06:58:29 -07:00
parent 70c2f0a70a
commit 4056fc2281
8 changed files with 229 additions and 25 deletions
--- a/packages/app-mobile/components/screens/ConfigScreen/plugins/EnablePluginSupportPage.tsx
+++ b/packages/app-mobile/components/screens/ConfigScreen/plugins/EnablePluginSupportPage.tsx
@ -0,0 +1,137 @@
+import { _ } from '@joplin/lib/locale';
+import { themeStyle } from '../../../global-style';
+import * as React from 'react';
+import { useMemo } from 'react';
+import { Linking, View, StyleSheet, ViewStyle, TextStyle } from 'react-native';
+import { Button, Card, Divider, Icon, List, Text } from 'react-native-paper';
+
+interface Props {
+	themeId: number;
+	onEnablePluginSupport: ()=> void;
+}
+
+const onLearnMorePress = () => {
+	void Linking.openURL('https://joplinapp.org/help/apps/plugins');
+};
+
+const useStyles = (themeId: number) => {
+	return useMemo(() => {
+		const theme = themeStyle(themeId);
+		const basePrecautionCard: ViewStyle = {
+			margin: theme.margin,
+		};
+
+		const baseTitleStyle: TextStyle = {
+			fontWeight: 'bold',
+			color: theme.color,
+			fontSize: theme.fontSize,
+		};
+
+		const styles = StyleSheet.create({
+			descriptionText: {
+				padding: theme.margin,
+				paddingTop: 0,
+			},
+			firstPrecautionCard: {
+				...basePrecautionCard,
+			},
+			precautionCard: {
+				...basePrecautionCard,
+				marginTop: 0,
+			},
+			cardContent: {
+				paddingTop: theme.itemMarginTop,
+				paddingBottom: theme.itemMarginBottom,
+			},
+			title: baseTitleStyle,
+			header: {
+				...baseTitleStyle,
+				margin: theme.margin,
+				marginBottom: 0,
+			},
+			actionButton: {
+				borderRadius: 10,
+				marginLeft: theme.marginLeft * 2,
+				marginRight: theme.marginRight * 2,
+				marginBottom: theme.margin,
+			},
+		});
+
+		const themeOverride = {
+			secondaryButton: {
+				colors: {
+					primary: theme.color4,
+					outline: theme.color4,
+				},
+			},
+			primaryButton: {
+				colors: {
+					primary: theme.color4,
+					onPrimary: theme.backgroundColor4,
+				},
+			},
+			card: {
+				colors: {
+					outline: theme.codeBorderColor,
+				},
+			},
+		};
+
+		return { styles, themeOverride };
+	}, [themeId]);
+};
+
+const EnablePluginSupportPage: React.FC<Props> = props => {
+	const { styles, themeOverride } = useStyles(props.themeId);
+
+	let isFirstCard = true;
+	const renderCard = (icon: string, title: string, description: string) => {
+		const style = isFirstCard ? styles.firstPrecautionCard : styles.precautionCard;
+		isFirstCard = false;
+		return (
+			<Card
+				mode='outlined'
+				style={style}
+				contentStyle={styles.cardContent}
+				theme={themeOverride.card}
+			>
+				<Card.Title
+					title={title}
+					titleStyle={styles.title}
+					subtitle={description}
+					subtitleNumberOfLines={4}
+					left={(props) => <Icon {...props} source={icon}/>}
+				/>
+			</Card>
+		);
+	};
+
+	return (
+		<View>
+			<List.Section
+				title={_('What are plugins?')}
+				titleStyle={styles.title}
+			>
+				<Text style={styles.descriptionText}>{_('Plugins extend Joplin with features that are not present by default. Plugins can extend Joplin\'s editor, viewer, and more.')}</Text>
+			</List.Section>
+			<Divider/>
+			<List.Section
+				title={_('Plugin security')}
+				titleStyle={styles.title}
+			>
+				<Text style={styles.descriptionText}>{_('Like any software you install, plugins can potentially cause security issues or data loss.')}</Text>
+			</List.Section>
+			<Divider/>
+			<Text variant='titleMedium' style={styles.header}>{_('Here\'s what we do to make plugins safer:')}</Text>
+			{renderCard('crown', _('Recommended plugins'), _('We mark plugins developed by trusted Joplin community members as "recommended".'))}
+			{renderCard('source-branch-check', _('Open Source'), _('Most plugins have source code available for review on the plugin website.'))}
+			{renderCard('flag-remove', _('Report system'), _('We have a system for reporting and removing problematic plugins.'))}
+			<View>
+				<Button style={styles.actionButton} theme={themeOverride.secondaryButton} onPress={onLearnMorePress}>{_('Learn more')}</Button>
+				<Button style={styles.actionButton} theme={themeOverride.primaryButton} mode='contained' onPress={props.onEnablePluginSupport}>{_('Enable plugin support')}</Button>
+			</View>
+		</View>
+	);
+};
+
+export default EnablePluginSupportPage;