Pablu/hitstarv2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP: Working homepage with Login and logout

Browse Source
This commit is contained in:
Pablu23
2025-10-08 12:31:16 +02:00
parent d9a946d9ca
commit 1f3813ea78
6 changed files with 191 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app.d.ts vendored
View File

@@ -46,7 +46,3 @@ export type WebSocketMessage = {
type: string;
[key: string]: any;
}
export {
};

2
src/hooks.server.ts
View File

@@ -1,5 +1,5 @@
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';

11
src/routes/+layout.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
import favicon from '$lib/assets/favicon.svg';
import "../app.css";
import '../app.css';
let { children } = $props();
</script>
@@ -9,3 +9,12 @@
</svelte:head>
{@render children?.()}
<!-- Footer -->
<footer class="bg-white py-6">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<p class="text-center text-gray-500 text-sm">
© 2025 Pablu. All rights reserved.
</p>
</div>
</footer>

38
src/routes/+page.server.ts
View File

@@ -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 ?? []
}
};
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;

198
src/routes/+page.svelte
View File

@@ -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}`);
}
}
</script>
<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
<div class="min-h-screen bg-white flex flex-col">
<!-- Header -->
<header class="bg-white shadow-sm py-4">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 flex justify-between items-center">
<h1 class="text-2xl font-bold text-indigo-600">Hitstar</h1>
<!-- <div>
<label>Email: <input type="text" bind:value={email} /></label>
<label>Username: <input type="text" bind:value={username} /></label>
</div> -->
{#if user.isLoggedIn}
<div class="flex items-center">
<span class="mr-4 text-gray-700">Welcome, {user.username}</span>
<button
class="px-4 py-2 rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-100 transition-colors"
onclick={handleLogout}
>
Log Out
</button>
</div>
{/if}
</div>
</header>
{#if form?.success}
<p>Successfully logged out</p>
{/if}
<!-- Main Content -->
<main class="flex-1 flex flex-col items-center justify-center px-4">
<div class="w-full max-w-md">
<!-- Hero -->
<div class="text-center mb-12">
<h2 class="text-4xl font-bold text-gray-800 mb-4">Test Your Music Knowledge</h2>
<p class="text-xl text-gray-600">Place songs on a timeline in the correct order.</p>
</div>
{#if !data.user.isLoggedIn}
<button onclick={async () => await goto('/login')}> Login </button>
{:else}
<h2>Hello {data.user.username}</h2>
<form method="POST" action="?/logout">
<button type="submit">Logout</button>
</form>
{#if !user.isLoggedIn}
<!-- Login Section -->
<div class="bg-white rounded-lg shadow-md p-8 mb-6">
<h3 class="text-xl font-semibold text-gray-800 mb-6">Sign In to Play</h3>
<form method="POST" action="?/deleteUsers">
<button type="submit">Delete all Users</button>
</form>
{#if loginError}
<div class="bg-red-50 text-red-700 p-3 rounded-md mb-4 text-sm">
{loginError}
</div>
{/if}
<button type="submit" onclick={async () => await goto("/lobby/create")}>Create Lobby</button>
{/if}
<!--
<button
onclick={async () => {
const response = await fetch('/api/createUser', {
method: 'POST',
body: JSON.stringify({
email: email,
username: username
}),
headers: {
'Content-Type': 'application/json'
}
});
<button
class="w-full py-3 px-4 bg-indigo-600 hover:bg-indigo-700 text-white font-medium rounded-md transition-colors flex justify-center items-center"
onclick={handleLogin}
disabled={isLoggingIn}
>
{#if isLoggingIn}
<svg
class="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
>
<circle
class="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
stroke-width="4"
></circle>
<path
class="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
></path>
</svg>
Logging in...
{:else}
Login to Play
{/if}
</button>
</div>
{:else}
<!-- Game Options -->
<div class="bg-white rounded-lg shadow-md p-8 space-y-6">
<h3 class="text-xl font-semibold text-gray-800 mb-6">Ready to Play?</h3>
console.log(response.status);
<button
class="w-full py-3 px-4 bg-indigo-600 hover:bg-indigo-700 text-white font-medium rounded-md transition-colors flex items-center justify-center"
onclick={createLobby}
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 mr-2"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 6v6m0 0v6m0-6h6m-6 0H6"
/>
</svg>
Create New Lobby
</button>
if (response.ok) {
const newUser: Array<any> = await response.json();
users.push(...newUser);
} else {
console.log(`Encountered Error ${response.status}`);
}
}}>Create User</button
> -->
<ul>
{#each data.users as user (user.email)}
<li>
{user.username} = {user.email}
</li>
{/each}
</ul>
<div class="relative mt-4">
<div class="flex rounded-md shadow-sm">
<input
type="text"
bind:value={lobbyCode}
placeholder="Enter lobby code"
class="flex-1 min-w-0 block w-full px-3 py-3 rounded-none rounded-l-md border border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
/>
<button
class="inline-flex items-center px-4 py-2 border border-l-0 border-gray-300 rounded-r-md bg-indigo-600 hover:bg-indigo-700 text-white font-medium"
onclick={joinLobby}
disabled={!lobbyCode.trim()}
>
Join Lobby
</button>
</div>
</div>
</div>
{/if}
</div>
</main>
</div>

4
src/routes/lobby/create/+page.server.ts
View File

@@ -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", {