adds user management

web/src/lib/components/avatar.svelte

@@ -1 +0,0 @@
-<menu class="rounded-full border w-12 h-12"></menu>

web/src/lib/components/base/dropdown.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
     import { createEventDispatcher } from "svelte";
 
-    export let items: { text: string; value: any }[] = [];
+    export let items: { text: string; value: any; icon?: string }[] = [];
+    export let size: string = "regular";
 
     const dispatch = createEventDispatcher();
 
@@ -26,28 +27,31 @@
 <svelte:window on:mouseup={() => (isOpen = false)} />
 
 <div class="dropdown relative">
-    <button
-        class="hover:bg-gray-100 w-8 h-8 rounded-full"
-        on:click={toggleMenu}
-        type="button"
-    >
-        <i class="fa fa-ellipsis-vertical"></i>
+    <button class="flex items-center justify-center" on:click={toggleMenu} type="button">
+        <slot>
+            <i
+                class="fa fa-ellipsis-vertical text-{size} hover:bg-gray-300 px-[14px] py-2 rounded-full hover:bg-opacity-50"
+            ></i>
+        </slot>
     </button>
-
     {#if isOpen}
         <ul
-            class="menu absolute bg-white border rounded-l-xl rounded-b-xl shadow-md z-10 right-0 overflow-hidden"
+            class="menu absolute bg-white border rounded-l-xl rounded-b-xl shadow-md right-0 overflow-hidden text-black"
             class:none={isOpen}
+            style="z-index: 1001"
         >
             {#each items as item}
                 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
                 <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
                 <li
-                    class="menu-item p-4 cursor-pointer hover:bg-gray-100 focus:bg-gray-200 transition-colors"
+                    class="menu-item flex items-center p-4 cursor-pointer hover:bg-gray-100 focus:bg-gray-200 transition-colors"
                     tabindex="0"
                     on:mouseup|stopPropagation={() => handleItemClick(item)}
                     on:keydown|stopPropagation={() => handleItemClick(item)}
                 >
+                    {#if item.icon}
+                        <i class="fa fa-{item.icon} mr-6"></i>
+                    {/if}
                     {item.text}
                 </li>
             {/each}

web/src/lib/components/base/select.svelte

@@ -7,9 +7,9 @@
 
 <div>
     {#if label.length}
-        <p class="text-sm font-medium pb-1">
+        <label for={name} class="text-sm font-medium pb-1">
             {label}
-        </p>
+        </label>
     {/if}
     <select
         {name}

web/src/lib/components/base/text_field.svelte

@@ -5,13 +5,19 @@
     export let label: string = "";
     export let error: string = "";
     export let icon: string = "";
+    export let extraClasses: string = "";
+    export let type: "text" | "password" = "text";
+
+    function typeAction(node: HTMLInputElement) {
+        node.type = type;
+    }
 </script>
 
 <div>
     {#if label.length}
-        <p class="text-sm font-medium pb-1">
+        <label for={name} class="text-sm font-medium pb-1">
             {label}
-        </p>
+        </label>
     {/if}
     <div class="flex items-center gap-2">
         {#if icon.length > 0}
@@ -19,10 +25,10 @@
         {/if}
         <input
             {name}
-            class="bg-gray-50 border rounded-md p-3 transition-colors focus:border-primary focus:outline-none focus:ring-0 w-full"
+            class="bg-gray-50 border rounded-md p-3 transition-colors focus:border-primary focus:outline-none focus:ring-0 w-full {extraClasses}"
             class:border-red-400={error.length > 0}
             class:bg-red-50={error.length > 0}
-            type="text"
+            use:typeAction
             bind:value
             on:change
             {placeholder}

web/src/lib/components/base/toast.svelte

@@ -1,27 +1,44 @@
 <script lang="ts">
     import { toast } from "$lib/stores/toast_store";
+    import { fade } from "svelte/transition";
 
-    $: getBackgroundColor = () => {
-        if ($toast && $toast.type == "success") {
-            return "green-200";
-        }
-        return "";
-    };
-
-    $: getBorderColor = () => {
-        if ($toast && $toast.type == "success") {
-            return "green-500";
-        }
-        return "";
-    };
+    function closeToast() {
+        toast.set(null);
+    }
 </script>
 
 {#if $toast}
     <div
-        class="fixed px-8 py-4 shadow-xl rounded-xl border bottom-4 right-4 bg-{getBackgroundColor()} border-{getBorderColor()}"
-        style="z-index: 1000;"
+        class="fixed px-4 py-3 shadow-xl rounded-xl border bottom-4 right-4 bg-white text-gray-500 flex items-center"
+        style="z-index: 1001;"
+        in:fade={{ duration: 250 }}
+        out:fade={{ duration: 250 }}
     >
-        <i class="fa fa-{$toast.icon} mr-2"></i>
-        <span>{$toast.text}</span>
+        <span>
+            <i
+                class="fa fa-{$toast.icon} p-3 mr-2 rounded-lg"
+                class:success-toast={$toast.type == "success"}
+                class:error-toast={$toast.type == "error"}
+            ></i>{$toast.text}</span
+        >
+        <button
+            type="button"
+            class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white ml-6"
+            on:click={closeToast}
+        >
+            <i class="fa fa-close"></i>
+            <span class="sr-only">Close modal</span>
+        </button>
     </div>
 {/if}
+
+<style>
+    .success-toast {
+        color: #10b981;
+        background-color: #a7f3d0;
+    }
+    .error-toast {
+        color: #ef4444;
+        background-color: #fecaca;
+    }
+</style>

web/src/lib/components/base/toggle.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+    export let name: string = "";
+    export let value: boolean = false;
+    export let label: string = "";
+    export let error: string = "";
+</script>
+
+<label class="relative my-2 inline-flex items-center cursor-pointer">
+    <input {name} bind:checked={value} type="checkbox" class="sr-only peer" value="1"/>
+    <div
+        class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-gray-400 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary"
+    ></div>
+    <span class="ms-3 text-sm font-medium">{label}</span>
+</label>
+
+<span class="toggle-error text-xs text-red-400">
+    {error}
+</span>

web/src/lib/components/footer.svelte

@@ -1,5 +1,5 @@
 <script>
-    import LogoTextLight from "./logo_text_light.svelte";
+    import LogoTextLight from "./logo/logo_text_light.svelte";
 </script>
 
 <footer class="bg-primary text-white w-full grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-y-8 p-12 mt-12 rounded-t-3xl">

web/src/lib/components/nav_bar.svelte

@@ -1,18 +1,47 @@
-<script>
-    import Avatar from "./avatar.svelte";
-    import LogoText from "./logo_text.svelte";
+<script lang="ts">
+    import { goto } from "$app/navigation";
+    import LogoText from "$lib/components/logo/logo_text.svelte";
+    import { logout, currentUser } from "$lib/stores/user_store";
+    import Dropdown from "./base/dropdown.svelte";
+
+    const dropdownItems = [
+        { text: "Profile", value: "profile", icon: "user" },
+        { text: "Logout", value: "logout", icon: "right-from-bracket" },
+    ];
+
+    function handleDropdownClick(item: { text: string; value: any }) {
+        if (item.value == "logout") {
+            logout();
+            goto("/login");
+        }
+    }
 </script>
 
 <nav class="flex justify-between items-center p-6">
     <a href="/"><LogoText></LogoText></a>
-    <menu class="flex gap-8">
-        <a class="font-semibold" href="">Trails</a>
-        <a class="font-semibold" href="">Map</a>
-        <a class="font-semibold" href="">Categories</a>
-        <a class="font-semibold" href="">Favorites</a>
-    </menu>
-    <div class="flex gap-6 items-center">
-        <a class="btn-primary btn-large" href="/trail/edit/new"><i class="fa fa-plus mr-2"></i>New Trail</a>
-        <Avatar></Avatar>
-    </div>
+    {#if $currentUser}
+        <menu class="flex gap-8">
+            <a class="font-semibold" href="">Trails</a>
+            <a class="font-semibold" href="">Map</a>
+            <a class="font-semibold" href="">Categories</a>
+            <a class="font-semibold" href="">Favorites</a>
+        </menu>
+        <div class="flex gap-6 items-center">
+            <a class="btn-primary btn-large" href="/trail/edit/new"
+                ><i class="fa fa-plus mr-2"></i>New Trail</a
+            >
+            <Dropdown
+                items={dropdownItems}
+                on:change={(e) => handleDropdownClick(e.detail)}
+            >
+                <img
+                    class="w-12 h-h12 rounded-full"
+                    src="https://api.dicebear.com/7.x/initials/svg?seed={$currentUser.username}&backgroundType=gradientLinear"
+                    alt=""
+                />
+            </Dropdown>
+        </div>
+    {:else}
+        <a class="btn-primary btn-large" href="/login">Login</a>
+    {/if}
 </nav>

web/src/lib/components/summit_log/summit_log_modal.svelte

@@ -22,7 +22,7 @@
             closeModal!();
         },
     });
-    $: form.set(util.cloneDeep($summitLog));
+    $: form.set(util.cloneDeep($summitLog));    
 </script>
 
 <Modal

web/src/lib/constants.ts

@@ -1,6 +0,0 @@
-import PocketBase from 'pocketbase';
-import { env } from "$env/dynamic/public";
-
-const pb = new PocketBase(env.PUBLIC_DB_HOST);
-
-export { pb }

web/src/lib/models/trail.ts

@@ -7,6 +7,7 @@ class Trail {
     id?: string;
     name: string;
     location?: string;
+    public: boolean;
     distance?: number;
     elevation_gain?: number;
     duration?: number;
@@ -28,6 +29,7 @@ class Trail {
         params?: {
             id?: string,
             location?: string,
+            public?: boolean,
             distance?: number,
             elevation_gain?: number,
             duration?: number,
@@ -45,6 +47,7 @@ class Trail {
         this.id = params?.id;
         this.name = name;
         this.location = params?.location;
+        this.public = params?.public ?? false
         this.distance = params?.distance;
         this.elevation_gain = params?.elevation_gain;
         this.duration = params?.duration;

web/src/lib/pocketbase.ts

@@ -0,0 +1,8 @@
+import { PUBLIC_POCKETBASE_URL } from '$env/static/public'
+import PocketBase from 'pocketbase'
+
+export function createInstance() {
+  return new PocketBase(PUBLIC_POCKETBASE_URL)
+}
+
+export const pb = createInstance()

web/src/lib/stores/category_store.ts

@@ -1,4 +1,4 @@
-import { pb } from "$lib/constants";
+import { pb } from "$lib/pocketbase";
 import type { Category } from "$lib/models/category";
 import { writable, type Writable } from "svelte/store";
 

web/src/lib/stores/summit_log_store.ts

@@ -1,4 +1,4 @@
-import { pb } from "$lib/constants";
+import { pb } from "$lib/pocketbase";
 import { SummitLog } from "$lib/models/summit_log";
 import { writable, type Writable } from "svelte/store";
 
@@ -12,9 +12,17 @@ export async function summit_logs_create(bodyParams?: { [key: string]: any; } |
     return model;
 }
 
+export async function summit_logs_update(updatedSummitLog: SummitLog) {
+    const model = await pb
+        .collection("summit_logs")
+        .update(updatedSummitLog.id!, updatedSummitLog);
+
+    return model;
+}
+
 export async function summit_logs_delete(id: string) {
     const success = await pb
-        .collection("summit_logs_delete")
+        .collection("summit_logs")
         .delete(id);
 
     return success;

web/src/lib/stores/toast_store.ts

@@ -7,4 +7,11 @@ export type Toast = {
 }
 
 
-export const toast: Writable<Toast> = writable();
+export const toast: Writable<Toast | null> = writable();
+
+
+export function show_toast(newToast: Toast, duration: number = 3000) {
+    toast.set(newToast);
+
+    setTimeout(() => toast.set(null), duration);
+}

web/src/lib/stores/trail_store.ts

@@ -1,11 +1,12 @@
-import { pb } from "$lib/constants";
-import { Trail } from "$lib/models/trail";
-import { getFileURL } from "$lib/util/file_util";
-import { writable, type Writable } from "svelte/store";
-import { waypoints_create, waypoints_delete } from "./waypoint_store";
-import { summit_logs_create, summit_logs_delete } from "./summit_log_store";
-import type { Waypoint } from "$lib/models/waypoint";
 import type { SummitLog } from "$lib/models/summit_log";
+import { Trail } from "$lib/models/trail";
+import type { Waypoint } from "$lib/models/waypoint";
+import { pb } from "$lib/pocketbase";
+import { getFileURL } from "$lib/util/file_util";
+import { util } from "$lib/vendor/svelte-form-lib/util";
+import { writable, type Writable } from "svelte/store";
+import { summit_logs_create, summit_logs_delete, summit_logs_update } from "./summit_log_store";
+import { waypoints_create, waypoints_delete, waypoints_update } from "./waypoint_store";
 
 export const trails: Writable<Trail[]> = writable([])
 export const trail: Writable<Trail> = writable(new Trail(""));
@@ -25,7 +26,7 @@ export async function trails_index() {
 }
 
 export async function trails_show(id: string, loadGPX?: boolean) {
-    const response: Trail = await pb.collection('trails').getOne<Trail>(id, { expand: "category,waypoints,summit_logs" })
+    const response: Trail = await pb.collection('trails').getOne<Trail>(id, { expand: "category,waypoints,summit_logs" })  
 
     if (loadGPX) {
         const gpxData: string = await fetchGPX(response);
@@ -45,6 +46,11 @@ export async function trails_show(id: string, loadGPX?: boolean) {
 }
 
 export async function trails_create(trail: Trail, formData: { [key: string]: any; } | FormData) {
+
+    if (!pb.authStore.model) {
+        throw new Error("Unauthenticated");
+        ;
+    }
     formData.set("category", trail.expand.category!.id);
 
     for (const file of trail._photoFiles) {
@@ -62,6 +68,13 @@ export async function trails_create(trail: Trail, formData: { [key: string]: any
         const model = await summit_logs_create(summitLog);
         formData.append("summit_logs", model.id!);
     }
+
+    if (!formData.get("public")) {
+        formData.set("public", 0);
+    }
+
+    formData.append("author", pb.authStore.model!.id);
+
     let model = await pb
         .collection("trails")
         .create<Trail>(formData);
@@ -93,6 +106,13 @@ export async function trails_update(oldTrail: Trail, newTrail: Trail, formData:
         formData.append("waypoints+", model.id!);
     }
 
+    for (const updatedWaypoint of waypointUpdates.updated) {
+        const model = await waypoints_update({
+            ...updatedWaypoint,
+            marker: undefined,
+        });
+    }
+
     for (const deletedWaypoint of waypointUpdates.deleted) {
         const success = await waypoints_delete(deletedWaypoint.id!);
     }
@@ -104,6 +124,10 @@ export async function trails_update(oldTrail: Trail, newTrail: Trail, formData:
         formData.append("summit_logs+", model.id!);
     }
 
+    for (const updatedSummitLog of summitLogUpdates.updated) {
+        const model = await summit_logs_update(updatedSummitLog);
+    }
+
     for (const deletedSummitLog of summitLogUpdates.deleted) {
         const success = await summit_logs_delete(deletedSummitLog.id!);
     }
@@ -122,6 +146,10 @@ export async function trails_update(oldTrail: Trail, newTrail: Trail, formData:
         formData.delete("gpx");
     }
 
+    if (!formData.get("public")) {
+        formData.set("public", 0);
+    }
+
     const thumbnailIndex = newTrail.photos.findIndex(
         (p) => p == newTrail.thumbnail,
     );
@@ -137,7 +165,7 @@ export async function trails_update(oldTrail: Trail, newTrail: Trail, formData:
 
     model = await pb
         .collection("trails")
-        .update<Trail>(model.id!, { thumbnail: thumbnail });
+        .update<Trail>(model.id!, { thumbnail: thumbnail }, { expand: "category,waypoints,summit_logs" });
 
     trail.set(model);
 
@@ -145,10 +173,21 @@ export async function trails_update(oldTrail: Trail, newTrail: Trail, formData:
 }
 
 
-export async function trails_delete(id: string) {
+export async function trails_delete(trail: Trail) {
+    if (trail.expand.waypoints) {
+        for (const waypoint of trail.expand.waypoints) {
+            waypoints_delete(waypoint.id!);
+        }
+    }
+    if (trail.expand.summit_logs) {
+        for (const summit_log of trail.expand.summit_logs) {
+            summit_logs_delete(summit_log.id!);
+        }
+    }
+
     const success = await pb
         .collection("trails")
-        .delete(id);
+        .delete(trail.id!);
 
     return success;
 }
@@ -173,12 +212,22 @@ function setFileURLs(trail: Trail) {
 }
 
 function compareObjectArrays<T extends { id?: string }>(oldArray: T[], newArray: T[]) {
-    const newObjects = newArray.filter(newObj => !oldArray.find(oldObj => oldObj.id === newObj.id));
+    const newObjects = [];
+    const updatedObjects = [];
+    for (const newObj of newArray) {
+        const oldObj = oldArray.find(oldObj => oldObj.id === newObj.id)
+        if (!oldObj) {
+            newObjects.push(newObj);
+        } else if (!util.deepEqual(newObj, oldObj)) {
+            updatedObjects.push(newObj);
+        }
+    }
     const deletedObjects = oldArray.filter(oldObj => !newArray.find(newObj => newObj.id === oldObj.id));
 
     return {
         added: newObjects,
-        deleted: deletedObjects
+        deleted: deletedObjects,
+        updated: updatedObjects
     };
 }
 

web/src/lib/stores/user_store.ts

@@ -0,0 +1,25 @@
+import { pb } from "$lib/pocketbase";
+import { type AuthModel } from 'pocketbase';
+import { writable, type Writable } from "svelte/store";
+
+export type User = {
+    username?: string,
+    email?: string,
+    password: string,
+}
+
+export const currentUser: Writable<AuthModel | null> = writable<AuthModel | null>()
+
+export async function users_create(user: User) {
+    const model = await pb.collection('users').create({ ...user, passwordConfirm: user.password });
+
+    return model;
+}
+
+export async function login(user: User) {
+    const authData = await pb.collection('users').authWithPassword(user.email ?? user.username!, user.password);
+}
+
+export async function logout() {
+    pb.authStore.clear();
+}

web/src/lib/stores/waypoint_store.ts

@@ -1,4 +1,4 @@
-import { pb } from "$lib/constants";
+import { pb } from "$lib/pocketbase";
 import { Waypoint } from "$lib/models/waypoint";
 import { writable, type Writable } from "svelte/store";
 
@@ -13,6 +13,14 @@ export async function waypoints_create(bodyParams?: { [key: string]: any; } | Fo
     return model;
 }
 
+export async function waypoints_update(updatedWaypoint: Waypoint) {
+    const model = await pb
+        .collection("waypoints")
+        .update(updatedWaypoint.id!, updatedWaypoint);
+
+    return model;
+}
+
 export async function waypoints_delete(id: string) {
     const success = await pb
         .collection("waypoints")

web/src/lib/util/file_util.ts

@@ -1,4 +1,4 @@
-import { pb } from "$lib/constants";
+import { pb } from "$lib/pocketbase";
 import type { FileOptions } from "pocketbase";
 
 export function getFileURL(record: { [key: string]: any; }, filename?: string, options?: FileOptions) {