WIP: Working homepage with Login and logout
This commit is contained in:
Pablu23
4
src/app.d.ts
vendored
4
src/app.d.ts
vendored
@@ -46,7 +46,3 @@ export type WebSocketMessage = {
|
||||
type: string;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
export {
|
||||
|
||||
};
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
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;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
@@ -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>
|
||||
|
||||
@@ -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}`);
|
||||
};
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user