···
const [emailToken, setEmailToken] = useState<string>("");
const [hasDownloadedKey, setHasDownloadedKey] = useState(false);
const [downloadedKeyId, setDownloadedKeyId] = useState<string | null>(null);
165
+
const [hasContinuedPastDownload, setHasContinuedPastDownload] = useState(
const updateStepStatus = (
···
const jsonString = JSON.stringify(keyJson, null, 2);
447
-
const blob = new Blob([jsonString], {
448
-
type: "application/json",
450
-
const url = URL.createObjectURL(blob);
451
-
const a = document.createElement("a");
453
-
a.download = `plc-key-${keyJson.publicKeyDid || "unknown"}.json`;
454
-
a.style.display = "none";
455
-
document.body.appendChild(a);
457
-
document.body.removeChild(a);
458
-
URL.revokeObjectURL(url);
450
+
const filename = `plc-key-${keyJson.publicKeyDid || "unknown"}.json`;
453
+
const dataStr = "data:text/json;charset=utf-8," +
454
+
encodeURIComponent(jsonString);
456
+
// Create download link
457
+
const downloadAnchorNode = document.createElement("a");
458
+
downloadAnchorNode.setAttribute("href", dataStr);
459
+
downloadAnchorNode.setAttribute("download", filename);
461
+
// For Chrome/Firefox compatibility
462
+
downloadAnchorNode.style.display = "none";
463
+
document.body.appendChild(downloadAnchorNode);
465
+
// Trigger download
466
+
downloadAnchorNode.click();
469
+
document.body.removeChild(downloadAnchorNode);
460
-
console.log("Download completed, proceeding to next step...");
471
+
console.log("Download completed, showing continue button...");
setHasDownloadedKey(true);
setDownloadedKeyId(keyJson.publicKeyDid);
464
-
// Automatically proceed to the next step after successful download
466
-
console.log("Auto-proceeding with key:", keyJson.publicKeyDid);
467
-
handleStartPlcUpdate(keyJson.publicKeyDid);
474
+
// Keep step 0 in completed state but don't auto-proceed
console.error("Download failed:", error);
···
{/* Key Download Warning */}
step.status === "completed" &&
848
-
!hasDownloadedKey && (
854
+
!hasContinuedPastDownload && (
<div class="mt-4 space-y-4">
<div class="bg-yellow-50 dark:bg-yellow-900/50 p-4 rounded-lg border border-yellow-200 dark:border-yellow-800">
<div class="flex items-start">
···
<div class="flex items-center justify-between">
898
-
onClick={handleDownload}
899
-
class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-md transition-colors duration-200 flex items-center space-x-2"
904
-
stroke="currentColor"
905
-
viewBox="0 0 24 24"
902
+
<div class="flex items-center space-x-3">
905
+
onClick={handleDownload}
906
+
class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-md transition-colors duration-200 flex items-center space-x-2"
908
-
stroke-linecap="round"
909
-
stroke-linejoin="round"
911
-
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
914
-
<span>Download Key</span>
911
+
stroke="currentColor"
912
+
viewBox="0 0 24 24"
915
+
stroke-linecap="round"
916
+
stroke-linejoin="round"
918
+
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
921
+
<span>Download Key</span>
917
-
<div class="flex items-center text-sm text-red-600 dark:text-red-400">
919
-
class="w-4 h-4 mr-1"
921
-
stroke="currentColor"
922
-
viewBox="0 0 24 24"
925
-
stroke-linecap="round"
926
-
stroke-linejoin="round"
928
-
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
931
-
Download required to proceed
924
+
{hasDownloadedKey && (
929
+
"Continue clicked, proceeding to PLC update",
931
+
setHasContinuedPastDownload(true);
932
+
handleStartPlcUpdate(keyJson.publicKeyDid);
934
+
class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-md transition-colors duration-200 flex items-center space-x-2"
939
+
stroke="currentColor"
940
+
viewBox="0 0 24 24"
943
+
stroke-linecap="round"
944
+
stroke-linejoin="round"
949
+
<span>Continue</span>
954
+
{!hasDownloadedKey && (
955
+
<div class="flex items-center text-sm text-red-600 dark:text-red-400">
957
+
class="w-4 h-4 mr-1"
959
+
stroke="currentColor"
960
+
viewBox="0 0 24 24"
963
+
stroke-linecap="round"
964
+
stroke-linejoin="round"
966
+
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
969
+
Download required to proceed
knotbin.com