From 42d76277837a9832e8174a46266231947739d27a Mon Sep 17 00:00:00 2001 From: Bradley Shellnut Date: Wed, 1 Jan 2025 21:51:11 -0800 Subject: [PATCH] Fixing the login page --- src/hooks.server.ts | 2 +- src/lib/dtos/signin.dto.ts | 12 ++++ src/lib/server/api/dtos/signin.dto.ts | 12 ++++ src/lib/server/api/users/users.controller.ts | 1 + src/routes/(app)/+layout.svelte | 4 +- src/routes/(app)/+page.server.ts | 4 +- src/routes/(app)/+page.svelte | 2 +- src/routes/(auth)/login/+page.server.ts | 13 ++-- src/routes/(auth)/login/+page.svelte | 63 ++++++++------------ 9 files changed, 63 insertions(+), 50 deletions(-) create mode 100644 src/lib/dtos/signin.dto.ts create mode 100644 src/lib/server/api/dtos/signin.dto.ts diff --git a/src/hooks.server.ts b/src/hooks.server.ts index c5ffa07..221892c 100644 --- a/src/hooks.server.ts +++ b/src/hooks.server.ts @@ -22,7 +22,7 @@ const apiClient: Handle = async ({ event, resolve }) => { /* ----------------------------- Auth functions ----------------------------- */ async function getAuthedUser() { const { data } = await api.users.me.$get().then(parseApiResponse); - return { user: data?.user, session: data?.session }; + return data?.user; } async function getAuthedUserOrThrow() { diff --git a/src/lib/dtos/signin.dto.ts b/src/lib/dtos/signin.dto.ts new file mode 100644 index 0000000..09cd835 --- /dev/null +++ b/src/lib/dtos/signin.dto.ts @@ -0,0 +1,12 @@ +import {z} from "zod"; + +export const signinDto = z.object({ + username: z + .string() + .trim() + .min(3, { message: 'Must be at least 3 characters' }) + .max(50, { message: 'Must be less than 50 characters' }), + password: z.string({ required_error: 'Password is required' }).trim(), +}); + +export type signinDto = z.infer; \ No newline at end of file diff --git a/src/lib/server/api/dtos/signin.dto.ts b/src/lib/server/api/dtos/signin.dto.ts new file mode 100644 index 0000000..09cd835 --- /dev/null +++ b/src/lib/server/api/dtos/signin.dto.ts @@ -0,0 +1,12 @@ +import {z} from "zod"; + +export const signinDto = z.object({ + username: z + .string() + .trim() + .min(3, { message: 'Must be at least 3 characters' }) + .max(50, { message: 'Must be less than 50 characters' }), + password: z.string({ required_error: 'Password is required' }).trim(), +}); + +export type signinDto = z.infer; \ No newline at end of file diff --git a/src/lib/server/api/users/users.controller.ts b/src/lib/server/api/users/users.controller.ts index 926ff0a..cf47d8e 100644 --- a/src/lib/server/api/users/users.controller.ts +++ b/src/lib/server/api/users/users.controller.ts @@ -25,6 +25,7 @@ export class UsersController extends Controller { .get('/me', async (c) => { const session = c.var.session; const user = session ? await this.usersRepository.findOneByIdOrThrow(session.userId) : null; + c.var.logger.info(`Get user: ${JSON.stringify(user)}`); return c.json(user); }) .patch('/me', authState('session'), zValidator('form', updateUserDto), async (c) => { diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte index 2787e23..81cda1d 100644 --- a/src/routes/(app)/+layout.svelte +++ b/src/routes/(app)/+layout.svelte @@ -11,6 +11,7 @@ import HouseIcon from 'lucide-svelte/icons/house'; import { page } from '$app/state'; import { enhance } from '$app/forms'; + import ThemeDropdown from '@/components/theme-dropdown.svelte'; const { children, data } = $props(); @@ -86,10 +87,11 @@ /> + {#if data.authedUser} {@render userDropdown()} {:else} - + {/if} diff --git a/src/routes/(app)/+page.server.ts b/src/routes/(app)/+page.server.ts index b0477fd..3c23591 100644 --- a/src/routes/(app)/+page.server.ts +++ b/src/routes/(app)/+page.server.ts @@ -2,14 +2,12 @@ import { StatusCodes } from "$lib/constants/status-codes"; import { redirect } from "@sveltejs/kit"; export const load = async ({ locals }) => { - const user = await locals.getAuthedUser(); - return { user: user }; }; export const actions = { logout: async ({ locals }) => { await locals.api.iam.logout.$post() - redirect(StatusCodes.SEE_OTHER, '/register') + redirect(StatusCodes.SEE_OTHER, '/') } } diff --git a/src/routes/(app)/+page.svelte b/src/routes/(app)/+page.svelte index 47868e3..e432beb 100644 --- a/src/routes/(app)/+page.svelte +++ b/src/routes/(app)/+page.svelte @@ -2,5 +2,5 @@ let { data } = $props(); -

Welcome {data?.user?.email}

+

Welcome {data?.authedUser?.username}

Visit kit.svelte.dev to read the documentation

diff --git a/src/routes/(auth)/login/+page.server.ts b/src/routes/(auth)/login/+page.server.ts index 896ac9f..6be8bbb 100644 --- a/src/routes/(auth)/login/+page.server.ts +++ b/src/routes/(auth)/login/+page.server.ts @@ -1,23 +1,22 @@ -import { signinUsernameDto } from '$lib/dtos/signin-username.dto'; import { StatusCodes } from '$lib/utils/status-codes'; import { type Actions, fail } from '@sveltejs/kit'; import { redirect } from 'sveltekit-flash-message/server'; import { zod } from 'sveltekit-superforms/adapters'; import { setError, superValidate } from 'sveltekit-superforms/server'; import type { PageServerLoad } from './$types'; +import { signinDto } from '@/server/api/dtos/signin.dto'; export const load: PageServerLoad = async (event) => { - const { locals } = event; + const { locals, parent } = event; + const { authedUser } = await parent(); - const { user } = await locals.getAuthedUser(); - - if (user) { + if (authedUser) { console.log('user already signed in'); const message = { type: 'success', message: 'You are already signed in' } as const; throw redirect('/', message, event); // redirect(302, '/', message, event) } - const form = await superValidate(event, zod(signinUsernameDto)); + const form = await superValidate(event, zod(signinDto)); return { form, @@ -35,7 +34,7 @@ export const actions: Actions = { throw redirect('/', message, event); } - const form = await superValidate(event, zod(signinUsernameDto)); + const form = await superValidate(event, zod(signinDto)); const { error } = await locals.api.login.$post({ json: form.data }).then(locals.parseApiResponse); console.log('Login error', error); diff --git a/src/routes/(auth)/login/+page.svelte b/src/routes/(auth)/login/+page.svelte index 9c813ff..9376ec5 100644 --- a/src/routes/(auth)/login/+page.svelte +++ b/src/routes/(auth)/login/+page.svelte @@ -1,40 +1,25 @@ - Bored Game | Login + Acme | Login
@@ -44,8 +29,8 @@ {@render usernamePasswordForm()} - or sign in with - {@render oAuthButtons()} + +

By clicking continue, you agree to our Terms of Use @@ -57,18 +42,22 @@

{#snippet usernamePasswordForm()} -
- - - Username - + + + + {#snippet children({ props })} + Username / Email + + {/snippet} - - - Password - + + + {#snippet children({ props })} + Password + + {/snippet}