Merge branch 'dev' of git.odit.services:lfk/frontend into dev

Reviewed-on: #117

CHANGELOG.md

@@ -2,8 +2,110 @@
 
 All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 
+#### [0.11.0](https://git.odit.services/lfk/frontend/compare/0.10.0...0.11.0)
+
+- Merge pull request 'Generate and print bulk blank cards feature/116-download_blanc_cards' (#117) from feature/116-download_blanc_cards into dev [`25d8b86`](https://git.odit.services/lfk/frontend/commit/25d8b86efd89c442d1bf308a8743134820acfd1f)
+- Added button (including translations [`0614c76`](https://git.odit.services/lfk/frontend/commit/0614c76e924b18b512bab59933a26fec07cf483d)
+- Added button (including translations [`97e338f`](https://git.odit.services/lfk/frontend/commit/97e338f9d4f388596d550990457254c7fa1a3492)
+- Sorted translations [`89bb9c2`](https://git.odit.services/lfk/frontend/commit/89bb9c215e356e0940678f5cabd9e38bc203040e)
+- Added function for generating cards with pdf [`c8d6390`](https://git.odit.services/lfk/frontend/commit/c8d639024a5f2f72d6e30d2ce990b08bd71a5471)
+- Fixed button styling [`08cb079`](https://git.odit.services/lfk/frontend/commit/08cb079e9798392e26515d559af2637e74deea97)
+- Now returning cards on creation with pdf [`1d999d4`](https://git.odit.services/lfk/frontend/commit/1d999d4910acb5efa21b3f9922cdb359babff404)
+- Added comment [`636f018`](https://git.odit.services/lfk/frontend/commit/636f018daa33b99468a257bfc33477e1e644d081)
+- Bumped lfk client js version [`2d18686`](https://git.odit.services/lfk/frontend/commit/2d18686ce782a434ca7bd34c07c36a35b9497273)
+- Bumped lfk-client-js [`7dfaa75`](https://git.odit.services/lfk/frontend/commit/7dfaa7579a22b13194fcdd1c02b4437958261472)
+
+#### [0.10.0](https://git.odit.services/lfk/frontend/compare/0.9.1...0.10.0)
+
+> 26 March 2021
+
+- Added translations [`79c447b`](https://git.odit.services/lfk/frontend/commit/79c447b4c65e55ebb5af71fb0b09174c36e2cecf)
+- Sorted translations 🌍 [`5bd3a46`](https://git.odit.services/lfk/frontend/commit/5bd3a463f00abaf2c98ab554f88e5542d01f364a)
+- Reset can now only be triggered if pw is strong enoug [`75d8f73`](https://git.odit.services/lfk/frontend/commit/75d8f7331b6ae78f3979bb62148188a16f83cb8d)
+- Module now exports functions that check if a password is strong enough and equal to a potential confirmation field [`b2509e9`](https://git.odit.services/lfk/frontend/commit/b2509e9e53ab6b51dfd55e26712e8928160cd64b)
+- 🚀RELEASE v0.10.0 [`f7fc196`](https://git.odit.services/lfk/frontend/commit/f7fc1967a50f302af1d8b668628be2f4ab2975a3)
+- Added more cirteria to the password strength component [`5fa9939`](https://git.odit.services/lfk/frontend/commit/5fa9939696a35d60d762feb0cebef61d31869218)
+- Now using pw strength component [`6aaf838`](https://git.odit.services/lfk/frontend/commit/6aaf8384512185a3a319ce6b3e2505e910468e64)
+- Added a password strength verification [`ad3bd31`](https://git.odit.services/lfk/frontend/commit/ad3bd312e9a5785f81029ea2b7e302ea1addd988)
+- Implemented a custom password strength component [`4956bb0`](https://git.odit.services/lfk/frontend/commit/4956bb0e9c3c1d22d60e849aea5664e35330f897)
+- User creation can now only be triggered if pw is strong enoug [`540304f`](https://git.odit.services/lfk/frontend/commit/540304f947f60a7072c592ca8088996ce7e95cb4)
+- Now using pw strength component for user creation [`7862f44`](https://git.odit.services/lfk/frontend/commit/7862f446532903f1a2eac7b21d5c80c3245785e5)
+- Added missing exports [`962dd0c`](https://git.odit.services/lfk/frontend/commit/962dd0c1bbc0df7f20bcec5b4247188c8935c87e)
+- new license file version [CI SKIP] [`aedb8a7`](https://git.odit.services/lfk/frontend/commit/aedb8a765ba053545adbba9eb014b3bb0e5aac8c)
+- Bumped lfk-client version 🔝 [`cf58bd1`](https://git.odit.services/lfk/frontend/commit/cf58bd15c3541c417ab2be83d96135e931a2b6f6)
+- new license file version [CI SKIP] [`34f4f68`](https://git.odit.services/lfk/frontend/commit/34f4f68524918fd3d1963966a1e259d5b60efaca)
+- Merge pull request 'Implemented password strength test feature/106-password_strength' (#115) from feature/106-password_strength into dev [`09b8144`](https://git.odit.services/lfk/frontend/commit/09b81440804cf98303fcb723a9717d6d0f432da8)
+- Formatting🛠 [`4167819`](https://git.odit.services/lfk/frontend/commit/4167819e7a864d3b1dd95ba48ab1525a454f7f30)
+- Now using pw strength component for reset [`5d5f7c7`](https://git.odit.services/lfk/frontend/commit/5d5f7c7f5c6a69146f41996f4facfeff95791be0)
+
+#### [0.9.1](https://git.odit.services/lfk/frontend/compare/0.9.0...0.9.1)
+
+> 26 March 2021
+
+- 🚀RELEASE v0.9.1 [`2ca63fd`](https://git.odit.services/lfk/frontend/commit/2ca63fd1f675f0da2b18ba43095074dd4823991d)
+- Merge pull request 'Org selfservice Link feature/112-org_registration_links' (#114) from feature/112-org_registration_links into dev [`a5d25e7`](https://git.odit.services/lfk/frontend/commit/a5d25e7d92c7c37e90dbb4ba74b787873f920c6b)
+- Added checkbox to enable registration [`f9fe793`](https://git.odit.services/lfk/frontend/commit/f9fe79357317653b46c09eb95b0db13845cddcf9)
+- Sorted translations [`c074c12`](https://git.odit.services/lfk/frontend/commit/c074c12be75f285612f7a732c106404d9fb4538a)
+- You can now copy the selfservice links to your clipboard [`fcd55f8`](https://git.odit.services/lfk/frontend/commit/fcd55f89d72e6ceb9bb2bdd194cc3420145d6d0d)
+- Formatting [`f185d55`](https://git.odit.services/lfk/frontend/commit/f185d559c0d6476f2f2b9ea74aaad3297411801d)
+- Copy now 100% worX [`a3921b4`](https://git.odit.services/lfk/frontend/commit/a3921b45c70b410293db593a75d2fdd34c131733)
+- Fixed changes in wrong file [`73d95bc`](https://git.odit.services/lfk/frontend/commit/73d95bc0042f8f586ba2f2345342e25da1d280c2)
+- Added check if key exists [`c2d29ff`](https://git.odit.services/lfk/frontend/commit/c2d29ff233f6b3e9dd2555b7e0b845592da2ba35)
+- Added check if key exists [`2316baa`](https://git.odit.services/lfk/frontend/commit/2316baa8984832382be9f3b4549ca62cf9ccb5a3)
+- Added translations [`ddbc293`](https://git.odit.services/lfk/frontend/commit/ddbc293e9ca0525910bf3d995de970ee2c35c56a)
+- new license file version [CI SKIP] [`ded9b58`](https://git.odit.services/lfk/frontend/commit/ded9b589fe087915176c5b54f3c55e412541bc8f)
+- Merge pull request 'first merge to main 🚀' (#71) from dev into main [`9aa8e7e`](https://git.odit.services/lfk/frontend/commit/9aa8e7edffa7e51b00a5ab7a8f16828b7a469181)
+
+#### [0.9.0](https://git.odit.services/lfk/frontend/compare/0.8.7...0.9.0)
+
+> 26 March 2021
+
+- 🚀RELEASE v0.9.0 [`67c3732`](https://git.odit.services/lfk/frontend/commit/67c3732fad5a7c64ae11dcbebaaa095e1a2b387c)
+- Merge pull request 'Runner cards feature/94-runnercard_mgnt' (#111) from feature/94-runnercard_mgnt into dev [`2932f45`](https://git.odit.services/lfk/frontend/commit/2932f4591e62187a4903511051d110e9679c0993)
+- Sorted translations 🌍 [`1665a1a`](https://git.odit.services/lfk/frontend/commit/1665a1a093862a13be78ec65dcdf64eb7d855593)
+- Added translations [`6b5945a`](https://git.odit.services/lfk/frontend/commit/6b5945add86a77630c500872545bb91724b2047f)
+- Sorted translations 🌍 [`d6c315a`](https://git.odit.services/lfk/frontend/commit/d6c315ab8e020bc65b967e2c3f4cd921392d66d5)
+- Sorted translations [`de2fe0e`](https://git.odit.services/lfk/frontend/commit/de2fe0e9f171efb3deeea8cfe638f60e3ca90423)
+- Added basic cards page [`5c5ef95`](https://git.odit.services/lfk/frontend/commit/5c5ef95d2be65c0e951dcd472113c8ce0593c9e0)
+- Moved contract generation to it's own component [`0cfc87f`](https://git.odit.services/lfk/frontend/commit/0cfc87fbe6adfacab5c2fab732866aead3231fbf)
+- Teams now use the new sponsoring contracts module [`014ba3b`](https://git.odit.services/lfk/frontend/commit/014ba3bf6718ff28f35c67c8f732b53aae50723c)
+- Basic card generation worX 🎉🎉 [`d467475`](https://git.odit.services/lfk/frontend/commit/d467475b6d61d50bec3a043ea8792533e8593df6)
+- Orgs now use the new sponsoring contracts module [`8b451b3`](https://git.odit.services/lfk/frontend/commit/8b451b3c6794e7df09898a687533ce8fadd56192)
+- Added runnercard detail/edit modal [`0313f8c`](https://git.odit.services/lfk/frontend/commit/0313f8cc495088df1237d00e6b9ed1a94f019644)
+- Implemented Add card modal [`535b23a`](https://git.odit.services/lfk/frontend/commit/535b23ae917de154e08962f5d486c50d6e091fe0)
+- Added bulk card creation modal [`8a32569`](https://git.odit.services/lfk/frontend/commit/8a32569a3be1ad26ba163f4e2b67a368cfeeb422)
+- Added basic card overview [`c6a1526`](https://git.odit.services/lfk/frontend/commit/c6a15264b3d13d516f3d97ea4b891ed1c328cead)
+- Fixed org generation not hiding the generation toast [`c87321f`](https://git.odit.services/lfk/frontend/commit/c87321f804858f84fcccd85a15b9c3fb003c18be)
+- Working runner runnercard generation [`c907486`](https://git.odit.services/lfk/frontend/commit/c907486c4d1c64114124deb3cd0d0cf11d38a6b1)
+- Implemented bulk creation [`7ad6b73`](https://git.odit.services/lfk/frontend/commit/7ad6b73574174f24f2d6f23b3caf4823881a85e7)
+- Now w/ working dialog🎉🎉🎉 [`ae96730`](https://git.odit.services/lfk/frontend/commit/ae9673070c3959ff6190a37123f3fc609b182c5a)
+- Now w/working editing [`fac059f`](https://git.odit.services/lfk/frontend/commit/fac059f02cae84261443ee95448ec8db06dd755a)
+- Added runnercard generation for teams [`23e0b53`](https://git.odit.services/lfk/frontend/commit/23e0b53107623c505d07a99a51ce836c9324acce)
+- Added bulk creation modal to cards view [`f46ccb6`](https://git.odit.services/lfk/frontend/commit/f46ccb610e01654a4ee5e47d78ab500045dd494b)
+- Added a new runenrcard logo [`acf78a8`](https://git.odit.services/lfk/frontend/commit/acf78a88221d0988f6501ae341e028a4113b578d)
+- Moved modal import to overview for simplification [`1a52aaf`](https://git.odit.services/lfk/frontend/commit/1a52aaf8d1ad19b03d355aec0e1c48182db024f9)
+- Added CardsEmptyState + Emtystate graphic [`2d0beaa`](https://git.odit.services/lfk/frontend/commit/2d0beaaaad4efefd036bbef09f10c8c22bdb2760)
+- Added message for missing runner/blanco card) [`4715978`](https://git.odit.services/lfk/frontend/commit/4715978f810bbb283876f06d147b1ec86d373786)
+- Fixed counting bug [`f5c1ec9`](https://git.odit.services/lfk/frontend/commit/f5c1ec9939d856804c9ec3ead4b3ed869fc2ea63)
+- Added card generation/printing from detail [`4a36fb6`](https://git.odit.services/lfk/frontend/commit/4a36fb6d952d9fe4d5edbe1ed0779c7fbcd50ef0)
+- Formatting [`a516aa7`](https://git.odit.services/lfk/frontend/commit/a516aa7775faa2244862bb2e3c4de623c6405e5b)
+- Moved the pdf generation related componenets to their own folder [`ddd82a7`](https://git.odit.services/lfk/frontend/commit/ddd82a71a7b67ead892626addfd56ba4cc632750)
+- Now routing the cards page [`e852305`](https://git.odit.services/lfk/frontend/commit/e852305400a139f8169350077c30012aed556828)
+- Fuggin snowpack bs [`44bc148`](https://git.odit.services/lfk/frontend/commit/44bc14820fed26d5e0d8b12ecd6b46ca0608ae7b)
+- Formatting [`9f7d223`](https://git.odit.services/lfk/frontend/commit/9f7d2234fb9603a7391ec9a64253724c2c25c333)
+- Now with working org runenrcard generation [`4b3d38b`](https://git.odit.services/lfk/frontend/commit/4b3d38b05b3ed74fc3c0d77e00fa2ed245e6325c)
+- Now importing runner overview [`77e9c20`](https://git.odit.services/lfk/frontend/commit/77e9c205f94cf56c2e3584444899adb1e8bdf3c6)
+- CardsOverview - move to 'enabled' language key [`df53c07`](https://git.odit.services/lfk/frontend/commit/df53c0745035a220d4c07fdce1b5a5e4d763411d)
+- ✒ typo - "Geb" -> "Gebe" [`f794af0`](https://git.odit.services/lfk/frontend/commit/f794af0950de59a7a7b468c30abdcb5c145f65fb)
+- Bumped lfk client lib version [`3cd0468`](https://git.odit.services/lfk/frontend/commit/3cd0468b1921824b131178cb02677540b079f9b0)
+- drop console log - CardDetailModal [`40899e9`](https://git.odit.services/lfk/frontend/commit/40899e9d80ba07a3fbbcac72782db53d98dc318e)
+- Removed debug info [`55693de`](https://git.odit.services/lfk/frontend/commit/55693de93420c2d76af296fcacc6bcad644a3cbf)
+
 #### [0.8.7](https://git.odit.services/lfk/frontend/compare/0.8.6...0.8.7)
 
+> 25 March 2021
+
+- 🚀RELEASE v0.8.7 [`0af2647`](https://git.odit.services/lfk/frontend/commit/0af26479656393b0baea88f6f83c778740a67e62)
 - Fixed listen on wrong permission🐞 [`0844215`](https://git.odit.services/lfk/frontend/commit/08442154f4bf94fc1101808b4585dc1f95afe8b2)
 
 #### [0.8.6](https://git.odit.services/lfk/frontend/compare/0.8.5...0.8.6)

index.template.html

@@ -14,7 +14,7 @@
 </head>
 
 <body>
-  <span style="display: none;visibility: hidden;" id="buildinfo">RELEASE_INFO-0.8.7-RELEASE_INFO</span>
+  <span style="display: none;visibility: hidden;" id="buildinfo">RELEASE_INFO-0.11.0-RELEASE_INFO</span>
   <noscript>You need to enable JavaScript to run this app.</noscript>
   <script src="/env.js"></script>
   <script defer type="module" src="/_dist_/index.js"></script>

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@odit/lfk-frontend",
-	"version": "0.8.7",
+	"version": "0.11.0",
 	"scripts": {
 		"i18n-order": "node order.js",
 		"dev:all": "yarn prebuild && snowpack dev",
@@ -13,7 +13,8 @@
 	},
 	"license": "CC-BY-NC-SA-4.0",
 	"dependencies": {
-		"@odit/lfk-client-js": "0.6.4",
+		"@odit/lfk-client-js": "0.9.2",
+		"check-password-strength": "^2.0.2",
 		"csvtojson": "^2.0.10",
 		"gridjs": "3.3.0",
 		"localforage": "1.9.0",

src/App.svelte

@@ -69,11 +69,11 @@
   import Donations from "./components/donations/Donations.svelte";
   import DonationDetail from "./components/donations/DonationDetail.svelte";
   import GroupDetail from "./components/groups/GroupDetail.svelte";
-  import ScanStationsOverview from "./components/scanstations/ScanStationsOverview.svelte";
   import ScanStations from "./components/scanstations/ScanStations.svelte";
   import ScanStationDetail from "./components/scanstations/ScanStationDetail.svelte";
   import Scans from "./components/scans/Scans.svelte";
-import ScanDetail from "./components/scans/ScanDetail.svelte";
+  import ScanDetail from "./components/scans/ScanDetail.svelte";
+  import Cards from "./components/cards/Cards.svelte";
   store.init();
   registerSW();
 </script>
@@ -185,6 +185,14 @@ import ScanDetail from "./components/scans/ScanDetail.svelte";
             <DonationDetail {params} />
           </Route>
         </Route>
+        <Route path="/cards/*">
+          <Route path="/">
+            <Cards />
+          </Route>
+          <!-- <Route path="/:scanid" let:params>
+            <ScanDetail {params} />
+          </Route> -->
+        </Route>
         <Route path="/scans/*">
           <Route path="/">
             <Scans />

src/components/auth/PasswordStrength.svelte

@@ -0,0 +1,52 @@
+<script context="module">
+    import { passwordStrength } from "check-password-strength";
+    export function password_strong_enough(password_change) {
+        let strength = passwordStrength(password_change);
+        return (
+            strength?.contains.includes("lowercase") &&
+            strength?.contains.includes("uppercase") &&
+            strength?.contains.includes("number") &&
+            strength?.length > 9
+        );
+    }
+    export function password_strong_enough_and_equal(
+        password_change,
+        password_confirm
+    ) {
+        return (
+            password_strong_enough(password_change) &&
+            password_change === password_confirm
+        );
+    }
+</script>
+
+<script>
+    import { getLocaleFromNavigator, _ } from "svelte-i18n";
+    import { passwordStrength as Strength } from "check-password-strength";
+    export let password_change;
+    export let password_confirm;
+
+    $: strength = Strength(password_change);
+    $: passwords_match =
+        !password_confirm || password_confirm === password_change;
+</script>
+
+<div class="ml-4">
+    <ul class="list-disc font-medium tracking-wide text-red-500 text-xs">
+        {#if !strength.contains.includes('lowercase')}
+            <li>{$_('must-contain-a-lowercase-letter')}</li>
+        {/if}
+        {#if !strength.contains.includes('uppercase')}
+            <li>{$_('must-contain-a-uppercase-letter')}</li>
+        {/if}
+        {#if !strength.contains.includes('number')}
+            <li>{$_('must-contain-a-number')}</li>
+        {/if}
+        {#if !(strength.length > 9)}
+            <li>{$_('must-be-at-least-10-characters-long')}</li>
+        {/if}
+        {#if !(passwords_match == true)}
+            <li>{$_('passwords-dont-match')}</li>
+        {/if}
+    </ul>
+</div>

src/components/auth/ResetPassword.svelte

@@ -1,38 +1,43 @@
 <script>
-  import {  AuthService } from "@odit/lfk-client-js";
+  import { AuthService } from "@odit/lfk-client-js";
   import { _ } from "svelte-i18n";
   import Toastify from "toastify-js";
   import "toastify-js/src/toastify.css";
+  import PasswordStrength, {
+    password_strong_enough,
+  } from "../auth/PasswordStrength.svelte";
   let state = "reset_in_progress";
   let password = "";
   export let params;
   function set_new_password() {
-      if(password.trim() !== ""){
+    if (password.trim() !== "") {
-        Toastify({
+      Toastify({
-          text: $_('password-reset-in-progress'),
+        text: $_("password-reset-in-progress"),
-          duration: 3500,
+        duration: 3500,
-        }).showToast();
+      }).showToast();
-        AuthService.authControllerResetPassword(atob(params.resetkey),{ password })
+      AuthService.authControllerResetPassword(atob(params.resetkey), {
+        password,
+      })
         .then((resp) => {
           Toastify({
-            text: $_('password-reset-successful'),
+            text: $_("password-reset-successful"),
             duration: 3500,
           }).showToast();
-          state="reset_success";
+          state = "reset_success";
         })
         .catch((err) => {
-          state="reset_error";
+          state = "reset_error";
         });
-      } else {
+    } else {
       Toastify({
-        text: $_('please-provide-a-password'),
+        text: $_("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="" />
@@ -56,31 +61,31 @@
       </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="min-h-screen flex items-center justify-center bg-gray-100">
-  <div class="max-w-md w-full py-12 px-6">
+    <div class="max-w-md w-full py-12 px-6">
-    <img style="height:10rem;" class="mx-auto" src="/lfk-logo.png" alt="" />
+      <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">
+      <p class="mt-6 text-lg text-center font-bold text-gray-900">
-      {$_('application_name')}
+        {$_('application_name')}
-    </p>
+      </p>
-    <p class="mt-2 mb-2 text-sm text-center text-gray-900 font-bold">
+      <p class="mt-2 mb-2 text-sm text-center text-gray-900 font-bold">
-      {$_('password-reset-failed')}
+        {$_('password-reset-failed')}
-    </p>
+      </p>
-    <p class="mt-2 mb-2 text-sm text-center text-gray-900">
+      <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>
+      </p>
-    <div class="mt-6">
       <div class="mt-6">
-        <a
+        <div class="mt-6">
-          href="/forgot_password/"
+          <a
-          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">
+            href="/forgot_password/"
-          {$_('request-a-new-reset-mail')}
+            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">
-        </a>
+            {$_('request-a-new-reset-mail')}
+          </a>
+        </div>
       </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="" />
@@ -102,11 +107,14 @@
               placeholder={$_('new-password')}
               bind:value={password} />
           </div>
+          <PasswordStrength bind:password_change={password} />
         </div>
 
         <div class="mt-5">
           <button
             on:click={set_new_password}
+            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">
             <span class="absolute left-0 inset-y pl-3">

src/components/cards/AddCardBulkModal.svelte

@@ -0,0 +1,240 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import { clickOutside } from "../base/outsideclick";
+  import { focusTrap } from "svelte-focus-trap";
+  import { RunnerCardService } from "@odit/lfk-client-js";
+  import Toastify from "toastify-js";
+  export let bulk_modal_open;
+  export let current_cards;
+  function focus(el) {
+    el.focus();
+  }
+  $: card_count = 0;
+  $: is_card_count_valid = card_count > 0;
+  $: processed_last_submit = true;
+  $: createbtnenabled = is_card_count_valid;
+  (() => {
+    document.onkeydown = (e) => {
+      e = e || window.event;
+      if (e.key === "Escape") {
+        bulk_modal_open = false;
+      }
+      if (e.keyCode === 13) {
+        if (createbtnenabled === true) {
+          createbtnenabled = false;
+          submit_with_print();
+        }
+      }
+    };
+  })();
+  function submit_without_print() {
+    if (processed_last_submit === true) {
+      processed_last_submit = false;
+      const toast = Toastify({
+        text: $_("creating-blanco-cards"),
+        duration: -1,
+      }).showToast();
+      RunnerCardService.runnerCardControllerPostBlancoBulk(card_count, false)
+        .then((result) => {
+          bulk_modal_open = false;
+          //
+          Toastify({
+            text: $_("created-blanco-cards"),
+            duration: 500,
+            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+          }).showToast();
+        })
+        .catch((err) => {
+          //
+        })
+        .finally(() => {
+          processed_last_submit = true;
+          //
+          toast.hideToast();
+        });
+    }
+  }
+
+  function submit_with_print() {
+    if (processed_last_submit === true) {
+      processed_last_submit = false;
+      const toast = Toastify({
+        text: $_("creating-blanco-cards"),
+        duration: -1,
+      }).showToast();
+      RunnerCardService.runnerCardControllerPostBlancoBulk(card_count, true)
+        .then((result) => {
+          bulk_modal_open = false;
+          //
+          Toastify({
+            text: $_("created-blanco-cards"),
+            duration: 500,
+            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+          }).showToast();
+          current_cards = current_cards.concat(result);
+          const toast = Toastify({
+            text: $_("generating-pdf"),
+            duration: -1,
+          }).showToast();
+          fetch(
+            `${config.baseurl}/documents/cards?&download=true&key=${config.documentserver_key}`,
+            {
+              method: "POST",
+              headers: {
+                "Content-Type": "application/json",
+              },
+              body: JSON.stringify(result),
+            }
+          )
+            .then((response) => {
+              if (response.status != "200") {
+                toast.hideToast();
+                Toastify({
+                  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();
+              }
+            })
+            .then((blob) => {
+              const url = window.URL.createObjectURL(blob);
+              let a = document.createElement("a");
+              a.href = url;
+              a.download = "Bulkcards.pdf";
+              document.body.appendChild(a);
+              a.click();
+              a.remove();
+              toast.hideToast();
+              Toastify({
+                text: $_("pdf-successfully-generated"),
+                duration: 3500,
+                backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+              }).showToast();
+            })
+            .catch((err) => {
+              console.error(err);
+            });
+        })
+        .catch((err) => {
+          //
+        })
+        .finally(() => {
+          processed_last_submit = true;
+          //
+          toast.hideToast();
+        });
+    }
+  }
+</script>
+
+{#if bulk_modal_open}
+  <div
+    class="fixed z-10 inset-0 overflow-y-auto"
+    use:focusTrap
+    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">
+      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
+        <div
+          class="absolute inset-0 bg-gray-500 opacity-75"
+          data-id="modal_backdrop" />
+      </div>
+      <span
+        class="hidden sm:inline-block sm:align-middle sm:h-screen"
+        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">
+        <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">
+              <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" />
+                <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>
+            </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')}
+              </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')}
+                </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>
+                  <div class="mt-1 flex rounded-md shadow-sm">
+                    <input
+                      autocomplete="off"
+                      class:border-red-500={!is_card_count_valid}
+                      class:focus:border-red-500={!is_card_count_valid}
+                      class:focus:ring-red-500={!is_card_count_valid}
+                      bind:value={card_count}
+                      type="number"
+                      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" />
+                    <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">
+                      {$_('you-must-create-at-least-one-card-or-cancel')}
+                    </span>
+                  {/if}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+          <button
+            disabled={!createbtnenabled}
+            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">
+            {$_('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">
+            {$_('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">
+            {$_('cancel')}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}

src/components/cards/AddCardModal.svelte

@@ -0,0 +1,170 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import { clickOutside } from "../base/outsideclick";
+  import { focusTrap } from "svelte-focus-trap";
+  import {
+    RunnerCardService,
+    RunnerService,
+    ScanService,
+  } from "@odit/lfk-client-js";
+  import Select from "svelte-select";
+  import Toastify from "toastify-js";
+  export let modal_open;
+  export let current_cards;
+  const getRunnerLabel = (option) =>
+    option.firstname + " " + (option.middlename || "") + " " + option.lastname;
+  const filterRunners = (label, filterText, option) =>
+    label.toLowerCase().includes(filterText.toLowerCase()) ||
+    option.value.toString().startsWith(filterText.toLowerCase());
+  function focus(el) {
+    el.focus();
+  }
+  $: runner = 0;
+  $: runners = [];
+  $: enabled = true;
+  $: processed_last_submit = true;
+  RunnerService.runnerControllerGetAll().then((val) => {
+    runners = val.map((r) => {
+      return { label: getRunnerLabel(r), value: r };
+    });
+  });
+  $: createbtnenabled = true;
+  (() => {
+    document.onkeydown = (e) => {
+      e = e || window.event;
+      if (e.key === "Escape") {
+        modal_open = false;
+      }
+      if (e.keyCode === 13) {
+        if (createbtnenabled === true) {
+          createbtnenabled = false;
+          submit();
+        }
+      }
+    };
+  })();
+  function submit() {
+    if (processed_last_submit === true) {
+      processed_last_submit = false;
+      const toast = Toastify({
+        text: $_("adding-card"),
+        duration: -1,
+      }).showToast();
+      let postdata = {
+        runner,
+        enabled,
+      };
+      RunnerCardService.runnerCardControllerPost(postdata)
+        .then((result) => {
+          runner = 0;
+          modal_open = false;
+          //
+          Toastify({
+            text: $_("card-added"),
+            duration: 500,
+            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+          }).showToast();
+          current_cards.push(result);
+          current_cards = current_cards;
+        })
+        .catch((err) => {
+          //
+        })
+        .finally(() => {
+          processed_last_submit = true;
+          //
+          toast.hideToast();
+        });
+    }
+  }
+</script>
+
+{#if modal_open}
+  <div
+    class="fixed z-10 inset-0 overflow-y-auto"
+    use:focusTrap
+    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">
+      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
+        <div
+          class="absolute inset-0 bg-gray-500 opacity-75"
+          data-id="modal_backdrop" />
+      </div>
+      <span
+        class="hidden sm:inline-block sm:align-middle sm:h-screen"
+        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">
+        <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">
+              <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" />
+                <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>
+            </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-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')}
+                  {$_('if-you-want-to-create-multiple-blanco-cards-try-the-add-bulk-button')}
+                </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>
+                  <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)}
+                    items={runners}
+                    showChevron={true}
+                    placeholder={$_('search-for-runner-by-name-or-id')}
+                    noOptionsMessage={$_('no-runners-found')}
+                    on:select={(selectedValue) => (runner = selectedValue.detail.value.id)}
+                    on:clear={() => (runner = null)} />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+          <button
+            disabled={!createbtnenabled}
+            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">
+            {$_('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">
+            {$_('cancel')}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}

src/components/cards/CardDetailModal.svelte

@@ -0,0 +1,186 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import { clickOutside } from "../base/outsideclick";
+  import { focusTrap } from "svelte-focus-trap";
+  import { RunnerCardService, RunnerService } from "@odit/lfk-client-js";
+  import Select from "svelte-select";
+  import Toastify from "toastify-js";
+  export let edit_modal_open;
+  export let current_cards;
+  export let runner = {};
+  export let editable = {};
+  export let original_data = {};
+  const getRunnerLabel = (option) =>
+    option.firstname + " " + (option.middlename || "") + " " + option.lastname;
+  const filterRunners = (label, filterText, option) =>
+    label.toLowerCase().includes(filterText.toLowerCase()) ||
+    option.value.toString().startsWith(filterText.toLowerCase());
+  function focus(el) {
+    el.focus();
+  }
+  $: runners = [];
+  $: enabled = true;
+  $: processed_last_submit = true;
+  RunnerService.runnerControllerGetAll().then((val) => {
+    runners = val.map((r) => {
+      return { label: getRunnerLabel(r), value: r };
+    });
+  });
+  $: createbtnenabled = !(
+    JSON.stringify(editable) === JSON.stringify(original_data)
+  );
+  (() => {
+    document.onkeydown = (e) => {
+      e = e || window.event;
+      if (e.key === "Escape") {
+        edit_modal_open = false;
+      }
+      if (e.keyCode === 13) {
+        if (createbtnenabled === true) {
+          createbtnenabled = false;
+          submit();
+        }
+      }
+    };
+  })();
+  function submit() {
+    if (processed_last_submit === true) {
+      processed_last_submit = false;
+      const toast = Toastify({
+        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({
+            text: $_("card-updated"),
+            duration: 500,
+            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+          }).showToast();
+          current_cards[current_cards.findIndex((c) => c.id === id)] = result;
+          current_cards = current_cards;
+        })
+        .catch((err) => {
+          //
+        })
+        .finally(() => {
+          processed_last_submit = true;
+          //
+          toast.hideToast();
+        });
+    }
+  }
+</script>
+
+{#if edit_modal_open}
+  <div
+    class="fixed z-10 inset-0 overflow-y-auto"
+    use:focusTrap
+    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">
+      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
+        <div
+          class="absolute inset-0 bg-gray-500 opacity-75"
+          data-id="modal_backdrop" />
+      </div>
+      <span
+        class="hidden sm:inline-block sm:align-middle sm:h-screen"
+        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">
+        <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">
+              <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" />
+                <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>
+            </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')}
+              </h3>
+              <div class="mt-2 mb-6">
+                <p class="text-sm text-gray-500">
+                  {$_('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>
+                  <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)}
+                    items={runners}
+                    showChevron={true}
+                    placeholder={$_('search-for-runner-by-name-or-id')}
+                    noOptionsMessage={$_('no-runners-found')}
+                    bind:selectedValue={runner}
+                    on:select={(selectedValue) => (editable.runner = selectedValue.detail.value.id)}
+                    on:clear={() => (editable.runner = null)} />
+                </div>
+                <div class="col-span-6">
+                  <p class="text-gray-500">
+                    <input
+                      id="enabled"
+                      on:change={() => {
+                        editable.enabled = !editable.enabled;
+                      }}
+                      name="enabled"
+                      type="checkbox"
+                      checked={editable.enabled}
+                      class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
+                    {$_('this-card-is')}
+                    {#if editable.enabled}
+                      {$_('enabled')}
+                    {:else}{$_('disabled')}{/if}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+          <button
+            disabled={!createbtnenabled}
+            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">
+            {$_('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">
+            {$_('cancel')}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}

src/components/cards/Cards.svelte

@@ -0,0 +1,40 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import store from "../../store";
+  import AddCardBulkModal from "./AddCardBulkModal.svelte";
+  import AddCardModal from "./AddCardModal.svelte";
+  import CardsOverview from "./CardsOverview.svelte";
+  $: current_cards = [];
+  export let modal_open = false;
+  export let bulk_modal_open = false;
+</script>
+
+<section class="container p-5">
+  <span class="mb-1 text-3xl font-extrabold leading-tight">
+    {$_('cards')}
+    {#if store.state.jwtinfo.userdetails.permissions.includes('CARD: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">
+        {$_('add-card')}
+      </button>
+      <button
+        on:click={() => {
+          bulk_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">
+        {$_('create-bulk-cards')}
+      </button>
+    {/if}
+  </span>
+  <CardsOverview bind:current_cards />
+</section>
+
+{#if store.state.jwtinfo.userdetails.permissions.includes('CARD:CREATE')}
+  <AddCardModal bind:current_cards bind:modal_open />
+  <AddCardBulkModal bind:current_cards bind:bulk_modal_open />
+{/if}

src/components/cards/CardsEmptyState.svelte

@@ -0,0 +1,12 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import cards_empty from "./cards.svg";
+</script>
+
+<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>{$_('add-your-first-card')}</span>
+  </p>
+</div>

src/components/cards/CardsOverview.svelte

@@ -0,0 +1,237 @@
+<script>
+  import { getLocaleFromNavigator, json, _ } from "svelte-i18n";
+  import { RunnerCardService } from "@odit/lfk-client-js";
+  import store from "../../store";
+  import Toastify from "toastify-js";
+  import CardsEmptyState from "./CardsEmptyState.svelte";
+  import CardDetailModal from "./CardDetailModal.svelte";
+  import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
+  export let edit_modal_open = false;
+  export let runner = {};
+  export let editable = {};
+  export let original_data = {};
+  export let current_cards = [];
+  $: searchvalue = "";
+  $: active_deletes = [];
+  $: cards_show = current_cards.some(
+    (r) => r.is_selected === true
+  );
+  $: generate_cards = current_cards.filter((r) => r.is_selected === true);
+  const cards_promise = RunnerCardService.runnerCardControllerGetAll().then(
+    (val) => {
+      current_cards = val;
+    }
+  );
+  function should_display_based_on_id(id) {
+    if (searchvalue.toString().slice(-1) === "*") {
+      return id.toString().startsWith(searchvalue.replace("*", ""));
+    }
+    return id.toString() === searchvalue;
+  }
+  const getRunnerLabel = (option) =>
+    option?.firstname + " " + (option?.middlename || "") + " " + (option?.lastname || "{$_('non-blanko')}");
+  function open_edit_modal(card) {
+    if(card.runner?.id){
+      runner = Object.assign(
+        { runner },
+        { label: getRunnerLabel(card.runner), value: card.runner }
+      );
+      card.runner = card.runner.id;
+    }
+    else{
+      card.runner=null;
+      runner = null
+    }
+    editable = Object.assign(editable, card);
+    original_data = Object.assign(original_data, card);
+    edit_modal_open = true;
+  }
+</script>
+
+{#if store.state.jwtinfo.userdetails.permissions.includes('CARD:UPDATE')}
+  <CardDetailModal
+    bind:current_cards
+    bind:edit_modal_open
+    bind:runner
+    bind:editable
+    bind:original_data />
+{/if}
+
+{#if store.state.jwtinfo.userdetails.permissions.includes('CARD:GET')}
+  {#await cards_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">
+      <p class="font-bold">{$_('loading-cards')}</p>
+      <p class="text-sm">{$_('this-might-take-a-moment')}</p>
+    </div>
+  {:then}
+    {#if current_cards.length === 0}
+      <CardsEmptyState />
+    {:else}
+      <input
+        type="search"
+        bind:value={searchvalue}
+        placeholder={$_('datatable.search')}
+        aria-label={$_('datatable.search')}
+        class="gridjs-input gridjs-search-input mb-4" />
+        <div class="h-12">
+          <GenerateRunnerCards
+            bind:cards_show
+            bind:generate_cards />
+        </div>
+      <div
+        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>
+              <th
+                scope="col"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                <span
+                  on:click={() => {
+                    const newstate = !current_cards.some((r) => r.is_selected === true);
+                    current_cards = current_cards.map((r) => {
+                      r.is_selected = newstate;
+                      return r;
+                    });
+                  }}
+                  class="underline cursor-pointer select-none">{#if current_cards.some((r) => r.is_selected === true)}
+                    {$_('deselect-all')}
+                  {:else}{$_('select-all')}{/if}
+                </span>
+              </th>
+              <th
+                scope="col"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                {$_('code')}
+              </th>
+              <th
+                scope="col"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                {$_('runner')}
+              </th>
+              <th
+                scope="col"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                {$_('status')}
+              </th>
+              <th scope="col" class="relative px-6 py-3">
+                <span class="sr-only">{$_('action')}</span>
+              </th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-gray-200">
+            {#each current_cards as card}
+              {#if card.code
+                .toLowerCase()
+                .includes(
+                  searchvalue.toLowerCase()
+                ) || card.runner?.firstname
+                  .toLowerCase()
+                  .includes(
+                    searchvalue.toLowerCase()
+                  ) || card.runner?.middlename
+                  .toLowerCase()
+                  .includes(
+                    searchvalue.toLowerCase()
+                  ) || card.runner?.lastname
+                  .toLowerCase()
+                  .includes(
+                    searchvalue.toLowerCase()
+                  ) || should_display_based_on_id(card.id)}
+                <tr data-rowid="card_{card.id}">
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <input
+                      bind:checked={card.is_selected}
+                      type="checkbox"
+                      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">{card.code}</div>
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="flex items-center">
+                      {#if card.runner}
+                        <a
+                          href="../runners/{card.runner.id}"
+                          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{card.runner.firstname}
+                          {card.runner.middlename || ''}
+                          {card.runner.lastname}</a>
+                      {:else}{$_('non-blanko')}{/if}
+                    </div>
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="flex items-center">
+                      {#if card.enabled}
+                        <span
+                          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">{$_('enabled')}</span>
+                      {:else}
+                        <span
+                          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">{$_('disabled')}</span>
+                      {/if}
+                    </div>
+                  </td>
+
+                  {#if active_deletes[card.id] === true}
+                    <td
+                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                      <button
+                        on:click={() => {
+                          active_deletes[card.id] = false;
+                        }}
+                        tabindex="0"
+                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
+                      <button
+                        on:click={() => {
+                          RunnerCardService.runnerCardControllerRemove(card.id, false).then(
+                            (resp) => {
+                              current_cards = current_cards.filter(
+                                (obj) => obj.id !== card.id
+                              );
+                              Toastify({
+                                text: $_('card-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>
+                    </td>
+                  {:else}
+                    <td
+                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                      <button
+                        on:click={() => {
+                          open_edit_modal(card);
+                        }}
+                        class="text-indigo-600 hover:text-indigo-900">{$_('details')}</button>
+                      {#if store.state.jwtinfo.userdetails.permissions.includes('CARD:DELETE')}
+                        <button
+                          on:click={() => {
+                            active_deletes[card.id] = true;
+                          }}
+                          tabindex="0"
+                          class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('delete')}</button>
+                      {/if}
+                    </td>
+                  {/if}
+                </tr>
+              {/if}
+            {/each}
+          </tbody>
+        </table>
+      </div>
+    {/if}
+  {: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>
+        {error}
+      </span>
+    </div>
+  {/await}
+{/if}

src/components/cards/cards.svg

@@ -0,0 +1 @@
+<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 653.9 247.6"><path d="M272 211l-53 12s-11-2-1-17l4-4 27-14v-2l-6-41-2-16 17-17 4-3 44 41v1l-19 33z" fill="#ffb7b7"/><path d="M253 198l-54 13a6 6 0 01-5-7 16 16 0 012-5 48 48 0 016-9l28-14-4-24-1-12-2-8-2-16 21-19 22 21 22 20-3 5-3 7-17 30-3 6z" fill="#ffb7b7"/><path d="M346 190s-20-1-28-15a24 24 0 01-3-14l-8-17-11-23-30-4-2 1-21 19-7 6-10 9-49 44a37 37 0 01-7 9 50 50 0 01-9 7c-10 5-24 9-44 7L10 248 0 176l89-29 131-86 89 23 41 58z" fill="#ffb7b7"/><path d="M648 0H275a5 5 0 00-5 5v221a5 5 0 005 6h373a5 5 0 006-6V5a5 5 0 00-6-5z" fill="#fff"/><path d="M648 0H275a5 5 0 00-5 5v221a5 5 0 005 6h373a5 5 0 006-6V5a5 5 0 00-6-5zm4 226a4 4 0 01-4 4H275a4 4 0 01-3-4V5a4 4 0 013-3h373a4 4 0 014 3z" fill="#3f3d56"/><path d="M312 30a9 9 0 119-9 9 9 0 01-9 9zm0-17a8 8 0 107 8 8 8 0 00-7-8z" fill="#6c63ff"/><path d="M297 21a8 8 0 016-8 8 8 0 100 16 8 8 0 01-6-8zM349 130a7 7 0 01-7-7v-20a7 7 0 0114 0v20a7 7 0 01-7 7zM368 130a7 7 0 01-7-7v-20a7 7 0 0114 0v20a7 7 0 01-7 7zM386 130a7 7 0 01-7-7v-20a7 7 0 0114 0v20a7 7 0 01-7 7zM415 130a7 7 0 01-7-7v-20a7 7 0 0114 0v20a7 7 0 01-7 7zM434 130a7 7 0 01-7-7v-20a7 7 0 0113 0v20a7 7 0 01-6 7zM452 130a7 7 0 01-7-7v-20a7 7 0 0114 0v20a7 7 0 01-7 7zM481 130a7 7 0 01-7-7v-20a7 7 0 0114 0v20a7 7 0 01-7 7zM499 130a7 7 0 01-7-7v-20a7 7 0 0114 0v20a7 7 0 01-7 7zM518 130a7 7 0 01-7-7v-20a7 7 0 0114 0v20a7 7 0 01-7 7zM546 130a7 7 0 01-7-7v-20a7 7 0 0114 0v20a7 7 0 01-7 7zM565 130a7 7 0 01-7-7v-20a7 7 0 0114 0v20a7 7 0 01-7 7zM583 130a7 7 0 01-7-7v-20a7 7 0 0114 0v20a7 7 0 01-7 7z" fill="#6c63ff"/><path d="M396 208h-99a5 5 0 110-10h99a5 5 0 010 10zM364 188h-35a5 5 0 110-10h35a5 5 0 110 10z" fill="#e6e6e6"/><path fill="#3f3d56" d="M271 46h381v2H271z"/><path opacity=".1" d="M228 203l-1-2 33-15 8-27-12-10 1-1 13 10-8 30-34 15zM196 199l-9 4-17 2a50 50 0 01-9 7l-16-1-26-1 88-74 18 4-29 59z"/><path d="M318 175l-8 1-47 4-29 1-38 18-9 4-70 8 95-81 11 2 20 5 22 5 18 1 24 1 20 1a13 13 0 0112 13c0 7-5 14-21 17z" fill="#ffb7b7"/><path d="M325 170s-7-2-9-9c-2-4-1-9 3-15l1 1c-3 6-4 10-3 14 2 5 9 7 9 7zM197 197l34-16v2l-33 16zM218 135l48-19v2l-41 16 35 6v2l-42-7z" opacity=".1"/></svg>

src/components/dashboard/Dashboard.svelte

@@ -172,6 +172,25 @@
           <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/'}

src/components/orgs/OrgDetail.svelte

@@ -10,6 +10,9 @@
   import ImportRunnerModal from "../runners/ImportRunnerModal.svelte";
   import PromiseError from "../base/PromiseError.svelte";
   import Select from "svelte-select";
+  import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
+  import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
+  import { tick } from "svelte";
   $: delete_triggered = false;
   $: address_valid_or_none =
     (isAddress1Valid && iszipcodevalid && iscityvalid) ||
@@ -18,6 +21,9 @@
   let original = "";
   let original_object = {};
   let contacts = [];
+  let valueCopy = null;
+  let areaDom;
+  let copied = false;
   export let params;
   $: editable = {};
   $: contact = {};
@@ -26,7 +32,10 @@
   $: isAddress1Valid = editable.address?.address1?.trim().length !== 0;
   $: iszipcodevalid = editable.address?.postalcode?.trim().length !== 0;
   $: iscityvalid = editable.address?.city?.trim().length !== 0;
-  $: sponsoring_contracts_download_open = false;
+  $: sponsoring_contracts_show = true;
+  $: cards_show = true;
+  $: generate_orgs = [original_object];
+  $: registrationLink = `${config.baseurl}/selfservice/register/${editable.registrationKey}`;
   const getContactLabel = (option) =>
     option.firstname + " " + (option.middlename || "") + " " + option.lastname;
   const promise = RunnerOrganizationService.runnerOrganizationControllerGetOne(
@@ -60,14 +69,6 @@
   });
   let modal_open = false;
   let delete_org = {};
-  document.addEventListener("click", function (e) {
-    if (
-      e.target.parentNode?.parentNode?.id != "sponsoring:dropdown" &&
-      e.target.parentNode?.parentNode?.id != "sponsoring:dropdown:menu"
-    ) {
-      sponsoring_contracts_download_open = false;
-    }
-  });
   function deleteOrganization() {
     RunnerOrganizationService.runnerOrganizationControllerRemove(
       original_object.id,
@@ -102,6 +103,7 @@
         postdata
       )
         .then((resp) => {
+          editable.registrationKey = resp.registrationKey;
           original_object = Object.assign({}, editable);
           original = JSON.stringify(original_object);
           Toastify({
@@ -114,58 +116,46 @@
     } else {
     }
   }
-  export let import_modal_open = false;
+  async function copy() {
-  async function generateSponsoringContract(locale) {
+    if(!editable.registrationKey){
-    sponsoring_contracts_download_open = false;
+      Toastify({
-    const runners = await RunnerOrganizationService.runnerOrganizationControllerGetRunners(
+        text: $_('you-have-to-save-your-changes-to-generate-a-link'),
-      original_object.id
+        duration: 500,
-    );
+        backgroundColor:
-    const toast = Toastify({
+          "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
-      text: $_("generating-pdf"),
+      }).showToast();
-      duration: -1,
+      return;
-    }).showToast();
+    }
-    fetch(
+    valueCopy = registrationLink;
-      `${config.baseurl}/documents/contracts?locale=${locale}&download=true&key=${config.documentserver_key}`,
+    await tick();
-      {
+    areaDom.focus();
-        method: "POST",
+    areaDom.select();
-        headers: {
+    try {
-          "Content-Type": "application/json",
+      const successful = document.execCommand("copy");
-        },
+      if (!successful) {
-        body: JSON.stringify(runners),
+        throw new Error();
       }
-    )
+      Toastify({
-      .then((response) => {
+        text: $_("copied-link-to-clipboard"),
-        if (response.status != "200") {
+        duration: 500,
-          toast.hideToast();
+        backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-          Toastify({
+      }).showToast();
-            text: $_("pdf-generation-failed"),
+      copied = true;
-            duration: 3500,
+    } catch (err) {
-            backgroundColor:
+      Toastify({
-              "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
+        text: $_("error-whyile-copying-to-clipboard"),
-          }).showToast();
+        duration: 500,
-        } else {
+        backgroundColor:
-          return response.blob();
+          "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
-        }
+      }).showToast();
-      })
+    }
-      .then((blob) => {
+    // we can notifi by event or storage about copy status
-        const url = window.URL.createObjectURL(blob);
+    valueCopy = null;
-        let a = document.createElement("a");
-        a.href = url;
-        a.download = "Sponsorings_" + original_object.name + ".pdf";
-        document.body.appendChild(a);
-        a.click();
-        a.remove();
-        toast.hideToast();
-        Toastify({
-          text: $_("pdf-successfully-generated"),
-          duration: 3500,
-          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-        }).showToast();
-      })
-      .catch((err) => {});
   }
+  export let import_modal_open = false;
 </script>
 
+{#if valueCopy != null}<textarea bind:this={areaDom}>{valueCopy}</textarea>{/if}
 <ImportRunnerModal
   on:cancelDelete={(event) => {
     import_modal_open = false;
@@ -182,64 +172,10 @@
     <div class="mb-8 text-3xl font-extrabold leading-tight">
       {original_object.name}
       <span data-id="org_actions_${editable.id}">
-        <div id="sponsoring:dropdown" class="relative inline-block">
+        <GenerateSponsoringContracts
-          <div>
+          bind:sponsoring_contracts_show
-            <button
+          bind:generate_orgs />
-              on:click={() => {
+        <GenerateRunnerCards bind:cards_show bind:generate_orgs />
-                sponsoring_contracts_download_open = !sponsoring_contracts_download_open;
-              }}
-              type="button"
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm inline-flex"
-              id="options-menu"
-              aria-haspopup="true"
-              aria-expanded="true">
-              {$_('generate-sponsoring-contracts')}
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                class="-mr-1 ml-2 h-5 w-5"><path
-                  fill="none"
-                  d="M0 0h24v24H0z" />
-                <path
-                  fill="currentColor"
-                  d="M3 19h18v2H3v-2zm10-5.83l6.07-6.07 1.42 1.41L12 17 3.52 8.52l1.4-1.42L11 13.17V2h2v11.17z" /></svg>
-            </button>
-          </div>
-          {#if sponsoring_contracts_download_open}
-            <div
-              class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5"
-              id="sponsoring:dropdown:menu">
-              <div
-                class="py-1"
-                role="menu"
-                aria-orientation="vertical"
-                aria-labelledby="options-menu">
-                <span
-                  class="block w-full text-left px-4 py-2 text-sm text-gray-700">{$_('select-language')}</span>
-                <button
-                  on:click={() => {
-                    generateSponsoringContract('de');
-                  }}
-                  type="submit"
-                  class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900 inline-flex"
-                  role="menuitem">
-                  {$_('german')}
-                </button>
-                <button
-                  on:click={() => {
-                    generateSponsoringContract('en');
-                  }}
-                  type="submit"
-                  class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900 inline-flex"
-                  role="menuitem">
-                  {$_('english')}
-                </button>
-              </div>
-            </div>
-          {/if}
-        </div>
         {#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:IMPORT')}
           <button
             on:click={() => {
@@ -382,99 +318,151 @@
         on:select={(selectedValue) => (editable.contact = selectedValue.detail.value)}
         on:clear={() => (editable.contact = null)} />
     </div>
-    <!--  -->
+    <div>
-    <div class="flex items-start mt-2">
+      <div class="flex items-start mt-2">
-      <div class="flex items-center h-5">
+        <div class="flex items-center h-5">
-        <input
+          <input
-          bind:checked={editable.address_checked}
+            bind:checked={editable.registrationEnabled}
-          id="comments"
+            id="comments"
-          name="comments"
+            name="comments"
-          type="checkbox"
+            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
+            for="comments"
+            class="font-medium text-gray-700">{$_('selfservice-registration')}</label>
+        </div>
       </div>
-      <div class="ml-3 text-sm">
+      <div>
-        <label
+        {#if editable.registrationEnabled}
-          for="comments"
+          <div class="text-sm w-full">
-          class="font-medium text-gray-700">{$_('address')}</label>
+            <div on:click={copy} class="inline-flex w-full">
+              <p
+                name="token"
+                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 p-2">
+                {#if editable.registrationKey}
+                {registrationLink}
+                {:else}
+                {$_('you-have-to-save-your-changes-to-generate-a-link')}
+                {/if}
+              </p>
+              <div
+                class="bg-gray-200 border-gray-300 border-t border-b border-r text-black rounded-r-md sm:text-sm p-2 mt-1 cursor-pointer">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  height="24"><path fill="none" d="M0 0h24v24H0z" />
+                  <path
+                    fill="currentColor"
+                    d="M7 4V2h10v2h3l1 1v16a1 1 0 01-1 1H4a1 1 0 01-1-1V5l1-1h3zm0 2H5v14h14V6h-2v2H7V6zm2-2v2h6V4H9z" /></svg>
+              </div>
+            </div>
+            {#if editable.registrationKey}
+            <p class="text-gray-500 text-xs">
+              {$_('click-to-copy-the-link-into-your-clipboard')}
+            </p>
+            {/if}
+          </div>
+        {/if}
+        <!--  -->
+        <div>
+          <div class="flex items-start mt-2">
+            <div class="flex items-center h-5">
+              <input
+                bind:checked={editable.address_checked}
+                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">{$_('address')}</label>
+            </div>
+          </div>
+        </div>
+        {#if editable.address_checked === true}
+          <div class="col-span-6">
+            <label
+              for="address1"
+              class="block text-sm font-medium text-gray-700">{$_('address')}</label>
+            <input
+              autocomplete="off"
+              placeholder="Address"
+              class:border-red-500={!isAddress1Valid}
+              class:focus:border-red-500={!isAddress1Valid}
+              class:focus:ring-red-500={!isAddress1Valid}
+              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" />
+            {#if !isAddress1Valid}
+              <span
+                class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                {$_('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>
+            <input
+              autocomplete="off"
+              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" />
+          </div>
+          <div class="col-span-6">
+            <label
+              for="zipcode"
+              class="block text-sm font-medium text-gray-700">{$_('zip-postal-code')}</label>
+            <input
+              autocomplete="off"
+              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" />
+            {#if !iszipcodevalid}
+              <span
+                class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                {$_('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>
+            <input
+              autocomplete="off"
+              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" />
+            {#if !iscityvalid}
+              <span
+                class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                {$_('valid-city-is-required')}
+              </span>
+            {/if}
+          </div>
+        {/if}
       </div>
     </div>
-    {#if editable.address_checked === true}
-      <div class="col-span-6">
-        <label
-          for="address1"
-          class="block text-sm font-medium text-gray-700">{$_('address')}</label>
-        <input
-          autocomplete="off"
-          placeholder="Address"
-          class:border-red-500={!isAddress1Valid}
-          class:focus:border-red-500={!isAddress1Valid}
-          class:focus:ring-red-500={!isAddress1Valid}
-          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" />
-        {#if !isAddress1Valid}
-          <span
-            class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-            {$_('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>
-        <input
-          autocomplete="off"
-          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" />
-      </div>
-      <div class="col-span-6">
-        <label
-          for="zipcode"
-          class="block text-sm font-medium text-gray-700">{$_('zip-postal-code')}</label>
-        <input
-          autocomplete="off"
-          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" />
-        {#if !iszipcodevalid}
-          <span
-            class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-            {$_('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>
-        <input
-          autocomplete="off"
-          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" />
-        {#if !iscityvalid}
-          <span
-            class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-            {$_('valid-city-is-required')}
-          </span>
-        {/if}
-      </div>
-    {/if}
   </section>
 {:else}
   {#await promise}

src/components/orgs/OrgOverview.svelte

@@ -1,5 +1,6 @@
 <script>
   import { getLocaleFromNavigator, _ } from "svelte-i18n";
+  import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
   let modal_open = false;
   let delete_org = {};
   import { RunnerOrganizationService } from "@odit/lfk-client-js";
@@ -7,9 +8,12 @@
   import OrgsEmptyState from "./OrgsEmptyState.svelte";
   import Toastify from "toastify-js";
   import ConfirmOrgDeletion from "./ConfirmOrgDeletion.svelte";
+  import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
   $: searchvalue = "";
   $: active_deletes = [];
-  $: sponsoring_contracts_download_open = false;
+  $: 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);
   export let current_organizations = [];
 
   const promise = RunnerOrganizationService.runnerOrganizationControllerGetAll().then(
@@ -17,72 +21,6 @@
       current_organizations = val;
     }
   );
-
-  document.addEventListener("click", function (e) {
-    if (
-      e.target.parentNode?.parentNode?.id != "sponsoring:dropdown" &&
-      e.target.parentNode?.parentNode?.id != "sponsoring:dropdown:menu"
-    ) {
-      sponsoring_contracts_download_open = false;
-    }
-  });
-
-  async function generateSponsoringContract(locale) {
-    sponsoring_contracts_download_open = false;
-    const orgs = current_organizations.filter((r) => r.is_selected === true);
-    const toast = Toastify({
-      text: $_("generating-pdfs"),
-      duration: -1,
-    }).showToast();
-    let count = 0;
-    for await (const o of orgs) {
-      const runners = await RunnerOrganizationService.runnerOrganizationControllerGetRunners(
-        o.id
-      );
-      fetch(
-        `${config.baseurl}/documents/contracts?locale=${locale}&download=true&key=${config.documentserver_key}`,
-        {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify(runners),
-        }
-      )
-        .then((response) => {
-          if (response.status != "200") {
-            toast.hideToast();
-            Toastify({
-              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();
-          }
-        })
-        .then((blob) => {
-          count++;
-          const url = window.URL.createObjectURL(blob);
-          let a = document.createElement("a");
-          a.href = url;
-          a.download = "Sponsorings_" + o.name + ".pdf";
-          document.body.appendChild(a);
-          a.click();
-          a.remove();
-          if (count === orgs.length) {
-            toast.hideToast();
-            Toastify({
-              text: $_("pdfs-successfully-generated"),
-              duration: 3500,
-              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-            }).showToast();
-          }
-        })
-        .catch((err) => {});
-    }
-  }
 </script>
 
 <ConfirmOrgDeletion
@@ -111,56 +49,12 @@
         aria-label={$_('datatable.search')}
         class="gridjs-input gridjs-search-input mb-4" />
       <div class="h-12">
-        {#if current_organizations.some((r) => r.is_selected === true)}
+        <GenerateSponsoringContracts
-        <div id="sponsoring:dropdown" class="relative inline-block">
+            bind:sponsoring_contracts_show
-          <div>
+            bind:generate_orgs />
-            <button
+        <GenerateRunnerCards
-              on:click={() => {
+            bind:cards_show
-                sponsoring_contracts_download_open = !sponsoring_contracts_download_open;
+            bind:generate_orgs />
-              }}
-              type="button"
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm inline-flex"
-              id="options-menu"
-              aria-haspopup="true"
-              aria-expanded="true">
-              {$_('generate-sponsoring-contracts')}
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="-mr-1 ml-2 h-5 w-5"><path fill="none" d="M0 0h24v24H0z"/><path fill="currentColor" d="M3 19h18v2H3v-2zm10-5.83l6.07-6.07 1.42 1.41L12 17 3.52 8.52l1.4-1.42L11 13.17V2h2v11.17z"/></svg>
-            </button>
-          </div>
-          {#if sponsoring_contracts_download_open}
-            <div
-              class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5"
-              id="sponsoring:dropdown:menu">
-              <div
-                class="py-1"
-                role="menu"
-                aria-orientation="vertical"
-                aria-labelledby="options-menu">
-                <span
-                  class="block w-full text-left px-4 py-2 text-sm text-gray-700">{$_('select-language')}</span>
-                <button
-                  on:click={() => {
-                    generateSponsoringContract('de');
-                  }}
-                  type="submit"
-                  class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900 inline-flex"
-                  role="menuitem">
-                  {$_('german')}
-                </button>
-                <button
-                  on:click={() => {
-                    generateSponsoringContract('en');
-                  }}
-                  type="submit"
-                  class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900 inline-flex"
-                  role="menuitem">
-                  {$_('english')}
-                </button>
-              </div>
-            </div>
-          {/if}
-        </div>
-        {/if}
       </div>
       <div
         class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">

src/components/pdf_generation/GenerateRunnerCards.svelte

@@ -0,0 +1,339 @@
+<script>
+    import { getLocaleFromNavigator, _ } from "svelte-i18n";
+    import {
+        RunnerCardService,
+        RunnerOrganizationService,
+        RunnerTeamService,
+    } from "@odit/lfk-client-js";
+    import Toastify from "toastify-js";
+    export let cards_show = false;
+    export let generate_cards = [];
+    export let generate_runners = [];
+    export let generate_orgs = [];
+    export let generate_teams = [];
+    $: cards_dropdown_open = false;
+    document.addEventListener("click", function (e) {
+        if (
+            e.target.parentNode?.parentNode?.id != "cards:dropdown" &&
+            e.target.parentNode?.parentNode?.id != "cards:dropdown:menu"
+        ) {
+            cards_dropdown_open = false;
+        }
+    });
+
+    function generateRunnerCards(locale) {
+        cards_dropdown_open = false;
+
+        if (generate_orgs.length > 0) {
+            generateOrgCards(locale);
+        } else if (generate_teams.length > 0) {
+            generateTeamCards(locale);
+        } else if (generate_runners.length > 0) {
+            generateRunnersCards(locale);
+        } else {
+            generateCards(locale);
+        }
+    }
+
+    function generateCards(locale) {
+        const toast = Toastify({
+            text: $_("generating-pdf"),
+            duration: -1,
+        }).showToast();
+        fetch(
+            `${config.baseurl}/documents/cards?locale=${locale}&download=true&key=${config.documentserver_key}`,
+            {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify(generate_cards),
+            }
+        )
+            .then((response) => {
+                if (response.status != "200") {
+                    toast.hideToast();
+                    Toastify({
+                        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();
+                }
+            })
+            .then((blob) => {
+                const url = window.URL.createObjectURL(blob);
+                let a = document.createElement("a");
+                a.href = url;
+                a.download = "Runnercards.pdf";
+                document.body.appendChild(a);
+                a.click();
+                a.remove();
+                toast.hideToast();
+                Toastify({
+                    text: $_("pdf-successfully-generated"),
+                    duration: 3500,
+                    backgroundColor:
+                        "linear-gradient(to right, #00b09b, #96c93d)",
+                }).showToast();
+            })
+            .catch((err) => {
+                console.error(err);
+            });
+    }
+
+    async function generateRunnersCards(locale) {
+        const toast = Toastify({
+            text: $_("generating-pdf"),
+            duration: -1,
+        }).showToast();
+        const current_cards = await RunnerCardService.runnerCardControllerGetAll();
+        let cards = [];
+        for (let runner of generate_runners) {
+            let card = current_cards.find((c) => c.runner?.id == runner.id);
+            if (!card) {
+                card = await RunnerCardService.runnerCardControllerPost({
+                    runner: runner.id,
+                });
+            }
+            cards.push(card);
+        }
+        fetch(
+            `${config.baseurl}/documents/cards?locale=${locale}&download=true&key=${config.documentserver_key}`,
+            {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify(cards),
+            }
+        )
+            .then((response) => {
+                if (response.status != "200") {
+                    toast.hideToast();
+                    Toastify({
+                        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();
+                }
+            })
+            .then((blob) => {
+                const url = window.URL.createObjectURL(blob);
+                let a = document.createElement("a");
+                a.href = url;
+                a.download = "Runnercards.pdf";
+                document.body.appendChild(a);
+                a.click();
+                a.remove();
+                toast.hideToast();
+                Toastify({
+                    text: $_("pdf-successfully-generated"),
+                    duration: 3500,
+                    backgroundColor:
+                        "linear-gradient(to right, #00b09b, #96c93d)",
+                }).showToast();
+            })
+            .catch((err) => {});
+    }
+
+    async function generateTeamCards(locale) {
+        const toast = Toastify({
+            text: $_("generating-pdfs"),
+            duration: -1,
+        }).showToast();
+        let count = 0;
+        const current_cards = await RunnerCardService.runnerCardControllerGetAll();
+        for await (const t of generate_teams) {
+            const runners = await RunnerTeamService.runnerTeamControllerGetRunners(
+                t.id
+            );
+            let cards = [];
+            for (let runner of runners) {
+                let card = current_cards.find((c) => c.runner?.id == runner.id);
+                if (!card) {
+                    card = await RunnerCardService.runnerCardControllerPost({
+                        runner: runner.id,
+                    });
+                }
+                cards.push(card);
+            }
+            fetch(
+                `${config.baseurl}/documents/cards?locale=${locale}&download=true&key=${config.documentserver_key}`,
+                {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                    body: JSON.stringify(cards),
+                }
+            )
+                .then((response) => {
+                    if (response.status != "200") {
+                        toast.hideToast();
+                        Toastify({
+                            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();
+                    }
+                })
+                .then((blob) => {
+                    count++;
+                    const url = window.URL.createObjectURL(blob);
+                    let a = document.createElement("a");
+                    a.href = url;
+                    a.download = "Sponsorings_" + t.name + ".pdf";
+                    document.body.appendChild(a);
+                    a.click();
+                    a.remove();
+                    if (count === generate_teams.length) {
+                        toast.hideToast();
+                        Toastify({
+                            text: $_("pdfs-successfully-generated"),
+                            duration: 3500,
+                            backgroundColor:
+                                "linear-gradient(to right, #00b09b, #96c93d)",
+                        }).showToast();
+                    }
+                })
+                .catch((err) => {});
+        }
+    }
+
+    async function generateOrgCards(locale) {
+        const toast = Toastify({
+            text: $_("generating-pdf"),
+            duration: -1,
+        }).showToast();
+        let count = 0;
+        const current_cards = await RunnerCardService.runnerCardControllerGetAll();
+        for await (const o of generate_orgs) {
+            const runners = await RunnerOrganizationService.runnerOrganizationControllerGetRunners(
+                o.id
+            );
+            let cards = [];
+            for (let runner of runners) {
+                let card = current_cards.find((c) => c.runner?.id == runner.id);
+                if (!card) {
+                    card = await RunnerCardService.runnerCardControllerPost({
+                        runner: runner.id,
+                    });
+                }
+                cards.push(card);
+            }
+            fetch(
+                `${config.baseurl}/documents/cards?locale=${locale}&download=true&key=${config.documentserver_key}`,
+                {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                    body: JSON.stringify(cards),
+                }
+            )
+                .then((response) => {
+                    if (response.status != "200") {
+                        toast.hideToast();
+                        Toastify({
+                            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();
+                    }
+                })
+                .then((blob) => {
+                    count++;
+                    const url = window.URL.createObjectURL(blob);
+                    let a = document.createElement("a");
+                    a.href = url;
+                    a.download = "Sponsorings_" + o.name + ".pdf";
+                    document.body.appendChild(a);
+                    a.click();
+                    a.remove();
+                    if (count === generate_orgs.length) {
+                        toast.hideToast();
+                        Toastify({
+                            text: $_("pdfs-successfully-generated"),
+                            duration: 3500,
+                            backgroundColor:
+                                "linear-gradient(to right, #00b09b, #96c93d)",
+                        }).showToast();
+                    }
+                })
+                .catch((err) => {});
+        }
+    }
+</script>
+
+{#if cards_show}
+    <div id="cards:dropdown" class="relative inline-block">
+        <div>
+            <button
+                on:click={() => {
+                    cards_dropdown_open = !cards_dropdown_open;
+                }}
+                type="button"
+                class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm inline-flex"
+                id="options-menu"
+                aria-haspopup="true"
+                aria-expanded="true">
+                {$_('generate-runnercards')}
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="24"
+                    height="24"
+                    viewBox="0 0 24 24"
+                    class="-mr-1 ml-2 h-5 w-5"><path
+                        fill="none"
+                        d="M0 0h24v24H0z" />
+                    <path
+                        fill="currentColor"
+                        d="M3 19h18v2H3v-2zm10-5.83l6.07-6.07 1.42 1.41L12 17 3.52 8.52l1.4-1.42L11 13.17V2h2v11.17z" /></svg>
+            </button>
+        </div>
+        {#if cards_dropdown_open}
+            <div
+                class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5"
+                id="cards:dropdown:menu">
+                <div
+                    class="py-1"
+                    role="menu"
+                    aria-orientation="vertical"
+                    aria-labelledby="options-menu">
+                    <span
+                        class="block w-full text-left px-4 py-2 text-sm text-gray-700">{$_('select-language')}</span>
+                    <button
+                        on:click={() => {
+                            generateRunnerCards('de');
+                        }}
+                        type="submit"
+                        class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
+                        role="menuitem">
+                        {$_('german')}
+                    </button>
+                    <button
+                        on:click={() => {
+                            generateRunnerCards('en');
+                        }}
+                        type="submit"
+                        class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
+                        role="menuitem">
+                        {$_('english')}
+                    </button>
+                </div>
+            </div>
+        {/if}
+    </div>
+{/if}

src/components/pdf_generation/GenerateSponsoringContracts.svelte

@@ -0,0 +1,254 @@
+<script>
+    import { getLocaleFromNavigator, _ } from "svelte-i18n";
+    import {
+        RunnerOrganizationService,
+        RunnerTeamService,
+    } from "@odit/lfk-client-js";
+    import Toastify from "toastify-js";
+    export let sponsoring_contracts_show = false;
+    export let generate_runners = [];
+    export let generate_orgs = [];
+    export let generate_teams = [];
+    $: sponsoring_contracts_download_open = false;
+    document.addEventListener("click", function (e) {
+        if (
+            e.target.parentNode?.parentNode?.id != "sponsoring:dropdown" &&
+            e.target.parentNode?.parentNode?.id != "sponsoring:dropdown:menu"
+        ) {
+            sponsoring_contracts_download_open = false;
+        }
+    });
+
+    function generateSponsoringContract(locale) {
+        sponsoring_contracts_download_open = false;
+
+        if (generate_orgs.length > 0) {
+            generateOrgContracts(locale);
+        } else if (generate_teams.length > 0) {
+            generateTeamContracts(locale);
+        } else {
+            generateRunnerContracts(locale);
+        }
+    }
+
+    async function generateTeamContracts(locale) {
+        const toast = Toastify({
+            text: $_("generating-pdfs"),
+            duration: -1,
+        }).showToast();
+        let count = 0;
+        for await (const t of generate_teams) {
+            count++;
+            const runners = await RunnerTeamService.runnerTeamControllerGetRunners(
+                t.id
+            );
+            fetch(
+                `${config.baseurl}/documents/contracts?locale=${locale}&download=true&key=${config.documentserver_key}`,
+                {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                    body: JSON.stringify(runners),
+                }
+            )
+                .then((response) => {
+                    if (response.status != "200") {
+                        toast.hideToast();
+                        Toastify({
+                            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();
+                    }
+                })
+                .then((blob) => {
+                    const url = window.URL.createObjectURL(blob);
+                    let a = document.createElement("a");
+                    a.href = url;
+                    a.download = "Sponsorings_" + t.name + ".pdf";
+                    document.body.appendChild(a);
+                    a.click();
+                    a.remove();
+                    if (count === generate_teams.length) {
+                        toast.hideToast();
+                        Toastify({
+                            text: $_("pdfs-successfully-generated"),
+                            duration: 3500,
+                            backgroundColor:
+                                "linear-gradient(to right, #00b09b, #96c93d)",
+                        }).showToast();
+                    }
+                })
+                .catch((err) => {});
+        }
+    }
+
+    async function generateOrgContracts(locale) {
+        const toast = Toastify({
+            text: $_("generating-pdf"),
+            duration: -1,
+        }).showToast();
+        for await (const o of generate_orgs) {
+            const runners = await RunnerOrganizationService.runnerOrganizationControllerGetRunners(
+                o.id
+            );
+            fetch(
+                `${config.baseurl}/documents/contracts?locale=${locale}&download=true&key=${config.documentserver_key}`,
+                {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                    body: JSON.stringify(runners),
+                }
+            )
+                .then((response) => {
+                    if (response.status != "200") {
+                        toast.hideToast();
+                        Toastify({
+                            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();
+                    }
+                })
+                .then((blob) => {
+                    count++;
+                    const url = window.URL.createObjectURL(blob);
+                    let a = document.createElement("a");
+                    a.href = url;
+                    a.download = "Sponsorings_" + o.name + ".pdf";
+                    document.body.appendChild(a);
+                    a.click();
+                    a.remove();
+                    if (count === generate_orgs.length) {
+                        toast.hideToast();
+                        Toastify({
+                            text: $_("pdfs-successfully-generated"),
+                            duration: 3500,
+                            backgroundColor:
+                                "linear-gradient(to right, #00b09b, #96c93d)",
+                        }).showToast();
+                    }
+                })
+                .catch((err) => {});
+        }
+    }
+
+    function generateRunnerContracts(locale) {
+        const toast = Toastify({
+            text: $_("generating-pdf"),
+            duration: -1,
+        }).showToast();
+        fetch(
+            `${config.baseurl}/documents/contracts?locale=${locale}&download=true&key=${config.documentserver_key}`,
+            {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify(generate_runners),
+            }
+        )
+            .then((response) => {
+                if (response.status != "200") {
+                    toast.hideToast();
+                    Toastify({
+                        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();
+                }
+            })
+            .then((blob) => {
+                const url = window.URL.createObjectURL(blob);
+                let a = document.createElement("a");
+                a.href = url;
+                a.download = "Sponsoring.pdf";
+                document.body.appendChild(a);
+                a.click();
+                a.remove();
+                toast.hideToast();
+                Toastify({
+                    text: $_("pdf-successfully-generated"),
+                    duration: 3500,
+                    backgroundColor:
+                        "linear-gradient(to right, #00b09b, #96c93d)",
+                }).showToast();
+            })
+            .catch((err) => {
+                console.error(err);
+            });
+    }
+</script>
+
+{#if sponsoring_contracts_show}
+    <div id="sponsoring:dropdown" class="relative inline-block">
+        <div>
+            <button
+                on:click={() => {
+                    sponsoring_contracts_download_open = !sponsoring_contracts_download_open;
+                }}
+                type="button"
+                class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm inline-flex"
+                id="options-menu"
+                aria-haspopup="true"
+                aria-expanded="true">
+                {$_('generate-sponsoring-contracts')}
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="24"
+                    height="24"
+                    viewBox="0 0 24 24"
+                    class="-mr-1 ml-2 h-5 w-5"><path
+                        fill="none"
+                        d="M0 0h24v24H0z" />
+                    <path
+                        fill="currentColor"
+                        d="M3 19h18v2H3v-2zm10-5.83l6.07-6.07 1.42 1.41L12 17 3.52 8.52l1.4-1.42L11 13.17V2h2v11.17z" /></svg>
+            </button>
+        </div>
+        {#if sponsoring_contracts_download_open}
+            <div
+                class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5"
+                id="sponsoring:dropdown:menu">
+                <div
+                    class="py-1"
+                    role="menu"
+                    aria-orientation="vertical"
+                    aria-labelledby="options-menu">
+                    <span
+                        class="block w-full text-left px-4 py-2 text-sm text-gray-700">{$_('select-language')}</span>
+                    <button
+                        on:click={() => {
+                            generateSponsoringContract('de');
+                        }}
+                        type="submit"
+                        class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
+                        role="menuitem">
+                        {$_('german')}
+                    </button>
+                    <button
+                        on:click={() => {
+                            generateSponsoringContract('en');
+                        }}
+                        type="submit"
+                        class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
+                        role="menuitem">
+                        {$_('english')}
+                    </button>
+                </div>
+            </div>
+        {/if}
+    </div>
+{/if}

src/components/runners/RunnerDetail.svelte

@@ -1,5 +1,7 @@
 <script>
   import { getLocaleFromNavigator, _ } from "svelte-i18n";
+  import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
+  import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
   import store from "../../store";
   import {
     RunnerService,
@@ -14,12 +16,13 @@
   export let params;
   const runner_promise = RunnerService.runnerControllerGetOne(params.runnerid);
   $: delete_triggered = false;
-  $: sponsoring_contracts_download_open = false;
   $: original_data_pdf = {};
   $: original_data = {};
   $: editable = {};
-  $: group = {}
+  $: group = {};
-  $: changes_performed = !(JSON.stringify(original_data) == JSON.stringify(editable));
+  $: changes_performed = !(
+    JSON.stringify(original_data) == JSON.stringify(editable)
+  );
   $: isEmailValid =
     (editable.email || "") === "" ||
     (editable.email && isEmail(editable.email || ""));
@@ -31,6 +34,9 @@
     isLastnameValid &&
     isEmailValid &&
     editable.group != null;
+  $: sponsoring_contracts_show = true;
+  $: cards_show = true;
+  $: generate_runners = [original_data_pdf];
   runner_promise.then((data) => {
     data_loaded = true;
     original_data_pdf = Object.assign(original_data_pdf, data);
@@ -38,27 +44,21 @@
     original_data = Object.assign(original_data, data);
     editable = Object.assign(editable, original_data);
 
-    RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
+    RunnerOrganizationService.runnerOrganizationControllerGetAll().then(
-      const orgs = val.map((r) => {
+      (val) => {
-        return { label: r.name, value: r };
+        const orgs = val.map((r) => {
-      });
+          return { label: r.name, value: r };
-      groups = groups.concat(orgs);
-      RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
-        const teams = val.map((r) => {
-          return { label: `${r.parentGroup.name} > ${r.name}`, value: r };
         });
-        groups = groups.concat(teams);
+        groups = groups.concat(orgs);
-        group = groups.find(g => g.value.id == editable.group)
+        RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
-      });
+          const teams = val.map((r) => {
-    });
+            return { label: `${r.parentGroup.name} > ${r.name}`, value: r };
-  });
+          });
-  document.addEventListener("click", function (e) {
+          groups = groups.concat(teams);
-    if (
+          group = groups.find((g) => g.value.id == editable.group);
-      e.target.parentNode?.parentNode?.id != "sponsoring:dropdown" &&
+        });
-      e.target.parentNode?.parentNode?.id != "sponsoring:dropdown:menu"
+      }
-    ) {
+    );
-      sponsoring_contracts_download_open = false;
-    }
   });
   let groups = [];
   function submit() {
@@ -90,59 +90,6 @@
       })
       .catch((err) => {});
   }
-  function generateSponsoringContract(locale) {
-    sponsoring_contracts_download_open = false;
-    const toast = Toastify({
-      text: $_("generating-pdf"),
-      duration: -1,
-    }).showToast();
-    fetch(
-      `${config.baseurl}/documents/contracts?locale=${locale}&download=true&key=${config.documentserver_key}`,
-      {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify([original_data_pdf]),
-      }
-    )
-      .then((response) => {
-        if (response.status != "200") {
-          toast.hideToast();
-          Toastify({
-            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();
-        }
-      })
-      .then((blob) => {
-        const url = window.URL.createObjectURL(blob);
-        let a = document.createElement("a");
-        a.href = url;
-        a.download =
-          "Sponsoring_" +
-          original_data.firstname +
-          (original_data.middlename || "") +
-          original_data.lastname +
-          ".pdf";
-        document.body.appendChild(a);
-        a.click();
-        a.remove();
-        toast.hideToast();
-        Toastify({
-          text: $_("pdf-successfully-generated"),
-          duration: 3500,
-          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-        }).showToast();
-      })
-      .catch((err) => {
-        console.error(err);
-      });
-  }
 </script>
 
 {#await runner_promise}
@@ -207,64 +154,12 @@
               }}
               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}
-          <div id="sponsoring:dropdown" class="relative inline-block">
+          <GenerateSponsoringContracts
-            <div>
+            bind:sponsoring_contracts_show
-              <button
+            bind:generate_runners />
-                on:click={() => {
+          <GenerateRunnerCards
-                  sponsoring_contracts_download_open = !sponsoring_contracts_download_open;
+            bind:sponsoring_contracts_show
-                }}
+            bind:generate_runners />
-                type="button"
-                class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm inline-flex"
-                id="options-menu"
-                aria-haspopup="true"
-                aria-expanded="true">
-                {$_('generate-sponsoring-contract')}
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="24"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  class="-mr-1 ml-2 h-5 w-5"><path
-                    fill="none"
-                    d="M0 0h24v24H0z" />
-                  <path
-                    fill="currentColor"
-                    d="M3 19h18v2H3v-2zm10-5.83l6.07-6.07 1.42 1.41L12 17 3.52 8.52l1.4-1.42L11 13.17V2h2v11.17z" /></svg>
-              </button>
-            </div>
-            {#if sponsoring_contracts_download_open}
-              <div
-                class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5"
-                id="sponsoring:dropdown:menu">
-                <div
-                  class="py-1"
-                  role="menu"
-                  aria-orientation="vertical"
-                  aria-labelledby="options-menu">
-                  <span
-                    class="block w-full text-left px-4 py-2 text-sm text-gray-700">{$_('select-language')}</span>
-                  <button
-                    on:click={() => {
-                      generateSponsoringContract('de');
-                    }}
-                    type="submit"
-                    class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900 inline-flex"
-                    role="menuitem">
-                    {$_('german')}
-                  </button>
-                  <button
-                    on:click={() => {
-                      generateSponsoringContract('en');
-                    }}
-                    type="submit"
-                    class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900 inline-flex"
-                    role="menuitem">
-                    {$_('english')}
-                  </button>
-                </div>
-              </div>
-            {/if}
-          </div>
           {#if !delete_triggered}
             <button
               on:click={() => {
@@ -378,13 +273,17 @@
             .toLowerCase()
             .includes(
               filterText.toLowerCase()
-            ) || option.id.value.toString().startsWith(filterText.toLowerCase())}
+            ) || option.id.value
+            .toString()
+            .startsWith(filterText.toLowerCase())}
         items={groups}
         showChevron={true}
         placeholder={$_('search-for-an-organization-or-team-by-name-or-id')}
         noOptionsMessage={$_('no-organization-or-team-found')}
         bind:selectedValue={group}
-        on:select={(selectedValue) => {editable.group = selectedValue.detail.value.id}}
+        on:select={(selectedValue) => {
+          editable.group = selectedValue.detail.value.id;
+        }}
         on:clear={() => (editable.group = null)} />
     </div>
     <div class="text-sm w-full">

src/components/runners/RunnersOverview.svelte

@@ -8,7 +8,8 @@
   import store from "../../store";
   import RunnersEmptyState from "./RunnersEmptyState.svelte";
   import Select from "svelte-select";
-  import Toastify from "toastify-js";
+  import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
+  import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
   $: searchvalue = "";
   $: active_deletes = [];
   export let current_runners = [];
@@ -20,7 +21,13 @@
   $: filter__teams = selectedFilter_teams || [];
   $: filter__orgs = selectedFilter || [];
   $: filterGroupIDs = filter__teams.concat(filter__orgs).map((i) => i.value);
-  $: sponsoring_contracts_download_open = false;
+  $: sponsoring_contracts_show = current_runners.some(
+    (r) => r.is_selected === true
+  );
+  $: cards_show = current_runners.some(
+    (r) => r.is_selected === true
+  );
+  $: generate_runners = current_runners.filter((r) => r.is_selected === true);
   $: teams = [];
   $: orgs = [];
   $: mappedteams = teams.map(function (g) {
@@ -31,14 +38,7 @@
       return { value: g.id, label: g.name };
     })
     .concat(mappedteams);
-  document.addEventListener("click", function (e) {
+
-    if (
-      e.target.parentNode?.parentNode?.id != "sponsoring:dropdown" &&
-      e.target.parentNode?.parentNode?.id != "sponsoring:dropdown:menu"
-    ) {
-      sponsoring_contracts_download_open = false;
-    }
-  });
   RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
     teams = val;
   });
@@ -51,56 +51,6 @@
     }
     return id.toString() === searchvalue;
   }
-  function generateSponsoringContract(locale) {
-    sponsoring_contracts_download_open = false;
-    const toast = Toastify({
-      text: $_("generating-pdf"),
-      duration: -1,
-    }).showToast();
-    fetch(
-      `${config.baseurl}/documents/contracts?locale=${locale}&download=true&key=${config.documentserver_key}`,
-      {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify(
-          current_runners.filter((r) => r.is_selected === true)
-        ),
-      }
-    )
-      .then((response) => {
-        if (response.status != "200") {
-          toast.hideToast();
-          Toastify({
-            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();
-        }
-      })
-      .then((blob) => {
-        const url = window.URL.createObjectURL(blob);
-        let a = document.createElement("a");
-        a.href = url;
-        a.download = "Sponsoring.pdf";
-        document.body.appendChild(a);
-        a.click();
-        a.remove();
-        toast.hideToast();
-        Toastify({
-          text: $_("pdf-successfully-generated"),
-          duration: 3500,
-          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-        }).showToast();
-      })
-      .catch((err) => {
-        console.error(err);
-      });
-  }
 </script>
 
 {#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:GET')}
@@ -136,66 +86,12 @@
           isMulti={true} />
       </div>
       <div class="h-12">
-        {#if current_runners.some((r) => r.is_selected === true)}
+        <GenerateSponsoringContracts
-          <div id="sponsoring:dropdown" class="relative inline-block">
+          bind:sponsoring_contracts_show
-            <div>
+          bind:generate_runners />
-              <button
+        <GenerateRunnerCards
-                on:click={() => {
+          bind:cards_show
-                  sponsoring_contracts_download_open = !sponsoring_contracts_download_open;
+          bind:generate_runners />
-                }}
-                type="button"
-                class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm inline-flex"
-                id="options-menu"
-                aria-haspopup="true"
-                aria-expanded="true">
-                {$_('generate-sponsoring-contracts')}
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="24"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  class="-mr-1 ml-2 h-5 w-5"><path
-                    fill="none"
-                    d="M0 0h24v24H0z" />
-                  <path
-                    fill="currentColor"
-                    d="M3 19h18v2H3v-2zm10-5.83l6.07-6.07 1.42 1.41L12 17 3.52 8.52l1.4-1.42L11 13.17V2h2v11.17z" /></svg>
-              </button>
-            </div>
-            {#if sponsoring_contracts_download_open}
-              <div
-                class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5"
-                id="sponsoring:dropdown:menu">
-                <div
-                  class="py-1"
-                  role="menu"
-                  aria-orientation="vertical"
-                  aria-labelledby="options-menu">
-                  <span
-                    class="block w-full text-left px-4 py-2 text-sm text-gray-700">{$_('select-language')}</span>
-                  <button
-                    on:click={() => {
-                      generateSponsoringContract('de');
-                    }}
-                    type="submit"
-                    class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
-                    role="menuitem">
-                    {$_('german')}
-                  </button>
-                  <button
-                    on:click={() => {
-                      generateSponsoringContract('en');
-                    }}
-                    type="submit"
-                    class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
-                    role="menuitem">
-                    {$_('english')}
-                  </button>
-                </div>
-              </div>
-            {/if}
-          </div>
-        {/if}
       </div>
       <div
         class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">

src/components/scanstations/CopyScanStationTokenModal.svelte

@@ -23,14 +23,14 @@
         throw new Error();
       }
       Toastify({
-        text: $_('copied-token-to-clipboard'),
+        text: $_("copied-token-to-clipboard"),
         duration: 500,
         backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
       }).showToast();
       copied = true;
     } catch (err) {
       Toastify({
-        text: $_('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%)",
@@ -75,7 +75,9 @@
                   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">{$_('token')}</h3>
+              <h3 class="text-lg leading-6 font-medium text-gray-900">
+                {$_('token')}
+              </h3>
               <div class="mt-2 mb-6">
                 <p class="text-sm text-gray-500">
                   {$_('the-scanstations-api-token-will-only-get-displayed-once-you-wont-be-able-to-change-or-view-it-again')}
@@ -106,7 +108,9 @@
                         d="M7 4V2h10v2h3l1 1v16a1 1 0 01-1 1H4a1 1 0 01-1-1V5l1-1h3zm0 2H5v14h14V6h-2v2H7V6zm2-2v2h6V4H9z" /></svg>
                   </div>
                 </div>
-                <p class="text-gray-500 text-xs">{$_('click-to-copy-token-to-clipboard')}</p>
+                <p class="text-gray-500 text-xs">
+                  {$_('click-to-copy-token-to-clipboard')}
+                </p>
               </div>
             </div>
           </div>

src/components/settings/Settings.svelte

@@ -4,6 +4,9 @@
   import { MeService } from "@odit/lfk-client-js";
   import Toastify from "toastify-js";
   import ConfirmProfileDeletion from "./ConfirmProfileDeletion.svelte";
+  import PasswordStrength, {
+    password_strong_enough_and_equal,
+  } from "../auth/PasswordStrength.svelte";
   $: data_loaded = false;
   $: delete_triggered = false;
   $: original_data = {};
@@ -15,8 +18,10 @@
     JSON.stringify(editable) === JSON.stringify(original_data)
   );
   $: save_enabled = changes_performed && isEmail(editable.email);
-  $: update_password_enabled =
+  $: update_password_enabled = password_strong_enough_and_equal(
-    password_change.length > 0 && password_change === password_confirm;
+    password_change,
+    password_confirm
+  );
   const user_promise = MeService.meControllerGet().then((data) => {
     data_loaded = true;
     data.groups = data.groups.map((g) => g.id);
@@ -45,7 +50,7 @@
   function changePassword() {
     if (data_loaded === true && update_password_enabled) {
       Toastify({
-        text: $_('changing-your-password'),
+        text: $_("changing-your-password"),
         duration: 2500,
       }).showToast();
       let postdata = Object.assign({}, original_data);
@@ -56,7 +61,7 @@
           password_change = "";
           postdata = {};
           Toastify({
-            text: $_('password-changed'),
+            text: $_("password-changed"),
             duration: 2500,
             backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
           }).showToast();
@@ -242,10 +247,7 @@
                     class="border-gray-300 placeholder-gray-500 appearance-none rounded-md relative block w-full px-3 py-2 border focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm"
                     placeholder={$_('password')} />
                 </div>
-                {#if password_change != password_confirm && password_change.length > 0}
+                <PasswordStrength bind:password_change bind:password_confirm />
-                  <span
-                    class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">{$_('passwords-dont-match')}</span>
-                {/if}
               </div>
               <div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
                 <button
@@ -257,9 +259,9 @@
                   {$_('update-password')}
                 </button>
                 {#if update_password_enabled}
-                <p>
+                  <p>
-                  {$_('after-the-update-youll-get-logged-out-please-login-with-your-new-password-after-that')}
+                    {$_('after-the-update-youll-get-logged-out-please-login-with-your-new-password-after-that')}
-                </p>
+                  </p>
                 {/if}
               </div>
             </div>

src/components/teams/TeamDetail.svelte

@@ -11,7 +11,9 @@
   import ImportRunnerModal from "../runners/ImportRunnerModal.svelte";
   import PromiseError from "../base/PromiseError.svelte";
   import ConfirmTeamDeletion from "./ConfirmTeamDeletion.svelte";
-import Teams from "./Teams.svelte";
+  import Teams from "./Teams.svelte";
+  import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
+  import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
   let [teamdata, original, delete_team, orgs, contacts, modal_open] = [
     {},
     {},
@@ -26,7 +28,9 @@ import Teams from "./Teams.svelte";
   $: save_enabled = !data_changed && teamdata.parentGroup != null;
   $: data_loaded = false;
   $: data_changed = JSON.stringify(teamdata) === JSON.stringify(original);
-  $: sponsoring_contracts_download_open = false;
+  $: sponsoring_contracts_show = true;
+  $: cards_show = true;
+  $: generate_teams = [original];
   $: group = {};
   $: contact = {};
   //
@@ -38,32 +42,25 @@ import Teams from "./Teams.svelte";
     data_loaded = true;
     teamdata = Object.assign(teamdata, value);
     original = Object.assign(original, value);
-    RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
+    RunnerOrganizationService.runnerOrganizationControllerGetAll().then(
-      orgs = val.map((r) => {
+      (val) => {
-        return { label: r.name, value: r };
+        orgs = val.map((r) => {
-      });
+          return { label: r.name, value: r };
-      group = orgs.find((g) => g.value.id == teamdata.parentGroup.id);
+        });
-    });
+        group = orgs.find((g) => g.value.id == teamdata.parentGroup.id);
+      }
+    );
     GroupContactService.groupContactControllerGetAll().then((val) => {
       contacts = val.map((r) => {
         return { label: getContactLabel(r), value: r };
       });
-      if(teamdata.contact){
+      if (teamdata.contact) {
         contact = contacts.find((g) => g.value.id == teamdata.contact.id);
-      }
+      } else {
-      else{
         contact = null;
       }
     });
   });
-  document.addEventListener("click", function (e) {
-    if (
-      e.target.parentNode?.parentNode?.id != "sponsoring:dropdown" &&
-      e.target.parentNode?.parentNode?.id != "sponsoring:dropdown:menu"
-    ) {
-      sponsoring_contracts_download_open = false;
-    }
-  });
   function deleteTeam() {
     RunnerTeamService.runnerTeamControllerRemove(original.id, false)
       .then((resp) => {
@@ -101,55 +98,6 @@ import Teams from "./Teams.svelte";
         .catch((err) => {});
     }
   }
-  async function generateSponsoringContract(locale) {
-    sponsoring_contracts_download_open = false;
-    const runners = await RunnerTeamService.runnerTeamControllerGetRunners(
-      teamdata.id
-    );
-    const toast = Toastify({
-      text: $_("generating-pdf"),
-      duration: -1,
-    }).showToast();
-    fetch(
-      `${config.baseurl}/documents/contracts?locale=${locale}&download=true&key=${config.documentserver_key}`,
-      {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify(runners),
-      }
-    )
-      .then((response) => {
-        if (response.status != "200") {
-          toast.hideToast();
-          Toastify({
-            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();
-        }
-      })
-      .then((blob) => {
-        const url = window.URL.createObjectURL(blob);
-        let a = document.createElement("a");
-        a.href = url;
-        a.download = "Sponsorings_" + teamdata.name + ".pdf";
-        document.body.appendChild(a);
-        a.click();
-        a.remove();
-        toast.hideToast();
-        Toastify({
-          text: $_("pdf-successfully-generated"),
-          duration: 3500,
-          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-        }).showToast();
-      })
-      .catch((err) => {});
-  }
 </script>
 
 <ImportRunnerModal
@@ -168,64 +116,12 @@ import Teams from "./Teams.svelte";
     <div class="mb-8 text-3xl font-extrabold leading-tight">
       {original.name}
       <span data-id="org_actions_${teamdata.id}">
-        <div id="sponsoring:dropdown" class="relative inline-block">
+        <GenerateSponsoringContracts
-          <div>
+          bind:sponsoring_contracts_show
-            <button
+          bind:generate_teams />
-              on:click={() => {
+        <GenerateRunnerCards
-                sponsoring_contracts_download_open = !sponsoring_contracts_download_open;
+          bind:cards_show
-              }}
+          bind:generate_teams />
-              type="button"
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm inline-flex"
-              id="options-menu"
-              aria-haspopup="true"
-              aria-expanded="true">
-              {$_('generate-sponsoring-contracts')}
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                class="-mr-1 ml-2 h-5 w-5"><path
-                  fill="none"
-                  d="M0 0h24v24H0z" />
-                <path
-                  fill="currentColor"
-                  d="M3 19h18v2H3v-2zm10-5.83l6.07-6.07 1.42 1.41L12 17 3.52 8.52l1.4-1.42L11 13.17V2h2v11.17z" /></svg>
-            </button>
-          </div>
-          {#if sponsoring_contracts_download_open}
-            <div
-              class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5"
-              id="sponsoring:dropdown:menu">
-              <div
-                class="py-1"
-                role="menu"
-                aria-orientation="vertical"
-                aria-labelledby="options-menu">
-                <span
-                  class="block w-full text-left px-4 py-2 text-sm text-gray-700">{$_('select-language')}</span>
-                <button
-                  on:click={() => {
-                    generateSponsoringContract('de');
-                  }}
-                  type="submit"
-                  class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900 inline-flex"
-                  role="menuitem">
-                  {$_('german')}
-                </button>
-                <button
-                  on:click={() => {
-                    generateSponsoringContract('en');
-                  }}
-                  type="submit"
-                  class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900 inline-flex"
-                  role="menuitem">
-                  {$_('english')}
-                </button>
-              </div>
-            </div>
-          {/if}
-        </div>
         {#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:IMPORT')}
           <button
             on:click={() => {
@@ -367,7 +263,7 @@ import Teams from "./Teams.svelte";
         placeholder={$_('no-contact-selected')}
         noOptionsMessage={$_('no-contact-found')}
         bind:selectedValue={contact}
-        on:select={(selectedValue)=> teamdata.contact = selectedValue.detail.value}
+        on:select={(selectedValue) => (teamdata.contact = selectedValue.detail.value)}
         on:clear={() => (teamdata.contact = null)} />
     </div>
     <div class="text-sm w-full">
@@ -380,13 +276,15 @@ import Teams from "./Teams.svelte";
             .toLowerCase()
             .includes(
               filterText.toLowerCase()
-            ) || option.id.value.toString().startsWith(filterText.toLowerCase())}
+            ) || option.id.value
+            .toString()
+            .startsWith(filterText.toLowerCase())}
         items={orgs}
         showChevron={true}
         placeholder={$_('search-for-an-organization-by-name-or-id')}
         noOptionsMessage={$_('no-organizations-found')}
         bind:selectedValue={group}
-        on:select={(selectedValue)=> teamdata.parentGroup = selectedValue.detail.value}
+        on:select={(selectedValue) => (teamdata.parentGroup = selectedValue.detail.value)}
         on:clear={() => (teamdata.parentGroup = null)} />
     </div>
   </section>

src/components/teams/TeamsOverview.svelte

@@ -7,9 +7,17 @@
   import TeamsEmptyState from "./TeamsEmptyState.svelte";
   import ConfirmTeamDeletion from "./ConfirmTeamDeletion.svelte";
   import { clickOutside } from "../base/outsideclick";
+  import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
+  import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
   $: searchvalue = "";
   $: active_deletes = [];
-  $: sponsoring_contracts_download_open = false;
+  $: sponsoring_contracts_show = current_teams.some(
+    (r) => r.is_selected === true
+  );
+  $: cards_show = current_teams.some(
+    (r) => r.is_selected === true
+  );
+  $: generate_teams = current_teams.filter((r) => r.is_selected === true);
   export let current_teams = [];
   let modal_open = false;
   let delete_team = {};
@@ -19,70 +27,6 @@
   teams_promise.then((data) => {
     usersstore.set(data);
   });
-  document.addEventListener("click", function (e) {
-      if (
-        e.target.parentNode?.parentNode?.id != "sponsoring:dropdown" &&
-        e.target.parentNode?.parentNode?.id != "sponsoring:dropdown:menu"
-      ) {
-        sponsoring_contracts_download_open = false;
-      }
-  });
-  async function generateSponsoringContract(locale) {
-    sponsoring_contracts_download_open = false;
-    const teams = current_teams.filter((r) => r.is_selected === true);
-    const toast = Toastify({
-      text: $_("generating-pdfs"),
-      duration: -1,
-    }).showToast();
-    let count = 0;
-    for await (const t of teams) {
-      count++;
-      const runners = await RunnerTeamService.runnerTeamControllerGetRunners(
-        t.id
-      );
-      fetch(
-        `${config.baseurl}/documents/contracts?locale=${locale}&download=true&key=${config.documentserver_key}`,
-        {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify(runners),
-        }
-      )
-        .then((response) => {
-          if (response.status != "200") {
-            toast.hideToast();
-            Toastify({
-              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();
-          }
-        })
-        .then((blob) => {
-          const url = window.URL.createObjectURL(blob);
-          let a = document.createElement("a");
-          a.href = url;
-          a.download = "Sponsorings_" + t.name + ".pdf";
-          document.body.appendChild(a);
-          a.click();
-          a.remove();
-          if (count === teams.length) {
-            toast.hideToast();
-            Toastify({
-              text: $_("pdfs-successfully-generated"),
-              duration: 3500,
-              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-            }).showToast();
-          }
-        })
-        .catch((err) => {});
-    }
-  }
 </script>
 
 <ConfirmTeamDeletion
@@ -111,69 +55,12 @@
         aria-label={$_('datatable.search')}
         class="gridjs-input gridjs-search-input mb-4" />
       <div class="h-12">
-        {#if current_teams.some((r) => r.is_selected === true)}
+        <GenerateSponsoringContracts
-          <div id="sponsoring:dropdown" class="relative inline-block">
+          bind:sponsoring_contracts_show
-            <div>
+          bind:generate_teams />
-              <button
+        <GenerateRunnerCards
-                on:click={() => {
+          bind:cards_show
-                  sponsoring_contracts_download_open = !sponsoring_contracts_download_open;
+          bind:generate_teams />
-                }}
-                type="button"
-                class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm inline-flex"
-                id="options-menu"
-                aria-haspopup="true"
-                aria-expanded="true">
-                {$_('generate-sponsoring-contracts')}
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="24"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  class="-mr-1 ml-2 h-5 w-5"><path
-                    fill="none"
-                    d="M0 0h24v24H0z" />
-                  <path
-                    fill="currentColor"
-                    d="M3 19h18v2H3v-2zm10-5.83l6.07-6.07 1.42 1.41L12 17 3.52 8.52l1.4-1.42L11 13.17V2h2v11.17z" /></svg>
-              </button>
-            </div>
-            {#if sponsoring_contracts_download_open}
-              <div
-                class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5"
-                id="sponsoring:dropdown:menu"
-                on:click_outside={() => {
-                  sponsoring_contracts_download_open = false;
-                }}>
-                <div
-                  class="py-1"
-                  role="menu"
-                  aria-orientation="vertical"
-                  aria-labelledby="options-menu">
-                  <span
-                    class="block w-full text-left px-4 py-2 text-sm text-gray-700">{$_('select-language')}</span>
-                  <button
-                    on:click={() => {
-                      generateSponsoringContract('de');
-                    }}
-                    type="submit"
-                    class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900 inline-flex"
-                    role="menuitem">
-                    {$_('german')}
-                  </button>
-                  <button
-                    on:click={() => {
-                      generateSponsoringContract('en');
-                    }}
-                    type="submit"
-                    class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900 inline-flex"
-                    role="menuitem">
-                    {$_('english')}
-                  </button>
-                </div>
-              </div>
-            {/if}
-          </div>
-        {/if}
       </div>
       <div
         class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">

src/components/users/AddUserModal.svelte

@@ -5,6 +5,9 @@
   import { UserService } from "@odit/lfk-client-js";
   import isEmail from "validator/es/lib/isEmail";
   import Toastify from "toastify-js";
+  import PasswordStrength, {
+    password_strong_enough,
+  } from "../auth/PasswordStrength.svelte";
   export let modal_open;
   export let current_users;
   let firstname_input;
@@ -28,7 +31,10 @@
   $: isLastnameValid = lastname_input_value.trim().length !== 0;
   $: isFirstnameValid = firstname_input_value.trim().length !== 0;
   $: createbtnenabled =
-    isFirstnameValid && isLastnameValid && isPasswordValid && isEmailValid;
+    isFirstnameValid &&
+    isLastnameValid &&
+    password_strong_enough(password_input_value) &&
+    isEmailValid;
   (function () {
     document.onkeydown = function (e) {
       e = e || window.event;
@@ -203,12 +209,8 @@
                     type="password"
                     name="password"
                     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 !isPasswordValid}
+                  <PasswordStrength
-                    <span
+                    bind:password_change={password_input_value} />
-                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-                      {$_('password-is-required')}
-                    </span>
-                  {/if}
                 </div>
                 <div class="col-span-6">
                   <label

src/locales/de.json

@@ -4,11 +4,13 @@
     "about": "Über",
     "action": "Aktionen",
     "active": "Aktiv",
+    "add-card": "Karte erstellen",
     "add-donation": "Sponsoring erstellen",
     "add-donor": "Sponsor:in erstellen",
     "add-scan": "Scan erstellen",
     "add-the-first-scanstation": "Erstelle deine erste Scannerstation.",
     "add-user-group": "Neue Gruppe erstellen",
+    "add-your-first-card": "Erstelle deine erste Läuferkarte",
     "add-your-first-contact": "Erstelle den ersten Kontakt",
     "add-your-first-donor": "Erstelle die erste Sponsor:in",
     "add-your-first-group": "Erstelle die erste Gruppe",
@@ -19,6 +21,7 @@
     "add-your-first-user": "Erstelle die erste Benutzer:in",
     "add-your-fist-donation": "Erstelle dein erstes Sponsoring",
     "add-your-fist-scan": "Füge deinen ersten Scan hinzu",
+    "adding-card": "Karte wird erstellt",
     "adding-scan": "Scan wird hinzugefügt",
     "address": "Adresse",
     "address-is-required": "Du musst eine Adresse angeben",
@@ -27,6 +30,7 @@
     "all-associated-donations-will-get-deleted-as-well": "Alle Sponsorings dieser Sponsor:in werden ebenfalls gelöscht",
     "all-associated-runners-will-be-deleted-too": "Alle zugehörigen Läufer:innen werden auch gelöscht!",
     "all-associated-teams-and-runners-will-be-deleted-too": "Alle assoziierten Teams und Läufer:innen werden auch gelöscht!",
+    "amount": "Anzahl",
     "amount-per-kilometer": "Betrag pro Kilometer",
     "apartment-suite-etc": "Apartment, Wohnung, etc.",
     "application_name": "Lauf für Kaya! - Admin",
@@ -42,11 +46,17 @@
     "cancel-keep-organization": "Abbrechen und Organisation bearbeiten",
     "cancel-keep-team": "Abbrechen, Team behalten",
     "cannot-reset-your-password-directly": "Schade. \nWir können das Passwort leider nicht direkt zurücksetzen.\nBitte sende uns eine Mail in der du deine Identität bestätigst.",
+    "card-added": "Karte wurde hinzugefügt",
+    "card-deleted": "Karte gelöscht",
+    "card-updated": "Karte aktualisiert",
+    "cards": "Läuferkarten",
     "change-your-password-here": "Hier kannst du dein Passwort ändern",
     "changing-your-password": "Passwort wird geändert",
     "city": "Stadt",
+    "click-to-copy-the-link-into-your-clipboard": "Klicke auf den Link, um ihn in deine Zwischenablage zu kopieren",
     "click-to-copy-token-to-clipboard": "Klicke auf den Token, um ihn in deine Zwischenablage zu kopieren",
     "close": "Schließen",
+    "code": "Code",
     "configure-the-tracks-and-minimum-lap-times": "Bearbeite die Tracks und ihre minimale Rundenzeit",
     "confirm": "Bestätigen",
     "confirm-delete": "Löschung Bestätigen",
@@ -63,11 +73,13 @@
     "contact-is-not-a-member-in-any-group": "Kontakt gehört zu keiner Gruppe",
     "contacts": "Kontakte",
     "contacts-are-being-loaded": "Kontakte werden geladen ...",
+    "copied-link-to-clipboard": "Link wurde in die Zwischenablage kopiert",
     "copied-token-to-clipboard": "Token wurde in die Zwischenablage kopiert",
     "count_organizations": "Organisationen (Anzahl)",
     "count_teams": "Teams (Anzahl)",
     "create": "Erstellen",
     "create-a-new": "Erstelle eine neue",
+    "create-a-new-card": "Neue Läuferkarte erstellen",
     "create-a-new-contact": "Kontakt erstellen",
     "create-a-new-distance-donation": "Erstelle ein neues Sponsoring",
     "create-a-new-donor": "Neue Sponsor:in erstellen",
@@ -80,10 +92,16 @@
     "create-a-new-track": "Neuen Track erstellen",
     "create-a-new-user": "Neue Benutzer:in anlegen",
     "create-a-new-user-group": "Erstelle eine neue Gruppe",
+    "create-and-generate-pdf": "Erstellen und PDF herunterladen",
+    "create-bulk-blanco-cards": "Blankokarten erstellen",
+    "create-bulk-cards": "Blankokarten erstellen",
     "create-organization": "Organisation erstellen",
     "create-team": "Team erstellen",
     "create-track": "Track erstellen",
     "create-user": "Benutzer anlegen",
+    "create-without-pdf": "Ohne PDF erstellen",
+    "created-blanco-cards": "Blankokarten wurden erstellt",
+    "creating-blanco-cards": "Erstelle Blankokarten",
     "credits": "Credits",
     "csv_import__class": "Klasse",
     "csv_import__firstname": "Vorname",
@@ -151,10 +169,11 @@
     "dont-panic-were-resetting-it": "Keine Panik, wir setzen es zurück ✌",
     "e-mail-adress": "E-Mail-Adresse",
     "edit": "Bearbeiten",
+    "edit-a-card": "Läuferkarte bearbeiten",
     "edit-permissions": "Berechtigungen bearbeiten",
     "email_address_or_username": "E-Mail-Adresse/ Benutzername",
     "enabled": "aktiviert",
-    "enabled_large": "Disabled",
+    "enabled_large": "Aktiviert",
     "english": "Englisch",
     "error-during-import": "Fehler beim Importieren",
     "error-whyile-copying-to-clipboard": "Fehler beim Kopieren in die Zwischenablage",
@@ -172,6 +191,7 @@
     "geerbte": "geerbte",
     "general-stats": "Allgemeine Statistiken",
     "general_promise_error": "😢 Ein unbekannter Fehler ist aufgetreten",
+    "generate-runnercards": "Läuferkarten generieren",
     "generate-sponsoring-contract": "Sponsoringvertrag generieren",
     "generate-sponsoring-contracts": "Sponsoringverträge generieren",
     "generating-pdf": "Pdf wird generiert...",
@@ -190,6 +210,7 @@
     "groups-are-being-loaded": "Gruppen werden geladen",
     "home": "Start",
     "icon-image-credits": "Wir möchten uns außerdem für die verwendeten Icons und Bilder bedanken bei:",
+    "if-you-want-to-create-multiple-blanco-cards-try-the-add-bulk-button": "Wenn du mehrere Blankokarten erstellen willst, nutze doch den \"Blankokarten erstellen\" Knopf.",
     "import-finished": "Import abgeschlossen",
     "import-runners": "Läufer:innen importieren",
     "import__target-organization": "Ziel Organisation",
@@ -200,6 +221,7 @@
     "internal-error": "Interner Fehler",
     "invalid": "Ungültig",
     "invalid-mail-reset": "Das ist keine gültige E-Mail",
+    "just-enter-how-many-you-want-and-the-system-will-create-them": "Gebe einfach ein, wie viele Blankokarten das System erstellen soll.",
     "laeufer-hinzufuegen": "Läufer:in hinzufügen",
     "laeufer-importieren": "Läufer:innen importieren",
     "laptime": "Rundenzeit",
@@ -208,6 +230,7 @@
     "lfk-is-os": "Das \"Lauf für Kaya!\" Frontend ist (wie alle anderen Projekte für den \"LfK!\" auch) ein OpenSource Projekt.",
     "license": "Lizenz",
     "licenses-are-being-loaded": "Lizenzen werden geladen...",
+    "loading-cards": "Läuferkarten werden geladen",
     "loading-contact-details": "Kontaktdaten werden geladen ...",
     "loading-donation-details": "Lade Sponsoringdetails",
     "loading-donor-details": "Lade Details",
@@ -224,6 +247,10 @@
     "middle-name": "Mittelname",
     "minimum-lap-time-in-s": "Minimale Rundenzeit (in Sekunden)",
     "minimum-lap-time-must-be-a-positive-number-or-0": "Die minimale Rundenzeit muss eine positive Zahl oder 0 sein",
+    "must-be-at-least-10-characters-long": "Passwort muss mindestens 10 Zeichen lang sein!",
+    "must-contain-a-lowercase-letter": "Passwort muss einen Großbuchstaben enthalten!",
+    "must-contain-a-number": "Passwort muss eine Zahl enthalten!",
+    "must-contain-a-uppercase-letter": "Passwort muss einen Kleinbuchstaben enthalten!",
     "name": "Name",
     "name-is-required": "Der Gruppenname muss angegeben werden",
     "new-password": "Neues Passwort",
@@ -237,6 +264,7 @@
     "no-organizations-found": "Keine Organisationen gefunden",
     "no-runners-found": "Keine Läufer:innen gefunden",
     "no-tracks-added-yet": "Es wurden noch keine Tracks erstellt.",
+    "non-blanko": "Keine/Blankokarte",
     "organization": "Organisation",
     "organization-added": "Organisation hinzugefügt",
     "organization-deleted": "Organisation gelöscht",
@@ -254,7 +282,7 @@
     "password-reset-in-progress": "Passwort wird zurückgesetzt...",
     "password-reset-mail-sent": "Passwort-Reset Mail wurde an \"{usersEmail}\" geschickt.",
     "password-reset-successful": "Passwort erfolgreich zurückgesetzt!",
-    "passwords-dont-match": "Die Passwörter stimmen nicht überein.",
+    "passwords-dont-match": "Die Passwörter stimmen nicht überein!",
     "pdf-generation-failed": "PDF Generierung fehlgeschlagen!",
     "pdf-successfully-generated": "PDF wurde erfolgreich generiert!",
     "pdfs-successfully-generated": "Alle PDFs wurden generiert!",
@@ -316,6 +344,7 @@
     "search-for-runner-by-name-or-id": "Suche eine Läufer:in (via Name oder Id)",
     "select-all": "Alle auswählen",
     "select-language": "Sprache auswählen",
+    "selfservice-registration": "Selfservice Registrierung",
     "send-a-mail-to-lfk-odit-services": "Sende eine Mail an lfk@odit.services",
     "set-the-user-active-inactive": "Den Benutzer auf (in)aktiv setzen",
     "settings": "Einstellungen",
@@ -334,6 +363,7 @@
     "the-provided-phone-number-is-invalid-less-than-br-greater-than-please-enter-a-valid-international-number": "Die angegebene Telefonnummer ist nicht korrekt. <br /> Bitte gebe eine Telefonnummer im internationalen Format an...",
     "the-scans-distance-must-be-greater-than-0m": "Die Distanz muss größer als 0m sein.",
     "the-scanstations-api-token-will-only-get-displayed-once-you-wont-be-able-to-change-or-view-it-again": "Der Scannerstation Token wird nur einmal angezeigt - du kannst ihn nicht ändern oder ihn dir nochmal anzeigen lassen!",
+    "there-are-no-cards-yet": "Es gibt noch keine Läuferkarten.",
     "there-are-no-contacts-added-yet": "Es wurden noch keine Kontakte hinzugefügt.",
     "there-are-no-donations-yet": "Es gibt noch keine Sponsorings",
     "there-are-no-donors-yet": "Es gibt noch keine Sponsor:innen",
@@ -343,6 +373,7 @@
     "there-are-no-scans-yet": "Es gibt noch keine Scans",
     "there-are-no-teams-added-yet": "Es wurden noch keine Teams hinzugefügt.",
     "there-are-no-users-added-yet": "Es wurden noch keine Benutzer hinzugefügt.",
+    "this-card-is": "Diese Karte ist",
     "this-might-take-a-moment": "Das könnte einen kleinen Moment dauern",
     "this-scanstation-is": "Diese Station ist",
     "token": "Token",
@@ -365,6 +396,7 @@
     "updated-organization": "Organisation wurde aktualisiert",
     "updated-scan": "Scan wurde aktualisiert",
     "updateing-group": "Gruppe wird aktualisiert...",
+    "updating-card": "Karte wird aktualisiert",
     "updating-organization": "Organisation wird aktualisiert",
     "updating-permissions": "Berechtigungen werden aktualisiert...",
     "updating-runner": "Läufer:in wird aktualisiert.",
@@ -386,7 +418,10 @@
     "yes-i-copied-the-token": "Ja, ich habe den Token kopiert",
     "you-are-going-to-loose-all-permissions-and-access-to-the-runner-system": "Du wirst all deine Berechtigungen und den Zugriff aufs Läufersystem verlieren!",
     "you-can-now-use-your-new-password-to-log-in-to-your-account": "Du kannst dich jetzt mit deinem neuen Passwort anmelden! 🎉",
+    "you-can-provide-a-runner-but-you-dont-have-to": "Du kannst eine Läufer:in angeben, musst aber nicht.",
     "you-dont-have-any-scanstations-yet": "Es gibt noch keine Scannerstationen",
     "you-have-to-provide-an-organization": "Du musst eine Organisation angeben",
+    "you-have-to-save-your-changes-to-generate-a-link": "Du musst deine Änderungen speichern, um einen Link zu generieren.",
+    "you-must-create-at-least-one-card-or-cancel": "Du musst mindestens eine Blankokarte erstellen (oder abbrechen).",
     "zip-postal-code": "Postleitzahl"
 }

src/locales/en.json

@@ -4,11 +4,13 @@
     "about": "About",
     "action": "Action",
     "active": "Active",
+    "add-card": "Add Card",
     "add-donation": "Add donation",
     "add-donor": "add donor",
     "add-scan": "Add scan",
     "add-the-first-scanstation": "Add your first scanstation.",
     "add-user-group": "Add User Group",
+    "add-your-first-card": "Add your first card",
     "add-your-first-contact": "Add your first contact",
     "add-your-first-donor": "add your first donor",
     "add-your-first-group": "Add your first group",
@@ -19,6 +21,7 @@
     "add-your-first-user": "Add your first user",
     "add-your-fist-donation": "Add your fist donation",
     "add-your-fist-scan": "Add your fist scan",
+    "adding-card": "Adding Card",
     "adding-scan": "Adding Scan",
     "address": "Address",
     "address-is-required": "Address is required",
@@ -27,6 +30,7 @@
     "all-associated-donations-will-get-deleted-as-well": "All associated donations will get deleted as well",
     "all-associated-runners-will-be-deleted-too": "All associated runners will be deleted too!",
     "all-associated-teams-and-runners-will-be-deleted-too": "All associated teams and runners will be deleted too!",
+    "amount": "Amount",
     "amount-per-kilometer": "Amount per kilometer",
     "apartment-suite-etc": "Apartment, suite, etc.",
     "application_name": "Lauf für Kaya! - Admin",
@@ -42,11 +46,17 @@
     "cancel-keep-organization": "Cancel, keep organization",
     "cancel-keep-team": "Cancel, keep team",
     "cannot-reset-your-password-directly": "Bummer. We unfortunately cannot reset your password directly. Please send us a mail and confirm your identity",
+    "card-added": "Card added",
+    "card-deleted": "Card deleted",
+    "card-updated": "Card updated",
+    "cards": "Cards",
     "change-your-password-here": "Change your password here",
     "changing-your-password": "Changing your password",
     "city": "City",
+    "click-to-copy-the-link-into-your-clipboard": "Click to copy the link into your clipboard",
     "click-to-copy-token-to-clipboard": "Click to copy the token to your clipboard",
     "close": "Close",
+    "code": "Code",
     "configure-the-tracks-and-minimum-lap-times": "configure the tracks & minimum lap times",
     "confirm": "Confirm",
     "confirm-delete": "Confirm Delete",
@@ -63,11 +73,13 @@
     "contact-is-not-a-member-in-any-group": "Contact is not a member in any group",
     "contacts": "Contacts",
     "contacts-are-being-loaded": "contacts are being loaded...",
+    "copied-link-to-clipboard": "Copied link to clipboard",
     "copied-token-to-clipboard": "Copied token to clipboard",
     "count_organizations": "# Organizations",
     "count_teams": "# Teams",
     "create": "Create",
     "create-a-new": "Create a new",
+    "create-a-new-card": "Create a new card",
     "create-a-new-contact": "Create a new contact",
     "create-a-new-distance-donation": "Create a new distance donation",
     "create-a-new-donor": "Create a new donor",
@@ -80,10 +92,16 @@
     "create-a-new-track": "Create a new Track",
     "create-a-new-user": "Create a new User",
     "create-a-new-user-group": "Create a new user group",
+    "create-and-generate-pdf": "Create and generate PDF",
+    "create-bulk-blanco-cards": "Create bulk blanco cards",
+    "create-bulk-cards": "Add blanco cards",
     "create-organization": "Create Organization",
     "create-team": "Create Team",
     "create-track": "Create Track",
     "create-user": "Create User",
+    "create-without-pdf": "Create without PDF",
+    "created-blanco-cards": "Created blanco cards",
+    "creating-blanco-cards": "Creating blanco cards",
     "credits": "Credits",
     "csv_import__class": "Class",
     "csv_import__firstname": "Firstname",
@@ -151,6 +169,7 @@
     "dont-panic-were-resetting-it": "Don't panic, we're resetting it ✌",
     "e-mail-adress": "E-Mail Adress",
     "edit": "Edit",
+    "edit-a-card": "Edit a card",
     "edit-permissions": "edit permissions",
     "email_address_or_username": "Email / username",
     "enabled": "enabled",
@@ -172,6 +191,7 @@
     "geerbte": "inherited",
     "general-stats": "General Stats",
     "general_promise_error": "😢 Error",
+    "generate-runnercards": "Generate Runnercards",
     "generate-sponsoring-contract": "generate sponsoring contract",
     "generate-sponsoring-contracts": "generate sponsoring contracts",
     "generating-pdf": "generating PDF...",
@@ -190,6 +210,7 @@
     "groups-are-being-loaded": "Groups are being loaded",
     "home": "Home",
     "icon-image-credits": "We also want to thank these projects for illustrations and icons:",
+    "if-you-want-to-create-multiple-blanco-cards-try-the-add-bulk-button": "If you want to create multiple blanco cards: Try the 'Add blanco cards' button.",
     "import-finished": "Import finished",
     "import-runners": "Import runners",
     "import__target-organization": "Target Organization",
@@ -200,6 +221,7 @@
     "internal-error": "Internal Error",
     "invalid": "Invalid",
     "invalid-mail-reset": "the provided email is invalid",
+    "just-enter-how-many-you-want-and-the-system-will-create-them": "Just enter how many you want and the system will create them",
     "laeufer-hinzufuegen": "Add runner",
     "laeufer-importieren": "Läufer importieren",
     "laptime": "Laptime",
@@ -208,6 +230,7 @@
     "lfk-is-os": "The \"Lauf für Kaya!\" Frontend is (like all other projects for the \"LfK!\" Also) an open source project.",
     "license": "License",
     "licenses-are-being-loaded": "Licenses are being loaded...",
+    "loading-cards": "Loading cards",
     "loading-contact-details": "Loading contact details...",
     "loading-donation-details": "Loading donation details",
     "loading-donor-details": "Loading donor details",
@@ -224,6 +247,10 @@
     "middle-name": "Middle name",
     "minimum-lap-time-in-s": "minimum lap time in s",
     "minimum-lap-time-must-be-a-positive-number-or-0": "minimum lap time must be a positive number or 0",
+    "must-be-at-least-10-characters-long": "Must be at least 10 characters long!",
+    "must-contain-a-lowercase-letter": "Must contain a lowercase letter!",
+    "must-contain-a-number": "Must contain a number!",
+    "must-contain-a-uppercase-letter": "Must contain a uppercase letter!",
     "name": "Name",
     "name-is-required": "Name is required",
     "new-password": "New password",
@@ -237,6 +264,7 @@
     "no-organizations-found": "No organizations found",
     "no-runners-found": "No runners found",
     "no-tracks-added-yet": "there are no tracks added yet.",
+    "non-blanko": "Non/Blanko",
     "organization": "Organization",
     "organization-added": "Organization added",
     "organization-deleted": "Organization deleted",
@@ -254,7 +282,7 @@
     "password-reset-in-progress": "Password Reset in Progress...",
     "password-reset-mail-sent": "Password reset mail was sent to \"{usersEmail}\".",
     "password-reset-successful": "Password Reset successful!",
-    "passwords-dont-match": "Passwords don't match",
+    "passwords-dont-match": "Passwords don't match!",
     "pdf-generation-failed": "PDF generation failed!",
     "pdf-successfully-generated": "PDF successfully generated!",
     "pdfs-successfully-generated": "PDFs successfully generated!",
@@ -316,6 +344,7 @@
     "search-for-runner-by-name-or-id": "Search for runner (by name or id)",
     "select-all": "select all",
     "select-language": "Select language",
+    "selfservice-registration": "Selfservice registration",
     "send-a-mail-to-lfk-odit-services": "send a mail to lfk@odit.services",
     "set-the-user-active-inactive": "set the user active/ inactive",
     "settings": "Settings",
@@ -334,6 +363,7 @@
     "the-provided-phone-number-is-invalid-less-than-br-greater-than-please-enter-a-valid-international-number": "the provided phone number is invalid.<br />please enter a valid international number...",
     "the-scans-distance-must-be-greater-than-0m": "The scan's distance must be greater than 0m",
     "the-scanstations-api-token-will-only-get-displayed-once-you-wont-be-able-to-change-or-view-it-again": "The scanstation api token will only get displayed once - you won't be able to change or view it again!",
+    "there-are-no-cards-yet": "There are no cards yet.",
     "there-are-no-contacts-added-yet": "There are no contacts added yet.",
     "there-are-no-donations-yet": "There are no donations yet",
     "there-are-no-donors-yet": "There are no donors yet",
@@ -343,6 +373,7 @@
     "there-are-no-scans-yet": "There are no scans yet",
     "there-are-no-teams-added-yet": "There are no teams added yet.",
     "there-are-no-users-added-yet": "There are no users added yet.",
+    "this-card-is": "This card is",
     "this-might-take-a-moment": "This might take a moment 👀",
     "this-scanstation-is": "This scanstation is",
     "token": "Token",
@@ -359,12 +390,14 @@
     "track-name": "Track name",
     "track-name-must-not-be-empty": "Track name must not be empty",
     "tracks": "Tracks",
+    "update-card": "Update Card",
     "update-password": "Update password",
     "updated-contact": "Updated contact!",
     "updated-donor": "updated donor",
     "updated-organization": "updated organization",
     "updated-scan": "updated scan",
     "updateing-group": "updateing group...",
+    "updating-card": "Updating card",
     "updating-organization": "updating organization",
     "updating-permissions": "updating permissions...",
     "updating-runner": "Updating runner...",
@@ -386,7 +419,10 @@
     "yes-i-copied-the-token": "Yes, I copied the token",
     "you-are-going-to-loose-all-permissions-and-access-to-the-runner-system": "You are going to loose all permissions and access to the runner system!",
     "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! 🎉",
+    "you-can-provide-a-runner-but-you-dont-have-to": "You can provide a runner, but you don't have to.",
     "you-dont-have-any-scanstations-yet": "You don't have any scanstations yet",
     "you-have-to-provide-an-organization": "You have to provide an organization",
+    "you-have-to-save-your-changes-to-generate-a-link": "You have to save your changes to generate a link.",
+    "you-must-create-at-least-one-card-or-cancel": "You must create at least one card (or cancel).",
     "zip-postal-code": "ZIP/ postal code"
 }