(
))}
-
+
+ {actionButtons?.map(({ text, onClick, variant, className }) => (
+
+ ))}
+
);
},
diff --git a/src/components/UI/Toast.tsx b/src/components/UI/Toast.tsx
index ca8dfc90..d40b294a 100644
--- a/src/components/UI/Toast.tsx
+++ b/src/components/UI/Toast.tsx
@@ -1,11 +1,11 @@
-import * as ToastPrimitives from "@radix-ui/react-toast";
-import { type VariantProps, cva } from "class-variance-authority";
-import { X } from "lucide-react";
-import * as React from "react";
+import * as React from "react"
+import * as ToastPrimitives from "@radix-ui/react-toast"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from 'lucide-react'
-import { cn } from "@core/utils/cn.ts";
+import { cn } from "@core/utils/cn"
-const ToastProvider = ToastPrimitives.Provider;
+const ToastProvider = ToastPrimitives.Provider
const ToastViewport = React.forwardRef<
React.ElementRef,
@@ -14,35 +14,34 @@ const ToastViewport = React.forwardRef<
-));
-ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
+))
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName
const toastVariants = cva(
- "data-[swipe=move]:transition-none grow-1 group relative pointer-events-auto flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full mt-4 data-[state=closed]:slide-out-to-right-full dark:border-slate-700 last:mt-0 sm:last:mt-4",
+ "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
{
variants: {
variant: {
- default:
- "bg-white border-slate-200 dark:bg-slate-800 dark:border-slate-700",
+ default: "border bg-background text-foreground dark:bg-slate-700 dark:border-slate-600 dark:text-slate-50",
destructive:
- "group destructive bg-red-600 text-white border-red-600 dark:border-red-600",
+ "group destructive bg-red-600 text-white dark:border-red-900 dark:bg-red-900 dark:text-red-50"
},
},
defaultVariants: {
variant: "default",
},
- },
-);
+ }
+)
const Toast = React.forwardRef<
React.ElementRef,
React.ComponentPropsWithoutRef &
- VariantProps
+ VariantProps
>(({ className, variant, ...props }, ref) => {
return (
- );
-});
-Toast.displayName = ToastPrimitives.Root.displayName;
+ )
+})
+Toast.displayName = ToastPrimitives.Root.displayName
const ToastAction = React.forwardRef<
React.ElementRef,
@@ -61,13 +60,13 @@ const ToastAction = React.forwardRef<
-));
-ToastAction.displayName = ToastPrimitives.Action.displayName;
+))
+ToastAction.displayName = ToastPrimitives.Action.displayName
const ToastClose = React.forwardRef<
React.ElementRef,
@@ -76,16 +75,16 @@ const ToastClose = React.forwardRef<
-));
-ToastClose.displayName = ToastPrimitives.Close.displayName;
+))
+ToastClose.displayName = ToastPrimitives.Close.displayName
const ToastTitle = React.forwardRef<
React.ElementRef,
@@ -96,8 +95,8 @@ const ToastTitle = React.forwardRef<
className={cn("text-sm font-semibold", className)}
{...props}
/>
-));
-ToastTitle.displayName = ToastPrimitives.Title.displayName;
+))
+ToastTitle.displayName = ToastPrimitives.Title.displayName
const ToastDescription = React.forwardRef<
React.ElementRef,
@@ -108,12 +107,12 @@ const ToastDescription = React.forwardRef<
className={cn("text-sm opacity-90", className)}
{...props}
/>
-));
-ToastDescription.displayName = ToastPrimitives.Description.displayName;
+))
+ToastDescription.displayName = ToastPrimitives.Description.displayName
-type ToastProps = React.ComponentPropsWithoutRef;
+type ToastProps = React.ComponentPropsWithoutRef
-type ToastActionElement = React.ReactElement;
+type ToastActionElement = React.ReactElement
export {
type ToastProps,
@@ -125,4 +124,5 @@ export {
ToastDescription,
ToastClose,
ToastAction,
-};
+}
+
diff --git a/src/core/hooks/useCookie.ts b/src/core/hooks/useCookie.ts
new file mode 100644
index 00000000..df3d9d82
--- /dev/null
+++ b/src/core/hooks/useCookie.ts
@@ -0,0 +1,52 @@
+import Cookies, { type CookieAttributes } from "js-cookie";
+import { useCallback, useState } from "react";
+
+interface CookieHookResult {
+ value: T | undefined;
+ setCookie: (value: T, options?: CookieAttributes) => void;
+ removeCookie: () => void;
+}
+
+function useCookie(
+ cookieName: string,
+ initialValue?: T,
+): CookieHookResult {
+ const [cookieValue, setCookieValue] = useState(() => {
+ 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;
diff --git a/src/core/hooks/useKeyBackupReminder.tsx b/src/core/hooks/useKeyBackupReminder.tsx
new file mode 100644
index 00000000..ee65d161
--- /dev/null
+++ b/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;
+ 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("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: (
+
+
+
+
+ ),
+ },
+ );
+
+ return () => {
+ if (!toastShownRef.current) {
+ dismiss();
+ }
+ };
+ }, [
+ enabled,
+ message,
+ onAccept,
+ reminderInDays,
+ suppressReminder,
+ toast,
+ reminderCookie,
+ ]);
+}
diff --git a/src/core/hooks/useToast.ts b/src/core/hooks/useToast.ts
index f64cf45a..c913d223 100644
--- a/src/core/hooks/useToast.ts
+++ b/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;
-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 };
\ No newline at end of file
diff --git a/src/core/stores/deviceStore.ts b/src/core/stores/deviceStore.ts
index a716a85b..bd407611 100644
--- a/src/core/stores/deviceStore.ts
+++ b/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((set, get) => ({
reboot: false,
deviceName: false,
nodeRemoval: false,
+ pkiBackup: false,
},
pendingSettingsChanges: false,
messageDraft: "",