adds profile sharing

web/src/lib/components/nav_bar.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import { afterNavigate, goto } from "$app/navigation";
+    import { page } from "$app/stores";
     import LogoText from "$lib/components/logo/logo_text.svelte";
     import { theme, toggleTheme } from "$lib/stores/theme_store";
     import { currentUser, logout } from "$lib/stores/user_store";
@@ -10,8 +11,6 @@
     import Drawer from "./base/drawer.svelte";
     import Dropdown from "./base/dropdown.svelte";
     import LogoTextLight from "./logo/logo_text_light.svelte";
-    import { page } from "$app/stores";
-    import NotificationCard from "./notification/notification_card.svelte";
     import NotificationDropdown from "./notification/notification_dropdown.svelte";
 
     let navBarItems = [

web/src/lib/components/profile/profile_share_modal.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+    import { page } from "$app/stores";
+    import Modal from "$lib/components/base/modal.svelte";
+    import QrCodeWithLogo from "$lib/vendor/qr-code-with-logos";
+    import { onMount } from "svelte";
+    import { _ } from "svelte-i18n";
+    import TextField from "../base/text_field.svelte";
+    import { show_toast } from "$lib/stores/toast_store";
+
+    export let openModal: (() => void) | undefined = undefined;
+    export let closeModal: (() => void) | undefined = undefined;
+
+    let qrcode: any | null = null;
+
+    onMount(() => {
+        qrcode = new QrCodeWithLogo({
+            content: $page.url.href,
+            image: document.getElementById("qrcode") as HTMLImageElement,
+            logo: {
+                src: "/favicon.png",
+            },
+        });
+    });
+
+    function copyURLToClipboard() {
+        navigator.clipboard.writeText($page.url.href);
+        show_toast({
+            text: $_("link-copied"),
+            icon: "circle-info",
+            type: "info",
+        });
+    }
+
+    function downloadQRCode() {
+        if (!qrcode) {
+            return;
+        }
+        qrcode.downloadImage();
+    }
+</script>
+
+<Modal
+    id="password-modal"
+    size="max-w-xl"
+    title={$_("share-profile")}
+    bind:openModal
+    bind:closeModal
+>
+    <div class="flex" slot="content">
+        <div class="space-y-2">
+            <img class="w-64" id="qrcode" alt="QR Code" />
+            <button
+                class="btn-secondary w-full"
+                on:click={() => downloadQRCode()}
+            >
+                <i class="fa fa-download mr-2"></i>
+                <span>{$_("download")}</span>
+            </button>
+        </div>
+        <div class="space-y-4">
+            <p>
+                Send this link or the QR code on the left to someone to share
+                your profile.
+            </p>
+            <div class="flex gap-x-2 items-center">
+                <div class="basis-full">
+                    <TextField value={$page.url.href} disabled></TextField>
+                </div>
+                <button class="btn-icon" on:click={copyURLToClipboard}>
+                    <i class="fa-regular fa-copy"></i>
+                </button>
+            </div>
+        </div>
+    </div>
+</Modal>

web/src/lib/i18n/locales/de.json

@@ -71,6 +71,7 @@
   "display-as": "Anzeigen als",
   "distance": "Distanz",
   "documentation": "Dokumentation",
+  "download": "",
   "draw-a-route": "Route zeichnen",
   "driving": "Auto",
   "duration": "Dauer",
@@ -236,6 +237,7 @@
   "settings-privacy-trails-private": "",
   "settings-privacy-trails-public": "",
   "share": "Teilen",
+  "share-profile": "",
   "share-this-list": "Diese Liste teilen",
   "share-this-trail": "Diese Route teilen",
   "shared": "Geteilt",

web/src/lib/i18n/locales/en.json

@@ -71,6 +71,7 @@
   "display-as": "Display as",
   "distance": "Distance",
   "documentation": "Documentation",
+  "download": "Download",
   "draw-a-route": "Draw a route",
   "driving": "Driving",
   "duration": "Duration",
@@ -236,6 +237,7 @@
   "settings-privacy-trails-private": "Your trails are private by default. No one except you will be able to see them. You can change this setting at any point for individual trails.",
   "settings-privacy-trails-public": "Your trails are public by default. Everyone will be able to see them. You can change this setting at any point for individual trails.",
   "share": "Share",
+  "share-profile": "Share profile",
   "share-this-list": "Share this list",
   "share-this-trail": "Share this trail",
   "shared": "Shared",

web/src/lib/i18n/locales/fr.json

@@ -71,6 +71,7 @@
   "display-as": "Afficher en tant que",
   "distance": "Distance",
   "documentation": "Documentation",
+  "download": "",
   "draw-a-route": "",
   "driving": "",
   "duration": "",
@@ -236,6 +237,7 @@
   "settings-privacy-trails-private": "",
   "settings-privacy-trails-public": "",
   "share": "",
+  "share-profile": "",
   "share-this-list": "",
   "share-this-trail": "",
   "shared": "",

web/src/lib/i18n/locales/hu.json

@@ -71,6 +71,7 @@
   "display-as": "Megjelenítés mint",
   "distance": "Távolság",
   "documentation": "Dokumentáció",
+  "download": "",
   "draw-a-route": "",
   "driving": "",
   "duration": "",
@@ -236,6 +237,7 @@
   "settings-privacy-trails-private": "",
   "settings-privacy-trails-public": "",
   "share": "",
+  "share-profile": "",
   "share-this-list": "",
   "share-this-trail": "",
   "shared": "",

web/src/lib/i18n/locales/it.json

@@ -71,6 +71,7 @@
   "display-as": "Visualizza come",
   "distance": "Distanza",
   "documentation": "Documentazione",
+  "download": "",
   "draw-a-route": "Disegna un percorso",
   "driving": "Guida",
   "duration": "",
@@ -236,6 +237,7 @@
   "settings-privacy-trails-private": "",
   "settings-privacy-trails-public": "",
   "share": "Condividi",
+  "share-profile": "",
   "share-this-list": "",
   "share-this-trail": "Condividi questo percorso",
   "shared": "",

web/src/lib/i18n/locales/nl.json

@@ -71,6 +71,7 @@
   "display-as": "Tonen als",
   "distance": "Afstand",
   "documentation": "Documentatie",
+  "download": "",
   "draw-a-route": "",
   "driving": "",
   "duration": "",
@@ -236,6 +237,7 @@
   "settings-privacy-trails-private": "",
   "settings-privacy-trails-public": "",
   "share": "",
+  "share-profile": "",
   "share-this-list": "",
   "share-this-trail": "",
   "shared": "",

web/src/lib/i18n/locales/pl.json

@@ -71,6 +71,7 @@
   "display-as": "Wyświetl jako",
   "distance": "Dystans",
   "documentation": "Dokumentacja",
+  "download": "",
   "draw-a-route": "",
   "driving": "",
   "duration": "",
@@ -236,6 +237,7 @@
   "settings-privacy-trails-private": "",
   "settings-privacy-trails-public": "",
   "share": "",
+  "share-profile": "",
   "share-this-list": "",
   "share-this-trail": "",
   "shared": "",

web/src/lib/i18n/locales/pt.json

@@ -71,6 +71,7 @@
   "display-as": "Exibir como",
   "distance": "Distância",
   "documentation": "Documentação",
+  "download": "",
   "draw-a-route": "",
   "driving": "",
   "duration": "",
@@ -236,6 +237,7 @@
   "settings-privacy-trails-private": "",
   "settings-privacy-trails-public": "",
   "share": "",
+  "share-profile": "",
   "share-this-list": "",
   "share-this-trail": "",
   "shared": "",

web/src/lib/i18n/locales/zh.json

@@ -71,6 +71,7 @@
   "display-as": "显示方式",
   "distance": "距离",
   "documentation": "文档",
+  "download": "",
   "draw-a-route": "",
   "driving": "",
   "duration": "",
@@ -236,6 +237,7 @@
   "settings-privacy-trails-private": "",
   "settings-privacy-trails-public": "",
   "share": "",
+  "share-profile": "",
   "share-this-list": "",
   "share-this-trail": "",
   "shared": "",