Merge pull request #360 from danditomaso/add_pki_backup_dialog

Add PKI backup dialog, add reminder toast to suggest backing up private key.

src/core/hooks/useCookie.ts

@@ -0,0 +1,52 @@
+import Cookies, { type CookieAttributes } from "js-cookie";
+import { useCallback, useState } from "react";
+
+interface CookieHookResult<T> {
+  value: T | undefined;
+  setCookie: (value: T, options?: CookieAttributes) => void;
+  removeCookie: () => void;
+}
+
+function useCookie<T extends object>(
+  cookieName: string,
+  initialValue?: T,
+): CookieHookResult<T> {
+  const [cookieValue, setCookieValue] = useState<T | undefined>(() => {
+    try {
+      const cookie = Cookies.get(cookieName);
+      return cookie ? (JSON.parse(cookie) as T) : initialValue;
+    } catch (error) {
+      console.error(`Error parsing cookie ${cookieName}:`, error);
+      return initialValue;
+    }
+  });
+
+  const setCookie = useCallback(
+    (value: T, options?: CookieAttributes) => {
+      try {
+        Cookies.set(cookieName, JSON.stringify(value), options);
+        setCookieValue(value);
+      } catch (error) {
+        console.error(`Error setting cookie ${cookieName}:`, error);
+      }
+    },
+    [cookieName],
+  );
+
+  const removeCookie = useCallback(() => {
+    try {
+      Cookies.remove(cookieName);
+      setCookieValue(undefined);
+    } catch (error) {
+      console.error(`Error removing cookie ${cookieName}:`, error);
+    }
+  }, [cookieName]);
+
+  return {
+    value: cookieValue,
+    setCookie,
+    removeCookie,
+  };
+}
+
+export default useCookie;

src/core/hooks/useKeyBackupReminder.tsx

@@ -0,0 +1,120 @@
+import { Button } from "@app/components/UI/Button";
+import type { CookieAttributes } from "js-cookie";
+import { useCallback, useEffect, useRef } from "react";
+import useCookie from "./useCookie";
+import { useToast } from "./useToast";
+
+interface UseBackupReminderOptions {
+  reminderInDays?: number;
+  message: string;
+  onAccept?: () => void | Promise<void>;
+  enabled: boolean;
+  cookieOptions?: CookieAttributes;
+}
+
+interface ReminderState {
+  suppressed: boolean;
+  lastShown: string;
+}
+
+const TOAST_APPEAR_DELAY = 10_000 // 10 seconds;
+const TOAST_DURATION = 30_000 // 30 seconds;:
+
+// remind user in 1 year to backup keys again, if they accept the reminder;
+const ON_ACCEPT_REMINDER_DAYS = 365
+
+function isReminderExpired(lastShown: string): boolean {
+  const lastShownDate = new Date(lastShown);
+  const now = new Date();
+  const daysSinceLastShown =
+    (now.getTime() - lastShownDate.getTime()) / (1000 * 60 * 60 * 24);
+  return daysSinceLastShown >= 7;
+}
+
+export function useBackupReminder({
+  reminderInDays = 7,
+  enabled,
+  message,
+  onAccept = () => { },
+  cookieOptions,
+}: UseBackupReminderOptions) {
+  const { toast } = useToast();
+  const toastShownRef = useRef(false);
+  const { value: reminderCookie, setCookie } =
+    useCookie<ReminderState>("key_backup_reminder");
+
+  const suppressReminder = useCallback(
+    (days: number) => {
+      const expiryDate = new Date();
+      expiryDate.setDate(expiryDate.getDate() + days);
+
+      setCookie(
+        {
+          suppressed: true,
+          lastShown: new Date().toISOString(),
+        },
+        { ...cookieOptions, expires: expiryDate },
+      );
+    },
+    [setCookie, cookieOptions],
+  );
+
+  useEffect(() => {
+    if (!enabled || toastShownRef.current) return;
+
+    const shouldShowReminder =
+      !reminderCookie?.suppressed ||
+      isReminderExpired(reminderCookie.lastShown);
+    if (!shouldShowReminder) return;
+
+    toastShownRef.current = true;
+
+    const { dismiss } = toast(
+      {
+        title: "Backup Reminder",
+        duration: TOAST_DURATION,
+        delay: TOAST_APPEAR_DELAY,
+        description: message,
+        action: (
+          <div className="flex gap-2">
+            <Button
+              type="button"
+              variant="default"
+              onClick={() => {
+                onAccept();
+                dismiss();
+                suppressReminder(ON_ACCEPT_REMINDER_DAYS);
+              }}
+            >
+              Back up now
+            </Button>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => {
+                dismiss();
+                suppressReminder(reminderInDays);
+              }}
+            >
+              Remind me in {reminderInDays} days
+            </Button>
+          </div>
+        ),
+      },
+    );
+
+    return () => {
+      if (!toastShownRef.current) {
+        dismiss();
+      }
+    };
+  }, [
+    enabled,
+    message,
+    onAccept,
+    reminderInDays,
+    suppressReminder,
+    toast,
+    reminderCookie,
+  ]);
+}

src/core/hooks/useToast.ts

@@ -10,6 +10,7 @@ type ToasterToast = ToastProps & {
   title?: ReactNode;
   description?: ReactNode;
   action?: ToastActionElement;
+  delay?: number;
 };
 
 const actionTypes = {
@@ -137,7 +138,7 @@ function dispatch(action: Action) {
 
 type Toast = Omit<ToasterToast, "id">;
 
-function toast({ ...props }: Toast) {
+function toast({ delay = 0, ...props }: Toast) {
   const id = genId();
 
   const update = (props: ToasterToast) =>
@@ -147,17 +148,19 @@ function toast({ ...props }: Toast) {
     });
   const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
 
-  dispatch({
-    type: "ADD_TOAST",
-    toast: {
-      ...props,
-      id,
-      open: true,
-      onOpenChange: (open) => {
-        if (!open) dismiss();
+  setTimeout(() => {
+    dispatch({
+      type: "ADD_TOAST",
+      toast: {
+        ...props,
+        id,
+        open: true,
+        onOpenChange: (open) => {
+          if (!open) dismiss();
+        },
       },
-    },
-  });
+    });
+  }, delay);
 
   return {
     id: id,
@@ -190,4 +193,4 @@ function useToast() {
   };
 }
 
-export { toast, useToast };
+export { toast, useToast };

src/core/stores/deviceStore.ts

@@ -25,7 +25,8 @@ export type DialogVariant =
   | "shutdown"
   | "reboot"
   | "deviceName"
-  | "nodeRemoval";
+  | "nodeRemoval"
+  | "pkiBackup";
 
 export interface Device {
   id: number;
@@ -60,6 +61,7 @@ export interface Device {
     reboot: boolean;
     deviceName: boolean;
     nodeRemoval: boolean;
+    pkiBackup: boolean;
   };
 
   setStatus: (status: Types.DeviceStatusEnum) => void;
@@ -142,6 +144,7 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
             reboot: false,
             deviceName: false,
             nodeRemoval: false,
+            pkiBackup: false,
           },
           pendingSettingsChanges: false,
           messageDraft: "",