Make risk acknowledgement modal even better

Author: hhvrc

src/lib/components/input/TextInput.svelte

@@ -4,7 +4,7 @@
   import { GetValResColor, type ValidationResult } from '$lib/types/ValidationResult';
   import { cn } from '$lib/utils/shadcn.js';
   import type { Snippet } from 'svelte';
-  import type { FocusEventHandler, FullAutoFill } from 'svelte/elements';
+  import type { ClipboardEventHandler, FocusEventHandler, FullAutoFill } from 'svelte/elements';
 
   interface Props {
     type?: 'text' | 'email' | 'password' | 'search' | 'url';
@@ -17,6 +17,7 @@
     after?: Snippet;
     popup?: Snippet;
     onblur?: FocusEventHandler<HTMLInputElement> | null;
+    onpaste?: ClipboardEventHandler<HTMLInputElement> | null;
   }
 
   const id = $props.id();
@@ -32,6 +33,7 @@
     after,
     popup,
     onblur,
+    onpaste
   }: Props = $props();
 </script>
 
@@ -51,6 +53,7 @@
       {autocomplete}
       bind:value
       {onblur}
+      {onpaste}
       aria-invalid={validationResult ? !validationResult.valid : undefined}
       aria-describedby={validationResult?.message ? validationId : undefined}
     />
@@ -69,7 +72,7 @@
   {#if validationResult?.message}
     <p
       id={validationId}
-      class={cn('text-xs !mt-0 h-4 truncate', `text-${GetValResColor(validationResult)}`)}
+      class={cn('text-xs mt-0! h-4 truncate', `text-${GetValResColor(validationResult)}`)}
       role="status"
       aria-atomic="true"
       aria-live="polite"

src/routes/flashtool/FirmwareFlasher.svelte

@@ -2,9 +2,9 @@
   import { Microchip, TriangleAlert } from '@lucide/svelte';
   import { DownloadAndVerifyBoardBinary } from '$lib/api/firmwareCDN';
   import { Button } from '$lib/components/ui/button';
-  import * as Dialog from '$lib/components/ui/dialog';
   import { Progress } from '$lib/components/ui/progress';
   import FlashManager from './FlashManager';
+  import RiskAcknowledgementModal from './RiskAcknowledgementModal.svelte';
 
   interface Props {
     version: string;
@@ -84,38 +84,8 @@
   }
 </script>
 
-<!-- Risk acknowledgement modal -->
-<Dialog.Root open={riskAcknowledgeStatus === 'shown'}>
-  <Dialog.Content>
-    <Dialog.Header>
-      <Dialog.Title>⚠️ Unstable Firmware Warning</Dialog.Title>
-      <Dialog.Description>
-        You are about to install <strong class="text-red-500">experimental, non-stable firmware</strong>.
-        <br /><br />
-        This firmware is <strong class="text-red-500">not intended for general use</strong> and may contain
-        serious bugs, regressions, or incomplete features.
-        <br /><br />
-        <strong class="text-red-500">No support is provided for issues caused by non-stable firmware.</strong>
-      </Dialog.Description>
-    </Dialog.Header>
 
-    <div class="flex justify-end gap-2">
-      <Button
-        variant="secondary"
-        onclick={() => (riskAcknowledgeStatus = 'none')}
-      >
-        Cancel
-      </Button>
-
-      <Button
-        variant="destructive"
-        onclick={() => (riskAcknowledgeStatus = 'accepted')}
-      >
-        I UNDERSTAND AND ACCEPT ALL RISKS
-      </Button>
-    </div>
-  </Dialog.Content>
-</Dialog.Root>
+<RiskAcknowledgementModal open={showNonStableWarning && riskAcknowledgeStatus !== 'accepted'} onAccept={() => riskAcknowledgeStatus = 'accepted'} onCancel={() => riskAcknowledgeStatus = 'none'} />
 
 <div class="flex flex-col items-stretch justify-start gap-4">
   <!-- Flash button -->

src/routes/flashtool/RiskAcknowledgementModal.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+  import * as Dialog from '$lib/components/ui/dialog';
+  import { Button } from '$lib/components/ui/button';
+  import TextInput from '$lib/components/input/TextInput.svelte';
+
+  interface Props {
+    open: boolean;
+    onAccept: () => void;
+    onCancel?: () => void;
+  }
+
+  let { open, onAccept, onCancel }: Props = $props();
+
+  const REQUIRED_TEXT = 'I UNDERSTAND THIS CAN BREAK MY DEVICE';
+  const PASTE_REPLACEMENT = 'I DID NOT READ THE WARNING, I JUST COPY-PASTED';
+
+  let acknowledgeText = $state('');
+  let acknowledgeChecked = $state(false);
+
+  let canAccept = $derived(
+    acknowledgeChecked &&
+    acknowledgeText === REQUIRED_TEXT
+  );
+
+  // Reset + start countdown when dialog opens
+  $effect(() => {
+    if (!open) return;
+
+    acknowledgeText = '';
+    acknowledgeChecked = false;
+  });
+
+  function handlePaste(e: ClipboardEvent) {
+    e.preventDefault();
+    acknowledgeText = PASTE_REPLACEMENT;
+  }
+</script>
+
+<Dialog.Root {open}>
+  <Dialog.Content>
+    <Dialog.Header>
+      <Dialog.Title>⚠️ UNSTABLE FIRMWARE</Dialog.Title>
+      <Dialog.Description class="space-y-3">
+        <p>
+          You are about to flash <strong class="text-red-500">experimental firmware</strong>
+          that is <strong class="text-red-500">known to be unstable</strong>.
+        </p>
+
+        <p>
+          This may permanently brick your device, require manual recovery,
+          or render it unusable.
+        </p>
+
+        <p class="text-red-500 font-semibold">
+          We will NOT provide support for issues caused by this firmware.
+        </p>
+
+        <p>
+          To proceed, type the following phrase <strong>exactly</strong>:
+        </p>
+
+        <code class="block rounded bg-muted p-2 text-sm font-mono">
+          {REQUIRED_TEXT}
+        </code>
+      </Dialog.Description>
+    </Dialog.Header>
+
+    <TextInput
+      bind:value={acknowledgeText}
+      onpaste={handlePaste}
+    />
+
+    <label class="flex items-center gap-2 text-sm">
+      <input type="checkbox" bind:checked={acknowledgeChecked} />
+      I understand this is entirely my responsibility
+    </label>
+
+    <div class="flex justify-end gap-2">
+      <Button variant="secondary" onclick={() => onCancel?.()}>
+        Abort
+      </Button>
+
+      <Button
+        variant="destructive"
+        disabled={!canAccept}
+        onclick={onAccept}
+      >
+        I ACCEPT FULL RESPONSIBILITY
+      </Button>
+    </div>
+  </Dialog.Content>
+</Dialog.Root>