small design decisions
This commit is contained in:
parent
48f3928c6d
commit
35529895ed
@ -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">
|
||||
|
@ -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>
|
||||
|
Loading…
x
Reference in New Issue
Block a user