src/components/orgs/OrgDetail.svelte

@@ -12,6 +12,7 @@
   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) ||
@@ -20,6 +21,9 @@
   let original = "";
   let original_object = {};
   let contacts = [];
+  let valueCopy = null;
+  let areaDom;
+  let copied = false;
   export let params;
   $: editable = {};
   $: contact = {};
@@ -31,6 +35,7 @@
   $: 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(
@@ -110,9 +115,37 @@
     } else {
     }
   }
+  async function copy() {
+    valueCopy = registrationLink;
+    await tick();
+    areaDom.focus();
+    areaDom.select();
+    try {
+      const successful = document.execCommand("copy");
+      if (!successful) {
+        throw new Error();
+      }
+      Toastify({
+        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"),
+        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;
@@ -132,9 +165,7 @@
         <GenerateSponsoringContracts
           bind:sponsoring_contracts_show
           bind:generate_orgs />
-        <GenerateRunnerCards
+        <GenerateRunnerCards bind:cards_show bind:generate_orgs />
-          bind:cards_show
-          bind:generate_orgs />
         {#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:IMPORT')}
           <button
             on:click={() => {
@@ -277,6 +308,7 @@
         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-center h-5">
           <input
@@ -292,7 +324,35 @@
             class="font-medium text-gray-700">{$_('selfservice-registration')}</label>
         </div>
       </div>
+      <div>
+        {#if editable.registrationEnabled}
+          <div class="text-sm w-full">
+            <div on:click={copy} class="inline-flex w-full">
+              <p
+                name="token"
+                class:bg-green-200={copied}
+                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">
+                {editable.registrationKey || 'Please save your changes'}
+              </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>
+            <p class="text-gray-500 text-xs">
+              {$_('click-to-copy-token-to-clipboard')}
+            </p>
+          </div>
+        {/if}
         <!--  -->
+        <div>
           <div class="flex items-start mt-2">
             <div class="flex items-center h-5">
               <input
@@ -308,6 +368,7 @@
                 class="font-medium text-gray-700">{$_('address')}</label>
             </div>
           </div>
+        </div>
         {#if editable.address_checked === true}
           <div class="col-span-6">
             <label
@@ -385,6 +446,8 @@
             {/if}
           </div>
         {/if}
+      </div>
+    </div>
   </section>
 {:else}
   {#await promise}

src/components/scanstations/CopyScanStationTokenModal.svelte

@@ -23,7 +23,7 @@
         throw new Error();
       }
       Toastify({
-        text: $_('copied-token-to-clipboard'),
+        text: $_('copied-link-to-clipboard'),
         duration: 500,
         backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
       }).showToast();
@@ -106,7 +106,7 @@
                         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-the-link-into-your-clipboard')}</p>
               </div>
             </div>
           </div>

src/locales/de.json

@@ -414,5 +414,7 @@
   "you-have-to-provide-an-organization": "Du musst eine Organisation angeben",
   "you-must-create-at-least-one-card-or-cancel": "Du musst mindestens eine Blankokarte erstellen (oder abbrechen).",
   "zip-postal-code": "Postleitzahl",
-  "selfservice-registration": "Selfservice Registrierung"
+  "selfservice-registration": "Selfservice Registrierung",
+  "copied-link-to-clipboard": "Link wurde in die Zwischenablage kopiert",
+  "click-to-copy-the-link-into-your-clipboard": "Klicke auf den Link, um ihn in deine Zwischenablage zu kopieren"
 }

src/locales/en.json

@@ -415,5 +415,7 @@
   "you-have-to-provide-an-organization": "You have to provide an organization",
   "you-must-create-at-least-one-card-or-cancel": "You must create at least one card (or cancel).",
   "zip-postal-code": "ZIP/ postal code",
-  "selfservice-registration": "Selfservice registration"
+  "selfservice-registration": "Selfservice registration",
+  "copied-link-to-clipboard": "Copied link to clipboard",
+  "click-to-copy-the-link-into-your-clipboard": "Click to copy the link into your clipboard"
 }