diff --git a/src/components/input-email.svelte b/src/components/input-email.svelte new file mode 100644 index 0000000..a412661 --- /dev/null +++ b/src/components/input-email.svelte @@ -0,0 +1,33 @@ + + +
+ + +
diff --git a/src/components/input-password.svelte b/src/components/input-password.svelte new file mode 100644 index 0000000..98352d3 --- /dev/null +++ b/src/components/input-password.svelte @@ -0,0 +1,32 @@ + + +
+ + +
diff --git a/src/components/login.svelte b/src/components/login.svelte index b1e9bed..5c171a7 100644 --- a/src/components/login.svelte +++ b/src/components/login.svelte @@ -1,10 +1,46 @@ - - - +
+
+ + +
+ +
+
+
diff --git a/src/components/main.svelte b/src/components/main.svelte index 237d15f..bc64388 100644 --- a/src/components/main.svelte +++ b/src/components/main.svelte @@ -4,6 +4,6 @@ const { children }: { children?: Snippet } = $props(); -
+
{@render children?.()}
diff --git a/src/components/progress-table.svelte b/src/components/progress-table.svelte new file mode 100644 index 0000000..618f2d2 --- /dev/null +++ b/src/components/progress-table.svelte @@ -0,0 +1,100 @@ + + +
+ {#await entriesPromise} +

Loading entries...

+ {:then entries} + {#if entries.length === 0} +

No entries.

+ {:else} + {@render table(entries)} + {/if} + {:catch error} +

+ Something went wrong fetching entries: {error.message} +

+ {/await} +
+ +{#snippet table(entries: Awaited>)} +
+
+
id
+
name
+ + + +
+ {#each entries as entry (entry.id)} +
+
{entry.id}
+ {entry.name} + {@render done(entry.finished)} + + +
+ {/each} +
+{/snippet} + +{#snippet done(finished: boolean)} + {#if finished} + + {:else} + + {/if} +{/snippet} diff --git a/src/index.css b/src/index.css index 5c13b75..1c0ea34 100644 --- a/src/index.css +++ b/src/index.css @@ -1,4 +1,5 @@ @import 'tailwindcss' source('.'); +@source './components/main.svelte'; @theme { --breakout-size: calc((var(--breakpoint-xl) - var(--breakpoint-lg)) / 2); @@ -7,6 +8,11 @@ --content-val: min(100% - calc(var(--spacing) * 8), var(--breakpoint-lg)); } +:root { + --header-height: calc(var(--spacing) * 16); + --main-min-height: calc(100dvh - var(--header-height)); +} + @layer base { * { min-width: 0; diff --git a/src/index.svelte b/src/index.svelte index 84e0bf2..75842cd 100644 --- a/src/index.svelte +++ b/src/index.svelte @@ -3,13 +3,15 @@ import Header from './components/header.svelte'; import Main from './components/main.svelte'; import Login from './components/login.svelte'; + import ProgressTable from './components/progress-table.svelte'; + import { userstate } from './shared.svelte';
- {#if !globalThis.user} + {#if !userstate.isLoggedIn} {:else} - {globalThis.user.name} + {/if}
diff --git a/src/index.ts b/src/index.ts index 6cc2355..3a852b5 100644 --- a/src/index.ts +++ b/src/index.ts @@ -4,7 +4,6 @@ import './index.css'; declare global { var didMount: boolean | undefined; - var user: { name: string } | undefined; } let app: Record | undefined; diff --git a/src/server.ts b/src/server.ts index 5e78869..7b235d5 100644 --- a/src/server.ts +++ b/src/server.ts @@ -6,6 +6,18 @@ import sitemapTxt from './static/sitemap.txt'; import icon from './static/favicon.png' with { type: 'file' }; const favicon = await Bun.file(icon).bytes(); const development = env.NODE_ENV !== 'production'; +import { randomUUIDv7 } from 'bun'; +import ptApi from './server/pt-api'; + +declare global { + var loginTokens: Set; +} + +if (!globalThis.loginTokens) { + globalThis.loginTokens = new Set(); +} + +const authCookie = 'pt-auth'; Bun.serve({ routes: { @@ -20,9 +32,99 @@ Bun.serve({ headers: { 'Content-Type': 'image/png' }, }), '/health': new Response('OK'), + '/api/entries': { + async GET(req) { + if (!isLoggedIn(req)) return unauthorizedResp(); + + const data = await ptApi.query(); + return new Response(JSON.stringify(data), { + headers: { 'Content-Type': 'application/json', 'Cache-Control': 'max-age=30' }, + }); + }, + }, + '/auth/logout': { + async POST() { + return new Response('Logout successful', { headers: logoutHeaders() }); + }, + }, + '/auth/login': { + async POST(req) { + const data = await req.json(); + const email = data.email; + const password = data.password; + + if ( + typeof email !== 'string' || + typeof password !== 'string' || + email.length < 3 || + password.length === 0 + ) { + return new Response('Missing email or password', { status: 400 }); + } + + await new Promise((resolve) => setTimeout(resolve, 100)); + + if (email === env.EMAIL && password === env.PASSWORD) { + let token = randomUUIDv7('base64url'); + while (globalThis.loginTokens.has(token)) { + // generate a new token if it already exists + // this is unlikely to happen, but just in case + token = randomUUIDv7(); + } + + const cookie = new Bun.Cookie({ + name: authCookie, + value: token, + path: '/', + maxAge: 60 * 60 * 24 * 31, + secure: true, + sameSite: 'strict', + }); + + const headers = new Headers({ 'Set-Cookie': cookie.toString() }); + + globalThis.loginTokens.add(token); + + return new Response('Login successful', { headers }); + } + + await new Promise((resolve) => setTimeout(resolve, 900)); + + return new Response('Incorrect email or password', { + status: 400, + }); + }, + }, }, development, // async fetch(req, server) { // return new Response("Not found", { status: 404 }); // }, }); + +function isLoggedIn(req: Request) { + const cookie = new Bun.CookieMap(req.headers.get('cookie') || ''); + const token = cookie.get(authCookie); + + if (!token) { + return false; + } + + return globalThis.loginTokens.has(token); +} + +function logoutHeaders() { + return new Headers({ + 'Set-Cookie': new Bun.Cookie({ + name: authCookie, + path: '/', + maxAge: -1, + secure: true, + sameSite: 'strict', + }).toString(), + }); +} + +function unauthorizedResp() { + return new Response('Unauthorized', { status: 401, headers: logoutHeaders() }); +} diff --git a/src/server/pt-api.ts b/src/server/pt-api.ts new file mode 100644 index 0000000..7e34c4e --- /dev/null +++ b/src/server/pt-api.ts @@ -0,0 +1,118 @@ +import { env } from 'bun'; + +type SelectBookmark = { + id: number; + name: string; + href: string; + finished: boolean; + created_at: number; + updated_at: number; +}; + +const baseUrl = env.API_SERVICE_URL; +const bookmarksUrl = `${baseUrl}/bookmarks`; + +const noBodyHeaders = new Headers({ + Authorization: `Bearer ${env.BEARER_TOKEN}`, +}); + +const bodyHeaders = new Headers({ + 'Content-Type': 'application/json', + Authorization: `Bearer ${env.BEARER_TOKEN}`, +}); + +async function query(): Promise> { + try { + const response = await fetch(bookmarksUrl, { + method: 'GET', + signal: AbortSignal.timeout(50000), + headers: noBodyHeaders, + }); + + if (!response.ok) { + throw new Error('Failed to fetch bookmarks'); + } + + const data = await response.json(); + if (!Array.isArray(data)) { + throw new Error('Invalid bookmarks data'); + } + + return data; + } catch (err) { + console.error(err); + throw new Error('Failed to fetch bookmarks'); + } +} + +async function remove(id: number) { + try { + const response = await fetch(`${bookmarksUrl}/${id}`, { + method: 'DELETE', + signal: AbortSignal.timeout(5000), + headers: noBodyHeaders, + }); + + if (!response.ok) { + throw new Error('Failed to remove bookmark'); + } + } catch (err) { + console.error(err); + throw new Error('Failed to remove bookmark'); + } +} + +async function update(id: number, body: { name: string; href: string }) { + try { + const response = await fetch(`${bookmarksUrl}/${id}`, { + method: 'PUT', + body: JSON.stringify(body), + signal: AbortSignal.timeout(5000), + headers: bodyHeaders, + }); + + if (!response.ok) { + throw new Error('Failed to update bookmark'); + } + } catch (err) { + console.error(err); + throw new Error('Failed to update bookmark'); + } +} + +async function check(id: number, finished: boolean) { + try { + const response = await fetch(`${bookmarksUrl}/${id}/check/${finished}`, { + method: 'PUT', + signal: AbortSignal.timeout(5000), + headers: noBodyHeaders, + }); + if (!response.ok) { + throw new Error('Failed to check bookmark'); + } + } catch (err) { + console.error(err); + throw new Error('Failed to check bookmark'); + } +} + +async function create(body: { name: string; href: string }) { + try { + const response = await fetch(`${bookmarksUrl}`, { + method: 'POST', + body: JSON.stringify(body), + signal: AbortSignal.timeout(5000), + headers: bodyHeaders, + }); + if (!response.ok) { + throw new Error('Failed to create bookmark'); + } + } catch (err) { + if (err) { + console.error(err); + throw new Error('Failed to create bookmark'); + } + } +} + +export default { query, remove, update, check, create }; diff --git a/src/shared.svelte.ts b/src/shared.svelte.ts new file mode 100644 index 0000000..9721734 --- /dev/null +++ b/src/shared.svelte.ts @@ -0,0 +1,28 @@ +function getCookieMap() { + const cookies = document.cookie.split('; '); + const cookieMap = new Map(); + for (let i = 0; i < cookies.length; i++) { + const cookie = cookies[i]; + if (!cookie) continue; + let [key, value] = cookie.split('='); + if (!key || !value) continue; + cookieMap.set(key, value); + } + + return cookieMap; +} + +class UserState { + isLoggedIn = $state(false); + + constructor() { + this.checkIsLoggedIn(); + } + + checkIsLoggedIn() { + const cookieVal = getCookieMap().get('pt-auth'); + this.isLoggedIn = cookieVal !== undefined; + } +} + +export const userstate = new UserState(); diff --git a/src/util.ts b/src/util.ts new file mode 100644 index 0000000..5b32ca1 --- /dev/null +++ b/src/util.ts @@ -0,0 +1,47 @@ +import { userstate } from './shared.svelte'; + +type SelectBookmark = { + id: number; + name: string; + href: string; + finished: boolean; + created_at: number; + updated_at: number; +}; + +export async function fetchEntries(): Promise { + try { + const response = await fetch('/api/entries', { + method: 'GET', + credentials: 'include', + mode: 'same-origin', + }); + + if (!response.ok) { + if (response.status === 401) { + userstate.checkIsLoggedIn(); + } + throw new Error('Network response was not ok'); + } + + const data = await response.json(); + + if (!Array.isArray(data)) { + throw new Error('Invalid data format'); + } + + return data; + } catch (error) { + console.error('Error fetching entries:', error); + } + + return []; +} + +export const formatter = new Intl.DateTimeFormat(undefined, { + year: 'numeric', + month: '2-digit', + day: '2-digit', + hour: '2-digit', + minute: '2-digit', +});