| <script lang="ts"> |
| import { Shield, ShieldOff } from '@lucide/svelte'; |
| import * as AlertDialog from '$lib/components/ui/alert-dialog'; |
| import { Checkbox } from '$lib/components/ui/checkbox'; |
| import Label from '$lib/components/ui/label/label.svelte'; |
| |
| let { |
| includeSensitiveData = $bindable(false), |
| onCancel, |
| onConfirm, |
| open = $bindable() |
| }: { |
| open: boolean; |
| includeSensitiveData: boolean; |
| onCancel: () => void; |
| onConfirm: () => void; |
| } = $props(); |
| |
| function handleOpenChange(newOpen: boolean) { |
| if (!newOpen) { |
| onCancel(); |
| } |
| } |
| </script> |
|
|
| <AlertDialog.Root onOpenChange={handleOpenChange} {open}> |
| <AlertDialog.Content> |
| <AlertDialog.Header> |
| <AlertDialog.Title class="flex items-center gap-2"> |
| {#if includeSensitiveData} |
| <ShieldOff class="h-5 w-5 text-destructive" /> |
| {:else} |
| <Shield class="h-5 w-5 text-destructive" /> |
| {/if} |
| Export Settings |
| </AlertDialog.Title> |
|
|
| <AlertDialog.Description> |
| {#if includeSensitiveData} |
| <p class="text-amber-500"> |
| Warning: This export will include sensitive data such as API keys and MCP server custom |
| headers (e.g., authorization tokens). Do not share this file with anyone you don't |
| trust. |
| </p> |
| {:else} |
| <p> |
| Sensitive data (API keys, MCP server custom headers) will not be included in the export |
| to protect your credentials. |
| </p> |
| {/if} |
| </AlertDialog.Description> |
| </AlertDialog.Header> |
|
|
| <div class="flex items-center gap-2 py-2"> |
| <Checkbox bind:checked={includeSensitiveData} id="include-sensitive" /> |
|
|
| <Label |
| class="text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" |
| for="include-sensitive" |
| > |
| {#if includeSensitiveData} |
| <span class="text-destructive">Include sensitive data (not recommended)</span> |
| {:else} |
| <span>Include sensitive data</span> |
| {/if} |
| </Label> |
| </div> |
|
|
| <AlertDialog.Footer> |
| <AlertDialog.Cancel onclick={onCancel}>Cancel</AlertDialog.Cancel> |
|
|
| <AlertDialog.Action |
| class="bg-destructive text-white hover:bg-destructive/80" |
| onclick={onConfirm} |
| > |
| {#if includeSensitiveData} |
| Export Anyway |
| {:else} |
| Export Without Sensitive Data |
| {/if} |
| </AlertDialog.Action> |
| </AlertDialog.Footer> |
| </AlertDialog.Content> |
| </AlertDialog.Root> |
|
|
