svelte-french-toast + translations

package.json

@@ -49,6 +49,7 @@
 		"localforage": "1.10.0",
 		"marked": "2.0.3",
 		"svelte": "3.58.0",
+		"svelte-french-toast": "1.0.4-beta.0",
 		"svelte-i18n": "3.6.0",
 		"tinro": "0.6.12",
 		"toastify-js": "1.12.0",

pnpm-lock.yaml

@@ -2,8 +2,8 @@ lockfileVersion: '6.0'
 
 dependencies:
   '@odit/lfk-client-js':
-    specifier: 1.1.0
-    version: 1.1.0
+    specifier: 1.1.1
+    version: 1.1.1
   '@paralleldrive/cuid2':
     specifier: ^2.2.0
     version: 2.2.0
@@ -31,6 +31,9 @@ dependencies:
   svelte:
     specifier: 3.58.0
     version: 3.58.0
+  svelte-french-toast:
+    specifier: 1.0.4-beta.0
+    version: 1.0.4-beta.0(svelte@3.58.0)
   svelte-i18n:
     specifier: 3.6.0
     version: 3.6.0(svelte@3.58.0)
@@ -510,8 +513,8 @@ packages:
       '@octokit/openapi-types': 16.0.0
     dev: true
 
-  /@odit/lfk-client-js@1.1.0:
-    resolution: {integrity: sha512-yhjsi7YMzL9/fJ7o06yszzw15iZhao3VmX0G9oqZWFwYJd1M2td3Lvm76mXNzTVlbdG6W0W3+eEjcalBdo51Pg==}
+  /@odit/lfk-client-js@1.1.1:
+    resolution: {integrity: sha512-EVwK/kT8VBs0vLk64KgCsHCl2heWHJMWAmZAghEDZWPCPQWX9xL6UzRuKewLXl36/T9YKqZLfDyM5e3WfgLyOg==}
     dev: false
 
   /@odit/license-exporter@0.0.12:
@@ -3443,6 +3446,15 @@ packages:
     engines: {node: '>= 0.4'}
     dev: true
 
+  /svelte-french-toast@1.0.4-beta.0(svelte@3.58.0):
+    resolution: {integrity: sha512-PkYNukEQAPZyV5ei+JzeYEsbaXFSbJS8/SDTdC8giYa5Atxp2SRepFnPDWx6mu7rV53g886FNLktPMLwRljkpw==}
+    peerDependencies:
+      svelte: ^3.57.0
+    dependencies:
+      svelte: 3.58.0
+      svelte-writable-derived: 3.0.1(svelte@3.58.0)
+    dev: false
+
   /svelte-hmr@0.15.1(svelte@3.58.0):
     resolution: {integrity: sha512-BiKB4RZ8YSwRKCNVdNxK/GfY+r4Kjgp9jCLEy0DuqAKfmQtpL38cQK3afdpjw4sqSs4PLi3jIPJIFp259NkZtA==}
     engines: {node: ^12.20 || ^14.13.1 || >= 16}
@@ -3472,6 +3484,14 @@ packages:
     resolution: {integrity: sha512-ITmX/XUiSdkaILmsTviKRkZPaXckM5/FA7Y8BhiUPoamaZG/ZDyOo6ydjFu9fDVFTbwoAUGUi6HBjs+ZdK2AwA==}
     dev: true
 
+  /svelte-writable-derived@3.0.1(svelte@3.58.0):
+    resolution: {integrity: sha512-zBWCS5c3MA9o4NT/UJHP3KoPOhtmH2ZQ/QRK31w9LzLdPP7MNncUcBGIu4iH2RVt17iRfR6agm7nEqwNvsYuMw==}
+    peerDependencies:
+      svelte: ^3.2.1
+    dependencies:
+      svelte: 3.58.0
+    dev: false
+
   /svelte@3.58.0:
     resolution: {integrity: sha512-brIBNNB76mXFmU/Kerm4wFnkskBbluBDCjx/8TcpYRb298Yh2dztS2kQ6bhtjMcvUhd5ynClfwpz5h2gnzdQ1A==}
     engines: {node: '>= 8'}

