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")} - - - ) - } + )} + + ) }