97 lines
2.1 KiB
Svelte
97 lines
2.1 KiB
Svelte
<script lang="ts">
|
|
import { ApiError, api } from "#lib/api/client.js";
|
|
import { describe, session } from "#lib/session.svelte.js";
|
|
import { goto } from "$app/navigation";
|
|
|
|
let password = $state("");
|
|
let busy = $state(false);
|
|
let problem = $state("");
|
|
|
|
const submit = async (event: SubmitEvent) => {
|
|
event.preventDefault();
|
|
busy = true;
|
|
problem = "";
|
|
try {
|
|
await api.post("/session", { password });
|
|
session.signedIn = true;
|
|
await goto("/");
|
|
} catch (error) {
|
|
problem =
|
|
error instanceof ApiError && error.status === 401
|
|
? "That is not the admin token. Use the ADMIN_TOKEN value from the server's .env file."
|
|
: describe(error);
|
|
} finally {
|
|
busy = false;
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>Sign in · lodge</title>
|
|
</svelte:head>
|
|
|
|
<main>
|
|
<div aria-hidden="true" class="core lith lith-1"></div>
|
|
<form onsubmit={submit}>
|
|
<h1>lodge</h1>
|
|
<p class="lede">
|
|
Agent notes for every repository, at every depth of their history.
|
|
</p>
|
|
<label class="label" for="password">Admin token</label>
|
|
<input
|
|
autocomplete="current-password"
|
|
class="field mono"
|
|
id="password"
|
|
required
|
|
type="password"
|
|
bind:value={password}
|
|
>
|
|
{#if problem}
|
|
<p class="problem" role="alert">{problem}</p>
|
|
{/if}
|
|
<button class="act solid" disabled={busy} type="submit">
|
|
{busy ? "Opening…" : "Open the log"}
|
|
</button>
|
|
</form>
|
|
</main>
|
|
|
|
<style>
|
|
main {
|
|
display: grid;
|
|
grid-template-columns: clamp(3rem, 12vw, 9rem) minmax(0, 26rem);
|
|
gap: clamp(1.5rem, 5vw, 4rem);
|
|
min-height: 100dvh;
|
|
padding-right: 1.5rem;
|
|
}
|
|
|
|
.core {
|
|
--l: var(--green);
|
|
border-right: 1px solid var(--rule);
|
|
}
|
|
|
|
form {
|
|
display: grid;
|
|
gap: 0.5rem;
|
|
align-self: center;
|
|
justify-items: start;
|
|
}
|
|
|
|
h1 {
|
|
font-size: clamp(3.5rem, 10vw, 6rem);
|
|
font-weight: 800;
|
|
font-stretch: 62%;
|
|
line-height: 0.9;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.lede {
|
|
max-width: 22rem;
|
|
margin-bottom: 2.5rem;
|
|
color: var(--ink-2);
|
|
}
|
|
|
|
.act {
|
|
margin-top: 1.5rem;
|
|
}
|
|
</style>
|