svelte-french-toast + translations

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({
+        toast($_("welcome_wavinghand"));
-          text: $_("welcome_wavinghand"),
-          duration: 500,
-          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-        }).showToast();
       }
     }
   });
@@ -33,10 +29,7 @@
     // prevent login button spamming
     if (last_loginclick_processed && is_blocked_by_autologin === false) {
       last_loginclick_processed = false;
-      Toastify({
+      toast.loading($_("login_is_checked"));
-        text: $_("login_is_checked"),
-        duration: 500,
-      }).showToast();
       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({
+          toast.dismiss();
-            text: $_("welcome_wavinghand"),
+          toast($_("welcome_wavinghand"));
-            duration: 500,
-            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-          }).showToast();
         })
         .catch((err) => {
-          Toastify({
+          toast.dismiss();
-            text: $_("error_on_login"),
+          toast.error($_("error_on_login"));
-            duration: 500,
-            backgroundColor:
-              "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
-          }).showToast();
         })
         .finally(() => {
           last_loginclick_processed = true;
         });
       // last login was not processed yet
     } else {
-      Toastify({
+      toast($_("please-wait-a-moment-your-login-is-still-being-processed"));
-        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();
     }
   };
   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-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-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')}
+            placeholder={$_("email_address_or_username")}
-            bind:value={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">
+        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')}
+      >
+        {$_("forgot_password")}
       </a>
     </div>
   </div>

src/components/cards/CardsOverview.svelte

@@ -152,7 +152,7 @@
   }
 
   onMount(async () => {
-    toast.loading("Karten werden geladen...");
+    toast.loading($_("loading-cards"));
     let page = 0;
     while (page >= 0) {
       const cards = await RunnerCardService.runnerCardControllerGetAll(
@@ -173,8 +173,7 @@
       page++;
     }
     toast.dismiss();
-    toast.success("All cards loaded");
+    toast.success($_('all-cards-loaded'));
-    console.log("All cards loaded");
   });
 </script>
 

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",

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",