zero-knowledge file sharing
new options style
+47
-22
+6
-3
web/src/App.tsx
+6
-3
web/src/App.tsx
···
4
4
return (
5
5
<div class="text-text flex min-h-screen flex-col items-center justify-center px-4 font-sans">
6
6
<div class="mt-4 w-full max-w-md">{props.children}</div>
7
-
<p class="text-muted mt-auto pt-8 pb-4 text-[10px]">
8
-
end-to-end encrypted
9
-
</p>
7
+
<a
8
+
class="text-muted hover:text-accent-hover mt-auto p-4 text-[10px]"
9
+
href="https://github.com/notjuliet/drop"
10
+
>
11
+
source code
12
+
</a>
10
13
</div>
11
14
);
12
15
}
+41
-19
web/src/pages/Upload.tsx
+41
-19
web/src/pages/Upload.tsx
···
11
11
const [error, setError] = createSignal("");
12
12
const [resultUrl, setResultUrl] = createSignal("");
13
13
const [dragging, setDragging] = createSignal(false);
14
+
const [burn, setBurn] = createSignal(false);
14
15
const [maxFileSize, setMaxFileSize] = createSignal(0);
15
16
16
17
let fileInput!: HTMLInputElement;
17
18
let linkInput!: HTMLInputElement;
18
19
let expiryInput!: HTMLInputElement;
19
-
let burnInput!: HTMLInputElement;
20
20
let copyBtn!: HTMLButtonElement;
21
21
let activeXhr: XMLHttpRequest | null = null;
22
22
···
66
66
});
67
67
68
68
const statusText = () => {
69
-
if (encrypting()) return "Encrypting\u2026";
70
-
if (uploading()) return "Uploading\u2026";
69
+
if (encrypting()) return "encrypting\u2026";
70
+
if (uploading()) return "uploading\u2026";
71
71
return "";
72
72
};
73
73
···
146
146
const formData = new FormData();
147
147
formData.append("file", new Blob([ciphertext]));
148
148
formData.append("expiresIn", expiryInput.value.trim());
149
-
formData.append("burnAfterRead", burnInput.checked ? "true" : "false");
149
+
formData.append("burnAfterRead", burn() ? "true" : "false");
150
150
151
151
setEncrypting(false);
152
152
···
236
236
stroke-linecap="round"
237
237
transform={`rotate(-90 ${CENTER} ${CENTER})`}
238
238
style={{
239
-
transition: dragging() ? "none" : `all ${animDuration()}ms ease-out`,
239
+
transition: dragging()
240
+
? "none"
241
+
: `all ${animDuration()}ms ease-out`,
240
242
}}
241
243
/>
242
244
{/* Upload liquid fill */}
···
302
304
handleUpload();
303
305
}}
304
306
>
305
-
Upload
307
+
upload
306
308
</button>
307
309
<button
308
310
class="text-muted hover:text-text mt-1 border-none bg-transparent p-0 text-[10px]"
···
320
322
class="text-muted font-medium"
321
323
style={{ "font-size": "clamp(0.625rem, 2vw, 0.875rem)" }}
322
324
>
323
-
Drop a file, or
325
+
drop a file, or
324
326
</p>
325
327
<button
326
328
class="bg-accent hover:bg-accent-hover rounded-md border-none px-4 py-1.5 font-medium text-white transition-colors"
···
330
332
fileInput.click();
331
333
}}
332
334
>
333
-
Browse
335
+
browse
334
336
</button>
335
337
<Show when={maxFileSize()}>
336
338
<span class="text-muted text-[10px]">
···
351
353
/>
352
354
</div>
353
355
354
-
<div class="mt-4 flex items-center gap-4">
355
-
<input
356
-
ref={expiryInput!}
357
-
type="text"
358
-
value="24h"
359
-
placeholder="e.g. 30m, 24h, 7d"
360
-
class="bg-surface border-border text-text focus:border-accent w-24 rounded-md border px-2.5 py-1.5 text-xs transition-colors outline-none"
361
-
/>
362
-
<label class="text-muted flex items-center gap-1.5 text-xs select-none">
363
-
<input type="checkbox" ref={burnInput!} class="accent-accent" />
364
-
Burn after read
356
+
<div class="mx-auto mt-6 flex w-fit flex-col gap-4 text-sm">
357
+
<label class="text-muted flex items-center gap-3 select-none">
358
+
lifetime
359
+
<input
360
+
ref={expiryInput!}
361
+
type="text"
362
+
value="24h"
363
+
placeholder="e.g. 30m, 24h, 7d"
364
+
class="bg-surface border-border text-accent focus:border-accent w-24 rounded-md border px-2 py-1 text-center font-medium transition-colors outline-none"
365
+
/>
366
+
</label>
367
+
<label
368
+
class="text-muted flex items-center gap-3 select-none"
369
+
onClick={() => setBurn((b) => !b)}
370
+
>
371
+
burn after read
372
+
<div
373
+
class={`flex size-5 items-center justify-center rounded border transition-colors ${burn() ? "bg-accent border-accent" : "bg-surface border-border"}`}
374
+
>
375
+
<Show when={burn()}>
376
+
<svg class="text-bg h-3.5 w-3.5" viewBox="0 0 12 12" fill="none">
377
+
<path
378
+
d="M2 6l3 3 5-5"
379
+
stroke="currentColor"
380
+
stroke-width="1.5"
381
+
stroke-linecap="round"
382
+
stroke-linejoin="round"
383
+
/>
384
+
</svg>
385
+
</Show>
386
+
</div>
365
387
</label>
366
388
</div>
367
389