adds user management

web/src/routes/+layout.svelte

@@ -1,7 +1,7 @@
 <script>
     import Toast from "$lib/components/base/toast.svelte";
     import Footer from "$lib/components/footer.svelte";
-import NavBar from "$lib/components/nav_bar.svelte";
+    import NavBar from "$lib/components/nav_bar.svelte";
     import "../app.css";
     import "../components.css"
     import '@fortawesome/fontawesome-free/css/all.min.css'

web/src/routes/+page.svelte

@@ -10,6 +10,7 @@
         trails_delete,
         trails_index,
     } from "$lib/stores/trail_store";
+    import { currentUser } from "$lib/stores/user_store";
     import { waypoints_delete } from "$lib/stores/waypoint_store";
 
     async function handleDropdownClick(
@@ -19,18 +20,7 @@
         if (item.value == "edit") {
             goto(`/trail/edit/${currentTrail.id}`);
         } else if (item.value == "delete") {
-            if (currentTrail.expand.waypoints) {
-                for (const waypoint of currentTrail.expand.waypoints) {
-                    waypoints_delete(waypoint.id!);
-                }
-            }
-            if (currentTrail.expand.summit_logs) {
-                for (const summit_log of currentTrail.expand.summit_logs) {
-                    summit_logs_delete(summit_log.id!);
-                }
-            }
-
-            await trails_delete(currentTrail.id!);
+            await trails_delete(currentTrail);
             await trails_index();
         }
     }
@@ -51,7 +41,7 @@
     </div>
 </section>
 <section class="max-w-7xl mx-auto mt-8 px-8 xl:px-0">
-    <h2 class="text-5xl md:text-6xl font-bold text-primary">Your trails</h2>
+    <h2 class="text-5xl md:text-6xl font-bold text-primary">{$currentUser ? 'Your' : 'Explore'} trails</h2>
     <div
         id="trails"
         class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 justify-items-center gap-8 py-8"

web/src/routes/login/+page.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+    import { goto } from "$app/navigation";
+    import Button from "$lib/components/base/button.svelte";
+    import TextField from "$lib/components/base/text_field.svelte";
+    import LogoTextTwoLine from "$lib/components/logo/logo_text_two_line.svelte";
+    import { show_toast } from "$lib/stores/toast_store";
+    import { login, type User } from "$lib/stores/user_store";
+    import { createForm } from "$lib/vendor/svelte-form-lib";
+    import { ClientResponseError } from "pocketbase";
+    import { object, string } from "yup";
+
+    let loading: boolean = false;
+    const { form, errors, handleChange, handleSubmit } = createForm<User>({
+        initialValues: {
+            username: "",
+            password: "",
+        },
+        validationSchema: object<User>({
+            username: string().required("Required"),
+            password: string().required("Required"),
+        }),
+        onSubmit: async (newUser) => {
+            loading = true;
+            try {
+                await login(newUser);
+                goto(`/`);
+            } catch (e) {
+                if (
+                    e instanceof ClientResponseError &&
+                    e.message == "Failed to authenticate."
+                ) {
+                    show_toast({
+                        icon: "close",
+                        type: "error",
+                        text: "Wrong username or password.",
+                    });
+                } else {
+                    show_toast({
+                        icon: "close",
+                        type: "error",
+                        text: "Error during login.",
+                    });
+                }
+            } finally {
+                loading = false;
+            }
+        },
+    });
+</script>
+
+<main class="flex justify-center">
+    <form
+        class="login-panel max-w-md shadow-lg rounded-xl p-8 flex flex-col justify-center items-center gap-8 w-[28rem] mt-8"
+        on:submit={handleSubmit}
+    >
+        <LogoTextTwoLine></LogoTextTwoLine>
+        <h4 class="text-xl font-semibold">Save your adventures!</h4>
+        <div class="space-y-6 w-80">
+            <TextField
+                name="username"
+                label="Username/Email"
+                bind:value={$form.username}
+                on:change={handleChange}
+                error={$errors.username}
+            ></TextField>
+            <TextField
+                name="password"
+                label="Password"
+                type="password"
+                bind:value={$form.password}
+                on:change={handleChange}
+                error={$errors.password}
+            ></TextField>
+            <Button
+                primary={true}
+                extraClasses={"min-w-full"}
+                type="submit"
+                {loading}>Login</Button
+            >
+        </div>
+        <span
+            >Don't have an account? <a
+                class="text-blue-500 underline"
+                href="/register">Make one!</a
+            ></span
+        >
+    </form>
+</main>

web/src/routes/register/+page.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+    import { goto } from "$app/navigation";
+    import Button from "$lib/components/base/button.svelte";
+    import TextField from "$lib/components/base/text_field.svelte";
+    import LogoTextTwoLine from "$lib/components/logo/logo_text_two_line.svelte";
+    import { show_toast } from "$lib/stores/toast_store";
+    import { users_create, type User, login } from "$lib/stores/user_store";
+    import { createForm } from "$lib/vendor/svelte-form-lib";
+    import { object, string } from "yup";
+
+    let loading: boolean = false;
+    const { form, errors, handleChange, handleSubmit } = createForm<User>({
+        initialValues: {
+            username: "",
+            email: "",
+            password: "",
+        },
+        validationSchema: object<User>({
+            username: string().required("Required"),
+            email: string().email().required("Required"),
+            password: string()
+                .min(8, "Must be at least 8 characters long")
+                .required("Required"),
+        }),
+        onSubmit: async (newUser) => {
+            loading = true;
+            try {
+                await users_create(newUser);
+            } catch (e) {
+                show_toast({
+                    icon: "close",
+                    type: "error",
+                    text: "Error creating user.",
+                });
+            } finally {
+                loading = false;
+            }
+            try {
+                await login(newUser);
+                goto(`/`);
+            } catch (e) {
+                show_toast({
+                    icon: "close",
+                    type: "error",
+                    text: "Error during login.",
+                });
+            } finally {
+                loading = false;
+            }
+        },
+    });
+</script>
+
+<main class="flex justify-center">
+    <form
+        class="login-panel max-w-md shadow-lg rounded-xl p-8 flex flex-col justify-center items-center gap-8 w-[28rem] mt-8"
+        on:submit={handleSubmit}
+    >
+        <LogoTextTwoLine></LogoTextTwoLine>
+        <h4 class="text-xl font-semibold">Save your adventures!</h4>
+        <div class="space-y-6 w-80">
+            <TextField
+                name="username"
+                label="Username"
+                bind:value={$form.username}
+                on:change={handleChange}
+                error={$errors.username}
+            ></TextField>
+            <TextField
+                name="email"
+                label="Email"
+                bind:value={$form.email}
+                on:change={handleChange}
+                error={$errors.email}
+            ></TextField>
+            <TextField
+                name="password"
+                label="Password"
+                type="password"
+                bind:value={$form.password}
+                on:change={handleChange}
+                error={$errors.password}
+            ></TextField>
+            <Button
+                primary={true}
+                extraClasses={"min-w-full"}
+                type="submit"
+                {loading}>Register</Button
+            >
+        </div>
+        <span
+            >Already have an account? <a
+                class="text-blue-500 underline"
+                href="/login">Login!</a
+            ></span
+        >
+    </form>
+</main>

web/src/routes/trail/edit/[id]/+page.svelte

@@ -3,6 +3,7 @@
     import Select from "$lib/components/base/select.svelte";
     import TextField from "$lib/components/base/text_field.svelte";
     import Textarea from "$lib/components/base/textarea.svelte";
+    import Toggle from "$lib/components/base/toggle.svelte";
     import PhotoCard from "$lib/components/photo_card.svelte";
     import SummitLogCard from "$lib/components/summit_log/summit_log_card.svelte";
     import SummitLogModal from "$lib/components/summit_log/summit_log_modal.svelte";
@@ -13,7 +14,7 @@
     import { Waypoint } from "$lib/models/waypoint";
     import { categories } from "$lib/stores/category_store";
     import { summitLog } from "$lib/stores/summit_log_store";
-    import { toast } from "$lib/stores/toast_store";
+    import { show_toast } from "$lib/stores/toast_store";
     import {
         trail,
         trails_create,
@@ -84,9 +85,19 @@
                     await trails_update($trail, submittedTrail, formData);
                 }
 
-                toast.set({type: "success", "icon": "check", "text": "Trail saved successfully!"})
+                show_toast({
+                    type: "success",
+                    icon: "check",
+                    text: "Trail saved successfully.",
+                });
             } catch (e) {
                 console.error(e);
+
+                show_toast({
+                    type: "error",
+                    icon: "close",
+                    text: "Error saving trail.",
+                });
             } finally {
                 loading = false;
             }
