diff --git a/public/locales/en-US/settings-email-pgp.json b/public/locales/en-US/settings-email-pgp.json
index 4f86dc5..a5cc825 100644
--- a/public/locales/en-US/settings-email-pgp.json
+++ b/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"
}
diff --git a/src/route-widgets/SettingsEmailPGPRoute/AlreadyConfigured.tsx b/src/route-widgets/SettingsEmailPGPRoute/AlreadyConfigured.tsx
new file mode 100644
index 0000000..51a4f7f
--- /dev/null
+++ b/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 (
+
+
+
+ {t("alreadyConfigured")}
+
+ {isLoadingFingerprint ? : {fingerprint}
}
+
+
+
+ mutateAsync({
+ emailGpgPublicKey: null,
+ })
+ }
+ >
+ {t("remove")}
+
+
+
+ )
+}
diff --git a/src/routes/SettingsEmailPGPRoute.tsx b/src/routes/SettingsEmailPGPRoute.tsx
index 3b9a1ae..e6e9889 100644
--- a/src/routes/SettingsEmailPGPRoute.tsx
+++ b/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 (
+
+ {user?.preferences.emailGpgPublicKey ? (
+
+ ) : (
-
- )
- } else {
- return (
-
-
- {t("alreadyConfigured")}
-
-
- )
- }
+ )}
+
+ )
}