Added station token copy modal

ref #93

src/components/scanstations/AddScanStationModal.svelte

@@ -5,7 +5,9 @@
   import { ScanStationService, TrackService } from "@odit/lfk-client-js";
   import Toastify from "toastify-js";
   export let modal_open;
+  export let new_station;
   export let current_stations;
+  export let copy_modal_open;
   let tracks = [];
   TrackService.trackControllerGetAll().then((val) => {
     tracks = val;
@@ -59,6 +61,8 @@
           }).showToast();
           current_stations.push(result);
           current_stations = current_stations;
+          new_station=result;
+          copy_modal_open=true;
         })
         .catch((err) => {
           //

src/components/scanstations/CopyScanStationTokenModal.svelte

@@ -0,0 +1,127 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import { clickOutside } from "../base/outsideclick";
+  import { focusTrap } from "svelte-focus-trap";
+  import { ScanStationService } from "@odit/lfk-client-js";
+  import Toastify from "toastify-js";
+  import { tick, createEventDispatcher } from "svelte";
+  export let copy_modal_open;
+  export let new_station;
+  const dispatch = createEventDispatcher();
+  let valueCopy = null;
+  let areaDom;
+  let copied = false;
+  function close() {
+    copy_modal_open = false;
+  }
+  async function copy() {
+    valueCopy = new_station.key;
+    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;
+  }
+</script>
+
+{#if copy_modal_open}
+  {#if valueCopy != null}
+    <textarea bind:this={areaDom}>{valueCopy}</textarea>
+  {/if}
+  <div class="fixed z-10 inset-0 overflow-y-auto" use:focusTrap>
+    <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 overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="modal-headline">
+        <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"><path fill="none" d="M0 0h24v24H0z" />
+                <path
+                  d="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z" /></svg>
+            </div>
+            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+              <h3 class="text-lg leading-6 font-medium text-gray-900">Token</h3>
+              <div class="mt-2 mb-6">
+                <p class="text-sm text-gray-500">
+                  The scanstation's api token will only get displayed once - you
+                  won't be able to change or view it again!
+                  <br />
+                  Please copy the token and store it somewhere save!
+                </p>
+              </div>
+              <div class="mt-2 mb-6">
+                <label
+                  for="token"
+                  class="block text-sm font-medium text-gray-700">Token</label>
+                <div on:click={copy} class="inline-flex">
+                  <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">
+                    {new_station.key}
+                  </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">
+                    <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>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+          <button
+            on:click={close}
+            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-green-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">
+            Yes, i copied the token.
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}

src/components/scanstations/ScanStations.svelte

@@ -2,8 +2,11 @@
   import { _ } from "svelte-i18n";
   import store from "../../store";
   import AddScanStationModal from "./AddScanStationModal.svelte";
+import CopyScanStationTokenModal from "./CopyScanStationTokenModal.svelte";
   import ScanStationsOverview from "./ScanStationsOverview.svelte";
   export let modal_open = false;
+  export let copy_modal_open = false;
+  export let new_station = {};
   let current_stations = [];
 </script>
 
@@ -21,9 +24,10 @@
       </button>
     {/if}
   </span>
-  <ScanStationsOverview bind:current_stations />
+  <ScanStationsOverview bind:current_stations bind:modal_open bind:new_station bind:copy_modal_open />
 </section>
 
 {#if store.state.jwtinfo.userdetails.permissions.includes('STATION:CREATE')}
-  <AddScanStationModal bind:current_stations bind:modal_open />
+<AddScanStationModal bind:modal_open bind:current_stations bind:new_station bind:copy_modal_open/>
+<CopyScanStationTokenModal bind:copy_modal_open bind:new_station />
 {/if}

src/components/scanstations/ScanStationsEmptyState.svelte

@@ -1,8 +1,11 @@
 <script>
   import { _ } from "svelte-i18n";
 import AddScanStationModal from "./AddScanStationModal.svelte";
+import CopyScanStationTokenModal from "./CopyScanStationTokenModal.svelte";
   import scanstations_empty from "./scanstations_empty.svg";
   let modal_open = false;
+  let copy_modal_open = false;
+  let new_station = {};
   let current_stations = [];
 </script>
 
@@ -14,4 +17,5 @@ import AddScanStationModal from "./AddScanStationModal.svelte";
   </p>
 </div>
 
-<AddScanStationModal bind:modal_open bind:current_stations />
+<AddScanStationModal bind:modal_open bind:current_stations bind:new_station bind:copy_modal_open/>
+<CopyScanStationTokenModal bind:copy_modal_open bind:new_station />