+ {browserFeatures.length > 0 && ( + <> + This application requires {formatFeatureList(browserFeatures)}. + Please use a Chromium-based browser like Chrome or Edge. + + )} + {needsSecureContext && ( + <> + {browserFeatures.length > 0 && " Additionally, it"} + {browserFeatures.length === 0 && "This application"} requires a{" "} + secure context. + Please connect using HTTPS or localhost. + + )} +
+${decodeKeyData(publicKey)}
+${decodeKeyData(privateKey)}
+=== END OF KEYS ===
+ + + `); + printWindow.document.close(); + printWindow.print(); + closeDialog(); + } + }, [decodeKeyData, privateKey, publicKey, closeDialog]); + + const createDownloadKeyFile = React.useCallback(() => { + if (!privateKey || !publicKey) return; + + const decodedPrivateKey = decodeKeyData(privateKey); + const decodedPublicKey = decodeKeyData(publicKey); + + const formattedContent = [ + "=== MESHTASTIC KEYS ===\n\n", + "Private Key:\n", + decodedPrivateKey, + "\n\nPublic Key:\n", + decodedPublicKey, + "\n\n=== END OF KEYS ===", + ].join(""); + + const blob = new Blob([formattedContent], { type: "text/plain" }); + const url = URL.createObjectURL(blob); + + const link = document.createElement("a"); + link.href = url; + link.download = "meshtastic_keys.txt"; + link.style.display = "none"; + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + closeDialog(); + URL.revokeObjectURL(url); + }, [decodeKeyData, privateKey, publicKey, closeDialog]); + + return ( + + ); +}; diff --git a/src/components/Dialog/PkiRegenerateDialog.tsx b/src/components/Dialog/PkiRegenerateDialog.tsx new file mode 100644 index 00000000..818e7207 --- /dev/null +++ b/src/components/Dialog/PkiRegenerateDialog.tsx @@ -0,0 +1,39 @@ +import { Button } from "@components/UI/Button.tsx"; +import { + Dialog, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, +} from "@components/UI/Dialog.tsx"; + +export interface PkiRegenerateDialogProps { + open: boolean; + onOpenChange: () => void; + onSubmit: () => void; +} + +export const PkiRegenerateDialog = ({ + open, + onOpenChange, + onSubmit, +}: PkiRegenerateDialogProps): JSX.Element => { + return ( + + ); +}; diff --git a/src/components/Dialog/QRDialog.tsx b/src/components/Dialog/QRDialog.tsx index e58455b3..9bd29ed2 100644 --- a/src/components/Dialog/QRDialog.tsx +++ b/src/components/Dialog/QRDialog.tsx @@ -1,4 +1,4 @@ -import { Checkbox } from "@components/UI/Checkbox.js"; +import { Checkbox } from "@components/UI/Checkbox.tsx"; import { Dialog, DialogContent, @@ -6,13 +6,13 @@ import { DialogFooter, DialogHeader, DialogTitle, -} from "@components/UI/Dialog.js"; -import { Input } from "@components/UI/Input.js"; -import { Label } from "@components/UI/Label.js"; -import { Protobuf, Types } from "@meshtastic/js"; +} from "@components/UI/Dialog.tsx"; +import { Input } from "@components/UI/Input.tsx"; +import { Label } from "@components/UI/Label.tsx"; +import { Protobuf, type Types } from "@meshtastic/js"; import { fromByteArray } from "base64-js"; import { ClipboardIcon } from "lucide-react"; -import { useEffect, useState } from "react"; +import { useEffect, useMemo, useState } from "react"; import { QRCode } from "react-qrcode-logo"; export interface QRDialogProps { @@ -32,7 +32,7 @@ export const QRDialog = ({ const [qrCodeUrl, setQrCodeUrl] = useState