forge/Anvil
1
0
Fork 0
Code Pull requests Activity

feat: exploring SvelteKit forms with Login

Browse source 
I'm not happy with using Cookies for it, but it served me in
understanding how to handle forms in SvelteKit.

Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
This commit is contained in:
André Jaenisch 2023-12-20 21:46:48 +01:00
parent aea63c0b4b
commit 74f6260746
No known key found for this signature in database
GPG key ID: 5A668E771F1ED854
4 changed files with 111 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
src/routes/account/login/+page.server.js Normal file
View file

@ -0,0 +1,31 @@
import { fail, redirect } from '@sveltejs/kit';
/** @type {import('./$types').Actions} */
export const actions = {
login: async ({ cookies, request, url }) => {
const formData = await request.formData();
const server = formData.get('server');
const account = formData.get('account');
const passphrase = formData.get('passphrase');
if (!account) {
return fail(400, { account, missing: true });
}
if (!passphrase) {
return fail(400, { account, incorrect: true });
}
cookies.set('ANVIL', [server, account].join('-'), { path: '/' });
if (url.searchParams.has('redirectTo')) {
// TODO: Remove the throw when upgrading SvelteKit
throw redirect(303, url.searchParams.get('redirectTo'));
}
throw redirect(303, '/profile');
// This should be dead code now.
return { success: true };
}
};

31
src/routes/account/login/+page.svelte
View file

@ -1,11 +1,26 @@
<script>
/** @type {import('./$types').ActionData} */
export let form;
</script>
<div class="w-full max-w-md h-full mx-auto flex justify-center items-center py-10">
<div class="space-y-10">
<h1 class="h1 font-bold">Log in</h1>
<p>To use Anvil with your F2 account, fill in your credentials.</p>
<div class="space-y-4">
{#if form?.success}
<p>
Welcome back! Please <a href="/profile">move to your profile</a>.
</p>
{:else}
<p>
To use Anvil with your F2 account, fill in your credentials.
</p>
{/if}
<form class="space-y-4" method="POST" action="?/login">
{#if form?.missing}<p class="error">The account field is required.</p>{/if}
{#if form?.incorrect}<p class="error">Account or password wrong.</p>{/if}
<label class="label">
<span>F2 server</span>
<select class="select" title="F2 server" value="1">
<select class="select" title="F2 server" name="server">
<option value="1">fig.fr33domlover.site</option>
<option value="2">grape.fr33domlover.site</option>
<option value="3">walnut.fr33domlover.site</option>
@ -13,16 +28,18 @@
</label>
<label class="label">
<span>Account name</span>
<input class="input" title="Account name" type="text" placeholder="alice" />
<input class="input" name="account" type="text" value={form?.account ?? ''} />
</label>
<label class="label">
<span>Passphrase</span>
<input class="input" title="Passphrase" type="password" placeholder="psswrd" />
<input class="input" name="passphrase" type="password" placeholder="password" />
</label>
<div class="text-right">
<a href="/" class="btn btn-bg-initial">Reset passphrase</a>
</div>
<a href="/" class="w-full btn variant-filled-primary">Log in</a>
</div>
<button type="submit" class="w-full btn variant-filled-primary">
Log in
</button>
</form>
</div>
</div>

13
src/routes/profile/+page.server.js Normal file
View file

@ -0,0 +1,13 @@
/** @type {import('./$types').PageServerLoad} */
export function load({ cookies, params }) {
// Read login cookie
const cookie = cookies.get('ANVIL');
const [server, account] = cookie.split('-');
return {
user: {
displayname: account,
username: 'fr33domlover',
}
};
}

43
src/routes/profile/+page.svelte Normal file
View file

@ -0,0 +1,43 @@
<script>
/** @type {import('./$types').PageData} */
export let data;
</script>
<div class="w-full max-w-md h-full mx-auto flex flex-col justify-center items-center py-10">
<div class="space-y-10">
<h1 class="h1 font-bold">Profile</h1>
<div class="px-4">
<div>{@html data.user.displayname}</div>
</div>
</div>
<div class="space-y-6">
<h2 class="h2">Your projects</h2>
<p class="px-4">
You don't have any projects yet.
</p>
</div>
<div class="space-y-6">
<h2 class="h2">Your repositories</h2>
<p class="px-4">
You don't have any repositories yet.
</p>
</div>
<div class="space-y-6">
<h2 class="h2">Your news</h2>
<p class="px-4">
Nothing here yet.
</p>
</div>
<div class="space-y-6">
<h2 class="h2">Your notifications</h2>
<p class="px-4">
You don't have any notifications yet.
</p>
</div>
<div class="space-y-6">
<h2 class="h2">Your settings</h2>
<p class="px-4">
Adjust Anvil to your liking.
</p>
</div>
</div>