🚀RELEASE v0.9.1

Reviewed-on: #114

CHANGELOG.md

@@ -2,8 +2,78 @@
 
 All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 
+#### [0.9.1](https://git.odit.services/lfk/frontend/compare/0.9.0...0.9.1)
+
+- 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)
 
+> 25 March 2021
+
+- 🚀RELEASE v0.8.6 [`c3c95bf`](https://git.odit.services/lfk/frontend/commit/c3c95bf2916618efe6764a33d9a42d35764d15be)
 - Merge pull request 'Know Production Bugs 🐞' (#109) from bugfix/107-prod_issues into dev [`d2050b5`](https://git.odit.services/lfk/frontend/commit/d2050b5948890a6077cbb41d82d1a6a1d1106652)
 - Errors now toast errors❌ [`17e0805`](https://git.odit.services/lfk/frontend/commit/17e0805fe64f6d181f55b81afa502ee6443ebabe)
 - Sorted translations 👀 [`82b1811`](https://git.odit.services/lfk/frontend/commit/82b1811971b974b686e7618b8a381e1589c168f6)

index.template.html

@@ -14,7 +14,7 @@
 </head>
 
 <body>
-  <span style="display: none;visibility: hidden;" id="buildinfo">RELEASE_INFO-0.8.6-RELEASE_INFO</span>
+  <span style="display: none;visibility: hidden;" id="buildinfo">RELEASE_INFO-0.9.1-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.6",
+	"version": "0.9.1",
 	"scripts": {
 		"i18n-order": "node order.js",
 		"dev:all": "yarn prebuild && snowpack dev",

src/components/cards/AddCardBulkModal.svelte

@@ -92,7 +92,7 @@
                 height="24"><path fill="none" d="M0 0h24v24H0z" />
                 <path
                   fill="currentColor"
-                  d="M2 4h2v16H2V4zm4 0h1v16H6V4zm2 0h2v16H8V4zm3 0h2v16h-2V4zm3 0h2v16h-2V4zm3 0h1v16h-1V4zm2 0h3v16h-3V4z" /></svg>
+                  d="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">

src/components/cards/AddCardModal.svelte

@@ -115,7 +115,7 @@
                 height="24"><path fill="none" d="M0 0h24v24H0z" />
                 <path
                   fill="currentColor"
-                  d="M2 4h2v16H2V4zm4 0h1v16H6V4zm2 0h2v16H8V4zm3 0h2v16h-2V4zm3 0h2v16h-2V4zm3 0h1v16h-1V4zm2 0h3v16h-3V4z" /></svg>
+                  d="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">

src/components/cards/CardDetailModal.svelte

@@ -63,14 +63,7 @@
             duration: 500,
             backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
           }).showToast();
-          console.log(
+          current_cards[current_cards.findIndex((c) => c.id === id)] = result;
-            JSON.stringify(
-              current_cards
-            )
-          );
-          current_cards[
-            current_cards.findIndex((c) => c.id === id)
-          ] = result;
           current_cards = current_cards;
         })
         .catch((err) => {
@@ -121,7 +114,7 @@
                 height="24"><path fill="none" d="M0 0h24v24H0z" />
                 <path
                   fill="currentColor"
-                  d="M2 4h2v16H2V4zm4 0h1v16H6V4zm2 0h2v16H8V4zm3 0h2v16h-2V4zm3 0h2v16h-2V4zm3 0h1v16h-1V4zm2 0h3v16h-3V4z" /></svg>
+                  d="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">

src/components/cards/CardsOverview.svelte

@@ -5,13 +5,18 @@
   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 = [];
-  export let current_cards = [];
+  $: 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;
@@ -70,11 +75,32 @@
         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">
@@ -115,6 +141,12 @@
                     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>
@@ -133,7 +165,7 @@
                     <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_large')}</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>

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

@@ -11,6 +11,8 @@
   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) ||
@@ -19,6 +21,9 @@
   let original = "";
   let original_object = {};
   let contacts = [];
+  let valueCopy = null;
+  let areaDom;
+  let copied = false;
   export let params;
   $: editable = {};
   $: contact = {};
@@ -28,7 +33,9 @@
   $: iszipcodevalid = editable.address?.postalcode?.trim().length !== 0;
   $: iscityvalid = editable.address?.city?.trim().length !== 0;
   $: 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(
@@ -96,6 +103,7 @@
         postdata
       )
         .then((resp) => {
+          editable.registrationKey = resp.registrationKey;
           original_object = Object.assign({}, editable);
           original = JSON.stringify(original_object);
           Toastify({
@@ -108,9 +116,46 @@
     } else {
     }
   }
+  async function copy() {
+    if(!editable.registrationKey){
+      Toastify({
+        text: $_('you-have-to-save-your-changes-to-generate-a-link'),
+        duration: 500,
+        backgroundColor:
+          "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
+      }).showToast();
+      return;
+    }
+    valueCopy = registrationLink;
+    await tick();
+    areaDom.focus();
+    areaDom.select();
+    try {
+      const successful = document.execCommand("copy");
+      if (!successful) {
+        throw new Error();
+      }
+      Toastify({
+        text: $_("copied-link-to-clipboard"),
+        duration: 500,
+        backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+      }).showToast();
+      copied = true;
+    } catch (err) {
+      Toastify({
+        text: $_("error-whyile-copying-to-clipboard"),
+        duration: 500,
+        backgroundColor:
+          "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
+      }).showToast();
+    }
+    // we can notifi by event or storage about copy status
+    valueCopy = null;
+  }
   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;
@@ -130,6 +175,7 @@
         <GenerateSponsoringContracts
           bind:sponsoring_contracts_show
           bind:generate_orgs />
+        <GenerateRunnerCards bind:cards_show bind:generate_orgs />
         {#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:IMPORT')}
           <button
             on:click={() => {
@@ -272,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

@@ -8,9 +8,11 @@
   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_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 = [];
 
@@ -50,6 +52,9 @@
         <GenerateSponsoringContracts
             bind:sponsoring_contracts_show
             bind:generate_orgs />
+        <GenerateRunnerCards
+            bind:cards_show
+            bind:generate_orgs />
       </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

@@ -89,7 +89,6 @@
             text: $_("generating-pdf"),
             duration: -1,
         }).showToast();
-        let count = 0;
         for await (const o of generate_orgs) {
             const runners = await RunnerOrganizationService.runnerOrganizationControllerGetRunners(
                 o.id

src/components/runners/RunnerDetail.svelte

@@ -1,6 +1,7 @@
 <script>
   import { getLocaleFromNavigator, _ } from "svelte-i18n";
-  import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelteContracts.svelte";
+  import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
+  import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
   import store from "../../store";
   import {
     RunnerService,
@@ -15,7 +16,6 @@
   export let params;
   const runner_promise = RunnerService.runnerControllerGetOne(params.runnerid);
   $: delete_triggered = false;
-  $: sponsoring_contracts_download_open = false;
   $: original_data_pdf = {};
   $: original_data = {};
   $: editable = {};
@@ -35,6 +35,7 @@
     isEmailValid &&
     editable.group != null;
   $: sponsoring_contracts_show = true;
+  $: cards_show = true;
   $: generate_runners = [original_data_pdf];
   runner_promise.then((data) => {
     data_loaded = true;
@@ -156,6 +157,9 @@
           <GenerateSponsoringContracts
             bind:sponsoring_contracts_show
             bind:generate_runners />
+          <GenerateRunnerCards
+            bind:sponsoring_contracts_show
+            bind:generate_runners />
           {#if !delete_triggered}
             <button
               on:click={() => {

src/components/runners/RunnersOverview.svelte

@@ -9,6 +9,7 @@
   import RunnersEmptyState from "./RunnersEmptyState.svelte";
   import Select from "svelte-select";
   import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
+  import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
   $: searchvalue = "";
   $: active_deletes = [];
   export let current_runners = [];
@@ -23,6 +24,9 @@
   $: 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 = [];
@@ -85,6 +89,9 @@
         <GenerateSponsoringContracts
           bind:sponsoring_contracts_show
           bind:generate_runners />
+        <GenerateRunnerCards
+          bind:cards_show
+          bind:generate_runners />
       </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/teams/TeamDetail.svelte

@@ -12,7 +12,8 @@
   import PromiseError from "../base/PromiseError.svelte";
   import ConfirmTeamDeletion from "./ConfirmTeamDeletion.svelte";
   import Teams from "./Teams.svelte";
-  import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte.svelte";
+  import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
+  import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
   let [teamdata, original, delete_team, orgs, contacts, modal_open] = [
     {},
     {},
@@ -28,6 +29,7 @@
   $: data_loaded = false;
   $: data_changed = JSON.stringify(teamdata) === JSON.stringify(original);
   $: sponsoring_contracts_show = true;
+  $: cards_show = true;
   $: generate_teams = [original];
   $: group = {};
   $: contact = {};
@@ -117,6 +119,9 @@
         <GenerateSponsoringContracts
           bind:sponsoring_contracts_show
           bind:generate_teams />
+        <GenerateRunnerCards
+          bind:cards_show
+          bind:generate_teams />
         {#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:IMPORT')}
           <button
             on:click={() => {

src/components/teams/Teams.svelte

@@ -10,7 +10,7 @@
 <section class="container p-5">
   <span class="mb-1 text-3xl font-extrabold leading-tight">
     {$_('teams')}
-    {#if store.state.jwtinfo.userdetails.permissions.includes('USER:CREATE')}
+    {#if store.state.jwtinfo.userdetails.permissions.includes('TEAM:CREATE')}
       <button
         on:click={() => {
           modal_open = true;
@@ -27,6 +27,6 @@
   <TeamsOverview bind:current_teams />
 </section>
 
-{#if store.state.jwtinfo.userdetails.permissions.includes('USER:CREATE')}
+{#if store.state.jwtinfo.userdetails.permissions.includes('TEAM:CREATE')}
   <AddTeamModal bind:current_teams bind:modal_open />
 {/if}

src/components/teams/TeamsOverview.svelte

@@ -7,12 +7,16 @@
   import TeamsEmptyState from "./TeamsEmptyState.svelte";
   import ConfirmTeamDeletion from "./ConfirmTeamDeletion.svelte";
   import { clickOutside } from "../base/outsideclick";
-  import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte.svelte";
+  import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
+  import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
   $: searchvalue = "";
   $: active_deletes = [];
   $: 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;
@@ -54,6 +58,9 @@
         <GenerateSponsoringContracts
           bind:sponsoring_contracts_show
           bind:generate_teams />
+        <GenerateRunnerCards
+          bind:cards_show
+          bind:generate_teams />
       </div>
       <div
         class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">

src/locales/de.json

@@ -53,6 +53,7 @@
     "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",
@@ -72,6 +73,7 @@
     "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)",
@@ -187,6 +189,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...",
@@ -216,7 +219,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": "Geb einfach ein, wie viele Blankokarten das System erstellen soll.",
+    "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",
@@ -335,6 +338,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",
@@ -411,6 +415,7 @@
     "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

@@ -53,6 +53,7 @@
     "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",
@@ -72,6 +73,7 @@
     "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",
@@ -187,6 +189,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...",
@@ -335,6 +338,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",
@@ -412,6 +416,7 @@
     "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"
 }