small design decisions

This commit is contained in:
Ludwig Lehnert 2025-07-07 14:01:29 +02:00
parent 48f3928c6d
commit 35529895ed
Signed by: ludwig
SSH Key Fingerprint: SHA256:4vshH9GJ8TLO1RS2fY6rDDLnq7+KVvSClCY+uEhYYRA
2 changed files with 71 additions and 51 deletions

View File

@ -1,65 +1,78 @@
<script lang="ts">
import { getKeyVault, loggedIn } from "$lib/auth";
import { decrypt, uint8ToHex } from "$lib/crypto";
import { onMount } from "svelte";
import { getKeyVault, loggedIn } from "$lib/auth";
import { decrypt, uint8ToHex } from "$lib/crypto";
import { onMount } from "svelte";
let entryUrls = $state<any[] | null>(null);
let videoSrc = $state<string | null>(null);
let entryUrls = $state<any[] | null>(null);
let videoSrc = $state<string | null>(null);
onMount(() => {
if (typeof window !== 'object') return;
onMount(() => {
if (typeof window !== "object") return;
if (!loggedIn()) {
window.location.href = '/login';
return;
}
if (!loggedIn()) {
window.location.href = "/login";
return;
}
const vault = getKeyVault();
fetch(`/api/log?pubkey=${encodeURIComponent(uint8ToHex(vault!.pubKey))}`).then(async res => {
if (!res.ok) return;
const vault = getKeyVault();
fetch(
`/api/log?pubkey=${encodeURIComponent(uint8ToHex(vault!.pubKey))}`,
).then(async (res) => {
if (!res.ok) return;
entryUrls = (await res.json() as any[]).sort((a, b) => b.date.localeCompare(a.date));
console.log(entryUrls);
});
entryUrls = ((await res.json()) as any[]).sort((a, b) =>
b.date.localeCompare(a.date),
);
console.log(entryUrls);
});
});
const update = async (date: string) => {
videoSrc = '';
const entry = entryUrls?.find((e) => e.date === date);
if (!entry) return;
const update = async (date: string) => {
videoSrc = "";
const res = await fetch(entry.url);
if (!res.ok) return;
const cipherBuffer = await res.bytes();
console.log(cipherBuffer);
const entry = entryUrls?.find((e) => e.date === date);
if (!entry) return;
const vault = getKeyVault()!;
const videoData = await decrypt(vault.symmKey, new Uint8Array(cipherBuffer));
const res = await fetch(entry.url);
if (!res.ok) return;
const cipherBuffer = await res.bytes();
console.log(cipherBuffer);
const blob = new Blob([videoData], { type: 'video/webm' });
videoSrc = URL.createObjectURL(blob);
};
const vault = getKeyVault()!;
const videoData = await decrypt(
vault.symmKey,
new Uint8Array(cipherBuffer),
);
const blob = new Blob([videoData], { type: "video/webm" });
videoSrc = URL.createObjectURL(blob);
};
</script>
<svelte:head>
<title>Somri Wormhole - Go back in time!</title>
<title>Sonri Wormhole - Go back in time!</title>
</svelte:head>
<div class="rh-screen p-4 flex flex-col items-center">
<div class="shrink-0">
<input type="date"
class="px-4 py-2 rounded-full bg-white min-w-0"
onchange={(e) => update((e.target as any).value)}>
</div>
<div class="absolute z-1 top-0 left-0 right-0 m-auto w-fit bg-white rounded-3xl mt-6">
<input
type="date"
class="px-4 py-2 rounded-full bg-white min-w-0"
onchange={(e) => update((e.target as any).value)}
/>
</div>
<div class="grow w-full pt-3 flex flex-col items-center justify-items-stretch overflow-hidden">
<video src={videoSrc} controls
class="h-full w-full min-w-0 min-h-0 max-w-[70vh] object-cover rounded-[40px] bg-[#303030]">
<track kind="captions" />
</video>
</div>
<div class="rh-screen p-4 flex flex-col items-center">
<div
class="grow w-full flex flex-col items-center justify-items-stretch overflow-hidden"
>
<video
src={videoSrc}
controls
class="h-full w-full min-w-0 min-h-0 max-w-[70vh] object-cover rounded-[40px] bg-[#303030]"
>
<track kind="captions" />
</video>
</div>
</div>
<!-- <button class="fixed bg-[#e14c2f] rounded-xl top-3 right-3 p-1 cursor-pointer">

View File

@ -3,6 +3,8 @@
import { deriveKeyVault, encodeKeyVault } from "$lib/crypto";
import { onMount } from "svelte";
let loading = $state(false);
const onSubmit = async (e: SubmitEvent) => {
e.preventDefault();
@ -10,9 +12,14 @@
const passkey = formData.get('passkey') as string;
if (!passkey) return;
await login(passkey, !!formData.get('persistent'));
window.location.href = '/today';
loading = true;
try {
await login(passkey, !!formData.get('persistent'));
window.location.href = '/today';
return;
} finally {
loading = false;
}
};
onMount(() => {
@ -25,11 +32,11 @@
</script>
<svelte:head>
<title>Somri Login</title>
<title>Sonri Login</title>
</svelte:head>
<div class="absolute left-0 right-0 m-auto p-6 max-w-[400px] font-serif">
<form method="POST" class="p-6 rounded-3xl bg-white flex flex-col gap-2"
<form method="POST" class={`p-6 rounded-3xl bg-white flex flex-col gap-2 ${loading ? 'blur-md' : ''} duration-300`}
onsubmit={onSubmit}
>
<h1 class="text-3xl font-bold p-2">Login</h1>
@ -37,7 +44,7 @@
<input type="password" name="passkey" placeholder="Passkey"
class="text-xl px-3 py-1 rounded-3xl outline-none bg-[#00000010]">
<div class="p-2">
<div class="p-2 pt-0">
<input id="persistent" name="persistent" type="checkbox">
<label for="persistent">Stay signed in</label>
</div>