register redirects to settings
This commit is contained in:
parent
f68731a9b4
commit
0f83ca30be
2 changed files with 121 additions and 105 deletions
|
|
@ -12,7 +12,7 @@ services:
|
||||||
- ./vite.config.ts:/app/vite.config.ts
|
- ./vite.config.ts:/app/vite.config.ts
|
||||||
environment:
|
environment:
|
||||||
- VITE_API_URL=http://host.docker.internal:8000
|
- VITE_API_URL=http://host.docker.internal:8000
|
||||||
- PUBLIC_TURNSTILE_SITE_KEY=key
|
- PUBLIC_TURNSTILE_SITE_KEY=1x00000000000000000000AA
|
||||||
#- VITE_API_URL=https://fooderapi.domandoman.xyz
|
#- VITE_API_URL=https://fooderapi.domandoman.xyz
|
||||||
extra_hosts:
|
extra_hosts:
|
||||||
- "host.docker.internal:host-gateway"
|
- "host.docker.internal:host-gateway"
|
||||||
|
|
|
||||||
|
|
@ -1,119 +1,135 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { register } from '$lib/api/auth';
|
import { register } from "$lib/api/auth";
|
||||||
import { goto } from '$app/navigation';
|
import { goto } from "$app/navigation";
|
||||||
import { today } from '$lib/utils/date';
|
import { today } from "$lib/utils/date";
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from "svelte";
|
||||||
import { PUBLIC_TURNSTILE_SITE_KEY } from '$env/static/public';
|
import { PUBLIC_TURNSTILE_SITE_KEY } from "$env/static/public";
|
||||||
|
|
||||||
let username = $state('');
|
let username = $state("");
|
||||||
let password = $state('');
|
let password = $state("");
|
||||||
let confirm = $state('');
|
let confirm = $state("");
|
||||||
let error = $state('');
|
let error = $state("");
|
||||||
let loading = $state(false);
|
let loading = $state(false);
|
||||||
let captchaToken = $state('');
|
let captchaToken = $state("");
|
||||||
let captchaContainer = $state<HTMLDivElement | null>(null);
|
let captchaContainer = $state<HTMLDivElement | null>(null);
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
const script = document.createElement('script');
|
const script = document.createElement("script");
|
||||||
script.src = 'https://challenges.cloudflare.com/turnstile/v0/api.js';
|
script.src = "https://challenges.cloudflare.com/turnstile/v0/api.js";
|
||||||
script.async = true;
|
script.async = true;
|
||||||
script.defer = true;
|
script.defer = true;
|
||||||
script.onload = () => {
|
script.onload = () => {
|
||||||
if (captchaContainer) {
|
if (captchaContainer) {
|
||||||
(window as any).turnstile.render(captchaContainer, {
|
(window as any).turnstile.render(captchaContainer, {
|
||||||
sitekey: PUBLIC_TURNSTILE_SITE_KEY,
|
sitekey: PUBLIC_TURNSTILE_SITE_KEY,
|
||||||
callback: (token: string) => { captchaToken = token; },
|
callback: (token: string) => {
|
||||||
'expired-callback': () => { captchaToken = ''; },
|
captchaToken = token;
|
||||||
});
|
},
|
||||||
}
|
"expired-callback": () => {
|
||||||
};
|
captchaToken = "";
|
||||||
document.head.appendChild(script);
|
},
|
||||||
return () => { document.head.removeChild(script); };
|
});
|
||||||
});
|
}
|
||||||
|
};
|
||||||
|
document.head.appendChild(script);
|
||||||
|
return () => {
|
||||||
|
document.head.removeChild(script);
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
async function handleSubmit(e: SubmitEvent) {
|
async function handleSubmit(e: SubmitEvent) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
error = '';
|
error = "";
|
||||||
if (password !== confirm) {
|
if (password !== confirm) {
|
||||||
error = 'Passwords do not match';
|
error = "Passwords do not match";
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (!captchaToken) {
|
if (!captchaToken) {
|
||||||
error = 'Please complete the captcha';
|
error = "Please complete the captcha";
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
loading = true;
|
loading = true;
|
||||||
try {
|
try {
|
||||||
await register(username, password, captchaToken);
|
await register(username, password, captchaToken);
|
||||||
goto(`/diary/${today()}`);
|
goto(`/settings`);
|
||||||
} catch (err: unknown) {
|
} catch (err: unknown) {
|
||||||
const e2 = err as { detail?: { detail?: string } };
|
const e2 = err as { detail?: { detail?: string } };
|
||||||
error = e2.detail?.detail ?? 'Registration failed';
|
error = e2.detail?.detail ?? "Registration failed";
|
||||||
} finally {
|
} finally {
|
||||||
loading = false;
|
loading = false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="min-h-screen flex items-center justify-center px-4">
|
<div class="min-h-screen flex items-center justify-center px-4">
|
||||||
<div class="w-full max-w-sm">
|
<div class="w-full max-w-sm">
|
||||||
<h1 class="text-3xl font-bold text-center mb-8 text-green-500">Fooder</h1>
|
<h1 class="text-3xl font-bold text-center mb-8 text-green-500">Fooder</h1>
|
||||||
|
|
||||||
<form onsubmit={handleSubmit} class="space-y-4">
|
<form onsubmit={handleSubmit} class="space-y-4">
|
||||||
<div>
|
<div>
|
||||||
<label for="username" class="block text-sm font-medium text-zinc-400 mb-1">Username</label>
|
<label
|
||||||
<input
|
for="username"
|
||||||
id="username"
|
class="block text-sm font-medium text-zinc-400 mb-1">Username</label
|
||||||
type="text"
|
>
|
||||||
bind:value={username}
|
<input
|
||||||
autocomplete="username"
|
id="username"
|
||||||
required
|
type="text"
|
||||||
class="w-full bg-zinc-900 border border-zinc-700 rounded-xl px-4 py-3 text-zinc-100 focus:outline-none focus:border-green-500 transition-colors"
|
bind:value={username}
|
||||||
/>
|
autocomplete="username"
|
||||||
</div>
|
required
|
||||||
|
class="w-full bg-zinc-900 border border-zinc-700 rounded-xl px-4 py-3 text-zinc-100 focus:outline-none focus:border-green-500 transition-colors"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label for="password" class="block text-sm font-medium text-zinc-400 mb-1">Password</label>
|
<label
|
||||||
<input
|
for="password"
|
||||||
id="password"
|
class="block text-sm font-medium text-zinc-400 mb-1">Password</label
|
||||||
type="password"
|
>
|
||||||
bind:value={password}
|
<input
|
||||||
autocomplete="new-password"
|
id="password"
|
||||||
required
|
type="password"
|
||||||
class="w-full bg-zinc-900 border border-zinc-700 rounded-xl px-4 py-3 text-zinc-100 focus:outline-none focus:border-green-500 transition-colors"
|
bind:value={password}
|
||||||
/>
|
autocomplete="new-password"
|
||||||
</div>
|
required
|
||||||
|
class="w-full bg-zinc-900 border border-zinc-700 rounded-xl px-4 py-3 text-zinc-100 focus:outline-none focus:border-green-500 transition-colors"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label for="confirm" class="block text-sm font-medium text-zinc-400 mb-1">Confirm password</label>
|
<label
|
||||||
<input
|
for="confirm"
|
||||||
id="confirm"
|
class="block text-sm font-medium text-zinc-400 mb-1"
|
||||||
type="password"
|
>Confirm password</label
|
||||||
bind:value={confirm}
|
>
|
||||||
autocomplete="new-password"
|
<input
|
||||||
required
|
id="confirm"
|
||||||
class="w-full bg-zinc-900 border border-zinc-700 rounded-xl px-4 py-3 text-zinc-100 focus:outline-none focus:border-green-500 transition-colors"
|
type="password"
|
||||||
/>
|
bind:value={confirm}
|
||||||
</div>
|
autocomplete="new-password"
|
||||||
|
required
|
||||||
|
class="w-full bg-zinc-900 border border-zinc-700 rounded-xl px-4 py-3 text-zinc-100 focus:outline-none focus:border-green-500 transition-colors"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div bind:this={captchaContainer}></div>
|
<div bind:this={captchaContainer}></div>
|
||||||
|
|
||||||
{#if error}
|
{#if error}
|
||||||
<p class="text-red-400 text-sm">{error}</p>
|
<p class="text-red-400 text-sm">{error}</p>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
disabled={loading || !captchaToken}
|
disabled={loading || !captchaToken}
|
||||||
class="w-full bg-green-600 hover:bg-green-500 disabled:opacity-50 rounded-xl py-3 font-semibold transition-colors"
|
class="w-full bg-green-600 hover:bg-green-500 disabled:opacity-50 rounded-xl py-3 font-semibold transition-colors"
|
||||||
>
|
>
|
||||||
{loading ? 'Creating account…' : 'Create account'}
|
{loading ? "Creating account…" : "Create account"}
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<p class="text-center mt-6 text-zinc-500 text-sm">
|
<p class="text-center mt-6 text-zinc-500 text-sm">
|
||||||
Already have an account?
|
Already have an account?
|
||||||
<a href="/login" class="text-green-500 hover:text-green-400">Sign in</a>
|
<a href="/login" class="text-green-500 hover:text-green-400">Sign in</a>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue