Teams: Implement seasondata/teams page + creation/deletion/updating

User: Add login/register/profile form handling
Src: Add stub page for / route
2024-12-12 04:41:36 +01:00 · 2024-12-12 04:41:13 +01:00 · 2024-12-12 04:40:46 +01:00 · 2024-12-12 04:40:28 +01:00 · 2024-12-12 04:39:59 +01:00 · 2024-12-12 04:39:27 +01:00
31 changed files with 849 additions and 11 deletions
--- a/flake.nix
+++ b/flake.nix
@ -125,14 +125,19 @@
        # Use $1 for positional args
        commands = [
          {
-            name = "pycharm";
+            name = "db";
-            help = "Launch PyCharm Professional";
+            help = "Serve PocketBase";
-            command = "pycharm-professional . &>/dev/null &";
+            command = "pocketbase serve --http 192.168.86.50:8090";
          }
          {
-            name = "db";
+            name = "dev";
-            help = "Launch SQLiteBrowser";
+            help = "Serve Formula 11 (Dev)";
-            command = "sqlitebrowser ./instance/formula10.db &>/dev/null &";
+            command = "npm run dev -- --host --port 5173";
          }
          {
            name = "prod";
            help = "Serve Formula 11 (Prod)";
            command = "npm run build && npm run preview -- --host --port 5173";
          }
        ];
      };
--- a/package-lock.json
+++ b/package-lock.json
@ -9,6 +9,7 @@
 			"version": "0.0.1",
 			"dependencies": {
 				"autoprefixer": "^10.4.20",
 				"daisyui": "^4.12.20",
 				"pocketbase": "^0.22.1",
 				"postcss": "^8.4.49",
 				"prettier": "^3.4.2",
@ -1245,6 +1246,16 @@
 				"node": ">= 8"
 			}
 		},
 		"node_modules/css-selector-tokenizer": {
 			"version": "0.8.0",
 			"resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz",
 			"integrity": "sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==",
 			"license": "MIT",
 			"dependencies": {
 				"cssesc": "^3.0.0",
 				"fastparse": "^1.1.2"
 			}
 		},
 		"node_modules/cssesc": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@ -1257,6 +1268,34 @@
 				"node": ">=4"
 			}
 		},
 		"node_modules/culori": {
 			"version": "3.3.0",
 			"resolved": "https://registry.npmjs.org/culori/-/culori-3.3.0.tgz",
 			"integrity": "sha512-pHJg+jbuFsCjz9iclQBqyL3B2HLCBF71BwVNujUYEvCeQMvV97R59MNK3R2+jgJ3a1fcZgI9B3vYgz8lzr/BFQ==",
 			"license": "MIT",
 			"engines": {
 				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
 			}
 		},
 		"node_modules/daisyui": {
 			"version": "4.12.20",
 			"resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.12.20.tgz",
 			"integrity": "sha512-uHr3SQsd2yTjRdVuswTiqGFvZTxX0sGSBRa8JJdbKgmZCk/kRFh4B7Z2jg9vLIdwsHTHPyPgCkZadQo1ce0tAw==",
 			"license": "MIT",
 			"dependencies": {
 				"css-selector-tokenizer": "^0.8",
 				"culori": "^3",
 				"picocolors": "^1",
 				"postcss-js": "^4"
 			},
 			"engines": {
 				"node": ">=16.9.0"
 			},
 			"funding": {
 				"type": "opencollective",
 				"url": "https://opencollective.com/daisyui"
 			}
 		},
 		"node_modules/debug": {
 			"version": "4.4.0",
 			"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
@ -1415,6 +1454,12 @@
 				"node": ">= 6"
 			}
 		},
 		"node_modules/fastparse": {
 			"version": "1.1.2",
 			"resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz",
 			"integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==",
 			"license": "MIT"
 		},
 		"node_modules/fastq": {
 			"version": "1.17.1",
 			"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
--- a/package.json
+++ b/package.json
@ -20,6 +20,7 @@
 	},
 	"dependencies": {
 		"autoprefixer": "^10.4.20",
 		"daisyui": "^4.12.20",
 		"pocketbase": "^0.22.1",
 		"postcss": "^8.4.49",
 		"prettier": "^3.4.2",
--- a/src/app.html
+++ b/src/app.html
@ -2,11 +2,22 @@
 <html lang="en">
  <head>
    <meta charset="utf-8" />
-    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
+
    <!-- Scale the viewport for mobile devices -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- Set the iOS Safari header/tab bar color -->
    <meta name="theme-color" content="#F8D7DA" />
    <link rel="icon" href="%sveltekit.assets%/favicon.svg" />
    <!-- SvelteKit inserts the header contents here -->
    %sveltekit.head%
  </head>
  <!-- Prefetch data specified in "load" functions on link hover -->
  <body data-sveltekit-preload-data="hover">
    <!-- SvelteKit inserts the body contents here -->
    <div style="display: contents">%sveltekit.body%</div>
  </body>
 </html>
--- a/src/hooks.server.ts
+++ b/src/hooks.server.ts
@ -0,0 +1,43 @@
 import type { Handle } from "@sveltejs/kit";
 import PocketBase from "pocketbase";
 // This function will run serverside on each request.
 // The event.locals will be passed onto serverside load functions and handlers.
 // We create a new PocketBase client for each request, so it always carries the
 // most recent authentication data.
 // The authenticated PocketBase client will be available in all *.server.ts files.
 export const handle: Handle = async ({ event, resolve }) => {
  event.locals.pb = new PocketBase("http://192.168.86.50:8090");
  // Load the most recent authentication data from a cookie (is updated below)
  event.locals.pb.authStore.loadFromCookie(
    event.request.headers.get("cookie") || "",
  );
  if (event.locals.pb.authStore.isValid) {
    // If the authentication data is valid, we make a "user" object easily available.
    event.locals.user = structuredClone(event.locals.pb.authStore.model);
    // Fill in the avatar URL
    event.locals.user.avatar_url = event.locals.pb.files.getURL(
      event.locals.pb.authStore.model,
      event.locals.pb.authStore.model.avatar,
    );
    // Set admin status for easier access
    event.locals.admin = event.locals.user.admin;
  } else {
    event.locals.user = undefined;
  }
  // Resolve the request. This is what happens by default.
  const response = await resolve(event);
  // Store the current authentication data to a cookie, so it can be loaded above.
  response.headers.set(
    "set-cookie",
    event.locals.pb.authStore.exportToCookie({ secure: false }),
  );
  return response;
 };
--- a/src/lib/components/Button.svelte
+++ b/src/lib/components/Button.svelte
@ -0,0 +1,20 @@
 <script lang="ts">
  let {
    id = "",
    name = "",
    formaction = "",
    label,
    color,
    disabled = false,
  } = $props();
 </script>
 <!-- HACK: Set --tw-bg-opacity to 1 so the disabled label/button looks like the disabled input -->
 <button
  {id}
  {name}
  {formaction}
  {disabled}
  class="btn btn-{color}"
  style="--tw-bg-opacity: 1">{label}</button
 >
--- a/src/lib/components/FileInput.svelte
+++ b/src/lib/components/FileInput.svelte
@ -0,0 +1,35 @@
 <script lang="ts">
  let {
    id,
    name,
    label,
    accept = "*",
    onchange = undefined,
    disabled = false,
    required = false,
  } = $props();
 </script>
 {#if disabled}
  <!-- HACK: Set --tw-bg-opacity to 1 so the disabled label/button looks like the disabled input -->
  <label
    for={id}
    class="btn btn-disabled mt-2 w-full"
    style="--tw-bg-opacity: 1">{label}</label
  >
 {:else}
  <label for={id} class="btn btn-ghost input-bordered mt-2 w-full"
    >{label}</label
  >
 {/if}
 <input
  {id}
  {name}
  class="file-input file-input-bordered file-input-ghost"
  type="file"
  hidden
  {disabled}
  {required}
  {onchange}
  {accept}
 />
--- a/src/lib/components/Input.svelte
+++ b/src/lib/components/Input.svelte
@ -0,0 +1,29 @@
 <script lang="ts">
  let {
    id,
    name,
    label,
    placeholder = "",
    type = "text",
    value = "",
    disabled = false,
    required = false,
  } = $props();
 </script>
 <label
  for={id}
  class="input input-bordered mt-2 flex !cursor-default select-none items-center gap-2"
 >
  {label}
  <input
    {id}
    {name}
    {type}
    class={disabled ? "pointer-events-none grow !cursor-default" : "grow"}
    {disabled}
    {required}
    {placeholder}
    {value}
  />
 </label>
--- a/src/lib/components/Password.svelte
+++ b/src/lib/components/Password.svelte
@ -0,0 +1,27 @@
 <script lang="ts">
  let { id, name, disabled = false } = $props();
 </script>
 <label for={id} class="input input-bordered mt-2 flex items-center gap-2">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 16 16"
    fill="currentColor"
    class="h-4 w-4 opacity-70"
  >
    <path
      fill-rule="evenodd"
      d="M14 6a4 4 0 0 1-4.899 3.899l-1.955 1.955a.5.5 0 0 1-.353.146H5v1.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2.293a.5.5 0 0 1 .146-.353l3.955-3.955A4 4 0 1 1 14 6Zm-4-2a.75.75 0 0 0 0 1.5.5.5 0 0 1 .5.5.75.75 0 0 0 1.5 0 2 2 0 0 0-2-2Z"
      clip-rule="evenodd"
    />
  </svg>
  <input
    {id}
    {name}
    type="password"
    class="grow"
    {disabled}
    required
    placeholder="Password"
  />
 </label>
--- a/src/lib/components/Username.svelte
+++ b/src/lib/components/Username.svelte
@ -0,0 +1,26 @@
 <script lang="ts">
  let { id, name, value = "", disabled = false } = $props();
 </script>
 <label for={id} class="input input-bordered mt-2 flex items-center gap-2">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 16 16"
    fill="currentColor"
    class="h-4 w-4 opacity-70"
  >
    <path
      d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM12.735 14c.618 0 1.093-.561.872-1.139a6.002 6.002 0 0 0-11.215 0c-.22.578.254 1.139.872 1.139h9.47Z"
    />
  </svg>
  <input
    {id}
    {name}
    type="text"
    class="grow"
    {value}
    {disabled}
    required
    placeholder="Username"
  />
 </label>
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@ -0,0 +1,7 @@
 import FileInput from "./FileInput.svelte";
 import Input from "./Input.svelte";
 import Password from "./Password.svelte";
 import Username from "./Username.svelte";
 import Button from "./Button.svelte";
 export { FileInput, Input, Username, Password, Button };
--- a/src/lib/forms.ts
+++ b/src/lib/forms.ts
@ -0,0 +1,48 @@
 import { error } from "@sveltejs/kit";
 /**
 * Obtain the value of the key "id" and remove it from the FormData.
 * Throws SvelteKit error(400) if "id" is not found.
 */
 export const form_data_get_and_remove_id = (data: FormData): string => {
  const id: string | undefined = data.get("id")?.toString();
  if (!id) error(400, "Missing ID");
  data.delete("id");
  return id;
 };
 /**
 * Remove empty fields and files from FormData objects.
 */
 export const form_data_clean = (data: FormData): FormData => {
  for (const [key, value] of data.entries()) {
    if (value === "") {
      // Remove empty keys
      data.delete(key);
    } else if (
      // Remove empty files
      typeof value === "object" &&
      value !== null &&
      "size" in value &&
      value.size === 0
    ) {
      data.delete(key);
    }
  }
  return data;
 };
 /**
 * Throws SvelteKit error(400) if form_data does not contain key.
 */
 export const form_data_ensure_key = (data: FormData, key: string) => {
  if (!data.get(key)) error(400, `Key "${key}" missing from form_data!`);
 };
 /**
 * Throws SvelteKit error(400) if form_data does not contain all keys.
 */
 export const form_data_ensure_keys = (data: FormData, keys: string[]) => {
  keys.map((key) => form_data_ensure_key(data, key));
 };
--- a/src/lib/image.ts
+++ b/src/lib/image.ts
@ -0,0 +1,17 @@
 export const get_image_preview_event_handler = (id: string) => {
  const handler = (event) => {
    const target = event.target;
    const files = target.files;
    if (files.length > 0) {
      const src = URL.createObjectURL(files[0]);
      const preview = document.getElementById(id) as HTMLImageElement;
      if (preview) {
        preview.src = src;
        preview.hidden = false;
      }
    }
  };
  return handler;
 };
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@ -1 +0,0 @@
 // place files you want to import through the `$lib` alias in this folder.
--- a/src/routes/+layout.server.ts
+++ b/src/routes/+layout.server.ts
@ -0,0 +1,19 @@
 import type { LayoutServerLoad } from "./$types";
 // On each page load (every route), this function runs serverside.
 // The "locals.user" object is only available on the server,
 // since it's populated inside hooks.server.ts.
 // It will populate the "user" attribute of each page's "data" object,
 // so each page has access to the current user (or knows if no one is signed in).
 export const load: LayoutServerLoad = ({ locals }) => {
  if (locals.user) {
    return {
      user: locals.user,
      admin: locals.user.admin,
    };
  }
  return {
    user: undefined,
  };
 };
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@ -0,0 +1,165 @@
 <script lang="ts">
  import "../app.css";
  import type { Snippet } from "svelte";
  import type { LayoutData } from "./$types";
  import { FileInput, Password, Username } from "$lib/components";
  import { get_image_preview_event_handler } from "$lib/image";
  let { data, children }: { data: LayoutData; children: Snippet } = $props();
 </script>
 <nav>
  <!-- TODO: Make this stick to the topsomehow. -->
  <!--       Fixed breaks the flexbox and sticky doesn't work. -->
  <div class="navbar h-16 bg-primary shadow">
    <div class="navbar-start">
      <!-- Side menu be visible on low width devices -->
      <div class="dropdown">
        <!-- Side menu open/close icon -->
        <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-5 w-5"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M4 6h16M4 12h8m-8 6h16"
            />
          </svg>
        </div>
        <!-- Side menu navigation items -->
        <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
        <ul
          tabindex="0"
          class="menu dropdown-content z-[1] mt-4 w-52 rounded-box border bg-base-100 p-2 shadow"
        >
          <li><a href="/racepicks">Race Picks</a></li>
          <li><a href="/seasonpicks">Season Picks</a></li>
          <li><a href="/leaderboard">Leaderboard</a></li>
          <li><a href="/statistics">Statistics</a></li>
          <li><a href="/rules">Rules</a></li>
        </ul>
      </div>
      <!-- Site logo -->
      <a href="/" class="btn btn-ghost text-xl">Formula 11</a>
    </div>
    <!-- Centered navigation -->
    <div class="navbar-center hidden lg:flex">
      <ul class="menu menu-horizontal px-1">
        <li>
          <a class="btn btn-ghost btn-sm" href="/racepicks">Race Picks</a>
        </li>
        <li>
          <a class="btn btn-ghost btn-sm" href="/seasonpicks">Season Picks</a>
        </li>
        <li>
          <a class="btn btn-ghost btn-sm" href="/leaderboard">Leaderboard</a>
        </li>
        <li>
          <a class="btn btn-ghost btn-sm" href="/statistics">Statistics</a>
        </li>
        <li><a class="btn btn-ghost btn-sm" href="/rules">Rules</a></li>
      </ul>
    </div>
    <div class="navbar-end">
      <!-- Admin button -->
      <div class="dropdown dropdown-end mr-2">
        <div tabindex="0" role="button" class="btn btn-ghost">Admin</div>
        <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
        <ul
          tabindex="0"
          class="menu dropdown-content z-[1] mt-4 w-52 rounded-box border bg-base-100 p-2 shadow"
        >
          <li><a href="/admin/users">Users</a></li>
          <li><a href="/admin/seasondata/teams">Season Data</a></li>
          <li><a href="/admin/userdata">User Data</a></li>
        </ul>
      </div>
      <!-- Login/profile stuff -->
      {#if !data.user}
        <!-- No user is logged in  -->
        <div class="dropdown dropdown-end">
          <div tabindex="0" role="button" class="btn btn-ghost m-1">Login</div>
          <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
          <div
            tabindex="0"
            class="menu dropdown-content z-[1] mt-4 w-[150] rounded-box border bg-base-100 p-2 shadow"
          >
            <h1 class="text-lg">Enter Username and Password</h1>
            <form method="POST">
              <Username id="signin_username" name="username" />
              <Password id="signin_password" name="password" />
              <div class="card-actions mt-2 justify-end">
                <button formaction="/user?/create" class="btn btn-accent"
                  >Register</button
                >
                <button formaction="/user?/login" class="btn btn-accent"
                  >Login</button
                >
              </div>
            </form>
          </div>
        </div>
      {:else}
        <!-- The user is logged in -->
        <div class="dropdown dropdown-end">
          <div tabindex="0" role="button" class="avatar ml-2 mr-2">
            <div class="mask mask-squircle w-10">
              <img
                id="user_avatar_preview"
                src={data.user.avatar_url}
                alt="User avatar"
              />
            </div>
          </div>
          <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
          <div
            tabindex="0"
            class="menu dropdown-content z-[1] mt-4 w-[150] rounded-box border bg-base-100 p-2 shadow"
          >
            <h1 class="text-lg">Edit Profile</h1>
            <form method="POST" enctype="multipart/form-data">
              <input type="hidden" name="id" value={data.user.id} />
              <Username
                id="update_username"
                name="username"
                value={data.user.username}
              />
              <FileInput
                id="update_avatar"
                name="avatar"
                label="Upload Avatar"
                onchange={get_image_preview_event_handler(
                  "user_avatar_preview",
                )}
              />
              <div class="card-actions mt-2 justify-end">
                <button formaction="/user?/update" class="btn btn-secondary"
                  >Save Changes</button
                >
                <button formaction="/user?/logout" class="btn btn-primary"
                  >Logout</button
                >
              </div>
            </form>
          </div>
        </div>
      {/if}
    </div>
  </div>
 </nav>
 <!-- Each child's contents will be inserted here -->
 <div class="p-2">
  {@render children()}
 </div>
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@ -1,2 +1,5 @@
-<h1>Welcome to SvelteKit</h1>
+<svelte:head>
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
+  <title>F11 - Formula 11</title>
 </svelte:head>
 <h1>Formula 11</h1>
--- a/src/routes/admin/seasondata/teams/+page.server.ts
+++ b/src/routes/admin/seasondata/teams/+page.server.ts
@ -0,0 +1,66 @@
 import type { Actions, PageServerLoad } from "./$types";
 import {
  form_data_clean,
  form_data_ensure_keys,
  form_data_get_and_remove_id,
 } from "$lib/forms";
 // These "actions" run serverside only, as they're located inside +page.server.ts
 export const actions = {
  // We destructure the RequestEvent with ({cookies, request}).
  // Alternatively use (event) and event.cookies or event.request to access.
  create: async ({ cookies, request, locals }) => {
    if (!locals.admin) return { success: false };
    const data = form_data_clean(await request.formData());
    form_data_ensure_keys(data, ["name", "logo"]);
    const record = await locals.pb.collection("teams").create(data);
    return { success: true };
  },
  update: async ({ cookies, request, locals }) => {
    if (!locals.admin) return { success: false };
    const data = form_data_clean(await request.formData());
    const id = form_data_get_and_remove_id(data);
    // Destructure the FormData object
    const record = await locals.pb.collection("teams").update(id, data);
    return { success: true };
  },
  delete: async ({ cookies, request, locals }) => {
    if (!locals.admin) return { success: false };
    const data: FormData = form_data_clean(await request.formData());
    const id = form_data_get_and_remove_id(data);
    await locals.pb.collection("teams").delete(id);
    return { success: true };
  },
 } satisfies Actions;
 // This "load" function runs serverside only, as it's located inside +page.server.ts
 export const load: PageServerLoad = async ({ fetch, locals }) => {
  const fetch_teams = async () => {
    const teams = await locals.pb.collection("teams").getFullList({
      sort: "+name",
      fetch: fetch,
    });
    // Fill in the file URLs
    teams.map((team) => {
      team.logo_url = locals.pb.files.getURL(team, team.logo);
    });
    return teams;
  };
  return {
    teams: await fetch_teams(),
  };
 };
--- a/src/routes/admin/seasondata/teams/+page.svelte
+++ b/src/routes/admin/seasondata/teams/+page.svelte
@ -0,0 +1,129 @@
 <script lang="ts">
  import type { PageData } from "./$types";
  import { Input, FileInput, Button } from "$lib/components";
  import { get_image_preview_event_handler } from "$lib/image";
  let { data }: { data: PageData } = $props();
 </script>
 <svelte:head>
  <title>F11 - Teams</title>
 </svelte:head>
 <!-- TODO: Move this + the tablist into the +layout.svelte and select the correct tab dynamically -->
 <!--       This would also allow it to be animated? Maybe? -->
 <h1>Season Data</h1>
 <div role="tablist" class="tabs-boxed tabs">
  <a href="teams" role="tab" class="tab tab-active">Teams</a>
  <a href="drivers" role="tab" class="tab">Drivers</a>
  <a href="races" role="tab" class="tab">Races</a>
 </div>
 <!-- TODO: End -->
 <div
  class="mt-2 grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6"
 >
  <!-- List all teams inside the database -->
  {#each data.teams as team}
    <div class="card card-bordered card-compact shadow">
      <!-- Logo display -->
      <figure>
        <img
          id="update_team_logo_preview_{team.id}"
          src={team.logo_url}
          alt="Logo of {team.name} F1 team."
          draggable="false"
          class="select-none"
        />
      </figure>
      <form method="POST" enctype="multipart/form-data">
        <input name="id" type="hidden" value={team.id} />
        <div class="card-body gap-0 !p-2 !pt-0">
          <Input
            id="team_name_{team.id}"
            name="name"
            value={team.name}
            label="Name:"
            disabled={!data.admin}
          />
          <!-- Logo upload -->
          <FileInput
            id="team_logo_{team.id}"
            name="logo"
            label="Upload Logo"
            onchange={get_image_preview_event_handler(
              `update_team_logo_preview_${team.id}`,
            )}
            disabled={!data.admin}
          />
          <!-- Buttons -->
          <div class="card-actions mt-2 justify-end">
            <Button
              formaction="?/update"
              color="secondary"
              label="Save Changes"
              disabled={!data.admin}
            />
            <Button
              formaction="?/delete"
              color="primary"
              label="Delete"
              disabled={!data.admin}
            />
          </div>
        </div>
      </form>
    </div>
  {/each}
  <!-- Add a new team -->
  {#if data.admin}
    <div class="card card-bordered card-compact shadow">
      <!-- Logo preview -->
      <figure>
        <img
          id="create_team_logo_preview"
          src=""
          alt="Logo preview"
          class="select-none"
          draggable="false"
          hidden
        />
      </figure>
      <form method="POST" enctype="multipart/form-data">
        <div class="card-body">
          <h2 class="card-title select-none">Add a New Team</h2>
          <!-- Team name input -->
          <Input id="team_name_create" name="name" label="Name:" required />
          <!-- Logo upload -->
          <FileInput
            id="team_logo_create"
            name="logo"
            label="Upload Logo"
            onchange={get_image_preview_event_handler(
              "create_team_logo_preview",
            )}
            required
          />
          <!-- Buttons -->
          <div class="card-actions justify-end">
            <!-- By specifying the formaction on the button (instead of action on the form), -->
            <!-- we can have multiple buttons with different actions in a single form. -->
            <button formaction="?/create" class="btn btn-secondary"
              >Create</button
            >
          </div>
        </div>
      </form>
    </div>
  {/if}
 </div>
--- a/src/routes/admin/userdata/+page.svelte
+++ b/src/routes/admin/userdata/+page.svelte
@ -0,0 +1 @@
 <h1>User Data</h1>
--- a/src/routes/admin/users/+page.svelte
+++ b/src/routes/admin/users/+page.svelte
@ -0,0 +1 @@
 <h1>User Management</h1>
--- a/src/routes/leaderboard/+page.svelte
+++ b/src/routes/leaderboard/+page.svelte
@ -0,0 +1 @@
 <h1>Leaderboard</h1>
--- a/src/routes/racepicks/+page.svelte
+++ b/src/routes/racepicks/+page.svelte
@ -0,0 +1 @@
 <h1>Race Picks</h1>
--- a/src/routes/rules/+page.svelte
+++ b/src/routes/rules/+page.svelte
@ -0,0 +1 @@
 <h1>Rules</h1>
--- a/src/routes/seasonpicks/+page.svelte
+++ b/src/routes/seasonpicks/+page.svelte
@ -0,0 +1 @@
 <h1>Season Picks</h1>
--- a/src/routes/statistics/+page.svelte
+++ b/src/routes/statistics/+page.svelte
@ -0,0 +1 @@
 <h1>Statistics</h1>
--- a/src/routes/user/+page.server.ts
+++ b/src/routes/user/+page.server.ts
@ -0,0 +1,75 @@
 import {
  form_data_clean,
  form_data_ensure_keys,
  form_data_get_and_remove_id,
 } from "$lib/forms";
 import { error, redirect } from "@sveltejs/kit";
 import type { Actions } from "./$types";
 export const actions = {
  create: async ({ cookies, request, locals }) => {
    const data = form_data_clean(await request.formData());
    form_data_ensure_keys(data, ["username", "password"]);
    // TODO: Errrr passwordConfirm... How to integrate it into the unified login-/register-UI?
    const record = await locals.pb.collection("users").create({
      username: data.get("username")?.toString(),
      password: data.get("password")?.toString(),
      passwordConfirm: data.get("password")?.toString(),
      admin: false,
    });
    // Directly login after registering
    await locals.pb
      .collection("users")
      .authWithPassword(
        data.get("username")?.toString(),
        data.get("password")?.toString(),
      );
    redirect(303, "/");
  },
  // TODO: PocketBase API rule: Only the active user should be able to modify itself
  update: async ({ cookies, request, locals }) => {
    const data = form_data_clean(await request.formData());
    const id = form_data_get_and_remove_id(data);
    const record = await locals.pb.collection("users").update(id, data);
    redirect(303, "/");
  },
  login: async ({ cookies, request, locals }) => {
    if (locals.user) {
      console.log("Already logged in!");
      return;
    }
    const data = form_data_clean(await request.formData());
    form_data_ensure_keys(data, ["username", "password"]);
    try {
      await locals.pb
        .collection("users")
        .authWithPassword(
          data.get("username")?.toString(),
          data.get("password")?.toString(),
        );
    } catch (err) {
      console.log(`Failed to login: ${err}`);
      error(400, "Failed to login!");
    }
    // TODO: Would be better to redirect to previous page somehow...
    redirect(303, "/");
  },
  logout: async ({ cookies, request, locals }) => {
    locals.pb.authStore.clear();
    locals.user = undefined;
    // TODO: Would be better to redirect to previous page somehow...
    redirect(303, "/");
  },
 } satisfies Actions;
--- a/static/f1_logo.svg
+++ b/static/f1_logo.svg
@ -0,0 +1,16 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 120 30" version="1.1" class="injected-svg js-svg-inject">
    <!-- Generator: Sketch 49.1 (51147) - http://www.bohemiancoding.com/sketch -->
    <title>Logos / F1-logo red</title>
    <desc>Created with Sketch.</desc>
    <defs>
        <path d="M101.086812,30 L101.711812,30 L101.711812,27.106875 L101.722437,27.106875 L102.761812,30 L103.302437,30 L104.341812,27.106875 L104.352437,27.106875 L104.352437,30 L104.977437,30 L104.977437,26.25125 L104.063687,26.25125 L103.055562,29.18625 L103.044937,29.18625 L102.011187,26.25125 L101.086812,26.25125 L101.086812,30 Z M97.6274375,26.818125 L98.8136875,26.818125 L98.8136875,30 L99.4699375,30 L99.4699375,26.818125 L100.661812,26.818125 L100.661812,26.25125 L97.6274375,26.25125 L97.6274375,26.818125 Z M89.9999375,30 L119.999937,0 L101.943687,0 L71.9443125,30 L89.9999375,30 Z M85.6986875,13.065 L49.3818125,13.065 C38.3136875,13.065 36.3768125,13.651875 31.6361875,18.3925 C27.2024375,22.82625 20.0005625,30 20.0005625,30 L35.7324375,30 L39.4855625,26.246875 C41.9530625,23.779375 43.2255625,23.52375 48.4068125,23.52375 L75.2405625,23.52375 L85.6986875,13.065 Z M31.1518125,16.253125 C27.8774375,19.3425 20.7530625,26.263125 16.9130625,30 L-6.25e-05,30 C-6.25e-05,30 13.5524375,16.486875 21.0849375,9.0725 C28.8455625,1.685 32.7143125,0 46.9486875,0 L98.7643125,0 L87.5449375,11.21875 L48.0011875,11.21875 C37.9993125,11.21875 35.7518125,11.911875 31.1518125,16.253125 Z" id="path-1"/>
    </defs>
    <g id="Logos-/-F1-logo-red" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Page-1">
            <mask id="mask-2" fill="white">
                <use xlink:href="#path-1"/>
            </mask>
            <use id="Fill-1" fill="#EE0000" xlink:href="#path-1"/>
        </g>
    </g>
 </svg>
--- a/static/favicon.png
+++ b/static/favicon.png
--- a/static/favicon.svg
+++ b/static/favicon.svg
@ -0,0 +1,16 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 120 60" version="1.1" class="injected-svg js-svg-inject">
    <!-- Generator: Sketch 49.1 (51147) - http://www.bohemiancoding.com/sketch -->
    <title>Logos / F1-logo red</title>
    <desc>Created with Sketch.</desc>
    <defs>
        <path d="M101.086812,30 L101.711812,30 L101.711812,27.106875 L101.722437,27.106875 L102.761812,30 L103.302437,30 L104.341812,27.106875 L104.352437,27.106875 L104.352437,30 L104.977437,30 L104.977437,26.25125 L104.063687,26.25125 L103.055562,29.18625 L103.044937,29.18625 L102.011187,26.25125 L101.086812,26.25125 L101.086812,30 Z M97.6274375,26.818125 L98.8136875,26.818125 L98.8136875,30 L99.4699375,30 L99.4699375,26.818125 L100.661812,26.818125 L100.661812,26.25125 L97.6274375,26.25125 L97.6274375,26.818125 Z M89.9999375,30 L119.999937,0 L101.943687,0 L71.9443125,30 L89.9999375,30 Z M85.6986875,13.065 L49.3818125,13.065 C38.3136875,13.065 36.3768125,13.651875 31.6361875,18.3925 C27.2024375,22.82625 20.0005625,30 20.0005625,30 L35.7324375,30 L39.4855625,26.246875 C41.9530625,23.779375 43.2255625,23.52375 48.4068125,23.52375 L75.2405625,23.52375 L85.6986875,13.065 Z M31.1518125,16.253125 C27.8774375,19.3425 20.7530625,26.263125 16.9130625,30 L-6.25e-05,30 C-6.25e-05,30 13.5524375,16.486875 21.0849375,9.0725 C28.8455625,1.685 32.7143125,0 46.9486875,0 L98.7643125,0 L87.5449375,11.21875 L48.0011875,11.21875 C37.9993125,11.21875 35.7518125,11.911875 31.1518125,16.253125 Z" id="path-1"/>
    </defs>
    <g id="Logos-/-F1-logo-red" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Page-1">
            <mask id="mask-2" fill="white">
                <use xlink:href="#path-1"/>
            </mask>
            <use id="Fill-1" fill="#EE0000" xlink:href="#path-1"/>
        </g>
    </g>
 </svg>
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -1,8 +1,37 @@
 import daisyui from "daisyui";
 /** @type {import('tailwindcss').Config} */
 export default {
  content: ["./src/**/*.{html,js,svelte,ts}"],
  theme: {
    extend: {},
  },
-  plugins: [],
+  plugins: [daisyui],
  daisyui: {
    logs: false,
    themes: [
      {
        formula11: {
          primary: "#F8D7DA",
          secondary: "#FFF3CD",
          accent: "#D1E7DD",
          neutral: "#E8E8E8",
          error: "#DC3545",
          warning: "#FFC107",
          success: "#198754",
          "base-100": "#FFFFFF",
          "--rounded-box": "1rem", // border radius rounded-box utility class, used in card and other large boxes
          "--rounded-btn": "0.35rem", // border radius rounded-btn utility class, used in buttons and similar element
          "--rounded-badge": "1.9rem", // border radius rounded-badge utility class, used in badges and similar
          "--animation-btn": "0.25s", // duration of animation when you click on button
          "--animation-input": "0.2s", // duration of animation for inputs like checkbox, toggle, radio, etc
          "--btn-focus-scale": "0.95", // scale transform of button when you focus on it
          "--border-btn": "1px", // border width of buttons
          "--tab-border": "1px", // border width of tabs
          "--tab-radius": "0.5rem", // border radius of tabs
        },
      },
    ],
  },
 };
Author	SHA1	Message	Date
Christoph Urlacher	d6dc5dc44a	Teams: Implement seasondata/teams page + creation/deletion/updating	2024-12-12 04:41:36 +01:00
Christoph Urlacher	b67c957d1f	User: Add login/register/profile form handling	2024-12-12 04:41:13 +01:00
Christoph Urlacher	39190b0cfe	Src: Add stub page for / route	2024-12-12 04:40:46 +01:00
Christoph Urlacher	c4f0703f3d	Src: Add main page skeleton (navbar)	2024-12-12 04:40:28 +01:00
Christoph Urlacher	4b78f02b6b	Src: Add request event handler for authentication	2024-12-12 04:39:59 +01:00
Christoph Urlacher	4cbba4b1ef	Static: Add favicon + logo	2024-12-12 04:39:27 +01:00
Christoph Urlacher	615e79255c	Env: Update devshell commands	2024-12-12 04:39:01 +01:00
Christoph Urlacher	036e17b7d5	Env: Update tailwind config + some other plugins	2024-12-12 04:38:52 +01:00
Christoph Urlacher	fabdb6a8e8	Add stub pages for some routes	2024-12-12 04:38:32 +01:00
Christoph Urlacher	00bbf83cb5	Lib: Add image preview helper	2024-12-12 04:38:00 +01:00
Christoph Urlacher	f715959af9	Lib: Add form helpers	2024-12-12 04:37:54 +01:00
Christoph Urlacher	c0c3e3d792	Components: Add index.ts for easier importing	2024-12-12 04:37:34 +01:00
Christoph Urlacher	6d812805ed	Components: Add username input	2024-12-12 04:37:22 +01:00
Christoph Urlacher	5d375554af	Components: Add password input	2024-12-12 04:37:17 +01:00
Christoph Urlacher	32667d1baf	Components: Add text input	2024-12-12 04:37:11 +01:00
Christoph Urlacher	20d66cab5f	Components: Add file input	2024-12-12 04:37:02 +01:00
Christoph Urlacher	4ab7bde49e	Components: Add button	2024-12-12 04:36:54 +01:00
		`@ -1 +0,0 @@`
			// place files you want to import through the `$lib` alias in this folder.