src/components/auth/Login.svelte

@@ -6,7 +6,7 @@
   import { OpenAPI, AuthService } from "@odit/lfk-client-js";
   import Footer from "../general/Footer.svelte";
   import isEmail from "validator/es/lib/isEmail";
-  import Toastify from "toastify-js";
+  import toast from "svelte-french-toast";
   // ------
   let username = config.default_username || "";
   let password = config.default_password || "";
@@ -20,11 +20,7 @@
         OpenAPI.TOKEN = value.access_token;
         const jwtinfo = JSON.parse(atob(OpenAPI.TOKEN.split(".")[1]));
         store.login(value, jwtinfo);
-        Toastify({
-          text: $_("welcome_wavinghand"),
-          duration: 500,
-          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-        }).showToast();
+        toast($_("welcome_wavinghand"));
       }
     }
   });
@@ -33,10 +29,7 @@
     // prevent login button spamming
     if (last_loginclick_processed && is_blocked_by_autologin === false) {
       last_loginclick_processed = false;
-      Toastify({
-        text: $_("login_is_checked"),
-        duration: 500,
-      }).showToast();
+      toast.loading($_("login_is_checked"));
       let postdata = {};
       if (isEmail(username)) {
         postdata = {
@@ -56,31 +49,19 @@
           const jwtinfo = JSON.parse(atob(OpenAPI.TOKEN.split(".")[1]));
           store.login(result.access_token, jwtinfo);
           location.replace("/");
-          Toastify({
-            text: $_("welcome_wavinghand"),
-            duration: 500,
-            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-          }).showToast();
+          toast.dismiss();
+          toast($_("welcome_wavinghand"));
         })
         .catch((err) => {
-          Toastify({
-            text: $_("error_on_login"),
-            duration: 500,
-            backgroundColor:
-              "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
-          }).showToast();
+          toast.dismiss();
+          toast.error($_("error_on_login"));
         })
         .finally(() => {
           last_loginclick_processed = true;
         });
       // last login was not processed yet
     } else {
-      Toastify({
-        text: $_('please-wait-a-moment-your-login-is-still-being-processed'),
-        duration: 1500,
-        backgroundColor:
-          "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
-      }).showToast();
+      toast($_("please-wait-a-moment-your-login-is-still-being-processed"));
     }
   };
   function handleKeydown(e) {
@@ -91,34 +72,37 @@
 </script>
 
 <div
-  class="min-h-screen flex items-center justify-center bg-gray-100 text-gray-900">
+  class="min-h-screen flex items-center justify-center bg-gray-100 text-gray-900"
+>
   <div class="max-w-md w-full py-12 px-6" role="main">
     <img style="height:10rem;" class="mx-auto" src="/lfk-logo.png" alt="" />
-    <p class="mt-6 text-lg text-center font-bold">{$_('application_name')}</p>
-    <p class="mt-6 text-sm text-center">{$_('log_in_to_your_account')}</p>
+    <p class="mt-6 text-lg text-center font-bold">{$_("application_name")}</p>
+    <p class="mt-6 text-sm text-center">{$_("log_in_to_your_account")}</p>
     <div>
       <div class="rounded-md shadow-sm">
         <div>
           <!-- svelte-ignore a11y-autofocus -->
           <input
             autofocus
-            aria-label={$_('email_address_or_username')}
+            aria-label={$_("email_address_or_username")}
             type="text"
             required=""
             class="border-gray-300 placeholder-gray-500 appearance-none rounded-none relative block w-full px-3 py-2 border rounded-t-md focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm"
             on:keydown={handleKeydown}
-            placeholder={$_('email_address_or_username')}
-            bind:value={username} />
+            placeholder={$_("email_address_or_username")}
+            bind:value={username}
+          />
         </div>
         <div class="-mt-px relative">
           <input
-            aria-label={$_('password')}
+            aria-label={$_("password")}
             type="password"
             required=""
             bind:value={password}
             class="border-gray-300 placeholder-gray-500 appearance-none rounded-none relative block w-full px-3 py-2 border rounded-b-md focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm"
             on:keydown={handleKeydown}
-            placeholder={$_('password')} />
+            placeholder={$_("password")}
+          />
         </div>
       </div>
 
@@ -126,27 +110,31 @@
         <button
           on:click={login}
           type="submit"
-          class="relative block w-full py-2 px-3 border border-transparent rounded-md text-white font-semibold bg-gray-800 hover:bg-gray-700 focus:bg-gray-900 focus:outline-none focus:shadow-outline sm:text-sm">
+          class="relative block w-full py-2 px-3 border border-transparent rounded-md text-white font-semibold bg-gray-800 hover:bg-gray-700 focus:bg-gray-900 focus:outline-none focus:shadow-outline sm:text-sm"
+        >
           <span class="absolute left-0 inset-y pl-3">
             <svg
               class="h-5 w-5 text-gray-500"
               fill="currentColor"
-              viewBox="0 0 20 20">
+              viewBox="0 0 20 20"
+            >
               <path
                 fill-rule="evenodd"
                 d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
-                clip-rule="evenodd" />
+                clip-rule="evenodd"
+              />
             </svg>
           </span>
-          {$_('log_in')}
+          {$_("log_in")}
         </button>
       </div>
     </div>
     <div class="mt-2">
       <a
         href="/forgot_password"
-        class="block w-full text-center py-2 px-3 border border-gray-300 rounded-md font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm">
-        {$_('forgot_password')}
+        class="block w-full text-center py-2 px-3 border border-gray-300 rounded-md font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm"
+      >
+        {$_("forgot_password")}
       </a>
     </div>
   </div>

src/components/cards/CardsOverview.svelte

@@ -2,7 +2,7 @@
   import { _ } from "svelte-i18n";
   import { RunnerCardService } from "@odit/lfk-client-js";
   import store from "../../store";
-  import Toastify from "toastify-js";
+  import toast from "svelte-french-toast";
   import CardsEmptyState from "./CardsEmptyState.svelte";
   import CardDetailModal from "./CardDetailModal.svelte";
   import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
@@ -148,14 +148,11 @@
       ...options,
       data: current_cards,
     }));
