mirror of
https://github.com/bartvdbraak/omnidash.git
synced 2025-04-27 23:41:21 +00:00
feat: auth2 flow skeleton
This commit is contained in:
parent
b4b2eb9055
commit
d383fcc949
20 changed files with 126 additions and 509 deletions
4
apps/web/src/app.d.ts
vendored
4
apps/web/src/app.d.ts
vendored
|
|
@ -4,7 +4,9 @@ import PocketBase from 'pocketbase';
|
|||
declare global {
|
||||
namespace App {
|
||||
interface Locals {
|
||||
pocketBase: PocketBase;
|
||||
pb: PocketBase;
|
||||
id: string;
|
||||
email: string;
|
||||
}
|
||||
// interface Error {}
|
||||
// interface PageData {}
|
||||
|
|
|
|||
|
|
@ -1,22 +1,42 @@
|
|||
import { type Handle } from '@sveltejs/kit';
|
||||
import { redirect, type Handle } from '@sveltejs/kit';
|
||||
import PocketBase from 'pocketbase';
|
||||
import { pb } from '$lib/pocketbase';
|
||||
import { PUBLIC_CLIENT_PB } from '$env/static/public';
|
||||
import { building } from '$app/environment';
|
||||
import { SERVER_PB } from '$env/static/private';
|
||||
|
||||
/** @type {import('@sveltejs/kit').Handle} */
|
||||
export const handle: Handle = async ({ event, resolve }) => {
|
||||
event.locals.pocketBase = new PocketBase(PUBLIC_CLIENT_PB);
|
||||
event.locals.id = '';
|
||||
event.locals.email = '';
|
||||
event.locals.pb = new PocketBase(SERVER_PB);
|
||||
|
||||
pb.set(event.locals.pocketBase);
|
||||
const isAuth: boolean = event.url.pathname === '/auth';
|
||||
if (isAuth || building) {
|
||||
event.cookies.set('pb_auth', '', { path: '/' });
|
||||
return await resolve(event);
|
||||
}
|
||||
|
||||
event.locals.pocketBase.authStore.loadFromCookie(event.request.headers.get('cookie') ?? '');
|
||||
const pb_auth = event.request.headers.get('cookie') ?? '';
|
||||
event.locals.pb.authStore.loadFromCookie(pb_auth);
|
||||
|
||||
if (!event.locals.pb.authStore.isValid) {
|
||||
console.log('Session expired');
|
||||
throw redirect(303, '/auth');
|
||||
}
|
||||
try {
|
||||
const auth = await event.locals.pb
|
||||
.collection('users')
|
||||
.authRefresh<{ id: string; email: string }>();
|
||||
event.locals.id = auth.record.id;
|
||||
event.locals.email = auth.record.email;
|
||||
} catch (_) {
|
||||
throw redirect(303, '/auth');
|
||||
}
|
||||
|
||||
if (!event.locals.id) {
|
||||
throw redirect(303, '/auth');
|
||||
}
|
||||
|
||||
const response = await resolve(event);
|
||||
|
||||
response.headers.set(
|
||||
'set-cookie',
|
||||
event.locals.pocketBase.authStore.exportToCookie({ secure: false })
|
||||
);
|
||||
|
||||
const cookie = event.locals.pb.authStore.exportToCookie({ sameSite: 'lax' });
|
||||
response.headers.append('set-cookie', cookie);
|
||||
return response;
|
||||
};
|
||||
};
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
{'{}'}
|
||||
</Button>
|
||||
</Popover.Trigger>
|
||||
<Popover.Content class="w-auto">
|
||||
<SuperDebug label="$layout data" status={false} {data} />
|
||||
<Popover.Content class="max-h-full max-w-auth overflow-x-scroll overflow-y-scroll text-xs">
|
||||
<SuperDebug status={false} {data} />
|
||||
</Popover.Content>
|
||||
</Popover.Root>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<script>
|
||||
export let colours = {
|
||||
topleft: '#FF6C22',
|
||||
topright: '#FF9209',
|
||||
bottomleft: '#2B3499',
|
||||
bottomright: '#FFD099'
|
||||
topLeft: '#FF6C22',
|
||||
topRight: '#FF9209',
|
||||
bottomLeft: '#FFD099',
|
||||
bottomRight: '#2B3499',
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -17,8 +17,8 @@
|
|||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<rect width="7" height="9" x="3" y="3" rx="1" stroke={colours.topleft} />
|
||||
<rect width="7" height="5" x="14" y="3" rx="1" stroke={colours.topright} />
|
||||
<rect width="7" height="9" x="14" y="12" rx="1" stroke={colours.bottomleft} />
|
||||
<rect width="7" height="5" x="3" y="16" rx="1" stroke={colours.bottomright} />
|
||||
<rect width="7" height="9" x="3" y="3" rx="1" stroke={colours.topLeft} />
|
||||
<rect width="7" height="5" x="14" y="3" rx="1" stroke={colours.topRight} />
|
||||
<rect width="7" height="5" x="3" y="16" rx="1" stroke={colours.bottomLeft} />
|
||||
<rect width="7" height="9" x="14" y="12" rx="1" stroke={colours.bottomRight} />
|
||||
</svg>
|
||||
|
|
|
|||
|
|
@ -13,15 +13,15 @@
|
|||
<DropdownMenu.Trigger asChild let:builder>
|
||||
<Button variant="ghost" builders={[builder]} class="relative h-8 w-8 rounded-full">
|
||||
<Avatar.Root class="h-9 w-9">
|
||||
<Avatar.Image src={user?.avatarUrl} alt={user?.name} />
|
||||
<Avatar.Fallback>{user?.initials}</Avatar.Fallback>
|
||||
<Avatar.Image src={user?.avatarUrl} alt={user?.name} />
|
||||
<Avatar.Fallback>{user?.initials}</Avatar.Fallback>
|
||||
</Avatar.Root>
|
||||
</Button>
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Content class="w-56" align="end">
|
||||
<DropdownMenu.Label class="font-normal">
|
||||
<div class="flex flex-col space-y-1">
|
||||
<p class="text-sm font-medium leading-none">{user?.name}</p>
|
||||
<p class="text-sm font-medium leading-none">{user?.name || user?.username}</p>
|
||||
<p class="text-xs leading-none text-muted-foreground">{user?.email}</p>
|
||||
</div>
|
||||
</DropdownMenu.Label>
|
||||
|
|
|
|||
|
|
@ -7,11 +7,6 @@ interface NavConfig {
|
|||
|
||||
export const navConfig: NavConfig = {
|
||||
mainNav: [
|
||||
{
|
||||
title: 'Home',
|
||||
href: '/',
|
||||
always: true
|
||||
},
|
||||
{
|
||||
title: 'Dashboard',
|
||||
href: '/dashboard',
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import { redirect } from '@sveltejs/kit';
|
|||
import type { LayoutServerLoad } from './$types';
|
||||
|
||||
export const load = (async ({ locals }) => {
|
||||
if (locals.pocketBase.authStore.isValid) {
|
||||
if (locals.pb.authStore.isValid) {
|
||||
throw redirect(303, '/');
|
||||
}
|
||||
|
||||
|
|
|
|||
14
apps/web/src/routes/(auth)/auth/+page.server.ts
Normal file
14
apps/web/src/routes/(auth)/auth/+page.server.ts
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
import { redirect } from '@sveltejs/kit';
|
||||
import type { Actions } from './$types';
|
||||
|
||||
export const actions = {
|
||||
default: async ({ request, cookies }) => {
|
||||
const form = await request.formData();
|
||||
const token = form.get('token');
|
||||
if (!token || typeof token !== 'string') {
|
||||
throw redirect(303, '/auth');
|
||||
}
|
||||
cookies.set('pb_auth', JSON.stringify({ token: token }), { path: '/' });
|
||||
throw redirect(303, '/');
|
||||
}
|
||||
} satisfies Actions;
|
||||
29
apps/web/src/routes/(auth)/auth/+page.svelte
Normal file
29
apps/web/src/routes/(auth)/auth/+page.svelte
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<script lang="ts">
|
||||
import { PUBLIC_CLIENT_PB } from '$env/static/public';
|
||||
import PocketBase from 'pocketbase';
|
||||
|
||||
const pb = new PocketBase(PUBLIC_CLIENT_PB);
|
||||
|
||||
let form: HTMLFormElement;
|
||||
async function login() {
|
||||
try {
|
||||
await pb.collection('users').authWithOAuth2({ provider: 'microsoft' });
|
||||
const input = document.createElement('input');
|
||||
input.type = 'hidden';
|
||||
input.name = 'token';
|
||||
input.value = pb.authStore.token;
|
||||
form.appendChild(input);
|
||||
form.submit();
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<form method="post" bind:this={form} />
|
||||
<button
|
||||
on:click={login}
|
||||
class="border rounded p-2 mt-10 bg-gray-800 text-white hover:bg-gray-700"
|
||||
>
|
||||
Login using Microsoft
|
||||
</button>
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
import { error, redirect } from '@sveltejs/kit';
|
||||
import type { Actions } from './$types';
|
||||
|
||||
export const actions: Actions = {
|
||||
login: async ({ request, locals }: { request: Request; locals: App.Locals }) => {
|
||||
const body = Object.fromEntries(await request.formData());
|
||||
|
||||
try {
|
||||
const email = body.email.toString();
|
||||
const password = body.password.toString();
|
||||
await locals.pocketBase.collection('users').authWithPassword(email, password);
|
||||
if (!locals.pocketBase?.authStore?.model?.verified) {
|
||||
locals.pocketBase.authStore.clear();
|
||||
return {
|
||||
notVerified: true
|
||||
};
|
||||
}
|
||||
} catch (err) {
|
||||
console.log('Error: ', err);
|
||||
throw error(500, 'Something went wrong logging in');
|
||||
}
|
||||
|
||||
throw redirect(303, '/');
|
||||
},
|
||||
// TODO: Implement Oauth2 Auth
|
||||
oauth2: async ({ request, locals }: { request: Request; locals: App.Locals }) => {
|
||||
const body = Object.fromEntries(await request.formData());
|
||||
const provider = body.provider.toString();
|
||||
await locals.pocketBase.collection('users').authWithOAuth2({ provider: provider });
|
||||
}
|
||||
};
|
||||
|
|
@ -1,168 +0,0 @@
|
|||
<script lang="ts">
|
||||
import { enhance } from '$app/forms';
|
||||
import { Icons } from '$lib/components/site/icons';
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import { Input } from '$lib/components/ui/input';
|
||||
import { Label } from '$lib/components/ui/label';
|
||||
import * as Alert from '$lib/components/ui/alert';
|
||||
import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
|
||||
import { cn } from '$lib/utils';
|
||||
import { ChevronDown } from 'radix-icons-svelte';
|
||||
import Separator from '$lib/components/ui/separator/separator.svelte';
|
||||
import type { PageData } from './$types';
|
||||
import { PUBLIC_CLIENT_PB } from '$env/static/public';
|
||||
|
||||
let isLoading = false;
|
||||
export let form;
|
||||
export let data: PageData;
|
||||
const { providers } = data;
|
||||
const providersWithIcons = providers.map((provider) => ({
|
||||
...provider,
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
icon: (Icons as { [key: string]: any })[provider.name] || undefined
|
||||
}));
|
||||
let currentProvider = providersWithIcons[0];
|
||||
</script>
|
||||
|
||||
<div class="lg:p-8">
|
||||
<div class="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
|
||||
<div class="flex flex-col space-y-2 text-center">
|
||||
<h1 class="text-2xl font-semibold tracking-tight">Log into your account</h1>
|
||||
<p class="text-muted-foreground text-sm">
|
||||
Enter your email and password below to log into your account
|
||||
</p>
|
||||
</div>
|
||||
<div class={cn('grid gap-6')} {...$$restProps}>
|
||||
<form
|
||||
method="POST"
|
||||
action="?/login"
|
||||
use:enhance={() => {
|
||||
isLoading = true;
|
||||
}}
|
||||
>
|
||||
<div class="grid gap-2">
|
||||
<div class="grid gap-1">
|
||||
<Label class="sr-only" for="email">Email</Label>
|
||||
<Input
|
||||
id="email"
|
||||
name="email"
|
||||
placeholder="name@example.com"
|
||||
type="email"
|
||||
autocapitalize="none"
|
||||
autocomplete="email"
|
||||
autocorrect="off"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
<div class="grid gap-1">
|
||||
<Label class="sr-only" for="password">Password</Label>
|
||||
<Input
|
||||
id="password"
|
||||
name="password"
|
||||
type="password"
|
||||
disabled={isLoading}
|
||||
placeholder="Password"
|
||||
/>
|
||||
</div>
|
||||
<Button type="submit" disabled={isLoading}>
|
||||
{#if isLoading}
|
||||
<Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
|
||||
{/if}
|
||||
Sign In
|
||||
</Button>
|
||||
</div>
|
||||
{#if form?.notVerified}
|
||||
<Alert.Root>
|
||||
<Alert.Title></Alert.Title>
|
||||
<Alert.Description>You must verify your email before you can login.</Alert.Description>
|
||||
</Alert.Root>
|
||||
{/if}
|
||||
</form>
|
||||
<form
|
||||
method="POST"
|
||||
action="?/oauth2"
|
||||
use:enhance={() => {
|
||||
isLoading = true;
|
||||
}}
|
||||
>
|
||||
{#if providers.length}
|
||||
<div class="relative">
|
||||
<div class="absolute inset-0 flex items-center">
|
||||
<span class="w-full border-t" />
|
||||
</div>
|
||||
<div class="relative flex justify-center text-xs uppercase">
|
||||
<span class="bg-background text-muted-foreground px-2 py-6"> Or continue with </span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="focus-visible:ring-ring border-input hover:bg-accent hover:text-accent-foreground flex items-center justify-between whitespace-nowrap rounded-md border bg-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50"
|
||||
>
|
||||
<input type="hidden" name="provider" bind:value={currentProvider.name} />
|
||||
<div class="flex w-full items-center justify-center space-x-2">
|
||||
<Button
|
||||
type="submit"
|
||||
name={currentProvider.name}
|
||||
variant="ghost"
|
||||
class="w-full"
|
||||
disabled={isLoading}
|
||||
>
|
||||
{#if isLoading}
|
||||
<Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
|
||||
{:else if currentProvider.icon === undefined}
|
||||
<img
|
||||
src={`${PUBLIC_CLIENT_PB}/_/images/oauth2/${currentProvider.name}.svg`}
|
||||
alt={currentProvider.name}
|
||||
class="mr-2 h-4 w-4"
|
||||
/>
|
||||
{:else}
|
||||
<svelte:component this={currentProvider.icon} class="mr-2 h-4 w-4" />
|
||||
{/if}
|
||||
{currentProvider.displayName}
|
||||
</Button>
|
||||
</div>
|
||||
{#if providers.length > 1}
|
||||
<div class="flex items-center space-x-2">
|
||||
<Separator orientation="vertical" class="bg-secondary h-[20px]" />
|
||||
<div class="flex items-center space-x-2">
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger asChild let:builder>
|
||||
<Button builders={[builder]} variant="ghost" class="px-2 shadow-none">
|
||||
<ChevronDown class="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Content class="" align="center">
|
||||
<DropdownMenu.Label class="sr-only">Login Providers</DropdownMenu.Label>
|
||||
{#each providersWithIcons as provider}
|
||||
{#if provider.name !== currentProvider.name}
|
||||
<DropdownMenu.Item
|
||||
class="flex justify-center"
|
||||
on:click={() => (currentProvider = provider)}
|
||||
>
|
||||
{#if provider.icon === undefined}
|
||||
<img
|
||||
src={`${PUBLIC_CLIENT_PB}/_/images/oauth2/${provider.name}.svg`}
|
||||
alt={provider.name}
|
||||
class="mr-2 h-4 w-4"
|
||||
/>
|
||||
{:else}
|
||||
<svelte:component this={provider.icon} class="mr-2 h-4 w-4" />
|
||||
{/if}
|
||||
{provider.displayName}
|
||||
</DropdownMenu.Item>
|
||||
{/if}
|
||||
{/each}
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Root>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</form>
|
||||
</div>
|
||||
<p class="text-muted-foreground px-8 text-center text-sm">
|
||||
Don't have an account? <a class="text-primary underline" href="/register">Sign up.</a> <br />
|
||||
Forgot password? <a class="text-primary underline" href="/reset-password">Reset password.</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -2,5 +2,5 @@ import { redirect } from '@sveltejs/kit';
|
|||
|
||||
export const GET = ({ locals }: { locals: App.Locals }) => {
|
||||
locals.pocketBase.authStore.clear();
|
||||
throw redirect(303, '/login');
|
||||
throw redirect(303, '/');
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,69 +0,0 @@
|
|||
import { redirect } from '@sveltejs/kit';
|
||||
|
||||
export const actions = {
|
||||
default: async ({ request, locals }: { request: Request; locals: App.Locals }) => {
|
||||
if (locals.pocketBase.authStore.isValid) {
|
||||
return;
|
||||
}
|
||||
|
||||
const formData = await request.formData();
|
||||
|
||||
const name = formData.get('name');
|
||||
const email = formData.get('email');
|
||||
const password = formData.get('password');
|
||||
|
||||
try {
|
||||
if (typeof name !== 'string') {
|
||||
throw new Error('Name must be a string');
|
||||
}
|
||||
|
||||
if (name.length === 0) {
|
||||
throw new Error('Please enter a valid name');
|
||||
}
|
||||
|
||||
if (typeof email !== 'string') {
|
||||
throw new Error('Email must be a string');
|
||||
}
|
||||
|
||||
if (email.length < 5) {
|
||||
throw new Error('Please enter a valid e-mail address');
|
||||
}
|
||||
|
||||
if (typeof password !== 'string') {
|
||||
throw new Error('Password must be a string');
|
||||
}
|
||||
|
||||
if (password.length < 8) {
|
||||
throw new Error('Password must be at least 8 characters in length');
|
||||
}
|
||||
|
||||
if (password !== formData.get('passwordConfirm')) {
|
||||
throw new Error('Passwords do not match');
|
||||
}
|
||||
|
||||
await locals.pocketBase.collection('users').create({
|
||||
email,
|
||||
password,
|
||||
name,
|
||||
passwordConfirm: password
|
||||
});
|
||||
|
||||
await locals.pocketBase.collection('users').authWithPassword(email, password);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
|
||||
if (!(error instanceof Error)) {
|
||||
return {
|
||||
name,
|
||||
email,
|
||||
password,
|
||||
error: 'Unknown error occured when signing up user'
|
||||
};
|
||||
}
|
||||
|
||||
return { error: error.message, name, email, password };
|
||||
}
|
||||
|
||||
throw redirect(303, '/');
|
||||
}
|
||||
};
|
||||
|
|
@ -1,95 +0,0 @@
|
|||
<script lang="ts">
|
||||
import { enhance } from '$app/forms';
|
||||
import { Icons } from '$lib/components/site/icons';
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import { Input } from '$lib/components/ui/input';
|
||||
import { Label } from '$lib/components/ui/label';
|
||||
import { cn } from '$lib/utils';
|
||||
|
||||
let isLoading = false;
|
||||
</script>
|
||||
|
||||
<div class="lg:p-8">
|
||||
<div class="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
|
||||
<div class="flex flex-col space-y-2 text-center">
|
||||
<h1 class="text-2xl font-semibold tracking-tight">Create your account</h1>
|
||||
<p class="text-sm text-muted-foreground">Enter your details below to create a new account</p>
|
||||
</div>
|
||||
<div class={cn('grid gap-6')} {...$$restProps}>
|
||||
<form
|
||||
method="POST"
|
||||
use:enhance={() => {
|
||||
isLoading = true;
|
||||
}}
|
||||
>
|
||||
<div class="grid gap-2">
|
||||
<div class="grid gap-1">
|
||||
<Label class="sr-only" for="email">Name</Label>
|
||||
<Input id="name" name="name" placeholder="Name" type="name" disabled={isLoading} />
|
||||
</div>
|
||||
<div class="grid gap-1">
|
||||
<Label class="sr-only" for="email">Email</Label>
|
||||
<Input
|
||||
id="email"
|
||||
name="email"
|
||||
placeholder="name@example.com"
|
||||
type="email"
|
||||
autocapitalize="none"
|
||||
autocomplete="email"
|
||||
autocorrect="off"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
<div class="grid gap-1">
|
||||
<Label class="sr-only" for="password">Password</Label>
|
||||
<Input
|
||||
id="password"
|
||||
name="password"
|
||||
type="password"
|
||||
disabled={isLoading}
|
||||
placeholder="Password"
|
||||
/>
|
||||
</div>
|
||||
<div class="grid gap-1">
|
||||
<Label class="sr-only" for="password">Confirm Password</Label>
|
||||
<Input
|
||||
id="password"
|
||||
name="passwordConfirm"
|
||||
type="password"
|
||||
disabled={isLoading}
|
||||
placeholder="Confirm password"
|
||||
/>
|
||||
</div>
|
||||
<Button type="submit" disabled={isLoading} on:click={() => (isLoading = true)}>
|
||||
{#if isLoading}
|
||||
<Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
|
||||
{/if}
|
||||
Sign In
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
<div class="relative">
|
||||
<div class="absolute inset-0 flex items-center">
|
||||
<span class="w-full border-t" />
|
||||
</div>
|
||||
<div class="relative flex justify-center text-xs uppercase">
|
||||
<span class="bg-background px-2 text-muted-foreground"> Or continue with </span>
|
||||
</div>
|
||||
</div>
|
||||
<Button variant="outline" type="button" disabled={isLoading}>
|
||||
{#if isLoading}
|
||||
<Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
|
||||
{:else}
|
||||
<Icons.microsoft class="mr-2 h-4 w-4" />
|
||||
{/if}
|
||||
{' '}
|
||||
Microsoft
|
||||
</Button>
|
||||
</div>
|
||||
<p class="px-8 text-center text-sm text-muted-foreground">
|
||||
Or <a class="text-primary underline" href="/login">sign in</a> if you already have an account.<br
|
||||
/>
|
||||
Forgot password? <a class="text-primary underline" href="/reset-password">Reset password.</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
import { error } from '@sveltejs/kit';
|
||||
|
||||
export const actions = {
|
||||
default: async ({ request, locals }: { request: Request; locals: App.Locals }) => {
|
||||
const body = Object.fromEntries(await request.formData());
|
||||
|
||||
try {
|
||||
const email = body.email.toString();
|
||||
await locals.pocketBase.collection('users').requestPasswordReset(email);
|
||||
return {
|
||||
success: true
|
||||
};
|
||||
} catch (err) {
|
||||
console.log('Error: ', err);
|
||||
throw error(500, 'Something went wrong');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
<script lang="ts">
|
||||
import { enhance } from '$app/forms';
|
||||
import { Icons } from '$lib/components/site/icons';
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import { Input } from '$lib/components/ui/input';
|
||||
import { Label } from '$lib/components/ui/label';
|
||||
import { cn } from '$lib/utils';
|
||||
import { CheckCircled } from 'radix-icons-svelte';
|
||||
import * as Alert from '$lib/components/ui/alert';
|
||||
|
||||
let isLoading = false;
|
||||
export let form;
|
||||
</script>
|
||||
|
||||
<div class="lg:p-8">
|
||||
<div class="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
|
||||
<div class="flex flex-col space-y-2 text-center">
|
||||
<h1 class="text-2xl font-semibold tracking-tight">Reset password</h1>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
We'll send you an email with a link to reset your password.
|
||||
</p>
|
||||
</div>
|
||||
<div class={cn('grid gap-6')} {...$$restProps}>
|
||||
<form
|
||||
method="POST"
|
||||
use:enhance={() => {
|
||||
isLoading = true;
|
||||
return async ({ update }) => {
|
||||
isLoading = false;
|
||||
update();
|
||||
};
|
||||
}}
|
||||
>
|
||||
<div class="grid gap-2">
|
||||
<div class="grid gap-1">
|
||||
<Label class="sr-only" for="email">Email</Label>
|
||||
<Input
|
||||
id="email"
|
||||
name="email"
|
||||
placeholder="name@example.com"
|
||||
type="email"
|
||||
autocapitalize="none"
|
||||
autocomplete="email"
|
||||
autocorrect="off"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
<Button type="submit" disabled={isLoading}>
|
||||
{#if isLoading}
|
||||
<Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
|
||||
{/if}
|
||||
Sign In
|
||||
</Button>
|
||||
</div>
|
||||
{#if form?.success}
|
||||
<Alert.Root variant="default" class="mt-2">
|
||||
<CheckCircled class="h-4 w-4" />
|
||||
<Alert.Description>An email has been sent to reset your password.</Alert.Description>
|
||||
</Alert.Root>
|
||||
{/if}
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import { redirect } from '@sveltejs/kit';
|
||||
|
||||
export const load = async ({ locals }: { locals: App.Locals }) => {
|
||||
if (!locals.pocketBase.authStore.isValid) {
|
||||
if (!locals.pb.authStore.isValid) {
|
||||
throw redirect(303, '/register');
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,12 +2,6 @@
|
|||
import { z } from 'zod';
|
||||
|
||||
export const accountFormSchema = z.object({
|
||||
name: z
|
||||
.string({
|
||||
required_error: 'Required.'
|
||||
})
|
||||
.min(2, 'Name must be at least 2 characters.')
|
||||
.max(30, 'Name must not be longer than 30 characters')
|
||||
});
|
||||
|
||||
export type AccountFormSchema = typeof accountFormSchema;
|
||||
|
|
@ -31,15 +25,5 @@
|
|||
form={data}
|
||||
debug={dev ? true : false}
|
||||
>
|
||||
<Form.Item>
|
||||
<Form.Field name="name" {config}>
|
||||
<Form.Label>Name</Form.Label>
|
||||
<Form.Input placeholder={user?.name} />
|
||||
<Form.Description>
|
||||
This is the name that will be displayed on your profile and in emails.
|
||||
</Form.Description>
|
||||
<Form.Validation />
|
||||
</Form.Field>
|
||||
</Form.Item>
|
||||
<Form.Button>Update account</Form.Button>
|
||||
</Form.Root>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,12 @@
|
|||
<script lang="ts" context="module">
|
||||
import { z } from 'zod';
|
||||
export const profileFormSchema = z.object({
|
||||
name: z
|
||||
.string({
|
||||
required_error: 'Required.'
|
||||
})
|
||||
.min(2, 'Name must be at least 2 characters.')
|
||||
.max(30, 'Name must not be longer than 30 characters'),
|
||||
username: z
|
||||
.string()
|
||||
.min(2, 'Username must be at least 2 characters.')
|
||||
|
|
@ -30,8 +36,18 @@
|
|||
class="space-y-8"
|
||||
debug={dev ? true : false}
|
||||
>
|
||||
<div class="grid grid-cols-[1fr,16rem] gap-4">
|
||||
<div class="grid grid-cols-[1fr,12rem] gap-4">
|
||||
<div>
|
||||
<Form.Item>
|
||||
<Form.Field name="name" {config}>
|
||||
<Form.Label>Name</Form.Label>
|
||||
<Form.Input placeholder={user?.name} />
|
||||
<Form.Description>
|
||||
This is the name that will be displayed on your profile and in emails.
|
||||
</Form.Description>
|
||||
<Form.Validation />
|
||||
</Form.Field>
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Form.Field {config} name="username">
|
||||
<Form.Label>Username</Form.Label>
|
||||
|
|
|
|||
|
|
@ -1,22 +1,24 @@
|
|||
import type { LayoutServerLoad } from './$types';
|
||||
|
||||
const fullNameToInitials = (fullName: string) =>
|
||||
fullName
|
||||
.split(' ')
|
||||
.map((word) => word[0].toUpperCase())
|
||||
.slice(0, 2)
|
||||
.join('');
|
||||
const fullNameToInitials = (fullName: string) => (
|
||||
fullName
|
||||
.split(' ')
|
||||
.filter(word => word)
|
||||
.map(word => word[0].toUpperCase())
|
||||
.slice(0, 2)
|
||||
.join('')
|
||||
);
|
||||
|
||||
export const load: LayoutServerLoad = async ({ locals }: { locals: App.Locals }) => {
|
||||
const user = locals.pocketBase.authStore.model;
|
||||
const user = locals.pb.authStore.model;
|
||||
if (user) {
|
||||
user.avatarUrl = locals.pocketBase.getFileUrl(user, user.avatar);
|
||||
user.initials = fullNameToInitials(user.name);
|
||||
user.avatarUrl = locals.pb.getFileUrl(user, user.avatar);
|
||||
user.initials = fullNameToInitials(user.name || user.username);
|
||||
}
|
||||
|
||||
return {
|
||||
authenticated: locals.pocketBase.authStore.isValid,
|
||||
authenticated: locals.pb.authStore.isValid,
|
||||
user,
|
||||
providers: (await locals.pocketBase.collection('users').listAuthMethods()).authProviders
|
||||
authMethods: (await locals.pb.collection('users').listAuthMethods())
|
||||
};
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue