feat: redirect from login page to profile page
I made a best effort attempt to design the profile page according to the current design specification. Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
This commit is contained in:
André Jaenisch
parent
74f6260746
commit
85596541fd
5 changed files with 142 additions and 61 deletions
39
src/lib/server/ap.js
Normal file
39
src/lib/server/ap.js
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
const loginResponse = {
|
||||
id: '87bcb6de-bb70-11ee-b719-6756da82e80f',
|
||||
username: 'hax0r',
|
||||
acct: 'hax0r',
|
||||
display_name: 'Jane Doe',
|
||||
bot: false,
|
||||
created_at: '2024-01-13T01:23:45.000Z',
|
||||
note: '<p>Hackse for life</p>',
|
||||
url: 'https://example.com/@hax0r',
|
||||
avatar: 'https://avatars.example.com/hax0r',
|
||||
role: { name: 'user' }
|
||||
};
|
||||
|
||||
let username = loginResponse.username;
|
||||
|
||||
export const requests = {
|
||||
get: (url) => {
|
||||
if (url === '/profile') {
|
||||
return Promise.resolve({
|
||||
...loginResponse,
|
||||
username
|
||||
});
|
||||
}
|
||||
|
||||
return Promise.reject(new Error('Unauthorized'));
|
||||
},
|
||||
post: (url, params) => {
|
||||
if (url === '/login') {
|
||||
username = params.account;
|
||||
|
||||
return Promise.resolve({
|
||||
...loginResponse,
|
||||
username: params.account
|
||||
});
|
||||
}
|
||||
|
||||
return Promise.reject(new Error('Invalid Login'));
|
||||
}
|
||||
};
|
||||
|
|
@ -1,5 +1,7 @@
|
|||
import { fail, redirect } from '@sveltejs/kit';
|
||||
|
||||
import { requests } from '$lib/server/ap.js';
|
||||
|
||||
/** @type {import('./$types').Actions} */
|
||||
export const actions = {
|
||||
login: async ({ cookies, request, url }) => {
|
||||
|
|
@ -16,16 +18,18 @@ export const actions = {
|
|||
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'));
|
||||
try {
|
||||
// TODO: Consumre response?
|
||||
await requests.post('/login', { account, passphrase });
|
||||
} catch (exc) {
|
||||
console.error(exc);
|
||||
return fail(400, { account, incorrect: true });
|
||||
}
|
||||
|
||||
throw redirect(303, '/profile');
|
||||
if (url.searchParams.has('redirectTo')) {
|
||||
redirect(303, url.searchParams.get('redirectTo'));
|
||||
}
|
||||
|
||||
// This should be dead code now.
|
||||
return { success: true };
|
||||
redirect(303, '/profile');
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -6,16 +6,8 @@
|
|||
<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>
|
||||
{#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">
|
||||
<p>To use Anvil with your F2 account, fill in your credentials.</p>
|
||||
<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">
|
||||
|
|
@ -37,9 +29,7 @@
|
|||
<div class="text-right">
|
||||
<a href="/" class="btn btn-bg-initial">Reset passphrase</a>
|
||||
</div>
|
||||
<button type="submit" class="w-full btn variant-filled-primary">
|
||||
Log in
|
||||
</button>
|
||||
<button type="submit" class="w-full btn variant-filled-primary"> Log in </button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,19 @@
|
|||
import { requests } from '$lib/server/ap.js';
|
||||
|
||||
/** @type {import('./$types').PageServerLoad} */
|
||||
export function load({ cookies, params }) {
|
||||
// Read login cookie
|
||||
const cookie = cookies.get('ANVIL');
|
||||
const [server, account] = cookie.split('-');
|
||||
export async function load({ params }) {
|
||||
const locale = 'en-US';
|
||||
const profile = await requests.get('/profile');
|
||||
|
||||
return {
|
||||
server: {
|
||||
name: 'F2'
|
||||
},
|
||||
user: {
|
||||
displayname: account,
|
||||
username: 'fr33domlover',
|
||||
...profile,
|
||||
created_at_formatted: new Intl.DateTimeFormat(locale).format(new Date(profile.created_at)),
|
||||
created_with: 'Anvil',
|
||||
instance: 'example.com'
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,43 +1,85 @@
|
|||
<script>
|
||||
import { Avatar } from '@skeletonlabs/skeleton';
|
||||
|
||||
/** @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>
|
||||
<section class="w-full mx-auto flex px-8 pt-8">
|
||||
<!-- Profile header -->
|
||||
<div>
|
||||
<Avatar
|
||||
src={data.user.avatar}
|
||||
width="w-32"
|
||||
rounded="rounded-full"
|
||||
initials={data.user.display_name}
|
||||
/>
|
||||
</div>
|
||||
<!-- Board -->
|
||||
<div class="flex flex-1 flex-col pl-8">
|
||||
<div class="self-end">
|
||||
<span
|
||||
>created <date datetime={data.user.created_at}>{@html data.user.created_at_formatted}</date
|
||||
></span
|
||||
>
|
||||
<button type="button" class="underline">block</button>
|
||||
or
|
||||
<button type="button" class="underline">report</button>
|
||||
</div>
|
||||
<!-- Top Row -->
|
||||
<div class="flex mt-2">
|
||||
<!-- Board -->
|
||||
<div class="flex flex-col flex-1 gap-2">
|
||||
<div class="flex items-end">
|
||||
<h1 class="h1 font-semibold text-4xl leading-tight">
|
||||
<span class="sr-only">Profile for </span>
|
||||
{@html data.user.display_name}
|
||||
</h1>
|
||||
<p class="leading-normal my-1">(she/her)</p>
|
||||
</div>
|
||||
<span class="leading-tight">
|
||||
{@html data.user.username}@{@html data.user.instance}
|
||||
</span>
|
||||
</div>
|
||||
<!-- Interaction Links -->
|
||||
<button type="button" class="btn-icon border rounded-none self-start">⭐</button>
|
||||
</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>
|
||||
</section>
|
||||
<section class="w-full h-full mx-auto flex mt-8 px-8">
|
||||
<!-- Board -->
|
||||
<div class="flex flex-1 flex-col px-4">
|
||||
<div class="space-y-6">
|
||||
<h2 class="h2 font-semibold leading-tight text-base px-4">Projects</h2>
|
||||
<p class="px-4">
|
||||
No projects added yet.
|
||||
<a class="anchor" href="#">Add a project</a>
|
||||
or
|
||||
<a class="anchor" href="#">import a project</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-6">
|
||||
<h2 class="h2">Your repositories</h2>
|
||||
<p class="px-4">
|
||||
You don't have any repositories yet.
|
||||
</p>
|
||||
<!-- History -->
|
||||
<div class="flex flex-1 flex-col px-4">
|
||||
<div class="space-y-6">
|
||||
<h2 class="h2 font-semibold leading-tight text-base">Activities</h2>
|
||||
<ul>
|
||||
<li class="flex flex-col border-l-2 ml-2">
|
||||
<!-- Commit day -->
|
||||
<span>
|
||||
<!-- North Star in surface-900 -->
|
||||
<span class="-ml-2 bg-[#0f161f]">✴️</span>
|
||||
<span class="ml-4">Apr 23, 2023 - account set up</span>
|
||||
</span>
|
||||
<!-- Commits -->
|
||||
<span class="ml-6 mt-8">
|
||||
<span class="border box-decoration-clone px-4 py-2 leading-10">
|
||||
The F2 account @{@html data.user.username}@{@html data.user.instance} was successfully
|
||||
set up within {@html data.user.created_with}
|
||||
</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</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>
|
||||
</section>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue