feat: exportReminder

locales/en/en.json

@@ -471,6 +471,12 @@
 		},
 		"event": {
 			"title": "Event"
+		},
+		"exportReminder": {
+			"title": "Export master keys",
+			"description": "Please export your master keys and store them in a separate safe location. You need your master keys when you reset your password to avoid data loss. You need to export your master keys everytime you change your password.",
+			"continue": "Export",
+			"dismiss": "Dismiss"
 		}
 	},
 	"contextMenus": {

src/components/exportReminder.tsx

@@ -0,0 +1,57 @@
+import { useEffect, useRef, useCallback, memo } from "react"
+import { useLocalStorage } from "@uidotdev/usehooks"
+import useAccount from "@/hooks/useAccount"
+import { showConfirmDialog } from "./dialogs/confirm"
+import { useTranslation } from "react-i18next"
+import { useNavigate } from "@tanstack/react-router"
+import useIsAuthed from "@/hooks/useIsAuthed"
+
+export const ExportReminder = memo(() => {
+	const account = useAccount()
+	const didRemindRef = useRef<boolean>(false)
+	const [exportReminderFired, setExportReminderFired] = useLocalStorage<boolean>("exportReminderFired", false)
+	const { t } = useTranslation()
+	const navigate = useNavigate()
+	const [authed] = useIsAuthed()
+
+	const remind = useCallback(async () => {
+		if (!account || account.account.didExportMasterKeys || didRemindRef.current || exportReminderFired || !authed) {
+			return
+		}
+
+		didRemindRef.current = true
+
+		setExportReminderFired(true)
+
+		if (
+			!(await showConfirmDialog({
+				title: t("dialogs.exportReminder.title"),
+				continueButtonText: t("dialogs.exportReminder.continue"),
+				description: t("dialogs.exportReminder.description"),
+				continueButtonVariant: "default",
+				cancelButtonText: t("dialogs.exportReminder.dismiss")
+			}))
+		) {
+			return
+		}
+
+		navigate({
+			to: "/settings/$type",
+			params: {
+				type: "security"
+			}
+		})
+	}, [account, t, navigate, exportReminderFired, setExportReminderFired, authed])
+
+	useEffect(() => {
+		if (!account || account.account.didExportMasterKeys || didRemindRef.current || exportReminderFired || !authed) {
+			return
+		}
+
+		remind()
+	}, [account, remind, exportReminderFired, authed])
+
+	return null
+})
+
+export default ExportReminder

src/routes/__root.tsx

@@ -40,6 +40,7 @@ import StorageDialog from "@/components/dialogs/storage"
 import RemoteConfigHandler from "@/components/remoteConfigHandler"
 import MaintenanceDialog from "@/components/dialogs/maintenance"
 import LockDialog from "@/components/dialogs/lock"
+import ExportReminder from "@/components/exportReminder"
 
 focusManager.setEventListener(handleFocus => {
 	const onFocus = () => {
@@ -162,6 +163,7 @@ export const Root = memo(() => {
 										<InfoDialog />
 										<StorageDialog />
 										<LockDialog />
+										<ExportReminder />
 									</>
 								) : (
 									<DropZone>