feat: Add ability to disable pgp encryption

public/locales/en-US/settings-email-pgp.json

@@ -16,5 +16,6 @@
     "description": "We found a public key for your email! Would you like to use it? The key has been created on {{createdAt}} and is of type {{type}}. This is the fingerprint:",
     "continueActionLabel": "Use Key"
   },
-  "alreadyConfigured": "PGP encryption is activated. You are using a public key with this fingerprint:"
+  "alreadyConfigured": "PGP encryption is activated. You are using a public key with this fingerprint:",
+  "remove": "Disable PGP encryption"
 }

src/route-widgets/SettingsEmailPGPRoute/AlreadyConfigured.tsx

@@ -0,0 +1,72 @@
+import {Alert, CircularProgress, Grid} from "@mui/material"
+import {ReactElement, useContext} from "react"
+import {useTranslation} from "react-i18next"
+import {LoadingButton} from "@mui/lab"
+import {SimpleDetailResponse, User} from "~/server-types"
+import {UpdatePreferencesData, updatePreferences} from "~/apis"
+import {useMutation} from "@tanstack/react-query"
+import {AxiosError} from "axios"
+import {useErrorSuccessSnacks} from "~/hooks"
+import {AuthContext} from "~/components"
+import {useAsync} from "react-use"
+import {readKey} from "openpgp"
+
+export default function AlreadyConfigured(): ReactElement {
+	const {t} = useTranslation(["settings-email-pgp", "common"])
+	const {user, _updateUser} = useContext(AuthContext)
+	const {showSuccess, showError} = useErrorSuccessSnacks()
+
+	const {mutateAsync, isLoading} = useMutation<
+		SimpleDetailResponse,
+		AxiosError,
+		UpdatePreferencesData
+	>(updatePreferences, {
+		onSuccess: (response, values) => {
+			const newUser = {
+				...user,
+				preferences: {
+					...user!.preferences,
+					...values,
+				},
+			} as User
+
+			if (response.detail) {
+				showSuccess(response?.detail)
+			}
+
+			_updateUser(newUser)
+		},
+		onError: showError,
+	})
+	const {value: fingerprint, loading: isLoadingFingerprint} = useAsync(async () => {
+		const key = await readKey({
+			armoredKey: user!.preferences.emailGpgPublicKey!,
+		})
+
+		return key.getFingerprint()
+	}, [user?.preferences?.emailGpgPublicKey])
+
+	return (
+		<Grid container spacing={4}>
+			<Grid item>
+				<Alert severity="success" variant="standard">
+					{t("alreadyConfigured")}
+				</Alert>
+				{isLoadingFingerprint ? <CircularProgress /> : <code>{fingerprint}</code>}
+			</Grid>
+			<Grid item>
+				<LoadingButton
+					variant="contained"
+					loading={isLoading}
+					onClick={() =>
+						mutateAsync({
+							emailGpgPublicKey: null,
+						})
+					}
+				>
+					{t("remove")}
+				</LoadingButton>
+			</Grid>
+		</Grid>
+	)
+}

src/routes/SettingsEmailPGPRoute.tsx

@@ -1,29 +1,22 @@
 import {ReactElement} from "react"
 import {useTranslation} from "react-i18next"
 
-import {Alert} from "@mui/material"
-
 import {SimplePage} from "~/components"
 import {useUser} from "~/hooks"
+import AlreadyConfigured from "~/route-widgets/SettingsEmailPGPRoute/AlreadyConfigured"
 import SetupPGPEncryptionForm from "~/route-widgets/SettingsEmailPGPRoute/SetupPGPEncryptionForm"
 
 export default function SettingsEmailPGPRoute(): ReactElement {
 	const {t} = useTranslation(["settings-email-pgp", "common"])
 	const user = useUser()
 
-	if (!user?.preferences.emailGpgPublicKey) {
+	return (
-		return (
+		<SimplePage title={t("title")} description={t("description")}>
-			<SimplePage title={t("title")} description={t("description")}>
+			{user?.preferences.emailGpgPublicKey ? (
+				<AlreadyConfigured />
+			) : (
 				<SetupPGPEncryptionForm />
-			</SimplePage>
+			)}
-		)
+		</SimplePage>
-	} else {
+	)
-		return (
-			<SimplePage title={t("title")} description={t("description")}>
-				<Alert severity="success" variant="standard">
-					{t("alreadyConfigured")}
-				</Alert>
-			</SimplePage>
-		)
-	}
 }