From 1f3813ea787209d94c92e48c24305615e3094b06 Mon Sep 17 00:00:00 2001 From: Pablu23 Date: Wed, 8 Oct 2025 12:31:16 +0200 Subject: [PATCH] WIP: Working homepage with Login and logout --- src/app.d.ts | 4 - src/hooks.server.ts | 62 ++++---- src/routes/+layout.svelte | 11 +- src/routes/+page.server.ts | 44 +----- src/routes/+page.svelte | 198 +++++++++++++++++------- src/routes/lobby/create/+page.server.ts | 6 +- 6 files changed, 191 insertions(+), 134 deletions(-) diff --git a/src/app.d.ts b/src/app.d.ts index 3e56cf1..21047bb 100644 --- a/src/app.d.ts +++ b/src/app.d.ts @@ -46,7 +46,3 @@ export type WebSocketMessage = { type: string; [key: string]: any; } - -export { - -}; diff --git a/src/hooks.server.ts b/src/hooks.server.ts index d0b949e..cf8f287 100644 --- a/src/hooks.server.ts +++ b/src/hooks.server.ts @@ -1,40 +1,40 @@ import { db } from '$lib/server/db'; -import { sessionsTable, usersTable } from '$lib/server/db/schema'; +import { sessionsTable } from '$lib/server/db/schema'; import { eq } from 'drizzle-orm'; import { redirect, type Handle } from '@sveltejs/kit'; export const handle: Handle = async ({ event, resolve }) => { - const sessionId = event.cookies.get('session_id'); - let user = { - isLoggedIn: false, - email: "", - username: "" - }; + const sessionId = event.cookies.get('session_id'); + let user = { + isLoggedIn: false, + email: "", + username: "" + }; - if (sessionId) { - const session = await db.query.sessionsTable.findFirst({ - with: { - user: true - }, - where: eq(sessionsTable.id, sessionId) - }); + if (sessionId) { + const session = await db.query.sessionsTable.findFirst({ + with: { + user: true + }, + where: eq(sessionsTable.id, sessionId) + }); - if (session && session.user && session.user.email) { - user = { - isLoggedIn: true, - email: session.user.email, - username: session.user.username || "Unknown username" - }; - } - } - - if (event.url.pathname.startsWith("/private") && !user.isLoggedIn) { - redirect(307, "/error"); - } else if (event.url.pathname.startsWith("/api") && !user.isLoggedIn) { - return new Response(null, { status: 401 }); + if (session && session.user && session.user.email) { + user = { + isLoggedIn: true, + email: session.user.email, + username: session.user.username || "Unknown username" + }; } + } - event.locals.user = user; - const response = await resolve(event); - return response; -} \ No newline at end of file + if (event.url.pathname.startsWith("/private") && !user.isLoggedIn) { + redirect(307, "/error"); + } else if (event.url.pathname.startsWith("/api") && !user.isLoggedIn) { + return new Response(null, { status: 401 }); + } + + event.locals.user = user; + const response = await resolve(event); + return response; +} diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index b544af2..744d3ef 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,6 +1,6 @@ @@ -9,3 +9,12 @@ {@render children?.()} + + + diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts index ff44921..aa0f5f3 100644 --- a/src/routes/+page.server.ts +++ b/src/routes/+page.server.ts @@ -1,46 +1,8 @@ -import { db } from "$lib/server/db"; -import { sessionsTable, usersTable } from "$lib/server/db/schema"; -import { eq } from "drizzle-orm"; -import { redirect, type Actions } from "@sveltejs/kit"; import type { PageServerLoad } from "./$types"; export const load: PageServerLoad = async ({ locals }) => { - let allUsers = null; - if (locals.user.isLoggedIn) { - allUsers = await db.select().from(usersTable); - } - - return { - user: locals.user, - users: allUsers ?? [] - } + return { + user: locals.user, + } }; - -export const actions = { - logout: async ({ locals, cookies }) => { - const sessionId = cookies.get('session_id'); - - if (!sessionId) { - redirect(307, "/error") - } - - await db.delete(sessionsTable).where(eq(sessionsTable.id, sessionId)) - - cookies.delete('session_id', { path: "/" }); - locals.user.isLoggedIn = false; - locals.user.email = null; - locals.user.username = null; - - return { success: true }; - }, - deleteUsers: async ({ locals, fetch }) => { - await fetch("/api/deleteUsers"); - - locals.user.isLoggedIn = false; - locals.user.email = null; - locals.user.username = null; - - return { success: true } - } -} satisfies Actions; \ No newline at end of file diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 9ac4461..71a83ef 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -2,64 +2,158 @@ import { goto } from '$app/navigation'; import type { PageProps } from './$types'; - let { data, form }: PageProps = $props(); + let lobbyCode = $state(''); + let isLoggingIn = $state(false); + let loginError = $state(''); + + let { data }: PageProps = $props(); + let user = $state(data.user); + + + // Example login function (would connect to a real auth service) + function handleLogin() { + isLoggingIn = true; + loginError = ''; + + goto('/login'); + } + + function handleLogout() { + user.isLoggedIn = false; + user.username = null; + user.email = null; + + goto("/logout"); + } + + function createLobby() { + goto('/lobby/create'); + } + + function joinLobby() { + if (lobbyCode.trim()) { + goto(`/lobby/${lobbyCode}`); + } + } -

Welcome to SvelteKit

-

Visit svelte.dev/docs/kit to read the documentation

+
+ +
+
+

Hitstar

- + {#if user.isLoggedIn} +
+ Welcome, {user.username} + +
+ {/if} +
+
-{#if form?.success} -

Successfully logged out

-{/if} + +
+
+ +
+

Test Your Music Knowledge

+

Place songs on a timeline in the correct order.

+
-{#if !data.user.isLoggedIn} - -{:else} -

Hello {data.user.username}

-
- -
+ {#if !user.isLoggedIn} + +
+

Sign In to Play

-
- -
+ {#if loginError} +
+ {loginError} +
+ {/if} - -{/if} - +
+

Ready to Play?

- console.log(response.status); + - if (response.ok) { - const newUser: Array = await response.json(); - users.push(...newUser); - } else { - console.log(`Encountered Error ${response.status}`); - } - }}>Create User --> - -
    - {#each data.users as user (user.email)} -
  • - {user.username} = {user.email} -
    • - {/each} -
+
+
+ + +
+
+
+ {/if} +
+
+
diff --git a/src/routes/lobby/create/+page.server.ts b/src/routes/lobby/create/+page.server.ts index 1373fde..9815c09 100644 --- a/src/routes/lobby/create/+page.server.ts +++ b/src/routes/lobby/create/+page.server.ts @@ -1,9 +1,5 @@ -import { generateRandomString } from "$lib/server/auth/spotify"; -import type { states } from "$lib/server/db/schema"; import { redirect } from "@sveltejs/kit"; import type { PageServerLoad } from "./$types"; -import { setContext } from "svelte"; - export const load: PageServerLoad = async ({locals, fetch}) => { const response = await fetch("/api/createLobby", { @@ -19,4 +15,4 @@ export const load: PageServerLoad = async ({locals, fetch}) => { const lobby = await response.json(); redirect(307, `/lobby/${lobby.id}`); -}; \ No newline at end of file +};