-    Toastify({
-      text: $_("card-deleted"),
-      duration: 3500,
-      backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-    }).showToast();
+    toast.success($_("card-deleted"));
   }
 
   onMount(async () => {
+    toast.loading($_("loading-cards"));
     let page = 0;
     while (page >= 0) {
       const cards = await RunnerCardService.runnerCardControllerGetAll(
@@ -175,7 +172,8 @@
       dataLoaded = true;
       page++;
     }
-    console.log("All cards loaded");
+    toast.dismiss();
+    toast.success($_('all-cards-loaded'));
   });
 </script>
 

src/components/dashboard/Dashboard.svelte

@@ -5,6 +5,7 @@
   import { router } from "tinro";
   import NoComponentLoaded from "../base/NoComponentLoaded.svelte";
   import { AuthService } from "@odit/lfk-client-js";
+  import { Toaster } from 'svelte-french-toast';
   $: navOpen = false;
   function logout() {
     localForage.clear();
@@ -345,6 +346,7 @@
             d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4A1 1 0 013 5zm0 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
             clip-rule="evenodd" /></svg></button>
     </header>
+    <Toaster position="top-right" />
     <slot>
       <NoComponentLoaded />
     </slot>

src/components/dashboard/MainDashContent.svelte

@@ -143,7 +143,7 @@
       <StatCard
         title={$_("total-distance")}
         value={`${stats.total_distance / 1000} km`}
-        href="#"
+        href="/scans/"
       >
         <svg
           fill="currentColor"
@@ -159,7 +159,7 @@
       <StatCard
         title={$_("average-distance")}
         value={`${(stats.average_distance / 1000).toFixed(2)} km`}
-        href="#"
+        href="/scans/"
       >
         <svg
           fill="currentColor"

src/locales/de.json

@@ -35,6 +35,7 @@
     "all-associated-runners-will-be-deleted-too": "Alle zugehörigen Läufer:innen werden auch gelöscht!",
     "all-associated-scans-will-get-deleted-as-well": "Alle Scans dieser Station werden ebenfalls gelöscht",
     "all-associated-teams-and-runners-will-be-deleted-too": "Alle assoziierten Teams und Läufer:innen werden auch gelöscht!",
+    "all-cards-loaded": "Alle Karten geladen",
     "already-paid": "Bereits bezahlt",
     "amount": "Anzahl",
     "amount-per-kilometer": "Betrag pro Kilometer",
@@ -94,8 +95,8 @@
     "contacts-are-being-loaded": "Kontakte werden geladen ...",
     "copied-link-to-clipboard": "Link wurde in die Zwischenablage kopiert",
     "copied-token-to-clipboard": "Token wurde in die Zwischenablage kopiert",
-    "count_organizations": "Organisationen (Anzahl)",
-    "count_teams": "Teams (Anzahl)",
+    "count_organizations": "Organisationen",
+    "count_teams": "Teams",
     "create": "Erstellen",
     "create-a-new": "Erstelle eine neue",
     "create-a-new-card": "Neue Läuferkarte erstellen",
@@ -439,11 +440,11 @@
     "token": "Token",
     "total-distance": "gelaufene Strecke",
     "total-donation-amount": "Gesamtbetrag",
-    "total-donation-count": "Gesamte Sponsorings",
+    "total-donation-count": "Sponsorings",
     "total-donations": "Spendensumme",
-    "total-donors": "gesamte Sponsor:innen",
+    "total-donors": "Sponsor:innen",
     "total-paid-amount": "Gezahlt",
-    "total-scans": "gesamte Scans",
+    "total-scans": "Scans",
     "total_donation_amount_in_eur": "Gesamtbetrag in €",
     "track": "Track",
     "track-added": "Track hinzugefügt",
@@ -495,6 +496,6 @@
     "you-dont-have-any-scanstations-yet": "Es gibt noch keine Scannerstationen",
     "you-have-to-provide-an-organization": "Du musst eine Organisation angeben",
     "you-have-to-save-your-changes-to-generate-a-link": "Du musst deine Änderungen speichern, um einen Link zu generieren.",
-    "you-must-create-at-least-one-card-or-cancel": "Du musst mindestens eine Blankokarte erstellen (oder abbrechen).",
+    "you-must-create-at-least-one-card-or-cancel": "Du musst mindestens eine Blankokarte erstellen.",
     "zip-postal-code": "Postleitzahl"
 }

src/locales/en.json

@@ -35,6 +35,7 @@
     "all-associated-runners-will-be-deleted-too": "All associated runners will be deleted too!",
     "all-associated-scans-will-get-deleted-as-well": "All associated scans will get deleted as well",
     "all-associated-teams-and-runners-will-be-deleted-too": "All associated teams and runners will be deleted too!",
+    "all-cards-loaded": "All cards loaded",
     "already-paid": "Already paid",
     "amount": "Amount",
     "amount-per-kilometer": "Amount per kilometer",
@@ -495,6 +496,6 @@
     "you-dont-have-any-scanstations-yet": "You don't have any scanstations yet",
     "you-have-to-provide-an-organization": "You have to provide an organization",
     "you-have-to-save-your-changes-to-generate-a-link": "You have to save your changes to generate a link.",
-    "you-must-create-at-least-one-card-or-cancel": "You must create at least one card (or cancel).",
+    "you-must-create-at-least-one-card-or-cancel": "You must create at least one card.",
     "zip-postal-code": "ZIP/ postal code"
 }