🚀RELEASE v1.4.0

Reviewed-on: #180

.devcontainer/Dockerfile

@@ -1,6 +1,5 @@
 FROM mcr.microsoft.com/vscode/devcontainers/base:alpine-3.12
 RUN apk update
 RUN apk add --upgrade nodejs-current npm
-RUN npm i -g yarn rimraf
+RUN npm i -g pnpm rimraf
 RUN rimraf node_modules
-RUN yarn set version berry

.vscode/extensions.json

@@ -8,7 +8,5 @@
     "fivethree.vscode-svelte-snippets",
     "voorjaar.windicss-intellisense"
   ],
-    "unwantedRecommendations": [
+  "unwantedRecommendations": ["antfu.i18n-ally"]
-        "antfu.i18n-ally"
-    ]
 }

.vscode/settings.json

@@ -1,5 +1,5 @@
 {
   "i18n-ally.localesPaths": "src/locales",
   "i18n-ally.keystyle": "nested",
-    "windicss.enableCodeFolding": false,
+  "windicss.enableCodeFolding": false
 }

CHANGELOG.md

@@ -2,8 +2,67 @@
 
 All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 
+#### [1.4.0](https://git.odit.services/lfk/frontend/compare/1.3.4...1.4.0)
+
+- formatting, full migration to svelte-french-toast [`46d076a`](https://git.odit.services/lfk/frontend/commit/46d076af9d65ebb11504a7e6879753780b69db2c)
+- drop gridjs (TracksOverview Actions will need to be re-implemented) [`8b92230`](https://git.odit.services/lfk/frontend/commit/8b922309b990c42fcfd57b939abacf4d8c99e638)
+- Added track update toasts [`103ad57`](https://git.odit.services/lfk/frontend/commit/103ad57ddc8a35ff971bef44053a9e32a7b68233)
+- drop legacy ThFilter components [`bc4ac0f`](https://git.odit.services/lfk/frontend/commit/bc4ac0f3160571cd412361de82ef4555ee068677)
+- text cleanups, StatCard improvements [`a2f9dbb`](https://git.odit.services/lfk/frontend/commit/a2f9dbbe014b5ae9705e8e7b6944f7f7c576d22e)
+- Updated the track editing switch logic [`a953349`](https://git.odit.services/lfk/frontend/commit/a953349c1478b912e08f88c1fb70c74af0bc9bbb)
+- chore(deps): bump all [`6154ca7`](https://git.odit.services/lfk/frontend/commit/6154ca7ddfb8b6ad0e1644b8c6756d51f2fbb858)
+- svelte-french-toast + translations [`8fb1e0c`](https://git.odit.services/lfk/frontend/commit/8fb1e0ca0f51c90270fb5e1a05be5e8273238a2c)
+- Implemented delete for new track table [`081a141`](https://git.odit.services/lfk/frontend/commit/081a141218ab7de2620f7b06083697368d44bf6c)
+- striped tabled [`5e82638`](https://git.odit.services/lfk/frontend/commit/5e82638f3594298d0542cd03d5d6aa80aa383b9d)
+- add svelte-french-toast [`56c3365`](https://git.odit.services/lfk/frontend/commit/56c33656562079bb773491c8aecedea3f6acdb74)
+- Editing update logic [`2856c5c`](https://git.odit.services/lfk/frontend/commit/2856c5c1b786f732b0db80324ea74513e8be186d)
+- monospace fonts for IDs in overviews [`811f5d5`](https://git.odit.services/lfk/frontend/commit/811f5d575496be43e5e48197813112d35e79a81f)
+- Full track table editing [`e9cf2bc`](https://git.odit.services/lfk/frontend/commit/e9cf2bc8498fc02332059880d7a6994348165b76)
+- drop propfilepic [`6952b87`](https://git.odit.services/lfk/frontend/commit/6952b8727f06c520cb60a00acfde1dff52d4f345)
+- fix: scan laptime formatting [`01b415d`](https://git.odit.services/lfk/frontend/commit/01b415d4cb147879e959e86d053dc02cae8cfdc9)
+- Dynamicly adjust page size for large datasets [`064197d`](https://git.odit.services/lfk/frontend/commit/064197d2226da772907099ecf96c3ab984c9af59)
+- ScansOverview full month formatting [`69ec7fc`](https://git.odit.services/lfk/frontend/commit/69ec7fc1fecc67751643ce35f22925f3132b8792)
+- translations [`8be40e2`](https://git.odit.services/lfk/frontend/commit/8be40e2d80336f72989deb3e5e20a7cd8f7fb6f1)
+- drop middlename for admin users [`daeea24`](https://git.odit.services/lfk/frontend/commit/daeea24e0e99b8a95665167d62d0ee830bdea3de)
+- add missing striped tables [`8eaad82`](https://git.odit.services/lfk/frontend/commit/8eaad8219a109fa8b4bd1f719d7079bff8b7c041)
+- translation cleanups [`663cb29`](https://git.odit.services/lfk/frontend/commit/663cb29ccde4fa15317f764147187c5b82e748d5)
+- Added edit button for trackscans [`175d867`](https://git.odit.services/lfk/frontend/commit/175d86745fb9bfce03fe5f5c638b52467b688938)
+- a11y cleanup [`6bc92f4`](https://git.odit.services/lfk/frontend/commit/6bc92f4a080f0c506793866d99c97ccb87ba15b8)
+- a11y fix OrgOverview [`0fca035`](https://git.odit.services/lfk/frontend/commit/0fca0352c59cdccb99716355591f88ff573ac949)
+- README update [`d32eb82`](https://git.odit.services/lfk/frontend/commit/d32eb8266b0e9daec4b9ba52832d5e5118abec45)
+- a11y improvements [`4c81e3c`](https://git.odit.services/lfk/frontend/commit/4c81e3c43218be4b23d137b386520c71d19f5844)
+- cleanup legacy TeamsOverview text [`6c1a707`](https://git.odit.services/lfk/frontend/commit/6c1a70716665d57f1326c4475030ae15a7c459e0)
+- fix: a11y in About page [`e904ab0`](https://git.odit.services/lfk/frontend/commit/e904ab0b8494ff57579c8954a8eb713fc223a88f)
+- improved login [`dbaf857`](https://git.odit.services/lfk/frontend/commit/dbaf85799ac9e56d8760450cfe357df016f10da7)
+- chore(deps): node:20.0.0 [`81d4da6`](https://git.odit.services/lfk/frontend/commit/81d4da655099100c631d450caafbf7039fa20592)
+- cleanup MainDashContent [`763a01a`](https://git.odit.services/lfk/frontend/commit/763a01af09b36004ceccfa6b182b7dc5ea070128)
+- Updated store directory for dockerfil [`bbf8170`](https://git.odit.services/lfk/frontend/commit/bbf8170cb98410bbcd8dc51bb122beee615312ee)
+- Bump dockerfile node [`15d8afe`](https://git.odit.services/lfk/frontend/commit/15d8afefbb6b697a6cbdb2d803a7d8edcea4e650)
+- Pinned config files used [`f3bcc01`](https://git.odit.services/lfk/frontend/commit/f3bcc01685f3ea3ef6786a8e7d9a5b1a4f829d53)
+- Switched build image node version [`9523860`](https://git.odit.services/lfk/frontend/commit/95238606d52ca58985b91ea03f7e9f490fdf2310)
+- Merge pull request 'next' (#180) from next into dev [`8c628f2`](https://git.odit.services/lfk/frontend/commit/8c628f23dcfb1f6f120d19bb3ecdb422ca5093cd)
+- improved StatCard readability [`7d82536`](https://git.odit.services/lfk/frontend/commit/7d8253618b18719549824ed19e024b8828c9df06)
+- new license file version [CI SKIP] [`38a6650`](https://git.odit.services/lfk/frontend/commit/38a665024eb1df3eba66c61d8cb3199000b629e5)
+
+#### [1.3.4](https://git.odit.services/lfk/frontend/compare/1.3.3...1.3.4)
+
+> 19 April 2023
+
+- 🚀RELEASE v1.3.4 [`e7b2c64`](https://git.odit.services/lfk/frontend/commit/e7b2c647981111650b3e2e471f4b5195fa6b65b6)
+- Smaller sponsoring page size [`7cb6b63`](https://git.odit.services/lfk/frontend/commit/7cb6b63eb9596da4ee84369b220c3e680c607032)
+
+#### [1.3.3](https://git.odit.services/lfk/frontend/compare/1.3.2...1.3.3)
+
+> 19 April 2023
+
+- 🚀RELEASE v1.3.3 [`d6d88f5`](https://git.odit.services/lfk/frontend/commit/d6d88f5f60716ca496a17f09b835b23223ec495d)
+- bumped lfk-client-js [`2c208c4`](https://git.odit.services/lfk/frontend/commit/2c208c438185892270a0ebd37deb6a7c9ac08fc0)
+
 #### [1.3.2](https://git.odit.services/lfk/frontend/compare/1.3.1...1.3.2)
 
+> 19 April 2023
+
+- 🚀RELEASE v1.3.2 [`39bc6c4`](https://git.odit.services/lfk/frontend/commit/39bc6c49450964510f996369d014f92c569188ae)
 - fix(donors): Shortened texts [`b94e3b7`](https://git.odit.services/lfk/frontend/commit/b94e3b745f2febbe91e16a7a26f96b47d347ab92)
 - feat(donations): Resolve donations via donor [`6f337ae`](https://git.odit.services/lfk/frontend/commit/6f337aeee16267d1e67e3d3855b63b6f2e57979f)
 - fix(donors): Removed debug infos [`5d48060`](https://git.odit.services/lfk/frontend/commit/5d48060834717b2244172a0914e2690f8fe634d9)

Dockerfile

@@ -1,9 +1,10 @@
-FROM registry.odit.services/hub/library/node:19.7.0-alpine3.16 as build
+FROM registry.odit.services/hub/library/node:20.0.0-alpine3.17 as build
 ARG NPM_REGISTRY_URL=https://registry.npmjs.org
 WORKDIR /app
 
-COPY package.json pnpm-lock.yaml *.config.js *.config.cjs index.html ./
+COPY package.json pnpm-lock.yaml vite.config.js tailwind.config.js postcss.config.cjs index.html ./
-RUN npm config set registry $NPM_REGISTRY_URL && npm i -g pnpm@8 && pnpm i
+RUN npm config set registry $NPM_REGISTRY_URL && npm i -g pnpm@8
+RUN mkdir /pnpm && pnpm config set store-dir /pnpm && pnpm i
 
 COPY src ./src
 COPY public ./public

README.md

@@ -1,22 +1,27 @@
 # @odit/lfk-frontend
 
 ## ✒️ Overview
+
 This is an API client for [https://git.odit.services/lfk/backend](@lfk/backend)
-- WebApp built with [Svelte](https://svelte.dev), [WindiCSS](https://windicss.org/) (to compile [TailwindCSS](https://tailwindcss.com/)) and [Vite](https://vitejs.dev).
 
 This application is intended for use by admin users/ members only.
 
 ## 🚀 Getting Started
+
 ```
-yarn
+pnpm i
 ```
+
 ## Development
+
 ```
-yarn dev
+pnpm dev
 /
-yarn dev --open
+pnpm dev --open
 ```
+
 ## Build
+
 ```
-yarn build
+pnpm build
 ```

index.html

@@ -1,22 +1,22 @@
 <!DOCTYPE html>
 <html lang="en">
-
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="/favicon.png" />
-  <link rel="manifest" href="/manifest.webmanifest">
+    <link rel="manifest" href="/manifest.webmanifest" />
-  <link rel="apple-touch-icon" href="/lfk-logo.png">
+    <link rel="apple-touch-icon" href="/lfk-logo.png" />
-  <meta name="theme-color" content="#FFFFFF">
+    <meta name="theme-color" content="#FFFFFF" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="description" content="Lauf Für Kaya! - Admin" />
     <title>Lauf für Kaya! - Admin</title>
   </head>
 
   <body>
-  <span style="display: none;visibility: hidden;" id="buildinfo">RELEASE_INFO-1.3.2-RELEASE_INFO</span>
+    <span style="display: none; visibility: hidden" id="buildinfo"
+      >RELEASE_INFO-1.4.0-RELEASE_INFO</span
+    >
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <script src="/env.js"></script>
     <script type="module" src="/src/main.js"></script>
   </body>
-
 </html>

order.js

@@ -1,11 +1,13 @@
-import fs from 'fs'
+import fs from "fs";
 // get all language files
-const files = fs.readdirSync('./src/locales/');
+const files = fs.readdirSync("./src/locales/");
 files.forEach((f) => {
   // read file as object
   const unordered = JSON.parse(fs.readFileSync(`src/locales/${f}`));
   // order object by keys alpabetically A-Z
-	const ordered = Object.keys(unordered).sort().reduce((obj, key) => {
+  const ordered = Object.keys(unordered)
+    .sort()
+    .reduce((obj, key) => {
       obj[key] = unordered[key];
       return obj;
     }, {});

package.json

@@ -1,10 +1,11 @@
 {
   "name": "@odit/lfk-frontend",
-	"version": "1.3.2",
+  "version": "1.4.0",
   "type": "module",
   "scripts": {
     "i18n-order": "node order.js",
     "dev": "vite",
+    "format": "prettier --write --plugin-search-dir=. .",
     "build": "vite build",
     "release": "release-it",
     "licenses:export": "license-exporter --json -o public"
@@ -12,14 +13,16 @@
   "license": "CC-BY-NC-SA-4.0",
   "devDependencies": {
     "@odit/license-exporter": "0.0.12",
-		"@sveltejs/vite-plugin-svelte": "2.0.4",
+    "@sveltejs/vite-plugin-svelte": "2.1.1",
     "auto-changelog": "2.4.0",
     "autoprefixer": "10.4.14",
-		"postcss": "8.4.21",
+    "postcss": "8.4.23",
+    "prettier": "^2.8.8",
+    "prettier-plugin-svelte": "^2.10.0",
     "release-it": "15.10.1",
     "svelte-select": "3.17.0",
-		"tailwindcss": "3.3.1",
+    "tailwindcss": "3.3.2",
-		"vite": "4.2.1"
+    "vite": "4.3.3"
   },
   "release-it": {
     "git": {
@@ -39,23 +42,22 @@
     }
   },
   "dependencies": {
-		"@odit/lfk-client-js": "1.1.0",
+    "@odit/lfk-client-js": "1.1.1",
     "@paralleldrive/cuid2": "^2.2.0",
-		"@tanstack/svelte-table": "^8.8.5",
+    "@tanstack/svelte-table": "^8.8.6",
     "bwip-js": "^3.4.0",
     "check-password-strength": "2.0.7",
     "csvtojson": "2.0.10",
-		"gridjs": "3.4.0",
     "localforage": "1.10.0",
-		"marked": "2.0.3",
+    "marked": "4.3.0",
     "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",
     "validator": "13.9.0",
     "xlsx": "0.18.5"
   },
   "volta": {
-		"node": "19.7.0"
+    "node": "20.0.0"
   }
 }

pnpm-lock.yaml

@@ -2,14 +2,14 @@ lockfileVersion: '6.0'
 
 dependencies:
   '@odit/lfk-client-js':
-    specifier: 1.1.0
+    specifier: 1.1.1
-    version: 1.1.0
+    version: 1.1.1
   '@paralleldrive/cuid2':
     specifier: ^2.2.0
     version: 2.2.0
   '@tanstack/svelte-table':
-    specifier: ^8.8.5
+    specifier: ^8.8.6
-    version: 8.8.5(svelte@3.58.0)
+    version: 8.8.6(svelte@3.58.0)
   bwip-js:
     specifier: ^3.4.0
     version: 3.4.0
@@ -19,27 +19,24 @@ dependencies:
   csvtojson:
     specifier: 2.0.10
     version: 2.0.10
-  gridjs:
-    specifier: 3.4.0
-    version: 3.4.0
   localforage:
     specifier: 1.10.0
     version: 1.10.0
   marked:
-    specifier: 2.0.3
+    specifier: 4.3.0
-    version: 2.0.3
+    version: 4.3.0
   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)
   tinro:
     specifier: 0.6.12
     version: 0.6.12
-  toastify-js:
-    specifier: 1.12.0
-    version: 1.12.0
   validator:
     specifier: 13.9.0
     version: 13.9.0
@@ -52,17 +49,23 @@ devDependencies:
     specifier: 0.0.12
     version: 0.0.12
   '@sveltejs/vite-plugin-svelte':
-    specifier: 2.0.4
+    specifier: 2.1.1
-    version: 2.0.4(svelte@3.58.0)(vite@4.2.1)
+    version: 2.1.1(svelte@3.58.0)(vite@4.3.3)
   auto-changelog:
     specifier: 2.4.0
     version: 2.4.0
   autoprefixer:
     specifier: 10.4.14
-    version: 10.4.14(postcss@8.4.21)
+    version: 10.4.14(postcss@8.4.23)
   postcss:
-    specifier: 8.4.21
+    specifier: 8.4.23
-    version: 8.4.21
+    version: 8.4.23
+  prettier:
+    specifier: ^2.8.8
+    version: 2.8.8
+  prettier-plugin-svelte:
+    specifier: ^2.10.0
+    version: 2.10.0(prettier@2.8.8)(svelte@3.58.0)
   release-it:
     specifier: 15.10.1
     version: 15.10.1
@@ -70,14 +73,19 @@ devDependencies:
     specifier: 3.17.0
     version: 3.17.0
   tailwindcss:
-    specifier: 3.3.1
+    specifier: 3.3.2
-    version: 3.3.1(postcss@8.4.21)
+    version: 3.3.2
   vite:
-    specifier: 4.2.1
+    specifier: 4.3.3
-    version: 4.2.1
+    version: 4.3.3
 
 packages:
 
+  /@alloc/quick-lru@5.2.0:
+    resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
+    engines: {node: '>=10'}
+    dev: true
+
   /@babel/code-frame@7.21.4:
     resolution: {integrity: sha512-LYvhNKfwWSPpocw8GI7gpK2nq3HSDuEPC/uSYaALSJu9xjsalaaYFOq0Pwt5KmVqwEbZlDu81aLXwBOmD/Fv9g==}
     engines: {node: '>=6.9.0'}
@@ -510,8 +518,8 @@ packages:
       '@octokit/openapi-types': 16.0.0
     dev: true
 
-  /@odit/lfk-client-js@1.1.0:
+  /@odit/lfk-client-js@1.1.1:
-    resolution: {integrity: sha512-yhjsi7YMzL9/fJ7o06yszzw15iZhao3VmX0G9oqZWFwYJd1M2td3Lvm76mXNzTVlbdG6W0W3+eEjcalBdo51Pg==}
+    resolution: {integrity: sha512-EVwK/kT8VBs0vLk64KgCsHCl2heWHJMWAmZAghEDZWPCPQWX9xL6UzRuKewLXl36/T9YKqZLfDyM5e3WfgLyOg==}
     dev: false
 
   /@odit/license-exporter@0.0.12:
@@ -553,8 +561,8 @@ packages:
     engines: {node: '>=14.16'}
     dev: true
 
-  /@sveltejs/vite-plugin-svelte@2.0.4(svelte@3.58.0)(vite@4.2.1):
+  /@sveltejs/vite-plugin-svelte@2.1.1(svelte@3.58.0)(vite@4.3.3):
-    resolution: {integrity: sha512-pjqhW00KwK2uzDGEr+yJBwut+D+4XfJO/+bHHdHzPRXn9+1Jeq5JcFHyrUiYaXgHtyhX0RsllCTm4ssAx4ZY7Q==}
+    resolution: {integrity: sha512-7YeBDt4us0FiIMNsVXxyaP4Hwyn2/v9x3oqStkHU3ZdIc5O22pGwUwH33wUqYo+7Itdmo8zxJ45Qvfm3H7UUjQ==}
     engines: {node: ^14.18.0 || >= 16}
     peerDependencies:
       svelte: ^3.54.0
@@ -566,8 +574,8 @@ packages:
       magic-string: 0.30.0
       svelte: 3.58.0
       svelte-hmr: 0.15.1(svelte@3.58.0)
-      vite: 4.2.1
+      vite: 4.3.3
-      vitefu: 0.2.4(vite@4.2.1)
+      vitefu: 0.2.4(vite@4.3.3)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -579,8 +587,8 @@ packages:
       defer-to-connect: 2.0.1
     dev: true
 
-  /@tanstack/svelte-table@8.8.5(svelte@3.58.0):
+  /@tanstack/svelte-table@8.8.6(svelte@3.58.0):
-    resolution: {integrity: sha512-d33JJwEe5AbwH6sBnRDfTL3gianA7if0fUTqxLNKK6P51IAIgMgAW+ahbCeg+5wJ9KcMSyTEOHs2Fg03oP6tvA==}
+    resolution: {integrity: sha512-/5cJ9w4rhq6iqts8dR31JSOqavV6Ug6KZPFXpQaj3hs2JWQiNPw24tOOrFkXVaD4AQ6D2EEH/R0XoX9moQRY5A==}
     engines: {node: '>=12'}
     peerDependencies:
       svelte: ^3.49.0
@@ -735,7 +743,7 @@ packages:
       - encoding
     dev: true
 
-  /autoprefixer@10.4.14(postcss@8.4.21):
+  /autoprefixer@10.4.14(postcss@8.4.23):
     resolution: {integrity: sha512-FQzyfOsTlwVzjHxKEqRIAdJx9niO6VCBCoEwax/VLSoQF29ggECcPuBqUMZ+u8jCZOPSy8b8/8KnuFbp0SaFZQ==}
     engines: {node: ^10 || ^12 || >=14}
     hasBin: true
@@ -747,7 +755,7 @@ packages:
       fraction.js: 4.2.0
       normalize-range: 0.1.2
       picocolors: 1.0.0
-      postcss: 8.4.21
+      postcss: 8.4.23
       postcss-value-parser: 4.2.0
     dev: true
 
@@ -1786,13 +1794,6 @@ packages:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
     dev: true
 
-  /gridjs@3.4.0:
-    resolution: {integrity: sha512-wkRbtOblx2EXJCk4j+cgJSFB02PCyx33mIZlcyWZOmrFGbfc6ITq8vhZxaxV5jeBvtixoJ/csMTkpugVsHAlMw==}
-    dependencies:
-      preact: 10.13.2
-      tslib: 2.5.0
-    dev: false
-
   /handlebars@4.7.7:
     resolution: {integrity: sha512-aAcXm5OAfE/8IXkcZvCepKU3VzW1/39Fb5ZuqMtgI/hT8X2YgoMvBY5dLhq/cpOvw7Lk1nK/UF71aLG/ZnVYRA==}
     engines: {node: '>=0.4.7'}
@@ -2443,9 +2444,9 @@ packages:
       '@jridgewell/sourcemap-codec': 1.4.15
     dev: true
 
-  /marked@2.0.3:
+  /marked@4.3.0:
-    resolution: {integrity: sha512-5otztIIcJfPc2qGTN8cVtOJEjNJZ0jwa46INMagrYfk0EvqtRuEHLsEe0LrFS0/q+ZRKT0+kXK7P2T1AN5lWRA==}
+    resolution: {integrity: sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A==}
-    engines: {node: '>= 8.16.2'}
+    engines: {node: '>= 12'}
     hasBin: true
     dev: false
 
@@ -2846,31 +2847,31 @@ packages:
     engines: {node: '>= 6'}
     dev: true
 
-  /postcss-import@14.1.0(postcss@8.4.21):
+  /postcss-import@15.1.0(postcss@8.4.23):
-    resolution: {integrity: sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==}
+    resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
-    engines: {node: '>=10.0.0'}
+    engines: {node: '>=14.0.0'}
     peerDependencies:
       postcss: ^8.0.0
     dependencies:
-      postcss: 8.4.21
+      postcss: 8.4.23
       postcss-value-parser: 4.2.0
       read-cache: 1.0.0
       resolve: 1.22.2
     dev: true
 
-  /postcss-js@4.0.1(postcss@8.4.21):
+  /postcss-js@4.0.1(postcss@8.4.23):
     resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
     engines: {node: ^12 || ^14 || >= 16}
     peerDependencies:
       postcss: ^8.4.21
     dependencies:
       camelcase-css: 2.0.1
-      postcss: 8.4.21
+      postcss: 8.4.23
     dev: true
 
-  /postcss-load-config@3.1.4(postcss@8.4.21):
+  /postcss-load-config@4.0.1(postcss@8.4.23):
-    resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
+    resolution: {integrity: sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==}
-    engines: {node: '>= 10'}
+    engines: {node: '>= 14'}
     peerDependencies:
       postcss: '>=8.0.9'
       ts-node: '>=9.0.0'
@@ -2881,17 +2882,17 @@ packages:
         optional: true
     dependencies:
       lilconfig: 2.1.0
-      postcss: 8.4.21
+      postcss: 8.4.23
-      yaml: 1.10.2
+      yaml: 2.2.2
     dev: true
 
-  /postcss-nested@6.0.0(postcss@8.4.21):
+  /postcss-nested@6.0.1(postcss@8.4.23):
-    resolution: {integrity: sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==}
+    resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==}
     engines: {node: '>=12.0'}
     peerDependencies:
       postcss: ^8.2.14
     dependencies:
-      postcss: 8.4.21
+      postcss: 8.4.23
       postcss-selector-parser: 6.0.11
     dev: true
 
@@ -2907,8 +2908,8 @@ packages:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
     dev: true
 
-  /postcss@8.4.21:
+  /postcss@8.4.23:
-    resolution: {integrity: sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==}
+    resolution: {integrity: sha512-bQ3qMcpF6A/YjR55xtoTr0jGOlnPOKAIMdOWiv0EIT6HVPEaJiJB4NLljSbiHoC2RX7DN5Uvjtpbg1NPdwv1oA==}
     engines: {node: ^10 || ^12 || >=14}
     dependencies:
       nanoid: 3.3.6
@@ -2916,15 +2917,27 @@ packages:
       source-map-js: 1.0.2
     dev: true
 
-  /preact@10.13.2:
-    resolution: {integrity: sha512-q44QFLhOhty2Bd0Y46fnYW0gD/cbVM9dUVtNTDKPcdXSMA7jfY+Jpd6rk3GB0lcQss0z5s/6CmVP0Z/hV+g6pw==}
-    dev: false
-
   /prelude-ls@1.1.2:
     resolution: {integrity: sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==}
     engines: {node: '>= 0.8.0'}
     dev: true
 
+  /prettier-plugin-svelte@2.10.0(prettier@2.8.8)(svelte@3.58.0):
+    resolution: {integrity: sha512-GXMY6t86thctyCvQq+jqElO+MKdB09BkL3hexyGP3Oi8XLKRFaJP1ud/xlWCZ9ZIa2BxHka32zhHfcuU+XsRQg==}
+    peerDependencies:
+      prettier: ^1.16.4 || ^2.0.0
+      svelte: ^3.2.0
+    dependencies:
+      prettier: 2.8.8
+      svelte: 3.58.0
+    dev: true
+
+  /prettier@2.8.8:
+    resolution: {integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==}
+    engines: {node: '>=10.13.0'}
+    hasBin: true
+    dev: true
+
   /promise.allsettled@1.0.6:
     resolution: {integrity: sha512-22wJUOD3zswWFqgwjNHa1965LvqTX87WPu/lreY2KSd7SVcERfuZ4GfUaOnJNnvtoIv2yXT/W00YIGMetXtFXg==}
     engines: {node: '>= 0.4'}
@@ -3147,8 +3160,8 @@ packages:
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
     dev: true
 
-  /rollup@3.20.2:
+  /rollup@3.21.0:
-    resolution: {integrity: sha512-3zwkBQl7Ai7MFYQE0y1MeQ15+9jsi7XxfrqwTb/9EK8D9C9+//EBR4M+CuA1KODRaNbFez/lWxA5vhEGZp4MUg==}
+    resolution: {integrity: sha512-ANPhVcyeHvYdQMUyCbczy33nbLzI7RzrBje4uvNiTDJGIMtlKoOStmympwr9OtS1LZxiDmE2wvxHyVhoLtf1KQ==}
     engines: {node: '>=14.18.0', npm: '>=8.0.0'}
     hasBin: true
     optionalDependencies:
@@ -3443,6 +3456,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,20 +3494,26 @@ 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'}
 
-  /tailwindcss@3.3.1(postcss@8.4.21):
+  /tailwindcss@3.3.2:
-    resolution: {integrity: sha512-Vkiouc41d4CEq0ujXl6oiGFQ7bA3WEhUZdTgXAhtKxSy49OmKs8rEfQmupsfF0IGW8fv2iQkp1EVUuapCFrZ9g==}
+    resolution: {integrity: sha512-9jPkMiIBXvPc2KywkraqsUfbfj+dHDb+JPWtSJa9MLFdrPyazI7q6WX2sUrm7R9eVR7qqv3Pas7EvQFzxKnI6w==}
-    engines: {node: '>=12.13.0'}
+    engines: {node: '>=14.0.0'}
     hasBin: true
-    peerDependencies:
-      postcss: ^8.0.9
     dependencies:
+      '@alloc/quick-lru': 5.2.0
       arg: 5.0.2
       chokidar: 3.5.3
-      color-name: 1.1.4
       didyoumean: 1.2.2
       dlv: 1.1.3
       fast-glob: 3.2.12
@@ -3497,14 +3525,13 @@ packages:
       normalize-path: 3.0.0
       object-hash: 3.0.0
       picocolors: 1.0.0
-      postcss: 8.4.21
+      postcss: 8.4.23
-      postcss-import: 14.1.0(postcss@8.4.21)
+      postcss-import: 15.1.0(postcss@8.4.23)
-      postcss-js: 4.0.1(postcss@8.4.21)
+      postcss-js: 4.0.1(postcss@8.4.23)
-      postcss-load-config: 3.1.4(postcss@8.4.21)
+      postcss-load-config: 4.0.1(postcss@8.4.23)
-      postcss-nested: 6.0.0(postcss@8.4.21)
+      postcss-nested: 6.0.1(postcss@8.4.23)
       postcss-selector-parser: 6.0.11
       postcss-value-parser: 4.2.0
-      quick-lru: 5.1.1
       resolve: 1.22.2
       sucrase: 3.32.0
     transitivePeerDependencies:
@@ -3565,10 +3592,6 @@ packages:
       is-number: 7.0.0
     dev: true
 
-  /toastify-js@1.12.0:
-    resolution: {integrity: sha512-HeMHCO9yLPvP9k0apGSdPUWrUbLnxUKNFzgUoZp1PHCLploIX/4DSQ7V8H25ef+h4iO9n0he7ImfcndnN6nDrQ==}
-    dev: false
-
   /toidentifier@1.0.1:
     resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
     engines: {node: '>=0.6'}
@@ -3717,8 +3740,8 @@ packages:
     engines: {node: '>= 0.10'}
     dev: false
 
-  /vite@4.2.1:
+  /vite@4.3.3:
-    resolution: {integrity: sha512-7MKhqdy0ISo4wnvwtqZkjke6XN4taqQ2TBaTccLIpOKv7Vp2h4Y+NpmWCnGDeSvvn45KxvWgGyb0MkHvY1vgbg==}
+    resolution: {integrity: sha512-MwFlLBO4udZXd+VBcezo3u8mC77YQk+ik+fbc0GZWGgzfbPP+8Kf0fldhARqvSYmtIWoAJ5BXPClUbMTlqFxrA==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
     peerDependencies:
@@ -3743,14 +3766,13 @@ packages:
         optional: true
     dependencies:
       esbuild: 0.17.16
-      postcss: 8.4.21
+      postcss: 8.4.23
-      resolve: 1.22.2
+      rollup: 3.21.0
-      rollup: 3.20.2
     optionalDependencies:
       fsevents: 2.3.2
     dev: true
 
-  /vitefu@0.2.4(vite@4.2.1):
+  /vitefu@0.2.4(vite@4.3.3):
     resolution: {integrity: sha512-fanAXjSaf9xXtOOeno8wZXIhgia+CZury481LsDaV++lSvcU2R9Ch2bPh3PYFyoHW+w9LqAeYRISVQjUIew14g==}
     peerDependencies:
       vite: ^3.0.0 || ^4.0.0
@@ -3758,7 +3780,7 @@ packages:
       vite:
         optional: true
     dependencies:
-      vite: 4.2.1
+      vite: 4.3.3
     dev: true
 
   /vm2@3.9.16:
@@ -3926,9 +3948,9 @@ packages:
     resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
     dev: true
 
-  /yaml@1.10.2:
+  /yaml@2.2.2:
-    resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
+    resolution: {integrity: sha512-CBKFWExMn46Foo4cldiChEzn7S7SRV+wqiluAb6xmueD/fGyRHIhX8m14vVGgeFWjN540nKCNVj6P21eQjgTuA==}
-    engines: {node: '>= 6'}
+    engines: {node: '>= 14'}
     dev: true
 
   /yargs-parser@21.1.1:

postcss.config.cjs

@@ -1,6 +1,6 @@
 module.exports = {
   plugins: {
     tailwindcss: {},
-		autoprefixer: {}
+    autoprefixer: {},
-	}
+  },
 };

public/env.sample.js

@@ -1,9 +1,10 @@
 const config = {
-	baseurl: 'http://localhost:4010',
+  baseurl: "http://localhost:4010",
-	baseurl_documentserver: 'http://localhost:4010/documents',
+  baseurl_documentserver: "http://localhost:4010/documents",
-	documentserver_key: 'NqZSYTy5AFQ7MppbLW5moqpTk7u7YrNUHKYhKYuThnnya2WpCOIU694hIZT1FzYe',
+  documentserver_key:
+    "NqZSYTy5AFQ7MppbLW5moqpTk7u7YrNUHKYhKYuThnnya2WpCOIU694hIZT1FzYe",
   // optional
-	default_username: 'demo',
+  default_username: "demo",
-	default_password: 'demo',
+  default_password: "demo",
-	prefersHashRouting: true
+  prefersHashRouting: true,
 };

public/manifest.webmanifest

@@ -29,6 +29,11 @@
       "sizes": "1540x144",
       "type": "image/png"
     },
-		{ "src": "/maskable_icon_x1.png", "sizes": "750x750", "type": "image/png", "purpose": "any maskable" }
+    {
+      "src": "/maskable_icon_x1.png",
+      "sizes": "750x750",
+      "type": "image/png",
+      "purpose": "any maskable"
+    }
   ]
 }

src/App.svelte

@@ -1,6 +1,4 @@
 <script>
-  import "toastify-js/src/toastify.css";
-  import "gridjs/dist/theme/mermaid.css";
   import { Route, router } from "tinro";
   router.subscribe((routeInfo) => {
     window.scrollTo(0, 0);
@@ -24,11 +22,10 @@
     name: "lfk_admin",
     version: 1.0,
     storeName: "lfk_admin",
-    description: "LfK! admin dashbaord",
+    description: "LfK! admin dashboard",
   });
   window.onunhandledrejection = (event) => {
     if (event.reason.toString() == "Error: Unauthorized") {
-      console.log("Found 1");
       localForage.clear();
       location.replace("/");
     }
@@ -78,23 +75,23 @@
 </script>
 
 <Route>
-  {#if $router.path === '/forgot_password'}
+  {#if $router.path === "/forgot_password"}
     <Route path="/forgot_password">
       <ForgotPassword />
     </Route>
-  {:else if $router.path.includes('/reset')}
+  {:else if $router.path.includes("/reset")}
     <Route path="/reset/:resetkey" let:params>
       <ResetPassword {params} />
     </Route>
-  {:else if $router.path === '/about'}
+  {:else if $router.path === "/about"}
     <Route path="/about">
       <About />
     </Route>
-  {:else if $router.path === '/imprint'}
+  {:else if $router.path === "/imprint"}
     <Route path="/imprint">
       <Imprint />
     </Route>
-  {:else if $router.path === '/privacy'}
+  {:else if $router.path === "/privacy"}
     <Route path="/privacy">
       <Privacy />
     </Route>

src/components/auth/ForgotPassword.svelte

@@ -1,28 +1,22 @@
 <script>
-  import { ApiError, AuthService } from "@odit/lfk-client-js";
+  import { AuthService } from "@odit/lfk-client-js";
+  import toast from "svelte-french-toast";
   import { _ } from "svelte-i18n";
-  import Toastify from "toastify-js";
-  import "toastify-js/src/toastify.css";
   import isEmail from "validator/es/lib/isEmail";
 
   let reset_mail_sent = false;
   let usersEmail = "";
   function reset() {
     if (isEmail(usersEmail)) {
+      toast.loading($_("mail-validation-in-progress"));
       AuthService.authControllerGetResetToken("de", { email: usersEmail })
         .then((resp) => {
-          Toastify({
+          toast.dismiss();
-            text: $_("mail-validation-in-progress"),
-            duration: 3500,
-          }).showToast();
           reset_mail_sent = true;
         })
         .catch((err) => {});
     } else {
-      Toastify({
+      toast($_("invalid-mail-reset"));
-        text: $_("invalid-mail-reset"),
-        duration: 3500,
-      }).showToast();
     }
   }
 </script>
@@ -32,17 +26,18 @@
     <div class="max-w-md w-full py-12 px-6">
       <img style="height:10rem;" class="mx-auto" src="/lfk-logo.png" alt="" />
       <p class="mt-6 text-lg text-center font-bold text-gray-900">
-        {$_('application_name')}
+        {$_("application_name")}
       </p>
       <p class="mt-2 mb-2 text-sm text-center text-gray-900">
-        {$_('password-reset-mail-sent', { values: { usersEmail: usersEmail } })}
+        {$_("password-reset-mail-sent", { values: { usersEmail: usersEmail } })}
       </p>
       <div class="mt-6">
         <div class="mt-6">
           <a
             href="/"
-            class="block w-full text-center py-2 px-3 border border-gray-300 rounded-md text-gray-900 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 text-gray-900 font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm"
-            {$_('goback')}
+          >
+            {$_("goback")}
           </a>
         </div>
       </div>
@@ -53,25 +48,26 @@
     <div class="max-w-md w-full py-12 px-6">
       <img style="height:10rem;" class="mx-auto" src="/lfk-logo.png" alt="" />
       <p class="mt-6 text-lg text-center font-bold text-gray-900">
-        {$_('application_name')}
+        {$_("application_name")}
       </p>
       <p class="mt-6 text-sm text-center text-gray-900">
-        {$_('forgot_password')}
+        {$_("forgot_password")}
       </p>
       <p class="mt-2 mb-2 text-sm text-center text-gray-900">
-        {$_('dont-panic-were-resetting-it')}
+        {$_("dont-panic-were-resetting-it")}
       </p>
       <div>
         <div class="rounded-md shadow-sm">
           <div>
             <input
-              aria-label={$_('e-mail-adress')}
+              aria-label={$_("e-mail-adress")}
               name="email"
               type="email"
               required=""
               class="border-gray-300 placeholder-gray-500 appearance-none rounded-none relative block w-full px-3 py-2 border text-gray-900 rounded-t-md focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm"
-              placeholder={$_('e-mail-adress')}
+              placeholder={$_("e-mail-adress")}
-              bind:value={usersEmail} />
+              bind:value={usersEmail}
+            />
           </div>
         </div>
 
@@ -79,19 +75,22 @@
           <button
             on:click={reset}
             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>
-            {$_('reset-my-password')}
+            {$_("reset-my-password")}
           </button>
         </div>
         <div class="mt-6">
@@ -100,24 +99,30 @@
               <div class="w-full border-t border-gray-300" />
             </div>
             <div class="relative flex justify-center text-sm">
-              <span
+              <span class="px-2 bg-gray-100 text-gray-500"
-                class="px-2 bg-gray-100 text-gray-500">{$_('dont-have-your-email-connected')}</span>
+                >{$_("dont-have-your-email-connected")}</span
+              >
             </div>
           </div>
           <span
-            class="mt-2 text-sm px-2 bg-gray-100 text-gray-500 justify-center relative flex">{$_('cannot-reset-your-password-directly')}</span>
+            class="mt-2 text-sm px-2 bg-gray-100 text-gray-500 justify-center relative flex"
+            >{$_("cannot-reset-your-password-directly")}</span
+          >
 
           <div class="mt-6">
             <a
               href="mailto:lfk@odit.services"
-              class="block w-full text-center py-2 px-3 border border-gray-300 rounded-md text-gray-900 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 text-gray-900 font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm"
-              {$_('send-a-mail-to-lfk-odit-services')}
+            >
+              {$_("send-a-mail-to-lfk-odit-services")}
             </a>
           </div>
           <div class="mt-6">
             <a
               href="/"
-              class="block w-full text-center py-2 px-3 border border-gray-300 rounded-md text-gray-900 font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm">{$_('goback')}</a>
+              class="block w-full text-center py-2 px-3 border border-gray-300 rounded-md text-gray-900 font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm"
+              >{$_("goback")}</a
+            >
           </div>
         </div>
       </div>

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-xl text-center font-bold">{$_("application_name")}</p>
-    <p class="mt-6 text-sm text-center">{$_('log_in_to_your_account')}</p>
+    <p class="mt-2 mb-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,29 +110,33 @@
         <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">
+    <!-- <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> -->
   </div>
 </div>
 <Footer />

src/components/auth/PasswordStrength.svelte

@@ -33,20 +33,20 @@
 
 <div class="ml-4">
   <ul class="list-disc font-medium tracking-wide text-red-500 text-xs">
-        {#if !strength.contains.includes('lowercase')}
+    {#if !strength.contains.includes("lowercase")}
-            <li>{$_('must-contain-a-lowercase-letter')}</li>
+      <li>{$_("must-contain-a-lowercase-letter")}</li>
     {/if}
-        {#if !strength.contains.includes('uppercase')}
+    {#if !strength.contains.includes("uppercase")}
-            <li>{$_('must-contain-a-uppercase-letter')}</li>
+      <li>{$_("must-contain-a-uppercase-letter")}</li>
     {/if}
-        {#if !strength.contains.includes('number')}
+    {#if !strength.contains.includes("number")}
-            <li>{$_('must-contain-a-number')}</li>
+      <li>{$_("must-contain-a-number")}</li>
     {/if}
     {#if !(strength.length > 9)}
-            <li>{$_('must-be-at-least-10-characters-long')}</li>
+      <li>{$_("must-be-at-least-10-characters-long")}</li>
     {/if}
     {#if !(passwords_match == true)}
-            <li>{$_('passwords-dont-match')}</li>
+      <li>{$_("passwords-dont-match")}</li>
     {/if}
   </ul>
 </div>

src/components/auth/ResetPassword.svelte

@@ -1,8 +1,7 @@
 <script>
   import { AuthService } from "@odit/lfk-client-js";
   import { _ } from "svelte-i18n";
-  import Toastify from "toastify-js";
+  import toast from "svelte-french-toast";
-  import "toastify-js/src/toastify.css";
   import PasswordStrength, {
     password_strong_enough,
   } from "../auth/PasswordStrength.svelte";
@@ -11,101 +10,97 @@
   export let params;
   function set_new_password() {
     if (password.trim() !== "") {
-      Toastify({
+      toast.loading($_("password-reset-in-progress"));
-        text: $_("password-reset-in-progress"),
-        duration: 3500,
-      }).showToast();
       AuthService.authControllerResetPassword(atob(params.resetkey), {
         password,
       })
         .then((resp) => {
-          Toastify({
+          toast.dismiss();
-            text: $_("password-reset-successful"),
+          toast($_("password-reset-successful"));
-            duration: 3500,
-          }).showToast();
           state = "reset_success";
         })
         .catch((err) => {
           state = "reset_error";
         });
     } else {
-      Toastify({
+      toast.dismiss();
-        text: $_("please-provide-a-password"),
+      toast.error($_("please-provide-a-password"));
-        duration: 3500,
-      }).showToast();
     }
   }
 </script>
 
-{#if state === 'reset_success'}
+{#if state === "reset_success"}
   <div class="min-h-screen flex items-center justify-center bg-gray-100">
     <div class="max-w-md w-full py-12 px-6">
       <img style="height:10rem;" class="mx-auto" src="/lfk-logo.png" alt="" />
       <p class="mt-6 text-lg text-center font-bold text-gray-900">
-        {$_('application_name')}
+        {$_("application_name")}
       </p>
       <p class="mt-2 mb-2 text-sm text-center text-gray-900 font-bold">
-        {$_('successful-password-reset')}
+        {$_("successful-password-reset")}
       </p>
       <p class="mt-2 mb-2 text-sm text-center text-gray-900">
-        {$_('you-can-now-use-your-new-password-to-log-in-to-your-account')}
+        {$_("you-can-now-use-your-new-password-to-log-in-to-your-account")}
       </p>
       <div class="mt-6">
         <div class="mt-6">
           <a
             href="/login/"
-            class="text-center 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="text-center 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"
-            {$_('go-to-login')}
+          >
+            {$_("go-to-login")}
           </a>
         </div>
       </div>
     </div>
   </div>
-{:else if state === 'reset_error'}
+{:else if state === "reset_error"}
   <div class="min-h-screen flex items-center justify-center bg-gray-100">
     <div class="max-w-md w-full py-12 px-6">
       <img style="height:10rem;" class="mx-auto" src="/lfk-logo.png" alt="" />
       <p class="mt-6 text-lg text-center font-bold text-gray-900">
-        {$_('application_name')}
+        {$_("application_name")}
       </p>
       <p class="mt-2 mb-2 text-sm text-center text-gray-900 font-bold">
-        {$_('password-reset-failed')}
+        {$_("password-reset-failed")}
       </p>
       <p class="mt-2 mb-2 text-sm text-center text-gray-900">
-        {$_('please-request-a-new-reset-mail')}
+        {$_("please-request-a-new-reset-mail")}
       </p>
       <div class="mt-6">
         <div class="mt-6">
           <a
             href="/forgot_password/"
-            class="text-center 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="text-center 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"
-            {$_('request-a-new-reset-mail')}
+          >
+            {$_("request-a-new-reset-mail")}
           </a>
         </div>
       </div>
     </div>
   </div>
-{:else if state === 'reset_in_progress'}
+{:else if state === "reset_in_progress"}
   <div class="min-h-screen flex items-center justify-center bg-gray-100">
     <div class="max-w-md w-full py-12 px-6">
       <img style="height:10rem;" class="mx-auto" src="/lfk-logo.png" alt="" />
       <p class="mt-6 text-lg text-center font-bold text-gray-900">
-        {$_('application_name')}
+        {$_("application_name")}
       </p>
       <p class="mt-2 mb-4 text-md text-center text-gray-900">
-        {$_('reset-password')}
+        {$_("reset-password")}
       </p>
       <div>
         <div class="rounded-md shadow-sm">
           <div>
             <input
-              aria-label={$_('new-password')}
+              aria-label={$_("new-password")}
               name="password"
               type="password"
               required=""
               class="border-gray-300 placeholder-gray-500 appearance-none rounded-md relative block w-full px-3 py-2 border text-gray-900 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm"
-              placeholder={$_('new-password')}
+              placeholder={$_("new-password")}
-              bind:value={password} />
+              bind:value={password}
+            />
           </div>
           <PasswordStrength bind:password_change={password} />
         </div>
@@ -116,19 +111,22 @@
             disabled={!password_strong_enough(password)}
             class:opacity-50={!password_strong_enough(password)}
             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>
-            {$_('reset-my-password')}
+            {$_("reset-my-password")}
           </button>
         </div>
       </div>

src/components/base/FormLayout.svelte

@@ -1,274 +0,0 @@
-<!--
-  This example requires Tailwind CSS v2.0+ 
-  
-  This example requires some changes to your config:
-  
-  ```
-  // tailwind.config.js
-  module.exports = {
-    // ...
-    plugins: [
-      // ...
-      require('@tailwindcss/forms'),
-    ]
-  }
-  ```
--->
-<div>
-  <div class="md:grid md:grid-cols-3 md:gap-6">
-    <div class="md:col-span-1">
-      <div class="px-4 sm:px-0">
-        <h3 class="text-lg font-medium leading-6 text-gray-900">Profile</h3>
-        <p class="mt-1 text-sm text-gray-600">
-          This information will be displayed publicly so be careful what you share.
-        </p>
-      </div>
-    </div>
-    <div class="mt-5 md:mt-0 md:col-span-2">
-      <form action="#" method="POST">
-        <div class="shadow sm:rounded-md sm:overflow-hidden">
-          <div class="px-4 py-5 bg-white space-y-6 sm:p-6">
-            <div class="grid grid-cols-3 gap-6">
-              <div class="col-span-3 sm:col-span-2">
-                <label for="company_website" class="block text-sm font-medium text-gray-700">
-                  Website
-                </label>
-                <div class="mt-1 flex rounded-md shadow-sm">
-                  <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 text-sm">
-                    http://
-                  </span>
-                  <input type="text" name="company_website" id="company_website" class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-r-md sm:text-sm border-gray-300" placeholder="www.example.com">
-                </div>
-              </div>
-            </div>
-
-            <div>
-              <label for="about" class="block text-sm font-medium text-gray-700">
-                About
-              </label>
-              <div class="mt-1">
-                <textarea id="about" name="about" rows="3" class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="you@example.com"></textarea>
-              </div>
-              <p class="mt-2 text-sm text-gray-500">
-                Brief description for your profile. URLs are hyperlinked.
-              </p>
-            </div>
-
-            <div>
-              <!-- svelte-ignore a11y-label-has-associated-control -->
-              <label class="block text-sm font-medium text-gray-700">
-                Photo
-              </label>
-              <div class="mt-2 flex items-center">
-                <span class="inline-block h-12 w-12 rounded-full overflow-hidden bg-gray-100">
-                  <svg class="h-full w-full text-gray-300" fill="currentColor" viewBox="0 0 24 24">
-                    <path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />
-                  </svg>
-                </span>
-                <button type="button" class="ml-5 bg-white py-2 px-3 border border-gray-300 rounded-md shadow-sm text-sm leading-4 font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
-                  Change
-                </button>
-              </div>
-            </div>
-
-            <div>
-              <!-- svelte-ignore a11y-label-has-associated-control -->
-              <label class="block text-sm font-medium text-gray-700">
-                Cover photo
-              </label>
-              <div class="mt-2 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
-                <div class="space-y-1 text-center">
-                  <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
-                    <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
-                  </svg>
-                  <div class="flex text-sm text-gray-600">
-                    <label for="file-upload" class="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500">
-                      <span>Upload a file</span>
-                      <input id="file-upload" name="file-upload" type="file" class="sr-only">
-                    </label>
-                    <p class="pl-1">or drag and drop</p>
-                  </div>
-                  <p class="text-xs text-gray-500">
-                    PNG, JPG, GIF up to 10MB
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
-            <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
-              Save
-            </button>
-          </div>
-        </div>
-      </form>
-    </div>
-  </div>
-</div>
-
-<div class="hidden sm:block" aria-hidden="true">
-  <div class="py-5">
-    <div class="border-t border-gray-200"></div>
-  </div>
-</div>
-
-<div class="mt-10 sm:mt-0">
-  <div class="md:grid md:grid-cols-3 md:gap-6">
-    <div class="md:col-span-1">
-      <div class="px-4 sm:px-0">
-        <h3 class="text-lg font-medium leading-6 text-gray-900">Personal Information</h3>
-        <p class="mt-1 text-sm text-gray-600">
-          Use a permanent address where you can receive mail.
-        </p>
-      </div>
-    </div>
-    <div class="mt-5 md:mt-0 md:col-span-2">
-      <form action="#" method="POST">
-        <div class="shadow overflow-hidden sm:rounded-md">
-          <div class="px-4 py-5 bg-white sm:p-6">
-            <div class="grid grid-cols-6 gap-6">
-              <div class="col-span-6 sm:col-span-3">
-                <label for="first_name" class="block text-sm font-medium text-gray-700">First name</label>
-                <input type="text" name="first_name" id="first_name" autocomplete="given-name" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
-              </div>
-
-              <div class="col-span-6 sm:col-span-3">
-                <label for="last_name" class="block text-sm font-medium text-gray-700">Last name</label>
-                <input type="text" name="last_name" id="last_name" autocomplete="family-name" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
-              </div>
-
-              <div class="col-span-6 sm:col-span-4">
-                <label for="email_address" class="block text-sm font-medium text-gray-700">Email address</label>
-                <input type="text" name="email_address" id="email_address" autocomplete="email" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
-              </div>
-
-              <div class="col-span-6 sm:col-span-3">
-                <label for="country" class="block text-sm font-medium text-gray-700">Country / Region</label>
-                <select id="country" name="country" autocomplete="country" class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
-                  <option>United States</option>
-                  <option>Canada</option>
-                  <option>Mexico</option>
-                </select>
-              </div>
-
-              <div class="col-span-6">
-                <label for="street_address" class="block text-sm font-medium text-gray-700">Street address</label>
-                <input type="text" name="street_address" id="street_address" autocomplete="street-address" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
-              </div>
-
-              <div class="col-span-6 sm:col-span-6 lg:col-span-2">
-                <label for="city" class="block text-sm font-medium text-gray-700">City</label>
-                <input type="text" name="city" id="city" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
-              </div>
-
-              <div class="col-span-6 sm:col-span-3 lg:col-span-2">
-                <label for="state" class="block text-sm font-medium text-gray-700">State / Province</label>
-                <input type="text" name="state" id="state" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
-              </div>
-
-              <div class="col-span-6 sm:col-span-3 lg:col-span-2">
-                <label for="postal_code" class="block text-sm font-medium text-gray-700">ZIP / Postal</label>
-                <input type="text" name="postal_code" id="postal_code" autocomplete="postal-code" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
-              </div>
-            </div>
-          </div>
-          <div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
-            <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
-              Save
-            </button>
-          </div>
-        </div>
-      </form>
-    </div>
-  </div>
-</div>
-
-<div class="hidden sm:block" aria-hidden="true">
-  <div class="py-5">
-    <div class="border-t border-gray-200"></div>
-  </div>
-</div>
-
-<div class="mt-10 sm:mt-0">
-  <div class="md:grid md:grid-cols-3 md:gap-6">
-    <div class="md:col-span-1">
-      <div class="px-4 sm:px-0">
-        <h3 class="text-lg font-medium leading-6 text-gray-900">Notifications</h3>
-        <p class="mt-1 text-sm text-gray-600">
-          Decide which communications you'd like to receive and how.
-        </p>
-      </div>
-    </div>
-    <div class="mt-5 md:mt-0 md:col-span-2">
-      <form action="#" method="POST">
-        <div class="shadow overflow-hidden sm:rounded-md">
-          <div class="px-4 py-5 bg-white space-y-6 sm:p-6">
-            <fieldset>
-              <legend class="text-base font-medium text-gray-900">By Email</legend>
-              <div class="mt-4 space-y-4">
-                <div class="flex items-start">
-                  <div class="flex items-center h-5">
-                    <input id="comments" name="comments" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
-                  </div>
-                  <div class="ml-3 text-sm">
-                    <label for="comments" class="font-medium text-gray-700">Comments</label>
-                    <p class="text-gray-500">Get notified when someones posts a comment on a posting.</p>
-                  </div>
-                </div>
-                <div class="flex items-start">
-                  <div class="flex items-center h-5">
-                    <input id="candidates" name="candidates" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
-                  </div>
-                  <div class="ml-3 text-sm">
-                    <label for="candidates" class="font-medium text-gray-700">Candidates</label>
-                    <p class="text-gray-500">Get notified when a candidate applies for a job.</p>
-                  </div>
-                </div>
-                <div class="flex items-start">
-                  <div class="flex items-center h-5">
-                    <input id="offers" name="offers" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
-                  </div>
-                  <div class="ml-3 text-sm">
-                    <label for="offers" class="font-medium text-gray-700">Offers</label>
-                    <p class="text-gray-500">Get notified when a candidate accepts or rejects an offer.</p>
-                  </div>
-                </div>
-              </div>
-            </fieldset>
-            <fieldset>
-              <div>
-                <legend class="text-base font-medium text-gray-900">Push Notifications</legend>
-                <p class="text-sm text-gray-500">These are delivered via SMS to your mobile phone.</p>
-              </div>
-              <div class="mt-4 space-y-4">
-                <div class="flex items-center">
-                  <input id="push_everything" name="push_notifications" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
-                  <label for="push_everything" class="ml-3 block text-sm font-medium text-gray-700">
-                    Everything
-                  </label>
-                </div>
-                <div class="flex items-center">
-                  <input id="push_email" name="push_notifications" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
-                  <label for="push_email" class="ml-3 block text-sm font-medium text-gray-700">
-                    Same as email
-                  </label>
-                </div>
-                <div class="flex items-center">
-                  <input id="push_nothing" name="push_notifications" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
-                  <label for="push_nothing" class="ml-3 block text-sm font-medium text-gray-700">
-                    No push notifications
-                  </label>
-                </div>
-              </div>
-            </fieldset>
-          </div>
-          <div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
-            <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
-              Save
-            </button>
-          </div>
-        </div>
-      </form>
-    </div>
-  </div>
-</div>

src/components/base/NoComponentLoaded.svelte

@@ -7,16 +7,19 @@
     <div class="w-full bg-white flex items-center justify-center">
       <div class="max-w-sm m-8">
         <div class="text-black text-5xl md:text-15xl font-black">
-          {$_('internal-error')}
+          {$_("internal-error")}
         </div>
         <div class="w-16 h-1 bg-purple-light my-3 md:my-6" />
         <p
-          class="text-grey-darker text-2xl md:text-3xl font-light mb-8 leading-normal">
+          class="text-grey-darker text-2xl md:text-3xl font-light mb-8 leading-normal"
-          {$_('generic-ui-logic-error')}
+        >
+          {$_("generic-ui-logic-error")}
         </p>
         <a
           href="/"
-          class="bg-transparent text-grey-darkest font-bold uppercase tracking-wide py-3 px-6 border-2 border-grey-light hover:border-grey rounded-lg">{$_('goback')}</a>
+          class="bg-transparent text-grey-darkest font-bold uppercase tracking-wide py-3 px-6 border-2 border-grey-light hover:border-grey rounded-lg"
+          >{$_("goback")}</a
+        >
       </div>
     </div>
   </div>

src/components/base/PromiseError.svelte

@@ -5,7 +5,7 @@
 
 <div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
   <span class="inline-block align-middle mr-8">
-    <b class="capitalize">{$_('general_promise_error')}</b>
+    <b class="capitalize">{$_("general_promise_error")}</b>
     {error}
   </span>
 </div>

src/components/base/datatable_i18n.js

@@ -1,24 +1,25 @@
 export function getlang(langkeys) {
   return {
     search: {
-			placeholder: langkeys.search
+      placeholder: langkeys.search,
     },
     sort: {
       sortAsc: langkeys.sort_column_ascending,
-			sortDesc: langkeys.sort_column_descending
+      sortDesc: langkeys.sort_column_descending,
     },
     pagination: {
       previous: langkeys.previous,
       next: langkeys.next,
-			navigate: (page, pages) => `${langkeys.page} ${page} ${langkeys.of} ${pages}`,
+      navigate: (page, pages) =>
+        `${langkeys.page} ${page} ${langkeys.of} ${pages}`,
       page: (page) => `${langkeys.page} ${page}`,
       showing: langkeys.showing,
       of: langkeys.of,
       to: langkeys.to,
-			results: langkeys.records
+      results: langkeys.records,
     },
     loading: langkeys.loading,
     noRecordsFound: langkeys.no_matching_records_found,
-		error: langkeys.an_error_happened_while_fetching_the_data
+    error: langkeys.an_error_happened_while_fetching_the_data,
   };
 }

src/components/base/importfixes.svelte

@@ -3,4 +3,4 @@
     Or as others may call it: Real big bullshit time.
     Issue: https://git.odit.services/lfk/frontend/issues/136
  -->
-<div class="opacity-50"></div>
+<div class="opacity-50" />

src/components/base/outsideclick.js

@@ -1,10 +1,10 @@
 /** Dispatch event on click outside of node */
 export function clickOutside(node) {
   const handleClick = (event) => {
-		if (event.target.getAttribute('data-id') === 'modal_backdrop') {
+    if (event.target.getAttribute("data-id") === "modal_backdrop") {
-			node.dispatchEvent(new CustomEvent('click_outside', node));
+      node.dispatchEvent(new CustomEvent("click_outside", node));
     }
   };
-	document.removeEventListener('click', handleClick, true);
+  document.removeEventListener("click", handleClick, true);
-	document.addEventListener('click', handleClick, true);
+  document.addEventListener("click", handleClick, true);
 }

src/components/cards/AddCardBulkModal.svelte

@@ -3,12 +3,9 @@
   import { clickOutside } from "../base/outsideclick";
 
   import { RunnerCardService } from "@odit/lfk-client-js";
-  import Toastify from "toastify-js";
   import { createEventDispatcher } from "svelte";
+  import toast from "svelte-french-toast";
   export let bulk_modal_open;
-  function focus(el) {
-    el.focus();
-  }
   const dispatch = createEventDispatcher();
 
   $: card_count = 0;
@@ -32,28 +29,20 @@
   function submit_without_print() {
     if (processed_last_submit === true) {
       processed_last_submit = false;
-      const toast = Toastify({
+      toast.loading($_("creating-blanco-cards"));
-        text: $_("creating-blanco-cards"),
-        duration: -1,
-      }).showToast();
       RunnerCardService.runnerCardControllerPostBlancoBulk(card_count, true)
         .then((result) => {
           bulk_modal_open = false;
           //
-          Toastify({
+          toast.dismiss();
-            text: $_("created-blanco-cards"),
+          toast.success($_("created-blanco-cards"));
-            duration: 500,
+          dispatch("created", { cards: result });
-            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-          }).showToast();
-          dispatch("created", {cards: result})
         })
         .catch((err) => {
           //
         })
         .finally(() => {
           processed_last_submit = true;
-          //
-          toast.hideToast();
         });
     }
   }
@@ -61,24 +50,16 @@
   function submit_with_print() {
     if (processed_last_submit === true) {
       processed_last_submit = false;
-      const toast = Toastify({
+      toast.dismiss();
-        text: $_("creating-blanco-cards"),
+      toast.loading($_("creating-blanco-cards"));
-        duration: -1,
-      }).showToast();
       RunnerCardService.runnerCardControllerPostBlancoBulk(card_count, true)
         .then((result) => {
           bulk_modal_open = false;
           //
-          Toastify({
+          toast.dismiss();
-            text: $_("created-blanco-cards"),
+          toast.success($_("created-blanco-cards"));
-            duration: 500,
+          toast.loading($_("generating-pdf"));
-            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+          dispatch("created", { cards: result });
-          }).showToast();
-          const toast = Toastify({
-            text: $_("generating-pdf"),
-            duration: -1,
-          }).showToast();
-          dispatch("created", {cards: result})
           fetch(
             `${config.baseurl_documentserver}/cards?&download=true&key=${config.documentserver_key}`,
             {
@@ -91,13 +72,8 @@
           )
             .then((response) => {
               if (response.status != "200") {
-                toast.hideToast();
+                toast.dismiss();
-                Toastify({
+                toast.error($_("pdf-generation-failed"));
-                  text: $_("pdf-generation-failed"),
-                  duration: 3500,
-                  backgroundColor:
-                    "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
-                }).showToast();
               } else {
                 return response.blob();
               }
@@ -110,12 +86,8 @@
               document.body.appendChild(a);
               a.click();
               a.remove();
-              toast.hideToast();
+              toast.dismiss();
-              Toastify({
+              toast.success($_("pdf-successfully-generated"));
-                text: $_("pdf-successfully-generated"),
-                duration: 3500,
-                backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-              }).showToast();
             })
             .catch((err) => {
               console.error(err);
@@ -126,8 +98,6 @@
         })
         .finally(() => {
           processed_last_submit = true;
-          //
-          toast.hideToast();
         });
     }
   }
@@ -136,55 +106,67 @@
 {#if bulk_modal_open}
   <div
     class="fixed z-10 inset-0 overflow-y-auto"
-    
     use:clickOutside
     on:click_outside={() => {
       bulk_modal_open = false;
-    }}>
+    }}
+  >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+    >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
           class="absolute inset-0 bg-gray-500 opacity-75"
-          data-id="modal_backdrop" />
+          data-id="modal_backdrop"
+        />
       </div>
       <span
         class="hidden sm:inline-block sm:align-middle sm:h-screen"
-        aria-hidden="true">&#8203;</span>
+        aria-hidden="true">&#8203;</span
+      >
       <div
         class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full"
         role="dialog"
         aria-modal="true"
-        aria-labelledby="modal-headline">
+        aria-labelledby="modal-headline"
+      >
         <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
           <div class="sm:flex sm:items-start">
             <div
-              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w- rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
+              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w- rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
+            >
               <svg
                 class="h-6 w-6 text-blue-600"
                 fill="currentColor"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
                 width="24"
-                height="24"><path fill="none" d="M0 0h24v24H0z" />
+                height="24"
+                ><path fill="none" d="M0 0h24v24H0z" />
                 <path
                   fill="currentColor"
-                  d="M22 10v10a1 1 0 01-1 1H3a1 1 0 01-1-1V10h20zm0-2H2V4a1 1 0 011-1h18a1 1 0 011 1v4zm-7 8v2h4v-2h-4z" /></svg>
+                  d="M22 10v10a1 1 0 01-1 1H3a1 1 0 01-1-1V10h20zm0-2H2V4a1 1 0 011-1h18a1 1 0 011 1v4zm-7 8v2h4v-2h-4z"
+                /></svg
+              >
             </div>
             <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
-                {$_('create-bulk-blanco-cards')}
+                {$_("create-bulk-blanco-cards")}
               </h3>
               <div class="mt-2 mb-6">
                 <p class="text-sm text-gray-500">
-                  {$_('just-enter-how-many-you-want-and-the-system-will-create-them')}
+                  {$_(
+                    "just-enter-how-many-you-want-and-the-system-will-create-them"
+                  )}
                 </p>
               </div>
               <div class="grid grid-cols-6 gap-6">
                 <div class="col-span-6">
                   <label
                     for="amount"
-                    class="block text-sm font-medium text-gray-700">{$_('amount')}</label>
+                    class="block text-sm font-medium text-gray-700"
+                    >{$_("amount")}</label
+                  >
                   <div class="mt-1 flex rounded-md shadow-sm">
                     <input
                       autocomplete="off"
@@ -196,14 +178,18 @@
                       step="1"
                       name="amount"
                       class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 p-2"
-                      placeholder="400" />
+                      placeholder="400"
+                    />
                     <span
-                      class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm">{$_('cards')}</span>
+                      class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm"
+                      >{$_("cards")}</span
+                    >
                   </div>
                   {#if !is_card_count_valid}
                     <span
-                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-                      {$_('you-must-create-at-least-one-card-or-cancel')}
+                    >
+                      {$_("you-must-create-at-least-one-card-or-cancel")}
                     </span>
                   {/if}
                 </div>
@@ -217,24 +203,27 @@
             class:opacity-50={!createbtnenabled}
             on:click={submit_with_print}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
-            {$_('create-and-generate-pdf')}
+          >
+            {$_("create-and-generate-pdf")}
           </button>
           <button
             disabled={!createbtnenabled}
             class:opacity-50={!createbtnenabled}
             on:click={submit_without_print}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-400 text-base font-medium text-white hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-400 text-base font-medium text-white hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
-            {$_('create-without-pdf')}
+          >
+            {$_("create-without-pdf")}
           </button>
           <button
             on:click={() => {
               bulk_modal_open = false;
             }}
             type="button"
-            class="mr-auto mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
+            class="mr-auto mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
-            {$_('cancel')}
+          >
+            {$_("cancel")}
           </button>
         </div>
       </div>

src/components/cards/AddCardModal.svelte

@@ -2,14 +2,10 @@
   import { _ } from "svelte-i18n";
   import { clickOutside } from "../base/outsideclick";
 
-  import {
+  import { RunnerCardService, RunnerService } from "@odit/lfk-client-js";
-    RunnerCardService,
-    RunnerService,
-    ScanService,
-  } from "@odit/lfk-client-js";
   import Select from "svelte-select";
-  import Toastify from "toastify-js";
   import { createEventDispatcher } from "svelte";
+  import toast from "svelte-french-toast";
   export let modal_open;
 
   const dispatch = createEventDispatcher();
@@ -62,10 +58,7 @@
   function submit() {
     if (processed_last_submit === true) {
       processed_last_submit = false;
-      const toast = Toastify({
+      toast.loading($_("adding-card"));
-        text: $_("adding-card"),
-        duration: -1,
-      }).showToast();
       let postdata = {
         runner,
         enabled,
@@ -75,11 +68,8 @@
           runner = 0;
           modal_open = false;
           //
-          Toastify({
+          toast.dismiss();
-            text: $_("card-added"),
+          toast.success($_("card-added"));
-            duration: 500,
-            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-          }).showToast();
           dispatch("created", { cards: [result] });
         })
         .catch((err) => {
@@ -87,8 +77,6 @@
         })
         .finally(() => {
           processed_last_submit = true;
-          //
-          toast.hideToast();
         });
     }
   }

src/components/cards/CardDetailModal.svelte

@@ -4,8 +4,8 @@
 
   import { RunnerCardService, RunnerService } from "@odit/lfk-client-js";
   import Select from "svelte-select";
-  import Toastify from "toastify-js";
   import { createEventDispatcher } from "svelte";
+  import toast from "svelte-french-toast";
   export let edit_modal_open;
   export let runner = {};
   export let editable = {};
@@ -14,7 +14,7 @@
     option.firstname + " " + (option.middlename || "") + " " + option.lastname;
   const filterRunners = (label, filterText, option) => {
     if (filterText.startsWith("#")) {
-      return option.value.id == parseInt(filterText.replace("#",""))
+      return option.value.id == parseInt(filterText.replace("#", ""));
     }
     return (
       label.toLowerCase().includes(filterText.toLowerCase()) ||
@@ -54,32 +54,23 @@
   function submit() {
     if (processed_last_submit === true) {
       processed_last_submit = false;
-      const toast = Toastify({
+      toast.loading($_("updating-card"));
-        text: $_("updating-card"),
-        duration: -1,
-      }).showToast();
       RunnerCardService.runnerCardControllerPut(original_data.id, editable)
         .then((result) => {
-          let id = original_data.id;
           runner = {};
           editable = {};
           original_data = {};
           edit_modal_open = false;
           //
-          Toastify({
+          toast.dismiss();
-            text: $_("card-updated"),
+          toast.success($_("card-updated"));
-            duration: 500,
+          dispatch("dataUpdated", { card: result });
-            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-          }).showToast();
-          dispatch('dataUpdated', {card: result});
         })
         .catch((err) => {
           //
         })
         .finally(() => {
           processed_last_submit = true;
-          //
-          toast.hideToast();
         });
     }
   }
@@ -88,65 +79,78 @@
 {#if edit_modal_open}
   <div
     class="fixed z-10 inset-0 overflow-y-auto"
-    
     use:clickOutside
     on:click_outside={() => {
       edit_modal_open = false;
-    }}>
+    }}
+  >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+    >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
           class="absolute inset-0 bg-gray-500 opacity-75"
-          data-id="modal_backdrop" />
+          data-id="modal_backdrop"
+        />
       </div>
       <span
         class="hidden sm:inline-block sm:align-middle sm:h-screen"
-        aria-hidden="true">&#8203;</span>
+        aria-hidden="true">&#8203;</span
+      >
       <div
         class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
         role="dialog"
         aria-modal="true"
-        aria-labelledby="modal-headline">
+        aria-labelledby="modal-headline"
+      >
         <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
           <div class="sm:flex sm:items-start">
             <div
-              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
+              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
+            >
               <svg
                 class="h-6 w-6 text-blue-600"
                 fill="currentColor"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
                 width="24"
-                height="24"><path fill="none" d="M0 0h24v24H0z" />
+                height="24"
+                ><path fill="none" d="M0 0h24v24H0z" />
                 <path
                   fill="currentColor"
-                  d="M22 10v10a1 1 0 01-1 1H3a1 1 0 01-1-1V10h20zm0-2H2V4a1 1 0 011-1h18a1 1 0 011 1v4zm-7 8v2h4v-2h-4z" /></svg>
+                  d="M22 10v10a1 1 0 01-1 1H3a1 1 0 01-1-1V10h20zm0-2H2V4a1 1 0 011-1h18a1 1 0 011 1v4zm-7 8v2h4v-2h-4z"
+                /></svg
+              >
             </div>
             <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
-                {$_('edit-a-card')}
+                {$_("edit-a-card")}
               </h3>
               <div class="mt-2 mb-6">
                 <p class="text-sm text-gray-500">
-                  {$_('you-can-provide-a-runner-but-you-dont-have-to')}
+                  {$_("you-can-provide-a-runner-but-you-dont-have-to")}
                 </p>
               </div>
               <div class="grid grid-cols-6 gap-6">
                 <div class="col-span-6">
                   <label
                     for="runner"
-                    class="block text-sm font-medium text-gray-700">{$_('runner')}</label>
+                    class="block text-sm font-medium text-gray-700"
+                    >{$_("runner")}</label
+                  >
                   <Select
                     containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-                    itemFilter={(label, filterText, option) => filterRunners(label, filterText, option)}
+                    itemFilter={(label, filterText, option) =>
+                      filterRunners(label, filterText, option)}
                     items={runners}
                     showChevron={true}
-                    placeholder={$_('search-for-runner-by-name-or-id')}
+                    placeholder={$_("search-for-runner-by-name-or-id")}
-                    noOptionsMessage={$_('no-runners-found')}
+                    noOptionsMessage={$_("no-runners-found")}
                     bind:selectedValue={runner}
-                    on:select={(selectedValue) => (editable.runner = selectedValue.detail.value.id)}
+                    on:select={(selectedValue) =>
-                    on:clear={() => (editable.runner = null)} />
+                      (editable.runner = selectedValue.detail.value.id)}
+                    on:clear={() => (editable.runner = null)}
+                  />
                 </div>
                 <div class="col-span-6">
                   <p class="text-gray-500">
@@ -158,11 +162,12 @@
                       name="enabled"
                       type="checkbox"
                       checked={editable.enabled}
-                      class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
+                      class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
-                    {$_('this-card-is')}
+                    />
+                    {$_("this-card-is")}
                     {#if editable.enabled}
-                      {$_('enabled')}
+                      {$_("enabled")}
-                    {:else}{$_('disabled')}{/if}
+                    {:else}{$_("disabled")}{/if}
                   </p>
                 </div>
               </div>
@@ -175,16 +180,18 @@
             class:opacity-50={!createbtnenabled}
             on:click={submit}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
-            {$_('save-changes')}
+          >
+            {$_("save-changes")}
           </button>
           <button
             on:click={() => {
               edit_modal_open = false;
             }}
             type="button"
-            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
+            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
-            {$_('cancel')}
+          >
+            {$_("cancel")}
           </button>
         </div>
       </div>

src/components/cards/Cards.svelte

@@ -41,7 +41,6 @@
   <AddCardModal
     bind:modal_open
     on:created={(event) => {
-      console.log(event)
       addCards(event.detail.cards);
     }}
   />

src/components/cards/CardsEmptyState.svelte

@@ -6,7 +6,7 @@
 <div class="text-center items-center justify-center">
   <p class="mb-16 text-lg text-gray-500">
     <img class="m-auto" style="height:15rem" src={cards_empty} alt="" />
-    <span class="font-bold">{$_('there-are-no-cards-yet')}</span><br />
+    <span class="font-bold">{$_("there-are-no-cards-yet")}</span><br />
-    <span>{$_('add-your-first-card')}</span>
+    <span>{$_("add-your-first-card")}</span>
   </p>
 </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";
@@ -32,7 +32,6 @@
   export let original_data = {};
   export let current_cards = [];
   export const addCards = (cards) => {
-    console.log(cards);
     current_cards = current_cards.concat(...cards);
     options.update((options) => ({
       ...options,
@@ -148,19 +147,17 @@
       ...options,
       data: current_cards,
     }));
-    Toastify({
+    toast.success($_("card-deleted"));
-      text: $_("card-deleted"),
-      duration: 3500,
-      backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-    }).showToast();
   }
 
   onMount(async () => {
+    toast.loading($_("loading-cards"));
     let page = 0;
+    let pagesize = 100;
     while (page >= 0) {
       const cards = await RunnerCardService.runnerCardControllerGetAll(
         page,
-        500
+        pagesize
       );
       if (cards.length == 0) {
         page = -2;
@@ -174,8 +171,10 @@
 
       dataLoaded = true;
       page++;
+      pagesize += 100;
     }
-    console.log("All cards loaded");
+    toast.dismiss();
+    toast.success($_("all-cards-loaded"));
   });
 </script>
 
@@ -268,7 +267,7 @@
     </div>
     <div class="overflow-x-auto">
       <table class="w-full">
-        <thead>
+        <thead class="border-b border-gray-400">
           {#each $table.getHeaderGroups() as headerGroup}
             <tr class="select-none">
               <th class="inset-y-0 left-0 px-4 py-2 text-left w-px">
@@ -287,7 +286,7 @@
         </thead>
         <tbody>
           {#each $table.getRowModel().rows as row}
-            <tr>
+            <tr class="odd:bg-white even:bg-gray-100">
               <td class="inset-y-0 left-0 px-4 py-2 text-center w-px">
                 <InputElement
                   type="checkbox"
@@ -313,3 +312,9 @@
     <TableBottom {table} {selected} />
   {/if}
 {/if}
+
+<style>
+  table tbody tr td:nth-child(2) {
+    font-family: monospace;
+  }
+</style>

src/components/cards/ThFilterRunner.svelte

@@ -1,57 +0,0 @@
-<script>
-  export let handler;
-  let filterValue = "";
-</script>
-
-<th>
-  <input
-    on:input={() => {
-      setTimeout(() => {
-        const v = filterValue.toLowerCase();
-        handler.filter(v, (c) => {
-          // if (v === "") {
-          //   return c;
-          // }
-
-          if (!c.runner && v === "blanko") {
-            return "blanko";
-          }
-
-          if (v.startsWith("#")) {
-            return `#${c.runner?.id}`;
-          }
-          if (c.runner) {
-            let runnerName = `${c.runner.firstname} ${c.runner.lastname}`;
-            if (c.runner.middlename) {
-              runnerName = `${c.runner.firstname} ${c.runner.middlename} ${c.runner.lastname}`;
-            }
-            runnerName = runnerName.toLowerCase();
-            return runnerName;
-          }
-          return "";
-        });
-      }, 150);
-    }}
-    bind:value={filterValue}
-    type="text"
-    name="runnerfilter"
-    id="runnerfilter"
-  />
-</th>
-
-<style>
-  th {
-    border-bottom: 1px solid #e0e0e0;
-  }
-  input {
-    margin: -1px 0 0 0;
-    padding: 0;
-    width: 100%;
-    height: 24px;
-    border: none;
-    text-align: left;
-    background: inherit;
-    outline: 0;
-    font-size: 14px;
-  }
-</style>

src/components/cards/ThFilterStatus.svelte

@@ -1,45 +0,0 @@
-<script>
-  import { _ } from "svelte-i18n";
-  export let handler;
-  let selected = "all";
-</script>
-
-<th>
-  <select
-    on:input={() => {
-      setTimeout(() => {
-        if (`${selected}`.trim()) {
-          if (selected === "all") {
-            handler.filter("", "enabled");
-          } else {
-            handler.filter(selected, "enabled");
-          }
-        }
-      }, 50);
-    }}
-    bind:value={selected}
-    name="statusfilter"
-    id="statusfilter"
-  >
-    <option value="all">{$_("all")}</option>
-    <option value="true">{$_("enabled")}</option>
-    <option value="false">{$_("disabled")}</option>
-  </select>
-</th>
-
-<style>
-  th {
-    border-bottom: 1px solid #e0e0e0;
-  }
-  select {
-    margin: -1px 0 0 0;
-    padding: 0;
-    width: 100%;
-    height: 24px;
-    border: none;
-    text-align: left;
-    background: inherit;
-    outline: 0;
-    font-size: 14px;
-  }
-</style>

src/components/contacts/AddContactModal.svelte

@@ -9,7 +9,7 @@
   } from "@odit/lfk-client-js";
   import isEmail from "validator/es/lib/isEmail";
   import isMobilePhone from "validator/es/lib/isMobilePhone";
-  import Toastify from "toastify-js";
+  import toast from "svelte-french-toast";
   export let modal_open;
   export let current_contacts;
   $: selected_team = [];
@@ -85,10 +85,7 @@
   function submit() {
     if (processed_last_submit === true) {
       processed_last_submit = false;
-      const toast = Toastify({
+      toast.loading($_("contact-is-being-added"));
-        text: $_('contact-is-being-added'),
-        duration: -1,
-      }).showToast();
       let address = {};
       if (address_checked === true) {
         address = {
@@ -122,11 +119,8 @@
           email_input_value = "";
           modal_open = false;
           //
-          Toastify({
+          toast.dismiss();
-            text: $_('contact-added'),
+          toast.success($_("contact-added"));
-            duration: 500,
-            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-          }).showToast();
           current_contacts.push(result);
           current_contacts = current_contacts;
         })
@@ -135,8 +129,6 @@
         })
         .finally(() => {
           processed_last_submit = true;
-          //
-          toast.hideToast();
         });
     }
   }
@@ -145,58 +137,70 @@
 {#if modal_open}
   <div
     class="fixed z-10 inset-0 overflow-y-auto"
-    
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;
-    }}>
+    }}
+  >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+    >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
           class="absolute inset-0 bg-gray-500 opacity-75"
-          data-id="modal_backdrop" />
+          data-id="modal_backdrop"
+        />
       </div>
       <span
         class="hidden sm:inline-block sm:align-middle sm:h-screen"
-        aria-hidden="true">&#8203;</span>
+        aria-hidden="true">&#8203;</span
+      >
       <div
         class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
         role="dialog"
         aria-modal="true"
-        aria-labelledby="modal-headline">
+        aria-labelledby="modal-headline"
+      >
         <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
           <div class="sm:flex sm:items-start">
             <div
-              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
+              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
+            >
               <svg
                 class="h-6 w-6 text-blue-600"
                 fill="currentColor"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
                 width="24"
-                height="24"><path fill="none" d="M0 0h24v24H0z" />
+                height="24"
+                ><path fill="none" d="M0 0h24v24H0z" />
                 <path
-                  d="M2 22a8 8 0 1 1 16 0H2zm8-9c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6zm10 4h4v2h-4v-2zm-3-5h7v2h-7v-2zm2-5h5v2h-5V7z" /></svg>
+                  d="M2 22a8 8 0 1 1 16 0H2zm8-9c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6zm10 4h4v2h-4v-2zm-3-5h7v2h-7v-2zm2-5h5v2h-5V7z"
+                /></svg
+              >
             </div>
             <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
-                {$_('create-a-new-contact')}
+                {$_("create-a-new-contact")}
               </h3>
               <div class="mt-2 mb-6">
                 <p class="text-sm text-gray-500">
-                  {$_('please-provide-the-required-information-to-add-a-new-contact')}
+                  {$_(
+                    "please-provide-the-required-information-to-add-a-new-contact"
+                  )}
                 </p>
               </div>
               <div class="grid grid-cols-6 gap-6">
                 <div class="col-span-6">
                   <label
                     for="firstname"
-                    class="block text-sm font-medium text-gray-700">{$_('first-name')}</label>
+                    class="block text-sm font-medium text-gray-700"
+                    >{$_("first-name")}</label
+                  >
                   <input
                     use:focus
                     autocomplete="off"
-                    placeholder={$_('first-name')}
+                    placeholder={$_("first-name")}
                     class:border-red-500={!isFirstnameValid}
                     class:focus:border-red-500={!isFirstnameValid}
                     class:focus:ring-red-500={!isFirstnameValid}
@@ -204,34 +208,41 @@
                     bind:this={firstname_input}
                     type="text"
                     name="firstname"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                  />
                   {#if !isFirstnameValid}
                     <span
-                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-                      {$_('first-name-is-required')}
+                    >
+                      {$_("first-name-is-required")}
                     </span>
                   {/if}
                 </div>
                 <div class="col-span-6">
                   <label
                     for="trackname"
-                    class="block text-sm font-medium text-gray-700">{$_('middle-name')}</label>
+                    class="block text-sm font-medium text-gray-700"
+                    >{$_("middle-name")}</label
+                  >
                   <input
                     autocomplete="off"
-                    placeholder={$_('middle-name')}
+                    placeholder={$_("middle-name")}
                     bind:value={middlename_input_value}
                     bind:this={middlename_input}
                     type="text"
                     name="trackname"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                  />
                 </div>
                 <div class="col-span-6">
                   <label
                     for="lastname"
-                    class="block text-sm font-medium text-gray-700">{$_('last-name')}</label>
+                    class="block text-sm font-medium text-gray-700"
+                    >{$_("last-name")}</label
+                  >
                   <input
                     autocomplete="off"
-                    placeholder="{$_('last-name')}"
+                    placeholder={$_("last-name")}
                     class:border-red-500={!isLastnameValid}
                     class:focus:border-red-500={!isLastnameValid}
                     class:focus:ring-red-500={!isLastnameValid}
@@ -239,23 +250,28 @@
                     bind:this={lastname_input}
                     type="text"
                     name="lastname"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                  />
                   {#if !isLastnameValid}
                     <span
-                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-                      {$_('last-name-is-required')}
+                    >
+                      {$_("last-name-is-required")}
                     </span>
                   {/if}
                 </div>
                 <div class="col-span-6">
                   <label
                     for="team"
-                    class="block text-sm font-medium text-gray-700">{$_('teams')}</label>
+                    class="block text-sm font-medium text-gray-700"
+                    >{$_("teams")}</label
+                  >
                   <select
                     name="team"
                     multiple
                     bind:value={selected_team}
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2">
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                  >
                     {#each teams as team}
                       <option value={team.id}>
                         {team.parentGroup.name}
@@ -271,10 +287,12 @@
                 <div class="col-span-6">
                   <label
                     for="phone"
-                    class="block text-sm font-medium text-gray-700">{$_('phone')}</label>
+                    class="block text-sm font-medium text-gray-700"
+                    >{$_("phone")}</label
+                  >
                   <input
                     autocomplete="off"
-                    placeholder={$_('phone')}
+                    placeholder={$_("phone")}
                     class:border-red-500={!isPhoneValidOrEmpty}
                     class:focus:border-red-500={!isPhoneValidOrEmpty}
                     class:focus:ring-red-500={!isPhoneValidOrEmpty}
@@ -282,21 +300,27 @@
                     bind:this={phone_input}
                     type="tel"
                     name="phone"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                  />
                   {#if !isPhoneValidOrEmpty}
                     <span
-                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-                      {@html $_('the-provided-phone-number-is-invalid-less-than-br-greater-than-please-enter-a-valid-international-number')}
+                    >
+                      {@html $_(
+                        "the-provided-phone-number-is-invalid-less-than-br-greater-than-please-enter-a-valid-international-number"
+                      )}
                     </span>
                   {/if}
                 </div>
                 <div class="col-span-6">
                   <label
                     for="email"
-                    class="block text-sm font-medium text-gray-700">{$_('e-mail-adress')}</label>
+                    class="block text-sm font-medium text-gray-700"
+                    >{$_("e-mail-adress")}</label
+                  >
                   <input
                     autocomplete="off"
-                    placeholder={$_('e-mail-adress')}
+                    placeholder={$_("e-mail-adress")}
                     class:border-red-500={!isEmailValidOrEmpty}
                     class:focus:border-red-500={!isEmailValidOrEmpty}
                     class:focus:ring-red-500={!isEmailValidOrEmpty}
@@ -304,11 +328,13 @@
                     bind:this={email_input}
                     type="email"
                     name="email"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                  />
                   {#if !isEmailValidOrEmpty}
                     <span
-                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-                      {$_('valid-email-is-required')}
+                    >
+                      {$_("valid-email-is-required")}
                     </span>
                   {/if}
                 </div>
@@ -319,22 +345,25 @@
                       id="comments"
                       name="comments"
                       type="checkbox"
-                      class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
+                      class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+                    />
                   </div>
                   <div class="ml-3 text-sm">
-                    <label
+                    <label for="comments" class="font-medium text-gray-700"
-                      for="comments"
+                      >{$_("address")}</label
-                      class="font-medium text-gray-700">{$_('address')}</label>
+                    >
                   </div>
                 </div>
                 {#if address_checked === true}
                   <div class="col-span-6">
                     <label
                       for="address1"
-                      class="block text-sm font-medium text-gray-700">{$_('address')}</label>
+                      class="block text-sm font-medium text-gray-700"
+                      >{$_("address")}</label
+                    >
                     <input
                       autocomplete="off"
-                      placeholder="{$_('address')}"
+                      placeholder={$_("address")}
                       class:border-red-500={!isAddress1Valid}
                       class:focus:border-red-500={!isAddress1Valid}
                       class:focus:ring-red-500={!isAddress1Valid}
@@ -342,34 +371,41 @@
                       bind:this={address_input1}
                       type="text"
                       name="address1"
-                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    />
                     {#if !isAddress1Valid}
                       <span
-                        class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                        class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-                        {$_('address-is-required')}
+                      >
+                        {$_("address-is-required")}
                       </span>
                     {/if}
                   </div>
                   <div class="col-span-6">
                     <label
                       for="address2"
-                      class="block text-sm font-medium text-gray-700">{$_('apartment-suite-etc')}</label>
+                      class="block text-sm font-medium text-gray-700"
+                      >{$_("apartment-suite-etc")}</label
+                    >
                     <input
                       autocomplete="off"
-                      placeholder={$_('apartment-suite-etc')}
+                      placeholder={$_("apartment-suite-etc")}
                       bind:value={address_input2_value}
                       bind:this={address_input2}
                       type="text"
                       name="address2"
-                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    />
                   </div>
                   <div class="col-span-6">
                     <label
                       for="zipcode"
-                      class="block text-sm font-medium text-gray-700">{$_('zip-postal-code')}</label>
+                      class="block text-sm font-medium text-gray-700"
+                      >{$_("zip-postal-code")}</label
+                    >
                     <input
                       autocomplete="off"
-                      placeholder={$_('zip-postal-code')}
+                      placeholder={$_("zip-postal-code")}
                       class:border-red-500={!iszipcodevalid}
                       class:focus:border-red-500={!iszipcodevalid}
                       class:focus:ring-red-500={!iszipcodevalid}
@@ -377,21 +413,25 @@
                       bind:this={address_zipcode}
                       type="text"
                       name="zipcode"
-                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    />
                     {#if !iszipcodevalid}
                       <span
-                        class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                        class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-                        {$_('valid-zipcode-postal-code-is-required')}
+                      >
+                        {$_("valid-zipcode-postal-code-is-required")}
                       </span>
                     {/if}
                   </div>
                   <div class="col-span-6">
                     <label
                       for="city"
-                      class="block text-sm font-medium text-gray-700">{$_('city')}</label>
+                      class="block text-sm font-medium text-gray-700"
+                      >{$_("city")}</label
+                    >
                     <input
                       autocomplete="off"
-                      placeholder="{$_('city')}"
+                      placeholder={$_("city")}
                       class:border-red-500={!iscityvalid}
                       class:focus:border-red-500={!iscityvalid}
                       class:focus:ring-red-500={!iscityvalid}
@@ -399,11 +439,13 @@
                       bind:this={address_city}
                       type="text"
                       name="city"
-                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    />
                     {#if !iscityvalid}
                       <span
-                        class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                        class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-                        {$_('valid-city-is-required')}
+                      >
+                        {$_("valid-city-is-required")}
                       </span>
                     {/if}
                   </div>
@@ -418,16 +460,18 @@
             class:opacity-50={!createbtnenabled}
             on:click={submit}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
-            {$_('create')}
+          >
+            {$_("create")}
           </button>
           <button
             on:click={() => {
               modal_open = false;
             }}
             type="button"
-            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
+            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
-            {$_('cancel')}
+          >
+            {$_("cancel")}
           </button>
         </div>
       </div>

src/components/contacts/ContactDetail.svelte

@@ -6,9 +6,9 @@
     RunnerTeamService,
     RunnerOrganizationService,
   } from "@odit/lfk-client-js";
-  import Toastify from "toastify-js";
   import PromiseError from "../base/PromiseError.svelte";
   import isEmail from "validator/es/lib/isEmail";
+  import toast from "svelte-french-toast";
   let data_loaded = false;
   let orgs = [];
   let teams = [];
@@ -48,8 +48,8 @@
         address2: "",
         city: "",
         postalcode: "",
-        country: ""
+        country: "",
-      }
+      };
     }
   });
   RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
@@ -67,10 +67,7 @@
   $: iscityvalid = editable.address?.city?.trim().length !== 0;
   function submit() {
     if (data_loaded === true && save_enabled) {
-      Toastify({
+      toast.loading($_("contact-is-being-updated"));
-        text: $_("contact-is-being-updated"),
-        duration: 2500,
-      }).showToast();
       editable.address.country = "DE";
       if (editable.address_checked === false) {
         editable.address = null;
@@ -82,11 +79,8 @@
         .then((resp) => {
           Object.assign(original_data, editable);
           original_data = original_data;
-          Toastify({
+          toast.dismiss();
-            text: $_("updated-contact"),
+          toast.success($_("updated-contact"));
-            duration: 2500,
-            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-          }).showToast();
         })
         .catch((err) => {});
     } else {
@@ -102,7 +96,7 @@
 </script>
 
 {#await promise}
-  {$_('loading-contact-details')}
+  {$_("loading-contact-details")}
 {:then}
   <section class="container p-5 select-none">
     <div class="flex flex-row mb-4">
@@ -115,12 +109,15 @@
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
                 width="24"
-                height="24"><path fill="none" d="M0 0h24v24H0z" />
+                height="24"
+                ><path fill="none" d="M0 0h24v24H0z" />
                 <path
-                  d="M2 22a8 8 0 1 1 16 0H2zm8-9c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6zm10 4h4v2h-4v-2zm-3-5h7v2h-7v-2zm2-5h5v2h-5V7z" /></svg>
+                  d="M2 22a8 8 0 1 1 16 0H2zm8-9c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6zm10 4h4v2h-4v-2zm-3-5h7v2h-7v-2zm2-5h5v2h-5V7z"
+                /></svg
+              >
             </li>
             <li class="flex items-center ml-2">
-              <a class="mr-2" href="./">{$_('contacts')}</a><svg
+              <a class="mr-2" href="./">{$_("contacts")}</a><svg
                 stroke="currentColor"
                 fill="none"
                 stroke-width="2"
@@ -130,17 +127,17 @@
                 class="h-3 w-3 mr-2 stroke-current"
                 height="1em"
                 width="1em"
-                xmlns="http://www.w3.org/2000/svg"><line
+                xmlns="http://www.w3.org/2000/svg"
-                  x1="5"
+                ><line x1="5" y1="12" x2="19" y2="12" />
-                  y1="12"
+                <polyline points="12 5 19 12 12 19" /></svg
-                  x2="19"
+              >
-                  y2="12" />
-                <polyline points="12 5 19 12 12 19" /></svg>
             </li>
             <li class="flex items-center">
-              <span class="mr-2">{original_data.firstname}
+              <span class="mr-2"
-                {original_data.middlename || ''}
+                >{original_data.firstname}
-                {original_data.lastname}</span>
+                {original_data.middlename || ""}
+                {original_data.lastname}</span
+              >
             </li>
           </ol>
         </nav>
@@ -148,19 +145,23 @@
     </div>
     <div class="mb-8 text-3xl font-extrabold leading-tight">
       {original_data.firstname}
-      {original_data.middlename || ''}
+      {original_data.middlename || ""}
       {original_data.lastname}
       <span data-id="contact_actions_${editable.id}">
-        {#if store.state.jwtinfo.userdetails.permissions.includes('CONTACT:DELETE')}
+        {#if store.state.jwtinfo.userdetails.permissions.includes("CONTACT:DELETE")}
           {#if delete_triggered}
             <button
               on:click={deleteContact}
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('confirm-deletion')}</button>
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
+              >{$_("confirm-deletion")}</button
+            >
             <button
               on:click={() => {
                 delete_triggered = !delete_triggered;
               }}
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm">{$_('cancel')}</button>
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm"
+              >{$_("cancel")}</button
+            >
           {/if}
           {#if !delete_triggered}
             <button
@@ -168,7 +169,9 @@
                 delete_triggered = true;
               }}
               type="button"
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('delete-contact')}</button>
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
+              >{$_("delete-contact")}</button
+            >
           {/if}
         {/if}
         {#if !delete_triggered}
@@ -177,112 +180,124 @@
             class:opacity-50={!save_enabled}
             type="button"
             on:click={submit}
-            class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('save-changes')}</button>
+            class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
+            >{$_("save-changes")}</button
+          >
         {/if}
       </span>
     </div>
     <!--  -->
     <div class="text-sm w-full">
-      <label
+      <label for="firstname" class="font-medium text-gray-700"
-        for="firstname"
+        >{$_("first-name")}</label
-        class="font-medium text-gray-700">{$_('first-name')}</label>
+      >
       <input
         autocomplete="off"
-        placeholder={$_('first-name')}
+        placeholder={$_("first-name")}
         type="text"
         class:border-red-500={!isFirstnameValid}
         class:focus:border-red-500={!isFirstnameValid}
         class:focus:ring-red-500={!isFirstnameValid}
         bind:value={editable.firstname}
         name="firstname"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+      />
       {#if !isFirstnameValid}
         <span
-          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-          {$_('first-name-is-required')}
+        >
+          {$_("first-name-is-required")}
         </span>
       {/if}
     </div>
     <div class="text-sm w-full">
-      <label
+      <label for="middlename" class="font-medium text-gray-700"
-        for="middlename"
+        >{$_("middle-name")}</label
-        class="font-medium text-gray-700">{$_('middle-name')}</label>
+      >
       <input
         autocomplete="off"
-        placeholder={$_('middle-name')}
+        placeholder={$_("middle-name")}
         type="text"
         bind:value={editable.middlename}
         name="middlename"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+      />
     </div>
     <div class="text-sm w-full">
-      <label
+      <label for="lastname" class="font-medium text-gray-700"
-        for="lastname"
+        >{$_("last-name")}</label
-        class="font-medium text-gray-700">{$_('last-name')}</label>
+      >
       <input
         autocomplete="off"
-        placeholder={$_('last-name')}
+        placeholder={$_("last-name")}
         type="text"
         bind:value={editable.lastname}
         class:border-red-500={!isLastnameValid}
         class:focus:border-red-500={!isLastnameValid}
         class:focus:ring-red-500={!isLastnameValid}
         name="lastname"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+      />
       {#if !isLastnameValid}
         <span
-          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-          {$_('last-name-is-required')}
+        >
+          {$_("last-name-is-required")}
         </span>
       {/if}
     </div>
     <div class="text-sm w-full">
-      <label
+      <label for="email" class="font-medium text-gray-700"
-        for="email"
+        >{$_("e-mail-adress")}</label
-        class="font-medium text-gray-700">{$_('e-mail-adress')}</label>
+      >
       <input
         autocomplete="off"
-        placeholder={$_('e-mail-adress')}
+        placeholder={$_("e-mail-adress")}
         type="email"
         bind:value={editable.email}
         class:border-red-500={!isEmailValid}
         class:focus:border-red-500={!isEmailValid}
         class:focus:ring-red-500={!isEmailValid}
         name="email"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+      />
       {#if !isEmailValid}
         <span
-          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-          {$_('valid-email-is-required')}
+        >
+          {$_("valid-email-is-required")}
         </span>
       {/if}
     </div>
     <div class="text-sm w-full">
-      <label for="phone" class="font-medium text-gray-700">{$_('phone')}</label>
+      <label for="phone" class="font-medium text-gray-700">{$_("phone")}</label>
       <input
         autocomplete="off"
-        placeholder={$_('phone')}
+        placeholder={$_("phone")}
         type="tel"
         class:border-red-500={!isPhoneValidOrEmpty}
         class:focus:border-red-500={!isPhoneValidOrEmpty}
         class:focus:ring-red-500={!isPhoneValidOrEmpty}
         bind:value={editable.phone}
         name="phone"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+      />
       {#if !isPhoneValidOrEmpty}
         <span
-          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-          {$_('valid-international-phone-number-is-required')}
+        >
+          {$_("valid-international-phone-number-is-required")}
         </span>
       {/if}
     </div>
     <div class="text-sm w-full">
-      <span class="font-medium text-gray-700">{$_('groups')}</span>
+      <span class="font-medium text-gray-700">{$_("groups")}</span>
       <select
         bind:value={editable.groups}
         name="team"
         multiple
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2">
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+      >
         {#each teams as team}
           <option value={team.id}>
             {team.parentGroup.name}
@@ -303,19 +318,20 @@
           id="comments"
           name="comments"
           type="checkbox"
-          class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
+          class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+        />
       </div>
       <div class="ml-3 text-sm">
-        <label
+        <label for="comments" class="font-medium text-gray-700"
-          for="comments"
+          >{$_("address")}</label
-          class="font-medium text-gray-700">{$_('address')}</label>
+        >
       </div>
     </div>
     {#if editable.address_checked === true}
       <div class="col-span-6">
-        <label
+        <label for="address1" class="block text-sm font-medium text-gray-700"
-          for="address1"
+          >{$_("address")}</label
-          class="block text-sm font-medium text-gray-700">{$_('address')}</label>
+        >
         <input
           autocomplete="off"
           placeholder="Address"
@@ -325,65 +341,72 @@
           bind:value={editable.address.address1}
           type="text"
           name="address1"
-          class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+          class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+        />
         {#if !isAddress1Valid}
           <span
-            class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+            class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-            {$_('address-is-required')}
+          >
+            {$_("address-is-required")}
           </span>
         {/if}
       </div>
       <div class="col-span-6">
-        <label
+        <label for="address2" class="block text-sm font-medium text-gray-700"
-          for="address2"
+          >{$_("apartment-suite-etc")}</label
-          class="block text-sm font-medium text-gray-700">{$_('apartment-suite-etc')}</label>
+        >
         <input
           autocomplete="off"
-          placeholder={$_('apartment-suite-etc')}
+          placeholder={$_("apartment-suite-etc")}
           bind:value={editable.address.address2}
           type="text"
           name="address2"
-          class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+          class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+        />
       </div>
       <div class="col-span-6">
-        <label
+        <label for="zipcode" class="block text-sm font-medium text-gray-700"
-          for="zipcode"
+          >{$_("zip-postal-code")}</label
-          class="block text-sm font-medium text-gray-700">{$_('zip-postal-code')}</label>
+        >
         <input
           autocomplete="off"
-          placeholder={$_('zip-postal-code')}
+          placeholder={$_("zip-postal-code")}
           class:border-red-500={!iszipcodevalid}
           class:focus:border-red-500={!iszipcodevalid}
           class:focus:ring-red-500={!iszipcodevalid}
           bind:value={editable.address.postalcode}
           type="text"
           name="zipcode"
-          class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+          class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+        />
         {#if !iszipcodevalid}
           <span
-            class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+            class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-            {$_('valid-zipcode-postal-code-is-required')}
+          >
+            {$_("valid-zipcode-postal-code-is-required")}
           </span>
         {/if}
       </div>
       <div class="col-span-6">
-        <label
+        <label for="city" class="block text-sm font-medium text-gray-700"
-          for="city"
+          >{$_("city")}</label
-          class="block text-sm font-medium text-gray-700">{$_('city')}</label>
+        >
         <input
           autocomplete="off"
-          placeholder={$_('city')}
+          placeholder={$_("city")}
           class:border-red-500={!iscityvalid}
           class:focus:border-red-500={!iscityvalid}
           class:focus:ring-red-500={!iscityvalid}
           bind:value={editable.address.city}
           type="text"
           name="city"
-          class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+          class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+        />
         {#if !iscityvalid}
           <span
-            class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+            class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-            {$_('valid-city-is-required')}
+          >
+            {$_("valid-city-is-required")}
           </span>
         {/if}
       </div>

src/components/contacts/Contacts.svelte

@@ -9,21 +9,22 @@
 
 <section class="container p-5">
   <span class="mb-1 text-3xl font-extrabold leading-tight">
-    {$_('contacts')}
+    {$_("contacts")}
-    {#if store.state.jwtinfo.userdetails.permissions.includes('CONTACT:CREATE')}
+    {#if store.state.jwtinfo.userdetails.permissions.includes("CONTACT:CREATE")}
       <button
         on:click={() => {
           modal_open = true;
         }}
         type="button"
-        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
+        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
-        {$_('create-a-new-contact')}
+      >
+        {$_("create-a-new-contact")}
       </button>
     {/if}
   </span>
   <ContactsOverview bind:current_contacts />
 </section>
 
-{#if store.state.jwtinfo.userdetails.permissions.includes('CONTACT:CREATE')}
+{#if store.state.jwtinfo.userdetails.permissions.includes("CONTACT:CREATE")}
   <AddContactModal bind:current_contacts bind:modal_open />
 {/if}

src/components/contacts/ContactsEmptyState.svelte

@@ -9,8 +9,8 @@
 <div class="text-center items-center justify-center">
   <p class="mb-16 text-lg text-gray-500">
     <img class="w-full h-44" src={team_empty} alt="" />
-    <span class="font-bold">{$_('there-are-no-contacts-added-yet')}</span><br />
+    <span class="font-bold">{$_("there-are-no-contacts-added-yet")}</span><br />
-    <span>{$_('add-your-first-contact')}</span>
+    <span>{$_("add-your-first-contact")}</span>
   </p>
 </div>
 

src/components/contacts/ContactsOverview.svelte

@@ -1,6 +1,5 @@
 <script>
   import { _ } from "svelte-i18n";
-  import Toastify from "toastify-js";
   import { GroupContactService } from "@odit/lfk-client-js";
   const promise = GroupContactService.groupContactControllerGetAll().then(
     (result) => {
@@ -9,18 +8,20 @@
   );
   import store from "../../store";
   import ContactsEmptyState from "./ContactsEmptyState.svelte";
+  import toast from "svelte-french-toast";
   $: searchvalue = "";
   $: active_deletes = [];
   export let current_contacts = [];
 </script>
 
-{#if store.state.jwtinfo.userdetails.permissions.includes('TEAM:GET')}
+{#if store.state.jwtinfo.userdetails.permissions.includes("TEAM:GET")}
   {#await promise}
     <div
       class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
-      role="alert">
+      role="alert"
-      <p class="font-bold">{$_('contacts-are-being-loaded')}</p>
+    >
-      <p class="text-sm">{$_('this-might-take-a-moment')}</p>
+      <p class="font-bold">{$_("contacts-are-being-loaded")}</p>
+      <p class="text-sm">{$_("this-might-take-a-moment")}</p>
     </div>
   {:then}
     {#if current_contacts.length === 0}
@@ -29,31 +30,36 @@
       <input
         type="search"
         bind:value={searchvalue}
-        placeholder={$_('datatable.search')}
+        placeholder={$_("datatable.search")}
-        aria-label={$_('datatable.search')}
+        aria-label={$_("datatable.search")}
-        class="mb-4" />
+        class="mb-4"
+      />
       <div
-        class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
+        class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll"
+      >
         <table class="divide-y divide-gray-200 w-full">
           <thead class="bg-gray-50">
-            <tr>
+            <tr class="odd:bg-white even:bg-gray-100">
               <th
                 scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-                {$_('name')}
+              >
+                {$_("name")}
               </th>
               <th
                 scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-                {$_('groups')}
+              >
+                {$_("groups")}
               </th>
               <th
                 scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-                {$_('address')}
+              >
+                {$_("address")}
               </th>
               <th scope="col" class="relative px-6 py-3">
-                <span class="sr-only">{$_('action')}</span>
+                <span class="sr-only">{$_("action")}</span>
               </th>
             </tr>
           </thead>
@@ -63,13 +69,16 @@
                 .toString()
                 .toLowerCase()
                 .includes(searchvalue)}
-                <tr data-rowid="team_{t.id}">
+                <tr
+                  class="odd:bg-white even:bg-gray-100"
+                  data-rowid="team_{t.id}"
+                >
                   <td class="px-6 py-4 whitespace-nowrap">
                     <div class="flex items-center">
                       <div class="ml-4">
                         <div class="text-sm font-medium text-gray-900">
                           {t.firstname}
-                          {t.middlename || ''}
+                          {t.middlename || ""}
                           {t.lastname}
                         </div>
                       </div>
@@ -81,20 +90,24 @@
                         <div class="text-sm font-medium text-gray-900">
                           {#if t.groups.length > 0}
                             {#each t.groups as g}
-                              {#if g.responseType === 'RUNNERORGANIZATION'}
+                              {#if g.responseType === "RUNNERORGANIZATION"}
                                 <a
                                   href="../orgs/{g.id}"
-                                  class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{g.name}</a>
+                                  class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
+                                  >{g.name}</a
+                                >
                               {:else}
                                 <a
                                   href="../teams/{g.id}"
-                                  class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{g.parentGroup.name}
+                                  class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
+                                  >{g.parentGroup.name}
                                   &gt;
-                                  {g.name}</a>
+                                  {g.name}</a
+                                >
                               {/if}
                             {/each}
                           {:else}
-                            {$_('contact-is-not-a-member-in-any-group')}
+                            {$_("contact-is-not-a-member-in-any-group")}
                           {/if}
                         </div>
                       </div>
@@ -106,7 +119,7 @@
                         <div class="text-sm font-medium text-gray-900">
                           {#if t.address.address1 !== null}
                             {t.address.address1}<br />
-                            {t.address.address2 || ''}<br />
+                            {t.address.address2 || ""}<br />
                             {t.address.postalcode}
                             {t.address.city}
                             {t.address.country}
@@ -117,45 +130,53 @@
                   </td>
                   {#if active_deletes[t.id] === true}
                     <td
-                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
+                    >
                       <button
                         on:click={() => {
                           active_deletes[t.id] = false;
                         }}
                         tabindex="0"
-                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
+                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
+                        >{$_("cancel-delete")}</button
+                      >
                       <button
                         on:click={() => {
-                          GroupContactService.groupContactControllerRemove(t.id, false).then(
+                          toast.loading($_("deleting-contact"));
-                            (resp) => {
+                          GroupContactService.groupContactControllerRemove(
+                            t.id,
+                            false
+                          ).then((resp) => {
                             current_contacts = current_contacts.filter(
                               (obj) => obj.id !== t.id
                             );
-                              Toastify({
+                            toast.dismiss();
-                                text: $_('contact-deleted'),
+                            toast($_("contact-deleted"));
-                                duration: 500,
+                          });
-                                backgroundColor:
-                                  'linear-gradient(to right, #00b09b, #96c93d)',
-                              }).showToast();
-                            }
-                          );
                         }}
                         tabindex="0"
-                        class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
+                        class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
+                        >{$_("confirm-delete")}</button
+                      >
                     </td>
                   {:else}
                     <td
-                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
+                    >
                       <a
                         href="./{t.id}"
-                        class="text-indigo-600 hover:text-indigo-900">{$_('details')}</a>
+                        class="text-indigo-600 hover:text-indigo-900"
-                      {#if store.state.jwtinfo.userdetails.permissions.includes('TEAM:DELETE')}
+                        >{$_("details")}</a
+                      >
+                      {#if store.state.jwtinfo.userdetails.permissions.includes("TEAM:DELETE")}
                         <button
                           on:click={() => {
                             active_deletes[t.id] = true;
                           }}
                           tabindex="0"
-                          class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('delete')}</button>
+                          class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
+                          >{$_("delete")}</button
+                        >
                       {/if}
                     </td>
                   {/if}
@@ -169,7 +190,7 @@
   {:catch error}
     <div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
       <span class="inline-block align-middle mr-8">
-        <b class="capitalize">{$_('general_promise_error')}</b>
+        <b class="capitalize">{$_("general_promise_error")}</b>
         {error}
       </span>
     </div>

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();
@@ -12,6 +13,412 @@
   }
 </script>
 
+<section class="min-h-screen bg-gray-50">
+  <div
+    class:collapsed_navigation={!navOpen}
+    class="select-none fixed top-0 left-0 z-20 h-full pb-10 overflow-x-hidden overflow-y-auto transition origin-left transform border-r w-60 bg-gray-50"
+  >
+    <a href="/" class="flex items-center px-4 py-5">
+      <img src="/lfk-logo.png" alt="Logo" class="h-10" />
+      <h3 class="text-lg font-bold">LfK!Admin</h3>
+    </a>
+    <nav class="text-sm font-medium text-gray-600" aria-label="Main Navigation">
+      <a
+        class:bg-gray-100={$router.path === "/"}
+        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+        href="/"
+      >
+        <svg
+          class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+        >
+          <path
+            d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"
+          />
+        </svg>
+        <span>{$_("dashboard-title")}</span>
+      </a>
+      {#if store.state.jwtinfo.userdetails.permissions.includes("ORGANIZATION:GET")}
+        <a
+          class:bg-gray-100={$router.path.includes("/orgs/")}
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+          href="/orgs/"
+        >
+          <svg
+            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+            fill="currentColor"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            width="24"
+            height="24"
+            ><path fill="none" d="M0 0h24v24H0z" />
+            <path
+              d="M17 19h2v-8h-6v8h2v-6h2v6zM3 19V4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v5h2v10h1v2H2v-2h1zm4-8v2h2v-2H7zm0 4v2h2v-2H7zm0-8v2h2V7H7z"
+            /></svg
+          >
+          <span>{$_("orgs")}</span>
+        </a>
+      {/if}
+      {#if store.state.jwtinfo.userdetails.permissions.includes("USER:GET")}
+        <a
+          class:bg-gray-100={$router.path === "/users/"}
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+          href="/users/"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+            fill="currentColor"
+            viewBox="0 0 24 24"
+            ><path fill="none" d="M0 0h24v24H0z" />
+            <path
+              d="M12 14v8H4a8 8 0 018-8zm0-1a6 6 0 110-12 6 6 0 010 12zm2.6 5.81a3.51 3.51 0 010-1.62l-1-.57 1-1.74 1 .58a3.5 3.5 0 011.4-.82V13.5h2v1.15a3.5 3.5 0 011.4.8l1-.57 1 1.74-1 .57a3.51 3.51 0 010 1.62l1 .57-1 1.74-1-.58a3.5 3.5 0 01-1.4.82v1.14h-2v-1.15a3.5 3.5 0 01-1.4-.8l-1 .57-1-1.74 1-.57zM18 17a1 1 0 100 2 1 1 0 000-2z"
+            /></svg
+          >
+          <span>{$_("users")}</span>
+        </a>
+      {/if}
+      {#if store.state.jwtinfo.userdetails.permissions.includes("USERGROUP:GET")}
+        <a
+          class:bg-gray-100={$router.path === "/groups/"}
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+          href="/groups/"
+        >
+          <svg
+            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+            fill="currentColor"
+            width="24"
+            height="24"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 640 512"
+            ><path
+              fill="currentColor"
+              d="M610.5 341.3c2.6-14.1 2.6-28.5 0-42.6l25.8-14.9c3-1.7 4.3-5.2 3.3-8.5-6.7-21.6-18.2-41.2-33.2-57.4-2.3-2.5-6-3.1-9-1.4l-25.8 14.9c-10.9-9.3-23.4-16.5-36.9-21.3v-29.8c0-3.4-2.4-6.4-5.7-7.1-22.3-5-45-4.8-66.2 0-3.3.7-5.7 3.7-5.7 7.1v29.8c-13.5 4.8-26 12-36.9 21.3l-25.8-14.9c-2.9-1.7-6.7-1.1-9 1.4-15 16.2-26.5 35.8-33.2 57.4-1 3.3.4 6.8 3.3 8.5l25.8 14.9c-2.6 14.1-2.6 28.5 0 42.6l-25.8 14.9c-3 1.7-4.3 5.2-3.3 8.5 6.7 21.6 18.2 41.1 33.2 57.4 2.3 2.5 6 3.1 9 1.4l25.8-14.9c10.9 9.3 23.4 16.5 36.9 21.3v29.8c0 3.4 2.4 6.4 5.7 7.1 22.3 5 45 4.8 66.2 0 3.3-.7 5.7-3.7 5.7-7.1v-29.8c13.5-4.8 26-12 36.9-21.3l25.8 14.9c2.9 1.7 6.7 1.1 9-1.4 15-16.2 26.5-35.8 33.2-57.4 1-3.3-.4-6.8-3.3-8.5l-25.8-14.9zM496 368.5c-26.8 0-48.5-21.8-48.5-48.5s21.8-48.5 48.5-48.5 48.5 21.8 48.5 48.5-21.7 48.5-48.5 48.5zM96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm224 32c1.9 0 3.7-.5 5.6-.6 8.3-21.7 20.5-42.1 36.3-59.2 7.4-8 17.9-12.6 28.9-12.6 6.9 0 13.7 1.8 19.6 5.3l7.9 4.6c.8-.5 1.6-.9 2.4-1.4 7-14.6 11.2-30.8 11.2-48 0-61.9-50.1-112-112-112S208 82.1 208 144c0 61.9 50.1 112 112 112zm105.2 194.5c-2.3-1.2-4.6-2.6-6.8-3.9-8.2 4.8-15.3 9.8-27.5 9.8-10.9 0-21.4-4.6-28.9-12.6-18.3-19.8-32.3-43.9-40.2-69.6-10.7-34.5 24.9-49.7 25.8-50.3-.1-2.6-.1-5.2 0-7.8l-7.9-4.6c-3.8-2.2-7-5-9.8-8.1-3.3.2-6.5.6-9.8.6-24.6 0-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h255.4c-3.7-6-6.2-12.8-6.2-20.3v-9.2zM173.1 274.6C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"
+            /></svg
+          >
+          <span>{$_("user-groups")}</span>
+        </a>
+      {/if}
+      {#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:GET")}
+        <a
+          class:bg-gray-100={$router.path === "/runners/"}
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+          href="/runners/"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+            fill="currentColor"
+            width="24"
+            height="24"
+            ><path fill="none" d="M0 0h24v24H0z" />
+            <path
+              d="M9.83 8.79L8 9.456V13H6V8.05h.015l5.268-1.918c.244-.093.51-.14.782-.131a2.616 2.616 0 0 1 2.427 1.82c.186.583.356.977.51 1.182A4.992 4.992 0 0 0 19 11v2a6.986 6.986 0 0 1-5.402-2.547l-.581 3.297L15 15.67V23h-2v-5.986l-2.05-1.987-.947 4.298-6.894-1.215.348-1.97 4.924.868L9.83 8.79zM13.5 5.5a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"
+            /></svg
+          >
+          <span>{$_("runners")}</span>
+        </a>
+      {/if}
+      {#if store.state.jwtinfo.userdetails.permissions.includes("TEAM:GET")}
+        <a
+          class:bg-gray-100={$router.path === "/teams/"}
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+          href="/teams/"
+        >
+          <svg
+            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+            fill="currentColor"
+            width="24"
+            height="24"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 640 512"
+            ><path
+              fill="currentColor"
+              d="M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"
+            /></svg
+          >
+          <span>{$_("teams")}</span>
+        </a>
+      {/if}
+      {#if store.state.jwtinfo.userdetails.permissions.includes("DONOR:GET")}
+        <a
+          class:bg-gray-100={$router.path.includes("/donors/")}
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+          href="/donors/"
+        >
+          <svg
+            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+            fill="currentColor"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            width="24"
+            height="24"
+            ><path fill="none" d="M0 0h24v24H0z" />
+            <path
+              d="M9.33 11.5h2.17A4.5 4.5 0 0 1 16 16H8.999L9 17h8v-1a5.578 5.578 0 0 0-.886-3H19a5 5 0 0 1 4.516 2.851C21.151 18.972 17.322 21 13 21c-2.761 0-5.1-.59-7-1.625L6 10.071A6.967 6.967 0 0 1 9.33 11.5zM5 19a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v9zM18 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6zm-7-3a3 3 0 1 1 0 6 3 3 0 0 1 0-6z"
+            /></svg
+          >
+          <span>{$_("donors")}</span>
+        </a>
+      {/if}
+      {#if store.state.jwtinfo.userdetails.permissions.includes("DONATION:GET")}
+        <a
+          class:bg-gray-100={$router.path.includes("/donations/")}
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+          href="/donations/"
+        >
+          <svg
+            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+            fill="currentColor"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            width="24"
+            height="24"
+            ><path fill="none" d="M0 0h24v24H0z" />
+            <path
+              d="M14 2a8 8 0 013.3 15.3A8 8 0 116.7 6.7 8 8 0 0114 2zm-3 7H9v1a2.5 2.5 0 00-.16 5h2.25a.5.5 0 010 1H7v2h2v1h2v-1a2.5 2.5 0 00.16-5H8.91a.5.5 0 010-1H13v-2h-2V9zm3-5a5.99 5.99 0 00-4.48 2.01 8 8 0 018.47 8.47A6 6 0 0014 4z"
+            /></svg
+          >
+          <span>{$_("donations")}</span>
+        </a>
+      {/if}
+      {#if store.state.jwtinfo.userdetails.permissions.includes("TRACK:GET")}
+        <a
+          class:bg-gray-100={$router.path === "/tracks/"}
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+          href="/tracks/"
+        >
+          <svg
+            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+            fill="currentColor"
+            width="24"
+            height="24"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 640 512"
+            ><path
+              fill="currentColor"
+              d="M635.7 167.2L556.1 31.7c-8.8-15-28.3-20.1-43.5-11.5l-69 39.1L503.3 161c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L416 75l-55.2 31.3 27.9 47.4c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L333.2 122 278 153.3 337.8 255c2.2 3.7.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9l-59.7-101.7-55.2 31.3 27.9 47.4c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9l-27.9-47.5-55.2 31.3 59.7 101.7c2.2 3.7.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L84.9 262.9l-69 39.1C.7 310.7-4.6 329.8 4.2 344.8l79.6 135.6c8.8 15 28.3 20.1 43.5 11.5L624.1 210c15.2-8.6 20.4-27.8 11.6-42.8z"
+            /></svg
+          >
+          <span>{$_("tracks")}</span>
+        </a>
+      {/if}
+      {#if store.state.jwtinfo.userdetails.permissions.includes("CARD:GET")}
+        <a
+          class:bg-gray-100={$router.path === "/cards/"}
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+          href="/cards/"
+        >
+          <svg
+            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+            fill="currentColor"
+            width="24"
+            height="24"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+          >
+            <path fill="none" d="M0 0h24v24H0z" />
+            <path
+              fill="currentColor"
+              d="M22 10v10a1 1 0 01-1 1H3a1 1 0 01-1-1V10h20zm0-2H2V4a1 1 0 011-1h18a1 1 0 011 1v4zm-7 8v2h4v-2h-4z"
+            /></svg
+          >
+          <span>{$_("cards")}</span>
+        </a>
+      {/if}
+      {#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:GET")}
+        <a
+          class:bg-gray-100={$router.path === "/scans/"}
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+          href="/scans/"
+        >
+          <svg
+            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+            fill="currentColor"
+            width="24"
+            height="24"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            ><path fill="none" d="M0 0h24v24H0z" />
+            <path
+              fill="currentColor"
+              d="M2 4h2v16H2V4zm4 0h1v16H6V4zm2 0h2v16H8V4zm3 0h2v16h-2V4zm3 0h2v16h-2V4zm3 0h1v16h-1V4zm2 0h3v16h-3V4z"
+            /></svg
+          >
+          <span>Scans</span>
+        </a>
+      {/if}
+      {#if store.state.jwtinfo.userdetails.permissions.includes("CONTACT:GET")}
+        <a
+          class:bg-gray-100={$router.path === "/contacts/"}
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+          href="/contacts/"
+        >
+          <svg
+            fill="currentColor"
+            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            width="24"
+            height="24"
+            ><path fill="none" d="M0 0h24v24H0z" />
+            <path
+              d="M2 22a8 8 0 1 1 16 0H2zm8-9c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6zm10 4h4v2h-4v-2zm-3-5h7v2h-7v-2zm2-5h5v2h-5V7z"
+            /></svg
+          >
+          <span>{$_("contacts")}</span>
+        </a>
+      {/if}
+      {#if store.state.jwtinfo.userdetails.permissions.includes("STATION:GET")}
+        <a
+          class:bg-gray-100={$router.path === "/scanstations/"}
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+          href="/scanstations/"
+        >
+          <svg
+            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+            fill="currentColor"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+            ><path fill="none" d="M0 0h24v24H0z" />
+            <path
+              fill="currentColor"
+              d="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z"
+            /></svg
+          >
+          <span>{$_("scanstations")}</span>
+        </a>
+      {/if}
+      {#if store.state.jwtinfo.userdetails.permissions.includes("STATSCLIENT:GET")}
+        <a
+          class:bg-gray-100={$router.path === "/statsclients/"}
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+          href="/statsclients/"
+        >
+          <svg
+            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+            fill="currentColor"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+            ><path fill="none" d="M0 0h24v24H0z" />
+            <path
+              fill="currentColor"
+              d="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z"
+            /></svg
+          >
+          <span>{$_("statsclients")}</span>
+        </a>
+      {/if}
+      <a
+        class:bg-gray-100={$router.path === "/settings/"}
+        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+        href="/settings/"
+      >
+        <svg
+          class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+        >
+          <path
+            fill-rule="evenodd"
+            d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z"
+            clip-rule="evenodd"
+          />
+        </svg>
+        <span>{$_("settings")}</span>
+      </a>
+      <a
+        class:bg-gray-100={$router.path === "/about/"}
+        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+        href="/about/"
+      >
+        <svg
+          class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          viewBox="0 0 24 24"
+          ><circle cx="12" cy="12" r="10" />
+          <path d="M12 16v-4M12 8h.01" /></svg
+        >
+        <span>{$_("about")}</span>
+      </a>
+      <button
+        tabindex="0"
+        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+        on:click={() => {
+          AuthService.authControllerLogout();
+          logout();
+        }}
+      >
+        <svg
+          class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+          fill="currentColor"
+          width="24"
+          height="24"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          ><path fill="none" d="M0 0h24v24H0z" />
+          <path
+            d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2a9.985 9.985 0 0 1 8 4h-2.71a8 8 0 1 0 .001 12h2.71A9.985 9.985 0 0 1 12 22zm7-6v-3h-8v-2h8V8l5 4-5 4z"
+          /></svg
+        >
+        <span>{$_("logout")}</span>
+      </button>
+    </nav>
+  </div>
+  <div class="ml-0 transition md:ml-60">
+    <header
+      class="flex items-center justify-between w-full px-4 bg-white border-b h-14 md:hidden"
+    >
+      <button
+        on:click={() => {
+          navOpen = true;
+        }}
+        class="block btn btn-light md:hidden"
+      >
+        <span class="sr-only">Menu</span><svg
+          class="w-4 h-4"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
+          fill="currentcolor"
+          ><path
+            fill-rule="evenodd"
+            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>
+  </div>
+  {#if navOpen === true}
+    <button
+      on:click={() => {
+        navOpen = false;
+      }}
+      class:hidden={!navOpen}
+      class="fixed inset-0 z-10 w-screen h-screen bg-black bg-opacity-25 md:hidden"
+    />
+  {/if}
+</section>
+
 <style>
   .collapsed_navigation {
     transform: translateX(-100%);
@@ -22,340 +429,3 @@
     }
   }
 </style>
-
-<section class="min-h-screen bg-gray-50">
-  <div
-    class:collapsed_navigation={!navOpen}
-    class="select-none fixed top-0 left-0 z-20 h-full pb-10 overflow-x-hidden overflow-y-auto transition origin-left transform border-r w-60 bg-gray-50">
-    <a href="/" class="flex items-center px-4 py-5">
-      <img src="/lfk-logo.png" alt="Logo" class="h-10" />
-      <h3 class="text-lg">Lauf für Kaya! Admin</h3>
-    </a>
-    <nav class="text-sm font-medium text-gray-600" aria-label="Main Navigation">
-      <a
-        class:bg-gray-100={$router.path === '/'}
-        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
-        href="/">
-        <svg
-          class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 20 20"
-          fill="currentColor">
-          <path
-            d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
-        </svg>
-        <span>{$_('dashboard-title')}</span>
-      </a>
-      {#if store.state.jwtinfo.userdetails.permissions.includes('ORGANIZATION:GET')}
-        <a
-          class:bg-gray-100={$router.path.includes('/orgs/')}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
-          href="/orgs/">
-          <svg
-            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
-            fill="currentColor"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            width="24"
-            height="24"><path fill="none" d="M0 0h24v24H0z" />
-            <path
-              d="M17 19h2v-8h-6v8h2v-6h2v6zM3 19V4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v5h2v10h1v2H2v-2h1zm4-8v2h2v-2H7zm0 4v2h2v-2H7zm0-8v2h2V7H7z" /></svg>
-          <span>{$_('orgs')}</span>
-        </a>
-      {/if}
-      {#if store.state.jwtinfo.userdetails.permissions.includes('USER:GET')}
-        <a
-          class:bg-gray-100={$router.path === '/users/'}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
-          href="/users/">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
-            fill="currentColor"
-            viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z" />
-            <path
-              d="M12 14v8H4a8 8 0 018-8zm0-1a6 6 0 110-12 6 6 0 010 12zm2.6 5.81a3.51 3.51 0 010-1.62l-1-.57 1-1.74 1 .58a3.5 3.5 0 011.4-.82V13.5h2v1.15a3.5 3.5 0 011.4.8l1-.57 1 1.74-1 .57a3.51 3.51 0 010 1.62l1 .57-1 1.74-1-.58a3.5 3.5 0 01-1.4.82v1.14h-2v-1.15a3.5 3.5 0 01-1.4-.8l-1 .57-1-1.74 1-.57zM18 17a1 1 0 100 2 1 1 0 000-2z" /></svg>
-          <span>{$_('users')}</span>
-        </a>
-      {/if}
-      {#if store.state.jwtinfo.userdetails.permissions.includes('USERGROUP:GET')}
-        <a
-          class:bg-gray-100={$router.path === '/groups/'}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
-          href="/groups/">
-          <svg
-            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
-            fill="currentColor"
-            width="24"
-            height="24"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 640 512"><path
-              fill="currentColor"
-              d="M610.5 341.3c2.6-14.1 2.6-28.5 0-42.6l25.8-14.9c3-1.7 4.3-5.2 3.3-8.5-6.7-21.6-18.2-41.2-33.2-57.4-2.3-2.5-6-3.1-9-1.4l-25.8 14.9c-10.9-9.3-23.4-16.5-36.9-21.3v-29.8c0-3.4-2.4-6.4-5.7-7.1-22.3-5-45-4.8-66.2 0-3.3.7-5.7 3.7-5.7 7.1v29.8c-13.5 4.8-26 12-36.9 21.3l-25.8-14.9c-2.9-1.7-6.7-1.1-9 1.4-15 16.2-26.5 35.8-33.2 57.4-1 3.3.4 6.8 3.3 8.5l25.8 14.9c-2.6 14.1-2.6 28.5 0 42.6l-25.8 14.9c-3 1.7-4.3 5.2-3.3 8.5 6.7 21.6 18.2 41.1 33.2 57.4 2.3 2.5 6 3.1 9 1.4l25.8-14.9c10.9 9.3 23.4 16.5 36.9 21.3v29.8c0 3.4 2.4 6.4 5.7 7.1 22.3 5 45 4.8 66.2 0 3.3-.7 5.7-3.7 5.7-7.1v-29.8c13.5-4.8 26-12 36.9-21.3l25.8 14.9c2.9 1.7 6.7 1.1 9-1.4 15-16.2 26.5-35.8 33.2-57.4 1-3.3-.4-6.8-3.3-8.5l-25.8-14.9zM496 368.5c-26.8 0-48.5-21.8-48.5-48.5s21.8-48.5 48.5-48.5 48.5 21.8 48.5 48.5-21.7 48.5-48.5 48.5zM96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm224 32c1.9 0 3.7-.5 5.6-.6 8.3-21.7 20.5-42.1 36.3-59.2 7.4-8 17.9-12.6 28.9-12.6 6.9 0 13.7 1.8 19.6 5.3l7.9 4.6c.8-.5 1.6-.9 2.4-1.4 7-14.6 11.2-30.8 11.2-48 0-61.9-50.1-112-112-112S208 82.1 208 144c0 61.9 50.1 112 112 112zm105.2 194.5c-2.3-1.2-4.6-2.6-6.8-3.9-8.2 4.8-15.3 9.8-27.5 9.8-10.9 0-21.4-4.6-28.9-12.6-18.3-19.8-32.3-43.9-40.2-69.6-10.7-34.5 24.9-49.7 25.8-50.3-.1-2.6-.1-5.2 0-7.8l-7.9-4.6c-3.8-2.2-7-5-9.8-8.1-3.3.2-6.5.6-9.8.6-24.6 0-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h255.4c-3.7-6-6.2-12.8-6.2-20.3v-9.2zM173.1 274.6C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z" /></svg>
-          <span>{$_('user-groups')}</span>
-        </a>
-      {/if}
-      {#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:GET')}
-        <a
-          class:bg-gray-100={$router.path === '/runners/'}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
-          href="/runners/">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
-            fill="currentColor"
-            width="24"
-            height="24"><path fill="none" d="M0 0h24v24H0z" />
-            <path
-              d="M9.83 8.79L8 9.456V13H6V8.05h.015l5.268-1.918c.244-.093.51-.14.782-.131a2.616 2.616 0 0 1 2.427 1.82c.186.583.356.977.51 1.182A4.992 4.992 0 0 0 19 11v2a6.986 6.986 0 0 1-5.402-2.547l-.581 3.297L15 15.67V23h-2v-5.986l-2.05-1.987-.947 4.298-6.894-1.215.348-1.97 4.924.868L9.83 8.79zM13.5 5.5a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" /></svg>
-          <span>{$_('runners')}</span>
-        </a>
-      {/if}
-      {#if store.state.jwtinfo.userdetails.permissions.includes('TEAM:GET')}
-        <a
-          class:bg-gray-100={$router.path === '/teams/'}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
-          href="/teams/">
-          <svg
-            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
-            fill="currentColor"
-            width="24"
-            height="24"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 640 512"><path
-              fill="currentColor"
-              d="M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z" /></svg>
-          <span>{$_('teams')}</span>
-        </a>
-      {/if}
-      {#if store.state.jwtinfo.userdetails.permissions.includes('DONOR:GET')}
-        <a
-          class:bg-gray-100={$router.path.includes('/donors/')}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
-          href="/donors/">
-          <svg
-            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
-            fill="currentColor"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            width="24"
-            height="24"><path fill="none" d="M0 0h24v24H0z" />
-            <path
-              d="M9.33 11.5h2.17A4.5 4.5 0 0 1 16 16H8.999L9 17h8v-1a5.578 5.578 0 0 0-.886-3H19a5 5 0 0 1 4.516 2.851C21.151 18.972 17.322 21 13 21c-2.761 0-5.1-.59-7-1.625L6 10.071A6.967 6.967 0 0 1 9.33 11.5zM5 19a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v9zM18 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6zm-7-3a3 3 0 1 1 0 6 3 3 0 0 1 0-6z" /></svg>
-          <span>{$_('donors')}</span>
-        </a>
-      {/if}
-      {#if store.state.jwtinfo.userdetails.permissions.includes('DONATION:GET')}
-        <a
-          class:bg-gray-100={$router.path.includes('/donations/')}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
-          href="/donations/">
-          <svg
-            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
-            fill="currentColor"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            width="24"
-            height="24"><path fill="none" d="M0 0h24v24H0z" />
-            <path
-              d="M14 2a8 8 0 013.3 15.3A8 8 0 116.7 6.7 8 8 0 0114 2zm-3 7H9v1a2.5 2.5 0 00-.16 5h2.25a.5.5 0 010 1H7v2h2v1h2v-1a2.5 2.5 0 00.16-5H8.91a.5.5 0 010-1H13v-2h-2V9zm3-5a5.99 5.99 0 00-4.48 2.01 8 8 0 018.47 8.47A6 6 0 0014 4z" /></svg>
-          <span>{$_('donations')}</span>
-        </a>
-      {/if}
-      {#if store.state.jwtinfo.userdetails.permissions.includes('TRACK:GET')}
-        <a
-          class:bg-gray-100={$router.path === '/tracks/'}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
-          href="/tracks/">
-          <svg
-            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
-            fill="currentColor"
-            width="24"
-            height="24"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 640 512"><path
-              fill="currentColor"
-              d="M635.7 167.2L556.1 31.7c-8.8-15-28.3-20.1-43.5-11.5l-69 39.1L503.3 161c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L416 75l-55.2 31.3 27.9 47.4c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L333.2 122 278 153.3 337.8 255c2.2 3.7.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9l-59.7-101.7-55.2 31.3 27.9 47.4c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9l-27.9-47.5-55.2 31.3 59.7 101.7c2.2 3.7.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L84.9 262.9l-69 39.1C.7 310.7-4.6 329.8 4.2 344.8l79.6 135.6c8.8 15 28.3 20.1 43.5 11.5L624.1 210c15.2-8.6 20.4-27.8 11.6-42.8z" /></svg>
-          <span>{$_('tracks')}</span>
-        </a>
-      {/if}
-      {#if store.state.jwtinfo.userdetails.permissions.includes('CARD:GET')}
-        <a
-          class:bg-gray-100={$router.path === '/cards/'}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
-          href="/cards/">
-          <svg
-            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
-            fill="currentColor"
-            width="24"
-            height="24"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24">
-            <path fill="none" d="M0 0h24v24H0z" />
-            <path
-              fill="currentColor"
-              d="M22 10v10a1 1 0 01-1 1H3a1 1 0 01-1-1V10h20zm0-2H2V4a1 1 0 011-1h18a1 1 0 011 1v4zm-7 8v2h4v-2h-4z" /></svg>
-          <span>{$_('cards')}</span>
-        </a>
-      {/if}
-      {#if store.state.jwtinfo.userdetails.permissions.includes('SCAN:GET')}
-        <a
-          class:bg-gray-100={$router.path === '/scans/'}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
-          href="/scans/">
-          <svg
-            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
-            fill="currentColor"
-            width="24"
-            height="24"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z" />
-            <path
-              fill="currentColor"
-              d="M2 4h2v16H2V4zm4 0h1v16H6V4zm2 0h2v16H8V4zm3 0h2v16h-2V4zm3 0h2v16h-2V4zm3 0h1v16h-1V4zm2 0h3v16h-3V4z" /></svg>
-          <span>Scans</span>
-        </a>
-      {/if}
-      {#if store.state.jwtinfo.userdetails.permissions.includes('CONTACT:GET')}
-        <a
-          class:bg-gray-100={$router.path === '/contacts/'}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
-          href="/contacts/">
-          <svg
-            fill="currentColor"
-            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            width="24"
-            height="24"><path fill="none" d="M0 0h24v24H0z" />
-            <path
-              d="M2 22a8 8 0 1 1 16 0H2zm8-9c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6zm10 4h4v2h-4v-2zm-3-5h7v2h-7v-2zm2-5h5v2h-5V7z" /></svg>
-          <span>{$_('contacts')}</span>
-        </a>
-      {/if}
-      {#if store.state.jwtinfo.userdetails.permissions.includes('STATION:GET')}
-        <a
-          class:bg-gray-100={$router.path === '/scanstations/'}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
-          href="/scanstations/">
-          <svg
-            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
-            fill="currentColor"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"><path
-              fill="none"
-              d="M0 0h24v24H0z" />
-            <path
-              fill="currentColor"
-              d="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z" /></svg>
-          <span>{$_('scanstations')}</span>
-        </a>
-      {/if}
-      {#if store.state.jwtinfo.userdetails.permissions.includes('STATSCLIENT:GET')}
-        <a
-          class:bg-gray-100={$router.path === '/statsclients/'}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
-          href="/statsclients/">
-          <svg
-            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
-            fill="currentColor"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"><path
-              fill="none"
-              d="M0 0h24v24H0z" />
-            <path
-              fill="currentColor"
-              d="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z" /></svg>
-          <span>{$_('statsclients')}</span>
-        </a>
-      {/if}
-      <a
-        class:bg-gray-100={$router.path === '/settings/'}
-        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
-        href="/settings/">
-        <svg
-          class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 20 20"
-          fill="currentColor">
-          <path
-            fill-rule="evenodd"
-            d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z"
-            clip-rule="evenodd" />
-        </svg>
-        <span>{$_('settings')}</span>
-      </a>
-      <a
-        class:bg-gray-100={$router.path === '/about/'}
-        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
-        href="/about/">
-        <svg
-          class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" />
-          <path d="M12 16v-4M12 8h.01" /></svg>
-        <span>{$_('about')}</span>
-      </a>
-      <span
-        tabindex="0"
-        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
-        on:click={() => {
-          AuthService.authControllerLogout();
-          logout();
-        }}>
-        <svg
-          class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
-          fill="currentColor"
-          width="24"
-          height="24"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z" />
-          <path
-            d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2a9.985 9.985 0 0 1 8 4h-2.71a8 8 0 1 0 .001 12h2.71A9.985 9.985 0 0 1 12 22zm7-6v-3h-8v-2h8V8l5 4-5 4z" /></svg>
-        <span>{$_('logout')}</span>
-      </span>
-    </nav>
-  </div>
-  <div class="ml-0 transition md:ml-60">
-    <header
-      class="flex items-center justify-between w-full px-4 bg-white border-b h-14 md:hidden">
-      <button
-        on:click={() => {
-          navOpen = true;
-        }}
-        class="block btn btn-light md:hidden">
-        <span class="sr-only">Menu</span><svg
-          class="w-4 h-4"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 20 20"
-          fill="currentcolor"><path
-            fill-rule="evenodd"
-            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>
-    <slot>
-      <NoComponentLoaded />
-    </slot>
-  </div>
-  {#if navOpen === true}
-    <div
-      on:click={() => {
-        navOpen = false;
-        console.log({ navOpen });
-      }}
-      class:hidden={!navOpen}
-      class="fixed inset-0 z-10 w-screen h-screen bg-black bg-opacity-25 md:hidden" />
-  {/if}
-</section>

src/components/dashboard/MainDashContent.svelte

@@ -1,31 +1,20 @@
 <script>
   import { _ } from "svelte-i18n";
   import { StatsService } from "@odit/lfk-client-js";
-  import StatCards from "./StatCard.svelte";
   import store from "../../store";
   import StatCard from "./StatCard.svelte";
   let navOpen = false;
   const stats_promise = StatsService.statsControllerGet();
 </script>
 
-<div
+<div class="p-2 md:p-5 overflow-x-hidden">
-  class="p-5 overflow-x-hidden"
+  <h1 class="text-3xl leading-tight mb-4">
-  on:click={() => {
-    navOpen = false;
-  }}
->
-  <h1 class="text-3xl leading-tight">
-    <span class="font-extrabold">{$_("dashboard-title")}</span>
-    <span>
-      -
     {$_("dashboard-greeting")},
     <span class="text-blue-500"
       >{store.state.jwtinfo.userdetails.firstname}
       {store.state.jwtinfo.userdetails.lastname}</span
-      ></span
     >
   </h1>
-  <h1>{$_("general-stats")}</h1>
   {#await stats_promise}
     <div
       class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
@@ -36,7 +25,7 @@
     </div>
   {:then stats}
     <div
-      class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 2xl:grid-cols-6 gap-4"
+      class="grid gap-2 grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 2xl:grid-cols-6 sm:gap-4"
     >
       <StatCard
         title={$_("runners")}
@@ -109,24 +98,35 @@
       </StatCard>
       <StatCard
         title={$_("average-donation")}
-        value={`${(stats.average_donation / 100).toFixed(2)} €`}
+        value={`${parseFloat(stats.average_donation / 100).toLocaleString(
+          undefined,
+          {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          }
+        )}`}
         href="/donations/"
       >
         <svg
-          fill="currentColor"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          width="24"
           height="24"
-          ><path fill="none" d="M0 0h24v24H0z" />
+          fill="currentColor"
+          width="24"
+          ><path d="M0 0h24v24H0z" fill="none" />
           <path
-            d="M14 2a8 8 0 013.3 15.3A8 8 0 116.7 6.7 8 8 0 0114 2zm-3 7H9v1a2.5 2.5 0 00-.16 5h2.25a.5.5 0 010 1H7v2h2v1h2v-1a2.5 2.5 0 00.16-5H8.91a.5.5 0 010-1H13v-2h-2V9zm3-5a5.99 5.99 0 00-4.48 2.01 8 8 0 018.47 8.47A6 6 0 0014 4z"
+            d="M15 18.5A6.48 6.48 0 019.24 15H15v-2H8.58c-.05-.33-.08-.66-.08-1s.03-.67.08-1H15V9H9.24A6.491 6.491 0 0115 5.5c1.61 0 3.09.59 4.23 1.57L21 5.3A8.955 8.955 0 0015 3c-3.92 0-7.24 2.51-8.48 6H3v2h3.06a8.262 8.262 0 000 2H3v2h3.52c1.24 3.49 4.56 6 8.48 6 2.31 0 4.41-.87 6-2.3l-1.78-1.77c-1.13.98-2.6 1.57-4.22 1.57z"
           /></svg
         >
       </StatCard>
       <StatCard
         title={$_("total-donations")}
-        value={`${(stats.total_donation / 100).toFixed(2)} €`}
+        value={`${parseFloat(stats.total_donation / 100).toLocaleString(
+          undefined,
+          {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          }
+        )}`}
         href="/donations/"
       >
         <svg
@@ -143,7 +143,7 @@
       <StatCard
         title={$_("total-distance")}
         value={`${stats.total_distance / 1000}km`}
-        href="#"
+        href="/scans/"
       >
         <svg
           fill="currentColor"
@@ -158,8 +158,14 @@
       </StatCard>
       <StatCard
         title={$_("average-distance")}
-        value={`${(stats.average_distance / 1000).toFixed(2)} km`}
+        value={`${parseFloat(stats.average_distance / 1000).toLocaleString(
-        href="#"
+          undefined,
+          {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          }
+        )}km`}
+        href="/scans/"
       >
         <svg
           fill="currentColor"

src/components/dashboard/StatCard.svelte

@@ -1,22 +1,21 @@
 <script>
   import { _ } from "svelte-i18n";
 
-  export let href = "#"
+  export let href = "#";
   export let title = "";
   export let value = "";
 </script>
 
-<a href={href}>
+<a {href}>
-  <div
+  <div class="p-4 rounded-lg bg-white border border-grey-100">
-    class="p-4 rounded-lg bg-white border border-grey-100">
     <div class="flex flex-row items-center justify-between">
       <div class="flex flex-col">
-        <div class="text-xs uppercase font-light text-grey-500">
+        <div class="text-xs uppercase font-normal text-grey-500">
           {title}
         </div>
-        <div class="text-xl font-bold">{value}</div>
+        <div class="text-xl font-bold font-mono">{value}</div>
       </div>
-      <slot></slot>
+      <slot />
     </div>
   </div>
 </a>

src/components/donations/AddDonationModal.svelte

@@ -8,9 +8,8 @@
     RunnerService,
   } from "@odit/lfk-client-js";
   import Select from "svelte-select";
-  import Toastify from "toastify-js";
-  import { is_promise } from "svelte/internal";
   import { createEventDispatcher } from "svelte";
+  import toast from "svelte-french-toast";
   export let modal_open;
   const dispatch = createEventDispatcher();
   const getDonorLabel = (option) =>
@@ -18,9 +17,6 @@
   const filterDonors = (label, filterText, option) =>
     label.toLowerCase().includes(filterText.toLowerCase()) ||
     option.value.id.toString().startsWith(filterText.toLowerCase());
-  function focus(el) {
-    el.focus();
-  }
   $: donor = 0;
   $: runner = 0;
   $: donors = [];
@@ -59,10 +55,7 @@
     if (processed_last_submit === true) {
       let amount_cent = Math.floor(amount_input * 100);
       processed_last_submit = false;
-      const toast = Toastify({
+      toast.loading($_("adding-donation"));
-        text: $_("adding-donation"),
-        duration: -1,
-      }).showToast();
       if (is_fixed) {
         let postdata = {
           donor,
@@ -79,11 +72,8 @@
             amount_input = 0;
             modal_open = false;
             //
-            Toastify({
+            toast.dismiss();
-              text: $_("donation_added"),
+            toast.success($_("donation_added"));
-              duration: 500,
-              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-            }).showToast();
             dispatch("created", { donations: [result] });
           })
           .catch((err) => {
@@ -91,8 +81,6 @@
           })
           .finally(() => {
             processed_last_submit = true;
-            //
-            toast.hideToast();
           });
       } else {
         let postdata = {
@@ -107,11 +95,7 @@
             amount_input = 0;
             modal_open = false;
             //
-            Toastify({
+            toast.success($_("donation_added"));
-              text: $_("donation_added"),
-              duration: 500,
-              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-            }).showToast();
             dispatch("created", { donations: [result] });
           })
           .catch((err) => {
@@ -119,8 +103,6 @@
           })
           .finally(() => {
             processed_last_submit = true;
-            //
-            toast.hideToast();
           });
       }
     }

src/components/donations/AddDonationPaymentModal.svelte

@@ -1,18 +1,14 @@
 <script>
   import { _ } from "svelte-i18n";
   import { clickOutside } from "../base/outsideclick";
-
   import { DonationService } from "@odit/lfk-client-js";
-  import Toastify from "toastify-js";
   import { createEventDispatcher } from "svelte";
+  import toast from "svelte-french-toast";
   export let payment_modal_open = false;
   export let original_data = {};
   export let paid_amount_input = 0;
   const dispatch = createEventDispatcher();
   $: processed_last_submit = true;
-  function focus(el) {
-    el.focus();
-  }
   $: createbtnenabled =
     is_paid_amount_valid &&
     !(paid_amount_input * 100 == original_data.paidAmount);
@@ -34,10 +30,7 @@
   function submit() {
     if (processed_last_submit === true) {
       processed_last_submit = false;
-      const toast = Toastify({
+      toast.loading($_("updating-donation"));
-        text: $_("updating-donation"),
-        duration: -1,
-      }).showToast();
       const editable = Object.assign({}, original_data);
       editable.donor = editable.donor.id;
       editable.paidAmount = paid_amount_input * 100;
@@ -50,11 +43,9 @@
           .then((result) => {
             payment_modal_open = false;
             //
-            Toastify({
+            toast.dismiss();
-              text: $_("donation-updated"),
+
-              duration: 500,
+            toast.success($_("donation-updated"));
-              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-            }).showToast();
             dispatch("created", { donation: response });
           })
           .catch((err) => {
@@ -62,19 +53,14 @@
           })
           .finally(() => {
             processed_last_submit = true;
-            //
-            toast.hideToast();
           });
       } else {
         DonationService.donationControllerPutFixed(original_data.id, editable)
           .then((result) => {
             payment_modal_open = false;
             //
-            Toastify({
+            toast.dismiss();
-              text: $_("donation-updated"),
+            toast.success($_("donation-updated"));
-              duration: 500,
-              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-            }).showToast();
             dispatch("created", { donation: response });
           })
           .catch((err) => {
@@ -82,8 +68,6 @@
           })
           .finally(() => {
             processed_last_submit = true;
-            //
-            toast.hideToast();
           });
       }
     }

src/components/donations/DonationDetail.svelte

@@ -6,7 +6,7 @@
     DonorService,
     RunnerService,
   } from "@odit/lfk-client-js";
-  import Toastify from "toastify-js";
+
   import PromiseError from "../base/PromiseError.svelte";
   import Select from "svelte-select";
   let data_loaded = false;
@@ -69,10 +69,7 @@
 
   function submit() {
     if (data_loaded === true && save_enabled) {
-      Toastify({
+      toast($_("updating-donation"));
-        text: $_('updating-donation'),
-        duration: 2500,
-      }).showToast();
       let postdata = {};
       editable.paidAmount = paid_amount_input * 100;
       if (original_data.responseType === "DISTANCEDONATION") {
@@ -87,11 +84,7 @@
           .then((resp) => {
             Object.assign(original_data, editable);
             original_data = original_data;
-            Toastify({
+            toast.success($_("donation-updated"));
-              text: $_('donation-updated'),
-              duration: 2500,
-              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-            }).showToast();
           })
           .catch((err) => {});
       } else {
@@ -102,11 +95,7 @@
           .then((resp) => {
             Object.assign(original_data, editable);
             original_data = original_data;
-            Toastify({
+            toast.success($_("donation-updated"));
-              text: $_('donation-updated'),
-              duration: 2500,
-              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-            }).showToast();
           })
           .catch((err) => {});
       }
@@ -116,11 +105,7 @@
   function deleteDonation() {
     DonationService.donationControllerRemove(original_data.id, false)
       .then((resp) => {
-        Toastify({
+        toast($_("donation-deleted"));
-          text: $_('donation-deleted'),
-          duration: 500,
-          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-        }).showToast();
         location.replace("./");
       })
       .catch((err) => {
@@ -131,7 +116,7 @@
 </script>
 
 {#await promise}
-  {$_('loading-donation-details')}
+  {$_("loading-donation-details")}
 {:then}
   <section class="container p-5 select-none">
     <div class="flex flex-row mb-4">
@@ -144,12 +129,15 @@
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
                 width="24"
-                height="24"><path fill="none" d="M0 0h24v24H0z" />
+                height="24"
+                ><path fill="none" d="M0 0h24v24H0z" />
                 <path
-                  d="M14 2a8 8 0 013.3 15.3A8 8 0 116.7 6.7 8 8 0 0114 2zm-3 7H9v1a2.5 2.5 0 00-.16 5h2.25a.5.5 0 010 1H7v2h2v1h2v-1a2.5 2.5 0 00.16-5H8.91a.5.5 0 010-1H13v-2h-2V9zm3-5a5.99 5.99 0 00-4.48 2.01 8 8 0 018.47 8.47A6 6 0 0014 4z" /></svg>
+                  d="M14 2a8 8 0 013.3 15.3A8 8 0 116.7 6.7 8 8 0 0114 2zm-3 7H9v1a2.5 2.5 0 00-.16 5h2.25a.5.5 0 010 1H7v2h2v1h2v-1a2.5 2.5 0 00.16-5H8.91a.5.5 0 010-1H13v-2h-2V9zm3-5a5.99 5.99 0 00-4.48 2.01 8 8 0 018.47 8.47A6 6 0 0014 4z"
+                /></svg
+              >
             </li>
             <li class="flex items-center ml-2">
-              <a class="mr-2" href="./">{$_('donations')}</a><svg
+              <a class="mr-2" href="./">{$_("donations")}</a><svg
                 stroke="currentColor"
                 fill="none"
                 stroke-width="2"
@@ -159,12 +147,10 @@
                 class="h-3 w-3 mr-2 stroke-current"
                 height="1em"
                 width="1em"
-                xmlns="http://www.w3.org/2000/svg"><line
+                xmlns="http://www.w3.org/2000/svg"
-                  x1="5"
+                ><line x1="5" y1="12" x2="19" y2="12" />
-                  y1="12"
+                <polyline points="12 5 19 12 12 19" /></svg
-                  x2="19"
+              >
-                  y2="12" />
-                <polyline points="12 5 19 12 12 19" /></svg>
             </li>
             <li class="flex items-center">
               <span class="mr-2">{original_data.id}</span>
@@ -175,28 +161,32 @@
     </div>
     <div class="mb-8 text-3xl font-extrabold leading-tight">
       {original_data.donor.firstname}
-      {original_data.donor.middlename || ''}
+      {original_data.donor.middlename || ""}
       {original_data.donor.lastname}
       &gt;
-      {#if original_data.responseType == 'DISTANCEDONATION'}
+      {#if original_data.responseType == "DISTANCEDONATION"}
         {original_data.runner.firstname}
-        {original_data.runner.middlename || ''}
+        {original_data.runner.middlename || ""}
         {original_data.runner.lastname}
       {:else}
-        {$_('fixed-donation')}:
+        {$_("fixed-donation")}:
-        {amount_input.toFixed(2).toLocaleString('de-DE', { valute: 'EUR' })}€
+        {amount_input.toFixed(2).toLocaleString("de-DE", { valute: "EUR" })}€
       {/if}
       <span data-id="donation_actions_${original_data.id}">
-        {#if store.state.jwtinfo.userdetails.permissions.includes('DONATION:DELETE')}
+        {#if store.state.jwtinfo.userdetails.permissions.includes("DONATION:DELETE")}
           {#if delete_triggered}
             <button
               on:click={deleteDonation}
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:">{$_('confirm-deletion')}</button>
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:"
+              >{$_("confirm-deletion")}</button
+            >
             <button
               on:click={() => {
                 delete_triggered = !delete_triggered;
               }}
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:">{$_('cancel')}</button>
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:"
+              >{$_("cancel")}</button
+            >
           {/if}
           {#if !delete_triggered}
             <button
@@ -204,7 +194,9 @@
                 delete_triggered = true;
               }}
               type="button"
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:">{$_('delete-donation')}</button>
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:"
+              >{$_("delete-donation")}</button
+            >
           {/if}
         {/if}
         {#if !delete_triggered}
@@ -213,72 +205,91 @@
             class:opacity-50={!save_enabled}
             type="button"
             on:click={submit}
-            class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:">{$_('save-changes')}</button>
+            class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:"
+            >{$_("save-changes")}</button
+          >
         {/if}
       </span>
     </div>
     <!--  -->
     <div>
+      <span class="font-medium text-gray-700"
+        >{$_("total-donation-amount")}:</span
+      >
       <span
-        class="font-medium text-gray-700">{$_('total-donation-amount')}:</span>
+        >{(editable.amount / 100)
-      <span>{(editable.amount / 100)
           .toFixed(2)
-          .toLocaleString('de-DE', { valute: 'EUR' })}€</span>
+          .toLocaleString("de-DE", { valute: "EUR" })}€</span
+      >
       |
+      <span class="font-medium text-gray-700">{$_("paid-amount")}:</span>
       <span
-        class="font-medium text-gray-700">{$_('paid-amount')}:</span>
+        >{(editable.paidAmount / 100)
-      <span>{(editable.paidAmount / 100)
           .toFixed(2)
-          .toLocaleString('de-DE', { valute: 'EUR' })}€</span>
+          .toLocaleString("de-DE", { valute: "EUR" })}€</span
+      >
       |
-      <span
+      <span class="font-medium text-gray-700">{$_("status")}:</span>
-        class="font-medium text-gray-700">{$_('status')}:</span>
       {#if editable.status == "PAID"}
         <span
-            class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">{$_('paid')}</span>
+          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
+          >{$_("paid")}</span
+        >
       {:else}
         <span
-            class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">{$_('open')}</span>
+          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800"
+          >{$_("open")}</span
+        >
       {/if}
     </div>
-    <br>
+    <br />
     <div class=" w-full">
-      <label
+      <label for="donor" class="block font-medium text-gray-700"
-        for="donor"
+        >{$_("donor")}</label
-        class="block  font-medium text-gray-700">{$_('donor')}</label>
+      >
       <Select
         containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-        itemFilter={(label, filterText, option) => filterDonors(label, filterText, option)}
+        itemFilter={(label, filterText, option) =>
+          filterDonors(label, filterText, option)}
         items={current_donors}
         showChevron={true}
-        placeholder={$_('search-for-donor-name-or-id')}
+        placeholder={$_("search-for-donor-name-or-id")}
-        noOptionsMessage={$_('no-donors-found')}
+        noOptionsMessage={$_("no-donors-found")}
         bind:selectedValue={donor}
-        on:select={(selectedValue) => {editable.donor = selectedValue.detail.value; editable.donor.donationAmount=original_data.donor.donationAmount; editable.donor.paidDonationAmount =original_data.donor.paidDonationAmount}}
+        on:select={(selectedValue) => {
-        on:clear={() => (editable.donor = null)} />
+          editable.donor = selectedValue.detail.value;
+          editable.donor.donationAmount = original_data.donor.donationAmount;
+          editable.donor.paidDonationAmount =
+            original_data.donor.paidDonationAmount;
+        }}
+        on:clear={() => (editable.donor = null)}
+      />
     </div>
-    {#if original_data.responseType == 'DISTANCEDONATION'}
+    {#if original_data.responseType == "DISTANCEDONATION"}
       <div class=" w-full">
-        <label
+        <label for="donor" class="block font-medium text-gray-700"
-          for="donor"
+          >{$_("runner")}</label
-          class="block  font-medium text-gray-700">{$_('runner')}</label>
+        >
         <Select
           containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-          itemFilter={(label, filterText, option) => filterDonors(label, filterText, option)}
+          itemFilter={(label, filterText, option) =>
+            filterDonors(label, filterText, option)}
           items={current_runners}
           showChevron={true}
-          placeholder={$_('search-for-runner-by-name-or-id')}
+          placeholder={$_("search-for-runner-by-name-or-id")}
-          noOptionsMessage={$_('no-runners-found')}
+          noOptionsMessage={$_("no-runners-found")}
           bind:selectedValue={runner}
-          on:select={(selectedValue) => (editable.runner = selectedValue.detail.value)}
+          on:select={(selectedValue) =>
-          on:clear={() => (editable.runner = null)} />
+            (editable.runner = selectedValue.detail.value)}
+          on:clear={() => (editable.runner = null)}
+        />
       </div>
     {/if}
     <div class=" w-full">
       <label for="lastname" class="font-medium text-gray-700">
-        {#if original_data.responseType == 'DISTANCEDONATION'}
+        {#if original_data.responseType == "DISTANCEDONATION"}
-          {$_('amount-per-kilometer')}
+          {$_("amount-per-kilometer")}
-        {:else}{$_('donation-amount')}{/if}
+        {:else}{$_("donation-amount")}{/if}
       </label>
       <div class="mt-1 flex rounded-md shadow-sm">
         <input
@@ -291,22 +302,28 @@
           step="0.01"
           name="donation_amount_eur"
           class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 p-2"
-          placeholder="2.00" />
+          placeholder="2.00"
+        />
         <span
-          class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 ">€</span>
+          class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500"
+          >€</span
+        >
       </div>
       {#if !is_amount_valid}
         <span
-          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-          {$_('donation-amount-must-be-greater-that-0-00eur')}
+        >
+          {$_("donation-amount-must-be-greater-that-0-00eur")}
         </span>
       {/if}
     </div>
     <div class="w-full">
-      <label
+      <label for="token" class="block text-sm font-medium text-gray-700"
-        for="token"
+        >{$_("paid-amount")}</label
-        class="block text-sm font-medium text-gray-700">{$_('paid-amount')}</label>
+      >
-      <div class="inline-flex border-gray-300 border rounded-l-md rounded-r-md bg-gray-50 text-gray-500 w-full">
+      <div
+        class="inline-flex border-gray-300 border rounded-l-md rounded-r-md bg-gray-50 text-gray-500 w-full"
+      >
         <input
           autocomplete="off"
           class:border-red-500={!is_amount_valid}
@@ -317,21 +334,27 @@
           step="0.01"
           name="donation_amount_eur"
           class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm p-2"
-            placeholder="2.00" />
+          placeholder="2.00"
+        />
         <button
-            on:click={
+          on:click={() => {
-              ()=>{
+            paid_amount_input = paid_amount_input = (
-                paid_amount_input=paid_amount_input = (original_data.amount/100).toFixed(2);
+              original_data.amount / 100
-              }
+            ).toFixed(2);
-            }
+          }}
-            class="inline-flex items-center p-r-2 text-indigo-300 hover:text-indigo-700 text-sm">MAX</button>
+          class="inline-flex items-center p-r-2 text-indigo-300 hover:text-indigo-700 text-sm"
+          >MAX</button
+        >
         <span
-            class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm">€</span>
+          class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm"
+          >€</span
+        >
       </div>
       {#if !is_paid_amount_valid}
         <span
-            class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-            {$_('payment-amount-must-be-greater-than-0-00eur')}
+        >
+          {$_("payment-amount-must-be-greater-than-0-00eur")}
         </span>
       {/if}
     </div>

src/components/donations/Donations.svelte

@@ -29,7 +29,6 @@
 {#if store.state.jwtinfo.userdetails.permissions.includes("DONATION:CREATE")}
   <AddDonationModal
     on:created={(event) => {
-      console.log(event)
       addDonations(event.detail.donations);
     }}
     bind:modal_open

src/components/donations/DonationsEmptyState.svelte

@@ -6,7 +6,7 @@
 <div class="text-center items-center justify-center">
   <p class="mb-16 text-lg text-gray-500">
     <img class="m-auto" style="height:15rem" src={donations_empty} alt="" />
-    <span class="font-bold">{$_('there-are-no-donations-yet')}</span><br />
+    <span class="font-bold">{$_("there-are-no-donations-yet")}</span><br />
-    <span>{$_('add-your-fist-donation')}</span>
+    <span>{$_("add-your-fist-donation")}</span>
   </p>
 </div>

src/components/donations/DonationsOverview.svelte

@@ -23,12 +23,14 @@
   import DonationStatus from "./DonationStatus.svelte";
   import DonationTableAction from "./DonationTableAction.svelte";
   import DeleteDonationModal from "./DeleteDonationModal.svelte";
-  import { donationDonorFilter, donationRunnerFilter } from "../shared/tablefilters";
+  import {
+    donationDonorFilter,
+    donationRunnerFilter,
+  } from "../shared/tablefilters";
+  import toast from "svelte-french-toast";
   $: searchvalue = "";
   $: active_deletes = [];
   $: active_edits = [];
-  $: selectedDonations =
-    $table?.getSelectedRowModel().rows.map((row) => row.original) || [];
   $: selected =
     $table?.getSelectedRowModel().rows.map((row) => row.index) || [];
   $: dataLoaded = false;
@@ -161,19 +163,16 @@
       ...options,
       data: current_donations,
     }));
-    Toastify({
+    toast($_("donation-deleted"));
-      text: $_("donation-deleted"),
-      duration: 3500,
-      backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-    }).showToast();
   }
 
   onMount(async () => {
     let page = 0;
+    let pagesize = 100;
     while (page >= 0) {
       const donations = await DonationService.donationControllerGetAll(
         page,
-        500
+        pagesize
       );
       if (donations.length == 0) {
         page = -2;
@@ -187,8 +186,8 @@
 
       dataLoaded = true;
       page++;
+      pagesize += 100;
     }
-    console.log("All donations loaded");
   });
 </script>
 
@@ -236,7 +235,7 @@
       class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll"
     >
       <table class="w-full">
-        <thead>
+        <thead class="border-b border-gray-400">
           {#each $table.getHeaderGroups() as headerGroup}
             <tr class="select-none">
               <th class="inset-y-0 left-0 px-4 py-2 text-left w-px">
@@ -255,7 +254,7 @@
         </thead>
         <tbody>
           {#each $table.getRowModel().rows as row}
-            <tr>
+            <tr class="odd:bg-white even:bg-gray-100">
               <td class="inset-y-0 left-0 px-4 py-2 text-center w-px">
                 <InputElement
                   type="checkbox"
@@ -282,3 +281,9 @@
     <TableBottom {table} {selected} />
   {/if}
 {/if}
+
+<style>
+  table tbody tr td:nth-child(2) {
+    font-family: monospace;
+  }
+</style>

src/components/donors/AddDonorModal.svelte

@@ -5,8 +5,9 @@
   import { DonorService } from "@odit/lfk-client-js";
   import isEmail from "validator/es/lib/isEmail";
   import isMobilePhone from "validator/es/lib/isMobilePhone";
-  import Toastify from "toastify-js";
+
   import { createEventDispatcher } from "svelte";
+  import toast from "svelte-french-toast";
   export let modal_open;
   let firstname_input;
   let lastname_input;
@@ -73,10 +74,7 @@
   function submit() {
     if (processed_last_submit === true) {
       processed_last_submit = false;
-      const toast = Toastify({
+      toast.loading($_("donor-is-being-added"));
-        text: $_("donor-is-being-added"),
-        duration: -1,
-      }).showToast();
       let address = {};
       if (address_checked === true) {
         address = {
@@ -110,11 +108,8 @@
           email_input_value = "";
           modal_open = false;
           //
-          Toastify({
+          toast.dismiss();
-            text: $_("donor-added"),
+          toast.success($_("donor-added"));
-            duration: 500,
-            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-          }).showToast();
           dispatch("created", { donors: [result] });
         })
         .catch((err) => {
@@ -122,8 +117,6 @@
         })
         .finally(() => {
           processed_last_submit = true;
-          //
-          toast.hideToast();
         });
     }
   }

src/components/donors/ConfirmDonorDeletion.svelte

@@ -3,7 +3,7 @@
   import { clickOutside } from "../base/outsideclick";
 
   import { DonorService } from "@odit/lfk-client-js";
-  import Toastify from "toastify-js";
+
   import { createEventDispatcher } from "svelte";
   export let modal_open;
   export let delete_donor;

src/components/donors/DonorDetail.svelte

@@ -2,7 +2,7 @@
   import { _ } from "svelte-i18n";
   import store from "../../store";
   import { DonorService, DonationService } from "@odit/lfk-client-js";
-  import Toastify from "toastify-js";
+
   import PromiseError from "../base/PromiseError.svelte";
   import isEmail from "validator/es/lib/isEmail";
   import ConfirmDonorDeletion from "./ConfirmDonorDeletion.svelte";
@@ -62,10 +62,7 @@
   let delete_donor = {};
   function submit() {
     if (data_loaded === true && save_enabled) {
-      Toastify({
+      toast($_("donor-is-being-updated"));
-        text: $_("donor-is-being-updated"),
-        duration: 2500,
-      }).showToast();
       editable.address.country = "DE";
       if (editable.address_checked === false) {
         editable.address = null;
@@ -78,11 +75,7 @@
         .then((resp) => {
           Object.assign(original_data, editable);
           original_data = original_data;
-          Toastify({
+          toast.success($_("updated-donor"));
-            text: $_("updated-donor"),
-            duration: 2500,
-            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-          }).showToast();
         })
         .catch((err) => {});
     } else {
@@ -91,11 +84,7 @@
   function deleteDonor() {
     DonorService.donorControllerRemove(original_data.id, false)
       .then((resp) => {
-        Toastify({
+        toast($_("donor-deleted"));
-          text: $_("donor-deleted"),
-          duration: 500,
-          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-        }).showToast();
         location.replace("./");
       })
       .catch((err) => {
@@ -107,7 +96,7 @@
 
 <ConfirmDonorDeletion bind:modal_open bind:delete_donor />
 {#await promise && donation_promise}
-  {$_('loading-donor-details')}
+  {$_("loading-donor-details")}
 {:then}
   <section class="container p-5 select-none">
     <div class="flex flex-row mb-4">
@@ -120,12 +109,15 @@
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
                 width="24"
-                height="24"><path fill="none" d="M0 0h24v24H0z" />
+                height="24"
+                ><path fill="none" d="M0 0h24v24H0z" />
                 <path
-                  d="M9.33 11.5h2.17A4.5 4.5 0 0 1 16 16H8.999L9 17h8v-1a5.578 5.578 0 0 0-.886-3H19a5 5 0 0 1 4.516 2.851C21.151 18.972 17.322 21 13 21c-2.761 0-5.1-.59-7-1.625L6 10.071A6.967 6.967 0 0 1 9.33 11.5zM5 19a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v9zM18 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6zm-7-3a3 3 0 1 1 0 6 3 3 0 0 1 0-6z" /></svg>
+                  d="M9.33 11.5h2.17A4.5 4.5 0 0 1 16 16H8.999L9 17h8v-1a5.578 5.578 0 0 0-.886-3H19a5 5 0 0 1 4.516 2.851C21.151 18.972 17.322 21 13 21c-2.761 0-5.1-.59-7-1.625L6 10.071A6.967 6.967 0 0 1 9.33 11.5zM5 19a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v9zM18 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6zm-7-3a3 3 0 1 1 0 6 3 3 0 0 1 0-6z"
+                /></svg
+              >
             </li>
             <li class="flex items-center ml-2">
-              <a class="mr-2" href="./">{$_('donors')}</a><svg
+              <a class="mr-2" href="./">{$_("donors")}</a><svg
                 stroke="currentColor"
                 fill="none"
                 stroke-width="2"
@@ -135,17 +127,17 @@
                 class="h-3 w-3 mr-2 stroke-current"
                 height="1em"
                 width="1em"
-                xmlns="http://www.w3.org/2000/svg"><line
+                xmlns="http://www.w3.org/2000/svg"
-                  x1="5"
+                ><line x1="5" y1="12" x2="19" y2="12" />
-                  y1="12"
+                <polyline points="12 5 19 12 12 19" /></svg
-                  x2="19"
+              >
-                  y2="12" />
-                <polyline points="12 5 19 12 12 19" /></svg>
             </li>
             <li class="flex items-center">
-              <span class="mr-2">{original_data.firstname}
+              <span class="mr-2"
-                {original_data.middlename || ''}
+                >{original_data.firstname}
-                {original_data.lastname}</span>
+                {original_data.middlename || ""}
+                {original_data.lastname}</span
+              >
             </li>
           </ol>
         </nav>
@@ -153,19 +145,23 @@
     </div>
     <div class="mb-8 text-3xl font-extrabold leading-tight">
       {original_data.firstname}
-      {original_data.middlename || ''}
+      {original_data.middlename || ""}
       {original_data.lastname}
       <span data-id="donor_actions_${editable.id}">
-        {#if store.state.jwtinfo.userdetails.permissions.includes('DONOR:DELETE')}
+        {#if store.state.jwtinfo.userdetails.permissions.includes("DONOR:DELETE")}
           {#if delete_triggered}
             <button
               on:click={deleteDonor}
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:">{$_('confirm-deletion')}</button>
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:"
+              >{$_("confirm-deletion")}</button
+            >
             <button
               on:click={() => {
                 delete_triggered = !delete_triggered;
               }}
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:">{$_('cancel')}</button>
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:"
+              >{$_("cancel")}</button
+            >
           {/if}
           {#if !delete_triggered}
             <button
@@ -173,7 +169,9 @@
                 delete_triggered = true;
               }}
               type="button"
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:">{$_('delete-donor')}</button>
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:"
+              >{$_("delete-donor")}</button
+            >
           {/if}
         {/if}
         {#if !delete_triggered}
@@ -182,135 +180,154 @@
             class:opacity-50={!save_enabled}
             type="button"
             on:click={submit}
-            class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:">{$_('save-changes')}</button>
+            class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:"
+            >{$_("save-changes")}</button
+          >
         {/if}
       </span>
     </div>
     <!--  -->
     <div>
+      <span class="font-medium text-gray-700"
+        >{$_("total-donation-amount")}:</span
+      >
       <span
-        class="font-medium text-gray-700">{$_('total-donation-amount')}:</span>
+        >{(editable.donationAmount / 100)
-      <span>{(editable.donationAmount / 100)
           .toFixed(2)
-          .toLocaleString('de-DE', { valute: 'EUR' })}€</span>
+          .toLocaleString("de-DE", { valute: "EUR" })}€</span
+      >
       |
+      <span class="font-medium text-gray-700">{$_("total-paid-amount")}:</span>
       <span
-        class="font-medium text-gray-700">{$_('total-paid-amount')}:</span>
+        >{(editable.paidDonationAmount / 100)
-      <span>{(editable.paidDonationAmount / 100)
           .toFixed(2)
-          .toLocaleString('de-DE', { valute: 'EUR' })}€</span>
+          .toLocaleString("de-DE", { valute: "EUR" })}€</span
+      >
       <br />
-      <span class="font-medium text-gray-700">{$_('donations')}:</span>
+      <span class="font-medium text-gray-700">{$_("donations")}:</span>
       {#if current_donations.filter((d) => d.donor.id == editable.id).length > 0}
         {#each current_donations.filter((o) => o.donor.id == editable.id) as d}
-          {#if d.responseType === 'DISTANCEDONATION'}
+          {#if d.responseType === "DISTANCEDONATION"}
             <a
               href="../donations/{d.id}"
-              class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-600 text-white mr-1">{d.runner.firstname}
+              class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-600 text-white mr-1"
+              >{d.runner.firstname}
               {d.runner.middlename || ""}
-              {d.runner.lastname}</a>
+              {d.runner.lastname}</a
+            >
           {:else}
             <a
               href="../donations/{d.id}"
-              class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-700 text-white mr-1">{$_('fixed-donation')}:
+              class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-700 text-white mr-1"
+              >{$_("fixed-donation")}:
               {(d.amount / 100)
                 .toFixed(2)
-                .toLocaleString('de-DE', { valute: 'EUR' })}€</a>
+                .toLocaleString("de-DE", { valute: "EUR" })}€</a
+            >
           {/if}
         {/each}
-      {:else}{$_('donor-has-no-associated-donations')}{/if}
+      {:else}{$_("donor-has-no-associated-donations")}{/if}
     </div>
     <div class=" w-full">
-      <label
+      <label for="firstname" class="font-medium text-gray-700"
-        for="firstname"
+        >{$_("first-name")}</label
-        class="font-medium text-gray-700">{$_('first-name')}</label>
+      >
       <input
         autocomplete="off"
-        placeholder={$_('first-name')}
+        placeholder={$_("first-name")}
         type="text"
         class:border-red-500={!isFirstnameValid}
         class:focus:border-red-500={!isFirstnameValid}
         class:focus:ring-red-500={!isFirstnameValid}
         bind:value={editable.firstname}
         name="firstname"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+      />
       {#if !isFirstnameValid}
         <span
-          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-          {$_('first-name-is-required')}
+        >
+          {$_("first-name-is-required")}
         </span>
       {/if}
     </div>
     <div class=" w-full">
-      <label
+      <label for="middlename" class="font-medium text-gray-700"
-        for="middlename"
+        >{$_("middle-name")}</label
-        class="font-medium text-gray-700">{$_('middle-name')}</label>
+      >
       <input
         autocomplete="off"
-        placeholder={$_('middle-name')}
+        placeholder={$_("middle-name")}
         type="text"
         bind:value={editable.middlename}
         name="middlename"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+      />
     </div>
     <div class=" w-full">
-      <label
+      <label for="lastname" class="font-medium text-gray-700"
-        for="lastname"
+        >{$_("last-name")}</label
-        class="font-medium text-gray-700">{$_('last-name')}</label>
+      >
       <input
         autocomplete="off"
-        placeholder={$_('last-name')}
+        placeholder={$_("last-name")}
         type="text"
         bind:value={editable.lastname}
         class:border-red-500={!isLastnameValid}
         class:focus:border-red-500={!isLastnameValid}
         class:focus:ring-red-500={!isLastnameValid}
         name="lastname"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+      />
       {#if !isLastnameValid}
         <span
-          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-          {$_('last-name-is-required')}
+        >
+          {$_("last-name-is-required")}
         </span>
       {/if}
     </div>
     <div class=" w-full">
-      <label
+      <label for="email" class="font-medium text-gray-700"
-        for="email"
+        >{$_("e-mail-adress")}</label
-        class="font-medium text-gray-700">{$_('e-mail-adress')}</label>
+      >
       <input
         autocomplete="off"
-        placeholder={$_('e-mail-adress')}
+        placeholder={$_("e-mail-adress")}
         type="email"
         bind:value={editable.email}
         class:border-red-500={!isEmailValid}
         class:focus:border-red-500={!isEmailValid}
         class:focus:ring-red-500={!isEmailValid}
         name="email"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+      />
       {#if !isEmailValid}
         <span
-          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-          {$_('valid-email-is-required')}
+        >
+          {$_("valid-email-is-required")}
         </span>
       {/if}
     </div>
     <div class=" w-full">
-      <label for="phone" class="font-medium text-gray-700">{$_('phone')}</label>
+      <label for="phone" class="font-medium text-gray-700">{$_("phone")}</label>
       <input
         autocomplete="off"
-        placeholder={$_('phone')}
+        placeholder={$_("phone")}
         type="tel"
         class:border-red-500={!isPhoneValidOrEmpty}
         class:focus:border-red-500={!isPhoneValidOrEmpty}
         class:focus:ring-red-500={!isPhoneValidOrEmpty}
         bind:value={editable.phone}
         name="phone"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+      />
       {#if !isPhoneValidOrEmpty}
         <span
-          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-          {$_('valid-international-phone-number-is-required')}
+        >
+          {$_("valid-international-phone-number-is-required")}
         </span>
       {/if}
     </div>
@@ -321,19 +338,20 @@
           id="comments"
           name="comments"
           type="checkbox"
-          class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
+          class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+        />
       </div>
       <div class="ml-3">
-        <label
+        <label for="comments" class="font-medium text-gray-700"
-          for="comments"
+          >{$_("receipt-needed")}</label
-          class="font-medium text-gray-700">{$_('receipt-needed')}</label>
+        >
       </div>
     </div>
     {#if editable.address_checked === true}
       <div class="col-span-6">
-        <label
+        <label for="address1" class="block font-medium text-gray-700"
-          for="address1"
+          >{$_("address")}</label
-          class="block  font-medium text-gray-700">{$_('address')}</label>
+        >
         <input
           autocomplete="off"
           placeholder="Address"
@@ -343,65 +361,72 @@
           bind:value={editable.address.address1}
           type="text"
           name="address1"
-          class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+          class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+        />
         {#if !isAddress1Valid}
           <span
-            class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+            class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-            {$_('address-is-required')}
+          >
+            {$_("address-is-required")}
           </span>
         {/if}
       </div>
       <div class="col-span-6">
-        <label
+        <label for="address2" class="block font-medium text-gray-700"
-          for="address2"
+          >{$_("apartment-suite-etc")}</label
-          class="block  font-medium text-gray-700">{$_('apartment-suite-etc')}</label>
+        >
         <input
           autocomplete="off"
-          placeholder={$_('apartment-suite-etc')}
+          placeholder={$_("apartment-suite-etc")}
           bind:value={editable.address.address2}
           type="text"
           name="address2"
-          class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+          class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+        />
       </div>
       <div class="col-span-6">
-        <label
+        <label for="zipcode" class="block font-medium text-gray-700"
-          for="zipcode"
+          >{$_("zip-postal-code")}</label
-          class="block  font-medium text-gray-700">{$_('zip-postal-code')}</label>
+        >
         <input
           autocomplete="off"
-          placeholder={$_('zip-postal-code')}
+          placeholder={$_("zip-postal-code")}
           class:border-red-500={!iszipcodevalid}
           class:focus:border-red-500={!iszipcodevalid}
           class:focus:ring-red-500={!iszipcodevalid}
           bind:value={editable.address.postalcode}
           type="text"
           name="zipcode"
-          class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+          class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+        />
         {#if !iszipcodevalid}
           <span
-            class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+            class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-            {$_('valid-zipcode-postal-code-is-required')}
+          >
+            {$_("valid-zipcode-postal-code-is-required")}
           </span>
         {/if}
       </div>
       <div class="col-span-6">
-        <label
+        <label for="city" class="block font-medium text-gray-700"
-          for="city"
+          >{$_("city")}</label
-          class="block  font-medium text-gray-700">{$_('city')}</label>
+        >
         <input
           autocomplete="off"
-          placeholder={$_('city')}
+          placeholder={$_("city")}
           class:border-red-500={!iscityvalid}
           class:focus:border-red-500={!iscityvalid}
           class:focus:ring-red-500={!iscityvalid}
           bind:value={editable.address.city}
           type="text"
           name="city"
-          class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+          class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+        />
         {#if !iscityvalid}
           <span
-            class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+            class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-            {$_('valid-city-is-required')}
+          >
+            {$_("valid-city-is-required")}
           </span>
         {/if}
       </div>

src/components/donors/DonorDonations.svelte

@@ -4,7 +4,7 @@
 </script>
 
 {#if !donations || donations.length == 0}
-  {$_('donor-has-no-associated-donations')}
+  {$_("donor-has-no-associated-donations")}
 {:else}
   {#each donations as donation}
     {#if donation.responseType === "DISTANCEDONATION"}

src/components/donors/DonorsEmptyState.svelte

@@ -6,7 +6,7 @@
 <div class="text-center items-center justify-center">
   <p class="mb-16 text-lg text-gray-500">
     <img class="w-full" style="height:15rem" src={donors_empty} alt="" />
-    <span class="font-bold">{$_('there-are-no-donors-yet')}</span><br />
+    <span class="font-bold">{$_("there-are-no-donors-yet")}</span><br />
-    <span>{$_('add-your-first-donor')}</span>
+    <span>{$_("add-your-first-donor")}</span>
   </p>
 </div>

src/components/donors/DonorsOverview.svelte

@@ -1,10 +1,9 @@
 <script>
   import { _ } from "svelte-i18n";
-  import { DonationService, DonorService } from "@odit/lfk-client-js";
+  import { DonorService } from "@odit/lfk-client-js";
   import store from "../../store";
   import DonorsEmptyState from "./DonorsEmptyState.svelte";
   import ConfirmDonorDeletion from "./ConfirmDonorDeletion.svelte";
-  import Toastify from "toastify-js";
   import TableBottom from "../shared/TableBottom.svelte";
   import {
     createSvelteTable,
@@ -23,6 +22,7 @@
   import DonorAddress from "./DonorAddress.svelte";
   import DonorDonations from "./DonorDonations.svelte";
   import { filterAddress, filterName } from "../shared/tablefilters";
+  import toast from "svelte-french-toast";
   $: searchvalue = "";
   $: active_deletes = [];
   $: selectedDonors =
@@ -147,8 +147,9 @@
 
   onMount(async () => {
     let page = 0;
+    let pagesize = 100;
     while (page >= 0) {
-      const donors = await DonorService.donorControllerGetAll(page, 500);
+      const donors = await DonorService.donorControllerGetAll(page, pagesize);
       if (donors.length == 0) {
         page = -2;
       }
@@ -161,9 +162,8 @@
 
       dataLoaded = true;
       page++;
+      pagesize += 100;
     }
-
-    console.log("All donors loaded");
   });
 </script>
 
@@ -172,12 +172,10 @@
     active_deletes = active_deletes.filter((a) => a.id !== event.detail.id);
   }}
   on:delete={async (event) => {
+    toast.loading($_("deleting-donor"));
     await DonorService.donorControllerRemove(event.detail.id, true);
-    Toastify({
+    toast.dismiss();
-      text: $_("donor-deleted"),
+    toast($_("donor-deleted"));
-      duration: 500,
-      backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-    }).showToast();
     current_donors = current_donors.filter((d) => d.id !== event.detail.id);
     active_deletes = active_deletes.filter((a) => a.id !== event.detail.id);
     options.update((options) => ({
@@ -211,7 +209,7 @@
       class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll"
     >
       <table class="w-full">
-        <thead>
+        <thead class="border-b border-gray-400">
           {#each $table.getHeaderGroups() as headerGroup}
             <tr class="select-none">
               <th class="inset-y-0 left-0 px-4 py-2 text-left w-px">
@@ -230,7 +228,7 @@
         </thead>
         <tbody>
           {#each $table.getRowModel().rows as row}
-            <tr>
+            <tr class="odd:bg-white even:bg-gray-100">
               <td class="inset-y-0 left-0 px-4 py-2 text-center w-px">
                 <InputElement
                   type="checkbox"
@@ -257,3 +255,9 @@
     <TableBottom {table} {selected} />
   {/if}
 {/if}
+
+<style>
+  table tbody tr td:nth-child(2) {
+    font-family: monospace;
+  }
+</style>

src/components/general/About.svelte

@@ -25,43 +25,51 @@
 {#if modal_open}
   <div
     class="fixed z-10 inset-0 overflow-y-auto"
-    
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;
-    }}>
+    }}
+  >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+    >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
           class="absolute inset-0 bg-gray-500 opacity-75"
-          data-id="modal_backdrop" />
+          data-id="modal_backdrop"
+        />
       </div>
       <span
         class="hidden sm:inline-block sm:align-middle sm:h-screen"
-        aria-hidden="true">&#8203;</span>
+        aria-hidden="true">&#8203;</span
+      >
       <div
         class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
         role="dialog"
         aria-modal="true"
-        aria-labelledby="modal-headline">
+        aria-labelledby="modal-headline"
+      >
         <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
           <div class="sm:flex sm:items-start">
             <div
-              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
+              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
+            >
               <svg
                 fill="currentColor"
                 class="h-6 w-6 text-blue-600"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
                 width="24"
-                height="24"><path fill="none" d="M0 0h24v24H0z" />
+                height="24"
+                ><path fill="none" d="M0 0h24v24H0z" />
                 <path
-                  d="M14 20v2H2v-2h12zM14.586.686l7.778 7.778L20.95 9.88l-1.06-.354L17.413 12l5.657 5.657-1.414 1.414L16 13.414l-2.404 2.404.283 1.132-1.415 1.414-7.778-7.778 1.415-1.414 1.13.282 6.294-6.293-.353-1.06L14.586.686z" /></svg>
+                  d="M14 20v2H2v-2h12zM14.586.686l7.778 7.778L20.95 9.88l-1.06-.354L17.413 12l5.657 5.657-1.414 1.414L16 13.414l-2.404 2.404.283 1.132-1.415 1.414-7.778-7.778 1.415-1.414 1.13.282 6.294-6.293-.353-1.06L14.586.686z"
+                /></svg
+              >
             </div>
             <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
               <h3 class="text-lg leading-6 font-medium">
-                {$_('read-license')}
+                {$_("read-license")}
               </h3>
               <div class="mt-2 mb-6">
                 <p class="text-sm text-gray-500">{currentlicense}</p>
@@ -78,8 +86,9 @@
               modal_open = false;
             }}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
-            {$_('close')}
+          >
+            {$_("close")}
           </button>
         </div>
       </div>
@@ -90,19 +99,21 @@
 <div class="pt-12 px-4 sm:px-6 lg:px-8 lg:pt-20 bg-gray-900 pb-12">
   <div class="text-center mb-8">
     <h1
-      class="mt-9 font-display text-4xl leading-none font-semibold text-white sm:text-5xl lg:text-6xl">
+      class="mt-9 font-display text-4xl leading-none font-semibold text-white sm:text-5xl lg:text-6xl"
-      {$_('about')}
+    >
+      {$_("about")}
       🧾
     </h1>
     <p
-      class="mt-2 max-w-xl mx-auto text-xl lg:max-w-3xl lg:text-2xl text-gray-300">
+      class="mt-2 max-w-xl mx-auto text-xl lg:max-w-3xl lg:text-2xl text-gray-300"
+    >
       Lauf für Kaya!
       <strong class="text-white font-medium">
-        {$_('by')}
+        {$_("by")}
         <a href="https://odit.services" class="underline">ODIT.Services</a>
       </strong>
       <br />
-      <span class="text-lg">{$_('lfk-is-os')}</span>
+      <span class="text-lg">{$_("lfk-is-os")}</span>
     </p>
   </div>
 </div>
@@ -110,82 +121,88 @@
 <div class="pt-0 pb-16 overflow-hidden lg:pt-12 lg:py-24">
   <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
     <h2 class="text-4xl font-display font-semibold md:text-5xl">
-      {$_('credits')}
+      {$_("credits")}
     </h2>
     <div class="max-w-3xl mx-auto text-xl leading-8 font-medium mt-8">
-      <p class="text-center">{$_('oss_credit_description')}</p>
+      <p class="text-center">{$_("oss_credit_description")}</p>
     </div>
     <div class="w-screen leading-8 pl-5 mt-5">
       {#await license_promise}
-        <p class="text-center w-full">{$_('licenses-are-being-loaded')}</p>
+        <p class="text-center w-full">{$_("licenses-are-being-loaded")}</p>
       {:then}
         <table>
-          <thead>
+          <thead class="border-b border-gray-400">
-            <tr>
+            <tr class="odd:bg-white even:bg-gray-100">
-              <th>{$_('dependency_name')}</th>
+              <th>{$_("dependency_name")}</th>
-              <th>{$_('license')}</th>
+              <th>{$_("license")}</th>
-              <th>{$_('repo_link')}</th>
+              <th>{$_("repo_link")}</th>
-              <th>{$_('installed-version')}</th>
+              <th>{$_("installed-version")}</th>
-              <th>{$_('author')}</th>
+              <th>{$_("author")}</th>
             </tr>
           </thead>
           <tbody>
             {#each licenses as l}
-              <tr>
+              <tr class="odd:bg-white even:bg-gray-100">
                 <td>{l.name}</td>
                 <td>
-                  {l.license || '?'}<br /><span
+                  {l.license || "?"}<br /><button
                     class="underline cursor-pointer"
                     on:click={() => {
                       modal_open = true;
-                      currentlicense = l.name + '@' + l.version;
+                      currentlicense = l.name + "@" + l.version;
-                      licensetext = l.licensetext || $_('no-license-text-could-be-found');
+                      licensetext =
-                    }}>{$_('read-license')}</span>
+                        l.licensetext || $_("no-license-text-could-be-found");
+                    }}>{$_("read-license")}</button
+                  >
                 </td>
                 <td>
                   {(l.repo?.url || l.repo)
-                    .replace('git+', '')
+                    .replace("git+", "")
-                    .replace('git://', '')}
+                    .replace("git://", "")}
                 </td>
-                <td>{l.version || '?'}</td>
+                <td>{l.version || "?"}</td>
-                <td>{l.author?.name || l.author || '?'}</td>
+                <td>{l.author?.name || l.author || "?"}</td>
               </tr>
             {/each}
           </tbody>
         </table>
       {:catch error}
         <div
-          class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
+          class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500"
+        >
           <span class="inline-block align-middle mr-8">
-            <b class="capitalize">{$_('general_promise_error')}</b>
+            <b class="capitalize">{$_("general_promise_error")}</b>
             {error}
           </span>
         </div>
       {/await}
     </div>
     <div class="w-full leading-8 mt-8">
-      <p class="text-xl font-medium">{$_('icon-image-credits')}</p>
+      <p class="text-xl font-medium">{$_("icon-image-credits")}</p>
       <ul class="list-disc">
         <li>
           <a
             class="underline"
             target="_blank"
             rel="noopener noreferrer"
-            href="https://storyset.com">https://storyset.com</a>
+            href="https://storyset.com">https://storyset.com</a
+          >
         </li>
         <li>
           <a
             class="underline"
             target="_blank"
             rel="noopener noreferrer"
-            href="https://undraw.co">https://undraw.co</a>
+            href="https://undraw.co">https://undraw.co</a
+          >
         </li>
         <li>
           <a
             class="underline"
             target="_blank"
             rel="noopener noreferrer"
-            href="https://remixicon.com">https://remixicon.com</a>
+            href="https://remixicon.com">https://remixicon.com</a
+          >
         </li>
       </ul>
     </div>

src/components/general/Footer.svelte

@@ -20,27 +20,32 @@
       class="underline"
       href="https://odit.services"
       rel="noopener,noreferrer"
-      target="_blank">ODIT.Services</a>
+      target="_blank">ODIT.Services</a
+    >
   </p>
   <p class="text-sm text-gray-500 mt-4">
     <a
       class="underline"
       target="_blank"
       rel="noopener, noreferrer"
-      href="https://git.odit.services/lfk/frontend/">LfK!Frontend</a>@<a
+      href="https://git.odit.services/lfk/frontend/">LfK!Frontend</a
+    >@<a
       class="underline"
       target="_blank"
       rel="noopener, noreferrer"
-      href="https://git.odit.services/lfk/frontend/src/tag/{releaseinfo}">{releaseinfo}</a>
+      href="https://git.odit.services/lfk/frontend/src/tag/{releaseinfo}"
+      >{releaseinfo}</a
+    >
     -
     <a
       rel="noopener, noreferrer"
       class="underline"
       href="https://docs.lauf-fuer-kaya.de"
-      target="_blank">{$_('documentation')}</a>
+      target="_blank">{$_("documentation")}</a
+    >
     -
-    <a class="underline" href="/privacy">{$_('privacy')}</a>
+    <a class="underline" href="/privacy">{$_("privacy")}</a>
     -
-    <a class="underline" href="/imprint">{$_('imprint')}</a>
+    <a class="underline" href="/imprint">{$_("imprint")}</a>
   </p>
 </footer>

src/components/general/Imprint.svelte

@@ -1,20 +1,20 @@
 <script>
   import { _, getLocaleFromNavigator } from "svelte-i18n";
-  import marked from "marked";
+  import { parse } from "marked";
   import Footer from "./Footer.svelte";
-  import * as css from "../base/simple.css";
+  // import * as css from "../base/simple.css";
   let html = "";
   async function load() {
     let md = await fetch("/imprint_" + getLocaleFromNavigator() + ".md");
     let text = (await md.text()).toString();
     if (text.includes("<meta")) {
-      md.ok=false
+      md.ok = false;
     }
     if (!md.ok) {
       md = await fetch("/imprint_en.md");
       text = await md.text();
     }
-    html = marked(text);
+    html = parse(text);
   }
   const promise = load();
 </script>
@@ -22,8 +22,9 @@
 <div class="pt-12 px-4 sm:px-6 lg:px-8 lg:pt-20 bg-gray-900 pb-12">
   <div class="text-center mb-8">
     <h1
-      class="mt-9 font-display text-4xl leading-none font-semibold text-white sm:text-5xl lg:text-6xl">
+      class="mt-9 font-display text-4xl leading-none font-semibold text-white sm:text-5xl lg:text-6xl"
-      {$_('imprint')}
+    >
+      {$_("imprint")}
     </h1>
   </div>
 </div>
@@ -31,16 +32,17 @@
 <div class="pt-0 pb-16 overflow-hidden lg:pt-12 lg:py-24">
   <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
     {#await promise}
-      <p class="text-center w-full">{$_('imprint-loading')}</p>
+      <p class="text-center w-full">{$_("imprint-loading")}</p>
     {:then}
       <div class="simplecontent">
         {@html html}
       </div>
     {:catch error}
       <div
-        class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
+        class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500"
+      >
         <span class="inline-block align-middle mr-8">
-          <b class="capitalize">{$_('general_promise_error')}</b>
+          <b class="capitalize">{$_("general_promise_error")}</b>
           {error}
         </span>
       </div>

src/components/general/NotFound.svelte

@@ -7,16 +7,19 @@
     <div class="w-full bg-white flex items-center justify-center">
       <div class="max-w-sm m-8">
         <div class="text-black text-5xl md:text-15xl font-black">
-          {$_('404title')}
+          {$_("404title")}
         </div>
         <div class="w-16 h-1 bg-purple-light my-3 md:my-6" />
         <p
-          class="text-grey-darker text-2xl md:text-3xl font-light mb-8 leading-normal">
+          class="text-grey-darker text-2xl md:text-3xl font-light mb-8 leading-normal"
-          {$_('404message')}
+        >
+          {$_("404message")}
         </p>
         <a
           href="/"
-          class="bg-transparent text-grey-darkest font-bold uppercase tracking-wide py-3 px-6 border-2 border-grey-light hover:border-grey rounded-lg">{$_('goback')}</a>
+          class="bg-transparent text-grey-darkest font-bold uppercase tracking-wide py-3 px-6 border-2 border-grey-light hover:border-grey rounded-lg"
+          >{$_("goback")}</a
+        >
       </div>
     </div>
   </div>

src/components/general/Privacy.svelte

@@ -1,6 +1,6 @@
 <script>
   import { _, getLocaleFromNavigator } from "svelte-i18n";
-  import marked from "marked";
+  import { parse } from "marked";
   import Footer from "./Footer.svelte";
   // import * as css from "../base/simple.css?inline";
   let html = "";
@@ -8,13 +8,13 @@
     let md = await fetch("/privacy_" + getLocaleFromNavigator() + ".md");
     let text = (await md.text()).toString();
     if (text.includes("<meta")) {
-      md.ok=false
+      md.ok = false;
     }
     if (!md.ok) {
       md = await fetch("/privacy_en.md");
       text = await md.text();
     }
-    html = marked(text);
+    html = parse(text);
   }
   const promise = load();
 </script>
@@ -22,8 +22,9 @@
 <div class="pt-12 px-4 sm:px-6 lg:px-8 lg:pt-20 bg-gray-900 pb-12">
   <div class="text-center mb-8">
     <h1
-      class="mt-9 font-display text-4xl leading-none font-semibold text-white sm:text-5xl lg:text-6xl">
+      class="mt-9 font-display text-4xl leading-none font-semibold text-white sm:text-5xl lg:text-6xl"
-      {$_('privacy')}
+    >
+      {$_("privacy")}
     </h1>
   </div>
 </div>
@@ -31,16 +32,17 @@
 <div class="pt-0 pb-16 overflow-hidden lg:pt-12 lg:py-24">
   <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
     {#await promise}
-      <p class="text-center w-full">{$_('privacy-loading')}</p>
+      <p class="text-center w-full">{$_("privacy-loading")}</p>
     {:then}
       <div class="simplecontent">
         {@html html}
       </div>
     {:catch error}
       <div
-        class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
+        class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500"
+      >
         <span class="inline-block align-middle mr-8">
-          <b class="capitalize">{$_('general_promise_error')}</b>
+          <b class="capitalize">{$_("general_promise_error")}</b>
           {error}
         </span>
       </div>

src/components/general/Sidebar.svelte

@@ -4,26 +4,33 @@
 
 <div class="md:flex flex-col md:flex-row h-screen w-full">
   <div
-    class="flex flex-col w-full md:w-64 text-gray-700 bg-white dark-mode:text-gray-200 dark-mode:bg-gray-800 flex-shrink-0">
+    class="flex flex-col w-full md:w-64 text-gray-700 bg-white dark-mode:text-gray-200 dark-mode:bg-gray-800 flex-shrink-0"
+  >
     <div
-      class="flex-shrink-0 px-8 py-4 flex flex-row items-center justify-between">
+      class="flex-shrink-0 px-8 py-4 flex flex-row items-center justify-between"
+    >
       <a
         href="/#/test"
-        class="text-lg font-semibold tracking-widest text-gray-900 uppercase rounded-lg dark-mode:text-white focus:outline-none focus:shadow-outline">Sidebar</a>
+        class="text-lg font-semibold tracking-widest text-gray-900 uppercase rounded-lg dark-mode:text-white focus:outline-none focus:shadow-outline"
+        >Sidebar</a
+      >
       <button
-        class="rounded-lg md:hidden focus:outline-none focus:shadow-outline">
+        class="rounded-lg md:hidden focus:outline-none focus:shadow-outline"
+      >
         <svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
           {#if open}
             <path
               fill-rule="evenodd"
               d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-              clip-rule="evenodd" />
+              clip-rule="evenodd"
+            />
           {/if}
           {#if !open}
             <path
               fill-rule="evenodd"
               d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z"
-              clip-rule="evenodd" />
+              clip-rule="evenodd"
+            />
           {/if}
         </svg>
       </button>
@@ -31,49 +38,63 @@
     <nav
       :class:block={open}
       :class:hidden={!open}
-      class="flex-grow md:block px-4 pb-4 md:pb-0 md:overflow-y-auto">
+      class="flex-grow md:block px-4 pb-4 md:pb-0 md:overflow-y-auto"
+    >
       <a
         class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-900 bg-gray-200 rounded-lg dark-mode:bg-gray-700 dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
-        href="#">Blog</a>
+        href="#">Blog</a
+      >
       <a
         class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-900 bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
-        href="#">Portfolio</a>
+        href="#">Portfolio</a
+      >
       <a
         class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-900 bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
-        href="#">About</a>
+        href="#">About</a
+      >
       <a
         class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-900 bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
-        href="#">Contact</a>
+        href="#">Contact</a
+      >
       <div class="relative">
         <button
           on:click={() => {
             open = !open;
           }}
-          class="flex flex-row items-center w-full px-4 py-2 mt-2 text-sm font-semibold text-left bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:focus:bg-gray-600 dark-mode:hover:bg-gray-600 md:block hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline">
+          class="flex flex-row items-center w-full px-4 py-2 mt-2 text-sm font-semibold text-left bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:focus:bg-gray-600 dark-mode:hover:bg-gray-600 md:block hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
+        >
           <span>Dropdown</span>
           <svg
             fill="currentColor"
             viewBox="0 0 20 20"
-            class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1"><path
+            class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1"
+            ><path
               fill-rule="evenodd"
               d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-              clip-rule="evenodd" /></svg>
+              clip-rule="evenodd"
+            /></svg
+          >
         </button>
         <div
           class:block={open}
           class:hidden={!open}
-          class="absolute right-0 w-full mt-2 origin-top-right rounded-md shadow-lg">
+          class="absolute right-0 w-full mt-2 origin-top-right rounded-md shadow-lg"
+        >
           <div
-            class="px-2 py-2 bg-white rounded-md shadow dark-mode:bg-gray-800">
+            class="px-2 py-2 bg-white rounded-md shadow dark-mode:bg-gray-800"
+          >
             <a
               class="block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
-              href="#">Link #1</a>
+              href="#">Link #1</a
+            >
             <a
               class="block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
-              href="#">Link #2</a>
+              href="#">Link #2</a
+            >
             <a
               class="block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
-              href="#">Link #3</a>
+              href="#">Link #3</a
+            >
           </div>
         </div>
       </div>

src/components/groups/AddGroupModal.svelte

@@ -1,9 +1,8 @@
 <script>
   import { _ } from "svelte-i18n";
   import { clickOutside } from "../base/outsideclick";
-  
-  import Toastify from "toastify-js";
   import { UserGroupService } from "@odit/lfk-client-js";
+  import toast from "svelte-french-toast";
   export let modal_open;
   export let current_groups;
   let description_input_value;
@@ -32,10 +31,7 @@
   function submit() {
     if (processed_last_submit === true) {
       processed_last_submit = false;
-      const toast = Toastify({
+      toast.loading($_("group-is-being-added"));
-        text: $_('group-is-being-added'),
-        duration: -1,
-      }).showToast();
       let postdata = {
         name: name_input_value,
         description: description_input_value,
@@ -46,11 +42,8 @@
           description_input_value = "";
           modal_open = false;
           //
-          Toastify({
+          toast.dismiss();
-            text: $_('group-added'),
+          toast.success($_("group-added"));
-            duration: 500,
-            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-          }).showToast();
           current_groups.push(result);
           current_groups = current_groups;
         })
@@ -59,8 +52,6 @@
         })
         .finally(() => {
           processed_last_submit = true;
-          //
-          toast.hideToast();
         });
     }
   }
@@ -69,83 +60,100 @@
 {#if modal_open}
   <div
     class="fixed z-10 inset-0 overflow-y-auto"
-    
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;
-    }}>
+    }}
+  >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+    >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
           class="absolute inset-0 bg-gray-500 opacity-75"
-          data-id="modal_backdrop" />
+          data-id="modal_backdrop"
+        />
       </div>
       <span
         class="hidden sm:inline-block sm:align-middle sm:h-screen"
-        aria-hidden="true">&#8203;</span>
+        aria-hidden="true">&#8203;</span
+      >
       <div
         class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
         role="dialog"
         aria-modal="true"
-        aria-labelledby="modal-headline">
+        aria-labelledby="modal-headline"
+      >
         <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
           <div class="sm:flex sm:items-start">
             <div
-              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
+              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
+            >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 640 512"
                 class="h-6 w-6 text-blue-600"
                 fill="currentColor"
                 width="24"
-                height="24"><path fill="none" d="M0 0h24v24H0z" />
+                height="24"
+                ><path fill="none" d="M0 0h24v24H0z" />
                 <path
-                  d="M610.5 341.3c2.6-14.1 2.6-28.5 0-42.6l25.8-14.9c3-1.7 4.3-5.2 3.3-8.5-6.7-21.6-18.2-41.2-33.2-57.4-2.3-2.5-6-3.1-9-1.4l-25.8 14.9c-10.9-9.3-23.4-16.5-36.9-21.3v-29.8c0-3.4-2.4-6.4-5.7-7.1-22.3-5-45-4.8-66.2 0-3.3.7-5.7 3.7-5.7 7.1v29.8c-13.5 4.8-26 12-36.9 21.3l-25.8-14.9c-2.9-1.7-6.7-1.1-9 1.4-15 16.2-26.5 35.8-33.2 57.4-1 3.3.4 6.8 3.3 8.5l25.8 14.9c-2.6 14.1-2.6 28.5 0 42.6l-25.8 14.9c-3 1.7-4.3 5.2-3.3 8.5 6.7 21.6 18.2 41.1 33.2 57.4 2.3 2.5 6 3.1 9 1.4l25.8-14.9c10.9 9.3 23.4 16.5 36.9 21.3v29.8c0 3.4 2.4 6.4 5.7 7.1 22.3 5 45 4.8 66.2 0 3.3-.7 5.7-3.7 5.7-7.1v-29.8c13.5-4.8 26-12 36.9-21.3l25.8 14.9c2.9 1.7 6.7 1.1 9-1.4 15-16.2 26.5-35.8 33.2-57.4 1-3.3-.4-6.8-3.3-8.5l-25.8-14.9zM496 368.5c-26.8 0-48.5-21.8-48.5-48.5s21.8-48.5 48.5-48.5 48.5 21.8 48.5 48.5-21.7 48.5-48.5 48.5zM96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm224 32c1.9 0 3.7-.5 5.6-.6 8.3-21.7 20.5-42.1 36.3-59.2 7.4-8 17.9-12.6 28.9-12.6 6.9 0 13.7 1.8 19.6 5.3l7.9 4.6c.8-.5 1.6-.9 2.4-1.4 7-14.6 11.2-30.8 11.2-48 0-61.9-50.1-112-112-112S208 82.1 208 144c0 61.9 50.1 112 112 112zm105.2 194.5c-2.3-1.2-4.6-2.6-6.8-3.9-8.2 4.8-15.3 9.8-27.5 9.8-10.9 0-21.4-4.6-28.9-12.6-18.3-19.8-32.3-43.9-40.2-69.6-10.7-34.5 24.9-49.7 25.8-50.3-.1-2.6-.1-5.2 0-7.8l-7.9-4.6c-3.8-2.2-7-5-9.8-8.1-3.3.2-6.5.6-9.8.6-24.6 0-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h255.4c-3.7-6-6.2-12.8-6.2-20.3v-9.2zM173.1 274.6C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z" /></svg>
+                  d="M610.5 341.3c2.6-14.1 2.6-28.5 0-42.6l25.8-14.9c3-1.7 4.3-5.2 3.3-8.5-6.7-21.6-18.2-41.2-33.2-57.4-2.3-2.5-6-3.1-9-1.4l-25.8 14.9c-10.9-9.3-23.4-16.5-36.9-21.3v-29.8c0-3.4-2.4-6.4-5.7-7.1-22.3-5-45-4.8-66.2 0-3.3.7-5.7 3.7-5.7 7.1v29.8c-13.5 4.8-26 12-36.9 21.3l-25.8-14.9c-2.9-1.7-6.7-1.1-9 1.4-15 16.2-26.5 35.8-33.2 57.4-1 3.3.4 6.8 3.3 8.5l25.8 14.9c-2.6 14.1-2.6 28.5 0 42.6l-25.8 14.9c-3 1.7-4.3 5.2-3.3 8.5 6.7 21.6 18.2 41.1 33.2 57.4 2.3 2.5 6 3.1 9 1.4l25.8-14.9c10.9 9.3 23.4 16.5 36.9 21.3v29.8c0 3.4 2.4 6.4 5.7 7.1 22.3 5 45 4.8 66.2 0 3.3-.7 5.7-3.7 5.7-7.1v-29.8c13.5-4.8 26-12 36.9-21.3l25.8 14.9c2.9 1.7 6.7 1.1 9-1.4 15-16.2 26.5-35.8 33.2-57.4 1-3.3-.4-6.8-3.3-8.5l-25.8-14.9zM496 368.5c-26.8 0-48.5-21.8-48.5-48.5s21.8-48.5 48.5-48.5 48.5 21.8 48.5 48.5-21.7 48.5-48.5 48.5zM96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm224 32c1.9 0 3.7-.5 5.6-.6 8.3-21.7 20.5-42.1 36.3-59.2 7.4-8 17.9-12.6 28.9-12.6 6.9 0 13.7 1.8 19.6 5.3l7.9 4.6c.8-.5 1.6-.9 2.4-1.4 7-14.6 11.2-30.8 11.2-48 0-61.9-50.1-112-112-112S208 82.1 208 144c0 61.9 50.1 112 112 112zm105.2 194.5c-2.3-1.2-4.6-2.6-6.8-3.9-8.2 4.8-15.3 9.8-27.5 9.8-10.9 0-21.4-4.6-28.9-12.6-18.3-19.8-32.3-43.9-40.2-69.6-10.7-34.5 24.9-49.7 25.8-50.3-.1-2.6-.1-5.2 0-7.8l-7.9-4.6c-3.8-2.2-7-5-9.8-8.1-3.3.2-6.5.6-9.8.6-24.6 0-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h255.4c-3.7-6-6.2-12.8-6.2-20.3v-9.2zM173.1 274.6C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"
+                /></svg
+              >
             </div>
             <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
-                {$_('create-a-new-user-group')}
+                {$_("create-a-new-user-group")}
               </h3>
               <div class="mt-2 mb-6">
                 <p class="text-sm text-gray-500">
-                  {$_('please-provide-the-required-information-for-creating-a-new-user-group')}
+                  {$_(
+                    "please-provide-the-required-information-for-creating-a-new-user-group"
+                  )}
                 </p>
               </div>
               <div class="grid grid-cols-6 gap-6">
                 <div class="col-span-6">
                   <label
                     for="firstname"
-                    class="block text-sm font-medium text-gray-700">{$_('name')}</label>
+                    class="block text-sm font-medium text-gray-700"
+                    >{$_("name")}</label
+                  >
                   <input
                     use:focus
                     autocomplete="off"
-                    placeholder="{$_('name')}"
+                    placeholder={$_("name")}
                     class:border-red-500={!isNameValid}
                     class:focus:border-red-500={!isNameValid}
                     class:focus:ring-red-500={!isNameValid}
                     bind:value={name_input_value}
                     type="text"
                     name="firstname"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                  />
                   {#if !isNameValid}
                     <span
-                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-                      {$_('name-is-required')}
+                    >
+                      {$_("name-is-required")}
                     </span>
                   {/if}
                 </div>
                 <div class="col-span-6">
                   <label
                     for="trackname"
-                    class="block text-sm font-medium text-gray-700">{$_('description-optional')}</label>
+                    class="block text-sm font-medium text-gray-700"
+                    >{$_("description-optional")}</label
+                  >
                   <input
                     autocomplete="off"
-                    placeholder="{$_('something-about-the-group')}"
+                    placeholder={$_("something-about-the-group")}
                     bind:value={description_input_value}
                     type="text"
                     name="trackname"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                  />
                 </div>
               </div>
             </div>
@@ -157,16 +165,18 @@
             class:opacity-50={!createbtnenabled}
             on:click={submit}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
-            {$_('create')}
+          >
+            {$_("create")}
           </button>
           <button
             on:click={() => {
               modal_open = false;
             }}
             type="button"
-            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
+            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
-            {$_('cancel')}
+          >
+            {$_("cancel")}
           </button>
         </div>
       </div>

src/components/groups/GroupDetail.svelte

@@ -1,10 +1,8 @@
 <script>
   import { _ } from "svelte-i18n";
   import store from "../../store";
-  import {
+  import { UserGroupService } from "@odit/lfk-client-js";
-    UserGroupService
+
-  } from "@odit/lfk-client-js";
-  import Toastify from "toastify-js";
   import PromiseError from "../base/PromiseError.svelte";
   let data_loaded = false;
   export let params;
@@ -31,10 +29,11 @@
   $: search_permission = "";
   $: original_data = {};
   $: editable = {};
-  $: changes_performed = !(JSON.stringify(original_data) == JSON.stringify(editable));
+  $: changes_performed = !(
+    JSON.stringify(original_data) == JSON.stringify(editable)
+  );
   $: isGroupnameValid = editable.name !== "";
-  $: save_enabled =
+  $: save_enabled = changes_performed && isGroupnameValid;
-    changes_performed && isGroupnameValid 
   promise.then((data) => {
     let current_target = "";
     let colorindex = -1;
@@ -59,20 +58,13 @@
   });
   function submit() {
     if (data_loaded === true && save_enabled) {
-      Toastify({
+      toast($_("updating-group"));
-        text: $_('updateing-group'),
-        duration: 2500,
-      }).showToast();
       UserGroupService.userGroupControllerPut(original_data.id, editable)
         .then((resp) => {
           Object.assign(original_data, editable);
           original_data = editable;
           Object.assign(original_data, editable);
-          Toastify({
+          toast.success($_("group-updated"));
-            text: $_('group-updated'),
-            duration: 2500,
-            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-          }).showToast();
         })
         .catch((err) => {});
     } else {
@@ -88,7 +80,7 @@
 </script>
 
 {#await promise}
-  {$_('loading-group-detail')}
+  {$_("loading-group-detail")}
 {:then}
   <section class="container p-5 select-none">
     <div class="flex flex-row mb-4">
@@ -96,10 +88,21 @@
         <nav class="w-full flex">
           <ol class="list-none flex flex-row items-center justify-start">
             <li class="flex items-center">
-              <svg class="flex-shrink-0 w-5 h-5 mr-2" fill="currentColor" width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M610.5 341.3c2.6-14.1 2.6-28.5 0-42.6l25.8-14.9c3-1.7 4.3-5.2 3.3-8.5-6.7-21.6-18.2-41.2-33.2-57.4-2.3-2.5-6-3.1-9-1.4l-25.8 14.9c-10.9-9.3-23.4-16.5-36.9-21.3v-29.8c0-3.4-2.4-6.4-5.7-7.1-22.3-5-45-4.8-66.2 0-3.3.7-5.7 3.7-5.7 7.1v29.8c-13.5 4.8-26 12-36.9 21.3l-25.8-14.9c-2.9-1.7-6.7-1.1-9 1.4-15 16.2-26.5 35.8-33.2 57.4-1 3.3.4 6.8 3.3 8.5l25.8 14.9c-2.6 14.1-2.6 28.5 0 42.6l-25.8 14.9c-3 1.7-4.3 5.2-3.3 8.5 6.7 21.6 18.2 41.1 33.2 57.4 2.3 2.5 6 3.1 9 1.4l25.8-14.9c10.9 9.3 23.4 16.5 36.9 21.3v29.8c0 3.4 2.4 6.4 5.7 7.1 22.3 5 45 4.8 66.2 0 3.3-.7 5.7-3.7 5.7-7.1v-29.8c13.5-4.8 26-12 36.9-21.3l25.8 14.9c2.9 1.7 6.7 1.1 9-1.4 15-16.2 26.5-35.8 33.2-57.4 1-3.3-.4-6.8-3.3-8.5l-25.8-14.9zM496 368.5c-26.8 0-48.5-21.8-48.5-48.5s21.8-48.5 48.5-48.5 48.5 21.8 48.5 48.5-21.7 48.5-48.5 48.5zM96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm224 32c1.9 0 3.7-.5 5.6-.6 8.3-21.7 20.5-42.1 36.3-59.2 7.4-8 17.9-12.6 28.9-12.6 6.9 0 13.7 1.8 19.6 5.3l7.9 4.6c.8-.5 1.6-.9 2.4-1.4 7-14.6 11.2-30.8 11.2-48 0-61.9-50.1-112-112-112S208 82.1 208 144c0 61.9 50.1 112 112 112zm105.2 194.5c-2.3-1.2-4.6-2.6-6.8-3.9-8.2 4.8-15.3 9.8-27.5 9.8-10.9 0-21.4-4.6-28.9-12.6-18.3-19.8-32.3-43.9-40.2-69.6-10.7-34.5 24.9-49.7 25.8-50.3-.1-2.6-.1-5.2 0-7.8l-7.9-4.6c-3.8-2.2-7-5-9.8-8.1-3.3.2-6.5.6-9.8.6-24.6 0-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h255.4c-3.7-6-6.2-12.8-6.2-20.3v-9.2zM173.1 274.6C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"></path></svg>
+              <svg
+                class="flex-shrink-0 w-5 h-5 mr-2"
+                fill="currentColor"
+                width="24"
+                height="24"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 640 512"
+                ><path
+                  fill="currentColor"
+                  d="M610.5 341.3c2.6-14.1 2.6-28.5 0-42.6l25.8-14.9c3-1.7 4.3-5.2 3.3-8.5-6.7-21.6-18.2-41.2-33.2-57.4-2.3-2.5-6-3.1-9-1.4l-25.8 14.9c-10.9-9.3-23.4-16.5-36.9-21.3v-29.8c0-3.4-2.4-6.4-5.7-7.1-22.3-5-45-4.8-66.2 0-3.3.7-5.7 3.7-5.7 7.1v29.8c-13.5 4.8-26 12-36.9 21.3l-25.8-14.9c-2.9-1.7-6.7-1.1-9 1.4-15 16.2-26.5 35.8-33.2 57.4-1 3.3.4 6.8 3.3 8.5l25.8 14.9c-2.6 14.1-2.6 28.5 0 42.6l-25.8 14.9c-3 1.7-4.3 5.2-3.3 8.5 6.7 21.6 18.2 41.1 33.2 57.4 2.3 2.5 6 3.1 9 1.4l25.8-14.9c10.9 9.3 23.4 16.5 36.9 21.3v29.8c0 3.4 2.4 6.4 5.7 7.1 22.3 5 45 4.8 66.2 0 3.3-.7 5.7-3.7 5.7-7.1v-29.8c13.5-4.8 26-12 36.9-21.3l25.8 14.9c2.9 1.7 6.7 1.1 9-1.4 15-16.2 26.5-35.8 33.2-57.4 1-3.3-.4-6.8-3.3-8.5l-25.8-14.9zM496 368.5c-26.8 0-48.5-21.8-48.5-48.5s21.8-48.5 48.5-48.5 48.5 21.8 48.5 48.5-21.7 48.5-48.5 48.5zM96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm224 32c1.9 0 3.7-.5 5.6-.6 8.3-21.7 20.5-42.1 36.3-59.2 7.4-8 17.9-12.6 28.9-12.6 6.9 0 13.7 1.8 19.6 5.3l7.9 4.6c.8-.5 1.6-.9 2.4-1.4 7-14.6 11.2-30.8 11.2-48 0-61.9-50.1-112-112-112S208 82.1 208 144c0 61.9 50.1 112 112 112zm105.2 194.5c-2.3-1.2-4.6-2.6-6.8-3.9-8.2 4.8-15.3 9.8-27.5 9.8-10.9 0-21.4-4.6-28.9-12.6-18.3-19.8-32.3-43.9-40.2-69.6-10.7-34.5 24.9-49.7 25.8-50.3-.1-2.6-.1-5.2 0-7.8l-7.9-4.6c-3.8-2.2-7-5-9.8-8.1-3.3.2-6.5.6-9.8.6-24.6 0-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h255.4c-3.7-6-6.2-12.8-6.2-20.3v-9.2zM173.1 274.6C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"
+                /></svg
+              >
             </li>
             <li class="flex items-center">
-              <a class="mr-2" href="../">{$_('groups')}</a><svg
+              <a class="mr-2" href="../">{$_("groups")}</a><svg
                 stroke="currentColor"
                 fill="none"
                 stroke-width="2"
@@ -109,12 +112,10 @@
                 class="h-3 w-3 mr-2 stroke-current"
                 height="1em"
                 width="1em"
-                xmlns="http://www.w3.org/2000/svg"><line
+                xmlns="http://www.w3.org/2000/svg"
-                  x1="5"
+                ><line x1="5" y1="12" x2="19" y2="12" />
-                  y1="12"
+                <polyline points="12 5 19 12 12 19" /></svg
-                  x2="19"
+              >
-                  y2="12" />
-                <polyline points="12 5 19 12 12 19" /></svg>
             </li>
             <li class="flex items-center">
               <span class="mr-2">{editable.name}</span>
@@ -126,16 +127,20 @@
     <div class="mb-8 text-3xl font-extrabold leading-tight">
       {original_data.name}
       <span data-id="group_actions_${editable.id}">
-        {#if store.state.jwtinfo.userdetails.permissions.includes('USERGROUP:DELETE')}
+        {#if store.state.jwtinfo.userdetails.permissions.includes("USERGROUP:DELETE")}
           {#if delete_triggered}
             <button
               on:click={deleteGroup}
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('confirm-deletion')}</button>
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
+              >{$_("confirm-deletion")}</button
+            >
             <button
               on:click={() => {
                 delete_triggered = !delete_triggered;
               }}
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm">{$_('cancel')}</button>
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm"
+              >{$_("cancel")}</button
+            >
           {/if}
           {#if !delete_triggered}
             <button
@@ -143,7 +148,9 @@
                 delete_triggered = true;
               }}
               type="button"
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('delete-group')}</button>
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
+              >{$_("delete-group")}</button
+            >
           {/if}
         {/if}
         {#if !delete_triggered}
@@ -152,64 +159,74 @@
             class:opacity-50={!save_enabled}
             type="button"
             on:click={submit}
-            class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('save-changes')}</button>
+            class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
+            >{$_("save-changes")}</button
+          >
         {/if}
       </span>
     </div>
     <!--  -->
     <div class="text-sm w-full">
-      <label
+      <label for="title" class="font-medium text-gray-700">{$_("name")}</label>
-        for="title"
-        class="font-medium text-gray-700">{$_('name')}</label>
       <input
         autocomplete="off"
-        placeholder={$_('name')}
+        placeholder={$_("name")}
         type="text"
         bind:value={editable.name}
         class:border-red-500={!isGroupnameValid}
         class:focus:border-red-500={!isGroupnameValid}
         class:focus:ring-red-500={!isGroupnameValid}
         name="title"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+      />
       {#if !isGroupnameValid}
         <span
-          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-          {$_('group-name-is-required')}
+        >
+          {$_("group-name-is-required")}
         </span>
       {/if}
     </div>
     <div class="text-sm w-full">
-      <label
+      <label for="firstname" class="font-medium text-gray-700"
-        for="firstname"
+        >{$_("description")}</label
-        class="font-medium text-gray-700">{$_('description')}</label>
+      >
       <input
         autocomplete="off"
-        placeholder={$_('description')}
+        placeholder={$_("description")}
         type="text"
         bind:value={editable.description}
         name="firstname"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+      />
     </div>
     <div class="text-sm w-full mt-8">
       <p class="font-medium mb-4">
-        {$_('permissions')}
+        {$_("permissions")}
         <a
           class="px-4 py-2 bg-gray-500 rounded-md text-white"
-          href="/groups/{params.groupid}/permissions/">{$_('edit-permissions')}</a>
+          href="/groups/{params.groupid}/permissions/"
+          >{$_("edit-permissions")}</a
+        >
       </p>
       <div class="w-full sm:my-px sm:px-px sm:w-1/2">
         <input
           autocomplete="off"
-          placeholder="{$_('search-for-permission')}"
+          placeholder={$_("search-for-permission")}
           type="text"
           bind:value={search_permission}
-          class="mt-4 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2" />
+          class="mt-4 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+        />
       </div>
       {#each original_data.permissions as p}
         {#if p.toLowerCase().includes(search_permission.toLowerCase())}
           <span
-            style="background:{matched_colors[p.split(':')[0]][0]};color:{matched_colors[p.split(':')[0]][1]};"
+            style="background:{matched_colors[
-            class="mt-1 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-indigo-100 rounded">{p}</span>
+              p.split(':')[0]
+            ][0]};color:{matched_colors[p.split(':')[0]][1]};"
+            class="mt-1 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-indigo-100 rounded"
+            >{p}</span
+          >
           <!--  -->
         {/if}
       {/each}

src/components/groups/GroupPermissions.svelte

@@ -5,7 +5,7 @@
     CreatePermission,
     UserGroupService,
   } from "@odit/lfk-client-js";
-  import Toastify from "toastify-js";
+
   import PromiseError from "../base/PromiseError.svelte";
   export let params;
   let [
@@ -20,15 +20,14 @@ UserGroupService,
   $: save_enabled =
     JSON.stringify(grantedPermissions) ===
     JSON.stringify(grantedPermissions_initial);
-  const group_promise = UserGroupService.userGroupControllerGetOne(params.groupid);
+  const group_promise = UserGroupService.userGroupControllerGetOne(
+    params.groupid
+  );
   group_promise.then((data) => {
     original_data = Object.assign(original_data, data);
   });
   function submit() {
-    Toastify({
+    toast.loading($_("updating-permissions"));
-      text: $_('updating-permissions'),
-      duration: 2500,
-    }).showToast();
     to_delete.forEach((d) => {
       promises = promises.concat([
         PermissionService.permissionControllerRemove(d, true),
@@ -50,11 +49,7 @@ UserGroupService,
         );
       });
       grantedPermissions_initial = grantedPermissions;
-      Toastify({
+      toast($_("permissions-updated"));
-        text: $_("permissions-updated"),
-        duration: 2500,
-        backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-      }).showToast();
     });
   }
   Object.values(CreatePermission.target).forEach((t) => {
@@ -62,13 +57,15 @@ UserGroupService,
       allpermissions = allpermissions.concat([{ target: t, action: a }]);
     });
   });
-  UserGroupService.userGroupControllerGetPermissions(params.groupid).then((val) => {
+  UserGroupService.userGroupControllerGetPermissions(params.groupid).then(
+    (val) => {
       val.directlyGranted.forEach((p) => {
         delete p.responseType;
         grantedPermissions = grantedPermissions.concat([p]);
       });
       grantedPermissions_initial = grantedPermissions;
-  });
+    }
+  );
 </script>
 
 {#await group_promise}
@@ -86,12 +83,15 @@ UserGroupService,
                 width="24"
                 height="24"
                 xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 640 512"><path
+                viewBox="0 0 640 512"
+                ><path
                   fill="currentColor"
-                  d="M610.5 341.3c2.6-14.1 2.6-28.5 0-42.6l25.8-14.9c3-1.7 4.3-5.2 3.3-8.5-6.7-21.6-18.2-41.2-33.2-57.4-2.3-2.5-6-3.1-9-1.4l-25.8 14.9c-10.9-9.3-23.4-16.5-36.9-21.3v-29.8c0-3.4-2.4-6.4-5.7-7.1-22.3-5-45-4.8-66.2 0-3.3.7-5.7 3.7-5.7 7.1v29.8c-13.5 4.8-26 12-36.9 21.3l-25.8-14.9c-2.9-1.7-6.7-1.1-9 1.4-15 16.2-26.5 35.8-33.2 57.4-1 3.3.4 6.8 3.3 8.5l25.8 14.9c-2.6 14.1-2.6 28.5 0 42.6l-25.8 14.9c-3 1.7-4.3 5.2-3.3 8.5 6.7 21.6 18.2 41.1 33.2 57.4 2.3 2.5 6 3.1 9 1.4l25.8-14.9c10.9 9.3 23.4 16.5 36.9 21.3v29.8c0 3.4 2.4 6.4 5.7 7.1 22.3 5 45 4.8 66.2 0 3.3-.7 5.7-3.7 5.7-7.1v-29.8c13.5-4.8 26-12 36.9-21.3l25.8 14.9c2.9 1.7 6.7 1.1 9-1.4 15-16.2 26.5-35.8 33.2-57.4 1-3.3-.4-6.8-3.3-8.5l-25.8-14.9zM496 368.5c-26.8 0-48.5-21.8-48.5-48.5s21.8-48.5 48.5-48.5 48.5 21.8 48.5 48.5-21.7 48.5-48.5 48.5zM96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm224 32c1.9 0 3.7-.5 5.6-.6 8.3-21.7 20.5-42.1 36.3-59.2 7.4-8 17.9-12.6 28.9-12.6 6.9 0 13.7 1.8 19.6 5.3l7.9 4.6c.8-.5 1.6-.9 2.4-1.4 7-14.6 11.2-30.8 11.2-48 0-61.9-50.1-112-112-112S208 82.1 208 144c0 61.9 50.1 112 112 112zm105.2 194.5c-2.3-1.2-4.6-2.6-6.8-3.9-8.2 4.8-15.3 9.8-27.5 9.8-10.9 0-21.4-4.6-28.9-12.6-18.3-19.8-32.3-43.9-40.2-69.6-10.7-34.5 24.9-49.7 25.8-50.3-.1-2.6-.1-5.2 0-7.8l-7.9-4.6c-3.8-2.2-7-5-9.8-8.1-3.3.2-6.5.6-9.8.6-24.6 0-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h255.4c-3.7-6-6.2-12.8-6.2-20.3v-9.2zM173.1 274.6C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z" /></svg>
+                  d="M610.5 341.3c2.6-14.1 2.6-28.5 0-42.6l25.8-14.9c3-1.7 4.3-5.2 3.3-8.5-6.7-21.6-18.2-41.2-33.2-57.4-2.3-2.5-6-3.1-9-1.4l-25.8 14.9c-10.9-9.3-23.4-16.5-36.9-21.3v-29.8c0-3.4-2.4-6.4-5.7-7.1-22.3-5-45-4.8-66.2 0-3.3.7-5.7 3.7-5.7 7.1v29.8c-13.5 4.8-26 12-36.9 21.3l-25.8-14.9c-2.9-1.7-6.7-1.1-9 1.4-15 16.2-26.5 35.8-33.2 57.4-1 3.3.4 6.8 3.3 8.5l25.8 14.9c-2.6 14.1-2.6 28.5 0 42.6l-25.8 14.9c-3 1.7-4.3 5.2-3.3 8.5 6.7 21.6 18.2 41.1 33.2 57.4 2.3 2.5 6 3.1 9 1.4l25.8-14.9c10.9 9.3 23.4 16.5 36.9 21.3v29.8c0 3.4 2.4 6.4 5.7 7.1 22.3 5 45 4.8 66.2 0 3.3-.7 5.7-3.7 5.7-7.1v-29.8c13.5-4.8 26-12 36.9-21.3l25.8 14.9c2.9 1.7 6.7 1.1 9-1.4 15-16.2 26.5-35.8 33.2-57.4 1-3.3-.4-6.8-3.3-8.5l-25.8-14.9zM496 368.5c-26.8 0-48.5-21.8-48.5-48.5s21.8-48.5 48.5-48.5 48.5 21.8 48.5 48.5-21.7 48.5-48.5 48.5zM96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm224 32c1.9 0 3.7-.5 5.6-.6 8.3-21.7 20.5-42.1 36.3-59.2 7.4-8 17.9-12.6 28.9-12.6 6.9 0 13.7 1.8 19.6 5.3l7.9 4.6c.8-.5 1.6-.9 2.4-1.4 7-14.6 11.2-30.8 11.2-48 0-61.9-50.1-112-112-112S208 82.1 208 144c0 61.9 50.1 112 112 112zm105.2 194.5c-2.3-1.2-4.6-2.6-6.8-3.9-8.2 4.8-15.3 9.8-27.5 9.8-10.9 0-21.4-4.6-28.9-12.6-18.3-19.8-32.3-43.9-40.2-69.6-10.7-34.5 24.9-49.7 25.8-50.3-.1-2.6-.1-5.2 0-7.8l-7.9-4.6c-3.8-2.2-7-5-9.8-8.1-3.3.2-6.5.6-9.8.6-24.6 0-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h255.4c-3.7-6-6.2-12.8-6.2-20.3v-9.2zM173.1 274.6C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"
+                /></svg
+              >
             </li>
             <li class="flex items-center">
-              <a class="mr-2" href="../../">{$_('user-groups')}</a><svg
+              <a class="mr-2" href="../../">{$_("user-groups")}</a><svg
                 stroke="currentColor"
                 fill="none"
                 stroke-width="2"
@@ -101,12 +101,10 @@ UserGroupService,
                 class="h-3 w-3 mr-2 stroke-current"
                 height="1em"
                 width="1em"
-                xmlns="http://www.w3.org/2000/svg"><line
+                xmlns="http://www.w3.org/2000/svg"
-                  x1="5"
+                ><line x1="5" y1="12" x2="19" y2="12" />
-                  y1="12"
+                <polyline points="12 5 19 12 12 19" /></svg
-                  x2="19"
+              >
-                  y2="12" />
-                <polyline points="12 5 19 12 12 19" /></svg>
             </li>
             <li class="flex items-center">
               <span class="mr-2"><a href="../">{original_data.name}</a></span>
@@ -122,22 +120,20 @@ UserGroupService,
                 class="h-3 w-3 mr-2 stroke-current"
                 height="1em"
                 width="1em"
-                xmlns="http://www.w3.org/2000/svg"><line
+                xmlns="http://www.w3.org/2000/svg"
-                  x1="5"
+                ><line x1="5" y1="12" x2="19" y2="12" />
-                  y1="12"
+                <polyline points="12 5 19 12 12 19" /></svg
-                  x2="19"
+              >
-                  y2="12" />
-                <polyline points="12 5 19 12 12 19" /></svg>
             </li>
             <li class="flex items-center">
-              <span class="mr-2">{$_('permissions')}</span>
+              <span class="mr-2">{$_("permissions")}</span>
             </li>
           </ol>
         </nav>
       </div>
     </div>
     <div class="mb-8 text-3xl font-extrabold">
-      {$_('permissions')}:
+      {$_("permissions")}:
       {original_data.name}
       <span>
         {#if promises.length === 0}
@@ -146,21 +142,25 @@ UserGroupService,
             class:opacity-50={save_enabled}
             type="button"
             on:click={submit}
-            class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('save-changes')}</button>
+            class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
+            >{$_("save-changes")}</button
+          >
         {:else}
           <button
             type="button"
-            class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-yellow-600 text-base font-medium text-white hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('applying-changes')}</button>
+            class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-yellow-600 text-base font-medium text-white hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500 sm:ml-3 sm:w-auto sm:text-sm"
+            >{$_("applying-changes")}</button
+          >
         {/if}
       </span>
     </div>
     <!--  -->
     <div class="flex flex-wrap -mx-1 overflow-hidden">
       <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
-        {$_('verfuegbare')}
+        {$_("available-permissions")}
       </div>
       <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
-        {$_('granted')}
+        {$_("granted")}
       </div>
     </div>
     <!--  -->
@@ -168,12 +168,14 @@ UserGroupService,
       {#if allpermissions.length > 0}
         <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
           <div
-            class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center">
+            class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center"
+          >
             {#each allpermissions as p}
               {#if !(grantedPermissions.filter((o) => p.target == o.target && p.action == o.action).length > 0)}
                 <p
-                  class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 bg-gray-200 p-2 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input">
+                  class="block w-full mt-1 text-sm bg-gray-200 p-2 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple form-input"
-                  {p.target + ':' + p.action}
+                >
+                  {p.target + ":" + p.action}
                   <button
                     on:click={() => {
                       grantedPermissions = grantedPermissions.concat([p]);
@@ -190,7 +192,9 @@ UserGroupService,
                       }
                     }}
                     type="button"
-                    class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-200 text-base font-medium text-black hover:bg-green-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 sm:ml-3 sm:w-auto sm:text-sm">+</button>
+                    class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-200 text-base font-medium text-black hover:bg-green-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 sm:ml-3 sm:w-auto sm:text-sm"
+                    >+</button
+                  >
                 </p>
               {/if}
             {/each}
@@ -198,22 +202,39 @@ UserGroupService,
         </div>
         <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
           <div
-            class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center">
+            class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center"
+          >
             {#each grantedPermissions as p}
               <p
-                class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 bg-gray-200 p-2 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input">
+                class="block w-full mt-1 text-sm bg-gray-200 p-2 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple form-input"
-                {p.target + ':' + p.action}
+              >
+                {p.target + ":" + p.action}
                 <button
                   on:click={() => {
-                    grantedPermissions = grantedPermissions.filter((o) => o.target + ':' + o.action !== p.target + ':' + p.action);
+                    grantedPermissions = grantedPermissions.filter(
-                    if (to_add.some((o) => o.target + ':' + o.action === p.target + ':' + p.action)) {
+                      (o) =>
-                      to_add = to_add.filter((o) => o.target + ':' + o.action !== p.target + ':' + p.action);
+                        o.target + ":" + o.action !== p.target + ":" + p.action
+                    );
+                    if (
+                      to_add.some(
+                        (o) =>
+                          o.target + ":" + o.action ===
+                          p.target + ":" + p.action
+                      )
+                    ) {
+                      to_add = to_add.filter(
+                        (o) =>
+                          o.target + ":" + o.action !==
+                          p.target + ":" + p.action
+                      );
                     } else {
                       to_delete = to_delete.concat([p.id]);
                     }
                   }}
                   type="button"
-                  class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-300 text-base font-medium text-black hover:bg-red-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm">-</button>
+                  class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-300 text-base font-medium text-black hover:bg-red-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm"
+                  >-</button
+                >
               </p>
             {/each}
           </div>

src/components/groups/Groups.svelte

@@ -9,21 +9,22 @@
 
 <section class="container p-5">
   <span class="mb-1 text-3xl font-extrabold leading-tight">
-    {$_('user-groups')}
+    {$_("user-groups")}
-    {#if store.state.jwtinfo.userdetails.permissions.includes('USERGROUP:CREATE')}
+    {#if store.state.jwtinfo.userdetails.permissions.includes("USERGROUP:CREATE")}
       <button
         on:click={() => {
           modal_open = true;
         }}
         type="button"
-        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
+        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
-        {$_('add-user-group')}
+      >
+        {$_("add-user-group")}
       </button>
     {/if}
   </span>
   <UserGroupsOverview bind:current_groups />
 </section>
 
-{#if store.state.jwtinfo.userdetails.permissions.includes('USERGROUP:CREATE')}
+{#if store.state.jwtinfo.userdetails.permissions.includes("USERGROUP:CREATE")}
   <AddGroupModal bind:current_groups bind:modal_open />
 {/if}

src/components/groups/UserGroupsEmptyState.svelte

@@ -6,7 +6,7 @@
 <div class="text-center items-center justify-center">
   <p class="mb-16 text-lg text-gray-500">
     <img class="w-full h-44" src={groups_empty} alt="" />
-    <span class="font-bold">{$_('there-are-no-groups-yet')}.</span><br />
+    <span class="font-bold">{$_("there-are-no-groups-yet")}.</span><br />
-    <span>{$_('add-your-first-group')}</span>
+    <span>{$_("add-your-first-group")}</span>
   </p>
 </div>

src/components/groups/UserGroupsOverview.svelte

@@ -13,13 +13,14 @@
   );
 </script>
 
-{#if store.state.jwtinfo.userdetails.permissions.includes('USERGROUP:GET')}
+{#if store.state.jwtinfo.userdetails.permissions.includes("USERGROUP:GET")}
   {#await groups_promise}
     <div
       class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
-      role="alert">
+      role="alert"
-      <p class="font-bold">{$_('groups-are-being-loaded')}</p>
+    >
-      <p class="text-sm">{$_('this-might-take-a-moment')}</p>
+      <p class="font-bold">{$_("groups-are-being-loaded")}</p>
+      <p class="text-sm">{$_("this-might-take-a-moment")}</p>
     </div>
   {:then}
     {#if current_groups.length === 0}
@@ -28,26 +29,30 @@
       <input
         type="search"
         bind:value={searchvalue}
-        placeholder={$_('datatable.search')}
+        placeholder={$_("datatable.search")}
-        aria-label={$_('datatable.search')}
+        aria-label={$_("datatable.search")}
-        class="mb-4" />
+        class="mb-4"
+      />
       <div
-        class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
+        class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll"
+      >
         <table class="divide-y divide-gray-200 w-full">
           <thead class="bg-gray-50">
-            <tr>
+            <tr class="odd:bg-white even:bg-gray-100">
               <th
                 scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-                {$_('name')}
+              >
+                {$_("name")}
               </th>
               <th
                 scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-                {$_('description')}
+              >
+                {$_("description")}
               </th>
               <th scope="col" class="relative px-6 py-3">
-                <span class="sr-only">{$_('action')}</span>
+                <span class="sr-only">{$_("action")}</span>
               </th>
             </tr>
           </thead>
@@ -57,7 +62,10 @@
                 .toString()
                 .toLowerCase()
                 .includes(searchvalue)}
-                <tr data-rowid="user_{group.id}">
+                <tr
+                  class="odd:bg-white even:bg-gray-100"
+                  data-rowid="user_{group.id}"
+                >
                   <td class="px-6 py-4 whitespace-nowrap">
                     <div class="flex items-center">
                       <div class="ml-4">
@@ -72,39 +80,53 @@
                   </td>
                   {#if active_deletes[group.id] === true}
                     <td
-                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
+                    >
                       <button
                         on:click={() => {
                           active_deletes[group.id] = false;
                         }}
                         tabindex="0"
-                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
+                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
+                        >{$_("cancel-delete")}</button
+                      >
                       <button
                         on:click={() => {
-                          UserGroupService.userGroupControllerRemove(group.id, true)
+                          UserGroupService.userGroupControllerRemove(
+                            group.id,
+                            true
+                          )
                             .then((resp) => {
-                              current_groups = current_groups.filter((obj) => obj.id !== group.id);
+                              current_groups = current_groups.filter(
+                                (obj) => obj.id !== group.id
+                              );
                             })
                             .catch((err) => {
                               // error deleting user
                             });
                         }}
                         tabindex="0"
-                        class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
+                        class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
+                        >{$_("confirm-delete")}</button
+                      >
                     </td>
                   {:else}
                     <td
-                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
+                    >
                       <a
                         href="./{group.id}"
-                        class="text-indigo-600 hover:text-indigo-900">Details</a>
+                        class="text-indigo-600 hover:text-indigo-900">Details</a
-                      {#if store.state.jwtinfo.userdetails.permissions.includes('USERGROUP:DELETE')}
+                      >
+                      {#if store.state.jwtinfo.userdetails.permissions.includes("USERGROUP:DELETE")}
                         <button
                           on:click={() => {
                             active_deletes[group.id] = true;
                           }}
                           tabindex="0"
-                          class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('delete')}</button>
+                          class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
+                          >{$_("delete")}</button
+                        >
                       {/if}
                     </td>
                   {/if}
@@ -118,7 +140,7 @@
   {:catch error}
     <div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
       <span class="inline-block align-middle mr-8">
-        <b class="capitalize">{$_('general_promise_error')}</b>
+        <b class="capitalize">{$_("general_promise_error")}</b>
         {error}
       </span>
     </div>

src/components/orgs/AddOrgModal.svelte

@@ -3,7 +3,8 @@
   import { clickOutside } from "../base/outsideclick";
 
   import { RunnerOrganizationService } from "@odit/lfk-client-js";
-  import Toastify from "toastify-js";
+
+  import toast from "svelte-french-toast";
   export let modal_open;
   export let current_organizations;
   let name_input_dom;
@@ -48,10 +49,7 @@
   function submit() {
     if (processed_last_submit === true) {
       processed_last_submit = false;
-      const toast = Toastify({
+      toast.loading($_("organization-is-being-added"));
-        text: $_("organization-is-being-added"),
-        duration: -1,
-      }).showToast();
       let address = {};
       if (address_checked === true) {
         address = {
@@ -70,17 +68,13 @@
         .then((result) => {
           name = "";
           modal_open = false;
-          Toastify({
+          toast.dismiss();
-            text: $_("organization-added"),
+          toast.success($_("organization-added"));
-            duration: 500,
-            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-          }).showToast();
           current_organizations = current_organizations.concat([result]);
         })
         .catch((err) => {})
         .finally(() => {
           processed_last_submit = true;
-          toast.hideToast();
         });
     }
   }
@@ -89,57 +83,69 @@
 {#if modal_open}
   <div
     class="fixed z-10 inset-0 overflow-y-auto"
-    
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;
-    }}>
+    }}
+  >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+    >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
           class="absolute inset-0 bg-gray-500 opacity-75"
-          data-id="modal_backdrop" />
+          data-id="modal_backdrop"
+        />
       </div>
       <span
         class="hidden sm:inline-block sm:align-middle sm:h-screen"
-        aria-hidden="true">&#8203;</span>
+        aria-hidden="true">&#8203;</span
+      >
       <div
         class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
         role="dialog"
         aria-modal="true"
-        aria-labelledby="modal-headline">
+        aria-labelledby="modal-headline"
+      >
         <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
           <div class="sm:flex sm:items-start">
             <div
-              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
+              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
+            >
               <svg
                 class="h-6 w-6 text-blue-600"
                 fill="currentColor"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
                 width="24"
-                height="24"><path
+                height="24"
-                  d="M17 19h2v-8h-6v8h2v-6h2v6zM3 19V4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v5h2v10h1v2H2v-2h1zm4-8v2h2v-2H7zm0 4v2h2v-2H7zm0-8v2h2V7H7z" /></svg>
+                ><path
+                  d="M17 19h2v-8h-6v8h2v-6h2v6zM3 19V4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v5h2v10h1v2H2v-2h1zm4-8v2h2v-2H7zm0 4v2h2v-2H7zm0-8v2h2V7H7z"
+                /></svg
+              >
             </div>
             <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
-                {$_('create-a-new-organization')}
+                {$_("create-a-new-organization")}
               </h3>
               <div class="mt-2 mb-6">
                 <p class="text-sm text-gray-500">
-                  {$_('please-provide-the-required-information-to-add-a-new-organization')}
+                  {$_(
+                    "please-provide-the-required-information-to-add-a-new-organization"
+                  )}
                 </p>
               </div>
               <div class="grid grid-cols-6 gap-6">
                 <div class="col-span-6">
                   <label
                     for="firstname"
-                    class="block text-sm font-medium text-gray-700">{$_('name')}</label>
+                    class="block text-sm font-medium text-gray-700"
+                    >{$_("name")}</label
+                  >
                   <input
                     use:focus
                     autocomplete="off"
-                    placeholder={$_('name')}
+                    placeholder={$_("name")}
                     class:border-red-500={!isOrgnameValid}
                     class:focus:border-red-500={!isOrgnameValid}
                     class:focus:ring-red-500={!isOrgnameValid}
@@ -147,11 +153,13 @@
                     bind:this={name_input_dom}
                     type="text"
                     name="firstname"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                  />
                   {#if !isOrgnameValid}
                     <span
-                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-                      {$_('organization-name-is-required')}
+                    >
+                      {$_("organization-name-is-required")}
                     </span>
                   {/if}
                 </div>
@@ -162,22 +170,25 @@
                       id="comments"
                       name="comments"
                       type="checkbox"
-                      class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
+                      class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+                    />
                   </div>
                   <div class="ml-3 text-sm">
-                    <label
+                    <label for="comments" class="font-medium text-gray-700"
-                      for="comments"
+                      >{$_("address")}</label
-                      class="font-medium text-gray-700">{$_('address')}</label>
+                    >
                   </div>
                 </div>
                 {#if address_checked === true}
                   <div class="col-span-6">
                     <label
                       for="address1"
-                    class="block text-sm font-medium text-gray-700">{$_('address')}</label>
+                      class="block text-sm font-medium text-gray-700"
+                      >{$_("address")}</label
+                    >
                     <input
                       autocomplete="off"
-                    placeholder="{$_('address')}"
+                      placeholder={$_("address")}
                       class:border-red-500={!isAddress1Valid}
                       class:focus:border-red-500={!isAddress1Valid}
                       class:focus:ring-red-500={!isAddress1Valid}
@@ -185,34 +196,41 @@
                       bind:this={address_input1}
                       type="text"
                       name="address1"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    />
                     {#if !isAddress1Valid}
                       <span
-                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                        class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-                      {$_('address-is-required')}
+                      >
+                        {$_("address-is-required")}
                       </span>
                     {/if}
                   </div>
                   <div class="col-span-6">
                     <label
                       for="address2"
-                    class="block text-sm font-medium text-gray-700">{$_('apartment-suite-etc')}</label>
+                      class="block text-sm font-medium text-gray-700"
+                      >{$_("apartment-suite-etc")}</label
+                    >
                     <input
                       autocomplete="off"
-                    placeholder="{$_('apartment-suite-etc')}"
+                      placeholder={$_("apartment-suite-etc")}
                       bind:value={address_input2_value}
                       bind:this={address_input2}
                       type="text"
                       name="address2"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    />
                   </div>
                   <div class="col-span-6">
                     <label
                       for="zipcode"
-                    class="block text-sm font-medium text-gray-700">{$_('zip-postal-code')}</label>
+                      class="block text-sm font-medium text-gray-700"
+                      >{$_("zip-postal-code")}</label
+                    >
                     <input
                       autocomplete="off"
-                    placeholder="{$_('zip-postal-code')}"
+                      placeholder={$_("zip-postal-code")}
                       class:border-red-500={!iszipcodevalid}
                       class:focus:border-red-500={!iszipcodevalid}
                       class:focus:ring-red-500={!iszipcodevalid}
@@ -220,21 +238,25 @@
                       bind:this={address_zipcode}
                       type="text"
                       name="zipcode"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    />
                     {#if !iszipcodevalid}
                       <span
-                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                        class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-                      {$_('valid-zipcode-postal-code-is-required')}
+                      >
+                        {$_("valid-zipcode-postal-code-is-required")}
                       </span>
                     {/if}
                   </div>
                   <div class="col-span-6">
                     <label
                       for="city"
-                    class="block text-sm font-medium text-gray-700">{$_('city')}</label>
+                      class="block text-sm font-medium text-gray-700"
+                      >{$_("city")}</label
+                    >
                     <input
                       autocomplete="off"
-                    placeholder="{$_('city')}"
+                      placeholder={$_("city")}
                       class:border-red-500={!iscityvalid}
                       class:focus:border-red-500={!iscityvalid}
                       class:focus:ring-red-500={!iscityvalid}
@@ -242,11 +264,13 @@
                       bind:this={address_city}
                       type="text"
                       name="city"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                    />
                     {#if !iscityvalid}
                       <span
-                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                        class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-                      {$_('valid-city-is-required')}
+                      >
+                        {$_("valid-city-is-required")}
                       </span>
                     {/if}
                   </div>
@@ -261,16 +285,18 @@
             class:opacity-50={!createbtnenabled}
             on:click={submit}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
-            {$_('create')}
+          >
+            {$_("create")}
           </button>
           <button
             on:click={() => {
               modal_open = false;
             }}
             type="button"
-            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
+            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
-            {$_('cancel')}
+          >
+            {$_("cancel")}
           </button>
         </div>
       </div>

src/components/orgs/ConfirmOrgDeletion.svelte

@@ -3,7 +3,7 @@
   import { clickOutside } from "../base/outsideclick";
 
   import { RunnerOrganizationService } from "@odit/lfk-client-js";
-  import Toastify from "toastify-js";
+
   import { createEventDispatcher } from "svelte";
   export let modal_open;
   export let delete_org;
@@ -18,11 +18,7 @@
       true
     )
       .then((resp) => {
-        Toastify({
+        toast($_("organization-deleted"));
-          text: $_('organization-deleted'),
-          duration: 500,
-          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-        }).showToast();
         location.replace("./");
       })
       .catch((err) => {});
@@ -32,51 +28,59 @@
 {#if modal_open}
   <div
     class="fixed z-10 inset-0 overflow-y-auto"
-    
     use:clickOutside
-    on:click_outside={cancelDelete}>
+    on:click_outside={cancelDelete}
+  >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+    >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
           class="absolute inset-0 bg-gray-500 opacity-75"
-          data-id="modal_backdrop" />
+          data-id="modal_backdrop"
+        />
       </div>
       <span
         class="hidden sm:inline-block sm:align-middle sm:h-screen"
-        aria-hidden="true">&#8203;</span>
+        aria-hidden="true">&#8203;</span
+      >
       <div
         class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
         role="dialog"
         aria-modal="true"
-        aria-labelledby="modal-headline">
+        aria-labelledby="modal-headline"
+      >
         <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
           <div class="sm:flex sm:items-start">
             <div
-              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
+              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
+            >
               <svg
                 class="h-6 w-6 text-blue-600"
                 fill="currentColor"
                 width="24"
                 height="24"
                 xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 640 512"><path
+                viewBox="0 0 640 512"
+                ><path
                   fill="currentColor"
-                  d="M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z" /></svg>
+                  d="M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"
+                /></svg
+              >
             </div>
             <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
-                {$_('attention')}
+                {$_("attention")}
               </h3>
               <div class="mt-2 mb-6">
                 <p class="text-sm text-gray-500">
                   {$_(
-                    'do-you-want-to-delete-the-organization-delete_org-name',
+                    "do-you-want-to-delete-the-organization-delete_org-name",
                     {
                       values: { orgname: delete_org.name },
                     }
                   )}<br />
-                  {$_('all-associated-teams-and-runners-will-be-deleted-too')}
+                  {$_("all-associated-teams-and-runners-will-be-deleted-too")}
                 </p>
               </div>
             </div>
@@ -86,14 +90,16 @@
           <button
             on:click={deleteOrg}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
-            {$_('confirm-delete-organization-and-associated-teams-runners')}
+          >
+            {$_("confirm-delete-organization-and-associated-teams-runners")}
           </button>
           <button
             on:click={cancelDelete}
             type="button"
-            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
+            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
-            {$_('cancel-keep-organization')}
+          >
+            {$_("cancel-keep-organization")}
           </button>
         </div>
       </div>

src/components/orgs/OrgDetail.svelte

@@ -4,7 +4,7 @@
     RunnerOrganizationService,
   } from "@odit/lfk-client-js";
   import { getLocaleFromNavigator, _ } from "svelte-i18n";
-  import Toastify from "toastify-js";
+
   import store from "../../store";
   import ConfirmOrgDeletion from "./ConfirmOrgDeletion.svelte";
   import ImportRunnerModal from "../runners/ImportRunnerModal.svelte";
@@ -77,11 +77,7 @@
       false
     )
       .then((resp) => {
-        Toastify({
+        toast($_("organization-deleted"));
-          text: $_("organization-deleted"),
-          duration: 500,
-          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-        }).showToast();
         location.replace("./");
       })
       .catch((err) => {
@@ -91,10 +87,7 @@
   }
   function submit() {
     if (data_loaded === true && save_enabled) {
-      Toastify({
+      toast($_("updating-organization"));
-        text: $_("updating-organization"),
-        duration: 2500,
-      }).showToast();
       let postdata = Object.assign({}, editable);
       if (postdata.address_checked === false) {
         postdata.address = null;
@@ -108,11 +101,7 @@
           editable.registrationKey = resp.registrationKey;
           original_object = Object.assign({}, editable);
           original = JSON.stringify(original_object);
-          Toastify({
+          toast.success($_("updated-organization"));
-            text: $_("updated-organization"),
-            duration: 2500,
-            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-          }).showToast();
         })
         .catch((err) => {});
     } else {
@@ -120,12 +109,7 @@
   }
   async function copy() {
     if (!editable.registrationKey) {
-      Toastify({
+      toast.error($_("you-have-to-save-your-changes-to-generate-a-link"));
-        text: $_("you-have-to-save-your-changes-to-generate-a-link"),
-        duration: 500,
-        backgroundColor:
-          "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
-      }).showToast();
       return;
     }
     valueCopy = registrationLink;
@@ -137,19 +121,10 @@
       if (!successful) {
         throw new Error();
       }
-      Toastify({
+      toast($_("copied-link-to-clipboard"));
-        text: $_("copied-link-to-clipboard"),
-        duration: 500,
-        backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-      }).showToast();
       copied = true;
     } catch (err) {
-      Toastify({
+      toast.error($_("error-whyile-copying-to-clipboard"));
-        text: $_("error-whyile-copying-to-clipboard"),
-        duration: 500,
-        backgroundColor:
-          "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
-      }).showToast();
     }
     // we can notifi by event or storage about copy status
     valueCopy = null;

src/components/orgs/OrgOverview.svelte

@@ -1,26 +1,31 @@
 <script>
-  import { getLocaleFromNavigator, _ } from "svelte-i18n";
+  import { _ } from "svelte-i18n";
   import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
   let modal_open = false;
   let delete_org = {};
   import { RunnerOrganizationService } from "@odit/lfk-client-js";
   import store from "../../store";
   import OrgsEmptyState from "./OrgsEmptyState.svelte";
-  import Toastify from "toastify-js";
   import ConfirmOrgDeletion from "./ConfirmOrgDeletion.svelte";
   import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
   import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
+  import toast from "svelte-french-toast";
   $: searchvalue = "";
   $: active_deletes = [];
-  $: sponsoring_contracts_show = current_organizations.some((r) => r.is_selected === true);
+  $: sponsoring_contracts_show = current_organizations.some(
+    (r) => r.is_selected === true
+  );
   $: cards_show = current_organizations.some((r) => r.is_selected === true);
-  $: generate_orgs = current_organizations.filter((r) => r.is_selected === true);
+  $: generate_orgs = current_organizations.filter(
+    (r) => r.is_selected === true
+  );
   $: certificates_show = current_organizations.some(
     (r) => r.is_selected === true
   );
   export let current_organizations = [];
 
-  const promise = RunnerOrganizationService.runnerOrganizationControllerGetAll().then(
+  const promise =
+    RunnerOrganizationService.runnerOrganizationControllerGetAll().then(
       (val) => {
         current_organizations = val;
       }
@@ -33,14 +38,16 @@
     active_deletes[event.detail.id] = false;
   }}
   bind:modal_open
-  bind:delete_org />
+  bind:delete_org
-{#if store.state.jwtinfo.userdetails.permissions.includes('ORGANIZATION:GET')}
+/>
+{#if store.state.jwtinfo.userdetails.permissions.includes("ORGANIZATION:GET")}
   {#await promise}
     <div
       class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
-      role="alert">
+      role="alert"
-      <p class="font-bold">{$_('organizations-are-being-loaded')}</p>
+    >
-      <p class="text-sm">{$_('this-might-take-a-moment')}</p>
+      <p class="font-bold">{$_("organizations-are-being-loaded")}</p>
+      <p class="text-sm">{$_("this-might-take-a-moment")}</p>
     </div>
   {:then}
     {#if current_organizations.length === 0}
@@ -49,58 +56,64 @@
       <input
         type="search"
         bind:value={searchvalue}
-        placeholder={$_('datatable.search')}
+        placeholder={$_("datatable.search")}
-        aria-label={$_('datatable.search')}
+        aria-label={$_("datatable.search")}
-        class="mb-4" />
+        class="mb-4"
+      />
       <div class="h-12">
         <GenerateSponsoringContracts
           bind:sponsoring_contracts_show
-            bind:generate_orgs />
+          bind:generate_orgs
-        <GenerateRunnerCards
+        />
-            bind:cards_show
+        <GenerateRunnerCards bind:cards_show bind:generate_orgs />
-            bind:generate_orgs />
+        <GenerateRunnerCertificates bind:certificates_show bind:generate_orgs />
-        <GenerateRunnerCertificates
-            bind:certificates_show
-            bind:generate_orgs />
       </div>
       <div
-        class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
+        class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll"
+      >
         <table class="divide-y divide-gray-200 w-full">
           <thead class="bg-gray-50">
-            <tr>
+            <tr class="odd:bg-white even:bg-gray-100">
               <th
                 scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-                <span
+              >
+                <button
                   on:click={() => {
-                    const newstate = !current_organizations.some((r) => r.is_selected === true);
+                    const newstate = !current_organizations.some(
+                      (r) => r.is_selected === true
+                    );
                     current_organizations = current_organizations.map((r) => {
                       r.is_selected = newstate;
                       return r;
                     });
                   }}
-                  class="underline cursor-pointer select-none">{#if current_organizations.some((r) => r.is_selected === true)}
+                  class="underline cursor-pointer select-none"
-                    {$_('deselect-all')}
+                  >{#if current_organizations.some((r) => r.is_selected === true)}
-                  {:else}{$_('select-all')}{/if}
+                    {$_("deselect-all")}
-                </span>
+                  {:else}{$_("select-all")}{/if}
+                </button>
               </th>
               <th
                 scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-                {$_('name')}
+              >
+                {$_("name")}
               </th>
               <th
                 scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-                {$_('address')}
+              >
+                {$_("address")}
               </th>
               <th
                 scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-                {$_('contact')}
+              >
+                {$_("contact")}
               </th>
               <th scope="col" class="relative px-6 py-3">
-                <span class="sr-only">{$_('action')}</span>
+                <span class="sr-only">{$_("action")}</span>
               </th>
             </tr>
           </thead>
@@ -110,12 +123,16 @@
                 .toString()
                 .toLowerCase()
                 .includes(searchvalue)}
-                <tr data-rowid="org_{o.id}">
+                <tr
+                  class="odd:bg-white even:bg-gray-100"
+                  data-rowid="org_{o.id}"
+                >
                   <td class="px-6 py-4 whitespace-nowrap">
                     <input
                       bind:checked={o.is_selected}
                       type="checkbox"
-                      class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
+                      class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+                    />
                   </td>
                   <td class="px-6 py-4 whitespace-nowrap">
                     <div class="flex items-center">
@@ -148,34 +165,41 @@
                           {#if o.contact}
                             <a
                               href="../contacts/{o.contact.id}"
-                              class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{o.contact.firstname}
+                              class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
-                              {o.contact.middlename || ''}
+                              >{o.contact.firstname}
-                              {o.contact.lastname}</a>
+                              {o.contact.middlename || ""}
-                          {:else}{$_('no-contact-specified')}{/if}
+                              {o.contact.lastname}</a
+                            >
+                          {:else}{$_("no-contact-specified")}{/if}
                         </div>
                       </div>
                     </div>
                   </td>
                   {#if active_deletes[o.id] === true}
                     <td
-                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
+                    >
                       <button
                         on:click={() => {
                           active_deletes[o.id] = false;
                         }}
                         tabindex="0"
-                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
+                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
+                        >{$_("cancel-delete")}</button
+                      >
                       <button
                         on:click={() => {
-                          RunnerOrganizationService.runnerOrganizationControllerRemove(o.id, false)
+                          toast.loading($_("deleting-organization"));
+                          RunnerOrganizationService.runnerOrganizationControllerRemove(
+                            o.id,
+                            false
+                          )
                             .then((resp) => {
-                              current_organizations = current_organizations.filter((obj) => obj.id !== o.id);
+                              current_organizations =
-                              Toastify({
+                                current_organizations.filter(
-                                text: 'Organization deleted',
+                                  (obj) => obj.id !== o.id
-                                duration: 500,
+                                );
-                                backgroundColor:
+                              toast($_("organization-deleted"));
-                                  'linear-gradient(to right, #00b09b, #96c93d)',
-                              }).showToast();
                             })
                             .catch((err) => {
                               modal_open = true;
@@ -183,21 +207,28 @@
                             });
                         }}
                         tabindex="0"
-                        class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
+                        class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
+                        >{$_("confirm-delete")}</button
+                      >
                     </td>
                   {:else}
                     <td
-                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
+                    >
                       <a
                         href="./{o.id}"
-                        class="text-indigo-600 hover:text-indigo-900">{$_('details')}</a>
+                        class="text-indigo-600 hover:text-indigo-900"
-                      {#if store.state.jwtinfo.userdetails.permissions.includes('ORGANIZATION:DELETE')}
+                        >{$_("details")}</a
+                      >
+                      {#if store.state.jwtinfo.userdetails.permissions.includes("ORGANIZATION:DELETE")}
                         <button
                           on:click={() => {
                             active_deletes[o.id] = true;
                           }}
                           tabindex="0"
-                          class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('delete')}</button>
+                          class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
+                          >{$_("delete")}</button
+                        >
                       {/if}
                     </td>
                   {/if}
@@ -211,7 +242,7 @@
   {:catch error}
     <div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
       <span class="inline-block align-middle mr-8">
-        <b class="capitalize">{$_('general_promise_error')}</b>
+        <b class="capitalize">{$_("general_promise_error")}</b>
         {error}
       </span>
     </div>

src/components/orgs/Orgs.svelte

@@ -11,32 +11,34 @@
 
 <section class="container p-5">
   <span class="mb-1 text-3xl font-extrabold leading-tight">
-    {$_('organizations')}
+    {$_("organizations")}
-    {#if store.state.jwtinfo.userdetails.permissions.includes('ORGANIZATION:CREATE')}
+    {#if store.state.jwtinfo.userdetails.permissions.includes("ORGANIZATION:CREATE")}
       <button
         on:click={() => {
           modal_open = true;
         }}
         type="button"
-        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
+        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
-        {$_('create-organization')}
+      >
+        {$_("create-organization")}
       </button>
     {/if}
-    {#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:IMPORT')}
+    {#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:IMPORT")}
       <button
         on:click={() => {
           import_modal_open = true;
         }}
         type="button"
-        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
+        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
-        {$_('import-runners')}
+      >
+        {$_("import-runners")}
       </button>
     {/if}
   </span>
   <OrgOverview bind:current_organizations />
 </section>
 
-{#if store.state.jwtinfo.userdetails.permissions.includes('ORGANIZATION:CREATE')}
+{#if store.state.jwtinfo.userdetails.permissions.includes("ORGANIZATION:CREATE")}
   <AddOrgModal bind:current_organizations bind:modal_open />
   <ImportRunnerModal
     on:cancelDelete={(event) => {
@@ -47,5 +49,6 @@
     passed_orgs={current_organizations}
     opened_from="OrgOverview"
     current_runners={[]}
-    bind:import_modal_open />
+    bind:import_modal_open
+  />
 {/if}

src/components/orgs/OrgsEmptyState.svelte

@@ -9,9 +9,9 @@
 <div class="text-center items-center justify-center">
   <p class="mb-16 text-lg text-gray-500">
     <img class="w-full h-44" src={org_empty} alt="" />
-    <span
+    <span class="font-bold">{$_("there-are-no-organizations-added-yet")}</span
-      class="font-bold">{$_('there-are-no-organizations-added-yet')}</span><br />
+    ><br />
-    <span>{$_('add-your-first-organization')}</span>
+    <span>{$_("add-your-first-organization")}</span>
   </p>
 </div>
 

src/components/pdf_generation/GenerateRunnerCards.svelte

@@ -5,7 +5,7 @@
     RunnerOrganizationService,
     RunnerTeamService,
   } from "@odit/lfk-client-js";
-  import Toastify from "toastify-js";
+
   import { init } from "@paralleldrive/cuid2";
   const createId = init({ length: 10, fingerprint: "lfk-frontend" });
 
@@ -39,10 +39,7 @@
   }
 
   function generateCards(locale) {
-    const toast = Toastify({
+    toast.loading($_("generating-pdf"));
-      text: $_("generating-pdf"),
-      duration: -1,
-    }).showToast();
     fetch(
       `${config.baseurl_documentserver}/cards?locale=${locale}&download=true&key=${config.documentserver_key}`,
       {
@@ -55,13 +52,8 @@
     )
       .then((response) => {
         if (response.status != "200") {
-          toast.hideToast();
+          toast.dismiss();
-          Toastify({
+          toast.error($_("pdf-generation-failed"));
-            text: $_("pdf-generation-failed"),
-            duration: 3500,
-            backgroundColor:
-              "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
-          }).showToast();
         } else {
           return response.blob();
         }
@@ -74,12 +66,8 @@
         document.body.appendChild(a);
         a.click();
         a.remove();
-        toast.hideToast();
+        toast.dismiss();
-        Toastify({
+        toast($_("pdf-successfully-generated"));
-          text: $_("pdf-successfully-generated"),
-          duration: 3500,
-          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-        }).showToast();
       })
       .catch((err) => {
         console.error(err);
@@ -87,10 +75,7 @@
   }
 
   async function generateRunnersCards(locale) {
-    const toast = Toastify({
+    toast.loading($_("generating-pdf"));
-      text: $_("generating-pdf"),
-      duration: -1,
-    }).showToast();
     const current_cards = await RunnerCardService.runnerCardControllerGetAll();
     let cards = [];
     for (let runner of generate_runners) {
@@ -114,13 +99,8 @@
     )
       .then((response) => {
         if (response.status != "200") {
-          toast.hideToast();
+          toast.dismiss();
-          Toastify({
+          toast.error($_("pdf-generation-failed"));
-            text: $_("pdf-generation-failed"),
-            duration: 3500,
-            backgroundColor:
-              "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
-          }).showToast();
         } else {
           return response.blob();
         }
@@ -139,21 +119,14 @@
         document.body.appendChild(a);
         a.click();
         a.remove();
-        toast.hideToast();
+        toast.dismiss();
-        Toastify({
+        toast($_("pdf-successfully-generated"));
-          text: $_("pdf-successfully-generated"),
-          duration: 3500,
-          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-        }).showToast();
       })
       .catch((err) => {});
   }
 
   async function generateTeamCards(locale) {
-    const toast = Toastify({
+    toast.loading($_("generating-pdfs"));
-      text: $_("generating-pdfs"),
-      duration: -1,
-    }).showToast();
     let count = 0;
     const current_cards = await RunnerCardService.runnerCardControllerGetAll();
     for (const t of generate_teams) {
@@ -182,13 +155,8 @@
       )
         .then((response) => {
           if (response.status != "200") {
-            toast.hideToast();
+            toast.dismiss();
-            Toastify({
+            toast.error($_("pdf-generation-failed"));
-              text: $_("pdf-generation-failed"),
-              duration: 3500,
-              backgroundColor:
-                "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
-            }).showToast();
           } else {
             return response.blob();
           }
@@ -198,17 +166,15 @@
           const url = window.URL.createObjectURL(blob);
           let a = document.createElement("a");
           a.href = url;
-          a.download = `${$_("runnercards")}_${t.name}-${locale}-${createId()}.pdf`;
+          a.download = `${$_("runnercards")}_${
+            t.name
+          }-${locale}-${createId()}.pdf`;
           document.body.appendChild(a);
           a.click();
           a.remove();
           if (count === generate_teams.length) {
-            toast.hideToast();
+            toast.dismiss();
-            Toastify({
+            toast.success($_("pdfs-successfully-generated"));
-              text: $_("pdfs-successfully-generated"),
-              duration: 3500,
-              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-            }).showToast();
           }
         })
         .catch((err) => {});
@@ -216,10 +182,7 @@
   }
 
   async function generateOrgCards(locale) {
-    const toast = Toastify({
+    toast.loading($_("generating-pdfs"));
-      text: $_("generating-pdfs"),
-      duration: -1,
-    }).showToast();
     const current_cards = await RunnerCardService.runnerCardControllerGetAll();
     let count = 0;
     let count_orgs = 0;
@@ -253,13 +216,8 @@
       )
         .then((response) => {
           if (response.status != "200") {
-            toast.hideToast();
+            toast.dismiss();
-            Toastify({
+            toast.error($_("pdf-generation-failed"));
-              text: $_("pdf-generation-failed"),
-              duration: 3500,
-              backgroundColor:
-                "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
-            }).showToast();
           } else {
             return response.blob();
           }
@@ -268,18 +226,15 @@
           const url = window.URL.createObjectURL(blob);
           let a = document.createElement("a");
           a.href = url;
-          a.download = `${$_("runnercards")}_${o.name}_direct-${locale}-${createId()}.pdf`;
+          a.download = `${$_("runnercards")}_${
+            o.name
+          }_direct-${locale}-${createId()}.pdf`;
           document.body.appendChild(a);
           a.click();
           a.remove();
           if (count === o.teams.length && count_orgs === generate_orgs.length) {
-            toast.hideToast();
+            toast.dismiss();
-            console.log("here");
+            toast.success($_("pdfs-successfully-generated"));
-            Toastify({
-              text: $_("pdfs-successfully-generated"),
-              duration: 3500,
-              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-            }).showToast();
           }
         })
         .catch((err) => {});
@@ -310,13 +265,8 @@
         )
           .then((response) => {
             if (response.status != "200") {
-              toast.hideToast();
+              toast.dismiss();
-              Toastify({
+              toast.error($_("pdf-generation-failed"));
-                text: $_("pdf-generation-failed"),
-                duration: 3500,
-                backgroundColor:
-                  "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
-              }).showToast();
             } else {
               return response.blob();
             }
@@ -335,12 +285,8 @@
               count === o.teams.length &&
               count_orgs === generate_orgs.length
             ) {
-              toast.hideToast();
+              toast.dismiss();
-              Toastify({
+              toast($_("pdfs-successfully-generated"));
-                text: $_("pdfs-successfully-generated"),
-                duration: 3500,
-                backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-              }).showToast();
             }
           })
           .catch((err) => {});

src/components/pdf_generation/GenerateRunnerCertificates.svelte

@@ -5,7 +5,7 @@
     RunnerTeamService,
     RunnerOrganizationService,
   } from "@odit/lfk-client-js";
-  import Toastify from "toastify-js";
+
   import { init } from "@paralleldrive/cuid2";
   const createId = init({ length: 10, fingerprint: "lfk-frontend" });
 
@@ -36,17 +36,13 @@
   }
 
   async function generateRunnerCertificates(locale) {
-    const toast = Toastify({
+    toast.loading($_("generating-pdf"));
-      text: $_("generating-pdf"),
-      duration: -1,
-    }).showToast();
     const current_donations =
       (await DonationService.donationControllerGetAll()) || [];
     let certificateRunners = [];
     for (let runner of generate_runners) {
       runner.distanceDonations =
         current_donations.filter((d) => d.runner?.id == runner.id) || [];
-      console.log(runner.distanceDonations);
       certificateRunners.push(runner);
     }
     fetch(
@@ -61,13 +57,8 @@
     )
       .then((response) => {
         if (response.status != "200") {
-          toast.hideToast();
+          toast.dismiss();
-          Toastify({
+          toast.error($_("pdf-generation-failed"));
-            text: $_("pdf-generation-failed"),
-            duration: 3500,
-            backgroundColor:
-              "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
-          }).showToast();
         } else {
           return response.blob();
         }
@@ -86,21 +77,14 @@
         document.body.appendChild(a);
         a.click();
         a.remove();
-        toast.hideToast();
+        toast.dismiss();
-        Toastify({
+        toast($_("pdf-successfully-generated"));
-          text: $_("pdf-successfully-generated"),
-          duration: 3500,
-          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-        }).showToast();
       })
       .catch((err) => {});
   }
 
   async function generateTeamCertificates(locale) {
-    const toast = Toastify({
+    toast.loading($_("generating-pdfs"));
-      text: $_("generating-pdfs"),
-      duration: -1,
-    }).showToast();
     let count = 0;
     const current_donations =
       (await DonationService.donationControllerGetAll()) || [];
@@ -126,13 +110,8 @@
       )
         .then((response) => {
           if (response.status != "200") {
-            toast.hideToast();
+            toast.dismiss();
-            Toastify({
+            toast.error($_("pdf-generation-failed"));
-              text: $_("pdf-generation-failed"),
-              duration: 3500,
-              backgroundColor:
-                "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
-            }).showToast();
           } else {
             return response.blob();
           }
@@ -142,17 +121,15 @@
           const url = window.URL.createObjectURL(blob);
           let a = document.createElement("a");
           a.href = url;
-          a.download = `${$_("certificates")}_${t.name}-${locale}-${createId()}.pdf`;
+          a.download = `${$_("certificates")}_${
+            t.name
+          }-${locale}-${createId()}.pdf`;
           document.body.appendChild(a);
           a.click();
           a.remove();
           if (count === generate_teams.length) {
-            toast.hideToast();
+            toast.dismiss();
-            Toastify({
+            toast.success($_("pdfs-successfully-generated"));
-              text: $_("pdfs-successfully-generated"),
-              duration: 3500,
-              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-            }).showToast();
           }
         })
         .catch((err) => {});
@@ -160,10 +137,7 @@
   }
 
   async function generateOrgCertificates(locale) {
-    const toast = Toastify({
+    toast.loading($_("generating-pdfs"));
-      text: $_("generating-pdfs"),
-      duration: -1,
-    }).showToast();
     const current_donations =
       (await DonationService.donationControllerGetAll()) || [];
     let count = 0;
@@ -194,13 +168,8 @@
       )
         .then((response) => {
           if (response.status != "200") {
-            toast.hideToast();
+            toast.dismiss();
-            Toastify({
+            toast.error($_("pdf-generation-failed"));
-              text: $_("pdf-generation-failed"),
-              duration: 3500,
-              backgroundColor:
-                "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
-            }).showToast();
           } else {
             return response.blob();
           }
@@ -209,18 +178,15 @@
           const url = window.URL.createObjectURL(blob);
           let a = document.createElement("a");
           a.href = url;
-          a.download = `${$_("certificates")}_${o.name}-${locale}-${createId()}.pdf`;
+          a.download = `${$_("certificates")}_${
+            o.name
+          }-${locale}-${createId()}.pdf`;
           document.body.appendChild(a);
           a.click();
           a.remove();
           if (count === o.teams.length && count_orgs === generate_orgs.length) {
-            toast.hideToast();
+            toast.dismiss();
-            console.log("here");
+            toast.success($_("pdfs-successfully-generated"));
-            Toastify({
-              text: $_("pdfs-successfully-generated"),
-              duration: 3500,
-              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-            }).showToast();
           }
         })
         .catch((err) => {});
@@ -247,13 +213,8 @@
         )
           .then((response) => {
             if (response.status != "200") {
-              toast.hideToast();
+              toast.dismiss();
-              Toastify({
+              toast.error($_("pdf-generation-failed"));
-                text: $_("pdf-generation-failed"),
-                duration: 3500,
-                backgroundColor:
-                  "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
-              }).showToast();
             } else {
               return response.blob();
             }
@@ -272,12 +233,8 @@
               count === o.teams.length &&
               count_orgs === generate_orgs.length
             ) {
-              toast.hideToast();
+              toast.dismiss();
-              Toastify({
+              toast($_("pdfs-successfully-generated"));
-                text: $_("pdfs-successfully-generated"),
-                duration: 3500,
-                backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-              }).showToast();
             }
           })
           .catch((err) => {});

src/components/pdf_generation/GenerateSponsoringContracts.svelte

@@ -4,8 +4,9 @@
     RunnerOrganizationService,
     RunnerTeamService,
   } from "@odit/lfk-client-js";
-  import Toastify from "toastify-js";
+
   import { init } from "@paralleldrive/cuid2";
+  import toast from "svelte-french-toast";
   const createId = init({ length: 10, fingerprint: "lfk-frontend" });
 
   export let sponsoring_contracts_show = false;
@@ -35,10 +36,7 @@
   }
 
   async function generateTeamContracts(locale) {
-    const toast = Toastify({
+    toast.loading($_("generating-pdfs"));
-      text: $_("generating-pdfs"),
-      duration: -1,
-    }).showToast();
     let count = 0;
     for (const t of generate_teams) {
       count++;
@@ -57,13 +55,8 @@
       )
         .then((response) => {
           if (response.status != "200") {
-            toast.hideToast();
+            toast.dismiss();
-            Toastify({
+            toast.error($_("pdf-generation-failed"));
-              text: $_("pdf-generation-failed"),
-              duration: 3500,
-              backgroundColor:
-                "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
-            }).showToast();
           } else {
             return response.blob();
           }
@@ -72,17 +65,15 @@
           const url = window.URL.createObjectURL(blob);
           let a = document.createElement("a");
           a.href = url;
-          a.download = `${$_("sponsorings")}_${t.name}-${locale}-${createId()}.pdf`;
+          a.download = `${$_("sponsorings")}_${
+            t.name
+          }-${locale}-${createId()}.pdf`;
           document.body.appendChild(a);
           a.click();
           a.remove();
           if (count === generate_teams.length) {
-            toast.hideToast();
+            toast.dismiss();
-            Toastify({
+            toast.success($_("pdfs-successfully-generated"));
-              text: $_("pdfs-successfully-generated"),
-              duration: 3500,
-              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-            }).showToast();
           }
         })
         .catch((err) => {});
@@ -90,10 +81,7 @@
   }
 
   async function generateOrgContracts(locale) {
-    const toast = Toastify({
+    toast.loading($_("generating-pdf"));
-      text: $_("generating-pdf"),
-      duration: -1,
-    }).showToast();
     let count_orgs = 0;
     for (const o of generate_orgs) {
       count_orgs++;
@@ -115,13 +103,8 @@
       )
         .then((response) => {
           if (response.status != "200") {
-            toast.hideToast();
+            toast.dismiss();
-            Toastify({
+            toast.error($_("pdf-generation-failed"));
-              text: $_("pdf-generation-failed"),
-              duration: 3500,
-              backgroundColor:
-                "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
-            }).showToast();
           } else {
             return response.blob();
           }
@@ -130,18 +113,15 @@
           const url = window.URL.createObjectURL(blob);
           let a = document.createElement("a");
           a.href = url;
-          a.download = `${$_("sponsorings")}_${o.name}_direct-${locale}-${createId()}.pdf`;
+          a.download = `${$_("sponsorings")}_${
+            o.name
+          }_direct-${locale}-${createId()}.pdf`;
           document.body.appendChild(a);
           a.click();
           a.remove();
           if (count === o.teams.length && count_orgs === generate_orgs.length) {
-            toast.hideToast();
+            toast.dismiss();
-            console.log("here");
+            toast.success($_("pdfs-successfully-generated"));
-            Toastify({
-              text: $_("pdfs-successfully-generated"),
-              duration: 3500,
-              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-            }).showToast();
           }
         })
         .catch((err) => {});
@@ -162,13 +142,8 @@
         )
           .then((response) => {
             if (response.status != "200") {
-              toast.hideToast();
+              toast.dismiss();
-              Toastify({
+              toast.error($_("pdf-generation-failed"));
-                text: $_("pdf-generation-failed"),
-                duration: 3500,
-                backgroundColor:
-                  "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
-              }).showToast();
             } else {
               return response.blob();
             }
@@ -187,12 +162,8 @@
               count === o.teams.length &&
               count_orgs === generate_orgs.length
             ) {
-              toast.hideToast();
+              toast.dismiss();
-              Toastify({
+              toast($_("pdfs-successfully-generated"));
-                text: $_("pdfs-successfully-generated"),
-                duration: 3500,
-                backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-              }).showToast();
             }
           })
           .catch((err) => {});
@@ -201,10 +172,7 @@
   }
 
   function generateRunnerContracts(locale) {
-    const toast = Toastify({
+    toast.loading($_("generating-pdf"));
-      text: $_("generating-pdf"),
-      duration: -1,
-    }).showToast();
     fetch(
       `${config.baseurl_documentserver}/contracts?locale=${locale}&download=true&key=${config.documentserver_key}`,
       {
@@ -217,13 +185,8 @@
     )
       .then((response) => {
         if (response.status != "200") {
-          toast.hideToast();
+          toast.dismiss();
-          Toastify({
+          toast.error($_("pdf-generation-failed"));
-            text: $_("pdf-generation-failed"),
-            duration: 3500,
-            backgroundColor:
-              "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
-          }).showToast();
         } else {
           return response.blob();
         }
@@ -241,12 +204,8 @@
         document.body.appendChild(a);
         a.click();
         a.remove();
-        toast.hideToast();
+        toast.dismiss();
-        Toastify({
+        toast($_("pdf-successfully-generated"));
-          text: $_("pdf-successfully-generated"),
-          duration: 3500,
-          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-        }).showToast();
       })
       .catch((err) => {
         console.error(err);

src/components/presets/Avatars.svelte

@@ -3,78 +3,90 @@
   <img
     alt=""
     src="https://gustui.s3.amazonaws.com/avatar.png"
-    class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
+    class="absolute left-0 top-0 w-full h-full rounded-full object-cover"
+  />
 </div>
 <div class="relative rounded-full w-8 h-8">
   <img
     alt=""
     src="https://gustui.s3.amazonaws.com/avatar.png"
-    class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
+    class="absolute left-0 top-0 w-full h-full rounded-full object-cover"
+  />
 </div>
 <div class="relative rounded-full w-12 h-12">
   <img
     alt=""
     src="https://gustui.s3.amazonaws.com/avatar.png"
-    class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
+    class="absolute left-0 top-0 w-full h-full rounded-full object-cover"
+  />
 </div>
 <div class="relative rounded-full w-16 h-16">
   <img
     alt=""
     src="https://gustui.s3.amazonaws.com/avatar.png"
-    class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
+    class="absolute left-0 top-0 w-full h-full rounded-full object-cover"
+  />
 </div>
 <div class="relative rounded-full w-20 h-20">
   <img
     alt=""
     src="https://gustui.s3.amazonaws.com/avatar.png"
-    class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
+    class="absolute left-0 top-0 w-full h-full rounded-full object-cover"
+  />
 </div>
 <div class="relative rounded-full w-24 h-24">
   <img
     alt=""
     src="https://gustui.s3.amazonaws.com/avatar.png"
-    class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
+    class="absolute left-0 top-0 w-full h-full rounded-full object-cover"
+  />
 </div>
 <h3 class="text-lg">Status Avatars</h3>
 <div class="relative rounded-full w-4 h-4">
   <img
     alt=""
     src="https://gustui.s3.amazonaws.com/avatar.png"
-    class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
+    class="absolute left-0 top-0 w-full h-full rounded-full object-cover"
+  />
   <div class="absolute rounded-full right-0 bottom-0 w-1 h-1 bg-gray-200" />
 </div>
 <div class="relative rounded-full w-8 h-8">
   <img
     alt=""
     src="https://gustui.s3.amazonaws.com/avatar.png"
-    class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
+    class="absolute left-0 top-0 w-full h-full rounded-full object-cover"
+  />
   <div class="absolute rounded-full right-0 bottom-0 w-2 h-2 bg-green-400" />
 </div>
 <div class="relative rounded-full w-12 h-12">
   <img
     alt=""
     src="https://gustui.s3.amazonaws.com/avatar.png"
-    class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
+    class="absolute left-0 top-0 w-full h-full rounded-full object-cover"
+  />
   <div class="absolute rounded-full right-0 bottom-0 w-4 h-4 bg-red-600" />
 </div>
 <div class="relative rounded-full w-16 h-16">
   <img
     alt=""
     src="https://gustui.s3.amazonaws.com/avatar.png"
-    class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
+    class="absolute left-0 top-0 w-full h-full rounded-full object-cover"
+  />
   <div class="absolute rounded-full right-0 bottom-0 w-5 h-5 bg-gray-200" />
 </div>
 <div class="relative rounded-full w-20 h-20">
   <img
     alt=""
     src="https://gustui.s3.amazonaws.com/avatar.png"
-    class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
+    class="absolute left-0 top-0 w-full h-full rounded-full object-cover"
+  />
   <div class="absolute rounded-full right-0 bottom-0 w-6 h-6 bg-green-400" />
 </div>
 <div class="relative rounded-full w-24 h-24">
   <img
     alt=""
     src="https://gustui.s3.amazonaws.com/avatar.png"
-    class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
+    class="absolute left-0 top-0 w-full h-full rounded-full object-cover"
+  />
   <div class="absolute rounded-full right-0 bottom-0 w-6 h-6 bg-red-600" />
 </div>

src/components/presets/Badges.svelte

@@ -1,24 +1,36 @@
 <h3 class="text-lg">badges</h3>
 <span
-  class="text-sm font-medium bg-green-100 py-1 px-2 rounded text-green-500 align-middle">Paid</span>
+  class="text-sm font-medium bg-green-100 py-1 px-2 rounded text-green-500 align-middle"
+  >Paid</span
+>
 <span
-  class="text-sm font-medium bg-red-100 py-1 px-2 rounded text-red-500 align-middle">Overdue</span>
+  class="text-sm font-medium bg-red-100 py-1 px-2 rounded text-red-500 align-middle"
-<span
+  >Overdue</span
-  class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-blue-600">Primary</span>
+>
-<span
+<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-blue-600"
-  class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-gray-600">Secondary</span>
+  >Primary</span
-<span
+>
-  class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-green-600">Success</span>
+<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-gray-600"
-<span
+  >Secondary</span
-  class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-red-600">Danger</span>
+>
-<span
+<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-green-600"
-  class="rounded-sm py-1 px-2 text-xs font-medium text-black bg-yellow-400">Warning</span>
+  >Success</span
-<span
+>
-  class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-indigo-300">Info</span>
+<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-red-600"
-<span
+  >Danger</span
-  class="rounded-sm py-1 px-2 text-xs font-medium text-black bg-gray-200">Light</span>
+>
-<span
+<span class="rounded-sm py-1 px-2 text-xs font-medium text-black bg-yellow-400"
-  class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-gray-900">Dark</span>
+  >Warning</span
+>
+<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-indigo-300"
+  >Info</span
+>
+<span class="rounded-sm py-1 px-2 text-xs font-medium text-black bg-gray-200"
+  >Light</span
+>
+<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-gray-900"
+  >Dark</span
+>
 <h3 class="text-lg">closable badges</h3>
 <span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-blue-600">
   Primary

src/components/presets/BreadcrumbNav.svelte

@@ -13,9 +13,10 @@
             class="h-3 w-3 stroke-current"
             height="1em"
             width="1em"
-            xmlns="http://www.w3.org/2000/svg"><path
+            xmlns="http://www.w3.org/2000/svg"
-              d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+            ><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
-            <polyline points="9 22 9 12 15 12 15 22" /></svg>
+            <polyline points="9 22 9 12 15 12 15 22" /></svg
+          >
         </li>
         <li class="flex items-center">
           <a class="mr-2" href="/">Home</a><svg
@@ -28,12 +29,10 @@
             class="h-3 w-3 mr-2 stroke-current"
             height="1em"
             width="1em"
-            xmlns="http://www.w3.org/2000/svg"><line
+            xmlns="http://www.w3.org/2000/svg"
-              x1="5"
+            ><line x1="5" y1="12" x2="19" y2="12" />
-              y1="12"
+            <polyline points="12 5 19 12 12 19" /></svg
-              x2="19"
+          >
-              y2="12" />
-            <polyline points="12 5 19 12 12 19" /></svg>
         </li>
         <li class="flex items-center">
           <a class="mr-2" href="/">Second level</a><svg
@@ -46,12 +45,10 @@
             class="h-3 w-3 mr-2 stroke-current"
             height="1em"
             width="1em"
-            xmlns="http://www.w3.org/2000/svg"><line
+            xmlns="http://www.w3.org/2000/svg"
-              x1="5"
+            ><line x1="5" y1="12" x2="19" y2="12" />
-              y1="12"
+            <polyline points="12 5 19 12 12 19" /></svg
-              x2="19"
+          >
-              y2="12" />
-            <polyline points="12 5 19 12 12 19" /></svg>
         </li>
         <li class="flex items-center">
           <a class="mr-2" href="/">Third level</a>

src/components/presets/ComponentDump.svelte

@@ -29,8 +29,7 @@
 <div class="mb-8">
   <Table />
 </div>
-<div
+<div class="widget w-full p-4 mb-4 rounded-lg bg-white border border-grey-100">
-  class="widget w-full p-4 mb-4 rounded-lg bg-white border border-grey-100">
   <div class="flex flex-row items-center justify-between mb-6">
     <div class="flex flex-col">
       <div class="text-sm font-light text-grey-500">Regular</div>
@@ -40,31 +39,37 @@
   <div class="flex flex-col lg:flex-row lg:flex-wrap w-full lg:space-x-4">
     <div class="w-full lg:w-1/4">
       <div class="form-element">
-        <div class="form-label">Label</div><input
+        <div class="form-label">Label</div>
+        <input
           name="name"
           type="text"
           class="form-input"
-          placeholder="Enter something..." />
+          placeholder="Enter something..."
+        />
         <div class="form-hint">This is a hint</div>
       </div>
     </div>
     <div class="w-full lg:w-1/4">
       <div class="form-element">
-        <div class="form-label">First name</div><input
+        <div class="form-label">First name</div>
+        <input
           name="name"
           type="text"
           class="form-input form-input-invalid"
-          placeholder="john@example.com" />
+          placeholder="john@example.com"
+        />
         <div class="form-error">First name is required</div>
       </div>
     </div>
     <div class="w-full lg:w-1/4">
       <div class="form-element">
-        <div class="form-label">First name</div><input
+        <div class="form-label">First name</div>
+        <input
           name="name"
           type="text"
           class="form-input form-input-valid"
-          placeholder="john@example.com" />
+          placeholder="john@example.com"
+        />
         <div class="form-success">First name is valid</div>
       </div>
     </div>

src/components/presets/ConversionsChart.svelte

@@ -4,31 +4,55 @@
       <div class="text-sm font-light text-grey-500">Conversions</div>
       <div class="text-sm font-bold"><span>This year</span></div>
     </div>
-    <div class="relative"><button
+    <div class="relative">
-        class="btn btn-default btn-circle btn-icon bg-transparent hover:bg-transparent active:bg-transparent relative"><svg
+      <button
-          stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round"
+        class="btn btn-default btn-circle btn-icon bg-transparent hover:bg-transparent active:bg-transparent relative"
-          stroke-linejoin="round" class="stroke-current stroke-1" size="18" height="18" width="18"
+        ><svg
-          xmlns="http://www.w3.org/2000/svg">
+          stroke="currentColor"
-          <circle cx="12" cy="12" r="1"></circle>
+          fill="none"
-          <circle cx="12" cy="5" r="1"></circle>
+          stroke-width="2"
-          <circle cx="12" cy="19" r="1"></circle>
+          viewBox="0 0 24 24"
-        </svg></button>
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="stroke-current stroke-1"
+          size="18"
+          height="18"
+          width="18"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle cx="12" cy="12" r="1" />
+          <circle cx="12" cy="5" r="1" />
+          <circle cx="12" cy="19" r="1" />
+        </svg></button
+      >
       <div class="dropdown absolute top-0 right-0 mt-8">
         <div class="dropdown-content w-48 bottom-start">
           <div class="flex flex-col w-full">
             <ul class="list-none">
-              <li><a
+              <li>
+                <a
                   class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
-                  href="/">Today</a></li>
+                  href="/">Today</a
-              <li><a
+                >
+              </li>
+              <li>
+                <a
                   class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
-                  href="/">This week</a></li>
+                  href="/">This week</a
-              <li><a
+                >
+              </li>
+              <li>
+                <a
                   class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
-                  href="/">This month</a></li>
+                  href="/">This month</a
-              <li><a
+                >
+              </li>
+              <li>
+                <a
                   class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
-                  href="/">This year</a></li>
+                  href="/">This year</a
+                >
+              </li>
             </ul>
           </div>
         </div>
@@ -38,167 +62,418 @@
   <div class="flex flex-row w-full">
     <div style="width:100%;height:240px">
       <div class="recharts-responsive-container" style="width:100%;height:100%">
-        <div class="recharts-wrapper"
+        <div
-          style="position: relative; cursor: default; width: 704px; height: 240px;"><svg
+          class="recharts-wrapper"
-            class="recharts-surface" width="704" height="240" viewBox="0 0 704 240" version="1.1">
+          style="position: relative; cursor: default; width: 704px; height: 240px;"
+        >
+          <svg
+            class="recharts-surface"
+            width="704"
+            height="240"
+            viewBox="0 0 704 240"
+            version="1.1"
+          >
             <defs>
               <clipPath id="recharts3-clip">
-                <rect x="40" y="10" height="190" width="654"></rect>
+                <rect x="40" y="10" height="190" width="654" />
               </clipPath>
             </defs>
-            <g class="recharts-layer recharts-cartesian-axis recharts-xAxis xAxis">
+            <g
+              class="recharts-layer recharts-cartesian-axis recharts-xAxis xAxis"
+            >
               <g class="recharts-cartesian-axis-ticks">
-                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30" x="67.25"
+                <g class="recharts-layer recharts-cartesian-axis-tick"
-                    y="208" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value"
+                  ><text
-                    text-anchor="middle">
+                    width="654"
+                    height="30"
+                    x="67.25"
+                    y="208"
+                    stroke="none"
+                    fill="#666"
+                    class="recharts-text recharts-cartesian-axis-tick-value"
+                    text-anchor="middle"
+                  >
                     <tspan x="67.25" dy="0.71em">Jan</tspan>
-                  </text></g>
+                  </text></g
-                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
+                >
-                    x="121.75" y="208" stroke="none" fill="#666"
+                <g class="recharts-layer recharts-cartesian-axis-tick"
-                    class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
+                  ><text
+                    width="654"
+                    height="30"
+                    x="121.75"
+                    y="208"
+                    stroke="none"
+                    fill="#666"
+                    class="recharts-text recharts-cartesian-axis-tick-value"
+                    text-anchor="middle"
+                  >
                     <tspan x="121.75" dy="0.71em">Feb</tspan>
-                  </text></g>
+                  </text></g
-                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
+                >
-                    x="176.25" y="208" stroke="none" fill="#666"
+                <g class="recharts-layer recharts-cartesian-axis-tick"
-                    class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
+                  ><text
+                    width="654"
+                    height="30"
+                    x="176.25"
+                    y="208"
+                    stroke="none"
+                    fill="#666"
+                    class="recharts-text recharts-cartesian-axis-tick-value"
+                    text-anchor="middle"
+                  >
                     <tspan x="176.25" dy="0.71em">Mar</tspan>
-                  </text></g>
+                  </text></g
-                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
+                >
-                    x="230.75" y="208" stroke="none" fill="#666"
+                <g class="recharts-layer recharts-cartesian-axis-tick"
-                    class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
+                  ><text
+                    width="654"
+                    height="30"
+                    x="230.75"
+                    y="208"
+                    stroke="none"
+                    fill="#666"
+                    class="recharts-text recharts-cartesian-axis-tick-value"
+                    text-anchor="middle"
+                  >
                     <tspan x="230.75" dy="0.71em">Apr</tspan>
-                  </text></g>
+                  </text></g
-                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
+                >
-                    x="285.25" y="208" stroke="none" fill="#666"
+                <g class="recharts-layer recharts-cartesian-axis-tick"
-                    class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
+                  ><text
+                    width="654"
+                    height="30"
+                    x="285.25"
+                    y="208"
+                    stroke="none"
+                    fill="#666"
+                    class="recharts-text recharts-cartesian-axis-tick-value"
+                    text-anchor="middle"
+                  >
                     <tspan x="285.25" dy="0.71em">May</tspan>
-                  </text></g>
+                  </text></g
-                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
+                >
-                    x="339.75" y="208" stroke="none" fill="#666"
+                <g class="recharts-layer recharts-cartesian-axis-tick"
-                    class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
+                  ><text
+                    width="654"
+                    height="30"
+                    x="339.75"
+                    y="208"
+                    stroke="none"
+                    fill="#666"
+                    class="recharts-text recharts-cartesian-axis-tick-value"
+                    text-anchor="middle"
+                  >
                     <tspan x="339.75" dy="0.71em">Jun</tspan>
-                  </text></g>
+                  </text></g
-                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
+                >
-                    x="394.25" y="208" stroke="none" fill="#666"
+                <g class="recharts-layer recharts-cartesian-axis-tick"
-                    class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
+                  ><text
+                    width="654"
+                    height="30"
+                    x="394.25"
+                    y="208"
+                    stroke="none"
+                    fill="#666"
+                    class="recharts-text recharts-cartesian-axis-tick-value"
+                    text-anchor="middle"
+                  >
                     <tspan x="394.25" dy="0.71em">Jul</tspan>
-                  </text></g>
+                  </text></g
-                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
+                >
-                    x="448.75" y="208" stroke="none" fill="#666"
+                <g class="recharts-layer recharts-cartesian-axis-tick"
-                    class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
+                  ><text
+                    width="654"
+                    height="30"
+                    x="448.75"
+                    y="208"
+                    stroke="none"
+                    fill="#666"
+                    class="recharts-text recharts-cartesian-axis-tick-value"
+                    text-anchor="middle"
+                  >
                     <tspan x="448.75" dy="0.71em">Aug</tspan>
-                  </text></g>
+                  </text></g
-                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
+                >
-                    x="503.25" y="208" stroke="none" fill="#666"
+                <g class="recharts-layer recharts-cartesian-axis-tick"
-                    class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
+                  ><text
+                    width="654"
+                    height="30"
+                    x="503.25"
+                    y="208"
+                    stroke="none"
+                    fill="#666"
+                    class="recharts-text recharts-cartesian-axis-tick-value"
+                    text-anchor="middle"
+                  >
                     <tspan x="503.25" dy="0.71em">Sep</tspan>
-                  </text></g>
+                  </text></g
-                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
+                >
-                    x="557.75" y="208" stroke="none" fill="#666"
+                <g class="recharts-layer recharts-cartesian-axis-tick"
-                    class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
+                  ><text
+                    width="654"
+                    height="30"
+                    x="557.75"
+                    y="208"
+                    stroke="none"
+                    fill="#666"
+                    class="recharts-text recharts-cartesian-axis-tick-value"
+                    text-anchor="middle"
+                  >
                     <tspan x="557.75" dy="0.71em">Oct</tspan>
-                  </text></g>
+                  </text></g
-                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
+                >
-                    x="612.25" y="208" stroke="none" fill="#666"
+                <g class="recharts-layer recharts-cartesian-axis-tick"
-                    class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
+                  ><text
+                    width="654"
+                    height="30"
+                    x="612.25"
+                    y="208"
+                    stroke="none"
+                    fill="#666"
+                    class="recharts-text recharts-cartesian-axis-tick-value"
+                    text-anchor="middle"
+                  >
                     <tspan x="612.25" dy="0.71em">Nov</tspan>
-                  </text></g>
+                  </text></g
-                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
+                >
-                    x="666.75" y="208" stroke="none" fill="#666"
+                <g class="recharts-layer recharts-cartesian-axis-tick"
-                    class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
+                  ><text
+                    width="654"
+                    height="30"
+                    x="666.75"
+                    y="208"
+                    stroke="none"
+                    fill="#666"
+                    class="recharts-text recharts-cartesian-axis-tick-value"
+                    text-anchor="middle"
+                  >
                     <tspan x="666.75" dy="0.71em">Dec</tspan>
-                  </text></g>
+                  </text></g
+                >
               </g>
             </g>
-            <g class="recharts-layer recharts-cartesian-axis recharts-yAxis yAxis">
+            <g
+              class="recharts-layer recharts-cartesian-axis recharts-yAxis yAxis"
+            >
               <g class="recharts-cartesian-axis-ticks">
-                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="30" height="190" x="32"
+                <g class="recharts-layer recharts-cartesian-axis-tick"
-                    y="200" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value"
+                  ><text
-                    text-anchor="end">
+                    width="30"
+                    height="190"
+                    x="32"
+                    y="200"
+                    stroke="none"
+                    fill="#666"
+                    class="recharts-text recharts-cartesian-axis-tick-value"
+                    text-anchor="end"
+                  >
                     <tspan x="32" dy="0.355em">0</tspan>
-                  </text></g>
+                  </text></g
-                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="30" height="190" x="32"
+                >
-                    y="152.5" stroke="none" fill="#666"
+                <g class="recharts-layer recharts-cartesian-axis-tick"
-                    class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end">
+                  ><text
+                    width="30"
+                    height="190"
+                    x="32"
+                    y="152.5"
+                    stroke="none"
+                    fill="#666"
+                    class="recharts-text recharts-cartesian-axis-tick-value"
+                    text-anchor="end"
+                  >
                     <tspan x="32" dy="0.355em">65</tspan>
-                  </text></g>
+                  </text></g
-                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="30" height="190" x="32"
+                >
-                    y="105" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value"
+                <g class="recharts-layer recharts-cartesian-axis-tick"
-                    text-anchor="end">
+                  ><text
+                    width="30"
+                    height="190"
+                    x="32"
+                    y="105"
+                    stroke="none"
+                    fill="#666"
+                    class="recharts-text recharts-cartesian-axis-tick-value"
+                    text-anchor="end"
+                  >
                     <tspan x="32" dy="0.355em">130</tspan>
-                  </text></g>
+                  </text></g
-                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="30" height="190" x="32"
+                >
-                    y="57.5" stroke="none" fill="#666"
+                <g class="recharts-layer recharts-cartesian-axis-tick"
-                    class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end">
+                  ><text
+                    width="30"
+                    height="190"
+                    x="32"
+                    y="57.5"
+                    stroke="none"
+                    fill="#666"
+                    class="recharts-text recharts-cartesian-axis-tick-value"
+                    text-anchor="end"
+                  >
                     <tspan x="32" dy="0.355em">195</tspan>
-                  </text></g>
+                  </text></g
-                <g class="recharts-layer recharts-cartesian-axis-tick"><text width="30" height="190" x="32"
+                >
-                    y="10" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value"
+                <g class="recharts-layer recharts-cartesian-axis-tick"
-                    text-anchor="end">
+                  ><text
+                    width="30"
+                    height="190"
+                    x="32"
+                    y="10"
+                    stroke="none"
+                    fill="#666"
+                    class="recharts-text recharts-cartesian-axis-tick-value"
+                    text-anchor="end"
+                  >
                     <tspan x="32" dy="0.355em">260</tspan>
-                  </text></g>
+                  </text></g
+                >
               </g>
             </g>
             <g class="recharts-layer recharts-bar">
               <g class="recharts-layer recharts-bar-rectangles">
                 <g class="recharts-layer">
                   <g class="recharts-layer recharts-bar-rectangle">
-                    <path fill="#90caf9" width="10" height="119.11538461538461" x="55" y="80.88461538461539"
+                    <path
-                      radius="0" class="recharts-rectangle"
+                      fill="#90caf9"
-                      d="M 55,80.88461538461539 h 10 v 119.11538461538461 h -10 Z"></path>
+                      width="10"
+                      height="119.11538461538461"
+                      x="55"
+                      y="80.88461538461539"
+                      radius="0"
+                      class="recharts-rectangle"
+                      d="M 55,80.88461538461539 h 10 v 119.11538461538461 h -10 Z"
+                    />
                   </g>
                   <g class="recharts-layer recharts-bar-rectangle">
-                    <path fill="#90caf9" width="10" height="95" x="109.5" y="105" radius="0"
+                    <path
-                      class="recharts-rectangle" d="M 109.5,105 h 10 v 95 h -10 Z"></path>
+                      fill="#90caf9"
+                      width="10"
+                      height="95"
+                      x="109.5"
+                      y="105"
+                      radius="0"
+                      class="recharts-rectangle"
+                      d="M 109.5,105 h 10 v 95 h -10 Z"
+                    />
                   </g>
                   <g class="recharts-layer recharts-bar-rectangle">
-                    <path fill="#90caf9" width="10" height="122.03846153846155" x="164" y="77.96153846153845"
+                    <path
-                      radius="0" class="recharts-rectangle"
+                      fill="#90caf9"
-                      d="M 164,77.96153846153845 h 10 v 122.03846153846155 h -10 Z"></path>
+                      width="10"
+                      height="122.03846153846155"
+                      x="164"
+                      y="77.96153846153845"
+                      radius="0"
+                      class="recharts-rectangle"
+                      d="M 164,77.96153846153845 h 10 v 122.03846153846155 h -10 Z"
+                    />
                   </g>
                   <g class="recharts-layer recharts-bar-rectangle">
-                    <path fill="#90caf9" width="10" height="81.11538461538461" x="218.5"
+                    <path
-                      y="118.88461538461539" radius="0" class="recharts-rectangle"
+                      fill="#90caf9"
-                      d="M 218.5,118.88461538461539 h 10 v 81.11538461538461 h -10 Z"></path>
+                      width="10"
+                      height="81.11538461538461"
+                      x="218.5"
+                      y="118.88461538461539"
+                      radius="0"
+                      class="recharts-rectangle"
+                      d="M 218.5,118.88461538461539 h 10 v 81.11538461538461 h -10 Z"
+                    />
                   </g>
                   <g class="recharts-layer recharts-bar-rectangle">
-                    <path fill="#90caf9" width="10" height="114" x="273" y="86" radius="0"
+                    <path
-                      class="recharts-rectangle" d="M 273,86 h 10 v 114 h -10 Z"></path>
+                      fill="#90caf9"
+                      width="10"
+                      height="114"
+                      x="273"
+                      y="86"
+                      radius="0"
+                      class="recharts-rectangle"
+                      d="M 273,86 h 10 v 114 h -10 Z"
+                    />
                   </g>
                   <g class="recharts-layer recharts-bar-rectangle">
-                    <path fill="#90caf9" width="10" height="117.65384615384616" x="327.5"
+                    <path
-                      y="82.34615384615384" radius="0" class="recharts-rectangle"
+                      fill="#90caf9"
-                      d="M 327.5,82.34615384615384 h 10 v 117.65384615384616 h -10 Z"></path>
+                      width="10"
+                      height="117.65384615384616"
+                      x="327.5"
+                      y="82.34615384615384"
+                      radius="0"
+                      class="recharts-rectangle"
+                      d="M 327.5,82.34615384615384 h 10 v 117.65384615384616 h -10 Z"
+                    />
                   </g>
                   <g class="recharts-layer recharts-bar-rectangle">
-                    <path fill="#90caf9" width="10" height="103.76923076923076" x="382" y="96.23076923076924"
+                    <path
-                      radius="0" class="recharts-rectangle"
+                      fill="#90caf9"
-                      d="M 382,96.23076923076924 h 10 v 103.76923076923076 h -10 Z"></path>
+                      width="10"
+                      height="103.76923076923076"
+                      x="382"
+                      y="96.23076923076924"
+                      radius="0"
+                      class="recharts-rectangle"
+                      d="M 382,96.23076923076924 h 10 v 103.76923076923076 h -10 Z"
+                    />
                   </g>
                   <g class="recharts-layer recharts-bar-rectangle">
-                    <path fill="#90caf9" width="10" height="92.80769230769232" x="436.5"
+                    <path
-                      y="107.19230769230768" radius="0" class="recharts-rectangle"
+                      fill="#90caf9"
-                      d="M 436.5,107.19230769230768 h 10 v 92.80769230769232 h -10 Z"></path>
+                      width="10"
+                      height="92.80769230769232"
+                      x="436.5"
+                      y="107.19230769230768"
+                      radius="0"
+                      class="recharts-rectangle"
+                      d="M 436.5,107.19230769230768 h 10 v 92.80769230769232 h -10 Z"
+                    />
                   </g>
                   <g class="recharts-layer recharts-bar-rectangle">
-                    <path fill="#90caf9" width="10" height="92.80769230769232" x="491" y="107.19230769230768"
+                    <path
-                      radius="0" class="recharts-rectangle"
+                      fill="#90caf9"
-                      d="M 491,107.19230769230768 h 10 v 92.80769230769232 h -10 Z"></path>
+                      width="10"
+                      height="92.80769230769232"
+                      x="491"
+                      y="107.19230769230768"
+                      radius="0"
+                      class="recharts-rectangle"
+                      d="M 491,107.19230769230768 h 10 v 92.80769230769232 h -10 Z"
+                    />
                   </g>
                   <g class="recharts-layer recharts-bar-rectangle">
-                    <path fill="#90caf9" width="10" height="127.8846153846154" x="545.5" y="72.1153846153846"
+                    <path
-                      radius="0" class="recharts-rectangle"
+                      fill="#90caf9"
-                      d="M 545.5,72.1153846153846 h 10 v 127.8846153846154 h -10 Z"></path>
+                      width="10"
+                      height="127.8846153846154"
+                      x="545.5"
+                      y="72.1153846153846"
+                      radius="0"
+                      class="recharts-rectangle"
+                      d="M 545.5,72.1153846153846 h 10 v 127.8846153846154 h -10 Z"
+                    />
                   </g>
                   <g class="recharts-layer recharts-bar-rectangle">
-                    <path fill="#90caf9" width="10" height="105.23076923076924" x="600" y="94.76923076923076"
+                    <path
-                      radius="0" class="recharts-rectangle"
+                      fill="#90caf9"
-                      d="M 600,94.76923076923076 h 10 v 105.23076923076924 h -10 Z"></path>
+                      width="10"
+                      height="105.23076923076924"
+                      x="600"
+                      y="94.76923076923076"
+                      radius="0"
+                      class="recharts-rectangle"
+                      d="M 600,94.76923076923076 h 10 v 105.23076923076924 h -10 Z"
+                    />
                   </g>
                   <g class="recharts-layer recharts-bar-rectangle">
-                    <path fill="#90caf9" width="10" height="115.46153846153845" x="654.5"
+                    <path
-                      y="84.53846153846155" radius="0" class="recharts-rectangle"
+                      fill="#90caf9"
-                      d="M 654.5,84.53846153846155 h 10 v 115.46153846153845 h -10 Z"></path>
+                      width="10"
+                      height="115.46153846153845"
+                      x="654.5"
+                      y="84.53846153846155"
+                      radius="0"
+                      class="recharts-rectangle"
+                      d="M 654.5,84.53846153846155 h 10 v 115.46153846153845 h -10 Z"
+                    />
                   </g>
                 </g>
               </g>
@@ -207,74 +482,161 @@
               <g class="recharts-layer recharts-bar-rectangles">
                 <g class="recharts-layer">
                   <g class="recharts-layer recharts-bar-rectangle">
-                    <path fill="#1e88e5" width="10" height="112.53846153846155" x="69" y="87.46153846153845"
+                    <path
-                      radius="0" class="recharts-rectangle"
+                      fill="#1e88e5"
-                      d="M 69,87.46153846153845 h 10 v 112.53846153846155 h -10 Z"></path>
+                      width="10"
+                      height="112.53846153846155"
+                      x="69"
+                      y="87.46153846153845"
+                      radius="0"
+                      class="recharts-rectangle"
+                      d="M 69,87.46153846153845 h 10 v 112.53846153846155 h -10 Z"
+                    />
                   </g>
                   <g class="recharts-layer recharts-bar-rectangle">
-                    <path fill="#1e88e5" width="10" height="151.26923076923077" x="123.5"
+                    <path
-                      y="48.730769230769226" radius="0" class="recharts-rectangle"
+                      fill="#1e88e5"
-                      d="M 123.5,48.730769230769226 h 10 v 151.26923076923077 h -10 Z"></path>
+                      width="10"
+                      height="151.26923076923077"
+                      x="123.5"
+                      y="48.730769230769226"
+                      radius="0"
+                      class="recharts-rectangle"
+                      d="M 123.5,48.730769230769226 h 10 v 151.26923076923077 h -10 Z"
+                    />
                   </g>
                   <g class="recharts-layer recharts-bar-rectangle">
-                    <path fill="#1e88e5" width="10" height="181.23076923076923" x="178" y="18.769230769230774"
+                    <path
-                      radius="0" class="recharts-rectangle"
+                      fill="#1e88e5"
-                      d="M 178,18.769230769230774 h 10 v 181.23076923076923 h -10 Z"></path>
+                      width="10"
+                      height="181.23076923076923"
+                      x="178"
+                      y="18.769230769230774"
+                      radius="0"
+                      class="recharts-rectangle"
+                      d="M 178,18.769230769230774 h 10 v 181.23076923076923 h -10 Z"
+                    />
                   </g>
                   <g class="recharts-layer recharts-bar-rectangle">
-                    <path fill="#1e88e5" width="10" height="165.8846153846154" x="232.5" y="34.11538461538461"
+                    <path
-                      radius="0" class="recharts-rectangle"
+                      fill="#1e88e5"
-                      d="M 232.5,34.11538461538461 h 10 v 165.8846153846154 h -10 Z"></path>
+                      width="10"
+                      height="165.8846153846154"
+                      x="232.5"
+                      y="34.11538461538461"
+                      radius="0"
+                      class="recharts-rectangle"
+                      d="M 232.5,34.11538461538461 h 10 v 165.8846153846154 h -10 Z"
+                    />
                   </g>
                   <g class="recharts-layer recharts-bar-rectangle">
-                    <path fill="#1e88e5" width="10" height="156.38461538461536" x="287" y="43.61538461538464"
+                    <path
-                      radius="0" class="recharts-rectangle"
+                      fill="#1e88e5"
-                      d="M 287,43.61538461538464 h 10 v 156.38461538461536 h -10 Z"></path>
+                      width="10"
+                      height="156.38461538461536"
+                      x="287"
+                      y="43.61538461538464"
+                      radius="0"
+                      class="recharts-rectangle"
+                      d="M 287,43.61538461538464 h 10 v 156.38461538461536 h -10 Z"
+                    />
                   </g>
                   <g class="recharts-layer recharts-bar-rectangle">
-                    <path fill="#1e88e5" width="10" height="118.38461538461539" x="341.5"
+                    <path
-                      y="81.61538461538461" radius="0" class="recharts-rectangle"
+                      fill="#1e88e5"
-                      d="M 341.5,81.61538461538461 h 10 v 118.38461538461539 h -10 Z"></path>
+                      width="10"
+                      height="118.38461538461539"
+                      x="341.5"
+                      y="81.61538461538461"
+                      radius="0"
+                      class="recharts-rectangle"
+                      d="M 341.5,81.61538461538461 h 10 v 118.38461538461539 h -10 Z"
+                    />
                   </g>
                   <g class="recharts-layer recharts-bar-rectangle">
-                    <path fill="#1e88e5" width="10" height="138.84615384615384" x="396" y="61.15384615384616"
+                    <path
-                      radius="0" class="recharts-rectangle"
+                      fill="#1e88e5"
-                      d="M 396,61.15384615384616 h 10 v 138.84615384615384 h -10 Z"></path>
+                      width="10"
+                      height="138.84615384615384"
+                      x="396"
+                      y="61.15384615384616"
+                      radius="0"
+                      class="recharts-rectangle"
+                      d="M 396,61.15384615384616 h 10 v 138.84615384615384 h -10 Z"
+                    />
                   </g>
                   <g class="recharts-layer recharts-bar-rectangle">
-                    <path fill="#1e88e5" width="10" height="175.3846153846154" x="450.5"
+                    <path
-                      y="24.615384615384613" radius="0" class="recharts-rectangle"
+                      fill="#1e88e5"
-                      d="M 450.5,24.615384615384613 h 10 v 175.3846153846154 h -10 Z"></path>
+                      width="10"
+                      height="175.3846153846154"
+                      x="450.5"
+                      y="24.615384615384613"
+                      radius="0"
+                      class="recharts-rectangle"
+                      d="M 450.5,24.615384615384613 h 10 v 175.3846153846154 h -10 Z"
+                    />
                   </g>
                   <g class="recharts-layer recharts-bar-rectangle">
-                    <path fill="#1e88e5" width="10" height="155.65384615384613" x="505" y="44.34615384615387"
+                    <path
-                      radius="0" class="recharts-rectangle"
+                      fill="#1e88e5"
-                      d="M 505,44.34615384615387 h 10 v 155.65384615384613 h -10 Z"></path>
+                      width="10"
+                      height="155.65384615384613"
+                      x="505"
+                      y="44.34615384615387"
+                      radius="0"
+                      class="recharts-rectangle"
+                      d="M 505,44.34615384615387 h 10 v 155.65384615384613 h -10 Z"
+                    />
                   </g>
                   <g class="recharts-layer recharts-bar-rectangle">
-                    <path fill="#1e88e5" width="10" height="179.76923076923077" x="559.5"
+                    <path
-                      y="20.230769230769226" radius="0" class="recharts-rectangle"
+                      fill="#1e88e5"
-                      d="M 559.5,20.230769230769226 h 10 v 179.76923076923077 h -10 Z"></path>
+                      width="10"
+                      height="179.76923076923077"
+                      x="559.5"
+                      y="20.230769230769226"
+                      radius="0"
+                      class="recharts-rectangle"
+                      d="M 559.5,20.230769230769226 h 10 v 179.76923076923077 h -10 Z"
+                    />
                   </g>
                   <g class="recharts-layer recharts-bar-rectangle">
-                    <path fill="#1e88e5" width="10" height="173.19230769230768" x="614" y="26.80769230769232"
+                    <path
-                      radius="0" class="recharts-rectangle"
+                      fill="#1e88e5"
-                      d="M 614,26.80769230769232 h 10 v 173.19230769230768 h -10 Z"></path>
+                      width="10"
+                      height="173.19230769230768"
+                      x="614"
+                      y="26.80769230769232"
+                      radius="0"
+                      class="recharts-rectangle"
+                      d="M 614,26.80769230769232 h 10 v 173.19230769230768 h -10 Z"
+                    />
                   </g>
                   <g class="recharts-layer recharts-bar-rectangle">
-                    <path fill="#1e88e5" width="10" height="146.15384615384616" x="668.5"
+                    <path
-                      y="53.84615384615384" radius="0" class="recharts-rectangle"
+                      fill="#1e88e5"
-                      d="M 668.5,53.84615384615384 h 10 v 146.15384615384616 h -10 Z"></path>
+                      width="10"
+                      height="146.15384615384616"
+                      x="668.5"
+                      y="53.84615384615384"
+                      radius="0"
+                      class="recharts-rectangle"
+                      d="M 668.5,53.84615384615384 h 10 v 146.15384615384616 h -10 Z"
+                    />
                   </g>
                 </g>
               </g>
             </g>
           </svg>
-          <div class="recharts-tooltip-wrapper"
+          <div
-            style="pointer-events: none; visibility: hidden; position: absolute; top: 0px; transform: translate(538.875px, 126px);">
+            class="recharts-tooltip-wrapper"
+            style="pointer-events: none; visibility: hidden; position: absolute; top: 0px; transform: translate(538.875px, 126px);"
+          />
         </div>
-        </div>
+        <div
-        <div style="position:absolute;width:0;height:0;visibility:hidden;display:none"></div>
+          style="position:absolute;width:0;height:0;visibility:hidden;display:none"
+        />
       </div>
     </div>
   </div>

src/components/presets/Pagination.svelte

@@ -1,15 +1,18 @@
 <!-- This example requires Tailwind CSS v2.0+ -->
 <div
-  class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
+  class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6"
+>
   <div class="flex-1 flex justify-between sm:hidden">
     <a
       href="#"
-      class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:text-gray-500">
+      class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:text-gray-500"
+    >
       Previous
     </a>
     <a
       href="#"
-      class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:text-gray-500">
+      class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:text-gray-500"
+    >
       Next
     </a>
   </div>
@@ -28,10 +31,12 @@
     <div>
       <nav
         class="relative z-0 inline-flex shadow-sm -space-x-px"
-        aria-label="Pagination">
+        aria-label="Pagination"
+      >
         <a
           href="#"
-          class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
+          class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
+        >
           <span class="sr-only">Previous</span>
           <!-- Heroicon name: chevron-left -->
           <svg
@@ -39,50 +44,60 @@
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 20 20"
             fill="currentColor"
-            aria-hidden="true">
+            aria-hidden="true"
+          >
             <path
               fill-rule="evenodd"
               d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
-              clip-rule="evenodd" />
+              clip-rule="evenodd"
+            />
           </svg>
         </a>
         <a
           href="#"
-          class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
+          class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50"
+        >
           1
         </a>
         <a
           href="#"
-          class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
+          class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50"
+        >
           2
         </a>
         <a
           href="#"
-          class="hidden md:inline-flex relative items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
+          class="hidden md:inline-flex relative items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50"
+        >
           3
         </a>
         <span
-          class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
+          class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700"
+        >
           ...
         </span>
         <a
           href="#"
-          class="hidden md:inline-flex relative items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
+          class="hidden md:inline-flex relative items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50"
+        >
           8
         </a>
         <a
           href="#"
-          class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
+          class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50"
+        >
           9
         </a>
         <a
           href="#"
-          class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
+          class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50"
+        >
           10
         </a>
         <a
           href="#"
-          class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
+          class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
+        >
           <span class="sr-only">Next</span>
           <!-- Heroicon name: chevron-right -->
           <svg
@@ -90,11 +105,13 @@
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 20 20"
             fill="currentColor"
-            aria-hidden="true">
+            aria-hidden="true"
+          >
             <path
               fill-rule="evenodd"
               d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
-              clip-rule="evenodd" />
+              clip-rule="evenodd"
+            />
           </svg>
         </a>
       </nav>

src/components/presets/Profile.svelte

@@ -7,14 +7,14 @@
       </div>
     </div>
   </div>
-  <div
+  <div class="w-full p-4 mb-4 rounded-lg bg-white border border-grey-100">
-    class="w-full p-4 mb-4 rounded-lg bg-white border border-grey-100">
     <div class="flex flex-row items-center justify-start p-4">
       <div class="flex-shrink-0 w-24">
         <img
           src="/images/faces/m1.png"
           alt="media"
-          class="shadow rounded-full h-20 w-20 shadow-outline mb-2" />
+          class="shadow rounded-full h-20 w-20 shadow-outline mb-2"
+        />
       </div>
       <div class="py-2 px-2">
         <p class="text-base font-bold whitespace-no-wrap">Lucas Smith</p>
@@ -22,7 +22,8 @@
           Vital Database Dude
         </p>
         <div
-          class="flex flex-row items-center justify-start w-full py-1 space-x-2">
+          class="flex flex-row items-center justify-start w-full py-1 space-x-2"
+        >
           <svg
             stroke="currentColor"
             fill="none"
@@ -33,8 +34,11 @@
             class="stroke-current text-xl text-twitter"
             height="1em"
             width="1em"
-            xmlns="http://www.w3.org/2000/svg"><path
+            xmlns="http://www.w3.org/2000/svg"
-              d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z" /></svg><svg
+            ><path
+              d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"
+            /></svg
+          ><svg
             stroke="currentColor"
             fill="none"
             stroke-width="2"
@@ -44,8 +48,11 @@
             class="stroke-current text-xl text-facebook"
             height="1em"
             width="1em"
-            xmlns="http://www.w3.org/2000/svg"><path
+            xmlns="http://www.w3.org/2000/svg"
-              d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" /></svg><svg
+            ><path
+              d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"
+            /></svg
+          ><svg
             stroke="currentColor"
             fill="none"
             stroke-width="2"
@@ -55,21 +62,21 @@
             class="stroke-current text-xl text-instagram"
             height="1em"
             width="1em"
-            xmlns="http://www.w3.org/2000/svg"><rect
+            xmlns="http://www.w3.org/2000/svg"
-              x="2"
+            ><rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
-              y="2"
-              width="20"
-              height="20"
-              rx="5"
-              ry="5" />
             <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
-            <line x1="17.5" y1="6.5" x2="17.5" y2="6.5" /></svg>
+            <line x1="17.5" y1="6.5" x2="17.5" y2="6.5" /></svg
+          >
         </div>
       </div>
       <div class="ml-auto flex-shrink-0 space-x-2 hidden lg:flex">
         <button
-          class="btn btn-default btn-rounded bg-blue-500 hover:bg-blue-600 text-white">Subscribe</button><button
+          class="btn btn-default btn-rounded bg-blue-500 hover:bg-blue-600 text-white"
-          class="btn btn-default btn-rounded bg-blue-500 hover:bg-blue-600 text-white">Follow</button>
+          >Subscribe</button
+        ><button
+          class="btn btn-default btn-rounded bg-blue-500 hover:bg-blue-600 text-white"
+          >Follow</button
+        >
       </div>
     </div>
     <div class="flex flex-wrap">
@@ -77,14 +84,19 @@
         <div class="flex flex-wrap flex-col w-full tabs">
           <div class="flex lg:flex-wrap flex-row lg:space-x-2">
             <div class="flex-none">
-              <button class="tab tab-underline tab-active" type="button">Account
+              <button class="tab tab-underline tab-active" type="button"
-                settings</button>
+                >Account settings</button
+              >
             </div>
             <div class="flex-none">
-              <button class="tab tab-underline" type="button">Email preferences</button>
+              <button class="tab tab-underline" type="button"
+                >Email preferences</button
+              >
             </div>
             <div class="flex-none">
-              <button class="tab tab-underline" type="button">Security settings</button>
+              <button class="tab tab-underline" type="button"
+                >Security settings</button
+              >
             </div>
           </div>
           <div class="tab-content block">
@@ -93,51 +105,64 @@
                 <form class="form flex flex-wrap w-full">
                   <div class="w-full">
                     <div class="form-element">
-                      <div class="form-label">First name</div><input
+                      <div class="form-label">First name</div>
+                      <input
                         name="first-name"
                         type="text"
                         class="form-input"
-                        placeholder="Enter you first name" />
+                        placeholder="Enter you first name"
+                      />
                     </div>
                     <div class="form-element">
-                      <div class="form-label">Last name</div><input
+                      <div class="form-label">Last name</div>
+                      <input
                         name="last-name"
                         type="text"
                         class="form-input"
-                        placeholder="Enter you last name" />
+                        placeholder="Enter you last name"
+                      />
                     </div>
                     <div class="form-element">
-                      <div class="form-label">Email address</div><input
+                      <div class="form-label">Email address</div>
+                      <input
                         name="email"
                         type="email"
                         class="form-input"
-                        placeholder="Enter you email address" />
+                        placeholder="Enter you email address"
+                      />
                     </div>
                     <div class="form-element">
-                      <div class="form-label">Company</div><input
+                      <div class="form-label">Company</div>
+                      <input
                         name="company"
                         type="text"
                         class="form-input"
-                        placeholder="Enter you company" />
+                        placeholder="Enter you company"
+                      />
                     </div>
                     <div class="form-element">
-                      <div class="form-label">Position</div><input
+                      <div class="form-label">Position</div>
+                      <input
                         name="position"
                         type="text"
                         class="form-input"
-                        placeholder="Enter you position" />
+                        placeholder="Enter you position"
+                      />
                     </div>
                     <div class="form-element">
-                      <div class="form-label">Language</div><select
+                      <div class="form-label">Language</div>
-                        name="language"
+                      <select name="language" class="form-select"
-                        class="form-select "><option>Select language</option>
+                        ><option>Select language</option>
                         <option value="english">English</option>
                         <option value="spanish">Spanish</option>
-                        <option value="portuguese">Portuguese</option></select>
+                        <option value="portuguese">Portuguese</option></select
+                      >
                     </div>
-                  </div><input
+                  </div>
+                  <input
                     type="submit"
-                    class="btn btn-default bg-blue-500 hover:bg-blue-600 text-white btn-rounded" />
+                    class="btn btn-default bg-blue-500 hover:bg-blue-600 text-white btn-rounded"
+                  />
                 </form>
               </div>
             </div>
@@ -148,56 +173,70 @@
                 <form class="form flex flex-wrap w-full">
                   <div class="w-full">
                     <div class="form-element">
-                      <div class="form-label">Current email</div><input
+                      <div class="form-label">Current email</div>
+                      <input
                         name="email"
                         type="email"
                         class="form-input"
-                        placeholder="Enter you current email address" />
+                        placeholder="Enter you current email address"
+                      />
                     </div>
                     <div class="form-element">
-                      <div class="form-label">New email</div><input
+                      <div class="form-label">New email</div>
+                      <input
                         name="email"
                         type="email"
                         class="form-input"
-                        placeholder="Enter you new email address" />
+                        placeholder="Enter you new email address"
+                      />
                     </div>
                     <div class="form-element">
                       <div class="form-label">Daily updates</div>
                       <div class="flex items-center justify-start space-x-2">
-                        <label
+                        <label class="flex items-center justify-start space-x-2"
-                          class="flex items-center justify-start space-x-2"><input
+                          ><input
                             type="radio"
                             name="daily-updates"
                             class="form-radio h-4 w-4"
-                            value="yes" /><span
+                            value="yes"
-                            class="">Yes</span></label><label
+                          /><span class="">Yes</span></label
-                          class="flex items-center justify-start space-x-2"><input
+                        ><label
+                          class="flex items-center justify-start space-x-2"
+                          ><input
                             type="radio"
                             name="daily-updates"
                             class="form-radio h-4 w-4"
-                            value="no" /><span class="">No</span></label>
+                            value="no"
+                          /><span class="">No</span></label
+                        >
                       </div>
                     </div>
                     <div class="form-element">
                       <div class="form-label">Weekly updates</div>
                       <div class="flex items-center justify-start space-x-2">
-                        <label
+                        <label class="flex items-center justify-start space-x-2"
-                          class="flex items-center justify-start space-x-2"><input
+                          ><input
                             type="radio"
                             name="weekle-updates"
                             class="form-radio h-4 w-4"
-                            value="yes" /><span
+                            value="yes"
-                            class="">Yes</span></label><label
+                          /><span class="">Yes</span></label
-                          class="flex items-center justify-start space-x-2"><input
+                        ><label
+                          class="flex items-center justify-start space-x-2"
+                          ><input
                             type="radio"
                             name="weekle-updates"
                             class="form-radio h-4 w-4"
-                            value="no" /><span class="">No</span></label>
+                            value="no"
+                          /><span class="">No</span></label
+                        >
                       </div>
                     </div>
-                  </div><input
+                  </div>
+                  <input
                     type="submit"
-                    class="btn btn-default bg-blue-500 hover:bg-blue-600 text-white btn-rounded" />
+                    class="btn btn-default bg-blue-500 hover:bg-blue-600 text-white btn-rounded"
+                  />
                 </form>
               </div>
             </div>
@@ -208,29 +247,37 @@
                 <form class="form flex flex-wrap w-full">
                   <div class="w-full">
                     <div class="form-element">
-                      <div class="form-label">Current password</div><input
+                      <div class="form-label">Current password</div>
+                      <input
                         name="current-password"
                         type="password"
                         class="form-input"
-                        placeholder="Enter your current password" />
+                        placeholder="Enter your current password"
+                      />
                     </div>
                     <div class="form-element">
-                      <div class="form-label">New password</div><input
+                      <div class="form-label">New password</div>
+                      <input
                         name="new-password"
                         type="password"
                         class="form-input"
-                        placeholder="Enter your new password" />
+                        placeholder="Enter your new password"
+                      />
                     </div>
                     <div class="form-element">
-                      <div class="form-label">Confirm new password</div><input
+                      <div class="form-label">Confirm new password</div>
+                      <input
                         name="confirm-new-password"
                         type="password"
                         class="form-input"
-                        placeholder="Enter your new password confirmation" />
+                        placeholder="Enter your new password confirmation"
+                      />
                     </div>
-                  </div><input
+                  </div>
+                  <input
                     type="submit"
-                    class="btn btn-default bg-blue-500 hover:bg-blue-600 text-white btn-rounded" />
+                    class="btn btn-default bg-blue-500 hover:bg-blue-600 text-white btn-rounded"
+                  />
                 </form>
               </div>
             </div>

src/components/presets/Table.svelte

@@ -3,44 +3,50 @@
   <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
     <div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
       <div
-        class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
+        class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg"
+      >
         <table class="min-w-full divide-y divide-gray-200">
           <thead class="bg-gray-50">
-            <tr>
+            <tr class="odd:bg-white even:bg-gray-100">
               <th
                 scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+              >
                 Name
               </th>
               <th
                 scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+              >
                 Title
               </th>
               <th
                 scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+              >
                 Status
               </th>
               <th
                 scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+              >
                 Role
               </th>
               <th scope="col" class="relative px-6 py-3">
-                <span class="sr-only">{$_('edit')}</span>
+                <span class="sr-only">{$_("edit")}</span>
               </th>
             </tr>
           </thead>
           <tbody class="divide-y divide-gray-200">
-            <tr>
+            <tr class="odd:bg-white even:bg-gray-100">
               <td class="px-6 py-4 whitespace-nowrap">
                 <div class="flex items-center">
                   <div class="flex-shrink-0 h-10 w-10">
                     <img
                       class="h-10 w-10 rounded-full"
                       src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=4&amp;w=256&amp;h=256&amp;q=60"
-                      alt="" />
+                      alt=""
+                    />
                   </div>
                   <div class="ml-4">
                     <div class="text-sm font-medium text-gray-900">
@@ -60,7 +66,8 @@
               </td>
               <td class="px-6 py-4 whitespace-nowrap">
                 <span
-                  class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
+                  class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
+                >
                   Active
                 </span>
               </td>
@@ -68,10 +75,11 @@
                 Admin
               </td>
               <td
-                class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
-                <a
+              >
-                  href="#"
+                <a href="#" class="text-indigo-600 hover:text-indigo-900"
-                  class="text-indigo-600 hover:text-indigo-900">{$_('edit')}</a>
+                  >{$_("edit")}</a
+                >
               </td>
             </tr>
 

src/components/presets/Tabs.svelte

@@ -1,18 +1,23 @@
 <h3 class="text-lg">Tabs</h3>
 <div
-  class="w-full flex sm:border-b sm:border-gray-300 relative flex-col sm:flex-row">
+  class="w-full flex sm:border-b sm:border-gray-300 relative flex-col sm:flex-row"
+>
   <div
-    class="flex-1 sm:text-center font-medium pb-3 cursor-pointer hover:text-blue-400 false">
+    class="flex-1 sm:text-center font-medium pb-3 cursor-pointer hover:text-blue-400 false"
+  >
     1
   </div>
   <div
-    class="flex-1 sm:text-center font-medium pb-3 cursor-pointer hover:text-blue-400 false">
+    class="flex-1 sm:text-center font-medium pb-3 cursor-pointer hover:text-blue-400 false"
+  >
     2
   </div>
   <div
-    class="flex-1 sm:text-center font-medium pb-3 cursor-pointer hover:text-blue-400 false">
+    class="flex-1 sm:text-center font-medium pb-3 cursor-pointer hover:text-blue-400 false"
+  >
     3
   </div>
   <div
-    class="hidden sm:block absolute bottom-0 left-0 h-1 bg-blue-400 transition-transform duration-300 ease-out w-1/4 transform translate-x-double" />
+    class="hidden sm:block absolute bottom-0 left-0 h-1 bg-blue-400 transition-transform duration-300 ease-out w-1/4 transform translate-x-double"
+  />
 </div>

src/components/presets/Tags.svelte

@@ -1,6 +1,7 @@
 <div>
   <div
-    class="text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 bg-blue-200 text-blue-700 rounded-full">
+    class="text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 bg-blue-200 text-blue-700 rounded-full"
+  >
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="16"
@@ -11,7 +12,8 @@
       stroke-width="2"
       stroke-linecap="round"
       stroke-linejoin="round"
-      class="feather feather-bell-off mr-2">
+      class="feather feather-bell-off mr-2"
+    >
       <path d="M13.73 21a2 2 0 0 1-3.46 0" />
       <path d="M18.63 13A17.89 17.89 0 0 1 18 8" />
       <path d="M6.26 6.26A5.86 5.86 0 0 0 6 8c0 7-3 9-3 9h14" />
@@ -22,7 +24,8 @@
   </div>
 
   <div
-    class="ml-4 text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 bg-green-200 text-green-700 rounded-full">
+    class="ml-4 text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 bg-green-200 text-green-700 rounded-full"
+  >
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="16"
@@ -33,7 +36,8 @@
       stroke-width="2"
       stroke-linecap="round"
       stroke-linejoin="round"
-      class="feather feather-arrow-right mr-2">
+      class="feather feather-arrow-right mr-2"
+    >
       <line x1="5" y1="12" x2="19" y2="12" />
       <polyline points="12 5 19 12 12 19" />
     </svg>
@@ -41,7 +45,8 @@
   </div>
 
   <div
-    class="ml-4 text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 bg-orange-200 text-orange-700 rounded-full">
+    class="ml-4 text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 bg-orange-200 text-orange-700 rounded-full"
+  >
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="16"
@@ -52,14 +57,16 @@
       stroke-width="2"
       stroke-linecap="round"
       stroke-linejoin="round"
-      class="feather feather-activity mr-2">
+      class="feather feather-activity mr-2"
+    >
       <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
     </svg>
     Tag
   </div>
 
   <div
-    class="ml-4 text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 bg-red-200 text-red-700 rounded-full">
+    class="ml-4 text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 bg-red-200 text-red-700 rounded-full"
+  >
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="16"
@@ -70,7 +77,8 @@
       stroke-width="2"
       stroke-linecap="round"
       stroke-linejoin="round"
-      class="feather feather-archive mr-2">
+      class="feather feather-archive mr-2"
+    >
       <polyline points="21 8 21 21 3 21 3 8" />
       <rect x="1" y="3" width="22" height="5" />
       <line x1="10" y1="12" x2="14" y2="12" />
@@ -79,7 +87,8 @@
   </div>
 
   <div
-    class="ml-4 text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 rounded-full bg-white text-gray-700 border">
+    class="ml-4 text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 rounded-full bg-white text-gray-700 border"
+  >
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="16"
@@ -90,10 +99,12 @@
       stroke-width="2"
       stroke-linecap="round"
       stroke-linejoin="round"
-      class="feather feather-hard-drive mr-2">
+      class="feather feather-hard-drive mr-2"
+    >
       <line x1="22" y1="12" x2="2" y2="12" />
       <path
-        d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
+        d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"
+      />
       <line x1="6" y1="16" x2="6.01" y2="16" />
       <line x1="10" y1="16" x2="10.01" y2="16" />
     </svg>

src/components/runners/AddRunnerModal.svelte

@@ -9,7 +9,6 @@
   } from "@odit/lfk-client-js";
   import isEmail from "validator/es/lib/isEmail";
   import isMobilePhone from "validator/es/lib/isMobilePhone";
-  import Toastify from "toastify-js";
   import Select from "svelte-select";
   import { createEventDispatcher } from "svelte";
   const dispatch = createEventDispatcher();
@@ -78,10 +77,6 @@
   function submit() {
     if (processed_last_submit === true) {
       processed_last_submit = false;
-      const toast = Toastify({
-        text: $_("runner-is-being-added"),
-        duration: -1,
-      }).showToast();
       let postdata = {
         group: selected_team,
         firstname: firstname_input_value,
@@ -96,6 +91,7 @@
       if (email_input_value) {
         postdata.email = email_input_value;
       }
+      toast.loading($_("runner-is-being-added"));
       RunnerService.runnerControllerPost(postdata)
         .then((result) => {
           firstname_input_value = "";
@@ -104,11 +100,8 @@
           email_input_value = "";
           modal_open = false;
           //
-          Toastify({
+          toast.dismiss();
-            text: $_("runner-added"),
+          toast.success($_("runner-added"));
-            duration: 500,
-            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-          }).showToast();
           dispatch("created", { runners: [result] });
         })
         .catch((err) => {
@@ -116,8 +109,6 @@
         })
         .finally(() => {
           processed_last_submit = true;
-          //
-          toast.hideToast();
         });
     }
   }
@@ -126,58 +117,70 @@
 {#if modal_open}
   <div
     class="fixed z-10 inset-0 overflow-y-auto"
-    
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;
-    }}>
+    }}
+  >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+    >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
           class="absolute inset-0 bg-gray-500 opacity-75"
-          data-id="modal_backdrop" />
+          data-id="modal_backdrop"
+        />
       </div>
       <span
         class="hidden sm:inline-block sm:align-middle sm:h-screen"
-        aria-hidden="true">&#8203;</span>
+        aria-hidden="true">&#8203;</span
+      >
       <div
         class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
         role="dialog"
         aria-modal="true"
-        aria-labelledby="modal-headline">
+        aria-labelledby="modal-headline"
+      >
         <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
           <div class="sm:flex sm:items-start">
             <div
-              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
+              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
+            >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
                 class="h-6 w-6 text-blue-600"
                 fill="currentColor"
                 width="24"
-                height="24"><path fill="none" d="M0 0h24v24H0z" />
+                height="24"
+                ><path fill="none" d="M0 0h24v24H0z" />
                 <path
-                  d="M9.83 8.79L8 9.456V13H6V8.05h.015l5.268-1.918c.244-.093.51-.14.782-.131a2.616 2.616 0 0 1 2.427 1.82c.186.583.356.977.51 1.182A4.992 4.992 0 0 0 19 11v2a6.986 6.986 0 0 1-5.402-2.547l-.581 3.297L15 15.67V23h-2v-5.986l-2.05-1.987-.947 4.298-6.894-1.215.348-1.97 4.924.868L9.83 8.79zM13.5 5.5a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" /></svg>
+                  d="M9.83 8.79L8 9.456V13H6V8.05h.015l5.268-1.918c.244-.093.51-.14.782-.131a2.616 2.616 0 0 1 2.427 1.82c.186.583.356.977.51 1.182A4.992 4.992 0 0 0 19 11v2a6.986 6.986 0 0 1-5.402-2.547l-.581 3.297L15 15.67V23h-2v-5.986l-2.05-1.987-.947 4.298-6.894-1.215.348-1.97 4.924.868L9.83 8.79zM13.5 5.5a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"
+                /></svg
+              >
             </div>
             <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
-                {$_('create-a-new-runner')}
+                {$_("create-a-new-runner")}
               </h3>
               <div class="mt-2 mb-6">
                 <p class="text-sm text-gray-500">
-                  {$_('please-provide-the-required-information-to-add-a-new-runner')}
+                  {$_(
+                    "please-provide-the-required-information-to-add-a-new-runner"
+                  )}
                 </p>
               </div>
               <div class="grid grid-cols-6 gap-6">
                 <div class="col-span-6">
                   <label
                     for="firstname"
-                    class="block text-sm font-medium text-gray-700">{$_('first-name')}</label>
+                    class="block text-sm font-medium text-gray-700"
+                    >{$_("first-name")}</label
+                  >
                   <input
                     use:focus
                     autocomplete="off"
-                    placeholder={$_('first-name')}
+                    placeholder={$_("first-name")}
                     class:border-red-500={!isFirstnameValid}
                     class:focus:border-red-500={!isFirstnameValid}
                     class:focus:ring-red-500={!isFirstnameValid}
@@ -185,34 +188,41 @@
                     bind:this={firstname_input}
                     type="text"
                     name="firstname"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                  />
                   {#if !isFirstnameValid}
                     <span
-                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-                      {$_('first-name-is-required')}
+                    >
+                      {$_("first-name-is-required")}
                     </span>
                   {/if}
                 </div>
                 <div class="col-span-6">
                   <label
                     for="trackname"
-                    class="block text-sm font-medium text-gray-700">{$_('middle-name')}</label>
+                    class="block text-sm font-medium text-gray-700"
+                    >{$_("middle-name")}</label
+                  >
                   <input
                     autocomplete="off"
-                    placeholder={$_('middle-name')}
+                    placeholder={$_("middle-name")}
                     bind:value={middlename_input_value}
                     bind:this={middlename_input}
                     type="text"
                     name="trackname"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                  />
                 </div>
                 <div class="col-span-6">
                   <label
                     for="lastname"
-                    class="block text-sm font-medium text-gray-700">{$_('last-name')}</label>
+                    class="block text-sm font-medium text-gray-700"
+                    >{$_("last-name")}</label
+                  >
                   <input
                     autocomplete="off"
-                    placeholder={$_('last-name')}
+                    placeholder={$_("last-name")}
                     class:border-red-500={!isLastnameValid}
                     class:focus:border-red-500={!isLastnameValid}
                     class:focus:ring-red-500={!isLastnameValid}
@@ -220,41 +230,49 @@
                     bind:this={lastname_input}
                     type="text"
                     name="lastname"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                  />
                   {#if !isLastnameValid}
                     <span
-                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-                      {$_('last-name-is-required')}
+                    >
+                      {$_("last-name-is-required")}
                     </span>
                   {/if}
                 </div>
                 <div class="col-span-6">
                   <label
                     for="team"
-                    class="block text-sm font-medium text-gray-700">{$_('team')}</label>
+                    class="block text-sm font-medium text-gray-700"
+                    >{$_("team")}</label
+                  >
                   <Select
                     containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-                    itemFilter={(label, filterText, option) => label
+                    itemFilter={(label, filterText, option) =>
-                        .toLowerCase()
+                      label.toLowerCase().includes(filterText.toLowerCase()) ||
-                        .includes(
+                      option.value.id
-                          filterText.toLowerCase()
-                        ) || option.value.id
                         .toString()
                         .startsWith(filterText.toLowerCase())}
                     items={orgs.concat(teams)}
                     showChevron={true}
-                    placeholder={$_('search-for-an-organization-or-team-by-name-or-id')}
+                    placeholder={$_(
-                    noOptionsMessage={$_('no-organization-or-team-found')}
+                      "search-for-an-organization-or-team-by-name-or-id"
-                    on:select={(selectedValue) => (selected_team = selectedValue.detail.value.id)}
+                    )}
-                    on:clear={() => (selected_team = null)} />
+                    noOptionsMessage={$_("no-organization-or-team-found")}
+                    on:select={(selectedValue) =>
+                      (selected_team = selectedValue.detail.value.id)}
+                    on:clear={() => (selected_team = null)}
+                  />
                 </div>
                 <div class="col-span-6">
                   <label
                     for="phone"
-                    class="block text-sm font-medium text-gray-700">{$_('phone')}</label>
+                    class="block text-sm font-medium text-gray-700"
+                    >{$_("phone")}</label
+                  >
                   <input
                     autocomplete="off"
-                    placeholder={$_('phone')}
+                    placeholder={$_("phone")}
                     class:border-red-500={!isPhoneValidOrEmpty}
                     class:focus:border-red-500={!isPhoneValidOrEmpty}
                     class:focus:ring-red-500={!isPhoneValidOrEmpty}
@@ -262,21 +280,27 @@
                     bind:this={phone_input}
                     type="tel"
                     name="phone"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                  />
                   {#if !isPhoneValidOrEmpty}
                     <span
-                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-                      {@html $_('the-provided-phone-number-is-invalid-less-than-br-greater-than-please-enter-a-valid-international-number')}
+                    >
+                      {@html $_(
+                        "the-provided-phone-number-is-invalid-less-than-br-greater-than-please-enter-a-valid-international-number"
+                      )}
                     </span>
                   {/if}
                 </div>
                 <div class="col-span-6">
                   <label
                     for="email"
-                    class="block text-sm font-medium text-gray-700">{$_('e-mail-adress')}</label>
+                    class="block text-sm font-medium text-gray-700"
+                    >{$_("e-mail-adress")}</label
+                  >
                   <input
                     autocomplete="off"
-                    placeholder={$_('e-mail-adress')}
+                    placeholder={$_("e-mail-adress")}
                     class:border-red-500={!isEmailValidOrEmpty}
                     class:focus:border-red-500={!isEmailValidOrEmpty}
                     class:focus:ring-red-500={!isEmailValidOrEmpty}
@@ -284,11 +308,13 @@
                     bind:this={email_input}
                     type="email"
                     name="email"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                  />
                   {#if !isEmailValidOrEmpty}
                     <span
-                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-                      {$_('valid-email-is-required')}
+                    >
+                      {$_("valid-email-is-required")}
                     </span>
                   {/if}
                 </div>
@@ -302,16 +328,18 @@
             class:opacity-50={!createbtnenabled}
             on:click={submit}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
-            {$_('create')}
+          >
+            {$_("create")}
           </button>
           <button
             on:click={() => {
               modal_open = false;
             }}
             type="button"
-            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
+            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
-            {$_('cancel')}
+          >
+            {$_("cancel")}
           </button>
         </div>
       </div>

src/components/runners/ImportRunnerModal.svelte

@@ -4,7 +4,6 @@
   import { _ } from "svelte-i18n";
   import { clickOutside } from "../base/outsideclick";
 
-  import Toastify from "toastify-js";
   import {
     ImportService,
     RunnerTeamService,
@@ -12,6 +11,7 @@
   } from "@odit/lfk-client-js";
   import { createEventDispatcher } from "svelte";
   import Select from "svelte-select";
+  import toast from "svelte-french-toast";
   export let opened_from;
   export let passed_org;
   export let passed_orgs;
@@ -90,10 +90,7 @@
   }
   function importAction() {
     if (recent_processed === true) {
-      const toast = Toastify({
+      toast.loading($_("runners-are-being-imported"));
-        text: $_("runners-are-being-imported"),
-        duration: -1,
-      }).showToast();
       recent_processed = false;
       const mapped = json_output.map(function (runner) {
         return {
@@ -115,48 +112,30 @@
       if (opened_from === "OrgOverview" || opened_from === "OrgDetail") {
         ImportService.importControllerPostOrgsJson(org, mapped)
           .then((resp) => {
-            toast.hideToast();
+            toast.dismiss();
             recent_processed = true;
-            Toastify({
+            toast.success($_("import-finished"));
-              text: $_("import-finished"),
-              duration: 500,
-              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-            }).showToast();
             cancelModal();
           })
           .catch((err) => {
-            toast.hideToast();
+            toast.dismiss();
             recent_processed = true;
-            Toastify({
+            toast.error($_("error-during-import"));
-              text: $_("error-during-import"),
-              duration: 500,
-              backgroundColor:
-                "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
-            }).showToast();
             cancelModal();
           });
       }
       if (opened_from === "TeamDetail") {
         ImportService.importControllerPostTeamsJson(passed_team.id, mapped)
           .then((resp) => {
-            toast.hideToast();
+            toast.dismiss();
             recent_processed = true;
-            Toastify({
+            toast.success($_("import-finished"));
-              text: $_("import-finished"),
-              duration: 500,
-              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-            }).showToast();
             cancelModal();
           })
           .catch((err) => {
-            toast.hideToast();
+            toast.dismiss();
             recent_processed = true;
-            Toastify({
+            toast.error($_("error-during-import"));
-              text: $_("error-during-import"),
-              duration: 500,
-              backgroundColor:
-                "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
-            }).showToast();
             cancelModal();
           });
       }
@@ -169,24 +148,15 @@
           )
             .then((resp) => {
               dispatch("created", { runners: resp });
-              toast.hideToast();
+              toast.dismiss();
               recent_processed = true;
-              Toastify({
+              toast($_("import-finished"));
-                text: $_("import-finished"),
-                duration: 500,
-                backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-              }).showToast();
               cancelModal();
             })
             .catch((err) => {
-              toast.hideToast();
+              toast.dismiss();
               recent_processed = true;
-              Toastify({
+              toast.error($_("error-during-import"));
-                text: $_("error-during-import"),
-                duration: 500,
-                backgroundColor:
-                  "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
-              }).showToast();
               cancelModal();
             });
         }
@@ -198,24 +168,15 @@
           )
             .then((resp) => {
               dispatch("created", { runners: resp });
-              toast.hideToast();
+              toast.dismiss();
               recent_processed = true;
-              Toastify({
+              toast($_("import-finished"));
-                text: $_('import-finished'),
-                duration: 500,
-                backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-              }).showToast();
               cancelModal();
             })
             .catch((err) => {
-              toast.hideToast();
+              toast.dismiss();
               recent_processed = true;
-              Toastify({
+              toast.error($_("error-during-import"));
-                text: $_("error-during-import"),
-                duration: 500,
-                backgroundColor:
-                  "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
-              }).showToast();
               cancelModal();
             });
         }
@@ -227,43 +188,51 @@
 {#if import_modal_open}
   <div
     class="fixed z-10 inset-0 overflow-y-auto"
-    
     use:clickOutside
     on:click_outside={() => {
       cancelModal();
-    }}>
+    }}
+  >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+    >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
           class="absolute inset-0 bg-gray-500 opacity-75"
-          data-id="modal_backdrop" />
+          data-id="modal_backdrop"
+        />
       </div>
       <span
         class="hidden sm:inline-block sm:align-middle sm:h-screen"
-        aria-hidden="true">&#8203;</span>
+        aria-hidden="true">&#8203;</span
+      >
       <div
         class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-max sm:w-full"
         role="dialog"
         aria-modal="true"
-        aria-labelledby="modal-headline">
+        aria-labelledby="modal-headline"
+      >
         <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
           <div class="sm:flex sm:items-start">
             <div
-              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
+              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
+            >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
                 class="h-6 w-6 text-blue-600"
                 fill="currentColor"
                 width="24"
-                height="24"><path fill="none" d="M0 0h24v24H0z" />
+                height="24"
+                ><path fill="none" d="M0 0h24v24H0z" />
                 <path
-                  d="M9.83 8.79L8 9.456V13H6V8.05h.015l5.268-1.918c.244-.093.51-.14.782-.131a2.616 2.616 0 0 1 2.427 1.82c.186.583.356.977.51 1.182A4.992 4.992 0 0 0 19 11v2a6.986 6.986 0 0 1-5.402-2.547l-.581 3.297L15 15.67V23h-2v-5.986l-2.05-1.987-.947 4.298-6.894-1.215.348-1.97 4.924.868L9.83 8.79zM13.5 5.5a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" /></svg>
+                  d="M9.83 8.79L8 9.456V13H6V8.05h.015l5.268-1.918c.244-.093.51-.14.782-.131a2.616 2.616 0 0 1 2.427 1.82c.186.583.356.977.51 1.182A4.992 4.992 0 0 0 19 11v2a6.986 6.986 0 0 1-5.402-2.547l-.581 3.297L15 15.67V23h-2v-5.986l-2.05-1.987-.947 4.298-6.894-1.215.348-1.97 4.924.868L9.83 8.79zM13.5 5.5a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"
+                /></svg
+              >
             </div>
             <div class="mt-3 text-center sm:mt-0 sm:ml-2 sm:text-left w-full">
               <h3 class="text-lg leading-6 font-bold mt-2 text-gray-900">
-                {$_('runner-import')}
+                {$_("runner-import")}
               </h3>
             </div>
           </div>
@@ -271,14 +240,15 @@
             {#if json_output.length === 0}
               <div class="mt-2 mb-6">
                 <p class="text-sm text-gray-500">
-                  {$_('please-provide-the-required-csv-xlsx-file')}
+                  {$_("please-provide-the-required-csv-xlsx-file")}
                 </p>
               </div>
               <div class="overflow-hidden relative mt-4 mb-4">
                 <input
                   accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                   bind:files
-                  type="file" />
+                  type="file"
+                />
               </div>
               <div class="overflow-hidden relative mt-4 mb-4">
                 <button
@@ -286,47 +256,50 @@
                     cancelModal();
                   }}
                   type="button"
-                  class="w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 md:ml-40 mr-0 sm:ml-0 sm:w-auto sm:text-sm">
+                  class="w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 md:ml-40 mr-0 sm:ml-0 sm:w-auto sm:text-sm"
-                  {$_('cancel')}
+                >
+                  {$_("cancel")}
                 </button>
               </div>
             {/if}
             {#if json_output.length > 0}
-              {#if opened_from === 'OrgOverview'}
+              {#if opened_from === "OrgOverview"}
-                <p>{$_('import__target-organization')}</p>
+                <p>{$_("import__target-organization")}</p>
                 <select
                   name="team"
                   bind:value={selected_org}
-                  class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2">
+                  class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                >
                   {#each passed_orgs as o}
                     <option value={o.id}>{o.name}</option>
                   {/each}
                 </select>
-                <p>{$_('bitte-bestaetige-diese-laeufer-fuer-den-import')}</p>
+                <p>{$_("confirm-runner-import")}</p>
               {/if}
-              {#if opened_from === 'RunnerOverview'}
+              {#if opened_from === "RunnerOverview"}
-                <p>{$_('group')}</p>
+                <p>{$_("group")}</p>
                 <Select
                   containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-                  itemFilter={(label, filterText, option) => label
+                  itemFilter={(label, filterText, option) =>
-                      .toLowerCase()
+                    label.toLowerCase().includes(filterText.toLowerCase()) ||
-                      .includes(
+                    option.id.value
-                        filterText.toLowerCase()
-                      ) || option.id.value
                       .toString()
                       .startsWith(filterText.toLowerCase())}
                   items={groups}
                   showChevron={true}
-                  placeholder={$_('search-for-an-organization-or-team-by-name-or-id')}
+                  placeholder={$_(
-                  noOptionsMessage={$_('no-organization-or-team-found')}
+                    "search-for-an-organization-or-team-by-name-or-id"
+                  )}
+                  noOptionsMessage={$_("no-organization-or-team-found")}
                   on:select={(selectedValue) => {
                     selected_org_or_team = selectedValue.detail.value;
                   }}
-                  on:clear={() => (selected_org_or_team = null)} />
+                  on:clear={() => (selected_org_or_team = null)}
+                />
               {/if}
-              {#if opened_from === 'OrgDetail'}
+              {#if opened_from === "OrgDetail"}
                 <p>
-                  {$_('runnerimport_verify_runners_org', {
+                  {$_("runnerimport_verify_runners_org", {
                     values: { org_name: passed_org.name },
                   })}
                 </p>
@@ -334,34 +307,39 @@
               <input
                 type="search"
                 bind:value={searchvalue}
-                placeholder={$_('datatable.search')}
+                placeholder={$_("datatable.search")}
-                aria-label={$_('datatable.search')}
+                aria-label={$_("datatable.search")}
-                class="p-2 w-full" />
+                class="p-2 w-full"
+              />
               <div class="relative w-full mt-4 mb-4">
                 <div class="w-full overflow-x-auto">
                   <table class="divide-y divide-gray-200 w-full">
                     <thead class="bg-gray-50">
-                      <tr>
+                      <tr class="odd:bg-white even:bg-gray-100">
                         <th
                           scope="col"
-                          class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                          class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-                          {$_('csv_import__firstname')}
+                        >
+                          {$_("csv_import__firstname")}
                         </th>
                         <th
                           scope="col"
-                          class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                          class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-                          {$_('csv_import__middlename')}
+                        >
+                          {$_("csv_import__middlename")}
                         </th>
                         <th
                           scope="col"
-                          class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                          class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-                          {$_('csv_import__lastname')}
+                        >
+                          {$_("csv_import__lastname")}
                         </th>
-                        {#if (opened_from !== 'TeamDetail' && opened_from !== 'RunnerOverview') || (opened_from === 'RunnerOverview' && selected_org_or_team.includes('ORG_'))}
+                        {#if (opened_from !== "TeamDetail" && opened_from !== "RunnerOverview") || (opened_from === "RunnerOverview" && selected_org_or_team.includes("ORG_"))}
                           <th
                             scope="col"
-                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-                            {$_('csv_import__team')}
+                          >
+                            {$_("csv_import__team")}
                           </th>
                         {/if}
                       </tr>
@@ -372,19 +350,21 @@
                           .toString()
                           .toLowerCase()
                           .includes(searchvalue)}
-                          <tr>
+                          <tr class="odd:bg-white even:bg-gray-100">
                             <td class="px-6 py-4 whitespace-nowrap">
-                              {runner[`${$_('csv_import__firstname')}`]}
+                              {runner[`${$_("csv_import__firstname")}`]}
                             </td>
                             <td class="px-6 py-4 whitespace-nowrap">
-                              {runner[`${$_('csv_import__middlename')}`] || ''}
+                              {runner[`${$_("csv_import__middlename")}`] || ""}
                             </td>
                             <td class="px-6 py-4 whitespace-nowrap">
-                              {runner[`${$_('csv_import__lastname')}`]}
+                              {runner[`${$_("csv_import__lastname")}`]}
                             </td>
-                            {#if (opened_from !== 'TeamDetail' && opened_from !== 'RunnerOverview') || (opened_from === 'RunnerOverview' && selected_org_or_team.includes('ORG_'))}
+                            {#if (opened_from !== "TeamDetail" && opened_from !== "RunnerOverview") || (opened_from === "RunnerOverview" && selected_org_or_team.includes("ORG_"))}
                               <td class="px-6 py-4 whitespace-nowrap">
-                                {runner[`${$_('csv_import__team')}`] || runner[`${$_('csv_import__class')}`] || '---'}
+                                {runner[`${$_("csv_import__team")}`] ||
+                                  runner[`${$_("csv_import__class")}`] ||
+                                  "---"}
                               </td>
                             {/if}
                           </tr>
@@ -398,16 +378,18 @@
                   class:opacity-50={!importButtonEnabled}
                   on:click={importAction}
                   type="button"
-                  class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
+                  class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
-                  {$_('import-runners')}
+                >
+                  {$_("import-runners")}
                 </button>
                 <button
                   on:click={() => {
                     cancelModal();
                   }}
                   type="button"
-                  class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">
+                  class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
-                  {$_('cancel')}
+                >
+                  {$_("cancel")}
                 </button>
               </div>
             {/if}

src/components/runners/RunnerDetail.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { getLocaleFromNavigator, _ } from "svelte-i18n";
+  import { _ } from "svelte-i18n";
   import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
   import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
   import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
@@ -9,10 +9,10 @@
     RunnerTeamService,
     RunnerOrganizationService,
   } from "@odit/lfk-client-js";
-  import Toastify from "toastify-js";
   import PromiseError from "../base/PromiseError.svelte";
   import isEmail from "validator/es/lib/isEmail";
   import Select from "svelte-select";
+  import toast from "svelte-french-toast";
   let data_loaded = false;
   export let params;
   const runner_promise = RunnerService.runnerControllerGetOne(params.runnerid);
@@ -65,10 +65,7 @@
   let groups = [];
   function submit() {
     if (data_loaded === true && save_enabled) {
-      Toastify({
+      toast.loading($_("updating-runner"));
-        text: $_("updating-runner"),
-        duration: 2500,
-      }).showToast();
       let postdata = {};
       postdata = Object.assign(postdata, editable);
       if (postdata.phone === "") {
@@ -78,11 +75,8 @@
         .then((resp) => {
           Object.assign(original_data, editable);
           original_data = original_data;
-          Toastify({
+          toast.dismiss();
-            text: $_("runner-updated"),
+          toast.success($_("runner-updated"));
-            duration: 2500,
-            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-          }).showToast();
         })
         .catch((err) => {});
     } else {

src/components/runners/RunnersEmptyState.svelte

@@ -6,7 +6,7 @@
 <div class="text-center items-center justify-center">
   <p class="mb-16 text-lg text-gray-500">
     <img class="w-full h-44" src={runners_empty} alt="" />
-    <span class="font-bold">{$_('there-are-no-runners-added-yet')}</span><br />
+    <span class="font-bold">{$_("there-are-no-runners-added-yet")}</span><br />
-    <span>{$_('add-your-first-runner')}</span>
+    <span>{$_("add-your-first-runner")}</span>
   </p>
 </div>

src/components/runners/RunnersOverview.svelte

@@ -24,7 +24,6 @@
   import TableActions from "../shared/TableActions.svelte";
   import { groupFilter } from "../shared/tablefilters";
   import DeleteRunnerModal from "./DeleteRunnerModal.svelte";
-  import Toastify from "toastify-js";
   import TableBottom from "../shared/TableBottom.svelte";
   import TableHeader from "../shared/TableHeader.svelte";
 
@@ -149,11 +148,7 @@
       ...options,
       data: current_runners,
     }));
-    Toastify({
+    toast($_("runner-deleted"));
-      text: $_("runner-deleted"),
-      duration: 3500,
-      backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-    }).showToast();
   }
 
   onMount(async () => {
@@ -168,7 +163,7 @@
 
     let page = 0;
     while (page >= 0) {
-      const runners = await RunnerService.runnerControllerGetAll(page, 1000);
+      const runners = await RunnerService.runnerControllerGetAll(page, 500);
       if (runners.length == 0) {
         page = -2;
       }
@@ -182,7 +177,6 @@
       dataLoaded = true;
       page++;
     }
-    console.log("All runners loaded");
   });
 </script>
 
@@ -219,7 +213,7 @@
     </div>
     <div class="overflow-x-auto">
       <table class="w-full">
-        <thead>
+        <thead class="border-b border-gray-400">
           {#each $table.getHeaderGroups() as headerGroup}
             <tr class="select-none">
               <th class="inset-y-0 left-0 px-4 py-2 text-left w-px">
@@ -238,7 +232,7 @@
         </thead>
         <tbody>
           {#each $table.getRowModel().rows as row}
-            <tr>
+            <tr class="odd:bg-white even:bg-gray-100">
               <td class="inset-y-0 left-0 px-4 py-2 text-center w-px">
                 <InputElement
                   type="checkbox"
@@ -265,3 +259,9 @@
   {/if}
 {/if}
 <TableBottom {table} {selected} />
+
+<style>
+  table tbody tr td:nth-child(2) {
+    font-family: monospace;
+  }
+</style>

src/components/runners/ThFilterGroup.svelte

@@ -1,35 +0,0 @@
-<script>
-  import { _ } from "svelte-i18n";
-  export let groups;
-  export let handler;
-  let selected = "all";
-</script>
-
-<th style="border-bottom: 1px solid #ddd;">
-  <select
-    on:input={() => {
-      setTimeout(() => {
-        if (`${selected}`.trim()) {
-          const value = selected;
-          handler.filter(value, (runner) => {
-            if (
-              runner.group.id === value ||
-              runner?.group?.parentGroup?.id === value ||
-              value === "all"
-            )
-              return runner;
-            return "";
-          });
-        }
-      }, 50);
-    }}
-    bind:value={selected}
-    name="groupfilter"
-    id="groupfilter"
-  >
-    <option value="all">{$_('all')}</option>
-    {#each groups as g}
-      <option value={g.value}>{g.label}</option>
-    {/each}
-  </select>
-</th>

src/components/scans/AddScanModal.svelte

@@ -2,27 +2,23 @@
   import { _ } from "svelte-i18n";
   import { clickOutside } from "../base/outsideclick";
 
-  import {
+  import { RunnerService, ScanService } from "@odit/lfk-client-js";
-    RunnerService,
-    ScanService,
-  } from "@odit/lfk-client-js";
   import Select from "svelte-select";
-  import Toastify from "toastify-js";
   import { createEventDispatcher } from "svelte";
+  import toast from "svelte-french-toast";
   export let modal_open;
   const getRunnerLabel = (option) =>
     option.firstname + " " + (option.middlename || "") + " " + option.lastname;
   const filterRunners = (label, filterText, option) =>
     label.toLowerCase().includes(filterText.toLowerCase()) ||
     option.value.id.toString().startsWith(filterText.toLowerCase());
-  function focus(el) {
-    el.focus();
-  }
   const dispatch = createEventDispatcher();
   $: runner = 0;
   $: runners = [];
   RunnerService.runnerControllerGetAll().then((val) => {
-    runners = val.map(r => {return {label: getRunnerLabel(r), value: r}});
+    runners = val.map((r) => {
+      return { label: getRunnerLabel(r), value: r };
+    });
   });
   $: distance_input = 0;
   $: processed_last_submit = true;
@@ -45,10 +41,7 @@
   function submit() {
     if (processed_last_submit === true) {
       processed_last_submit = false;
-      const toast = Toastify({
+      toast.loading($_("adding-scan"));
-        text: $_('adding-scan'),
-        duration: -1,
-      }).showToast();
       let postdata = {
         runner,
         distance: distance_input,
@@ -59,11 +52,8 @@
           distance_input = 0;
           modal_open = false;
           //
-          Toastify({
+          toast.dismiss();
-            text: $_('scan-added'),
+          toast.success($_("scan-added"));
-            duration: 500,
-            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-          }).showToast();
           dispatch("created", { scans: [result] });
         })
         .catch((err) => {
@@ -71,8 +61,6 @@
         })
         .finally(() => {
           processed_last_submit = true;
-          //
-          toast.hideToast();
         });
     }
   }
@@ -81,70 +69,87 @@
 {#if modal_open}
   <div
     class="fixed z-10 inset-0 overflow-y-auto"
-    
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;
-    }}>
+    }}
+  >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+    >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
           class="absolute inset-0 bg-gray-500 opacity-75"
-          data-id="modal_backdrop" />
+          data-id="modal_backdrop"
+        />
       </div>
       <span
         class="hidden sm:inline-block sm:align-middle sm:h-screen"
-        aria-hidden="true">&#8203;</span>
+        aria-hidden="true">&#8203;</span
+      >
       <div
         class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
         role="dialog"
         aria-modal="true"
-        aria-labelledby="modal-headline">
+        aria-labelledby="modal-headline"
+      >
         <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
           <div class="sm:flex sm:items-start">
             <div
-              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
+              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
+            >
               <svg
                 class="h-6 w-6 text-blue-600"
                 fill="currentColor"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
                 width="24"
-                height="24"><path fill="none" d="M0 0h24v24H0z" />
+                height="24"
+                ><path fill="none" d="M0 0h24v24H0z" />
                 <path
                   fill="currentColor"
-                  d="M2 4h2v16H2V4zm4 0h1v16H6V4zm2 0h2v16H8V4zm3 0h2v16h-2V4zm3 0h2v16h-2V4zm3 0h1v16h-1V4zm2 0h3v16h-3V4z" /></svg>
+                  d="M2 4h2v16H2V4zm4 0h1v16H6V4zm2 0h2v16H8V4zm3 0h2v16h-2V4zm3 0h2v16h-2V4zm3 0h1v16h-1V4zm2 0h3v16h-3V4z"
+                /></svg
+              >
             </div>
             <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
-                {$_('create-a-new-scan-fixed-only')}
+                {$_("create-a-new-scan-fixed-only")}
               </h3>
               <div class="mt-2 mb-6">
                 <p class="text-sm text-gray-500">
-                  {$_('please-provide-the-nessecary-information-to-create-a-new-scan')}
+                  {$_(
+                    "please-provide-the-nessecary-information-to-create-a-new-scan"
+                  )}
                 </p>
               </div>
               <div class="grid grid-cols-6 gap-6">
                 <div class="col-span-6">
                   <label
                     for="donor"
-                    class="block text-sm font-medium text-gray-700">{$_('runner')}</label>
+                    class="block text-sm font-medium text-gray-700"
+                    >{$_("runner")}</label
+                  >
                   <Select
                     containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-                    itemFilter={(label, filterText, option) => filterRunners(label, filterText, option)}
+                    itemFilter={(label, filterText, option) =>
+                      filterRunners(label, filterText, option)}
                     items={runners}
                     showChevron={true}
-                    placeholder={$_('search-for-runner-by-name-or-id')}
+                    placeholder={$_("search-for-runner-by-name-or-id")}
-                    noOptionsMessage={$_('no-runners-found')}
+                    noOptionsMessage={$_("no-runners-found")}
-                    on:select={(selectedValue) => (runner = selectedValue.detail.value.id)}
+                    on:select={(selectedValue) =>
-                    on:clear={() => (runner = null)} />
+                      (runner = selectedValue.detail.value.id)}
+                    on:clear={() => (runner = null)}
+                  />
                 </div>
                 <div class="col-span-6">
                   <label
                     for="donation_amount_eur"
-                    class="block text-sm font-medium text-gray-700">
+                    class="block text-sm font-medium text-gray-700"
-                    {$_('distance')}</label>
+                  >
+                    {$_("distance")}</label
+                  >
                   <div class="mt-1 flex rounded-md shadow-sm">
                     <input
                       autocomplete="off"
@@ -156,14 +161,18 @@
                       step="1"
                       name="donation_amount_eur"
                       class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 p-2"
-                      placeholder="400" />
+                      placeholder="400"
+                    />
                     <span
-                      class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm">m</span>
+                      class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm"
+                      >m</span
+                    >
                   </div>
                   {#if !is_distance_valid}
                     <span
-                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-                      {$_('the-scans-distance-must-be-greater-than-0m')}
+                    >
+                      {$_("the-scans-distance-must-be-greater-than-0m")}
                     </span>
                   {/if}
                 </div>
@@ -177,16 +186,18 @@
             class:opacity-50={!createbtnenabled}
             on:click={submit}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
-            {$_('create')}
+          >
+            {$_("create")}
           </button>
           <button
             on:click={() => {
               modal_open = false;
             }}
             type="button"
-            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
+            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
-            {$_('cancel')}
+          >
+            {$_("cancel")}
           </button>
         </div>
       </div>

src/components/scans/ScanDetail.svelte

@@ -1,11 +1,8 @@
 <script>
   import { _ } from "svelte-i18n";
   import store from "../../store";
-  import {
+  import { RunnerService, ScanService } from "@odit/lfk-client-js";
-    RunnerService,
+
-    ScanService,
-  } from "@odit/lfk-client-js";
-  import Toastify from "toastify-js";
   import PromiseError from "../base/PromiseError.svelte";
   import Select from "svelte-select";
   let data_loaded = false;
@@ -31,14 +28,12 @@
       original_data = Object.assign(original_data, data);
       original_data.runner = original_data.runner.id;
       editable = Object.assign(editable, original_data);
-      RunnerService.runnerControllerGetAll().then(
+      RunnerService.runnerControllerGetAll().then((val) => {
-        (val) => {
         current_runners = val.map((r) => {
           return { label: getRunnerLabel(r), value: r };
         });
-          runner = current_runners.find(r => r.value.id == editable.runner);
+        runner = current_runners.find((r) => r.value.id == editable.runner);
-        }
+      });
-      );
     }
   );
   const getRunnerLabel = (option) =>
@@ -49,10 +44,7 @@
 
   function submit() {
     if (data_loaded === true && save_enabled) {
-      Toastify({
+      toast($_("scan-is-being-updated"));
-        text: $_('scan-is-being-updated'),
-        duration: 2500,
-      }).showToast();
       let postdata = {};
       if (original_data.responseType === "TRACKSCAN") {
         postdata = Object.assign(postdata, editable);
@@ -61,11 +53,7 @@
           .then((resp) => {
             Object.assign(original_data, editable);
             original_data = original_data;
-            Toastify({
+            toast.success($_("updated-scan"));
-              text: $_('updated-scan'),
-              duration: 2500,
-              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-            }).showToast();
           })
           .catch((err) => {});
       } else {
@@ -74,11 +62,7 @@
           .then((resp) => {
             Object.assign(original_data, editable);
             original_data = original_data;
-            Toastify({
+            toast.success($_("updated-scan"));
-              text: $_('updated-scan'),
-              duration: 2500,
-              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-            }).showToast();
           })
           .catch((err) => {});
       }
@@ -88,11 +72,7 @@
   function deleteScan() {
     ScanService.scanControllerRemove(original_data.id, false)
       .then((resp) => {
-        Toastify({
+        toast($_("deleted-scan"));
-          text: $_('deleted-scan'),
-          duration: 500,
-          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-        }).showToast();
         location.replace("./");
       })
       .catch((err) => {
@@ -101,10 +81,24 @@
       });
   }
   function format_laptime(laptime) {
-    if(laptime == 0 || laptime == null){return $_('first-scan-of-the-day')}
+    if (laptime == 0 || laptime == null) {
-    if(laptime < 60){return `${laptime}s`}
+      return $_("first-scan-of-the-day");
-    if(laptime < 3600){return `${Math.floor(laptime / 60)}min ${laptime - (Math.floor(laptime / 60)*60)}s`}
+    }
-    return `${Math.floor(laptime / 3600)}h ${laptime - (Math.floor(laptime / 3600)*3600)}min ${laptime - (Math.floor(laptime / 3600)*3600) - (Math.floor(laptime / 60)*60)}`
+    if (laptime < 60) {
+      return `${laptime}s`;
+    }
+    if (laptime < 3600) {
+      return `${Math.floor(laptime / 60)}min ${
+        laptime - Math.floor(laptime / 60) * 60
+      }s`;
+    }
+    return `${Math.floor(laptime / 3600)}h ${
+      laptime - Math.floor(laptime / 3600) * 3600
+    }min ${
+      laptime -
+      Math.floor(laptime / 3600) * 3600 -
+      Math.floor(laptime / 60) * 60
+    }`;
   }
 </script>
 
@@ -122,9 +116,12 @@
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
                 width="24"
-                height="24"><path
+                height="24"
+                ><path
                   fill="currentColor"
-                  d="M2 4h2v16H2V4zm4 0h1v16H6V4zm2 0h2v16H8V4zm3 0h2v16h-2V4zm3 0h2v16h-2V4zm3 0h1v16h-1V4zm2 0h3v16h-3V4z" /></svg>
+                  d="M2 4h2v16H2V4zm4 0h1v16H6V4zm2 0h2v16H8V4zm3 0h2v16h-2V4zm3 0h2v16h-2V4zm3 0h1v16h-1V4zm2 0h3v16h-3V4z"
+                /></svg
+              >
             </li>
             <li class="flex items-center ml-2">
               <a class="mr-2" href="./">Scans</a><svg
@@ -137,12 +134,10 @@
                 class="h-3 w-3 mr-2 stroke-current"
                 height="1em"
                 width="1em"
-                xmlns="http://www.w3.org/2000/svg"><line
+                xmlns="http://www.w3.org/2000/svg"
-                  x1="5"
+                ><line x1="5" y1="12" x2="19" y2="12" />
-                  y1="12"
+                <polyline points="12 5 19 12 12 19" /></svg
-                  x2="19"
+              >
-                  y2="12" />
-                <polyline points="12 5 19 12 12 19" /></svg>
             </li>
             <li class="flex items-center">
               <span class="mr-2">{original_data.id}</span>
@@ -153,20 +148,24 @@
     </div>
     <div class="mb-8 text-3xl font-extrabold leading-tight">
       {runner.value?.firstname}
-      {runner.value?.middlename || ''}
+      {runner.value?.middlename || ""}
       {runner.value?.lastname}
       #{original_data.id}
       <span data-id="donation_actions_${original_data.id}">
-        {#if store.state.jwtinfo.userdetails.permissions.includes('SCAN:DELETE')}
+        {#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:DELETE")}
           {#if delete_triggered}
             <button
               on:click={deleteScan}
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:">{$_('confirm-deletion')}</button>
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:"
+              >{$_("confirm-deletion")}</button
+            >
             <button
               on:click={() => {
                 delete_triggered = !delete_triggered;
               }}
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:">{$_('cancel')}</button>
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:"
+              >{$_("cancel")}</button
+            >
           {/if}
           {#if !delete_triggered}
             <button
@@ -174,7 +173,9 @@
                 delete_triggered = true;
               }}
               type="button"
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:">{$_('delete-scan')}</button>
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:"
+              >{$_("delete-scan")}</button
+            >
           {/if}
         {/if}
         {#if !delete_triggered}
@@ -183,13 +184,16 @@
             class:opacity-50={!save_enabled}
             type="button"
             on:click={submit}
-            class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:">{$_('save-changes')}</button>
+            class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:"
+            >{$_("save-changes")}</button
+          >
         {/if}
       </span>
     </div>
     <!--  -->
     <div class="w-full inline-flex">
-      <label for="valid" class="block font-medium text-gray-700">{$_('status')}:
+      <label for="valid" class="block font-medium text-gray-700"
+        >{$_("status")}:
       </label>
       &nbsp;
       <input
@@ -200,49 +204,57 @@
         name="valid"
         type="checkbox"
         checked={editable.valid}
-        class="focus:ring-indigo-500 align-bottom h-7 w-5font-medium text-indigo-600 border-gray-300 rounded" />
+        class="focus:ring-indigo-500 align-bottom h-7 w-5font-medium text-indigo-600 border-gray-300 rounded"
+      />
       &nbsp;
       <p class="font-medium">
-        {#if editable.valid}{$_('valid')}{:else}{$_('invalid')}{/if}
+        {#if editable.valid}{$_("valid")}{:else}{$_("invalid")}{/if}
       </p>
     </div>
-    {#if editable.responseType === 'TRACKSCAN'}
+    {#if editable.responseType === "TRACKSCAN"}
       <div class="w-full inline-flex">
-        <label for="valid" class="block font-semibold text-gray-700">{$_('track')}:
+        <label for="valid" class="block font-semibold text-gray-700"
+          >{$_("track")}:
         </label>
         <a
           href="../tracks"
-          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{editable.track.name}
+          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
+          >{editable.track.name}
         </a>
       </div>
       <div class="w-full inline-flex pb-3">
-        <label for="valid" class="block font-semibold text-gray-700">{$_('laptime')}: {format_laptime(editable.laptime)}
+        <label for="valid" class="block font-semibold text-gray-700"
+          >{$_("laptime")}: {format_laptime(editable.laptime)}
         </label>
       </div>
     {/if}
     <div class=" w-full">
-      <label
+      <label for="runner" class="block font-medium text-gray-700"
-        for="runner"
+        >{$_("runner")}</label
-        class="block font-medium text-gray-700">{$_('runner')}</label>
+      >
       <Select
         containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-        itemFilter={(label, filterText, option) => filterRunners(label, filterText, option)}
+        itemFilter={(label, filterText, option) =>
+          filterRunners(label, filterText, option)}
         items={current_runners}
         showChevron={true}
-        isDisabled={editable.responseType === 'TRACKSCAN'}
+        isDisabled={editable.responseType === "TRACKSCAN"}
-        placeholder={$_('search-for-runner-by-name-or-id')}
+        placeholder={$_("search-for-runner-by-name-or-id")}
-        noOptionsMessage={$_('no-runners-found')}
+        noOptionsMessage={$_("no-runners-found")}
         bind:selectedValue={runner}
         on:select={(selectedValue) => {
           editable.runner = selectedValue.detail.value.id;
         }}
-        on:clear={() => (editable.runner = null)} />
+        on:clear={() => (editable.runner = null)}
+      />
     </div>
     <div class=" w-full">
       <label
         for="scan_distance"
-        class="block text-sm font-medium text-gray-700">
+        class="block text-sm font-medium text-gray-700"
-        {$_('distance')}</label>
+      >
+        {$_("distance")}</label
+      >
       <div class="mt-1 flex rounded-md shadow-sm">
         <input
           autocomplete="off"
@@ -250,19 +262,23 @@
           class:focus:border-red-500={!is_distance_valid}
           class:focus:ring-red-500={!is_distance_valid}
           bind:value={editable.distance}
-          disabled={editable.responseType === 'TRACKSCAN'}
+          disabled={editable.responseType === "TRACKSCAN"}
           type="number"
           step="1"
           name="scan_distance"
           class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 p-2"
-          placeholder="400" />
+          placeholder="400"
+        />
         <span
-          class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm">m</span>
+          class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm"
+          >m</span
+        >
       </div>
       {#if !is_distance_valid}
         <span
-          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
-          {$_('the-scans-distance-must-be-greater-than-0m')}
+        >
+          {$_("the-scans-distance-must-be-greater-than-0m")}
         </span>
       {/if}
     </div>

src/components/scans/Scans.svelte

@@ -10,23 +10,27 @@
 
 <section class="container p-5">
   <span class="mb-1 text-3xl font-extrabold leading-tight">
-    {$_('scans')}
+    {$_("scans")}
-    {#if store.state.jwtinfo.userdetails.permissions.includes('SCAN:CREATE')}
+    {#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:CREATE")}
       <button
         on:click={() => {
           modal_open = true;
         }}
         type="button"
-        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
+        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
-       {$_('add-scan')}
+      >
+        {$_("add-scan")}
       </button>
     {/if}
   </span>
   <ScansOverview bind:current_scans bind:addScans />
 </section>
 
-{#if store.state.jwtinfo.userdetails.permissions.includes('SCAN:CREATE')}
+{#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:CREATE")}
-  <AddScanModal bind:modal_open on:created={(event)=>{
+  <AddScanModal
-    addScans(event.detail.scans)
+    bind:modal_open
-  }} />
+    on:created={(event) => {
+      addScans(event.detail.scans);
+    }}
+  />
 {/if}

src/components/scans/ScansEmptyState.svelte

@@ -6,7 +6,7 @@
 <div class="text-center items-center justify-center">
   <p class="mb-16 text-lg text-gray-500">
     <img class="m-auto" style="height:15rem" src={scans_empty} alt="" />
-    <span class="font-bold">{$_('there-are-no-scans-yet')}</span><br />
+    <span class="font-bold">{$_("there-are-no-scans-yet")}</span><br />
-    <span>{$_('add-your-fist-scan')}</span>
+    <span>{$_("add-your-fist-scan")}</span>
   </p>
 </div>

src/components/scans/ScansOverview.svelte

@@ -13,7 +13,7 @@
   } from "@tanstack/svelte-table";
   import { onMount } from "svelte";
   import { writable } from "svelte/store";
-  import Toastify from "toastify-js";
+
   import TableBottom from "../shared/TableBottom.svelte";
   import TableHeader from "../shared/TableHeader.svelte";
   import ScansEmptyState from "./ScansEmptyState.svelte";
@@ -23,6 +23,7 @@
   import CardRunner from "../cards/CardRunner.svelte";
   import ScanValid from "./ScanValid.svelte";
   import DeleteScanModal from "./DeleteScanModal.svelte";
+  import toast from "svelte-french-toast";
 
   $: selectedScans =
     $table?.getSelectedRowModel().rows.map((row) => row.original) || [];
@@ -48,21 +49,15 @@
     if (laptime == 0 || laptime == null) {
       return $_("first-scan-of-the-day");
     }
-    if (laptime < 60) {
+    laptime = Number(laptime);
-      return `${laptime}s`;
+    const h = Math.floor(laptime / 3600);
-    }
+    const m = Math.floor((laptime % 3600) / 60);
-    if (laptime < 3600) {
+    const s = Math.floor((laptime % 3600) % 60);
-      return `${Math.floor(laptime / 60)}min ${
+
-        laptime - Math.floor(laptime / 60) * 60
+    const hDisplay = h > 0 ? h + (h == 1 ? "h, " : "h, ") : "";
-      }s`;
+    const mDisplay = m > 0 ? m + (m == 1 ? "min, " : "min, ") : "";
-    }
+    const sDisplay = s > 0 ? s + (s == 1 ? "s" : "s") : "";
-    return `${Math.floor(laptime / 3600)}h ${
+    return hDisplay + mDisplay + sDisplay;
-      laptime - Math.floor(laptime / 3600) * 3600
-    }min ${
-      laptime -
-      Math.floor(laptime / 3600) * 3600 -
-      Math.floor(laptime / 60) * 60
-    }`;
   }
 
   const columns = [
@@ -91,7 +86,17 @@
       accessorKey: "timestamp",
       header: () => $_("timestamp"),
       cell: (info) => {
-        return new Date(parseInt(info.getValue()) * 1000).toLocaleString();
+        return new Date(parseInt(info.getValue()) * 1000).toLocaleString(
+          { language: "de-DE" },
+          {
+            day: "2-digit",
+            month: "2-digit",
+            year: "numeric",
+            hour: "2-digit",
+            minute: "2-digit",
+            second: "2-digit",
+          }
+        );
       },
       enableColumnFilter: false,
     },
@@ -169,17 +174,14 @@
       ...options,
       data: current_scans,
     }));
-    Toastify({
+    toast($_("scan-deleted"));
-      text: $_("scan-deleted"),
-      duration: 3500,
-      backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-    }).showToast();
   }
 
   onMount(async () => {
     let page = 0;
+    let pagesize = 100;
     while (page >= 0) {
-      const scans = await ScanService.scanControllerGetAll(page, 500);
+      const scans = await ScanService.scanControllerGetAll(page, pagesize);
       if (scans.length == 0) {
         page = -2;
       }
@@ -192,8 +194,10 @@
 
       dataLoaded = true;
       page++;
+      if (pagesize < 1000) {
+        pagesize += 100;
+      }
     }
-    console.log("All scans loaded");
   });
 </script>
 
@@ -235,11 +239,7 @@
             data: current_scans,
           }));
           $table.resetRowSelection();
-          Toastify({
+          toast.success($_("scan-deleted"));
-            text: $_("scan-deleted"),
-            duration: 3500,
-            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-          }).showToast();
         }}
       >
         {$_("delete-scans")}
@@ -261,7 +261,7 @@
     {/if}
     <div class="overflow-x-auto">
       <table class="w-full">
-        <thead>
+        <thead class="border-b border-gray-400">
           {#each $table.getHeaderGroups() as headerGroup}
             <tr class="select-none">
               <th class="inset-y-0 left-0 px-4 py-2 text-left w-px">
@@ -280,7 +280,7 @@
         </thead>
         <tbody>
           {#each $table.getRowModel().rows as row}
-            <tr>
+            <tr class="odd:bg-white even:bg-gray-100">
               <td class="inset-y-0 left-0 px-4 py-2 text-center w-px">
                 <InputElement
                   type="checkbox"
@@ -306,3 +306,9 @@
     <TableBottom {table} {selected} />
   {/if}
 {/if}
+
+<style>
+  table tbody tr td:nth-child(2) {
+    font-family: monospace;
+  }
+</style>

src/components/scans/ThFilterRunner.svelte

@@ -1,50 +0,0 @@
-<script>
-  export let handler;
-  let filterValue = "";
-</script>
-
-<th>
-  <input
-    on:input={() => {
-      setTimeout(() => {
-        const v = filterValue.toLowerCase();
-        handler.filter(v, (c) => {
-          if (v.startsWith("#")) {
-            return `#${c.runner?.id}`;
-          }
-          if (c.runner) {
-            let runnerName = `${c.runner.firstname} ${c.runner.lastname}`;
-            if (c.runner.middlename) {
-              runnerName = `${c.runner.firstname} ${c.runner.middlename} ${c.runner.lastname}`;
-            }
-            runnerName = runnerName.toLowerCase();
-            return runnerName;
-          }
-          return "";
-        });
-      }, 150);
-    }}
-    placeholder="Filter"
-    bind:value={filterValue}
-    type="text"
-    name="runnerfilter"
-    id="runnerfilter"
-  />
-</th>
-
-<style>
-  th {
-    border-bottom: 1px solid #e0e0e0;
-  }
-  input {
-    margin: -1px 0 0 0;
-    padding: 0;
-    width: 100%;
-    height: 24px;
-    border: none;
-    text-align: left;
-    background: inherit;
-    outline: 0;
-    font-size: 14px;
-  }
-</style>

src/components/scans/ThFilterTrack.svelte

@@ -1,31 +0,0 @@
-<script>
-  import { _ } from "svelte-i18n";
-  export let tracks;
-  export let handler;
-  let selected = "all";
-</script>
-
-<th style="border-bottom: 1px solid #ddd;">
-  <select
-    on:input={() => {
-      setTimeout(() => {
-        if (`${selected}`.trim()) {
-          const value = selected;
-          handler.filter(value, (scan) => {
-            // TODO: fix filter
-            if (scan.track.id === value || value === "all") return scan.track.id;
-            return "";
-          });
-        }
-      }, 50);
-    }}
-    bind:value={selected}
-    name="trackfilter"
-    id="trackfilter"
-  >
-    <option value="all">{$_("all")}</option>
-    {#each tracks as track}
-      <option value={track.id}>{track.name}</option>
-    {/each}
-  </select>
-</th>

src/components/scanstations/AddScanStationModal.svelte

@@ -3,8 +3,8 @@
   import { clickOutside } from "../base/outsideclick";
 
   import { ScanStationService, TrackService } from "@odit/lfk-client-js";
-  import Toastify from "toastify-js";
   import Select from "svelte-select";
+  import toast from "svelte-french-toast";
   export let modal_open;
   export let new_station;
   export let current_stations;
@@ -40,10 +40,7 @@
   function submit() {
     if (processed_last_submit === true) {
       processed_last_submit = false;
-      const toast = Toastify({
+      toast.loading($_("scanstation-is-being-added"));
-        text: $_("scanstation-is-being-added"),
-        duration: -1,
-      }).showToast();
       let postdata = {
         description,
         enabled,
@@ -56,11 +53,8 @@
           enabled = true;
           modal_open = false;
           //
-          Toastify({
+          toast.dismiss();
-            text: $_("scanstation-added"),
+          toast.success($_("scanstation-added"));
-            duration: 500,
-            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-          }).showToast();
           current_stations.push(result);
           current_stations = current_stations;
           new_station = result;
@@ -71,8 +65,6 @@
         })
         .finally(() => {
           processed_last_submit = true;
-          //
-          toast.hideToast();
         });
     }
   }
@@ -81,87 +73,101 @@
 {#if modal_open}
   <div
     class="fixed z-10 inset-0 overflow-y-auto"
-    
     use:clickOutside
     on:click_outside={() => {
       modal_open = false;
-    }}>
+    }}
+  >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+    >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
           class="absolute inset-0 bg-gray-500 opacity-75"
-          data-id="modal_backdrop" />
+          data-id="modal_backdrop"
+        />
       </div>
       <span
         class="hidden sm:inline-block sm:align-middle sm:h-screen"
-        aria-hidden="true">&#8203;</span>
+        aria-hidden="true">&#8203;</span
+      >
       <div
         class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
         role="dialog"
         aria-modal="true"
-        aria-labelledby="modal-headline">
+        aria-labelledby="modal-headline"
+      >
         <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
           <div class="sm:flex sm:items-start">
             <div
-              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
+              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
+            >
               <svg
                 class="h-6 w-6 text-blue-600"
                 fill="currentColor"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
                 width="24"
-                height="24"><path fill="none" d="M0 0h24v24H0z" />
+                height="24"
+                ><path fill="none" d="M0 0h24v24H0z" />
                 <path
-                  d="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z" /></svg>
+                  d="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z"
+                /></svg
+              >
             </div>
             <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
-                {$_('create-a-new-scanstation')}
+                {$_("create-a-new-scanstation")}
               </h3>
               <div class="mt-2 mb-6">
                 <p class="text-sm text-gray-500">
-                  {$_('please-provide-the-required-information-to-create-a-new-scanstation')}
+                  {$_(
+                    "please-provide-the-required-information-to-create-a-new-scanstation"
+                  )}
                 </p>
               </div>
               <div class="grid grid-cols-6 gap-6">
                 <div class="col-span-6">
                   <label
                     for="track"
-                    class="block text-sm font-medium text-gray-700">Track</label>
+                    class="block text-sm font-medium text-gray-700">Track</label
+                  >
                   <Select
                     containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
-                    itemFilter={(label, filterText, option) => label
+                    itemFilter={(label, filterText, option) =>
-                        .toLowerCase()
+                      label.toLowerCase().includes(filterText.toLowerCase()) ||
-                        .includes(
+                      option.value.id
-                          filterText.toLowerCase()
-                        ) || option.value.id
                         .toString()
                         .startsWith(filterText.toLowerCase())}
                     items={tracks}
                     showChevron={true}
                     placeholder="Search for a track (by name or id)."
                     noOptionsMessage="No track found"
-                    on:select={(selectedValue) => (track = selectedValue.detail.value.id)}
+                    on:select={(selectedValue) =>
-                    on:clear={() => (track = null)} />
+                      (track = selectedValue.detail.value.id)}
+                    on:clear={() => (track = null)}
+                  />
                 </div>
                 <div class="col-span-6">
                   <label
                     for="description"
-                    class="block text-sm font-medium text-gray-700">{$_('description')}</label>
+                    class="block text-sm font-medium text-gray-700"
+                    >{$_("description")}</label
+                  >
                   <input
                     use:focus
                     autocomplete="off"
-                    placeholder={$_('description')}
+                    placeholder={$_("description")}
                     bind:value={description}
                     type="text"
                     name="description"
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                  />
                 </div>
                 <div class="col-span-6">
-                  <label
+                  <label for="enabled" class="font-medium text-gray-700"
-                    for="enabled"
+                    >{$_("enabled_large")}</label
-                    class="font-medium text-gray-700">{$_('enabled_large')}</label>
+                  >
                   <br />
                   <p class="text-gray-500">
                     <input
@@ -172,9 +178,10 @@
                       name="enabled"
                       type="checkbox"
                       checked={enabled}
-                      class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
+                      class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
-                    {$_('this-scanstation-is')}
+                    />
-                    {#if enabled}{$_('enabled')}{:else}{$_('disabled')}{/if}
+                    {$_("this-scanstation-is")}
+                    {#if enabled}{$_("enabled")}{:else}{$_("disabled")}{/if}
                   </p>
                 </div>
               </div>
@@ -187,16 +194,18 @@
             class:opacity-50={!createbtnenabled}
             on:click={submit}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
-            {$_('create')}
+          >
+            {$_("create")}
           </button>
           <button
             on:click={() => {
               modal_open = false;
             }}
             type="button"
-            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
+            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
-            {$_('cancel')}
+          >
+            {$_("cancel")}
           </button>
         </div>
       </div>

src/components/scanstations/ConfirmScanStationDeletion.svelte

@@ -3,8 +3,8 @@
   import { clickOutside } from "../base/outsideclick";
 
   import { ScanStationService } from "@odit/lfk-client-js";
-  import Toastify from "toastify-js";
   import { createEventDispatcher } from "svelte";
+  import toast from "svelte-french-toast";
   export let modal_open;
   export let delete_station;
   const dispatch = createEventDispatcher();
@@ -13,16 +13,9 @@
     dispatch("cancelDelete", { id: delete_station.id });
   }
   function deleteStation() {
-    ScanStationService.scanStationControllerRemove(
+    ScanStationService.scanStationControllerRemove(delete_station.id, true)
-      delete_station.id,
-      true
-    )
       .then((resp) => {
-        Toastify({
+        toast($_("station-deleted"));
-          text: $_('station-deleted'),
-          duration: 500,
-          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-        }).showToast();
         location.replace("./");
       })
       .catch((err) => {});
@@ -32,41 +25,54 @@
 {#if modal_open}
   <div
     class="fixed z-10 inset-0 overflow-y-auto"
-    
     use:clickOutside
-    on:click_outside={cancelDelete}>
+    on:click_outside={cancelDelete}
+  >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+    >
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div
           class="absolute inset-0 bg-gray-500 opacity-75"
-          data-id="modal_backdrop" />
+          data-id="modal_backdrop"
+        />
       </div>
       <span
         class="hidden sm:inline-block sm:align-middle sm:h-screen"
-        aria-hidden="true">&#8203;</span>
+        aria-hidden="true">&#8203;</span
+      >
       <div
         class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
         role="dialog"
         aria-modal="true"
-        aria-labelledby="modal-headline">
+        aria-labelledby="modal-headline"
+      >
         <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
           <div class="sm:flex sm:items-start">
             <div
-              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
+              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
-              <svg class="h-6 w-6 text-blue-600" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z"/></svg>
+            >
+              <svg
+                class="h-6 w-6 text-blue-600"
+                fill="currentColor"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                ><path fill="none" d="M0 0h24v24H0z" /><path
+                  d="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z"
+                /></svg
+              >
             </div>
             <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
-                {$_('attention')}
+                {$_("attention")}
               </h3>
               <div class="mt-2 mb-6">
                 <p class="text-sm text-gray-500">
                   {$_(
-                    'do-you-want-to-delete-this-donor-with-all-related-donations'
+                    "do-you-want-to-delete-this-donor-with-all-related-donations"
                   )}
                   <br />
-                  {$_('all-associated-scans-will-get-deleted-as-well')}
+                  {$_("all-associated-scans-will-get-deleted-as-well")}
                 </p>
               </div>
             </div>
@@ -76,14 +82,16 @@
           <button
             on:click={deleteStation}
             type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
-            {$_('confirm-delete-station-with-all-scans')}
+          >
+            {$_("confirm-delete-station-with-all-scans")}
           </button>
           <button
             on:click={cancelDelete}
             type="button"
-            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
+            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
-            {$_('cancel-keep-station')}
+          >
+            {$_("cancel-keep-station")}
           </button>
         </div>
       </div>