A focused Docker Compose management web application.
feat: user initial password setup
+83
-2
+1
-1
packages/panel/src/routes/(authenticated)/admin/UserList.svelte
+1
-1
packages/panel/src/routes/(authenticated)/admin/UserList.svelte
+2
-1
packages/panel/src/routes/login/+page.svelte
+2
-1
packages/panel/src/routes/login/+page.svelte
+63
packages/panel/src/routes/reset/+page.svelte
+63
packages/panel/src/routes/reset/+page.svelte
···
1
+
<script lang="ts">
2
+
import LoaderButton from "$lib/component/LoaderButton.svelte";
3
+
import Logo from "$lib/component/Crane.svelte";
4
+
import { goto } from "$app/navigation";
5
+
import { api } from "$lib";
6
+
7
+
let { data } = $props();
8
+
9
+
let loading = $state(false);
10
+
let password = $state("");
11
+
12
+
async function set_password(e: SubmitEvent) {
13
+
e.preventDefault();
14
+
loading = true;
15
+
try {
16
+
await api.client.POST("/api/auth/reset/{token}", {
17
+
params: { path: { token: data.token } },
18
+
body: { password },
19
+
});
20
+
21
+
console.log({ username: data.username, password });
22
+
23
+
await api.login({ username: data.username, password });
24
+
await goto("/");
25
+
} finally {
26
+
loading = false;
27
+
}
28
+
}
29
+
</script>
30
+
31
+
<main class="full flex center">
32
+
<div class="island flexc center gap-20">
33
+
<div class="flexc center">
34
+
<h2 class="sub">
35
+
<Logo />
36
+
Luminary
37
+
</h2>
38
+
<h1>Reset Password</h1>
39
+
</div>
40
+
<p>
41
+
Hi {data.username}! Please enter a new password to access your account.
42
+
</p>
43
+
<form class="flexc gap-20" onsubmit={set_password}>
44
+
<div>
45
+
<label for="password">Password</label>
46
+
<input required minlength="1" id="password" type="password" bind:value={password} />
47
+
</div>
48
+
<div>
49
+
<label for="confirm-password">Confirm Password</label>
50
+
<input required pattern={password} minlength="1" id="confirm-password" type="password" />
51
+
</div>
52
+
<LoaderButton {loading}>
53
+
{#snippet children(loading)}
54
+
{#if loading}
55
+
Logging in...
56
+
{:else}
57
+
Log In
58
+
{/if}
59
+
{/snippet}
60
+
</LoaderButton>
61
+
</form>
62
+
</div>
63
+
</main>
+17
packages/panel/src/routes/reset/+page.ts
+17
packages/panel/src/routes/reset/+page.ts
···
1
+
import { error } from "@sveltejs/kit";
2
+
import type { PageLoad } from "./$types";
3
+
import { api } from "$lib";
4
+
5
+
export const load: PageLoad = async ({ url }) => {
6
+
const token = url.searchParams.get("token");
7
+
if (!token) error(400, "Token is required");
8
+
9
+
const response = await api.client
10
+
.GET("/api/auth/reset/{token}", { params: { path: { token } } })
11
+
.catch(() => error(401, "Invalid token"));
12
+
13
+
return {
14
+
username: response.data!,
15
+
token,
16
+
};
17
+
};