@@ -304,6 +315,7 @@
         e: CustomEvent<{ text: string; value: string }>,
     ) {
         if (e.detail.value === "edit") {
+            currentSummitLog.date = format(currentSummitLog.date, "yyyy-MM-dd");
             summitLog.set(currentSummitLog);
             openSummitLogModal();
         } else if (e.detail.value === "delete") {
@@ -375,12 +387,15 @@
             label="Describe your trail"
             bind:value={$form.description}
         ></Textarea>
-        <Select
-            name="category"
-            label="Category"
-            bind:value={$form.expand.category}
-            items={$categories.map((c) => ({ text: c.name, value: c }))}
-        ></Select>
+        {#if $form.expand.category}
+            <Select
+                name="category"
+                label="Category"
+                bind:value={$form.expand.category.id}
+                items={$categories.map((c) => ({ text: c.name, value: c.id }))}
+            ></Select>
+        {/if}
+        <Toggle name="public" label="Public" bind:value={$form.public}></Toggle>
         <hr />
         <h3 class="text-xl font-semibold">Waypoints</h3>
         <ul>

web/src/routes/trail/view/[id]/+page.svelte

@@ -1,8 +1,14 @@
 <script lang="ts">
+    import { goto } from "$app/navigation";
+    import Dropdown from "$lib/components/base/dropdown.svelte";
     import SummitLogCard from "$lib/components/summit_log/summit_log_card.svelte";
     import Tabs from "$lib/components/tabs.svelte";
     import WaypointCard from "$lib/components/waypoint/waypoint_card.svelte";
-    import { trail } from "$lib/stores/trail_store";
+    import {
+        trail,
+        trails_delete,
+        trails_index,
+    } from "$lib/stores/trail_store";
     import { formatMeters, formatTimeHHMM } from "$lib/util/format_util";
     import { createMarkerFromWaypoint } from "$lib/util/leaflet_util";
     import type { Icon, Marker } from "leaflet";
@@ -12,6 +18,7 @@
     import PhotoSwipeLightbox from "photoswipe/lightbox";
     import "photoswipe/style.css";
     import { onMount } from "svelte";
+    import { fade } from "svelte/transition";
 
     const tabs = ["Description", "Waypoints", "Photos", "Summit book"];
 
@@ -22,6 +29,11 @@
     let lightbox: PhotoSwipeLightbox;
     let lightboxDataSource: DataSource;
 
+    const dropdownItems = [
+        { text: "Edit", value: "edit" },
+        { text: "Delete", value: "delete" },
+    ];
+
     onMount(async () => {
         const L = (await import("leaflet")).default;
         await import("leaflet-gpx");
@@ -109,17 +121,23 @@
     function openGallery(idx: number) {
         lightbox?.loadAndOpen(idx, lightboxDataSource);
     }
+
+    async function handleDropdownClick(item: { text: string; value: any }) {
+        if (item.value == "edit") {
+            goto(`/trail/edit/${$trail.id}`);
+        } else if (item.value == "delete") {
+            await trails_delete($trail);
+            await trails_index();
+            goto(`/`);
+        }
+    }
 </script>
 
 <div
     class="trail-panel max-w-5xl mx-auto shadow-2xl rounded-3xl overflow-hidden"
 >
     <section class="relative h-80">
-        <img
-            class="w-full h-80"
-            src={$trail.thumbnail}
-            alt=""
-        />
+        <img class="w-full h-80" src={$trail.thumbnail} alt="" />
         <div
             class="absolute bottom-0 w-full h-1/2 bg-gradient-to-b from-transparent to-black opacity-50"
         ></div>
@@ -132,6 +150,13 @@
                 {$trail.location}
             </h3>
         </div>
+        <div class="absolute text-white bottom-8 right-8">
+            <Dropdown
+                size="2xl"
+                items={dropdownItems}
+                on:change={(e) => handleDropdownClick(e.detail)}
+            ></Dropdown>
+        </div>
     </section>
     <section
         class="grid grid-cols-2 sm:grid-cols-4 gap-y-4 justify-around py-8"
@@ -154,12 +179,14 @@
                 >{formatTimeHHMM($trail.duration)}</span
             >
         </div>
-        <div class="flex flex-col items-center">
-            <span>Category</span>
-            <span class="font-semibold text-lg"
-                >{$trail.expand.category.name}</span
-            >
-        </div>
+        {#if $trail.expand.category}
+            <div class="flex flex-col items-center">
+                <span>Category</span>
+                <span class="font-semibold text-lg"
+                    >{$trail.expand.category.name}</span
+                >
+            </div>
+        {/if}
     </section>
     {#if $trail.tags && $trail.tags.length > 0}
         <hr />
@@ -206,9 +233,11 @@
                     </div>
                 {/if}
                 {#if activeTab == 3}
-                    {#each $trail.expand.summit_logs ?? [] as log}
-                        <SummitLogCard {log}></SummitLogCard>
-                    {/each}
+                    <ul>
+                        {#each $trail.expand.summit_logs ?? [] as log}
+                            <li><SummitLogCard {log}></SummitLogCard></li>
+                        {/each}
+                    </ul>
                 {/if}
             </div>
             <div

web/src/routes/trail/view/[id]/+page.ts

@@ -2,5 +2,9 @@ import { trails_show } from "$lib/stores/trail_store";
 import type { Load } from "@sveltejs/kit";
 
 export const load: Load = async ({ params }) => {
-    await trails_show(params.id!, true)
+    try {
+        await trails_show(params.id!, true)
+    }catch(e) {
+        
+    }
 };