.gitignore

@@ -7,5 +7,4 @@ public/env.js
 public/sw.js
 public/index.html
 public/workbox-*.js
-svelte.config.js
+svelte.config.js
-public/index.html

.vscode/extensions.json

@@ -4,10 +4,8 @@
         "christian-kohler.npm-intellisense",
         "remimarsal.prettier-now",
         "svelte.svelte-vscode",
-        "lokalise.i18n-ally",
+        "antfu.i18n-ally",
         "fivethree.vscode-svelte-snippets"
     ],
-    "unwantedRecommendations": [
+    "unwantedRecommendations": []
-        "antfu.i18n-ally"
-    ]
 }

CHANGELOG.md

@@ -2,82 +2,12 @@
 
 All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 
-#### [0.5.0](https://git.odit.services/lfk/frontend/compare/0.4.0...0.5.0)
-
-- Merge pull request 'feature/12-user-management' (#39) from feature/12-user-management into dev [`#12`](https://git.odit.services/lfk/frontend/issues/12)
-- Merge pull request 'feature/13-runner-management' (#42) from feature/13-runner-management into dev [`#13`](https://git.odit.services/lfk/frontend/issues/13)
-- Merge pull request 'added permissions to dashboard sidebar' (#41) from feature/40-dynamic-sidebar-options into dev [`#41`](https://git.odit.services/lfk/frontend/issues/41)
-- basic UserPermissions view [`9c6dc5b`](https://git.odit.services/lfk/frontend/commit/9c6dc5b4247e76be63a92294556be1e4a9154256)
-- ✨ basic RunnerDetail [`03aa670`](https://git.odit.services/lfk/frontend/commit/03aa67034d5fc4ec64d5646a6583666301bb538e)
-- 👀 ImportRunnerModal - layout cleanup [`2cc9b3e`](https://git.odit.services/lfk/frontend/commit/2cc9b3e1ede47bb1a4b598afc260d0bc06ed0902)
-- ✨ basic ImportRunnerModal with CSV input [`b1e9f95`](https://git.odit.services/lfk/frontend/commit/b1e9f955b054cd17cb83f8364b6bc2b22159142f)
-- ✨ basic xlsx + csv parsing [`74d9b94`](https://git.odit.services/lfk/frontend/commit/74d9b94119b49a77ff3e787a84f76c1e2e13d9e4)
-- 🧹 darkmode classes cleanup [`259a76f`](https://git.odit.services/lfk/frontend/commit/259a76f46b9ac01b177100dfce0db367b517b3a0)
-- UserDetail - basic permission badges [`7d4e939`](https://git.odit.services/lfk/frontend/commit/7d4e93912c4e1fd8a875f42a0f11b906f1ca0091)
-- added permissions to dashboard sidebar [`acb86ae`](https://git.odit.services/lfk/frontend/commit/acb86ae2666ec3c336973184ec5cb1e2ffba9ebe)
-- UserPermissions - working edit [`10d7955`](https://git.odit.services/lfk/frontend/commit/10d7955f99b1a640eb1ac83764c114a25cfcc07b)
-- 🐞 ImportRunnerModal - table overflow fix [`dc1644e`](https://git.odit.services/lfk/frontend/commit/dc1644ed25b82afe6a51fbe0e1de69ddf54ef81d)
-- 🧹 general runner cleanup [`9240e0c`](https://git.odit.services/lfk/frontend/commit/9240e0c90380fc6b44a3dde480bd2d29476b2a0f)
-- ✨ formatting [`6e5a4bc`](https://git.odit.services/lfk/frontend/commit/6e5a4bcb39259fc376262c16ad95555fd9cf7a0b)
-- ✨ ImportRunnerModal usage in TeamDetail [`de0bd5f`](https://git.odit.services/lfk/frontend/commit/de0bd5fd57edba75faaa2ba097a2c7fb2f621f9a)
-- 💣 process breaking changes for lib v0.3.0 [`dadb806`](https://git.odit.services/lfk/frontend/commit/dadb80608a55980f7b647d41c91061055287a250)
-- 👀 basic ui interaction for ImportRunnerModal [`c382f77`](https://git.odit.services/lfk/frontend/commit/c382f770dc05f57a471389d3d4d012fd8439c014)
-- 🐞 [bugfix] RunnerDetail update [`ec4bcd0`](https://git.odit.services/lfk/frontend/commit/ec4bcd093b6c94f2e3597de6de98db5ca47c5876)
-- 🏃‍♂️ support for runner group edit [`8d92a75`](https://git.odit.services/lfk/frontend/commit/8d92a75ef03854397a7c01ed9ea22967b994f9f2)
-- AddRunnerModal - improved team select [`1694c71`](https://git.odit.services/lfk/frontend/commit/1694c71528f9114622daae1bd16aaed9f94fc4ee)
-- 🙋‍♂️🔒 UserDetail - permission layout ui [`65b36f8`](https://git.odit.services/lfk/frontend/commit/65b36f8e695479809566213ebcb64d51a7c6a52e)
-- 🌎 added locale based csv/xlsx header parsing [`b606037`](https://git.odit.services/lfk/frontend/commit/b606037890856c1115315bb61d8469ff66dc4289)
-- AddUserModal - username/email validation [`ff14f02`](https://git.odit.services/lfk/frontend/commit/ff14f024afda77e6f5f9e95a8f34e50cc8509790)
-- UserDetail - link to permission page [`aaab95d`](https://git.odit.services/lfk/frontend/commit/aaab95d41400629683d89ee16013b6b4328c582c)
-- UserDetail - add permission layout [`d65b463`](https://git.odit.services/lfk/frontend/commit/d65b463547a5cb4fb6f6de0f95795a66ebe92e31)
-- RunnerDetail - button text fixes [`5552055`](https://git.odit.services/lfk/frontend/commit/5552055b989313e8999e424b6ad26c4398e8c6fa)
-- 🧹 RunnerDetail cleanup + i18n 🌎 [`a871651`](https://git.odit.services/lfk/frontend/commit/a87165148a3ccdb4c4e10f2c6545d5fea9e78b30)
-- ↙ added default fallback parsing to ImportRunnerModal [`ecad1ea`](https://git.odit.services/lfk/frontend/commit/ecad1ea839dbcea396217cb18fe335694406cdb1)
-- 🌎 i18n [`366804a`](https://git.odit.services/lfk/frontend/commit/366804aa29eb0231e40017d1e5c3419486070174)
-- ✨ ImportRunnerModal - compatibility for multi-component access [`f8a5913`](https://git.odit.services/lfk/frontend/commit/f8a59133a2534efdc9e13104eb64157a9724e746)
-- ✨ use ImportRunnerModal in OrgDetail + Orgs [`8aa1d94`](https://git.odit.services/lfk/frontend/commit/8aa1d94a1aa976cc6cb4f7d3cc798822861676ad)
-- ✨ ImportRunnerModal - hide team when loading from TeamDetail [`819b02a`](https://git.odit.services/lfk/frontend/commit/819b02a204cd43baaaf85d82cf0209a38028e6ce)
-- 🚀 ImportRunnerModal - working demo [`6b91b22`](https://git.odit.services/lfk/frontend/commit/6b91b227136580180d5300b2614a6148995c4640)
-- 🌎 i18n [`ae8bc01`](https://git.odit.services/lfk/frontend/commit/ae8bc01d9bab994aad6407102f3a6ef0167d008b)
-- 🐞 fixed merge conflict errors [`cbc1d53`](https://git.odit.services/lfk/frontend/commit/cbc1d53cc257cbf60172dd4356831e43671ec626)
-- ✨ basic cancel event dispatch from ImportRunnerModal [`cde4ec1`](https://git.odit.services/lfk/frontend/commit/cde4ec13efef8423464ebe90a4f0212a3be6cf77)
-- 🧹 AddUserModal cleanup [`44f07ca`](https://git.odit.services/lfk/frontend/commit/44f07ca231307ebdbe38b822408c3965077053ef)
-- 🙋‍♂️ UserDetail - active/inactive user state edit [`86c54e0`](https://git.odit.services/lfk/frontend/commit/86c54e04a84917383d3726b324c416ca1bd74627)
-- UserDetail - update permission badges on change save [`358865d`](https://git.odit.services/lfk/frontend/commit/358865dc6a8e5a084078696048df99a67564a9e1)
-- i18n 🌍 [`415f340`](https://git.odit.services/lfk/frontend/commit/415f340a68078e86fcf28d24b069ca030e28fc82)
-- 👀 UsersOverview - disable advanced search [`b34e3ae`](https://git.odit.services/lfk/frontend/commit/b34e3aeed0f026308288fb568542cc0ba587b576)
-- 🙋‍♂️ UserDetail - disable profile picture edit [`ef9fc59`](https://git.odit.services/lfk/frontend/commit/ef9fc596f57d63c1bf9c26614d746bf37394f832)
-- 🌎 i18n [`2d48691`](https://git.odit.services/lfk/frontend/commit/2d4869128d2af5e7fa5e4bcf1d6b687fca6761e9)
-- 🌎 i18n in ImportRunnerModal headers [`e34c91b`](https://git.odit.services/lfk/frontend/commit/e34c91b2cc64221cd553e80974a14448e3afc340)
-- 🌎 last i18n keys [`6c2d13b`](https://git.odit.services/lfk/frontend/commit/6c2d13bd1721918f1ef847563cfad61284c40487)
-- Fixed User group update [`1a799dc`](https://git.odit.services/lfk/frontend/commit/1a799dc30a4f051305e5279bb3325e64ab08f323)
-- 🌎 UserDetail - more i18n keys [`e750c37`](https://git.odit.services/lfk/frontend/commit/e750c374739104c6aaac1abace9e9632b40342da)
-- ⏫ general dependency bump [`b30b673`](https://git.odit.services/lfk/frontend/commit/b30b6734a1f4cc384f06147dfc657f2a1a05b3c0)
-- 💻 updated VSCode recommended extensions [`fc21427`](https://git.odit.services/lfk/frontend/commit/fc214276859189c6e9b6fdc91eb440cf4afda7c0)
-- 🐞 improved version builder from template [`09fd73b`](https://git.odit.services/lfk/frontend/commit/09fd73b13086025a31b4c1363331230e1c91e593)
-- ⏫ general dependency bump [`9a1f7a1`](https://git.odit.services/lfk/frontend/commit/9a1f7a13f8669b690fb3f9533df7fdfa2f1bc093)
-- 🌎 added more i18n keys [`169ffc1`](https://git.odit.services/lfk/frontend/commit/169ffc1b0b76c74350060c97218643789e0ea4f7)
-- 😦 added missing dependencies [`822759a`](https://git.odit.services/lfk/frontend/commit/822759a6884eab81f62d96bd7e6f038fa8bc1926)
-- fixed runner permissions [`e0356fa`](https://git.odit.services/lfk/frontend/commit/e0356fa360b74f91b38dc09351930c8c0778f845)
-- Added friles to ignore [`9fbc1ba`](https://git.odit.services/lfk/frontend/commit/9fbc1ba0315fc0a2b7f3d95339cb17fc74e57903)
-- ✨ new UsersEmptyState [`959b32d`](https://git.odit.services/lfk/frontend/commit/959b32de1c6fc74bec585630b3025babc1a8edc4)
-- 🐞 fix package release for index template compatibility [`24bec66`](https://git.odit.services/lfk/frontend/commit/24bec66390bfddd57c0cd1d35de94a79bdbf477c)
-- new license file version [CI SKIP] [`3d30734`](https://git.odit.services/lfk/frontend/commit/3d30734dc2716a88d823fe7a7650f17d14a8f18d)
-- new license file version [CI SKIP] [`3281239`](https://git.odit.services/lfk/frontend/commit/3281239ff5b4968fb1dc8547e7c16f0789ec2b8c)
-- 🐞 alphabetically sort permission targets in UserDetail [`ffd88ff`](https://git.odit.services/lfk/frontend/commit/ffd88ffc666d9d3add43dfa4ec4b6e01ca7084b5)
-- new license file version [CI SKIP] [`e91e197`](https://git.odit.services/lfk/frontend/commit/e91e197873e524b93b2cf79286c66c8b776fbae2)
-- Deleted files to ignore [`6704c07`](https://git.odit.services/lfk/frontend/commit/6704c07db0a00b17327a4b693b3f74ed41a1a41d)
-- new license file version [CI SKIP] [`c6504c2`](https://git.odit.services/lfk/frontend/commit/c6504c2eaf1d0c5fb14a4035ccbf347d851068d9)
-
 #### [0.4.0](https://git.odit.services/lfk/frontend/compare/0.3.1...0.4.0)
 
-> 17 January 2021
-
 - Merge commit 'a284806d3cb769030a4e28d0403190b746f8fc61' into dev [`#37`](https://git.odit.services/lfk/frontend/issues/37)
 - ✨ AddRunnerModal [`66ffd8e`](https://git.odit.services/lfk/frontend/commit/66ffd8e936010960766e7f9021319d549e1d3e6b)
 - ✨ RunnersOverview [`66a07c6`](https://git.odit.services/lfk/frontend/commit/66a07c6a51674a92d5e8459f250de2ab5ff6d902)
 - ⚡ improved dev scripts for speed starts [`383f828`](https://git.odit.services/lfk/frontend/commit/383f82807f4090bdd2c3dcdc695b75093b854031)
-- 🚀RELEASE v0.4.0 [`7d104a1`](https://git.odit.services/lfk/frontend/commit/7d104a151422a7c8306ef4d9f0ab25d26f8eb78b)
 - ✨ dynamic contact info in AddRunnerModal [`d4579a9`](https://git.odit.services/lfk/frontend/commit/d4579a9a410a27676e0ed0285bd124696153aae4)
 - 🐞 fix cross-env logic for faster dev starts ⚡ [`2ce4199`](https://git.odit.services/lfk/frontend/commit/2ce41990bf9911db11eb556ce4c9aa3b3e5ca16c)
 - 👩‍💻 developer configs/ recommendations for VSCode [`5e02502`](https://git.odit.services/lfk/frontend/commit/5e02502a5c2b8ebf798cbc21856b4425f8510041)

index.template.html

@@ -14,7 +14,7 @@
 </head>
 
 <body>
-  <span style="display: none;visibility: hidden;" id="buildinfo">RELEASE_INFO-0.5.0-RELEASE_INFO</span>
+  <span style="display: none;visibility: hidden;" id="buildinfo">RELEASE_INFO-0.3.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.5.0",
+	"version": "0.4.0",
 	"scripts": {
 		"i18n-order": "node order.js",
 		"dev:all": "yarn prebuild && snowpack dev",
@@ -12,8 +12,7 @@
 		"licenses:export": "license-exporter --json -o public"
 	},
 	"dependencies": {
-		"@odit/lfk-client-js": "0.3.0",
+		"@odit/lfk-client-js": "0.1.1",
-		"csvtojson": "^2.0.10",
 		"filepond": "4.25.1",
 		"gridjs": "3.2.2",
 		"localforage": "1.9.0",
@@ -22,23 +21,22 @@
 		"svelte-focus-trap": "1.0.1",
 		"svelte-i18n": "3.3.0",
 		"tailwindcss": "2.0.2",
-		"tinro": "0.5.9",
+		"tinro": "0.5.7",
 		"toastify-js": "1.9.3",
-		"validator": "13.5.2",
+		"validator": "13.5.2"
-		"xlsx": "^0.16.9"
 	},
 	"devDependencies": {
 		"@odit/license-exporter": "0.0.9",
 		"@snowpack/plugin-svelte": "3.5.2",
 		"auto-changelog": "^2.2.1",
-		"autoprefixer": "10.2.3",
+		"autoprefixer": "10.2.1",
 		"cross-env": "^7.0.3",
 		"postcss": "8.2.4",
 		"postcss-load-config": "3.0.0",
 		"release-it": "^14.2.2",
 		"snowpack": "3.0.11",
-		"svelte": "3.32.0",
+		"svelte": "3.31.2",
-		"svelte-preprocess": "4.6.3",
+		"svelte-preprocess": "4.6.1",
 		"workbox-cli": "6.0.2"
 	},
 	"release-it": {
@@ -55,7 +53,7 @@
 			"publish": false
 		},
 		"hooks": {
-			"after:bump": "npx auto-changelog --commit-limit false -p -u --hide-credit && git add CHANGELOG.md && node versionbuilder.js  && git add index.template.html && node order.js  && git add src/locales"
+			"after:bump": "npx auto-changelog --commit-limit false -p -u --hide-credit && git add CHANGELOG.md && node versionbuilder.js  && git add public/index.html && node order.js  && git add src/locales"
 		}
 	}
 }

public/index.html

@@ -0,0 +1 @@
+<!-- this is configured with dev scripts -->

src/App.svelte

@@ -48,8 +48,6 @@
   OpenAPI.BASE = config.baseurl;
   import { register as registerSW } from "./swmodule";
   import TeamDetail from "./components/TeamDetail.svelte";
-  import UserPermissions from "./components/UserPermissions.svelte";
-  import RunnerDetail from "./components/RunnerDetail.svelte";
   store.init();
   registerSW();
 </script>
@@ -73,13 +71,8 @@
           <Route path="/">
             <Users />
           </Route>
-          <Route path="/:userid/*" let:params>
+          <Route path="/:userid" let:params>
-            <Route path="/">
+            <UserDetail {params} />
-              <UserDetail {params} />
-            </Route>
-            <Route path="/permissions/">
-              <UserPermissions {params} />
-            </Route>
           </Route>
         </Route>
         <Route path="/tracks/*">
@@ -88,13 +81,8 @@
           </Route>
           <Route path="/:trackid" let:params />
         </Route>
-        <Route path="/runners/*">
+        <Route path="/runners">
-          <Route path="/">
+          <Runners />
-            <Runners />
-          </Route>
-          <Route path="/:runnerid" let:params>
-            <RunnerDetail {params} />
-          </Route>
         </Route>
         <Route path="/teams/*">
           <Route path="/">

src/components/AddOrgModal.svelte

@@ -2,7 +2,7 @@
   import { _ } from "svelte-i18n";
   import { clickOutside } from "./outsideclick";
   import { focusTrap } from "svelte-focus-trap";
-  import { RunnerOrganizationService } from "@odit/lfk-client-js";
+  import { RunnerOrganisationService } from "@odit/lfk-client-js";
   import Toastify from "toastify-js";
   export let modal_open;
   export let current_organizations;
@@ -35,7 +35,7 @@
         text: "Organization is being added...",
         duration: -1,
       }).showToast();
-      RunnerOrganizationService.runnerOrganizationControllerPost({
+      RunnerOrganisationService.runnerOrganisationControllerPost({
         name,
         address: undefined,
         contact: undefined,

src/components/AddRunnerModal.svelte

@@ -2,11 +2,7 @@
   import { _ } from "svelte-i18n";
   import { clickOutside } from "./outsideclick";
   import { focusTrap } from "svelte-focus-trap";
-  import {
+  import { RunnerService, RunnerTeamService } from "@odit/lfk-client-js";
-    RunnerService,
-    RunnerTeamService,
-    RunnerOrganizationService,
-  } from "@odit/lfk-client-js";
   import isEmail from "validator/es/lib/isEmail";
   import isMobilePhone from "validator/es/lib/isMobilePhone";
   import Toastify from "toastify-js";
@@ -18,13 +14,9 @@
   let middlename_input;
   let phone_input;
   let email_input;
-  let teams = [];
+  let groups = [];
   RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
-    teams = val;
+    groups = val;
-  });
-  let orgs = [];
-  RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
-    orgs = val;
   });
   function focus(el) {
     el.focus();
@@ -36,13 +28,7 @@
   $: firstname_input_value = "";
   $: processed_last_submit = true;
   $: isPhoneValidOrEmpty =
-    isMobilePhone(
+    isMobilePhone(phone_input_value) || phone_input_value === "";
-      phone_input_value
-        .replaceAll("(", "")
-        .replaceAll(")", "")
-        .replaceAll("-", "")
-        .replaceAll(" ", "")
-    ) || phone_input_value === "";
   $: isEmailValidOrEmpty =
     isEmail(email_input_value) || email_input_value === "";
   $: isLastnameValid = lastname_input_value.trim().length !== 0;
@@ -154,11 +140,11 @@
             </div>
             <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
-                {$_('create-a-new-runner')}
+                Create a new Runner
               </h3>
               <div class="mt-2 mb-6">
                 <p class="text-sm text-gray-500">
-                  {$_('please-provide-the-required-information-to-add-a-new-runner')}
+                  Please provide the required information to add a new runner.
                 </p>
               </div>
               <div class="grid grid-cols-6 gap-6">
@@ -223,20 +209,13 @@
                 <div class="col-span-6">
                   <label
                     for="team"
-                    class="block text-sm font-medium text-gray-700">{$_('team')}</label>
+                    class="block text-sm font-medium text-gray-700">Team</label>
                   <select
                     name="team"
                     bind:value={selected_team}
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2">
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2">
-                    {#each teams as team}
+                    {#each groups as g}
-                      <option value={team.id}>
+                      <option value={g.id}>{g.name}</option>
-                        {team.parentGroup.name}
-                        &gt;
-                        {team.name}
-                      </option>
-                    {/each}
-                    {#each orgs as org}
-                      <option value={org.id}>{org.name}</option>
                     {/each}
                   </select>
                 </div>
@@ -258,7 +237,8 @@
                   {#if !isPhoneValidOrEmpty}
                     <span
                       class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-                      {$_('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...
                     </span>
                   {/if}
                 </div>

src/components/AddTeamModal.svelte

@@ -3,7 +3,7 @@
   import { clickOutside } from "./outsideclick";
   import { focusTrap } from "svelte-focus-trap";
   import {
-    RunnerOrganizationService,
+    RunnerOrganisationService,
     RunnerTeamService,
   } from "@odit/lfk-client-js";
   import Toastify from "toastify-js";
@@ -33,7 +33,7 @@
   })();
   $: parentGroup = undefined;
   $: orgs = [];
-  RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
+  RunnerOrganisationService.runnerOrganisationControllerGetAll().then((val) => {
     orgs = val;
   });
   function submit() {
@@ -147,7 +147,7 @@
                     class="block text-sm font-medium text-gray-700">{$_('organization')}</label>
                   <select
                     bind:value={parentGroup}
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2">
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2">
                     {#each orgs as t}
                       <option value={t.id}>{t.name}</option>
                     {/each}

src/components/AddUserModal.svelte

@@ -28,10 +28,7 @@
   $: isLastnameValid = lastname_input_value.trim().length !== 0;
   $: isFirstnameValid = firstname_input_value.trim().length !== 0;
   $: createbtnenabled =
-    isFirstnameValid &&
+    isFirstnameValid && isLastnameValid && isEmailValid && isPasswordValid;
-    isLastnameValid &&
-    isPasswordValid &&
-    !(!isEmailValid && username_input_value.trim().length === 0);
   (function () {
     document.onkeydown = function (e) {
       e = e || window.event;
@@ -53,14 +50,19 @@
         text: "User is being added...",
         duration: -1,
       }).showToast();
-      UserService.userControllerPost({
+      let postdata={
         firstname: firstname_input_value,
         lastname: lastname_input_value,
         middlename: middlename_input_value,
-        password: password_input_value,
+        password: password_input_value
-        email: email_input_value,
+      };
-        username: username_input_value,
+      if(email_input_value!==""){
-      })
+        postdata.email=email_input_value;
+      }
+      if(username_input_value!==""){
+        postdata.username=username_input_value;
+      }
+      UserService.userControllerPost(postdata)
         .then((result) => {
           firstname_input_value = "";
           lastname_input_value = "";
@@ -75,7 +77,7 @@
             backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
           }).showToast();
           current_users.push(result);
-          current_users = current_users;
+          current_users=current_users;
         })
         .catch((err) => {
           //
@@ -236,21 +238,18 @@
                   <input
                     autocomplete="off"
                     placeholder={$_('e-mail-adress')}
+                    class:border-red-500={!isEmailValid}
+                    class:focus:border-red-500={!isEmailValid}
+                    class:focus:ring-red-500={!isEmailValid}
                     bind:value={email_input_value}
                     bind:this={email_input}
                     type="email"
                     name="email"
                     class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
-                  <!-- {#if !isEmailValid}
+                  {#if !isEmailValid}
                     <span
                       class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-                      valid email or username is required
+                      {$_('valid-email-is-required')}
-                    </span>
-                  {/if} -->
-                  {#if !isEmailValid && username_input_value.trim().length === 0}
-                    <span
-                      class="mt-8 flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-                      valid email or username is required
                     </span>
                   {/if}
                 </div>

src/components/ComponentDump.svelte

@@ -30,7 +30,7 @@
   <Table />
 </div>
 <div
-  class="widget w-full p-4 mb-4 rounded-lg bg-white border border-grey-100">
+  class="widget w-full p-4 mb-4 rounded-lg bg-white border border-grey-100 dark:bg-grey-895 dark:border-grey-890">
   <div class="flex flex-row items-center justify-between mb-6">
     <div class="flex flex-col">
       <div class="text-sm font-light text-grey-500">Regular</div>

src/components/ConfirmOrgDeletion.svelte

@@ -2,7 +2,7 @@
   import { _ } from "svelte-i18n";
   import { clickOutside } from "./outsideclick";
   import { focusTrap } from "svelte-focus-trap";
-  import { RunnerOrganizationService } from "@odit/lfk-client-js";
+  import { RunnerOrganisationService } from "@odit/lfk-client-js";
   import Toastify from "toastify-js";
   import { createEventDispatcher } from "svelte";
   export let modal_open;
@@ -13,7 +13,7 @@
     dispatch("cancelDelete", { id: delete_org.id });
   }
   function deleteOrg() {
-    RunnerOrganizationService.runnerOrganizationControllerRemove(
+    RunnerOrganisationService.runnerOrganisationControllerRemove(
       delete_org.id,
       true
     )

src/components/ConversionsChart.svelte

@@ -1,4 +1,4 @@
-<div class="w-full p-4 rounded-lg bg-white border border-grey-100">
+<div class="w-full p-4 rounded-lg bg-white border border-grey-100 dark:bg-grey-895 dark:border-grey-890">
   <div class="flex flex-row items-center justify-between mb-6">
     <div class="flex flex-col">
       <div class="text-sm font-light text-grey-500">Conversions</div>
@@ -18,16 +18,16 @@
           <div class="flex flex-col w-full">
             <ul class="list-none">
               <li><a
-                  class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
+                  class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100 dark:bg-grey-895 dark:hover:bg-grey-890"
                   href="/">Today</a></li>
               <li><a
-                  class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
+                  class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100 dark:bg-grey-895 dark:hover:bg-grey-890"
                   href="/">This week</a></li>
               <li><a
-                  class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
+                  class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100 dark:bg-grey-895 dark:hover:bg-grey-890"
                   href="/">This month</a></li>
               <li><a
-                  class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
+                  class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100 dark:bg-grey-895 dark:hover:bg-grey-890"
                   href="/">This year</a></li>
             </ul>
           </div>

src/components/Dash.svelte

@@ -323,7 +323,7 @@
       </li>
     </ul>
   </div>
-  <div class="main w-full bg-grey-50 text-grey-900">
+  <div class="main w-full bg-grey-50 text-grey-900 dark:bg-grey-900 dark:text-white">
     <div class="navbar navbar-1 border-b">
       <div class="navbar-inner w-full flex items-center justify-start"><button class="mx-4"><svg stroke="currentColor"
             fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" size="20"
@@ -733,7 +733,7 @@
       <div class="flex flex-col lg:flex-row w-full lg:space-x-2 space-y-2 lg:space-y-0 mb-2 lg:mb-4">
         <div class="w-full lg:w-1/4">
           <div
-            class="widget w-full p-4 rounded-lg bg-white border border-grey-100">
+            class="widget w-full p-4 rounded-lg bg-white border border-grey-100 dark:bg-grey-895 dark:border-grey-890">
             <div class="flex flex-row items-center justify-between">
               <div class="flex flex-col">
                 <div class="text-xs uppercase font-light text-grey-500">Users</div>
@@ -751,7 +751,7 @@
         </div>
         <div class="w-full lg:w-1/4">
           <div
-            class="widget w-full p-4 rounded-lg bg-white border border-grey-100">
+            class="widget w-full p-4 rounded-lg bg-white border border-grey-100 dark:bg-grey-895 dark:border-grey-890">
             <div class="flex flex-row items-center justify-between">
               <div class="flex flex-col">
                 <div class="text-xs uppercase font-light text-grey-500">Sessions</div>
@@ -766,7 +766,7 @@
         </div>
         <div class="w-full lg:w-1/4">
           <div
-            class="widget w-full p-4 rounded-lg bg-white border border-grey-100">
+            class="widget w-full p-4 rounded-lg bg-white border border-grey-100 dark:bg-grey-895 dark:border-grey-890">
             <div class="flex flex-row items-center justify-between">
               <div class="flex flex-col">
                 <div class="text-xs uppercase font-light text-grey-500">Bounce rate</div>
@@ -783,7 +783,7 @@
         </div>
         <div class="w-full lg:w-1/4">
           <div
-            class="widget w-full p-4 rounded-lg bg-white border border-grey-100">
+            class="widget w-full p-4 rounded-lg bg-white border border-grey-100 dark:bg-grey-895 dark:border-grey-890">
             <div class="flex flex-row items-center justify-between">
               <div class="flex flex-col">
                 <div class="text-xs uppercase font-light text-grey-500">Session duration</div>
@@ -803,7 +803,7 @@
           <ConversionsChart />
         </div>
         <div class="w-full lg:w-1/3">
-          <div class="w-full p-4 rounded-lg bg-white border border-grey-100">
+          <div class="w-full p-4 rounded-lg bg-white border border-grey-100 dark:bg-grey-895 dark:border-grey-890">
             <div class="flex flex-row items-center justify-between mb-6">
               <div class="flex flex-col">
                 <div class="text-sm font-light text-grey-500">Sessions</div>
@@ -823,16 +823,16 @@
                     <div class="flex flex-col w-full">
                       <ul class="list-none">
                         <li><a
-                            class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
+                            class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100 dark:bg-grey-895 dark:hover:bg-grey-890"
                             href="/">Today</a></li>
                         <li><a
-                            class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
+                            class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100 dark:bg-grey-895 dark:hover:bg-grey-890"
                             href="/">This week</a></li>
                         <li><a
-                            class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
+                            class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100 dark:bg-grey-895 dark:hover:bg-grey-890"
                             href="/">This month</a></li>
                         <li><a
-                            class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
+                            class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100 dark:bg-grey-895 dark:hover:bg-grey-890"
                             href="/">This year</a></li>
                       </ul>
                     </div>
@@ -923,7 +923,7 @@
         </div>
       </div>
       <div class="w-full lg:space-x-2 space-y-2 lg:space-y-0 mb-2 lg:mb-4">
-        <div class="w-full p-4 rounded-lg bg-white border border-grey-100">
+        <div class="w-full p-4 rounded-lg bg-white border border-grey-100 dark:bg-grey-895 dark:border-grey-890">
           <div class="flex flex-row items-center justify-between mb-6">
             <div class="flex flex-col">
               <div class="text-sm font-light text-grey-500">Users</div>
@@ -1211,15 +1211,15 @@
               </table>
               <div class="flex flex-row w-full items-center justify-around lg:justify-between my-4">
                 <div class="flex flex-wrap items-center justify-start space-x-2 pagination"><button
-                    class="btn btn-default bg-transparent hover:bg-grey-200 text-grey-900">Next</button><button
+                    class="btn btn-default bg-transparent hover:bg-grey-200 text-grey-900 dark:text-white">Next</button><button
-                    class="btn btn-default bg-transparent hover:bg-grey-200 text-grey-900">Last</button>
+                    class="btn btn-default bg-transparent hover:bg-grey-200 text-grey-900 dark:text-white">Last</button>
                 </div><span class="hidden lg:block">Page
                   <!-- --> <b>1
                     <!-- --> of
                     <!-- -->11
                   </b>
                 </span><select
-                  class="hidden lg:block form-select text-sm bg-white outline-none shadow-none focus:shadow-none">
+                  class="hidden lg:block form-select text-sm bg-white dark:bg-grey-800 dark:border-grey-800 outline-none shadow-none focus:shadow-none">
                   <option selected="" value="10">Show 10</option>
                   <option value="25">Show 25</option>
                   <option value="50">Show 50</option>
@@ -1232,7 +1232,7 @@
       </div>
       <div class="flex flex-col lg:flex-row w-full lg:space-x-2 space-y-2 lg:space-y-0 mb-2 lg:mb-4">
         <div class="w-full lg:w-1/2">
-          <div class="w-full p-4 rounded-lg bg-white border border-grey-100">
+          <div class="w-full p-4 rounded-lg bg-white border border-grey-100 dark:bg-grey-895 dark:border-grey-890">
             <div class="flex flex-row items-center justify-between mb-6">
               <div class="flex flex-col">
                 <div class="text-sm font-light text-grey-500">Project status</div>
@@ -1252,16 +1252,16 @@
                     <div class="flex flex-col w-full">
                       <ul class="list-none">
                         <li><a
-                            class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
+                            class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100 dark:bg-grey-895 dark:hover:bg-grey-890"
                             href="/">Today</a></li>
                         <li><a
-                            class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
+                            class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100 dark:bg-grey-895 dark:hover:bg-grey-890"
                             href="/">This week</a></li>
                         <li><a
-                            class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
+                            class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100 dark:bg-grey-895 dark:hover:bg-grey-890"
                             href="/">This month</a></li>
                         <li><a
-                            class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
+                            class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100 dark:bg-grey-895 dark:hover:bg-grey-890"
                             href="/">This year</a></li>
                       </ul>
                     </div>
@@ -1336,7 +1336,7 @@
           </div>
         </div>
         <div class="w-full lg:w-1/2">
-          <div class="w-full p-4 rounded-lg bg-white border border-grey-100">
+          <div class="w-full p-4 rounded-lg bg-white border border-grey-100 dark:bg-grey-895 dark:border-grey-890">
             <div class="flex flex-row items-center justify-between mb-6">
               <div class="flex flex-col">
                 <div class="text-sm font-light text-grey-500">Sales</div>
@@ -1356,16 +1356,16 @@
                     <div class="flex flex-col w-full">
                       <ul class="list-none">
                         <li><a
-                            class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
+                            class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100 dark:bg-grey-895 dark:hover:bg-grey-890"
                             href="/">Today</a></li>
                         <li><a
-                            class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
+                            class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100 dark:bg-grey-895 dark:hover:bg-grey-890"
                             href="/">This week</a></li>
                         <li><a
-                            class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
+                            class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100 dark:bg-grey-895 dark:hover:bg-grey-890"
                             href="/">This month</a></li>
                         <li><a
-                            class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
+                            class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100 dark:bg-grey-895 dark:hover:bg-grey-890"
                             href="/">This year</a></li>
                       </ul>
                     </div>
@@ -1578,7 +1578,7 @@
       </div>
       <div class="flex flex-col lg:flex-row w-full lg:space-x-2 space-y-2 lg:space-y-0 mb-2 lg:mb-4">
         <div class="w-full lg:w-1/3">
-          <div class="w-full p-4 rounded-lg bg-white border border-grey-100">
+          <div class="w-full p-4 rounded-lg bg-white border border-grey-100 dark:bg-grey-895 dark:border-grey-890">
             <div class="flex flex-row items-center justify-between mb-6">
               <div class="flex flex-col">
                 <div class="text-sm font-light text-grey-500">Activities</div>
@@ -1598,16 +1598,16 @@
                     <div class="flex flex-col w-full">
                       <ul class="list-none">
                         <li><a
-                            class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
+                            class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100 dark:bg-grey-895 dark:hover:bg-grey-890"
                             href="/">Today</a></li>
                         <li><a
-                            class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
+                            class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100 dark:bg-grey-895 dark:hover:bg-grey-890"
                             href="/">This week</a></li>
                         <li><a
-                            class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
+                            class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100 dark:bg-grey-895 dark:hover:bg-grey-890"
                             href="/">This month</a></li>
                         <li><a
-                            class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
+                            class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100 dark:bg-grey-895 dark:hover:bg-grey-890"
                             href="/">This year</a></li>
                       </ul>
                     </div>
@@ -1619,7 +1619,7 @@
               <div class="flex flex-col w-full">
                 <div class="flex relative justify-start items-start">
                   <div class="h-full w-6 absolute inset-0 flex items-center justify-center">
-                    <div class="h-full w-1 bg-grey-200 pointer-events-none"></div>
+                    <div class="h-full w-1 bg-grey-200 dark:bg-grey-800 pointer-events-none"></div>
                   </div>
                   <div
                     class="flex-shrink-0 w-6 h-6 rounded-full inline-flex items-center justify-center bg-blue-500 text-white relative z-10 font-medium text-sm">
@@ -1636,7 +1636,7 @@
                 </div>
                 <div class="flex relative justify-start items-start">
                   <div class="h-full w-6 absolute inset-0 flex items-center justify-center">
-                    <div class="h-full w-1 bg-grey-200 pointer-events-none"></div>
+                    <div class="h-full w-1 bg-grey-200 dark:bg-grey-800 pointer-events-none"></div>
                   </div>
                   <div
                     class="flex-shrink-0 w-6 h-6 rounded-full inline-flex items-center justify-center bg-blue-500 text-white relative z-10 font-medium text-sm">
@@ -1653,7 +1653,7 @@
                 </div>
                 <div class="flex relative justify-start items-start">
                   <div class="h-full w-6 absolute inset-0 flex items-center justify-center">
-                    <div class="h-full w-1 bg-grey-200 pointer-events-none"></div>
+                    <div class="h-full w-1 bg-grey-200 dark:bg-grey-800 pointer-events-none"></div>
                   </div>
                   <div
                     class="flex-shrink-0 w-6 h-6 rounded-full inline-flex items-center justify-center bg-blue-500 text-white relative z-10 font-medium text-sm">
@@ -1670,7 +1670,7 @@
                 </div>
                 <div class="flex relative justify-start items-start">
                   <div class="h-full w-6 absolute inset-0 flex items-center justify-center">
-                    <div class="h-full w-1 bg-grey-200 pointer-events-none"></div>
+                    <div class="h-full w-1 bg-grey-200 dark:bg-grey-800 pointer-events-none"></div>
                   </div>
                   <div
                     class="flex-shrink-0 w-6 h-6 rounded-full inline-flex items-center justify-center bg-blue-500 text-white relative z-10 font-medium text-sm">
@@ -1690,7 +1690,7 @@
           </div>
         </div>
         <div class="w-full lg:w-2/3">
-          <div class="w-full p-4 rounded-lg bg-white border border-grey-100">
+          <div class="w-full p-4 rounded-lg bg-white border border-grey-100 dark:bg-grey-895 dark:border-grey-890">
             <div class="flex flex-row items-center justify-between mb-6">
               <div class="flex flex-col">
                 <div class="text-sm font-light text-grey-500">To do</div>
@@ -1710,16 +1710,16 @@
                     <div class="flex flex-col w-full">
                       <ul class="list-none">
                         <li><a
-                            class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
+                            class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100 dark:bg-grey-895 dark:hover:bg-grey-890"
                             href="/">Today</a></li>
                         <li><a
-                            class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
+                            class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100 dark:bg-grey-895 dark:hover:bg-grey-890"
                             href="/">This week</a></li>
                         <li><a
-                            class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
+                            class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100 dark:bg-grey-895 dark:hover:bg-grey-890"
                             href="/">This month</a></li>
                         <li><a
-                            class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
+                            class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100 dark:bg-grey-895 dark:hover:bg-grey-890"
                             href="/">This year</a></li>
                       </ul>
                     </div>
@@ -1831,7 +1831,7 @@
                 </div>
                 <form>
                   <div class="form-element"><input type="text" value="" name="todo"
-                      class="form-input text-sm bg-white"
+                      class="form-input text-sm bg-white dark:bg-grey-800 dark:border-grey-800"
                       placeholder="Add new..."></div>
                 </form>
                 <div class="flex flex-row items-center justify-between">

src/components/Dashboard.svelte

@@ -1,7 +1,6 @@
 <script>
   import { _ } from "svelte-i18n";
   import localForage from "localforage";
-  import store from "../store";
   import { router } from "tinro";
   import NoComponentLoaded from "./NoComponentLoaded.svelte";
   import { AuthService } from "@odit/lfk-client-js";
@@ -37,91 +36,81 @@
         </svg>
         <span>{$_('dashboard-title')}</span>
       </a>
-      {#if store.state.jwtinfo.userdetails.permissions.includes('ORGANIZATION:GET')}
+      <a
-        <a
+        class:bg-gray-100={$router.path.includes('/orgs/')}
-          class:bg-gray-100={$router.path.includes('/orgs/')}
+        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+        href="/orgs/">
-          href="/orgs/">
+        <svg
-          <svg
+          class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
-            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+          fill="currentColor"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          width="24"
+          height="24"><path fill="none" d="M0 0h24v24H0z" />
+          <path
+            d="M17 19h2v-8h-6v8h2v-6h2v6zM3 19V4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v5h2v10h1v2H2v-2h1zm4-8v2h2v-2H7zm0 4v2h2v-2H7zm0-8v2h2V7H7z" /></svg>
+        <span>{$_('orgs')}</span>
+      </a>
+      <a
+        class:bg-gray-100={$router.path === '/users/'}
+        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+        href="/users/">
+        <svg
+          class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+          fill="currentColor"
+          width="24"
+          height="24"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 640 512"><path
             fill="currentColor"
-            xmlns="http://www.w3.org/2000/svg"
+            d="M610.5 341.3c2.6-14.1 2.6-28.5 0-42.6l25.8-14.9c3-1.7 4.3-5.2 3.3-8.5-6.7-21.6-18.2-41.2-33.2-57.4-2.3-2.5-6-3.1-9-1.4l-25.8 14.9c-10.9-9.3-23.4-16.5-36.9-21.3v-29.8c0-3.4-2.4-6.4-5.7-7.1-22.3-5-45-4.8-66.2 0-3.3.7-5.7 3.7-5.7 7.1v29.8c-13.5 4.8-26 12-36.9 21.3l-25.8-14.9c-2.9-1.7-6.7-1.1-9 1.4-15 16.2-26.5 35.8-33.2 57.4-1 3.3.4 6.8 3.3 8.5l25.8 14.9c-2.6 14.1-2.6 28.5 0 42.6l-25.8 14.9c-3 1.7-4.3 5.2-3.3 8.5 6.7 21.6 18.2 41.1 33.2 57.4 2.3 2.5 6 3.1 9 1.4l25.8-14.9c10.9 9.3 23.4 16.5 36.9 21.3v29.8c0 3.4 2.4 6.4 5.7 7.1 22.3 5 45 4.8 66.2 0 3.3-.7 5.7-3.7 5.7-7.1v-29.8c13.5-4.8 26-12 36.9-21.3l25.8 14.9c2.9 1.7 6.7 1.1 9-1.4 15-16.2 26.5-35.8 33.2-57.4 1-3.3-.4-6.8-3.3-8.5l-25.8-14.9zM496 368.5c-26.8 0-48.5-21.8-48.5-48.5s21.8-48.5 48.5-48.5 48.5 21.8 48.5 48.5-21.7 48.5-48.5 48.5zM96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm224 32c1.9 0 3.7-.5 5.6-.6 8.3-21.7 20.5-42.1 36.3-59.2 7.4-8 17.9-12.6 28.9-12.6 6.9 0 13.7 1.8 19.6 5.3l7.9 4.6c.8-.5 1.6-.9 2.4-1.4 7-14.6 11.2-30.8 11.2-48 0-61.9-50.1-112-112-112S208 82.1 208 144c0 61.9 50.1 112 112 112zm105.2 194.5c-2.3-1.2-4.6-2.6-6.8-3.9-8.2 4.8-15.3 9.8-27.5 9.8-10.9 0-21.4-4.6-28.9-12.6-18.3-19.8-32.3-43.9-40.2-69.6-10.7-34.5 24.9-49.7 25.8-50.3-.1-2.6-.1-5.2 0-7.8l-7.9-4.6c-3.8-2.2-7-5-9.8-8.1-3.3.2-6.5.6-9.8.6-24.6 0-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h255.4c-3.7-6-6.2-12.8-6.2-20.3v-9.2zM173.1 274.6C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z" /></svg>
-            viewBox="0 0 24 24"
+        <span>{$_('users')}</span>
-            width="24"
+      </a>
-            height="24"><path fill="none" d="M0 0h24v24H0z" />
+      <a
-            <path
+        class:bg-gray-100={$router.path === '/runners/'}
-              d="M17 19h2v-8h-6v8h2v-6h2v6zM3 19V4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v5h2v10h1v2H2v-2h1zm4-8v2h2v-2H7zm0 4v2h2v-2H7zm0-8v2h2V7H7z" /></svg>
+        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
-          <span>{$_('orgs')}</span>
+        href="/runners/">
-        </a>
+        <svg
-      {/if}
+          xmlns="http://www.w3.org/2000/svg"
-      {#if store.state.jwtinfo.userdetails.permissions.includes('USER:GET')}
+          viewBox="0 0 24 24"
-        <a
+          class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
-          class:bg-gray-100={$router.path === '/users/'}
+          fill="currentColor"
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+          width="24"
-          href="/users/">
+          height="24"><path fill="none" d="M0 0h24v24H0z" />
-          <svg
+          <path
-            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+            d="M9.83 8.79L8 9.456V13H6V8.05h.015l5.268-1.918c.244-.093.51-.14.782-.131a2.616 2.616 0 0 1 2.427 1.82c.186.583.356.977.51 1.182A4.992 4.992 0 0 0 19 11v2a6.986 6.986 0 0 1-5.402-2.547l-.581 3.297L15 15.67V23h-2v-5.986l-2.05-1.987-.947 4.298-6.894-1.215.348-1.97 4.924.868L9.83 8.79zM13.5 5.5a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" /></svg>
+        <span>{$_('runners')}</span>
+      </a>
+      <a
+        class:bg-gray-100={$router.path === '/teams/'}
+        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+        href="/teams/">
+        <svg
+          class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+          fill="currentColor"
+          width="24"
+          height="24"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 640 512"><path
             fill="currentColor"
-            width="24"
+            d="M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z" /></svg>
-            height="24"
+        <span>{$_('teams')}</span>
-            xmlns="http://www.w3.org/2000/svg"
+      </a>
-            viewBox="0 0 640 512"><path
+      <a
-              fill="currentColor"
+        class:bg-gray-100={$router.path === '/tracks/'}
-              d="M610.5 341.3c2.6-14.1 2.6-28.5 0-42.6l25.8-14.9c3-1.7 4.3-5.2 3.3-8.5-6.7-21.6-18.2-41.2-33.2-57.4-2.3-2.5-6-3.1-9-1.4l-25.8 14.9c-10.9-9.3-23.4-16.5-36.9-21.3v-29.8c0-3.4-2.4-6.4-5.7-7.1-22.3-5-45-4.8-66.2 0-3.3.7-5.7 3.7-5.7 7.1v29.8c-13.5 4.8-26 12-36.9 21.3l-25.8-14.9c-2.9-1.7-6.7-1.1-9 1.4-15 16.2-26.5 35.8-33.2 57.4-1 3.3.4 6.8 3.3 8.5l25.8 14.9c-2.6 14.1-2.6 28.5 0 42.6l-25.8 14.9c-3 1.7-4.3 5.2-3.3 8.5 6.7 21.6 18.2 41.1 33.2 57.4 2.3 2.5 6 3.1 9 1.4l25.8-14.9c10.9 9.3 23.4 16.5 36.9 21.3v29.8c0 3.4 2.4 6.4 5.7 7.1 22.3 5 45 4.8 66.2 0 3.3-.7 5.7-3.7 5.7-7.1v-29.8c13.5-4.8 26-12 36.9-21.3l25.8 14.9c2.9 1.7 6.7 1.1 9-1.4 15-16.2 26.5-35.8 33.2-57.4 1-3.3-.4-6.8-3.3-8.5l-25.8-14.9zM496 368.5c-26.8 0-48.5-21.8-48.5-48.5s21.8-48.5 48.5-48.5 48.5 21.8 48.5 48.5-21.7 48.5-48.5 48.5zM96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm224 32c1.9 0 3.7-.5 5.6-.6 8.3-21.7 20.5-42.1 36.3-59.2 7.4-8 17.9-12.6 28.9-12.6 6.9 0 13.7 1.8 19.6 5.3l7.9 4.6c.8-.5 1.6-.9 2.4-1.4 7-14.6 11.2-30.8 11.2-48 0-61.9-50.1-112-112-112S208 82.1 208 144c0 61.9 50.1 112 112 112zm105.2 194.5c-2.3-1.2-4.6-2.6-6.8-3.9-8.2 4.8-15.3 9.8-27.5 9.8-10.9 0-21.4-4.6-28.9-12.6-18.3-19.8-32.3-43.9-40.2-69.6-10.7-34.5 24.9-49.7 25.8-50.3-.1-2.6-.1-5.2 0-7.8l-7.9-4.6c-3.8-2.2-7-5-9.8-8.1-3.3.2-6.5.6-9.8.6-24.6 0-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h255.4c-3.7-6-6.2-12.8-6.2-20.3v-9.2zM173.1 274.6C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z" /></svg>
+        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
-          <span>{$_('users')}</span>
+        href="/tracks/">
-        </a>
+        <svg
-      {/if}
+          class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
-      {#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:GET')}
+          fill="currentColor"
-        <a
+          width="24"
-          class:bg-gray-100={$router.path === '/runners/'}
+          height="24"
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+          xmlns="http://www.w3.org/2000/svg"
-          href="/runners/">
+          viewBox="0 0 640 512"><path
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
             fill="currentColor"
-            width="24"
+            d="M635.7 167.2L556.1 31.7c-8.8-15-28.3-20.1-43.5-11.5l-69 39.1L503.3 161c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L416 75l-55.2 31.3 27.9 47.4c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L333.2 122 278 153.3 337.8 255c2.2 3.7.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9l-59.7-101.7-55.2 31.3 27.9 47.4c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9l-27.9-47.5-55.2 31.3 59.7 101.7c2.2 3.7.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L84.9 262.9l-69 39.1C.7 310.7-4.6 329.8 4.2 344.8l79.6 135.6c8.8 15 28.3 20.1 43.5 11.5L624.1 210c15.2-8.6 20.4-27.8 11.6-42.8z" /></svg>
-            height="24"><path fill="none" d="M0 0h24v24H0z" />
+        <span>{$_('tracks')}</span>
-            <path
+      </a>
-              d="M9.83 8.79L8 9.456V13H6V8.05h.015l5.268-1.918c.244-.093.51-.14.782-.131a2.616 2.616 0 0 1 2.427 1.82c.186.583.356.977.51 1.182A4.992 4.992 0 0 0 19 11v2a6.986 6.986 0 0 1-5.402-2.547l-.581 3.297L15 15.67V23h-2v-5.986l-2.05-1.987-.947 4.298-6.894-1.215.348-1.97 4.924.868L9.83 8.79zM13.5 5.5a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" /></svg>
-          <span>{$_('runners')}</span>
-        </a>
-      {/if}
-      {#if store.state.jwtinfo.userdetails.permissions.includes('TEAM:GET')}
-        <a
-          class:bg-gray-100={$router.path === '/teams/'}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
-          href="/teams/">
-          <svg
-            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
-            fill="currentColor"
-            width="24"
-            height="24"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 640 512"><path
-              fill="currentColor"
-              d="M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z" /></svg>
-          <span>{$_('teams')}</span>
-        </a>
-      {/if}
-      {#if store.state.jwtinfo.userdetails.permissions.includes('TRACK:GET')}
-        <a
-          class:bg-gray-100={$router.path === '/tracks/'}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
-          href="/tracks/">
-          <svg
-            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
-            fill="currentColor"
-            width="24"
-            height="24"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 640 512"><path
-              fill="currentColor"
-              d="M635.7 167.2L556.1 31.7c-8.8-15-28.3-20.1-43.5-11.5l-69 39.1L503.3 161c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L416 75l-55.2 31.3 27.9 47.4c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L333.2 122 278 153.3 337.8 255c2.2 3.7.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9l-59.7-101.7-55.2 31.3 27.9 47.4c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9l-27.9-47.5-55.2 31.3 59.7 101.7c2.2 3.7.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L84.9 262.9l-69 39.1C.7 310.7-4.6 329.8 4.2 344.8l79.6 135.6c8.8 15 28.3 20.1 43.5 11.5L624.1 210c15.2-8.6 20.4-27.8 11.6-42.8z" /></svg>
-          <span>{$_('tracks')}</span>
-        </a>
-      {/if}
       <a
         class:bg-gray-100={false}
         class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"

src/components/ImportRunnerModal.svelte

@@ -1,286 +0,0 @@
-<script>
-  import csv from "csvtojson";
-  import { read as readXlsx, utils as xlsx_utils } from "xlsx";
-  import { _ } from "svelte-i18n";
-  import { clickOutside } from "./outsideclick";
-  import { focusTrap } from "svelte-focus-trap";
-  import Toastify from "toastify-js";
-  import { ImportService } from "@odit/lfk-client-js";
-  import { createEventDispatcher } from "svelte";
-  export let opened_from;
-  export let passed_org;
-  export let passed_orgs;
-  export let passed_team;
-  export let import_modal_open;
-  $: searchvalue = "";
-  const dispatch = createEventDispatcher();
-  function cancelModal() {
-    import_modal_open = false;
-    dispatch("cancel");
-  }
-  (() => {
-    document.onkeydown = (e) => {
-      e = e || window.event;
-      if (e.key === "Escape") {
-        import_modal_open = false;
-      }
-      if (e.keyCode === 13) {
-        //
-      }
-    };
-  })();
-  let selected_org;
-  let files;
-  let recent_processed = true;
-  $: json_output = [];
-  $: {
-    if (files) {
-      if (
-        files[0].type ===
-        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
-      ) {
-        const reader = new FileReader();
-        reader.addEventListener("load", async (e) => {
-          const data = new Uint8Array(e.target.result);
-          const out = readXlsx(data, { type: "array" });
-          json_output = xlsx_utils.sheet_to_json(
-            out.Sheets[Object.keys(out.Sheets)[0]]
-          );
-        });
-        reader.readAsArrayBuffer(files[0]);
-      } else {
-        const reader = new FileReader();
-        reader.addEventListener("load", async (e) => {
-          json_output = await csv({
-            delimiter: [";", ","],
-            trim: true,
-          }).fromString(e.target.result);
-        });
-        reader.readAsText(files[0]);
-      }
-    }
-  }
-  function importAction() {
-    if (recent_processed === true) {
-      const toast = Toastify({
-        text: "Runners are being imported...",
-        duration: -1,
-      }).showToast();
-      recent_processed = false;
-      const mapped = json_output.map(function (runner) {
-        return {
-          firstname: runner[`${$_("csv_import__firstname")}`],
-          middlename: runner[`${$_("csv_import__middlename")}`],
-          lastname: runner[`${$_("csv_import__lastname")}`],
-          team:
-            runner[`${$_("csv_import__team")}`] ||
-            runner[`${$_("csv_import__class")}`],
-        };
-      });
-      let org = 0;
-      if (opened_from === "OrgDetail") {
-        org = passed_org.id;
-      }
-      if (opened_from === "OrgOverview") {
-        org = parseInt(selected_org);
-      }
-      if (opened_from === "OrgOverview" || opened_from === "OrgDetail") {
-        ImportService.importControllerPostOrgsJson(org, mapped)
-          .then((resp) => {
-            toast.hideToast();
-            recent_processed = true;
-            Toastify({
-              text: "Import finished",
-              duration: 500,
-              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-            }).showToast();
-            cancelModal();
-          })
-          .catch((err) => {
-            toast.hideToast();
-            recent_processed = true;
-          });
-      }
-      if (opened_from === "TeamDetail") {
-        ImportService.importControllerPostTeamsJson(passed_team.id, mapped)
-          .then((resp) => {
-            toast.hideToast();
-            recent_processed = true;
-            Toastify({
-              text: "Import finished",
-              duration: 500,
-              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-            }).showToast();
-            cancelModal();
-          })
-          .catch((err) => {
-            toast.hideToast();
-            recent_processed = true;
-          });
-      }
-    }
-  }
-</script>
-
-{#if import_modal_open}
-  <div
-    class="fixed z-10 inset-0 overflow-y-auto"
-    use:focusTrap
-    use:clickOutside
-    on:click_outside={() => {
-      import_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 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
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                class="h-6 w-6 text-blue-600"
-                fill="currentColor"
-                width="24"
-                height="24"><path fill="none" d="M0 0h24v24H0z" />
-                <path
-                  d="M9.83 8.79L8 9.456V13H6V8.05h.015l5.268-1.918c.244-.093.51-.14.782-.131a2.616 2.616 0 0 1 2.427 1.82c.186.583.356.977.51 1.182A4.992 4.992 0 0 0 19 11v2a6.986 6.986 0 0 1-5.402-2.547l-.581 3.297L15 15.67V23h-2v-5.986l-2.05-1.987-.947 4.298-6.894-1.215.348-1.97 4.924.868L9.83 8.79zM13.5 5.5a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" /></svg>
-            </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-2 sm:text-left w-full">
-              <h3 class="text-lg leading-6 font-bold mt-2 text-gray-900">
-                {$_('runner-import')}
-              </h3>
-            </div>
-          </div>
-          <div class="mt-5 text-center sm:mt-0 sm:ml-2 sm:text-left w-full">
-            {#if json_output.length === 0}
-              <div class="mt-2 mb-6">
-                <p class="text-sm text-gray-500">
-                  {$_('please-provide-the-required-csv-xlsx-file')}
-                </p>
-              </div>
-              <div class="overflow-hidden relative mt-4 mb-4">
-                <input
-                  accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
-                  bind:files
-                  type="file" />
-              </div>
-            {/if}
-            {#if json_output.length > 0}
-              {#if opened_from === 'OrgOverview'}
-                <p>{$_('import__target-organization')}</p>
-                <select
-                  name="team"
-                  bind:value={selected_org}
-                  class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2">
-                  {#each passed_orgs as o}
-                    <option value={o.id}>{o.name}</option>
-                  {/each}
-                </select>
-                <p>{$_('bitte-bestaetige-diese-laeufer-fuer-den-import')}</p>
-              {/if}
-              {#if opened_from === 'OrgDetail'}
-                <p>
-                  {$_('runnerimport_verify_runners_org', {
-                    values: { org_name: passed_org.name },
-                  })}
-                </p>
-              {/if}
-              <input
-                type="search"
-                bind:value={searchvalue}
-                placeholder={$_('datatable.search')}
-                aria-label={$_('datatable.search')}
-                class="p-2 w-full" />
-              <div class="relative w-full mt-4 mb-4">
-                <div class="w-full overflow-x-auto">
-                  <table class="divide-y divide-gray-200 w-full">
-                    <thead class="bg-gray-50">
-                      <tr>
-                        <th
-                          scope="col"
-                          class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                          {$_('csv_import__firstname')}
-                        </th>
-                        <th
-                          scope="col"
-                          class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                          {$_('csv_import__middlename')}
-                        </th>
-                        <th
-                          scope="col"
-                          class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                          {$_('csv_import__lastname')}
-                        </th>
-                        {#if opened_from !== 'TeamDetail'}
-                          <th
-                            scope="col"
-                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                            {$_('csv_import__team')}
-                          </th>
-                        {/if}
-                      </tr>
-                    </thead>
-                    <tbody class="divide-y divide-gray-200">
-                      {#each json_output as runner}
-                        {#if Object.values(runner)
-                          .toString()
-                          .toLowerCase()
-                          .includes(searchvalue)}
-                          <tr>
-                            <td class="px-6 py-4 whitespace-nowrap">
-                              {runner[`${$_('csv_import__firstname')}`]}
-                            </td>
-                            <td class="px-6 py-4 whitespace-nowrap">
-                              {runner[`${$_('csv_import__middlename')}`] || ''}
-                            </td>
-                            <td class="px-6 py-4 whitespace-nowrap">
-                              {runner[`${$_('csv_import__lastname')}`]}
-                            </td>
-                            {#if opened_from !== 'TeamDetail'}
-                              <td class="px-6 py-4 whitespace-nowrap">
-                                {runner[`${$_('csv_import__team')}`] || runner[`${$_('csv_import__class')}`] || '---'}
-                              </td>
-                            {/if}
-                          </tr>
-                        {/if}
-                      {/each}
-                    </tbody>
-                  </table>
-                </div>
-                <button
-                  on:click={importAction}
-                  type="button"
-                  class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
-                  {$_('import-runners')}
-                </button>
-                <button
-                  on:click={() => {
-                    json_output = [];
-                    cancelModal();
-                  }}
-                  type="button"
-                  class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">
-                  {$_('cancel')}
-                </button>
-              </div>
-            {/if}
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-{/if}

src/components/OrgDetail.svelte

@@ -1,10 +1,9 @@
 <script>
-  import { RunnerOrganizationService } from "@odit/lfk-client-js";
+  import { RunnerOrganisationService } from "@odit/lfk-client-js";
   import { _ } from "svelte-i18n";
   import Toastify from "toastify-js";
   import store from "../store";
   import ConfirmOrgDeletion from "./ConfirmOrgDeletion.svelte";
-  import ImportRunnerModal from "./ImportRunnerModal.svelte";
   import PromiseError from "./PromiseError.svelte";
   $: delete_triggered = false;
   $: save_enabled = !data_changed;
@@ -13,7 +12,7 @@
   let original = {};
   $: data_loaded = false;
   $: data_changed = JSON.stringify(orgdata) === JSON.stringify(original);
-  const promise = RunnerOrganizationService.runnerOrganizationControllerGetOne(
+  const promise = RunnerOrganisationService.runnerOrganisationControllerGetOne(
     params.orgid
   ).then((value) => {
     data_loaded = true;
@@ -22,8 +21,8 @@
   });
   let modal_open = false;
   let delete_org = {};
-  function deleteOrganization() {
+  function deleteOrganisation() {
-    // RunnerOrganizationService.runnerOrganizationControllerRemove(
+    // RunnerOrganisationService.runnerOrganisationControllerRemove(
     //   original.id,
     //   false
     // )
@@ -46,7 +45,7 @@
         text: "updating organization",
         duration: 2500,
       }).showToast();
-      RunnerOrganizationService.runnerOrganizationControllerPut(
+      RunnerOrganisationService.runnerOrganisationControllerPut(
         original.id,
         orgdata
       )
@@ -65,38 +64,18 @@
     } else {
     }
   }
-  export let import_modal_open = false;
 </script>
 
-<ImportRunnerModal
-  on:cancelDelete={(event) => {
-    import_modal_open = false;
-  }}
-  passed_team={{}}
-  passed_orgs={[]}
-  passed_org={orgdata}
-  opened_from="OrgDetail"
-  bind:import_modal_open />
 <ConfirmOrgDeletion bind:modal_open bind:delete_org />
 {#if data_loaded}
   <section class="container p-5">
     <div class="mb-8 text-3xl font-extrabold leading-tight">
       {original.name}
       <span data-id="org_actions_${orgdata.id}">
-        {#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:IMPORT')}
-          <button
-            on:click={() => {
-              import_modal_open = true;
-            }}
-            type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
-            {$_('import-runners')}
-          </button>
-        {/if}
         {#if store.state.jwtinfo.userdetails.permissions.includes('USER:DELETE')}
           {#if delete_triggered}
             <button
-              on:click={deleteOrganization}
+              on:click={deleteOrganisation}
               class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('confirm-delete')}</button>
             <button
               on:click={() => {
@@ -202,7 +181,7 @@
         type="text"
         bind:value={orgdata.name}
         name="name"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2" />
     </div>
     <div class="text-sm w-full">
       <label
@@ -214,7 +193,7 @@
         type="text"
         bind:value={orgdata.contact}
         name="contact"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2" />
     </div>
     <div class="text-sm w-full">
       <label
@@ -226,7 +205,7 @@
         type="text"
         bind:value={orgdata.address}
         name="address"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2" />
     </div>
   </section>
 {:else}

src/components/OrgOverview.svelte

@@ -2,7 +2,7 @@
   import { _ } from "svelte-i18n";
   let modal_open = false;
   let delete_org = {};
-  import { RunnerOrganizationService } from "@odit/lfk-client-js";
+  import { RunnerOrganisationService } from "@odit/lfk-client-js";
   import store from "../store";
   import OrgsEmptyState from "./OrgsEmptyState.svelte";
   import Toastify from "toastify-js";
@@ -11,7 +11,7 @@
   $: active_deletes = [];
   export let current_organizations = [];
 
-  const promise = RunnerOrganizationService.runnerOrganizationControllerGetAll().then(
+  const promise = RunnerOrganisationService.runnerOrganisationControllerGetAll().then(
     (val) => {
       current_organizations = val;
     }
@@ -25,7 +25,7 @@
   }}
   bind:modal_open
   bind:delete_org />
-{#if store.state.jwtinfo.userdetails.permissions.includes('ORGANIZATION:GET')}
+{#if store.state.jwtinfo.userdetails.permissions.includes('ORGANISATION:GET')}
   {#await promise}
     <div
       class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
@@ -79,7 +79,7 @@
                     <div class="flex items-center">
                       <div class="ml-4">
                         <div
-                          class="text-sm font-medium text-gray-900">
+                          class="text-sm font-medium text-gray-900 dark:text-gray-100">
                           {o.name}
                         </div>
                       </div>
@@ -89,7 +89,7 @@
                     <div class="flex items-center">
                       <div class="ml-4">
                         <div
-                          class="text-sm font-medium text-gray-900">
+                          class="text-sm font-medium text-gray-900 dark:text-gray-100">
                           {#if o.address}
                             {JSON.stringify(o.address)}
                           {:else}no address specified{/if}
@@ -101,7 +101,7 @@
                     <div class="flex items-center">
                       <div class="ml-4">
                         <div
-                          class="text-sm font-medium text-gray-900">
+                          class="text-sm font-medium text-gray-900 dark:text-gray-100">
                           {#if o.contact}
                             {JSON.stringify(o.contact)}
                           {:else}no contact specified{/if}
@@ -121,7 +121,7 @@
                         Delete</button>
                       <button
                         on:click={() => {
-                          RunnerOrganizationService.runnerOrganizationControllerRemove(o.id, false)
+                          RunnerOrganisationService.runnerOrganisationControllerRemove(o.id, false)
                             .then((resp) => {
                               current_organizations = current_organizations.filter((obj) => obj.id !== o.id);
                               Toastify({
@@ -146,7 +146,7 @@
                       <a
                         href="./{o.id}"
                         class="text-indigo-600 hover:text-indigo-900">Edit</a>
-                      {#if store.state.jwtinfo.userdetails.permissions.includes('ORGANIZATION:DELETE')}
+                      {#if store.state.jwtinfo.userdetails.permissions.includes('ORGANISATION:DELETE')}
                         <button
                           on:click={() => {
                             active_deletes[o.id] = true;

src/components/Orgs.svelte

@@ -4,15 +4,14 @@
   import AddOrgModal from "./AddOrgModal.svelte";
   export let modal_open = false;
   import OrgOverview from "./OrgOverview.svelte";
-  import ImportRunnerModal from "./ImportRunnerModal.svelte";
+  console.log(store.state.jwtinfo.userdetails.permissions);
   let current_organizations = [];
-  export let import_modal_open = false;
 </script>
 
 <section class="container p-5">
   <span class="mb-1 text-3xl font-extrabold leading-tight">
     {$_('organizations')}
-    {#if store.state.jwtinfo.userdetails.permissions.includes('ORGANIZATION:CREATE')}
+    {#if store.state.jwtinfo.userdetails.permissions.includes('ORGANISATION:CREATE')}
       <button
         on:click={() => {
           modal_open = true;
@@ -22,30 +21,11 @@
         {$_('create-organization')}
       </button>
     {/if}
-    {#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:IMPORT')}
-      <button
-        on:click={() => {
-          import_modal_open = true;
-        }}
-        type="button"
-        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
-        {$_('import-runners')}
-      </button>
-    {/if}
   </span>
   <p class="mb-8 text-lg text-gray-500">manage runner organizations</p>
   <OrgOverview bind:current_organizations />
 </section>
 
-{#if store.state.jwtinfo.userdetails.permissions.includes('ORGANIZATION:CREATE')}
+{#if store.state.jwtinfo.userdetails.permissions.includes('ORGANISATION:CREATE')}
   <AddOrgModal bind:current_organizations bind:modal_open />
-  <ImportRunnerModal
-    on:cancelDelete={(event) => {
-      import_modal_open = false;
-    }}
-    passed_team={{}}
-    passed_org={{}}
-    passed_orgs={current_organizations}
-    opened_from="OrgOverview"
-    bind:import_modal_open />
 {/if}

src/components/Profile.svelte

@@ -8,7 +8,7 @@
     </div>
   </div>
   <div
-    class="w-full p-4 mb-4 rounded-lg bg-white border border-grey-100">
+    class="w-full p-4 mb-4 rounded-lg bg-white border border-grey-100 dark:bg-grey-895 dark:border-grey-890">
     <div class="flex flex-row items-center justify-start p-4">
       <div class="flex-shrink-0 w-24">
         <img

src/components/RunnerDetail.svelte

@@ -1,264 +0,0 @@
-<script>
-  import { _ } from "svelte-i18n";
-  import lodashIsEqual from "lodash.isequal";
-  import store from "../store";
-  import {
-    RunnerService,
-    RunnerTeamService,
-    RunnerOrganizationService,
-  } from "@odit/lfk-client-js";
-  import Toastify from "toastify-js";
-  import PromiseError from "./PromiseError.svelte";
-  import isEmail from "validator/es/lib/isEmail";
-  let data_loaded = false;
-  export let params;
-  const runner_promise = RunnerService.runnerControllerGetOne(params.runnerid);
-  $: delete_triggered = false;
-  $: original_data = {};
-  $: editable = {};
-  $: changes_performed = !lodashIsEqual(original_data, editable);
-  $: isEmailValid =
-    (editable.email || "") === "" ||
-    (editable.email && isEmail(editable.email || ""));
-  $: isFirstnameValid = editable.firstname !== "";
-  $: isLastnameValid = editable.lastname !== "";
-  $: save_enabled =
-    changes_performed && isFirstnameValid && isLastnameValid && isEmailValid;
-  runner_promise.then((data) => {
-    data_loaded = true;
-    original_data = Object.assign(original_data, data);
-    original_data.group = original_data.group.id;
-    editable = Object.assign(editable, original_data);
-  });
-  let orgs = [];
-  RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
-    orgs = val;
-  });
-  let teams = [];
-  RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
-    teams = val;
-  });
-  function submit() {
-    if (data_loaded === true && save_enabled) {
-      Toastify({
-        text: $_("updating-runner"),
-        duration: 2500,
-      }).showToast();
-      RunnerService.runnerControllerPut(original_data.id, editable)
-        .then((resp) => {
-          Object.assign(original_data, editable);
-          original_data = editable;
-          Object.assign(original_data, editable);
-          Toastify({
-            text: $_("runner-updated"),
-            duration: 2500,
-            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-          }).showToast();
-        })
-        .catch((err) => {});
-    } else {
-    }
-  }
-  function deleteRunner() {
-    RunnerService.runnerControllerRemove(original_data.id, true)
-      .then((resp) => {
-        location.replace("./");
-      })
-      .catch((err) => {});
-  }
-</script>
-
-{#await runner_promise}
-  {$_('loading-runners')}
-{:then}
-  <section class="container p-5 select-none">
-    <div class="flex flex-row mb-4">
-      <div class="w-full">
-        <nav class="w-full flex">
-          <ol class="list-none flex flex-row items-center justify-start">
-            <li class="flex items-center">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                class="flex-shrink-0 w-5 h-5 mr-2"
-                fill="currentColor"
-                width="24"
-                height="24"><path fill="none" d="M0 0h24v24H0z" />
-                <path
-                  d="M9.83 8.79L8 9.456V13H6V8.05h.015l5.268-1.918c.244-.093.51-.14.782-.131a2.616 2.616 0 0 1 2.427 1.82c.186.583.356.977.51 1.182A4.992 4.992 0 0 0 19 11v2a6.986 6.986 0 0 1-5.402-2.547l-.581 3.297L15 15.67V23h-2v-5.986l-2.05-1.987-.947 4.298-6.894-1.215.348-1.97 4.924.868L9.83 8.79zM13.5 5.5a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" /></svg>
-            </li>
-            <li class="flex items-center">
-              <a class="mr-2" href="./">{$_('runners')}</a><svg
-                stroke="currentColor"
-                fill="none"
-                stroke-width="2"
-                viewBox="0 0 24 24"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                class="h-3 w-3 mr-2 stroke-current"
-                height="1em"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"><line
-                  x1="5"
-                  y1="12"
-                  x2="19"
-                  y2="12" />
-                <polyline points="12 5 19 12 12 19" /></svg>
-            </li>
-            <li class="flex items-center">
-              <span class="mr-2">{original_data.firstname}
-                {original_data.middlename || ''}
-                {original_data.lastname}</span>
-            </li>
-          </ol>
-        </nav>
-      </div>
-    </div>
-    <div class="mb-8 text-3xl font-extrabold leading-tight">
-      {original_data.firstname}
-      {original_data.middlename || ''}
-      {original_data.lastname}
-      <span data-id="runner_actions_${editable.id}">
-        {#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:DELETE')}
-          {#if delete_triggered}
-            <button
-              on:click={deleteRunner}
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('confirm-deletion')}</button>
-            <button
-              on:click={() => {
-                delete_triggered = !delete_triggered;
-              }}
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm">{$_('cancel')}</button>
-          {/if}
-          {#if !delete_triggered}
-            <button
-              on:click={() => {
-                delete_triggered = true;
-              }}
-              type="button"
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('delete-runner')}</button>
-          {/if}
-        {/if}
-        {#if !delete_triggered}
-          <button
-            disabled={!save_enabled}
-            class:opacity-50={!save_enabled}
-            type="button"
-            on:click={submit}
-            class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('save-changes')}</button>
-        {/if}
-      </span>
-    </div>
-    <!--  -->
-    <div class="text-sm w-full">
-      <label
-        for="firstname"
-        class="font-medium text-gray-700">{$_('first-name')}</label>
-      <input
-        autocomplete="off"
-        placeholder={$_('first-name')}
-        type="text"
-        class:border-red-500={!isFirstnameValid}
-        class:focus:border-red-500={!isFirstnameValid}
-        class:focus:ring-red-500={!isFirstnameValid}
-        bind:value={editable.firstname}
-        name="firstname"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
-      {#if !isFirstnameValid}
-        <span
-          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-          {$_('first-name-is-required')}
-        </span>
-      {/if}
-    </div>
-    <div class="text-sm w-full">
-      <label
-        for="middlename"
-        class="font-medium text-gray-700">{$_('middle-name')}</label>
-      <input
-        autocomplete="off"
-        placeholder={$_('middle-name')}
-        type="text"
-        bind:value={editable.middlename}
-        name="middlename"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
-    </div>
-    <div class="text-sm w-full">
-      <label
-        for="lastname"
-        class="font-medium text-gray-700">{$_('last-name')}</label>
-      <input
-        autocomplete="off"
-        placeholder={$_('last-name')}
-        type="text"
-        bind:value={editable.lastname}
-        class:border-red-500={!isLastnameValid}
-        class:focus:border-red-500={!isLastnameValid}
-        class:focus:ring-red-500={!isLastnameValid}
-        name="lastname"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
-      {#if !isLastnameValid}
-        <span
-          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-          {$_('last-name-is-required')}
-        </span>
-      {/if}
-    </div>
-    <div class="text-sm w-full">
-      <label
-        for="email"
-        class="font-medium text-gray-700">{$_('e-mail-adress')}</label>
-      <input
-        autocomplete="off"
-        placeholder={$_('e-mail-adress')}
-        type="email"
-        bind:value={editable.email}
-        class:border-red-500={!isEmailValid}
-        class:focus:border-red-500={!isEmailValid}
-        class:focus:ring-red-500={!isEmailValid}
-        name="email"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
-      {#if !isEmailValid}
-        <span
-          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-          {$_('valid-email-is-required')}
-        </span>
-      {/if}
-    </div>
-    <div class="text-sm w-full">
-      <label for="phone" class="font-medium text-gray-700">{$_('phone')}</label>
-      <input
-        autocomplete="off"
-        placeholder={$_('phone')}
-        type="tel"
-        bind:value={editable.phone}
-        name="phone"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
-    </div>
-    <div class="text-sm w-full">
-      <span class="font-medium text-gray-700">{$_('group')}</span>
-      <select
-        bind:value={editable.group}
-        name="team"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2">
-        {#each teams as team}
-          <option value={team.id}>
-            {team.parentGroup.name}
-            &gt;
-            {team.name}
-          </option>
-        {/each}
-        {#each orgs as org}
-          <option value={org.id}>{org.name}</option>
-        {/each}
-      </select>
-    </div>
-    <div class="text-sm w-full">
-      <span class="font-medium text-gray-700">{$_('distance')}</span>
-      <br />
-      <span class="text-gray-700">{original_data.distance} km</span>
-    </div>
-  </section>
-{:catch error}
-  <PromiseError {error} />
-{/await}

src/components/Runners.svelte

@@ -2,17 +2,15 @@
   import { _ } from "svelte-i18n";
   import store from "../store";
   import AddRunnerModal from "./AddRunnerModal.svelte";
-  import ImportRunnerModal from "./ImportRunnerModal.svelte";
   import RunnersOverview from "./RunnersOverview.svelte";
-  let current_runners = [];
   export let modal_open = false;
-  export let import_modal_open = false;
+  let current_runners = [];
 </script>
 
 <section class="container p-5">
   <span class="mb-1 text-3xl font-extrabold leading-tight">
     {$_('runners')}
-    {#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:CREATE')}
+    {#if store.state.jwtinfo.userdetails.permissions.includes('USER:CREATE')}
       <button
         on:click={() => {
           modal_open = true;
@@ -21,28 +19,12 @@
         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">
         Läufer hinzufügen
       </button>
-      <button
-        on:click={() => {
-          import_modal_open = true;
-        }}
-        type="button"
-        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
-        Läufer importieren
-      </button>
     {/if}
   </span>
+  <p class="mb-8 text-lg text-gray-500">läuft bei ihnen</p>
   <RunnersOverview bind:current_runners />
 </section>
 
-{#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:CREATE')}
+{#if store.state.jwtinfo.userdetails.permissions.includes('USER:CREATE')}
   <AddRunnerModal bind:current_runners bind:modal_open />
-  <ImportRunnerModal
-    on:cancelDelete={(event) => {
-      import_modal_open = false;
-    }}
-    passed_team={{}}
-    passed_orgs={[]}
-    passed_org={{}}
-    opened_from="RunnerOverview"
-    bind:import_modal_open />
 {/if}

src/components/RunnersOverview.svelte

@@ -37,25 +37,25 @@
               <th
                 scope="col"
                 class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                {$_('name')}
+                Name
               </th>
               <th
                 scope="col"
                 class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                {$_('contact-information')}
+                Contact Information
               </th>
               <th
                 scope="col"
                 class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                {$_('group')}
+                Group
               </th>
               <th
                 scope="col"
                 class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                {$_('distance-in-km')}
+                Distance in km
               </th>
               <th scope="col" class="relative px-6 py-3">
-                <span class="sr-only">{$_('action')}</span>
+                <span class="sr-only">Action</span>
               </th>
             </tr>
           </thead>
@@ -69,7 +69,8 @@
                   <td class="px-6 py-4 whitespace-nowrap">
                     <div class="flex items-center">
                       <div class="ml-4">
-                        <div class="text-sm font-medium text-gray-900">
+                        <div
+                          class="text-sm font-medium text-gray-900 dark:text-gray-100">
                           {runner.firstname}
                           {runner.middlename || ''}
                           {runner.lastname}
@@ -110,7 +111,8 @@
                             });
                         }}
                         tabindex="0"
-                        class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
+                        class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">Confirm
+                        Delete</button>
                     </td>
                   {:else}
                     <td
@@ -124,7 +126,7 @@
                             active_deletes[runner.id] = true;
                           }}
                           tabindex="0"
-                          class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('delete')}</button>
+                          class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">Delete</button>
                       {/if}
                     </td>
                   {/if}

src/components/StatCards.svelte

@@ -18,7 +18,7 @@
     class="flex flex-col lg:flex-row w-full lg:space-x-2 space-y-2 lg:space-y-0 mb-2 lg:mb-4">
     <a href="/runners/" class="w-full lg:w-1/4">
       <div
-        class="widget w-full p-4 rounded-lg bg-white border border-grey-100">
+        class="widget w-full p-4 rounded-lg bg-white border border-grey-100 dark:bg-grey-895 dark:border-grey-890 dark:bg-gray-900 dark:text-white">
         <div class="flex flex-row items-center justify-between">
           <div class="flex flex-col">
             <div class="text-xs uppercase font-light text-grey-500">
@@ -39,7 +39,7 @@
     </a>
     <div class="w-full lg:w-1/4">
       <div
-        class="widget w-full p-4 rounded-lg bg-white border border-grey-100">
+        class="widget w-full p-4 rounded-lg bg-white border border-grey-100 dark:bg-grey-895 dark:border-grey-890 dark:bg-gray-900 dark:text-white">
         <div class="flex flex-row items-center justify-between">
           <div class="flex flex-col">
             <div class="text-xs uppercase font-light text-grey-500">
@@ -64,7 +64,7 @@
     </div>
     <div class="w-full lg:w-1/4">
       <div
-        class="widget w-full p-4 rounded-lg bg-white border border-grey-100">
+        class="widget w-full p-4 rounded-lg bg-white border border-grey-100 dark:bg-grey-895 dark:border-grey-890 dark:bg-gray-900 dark:text-white">
         <div class="flex flex-row items-center justify-between">
           <div class="flex flex-col">
             <div class="text-xs uppercase font-light text-grey-500">
@@ -83,7 +83,7 @@
     </div>
     <div class="w-full lg:w-1/4">
       <div
-        class="widget w-full p-4 rounded-lg bg-white border border-grey-100">
+        class="widget w-full p-4 rounded-lg bg-white border border-grey-100 dark:bg-grey-895 dark:border-grey-890 dark:bg-gray-900 dark:text-white">
         <div class="flex flex-row items-center justify-between">
           <div class="flex flex-col">
             <div class="text-xs uppercase font-light text-grey-500">
@@ -106,7 +106,7 @@
     </div>
     <a href="/teams/" class="w-full lg:w-1/4">
       <div
-        class="widget w-full p-4 rounded-lg bg-white border border-grey-100">
+        class="widget w-full p-4 rounded-lg bg-white border border-grey-100 dark:bg-grey-895 dark:border-grey-890 dark:bg-gray-900 dark:text-white">
         <div class="flex flex-row items-center justify-between">
           <div class="flex flex-col">
             <div class="text-xs uppercase font-light text-grey-500">
@@ -135,7 +135,7 @@
     </a>
     <a href="/orgs/" class="w-full lg:w-1/4">
       <div
-        class="widget w-full p-4 rounded-lg bg-white border border-grey-100">
+        class="widget w-full p-4 rounded-lg bg-white border border-grey-100 dark:bg-grey-895 dark:border-grey-890 dark:bg-gray-900 dark:text-white">
         <div class="flex flex-row items-center justify-between">
           <div class="flex flex-col">
             <div class="text-xs uppercase font-light text-grey-500">

src/components/TeamDetail.svelte

@@ -1,12 +1,11 @@
 <script>
   import {
-    RunnerOrganizationService,
+    RunnerOrganisationService,
     RunnerTeamService,
   } from "@odit/lfk-client-js";
   import { _ } from "svelte-i18n";
   import Toastify from "toastify-js";
   import store from "../store";
-  import ImportRunnerModal from "./ImportRunnerModal.svelte";
   import PromiseError from "./PromiseError.svelte";
   import ConfirmTeamDeletion from "./ConfirmTeamDeletion.svelte";
   export let params;
@@ -17,7 +16,6 @@
     [],
     false,
   ];
-  export let import_modal_open = false;
   $: delete_triggered = false;
   $: save_enabled = !data_changed;
   $: data_loaded = false;
@@ -30,7 +28,7 @@
     teamdata = Object.assign(teamdata, value);
     original = Object.assign(original, value);
   });
-  RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
+  RunnerOrganisationService.runnerOrganisationControllerGetAll().then((val) => {
     orgs = val;
   });
   function deleteTeam() {
@@ -73,31 +71,12 @@
   }
 </script>
 
-<ImportRunnerModal
-  on:cancelDelete={(event) => {
-    import_modal_open = false;
-  }}
-  passed_team={teamdata}
-  passed_orgs={[]}
-  passed_org={{}}
-  opened_from="TeamDetail"
-  bind:import_modal_open />
 <ConfirmTeamDeletion bind:modal_open bind:delete_team />
 {#if data_loaded}
   <section class="container p-5">
     <div class="mb-8 text-3xl font-extrabold leading-tight">
       {original.name}
       <span data-id="org_actions_${teamdata.id}">
-        {#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:IMPORT')}
-          <button
-            on:click={() => {
-              import_modal_open = true;
-            }}
-            type="button"
-            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
-            {$_('import-runners')}
-          </button>
-        {/if}
         {#if store.state.jwtinfo.userdetails.permissions.includes('TEAM:DELETE')}
           {#if delete_triggered}
             <button
@@ -209,7 +188,7 @@
         type="text"
         bind:value={teamdata.name}
         name="name"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2" />
     </div>
     <div class="text-sm w-full">
       <label
@@ -221,14 +200,14 @@
         type="text"
         bind:value={teamdata.contact}
         name="contact"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2" />
     </div>
     <div class="text-sm w-full">
       <label for="org" class="font-medium text-gray-700">Parent Organization</label>
       <select
         name="org"
         bind:value={teamdata.parentGroup}
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2">
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2">
         {#each orgs as o}
           <option value={o.id}>{o.name}</option>
         {/each}

src/components/TeamsOverview.svelte

@@ -81,7 +81,7 @@
                     <div class="flex items-center">
                       <div class="ml-4">
                         <div
-                          class="text-sm font-medium text-gray-900">
+                          class="text-sm font-medium text-gray-900 dark:text-gray-100">
                           {t.name}
                         </div>
                       </div>
@@ -91,7 +91,7 @@
                     <div class="flex items-center">
                       <div class="ml-4">
                         <div
-                          class="text-sm font-medium text-gray-900">
+                          class="text-sm font-medium text-gray-900 dark:text-gray-100">
                           {#if t.parentGroup}
                             {t.parentGroup.name}
                           {:else}no organization specified{/if}
@@ -103,7 +103,7 @@
                     <div class="flex items-center">
                       <div class="ml-4">
                         <div
-                          class="text-sm font-medium text-gray-900">
+                          class="text-sm font-medium text-gray-900 dark:text-gray-100">
                           {#if t.contact}
                             {JSON.stringify(t.contact)}
                           {:else}no contact specified{/if}

src/components/UserDetail.svelte

@@ -2,63 +2,31 @@
   import { _ } from "svelte-i18n";
   import lodashIsEqual from "lodash.isequal";
   import store from "../store";
-  import { UserService, UserGroupService } from "@odit/lfk-client-js";
+  import {
+    UserService,
+    UserGroupService,
+    PermissionService,
+  } from "@odit/lfk-client-js";
   import Toastify from "toastify-js";
   import PromiseError from "./PromiseError.svelte";
   export let params;
   const user_promise = UserService.userControllerGetOne(params.userid);
   let data_loaded = false;
-  let usergroups_array_original = [];
-  const colors = [
-    "#f3558e",
-    "#17b978",
-    "#3498db",
-    "#3f3b3b",
-    "#775ada",
-    "#7ed6df_#000000",
-    "#000000",
-    "#21e6c1_#000000",
-    "#c0392b",
-    "#d35400",
-    "#7f8c8d",
-    "#6ab04c",
-    "#4834d4",
-    "#ff1f5a",
-    "#eac100",
-  ];
-  let matched_colors = [];
   $: delete_triggered = false;
   $: original_data = {};
   $: editable_userdata = {};
+  $: allpermissions = [];
   $: allgroups = [];
   $: allgroups_ids = [];
+  $: usergroups_array_objects = [];
   $: usergroups_array = [];
-  $: search_permission = "";
+  let usergroups_array_original = [];
   user_promise.then((data) => {
-    let current_target = "";
-    let colorindex = -1;
-    // alphabetically sort permissions for color compatibility for target
-    data.permissions = data.permissions.sort();
-    data.permissions.forEach((p) => {
-      const target = p.split(":")[0];
-      if (current_target !== p.split(":")[0]) {
-        colorindex++;
-        current_target = p.split(":")[0];
-      }
-      let background = colors[colorindex];
-      let foreground = "#fff";
-      if (background.includes("_")) {
-        foreground = background.split("_")[1];
-        background = background.split("_")[0];
-      }
-      matched_colors[target] = [background, foreground];
-    });
-    //
     data_loaded = true;
     original_data = Object.assign(original_data, data);
     editable_userdata = data;
     data.groups.forEach((g) => {
-      usergroups_array = usergroups_array.concat([g.id]);
+      usergroups_array=usergroups_array.concat([g.id]);
     });
     usergroups_array_original = usergroups_array;
     allgroups.forEach((g) => {
@@ -68,28 +36,37 @@
   UserGroupService.userGroupControllerGetAll().then((data) => {
     allgroups = data;
   });
+  const permissions_promise = PermissionService.permissionControllerGetAll();
+  permissions_promise.then((data) => {
+    data.forEach((p) => {
+      allpermissions=allpermissions.concat([p.target + ":" + p.action])
+    });
+  });
   $: changes_performed = !lodashIsEqual(original_data, editable_userdata);
-  $: groups_changed =
+  $: groups_changed = JSON.stringify(usergroups_array)===JSON.stringify(usergroups_array_original);
-    JSON.stringify(usergroups_array) ===
+  $: save_enabled = changes_performed||!groups_changed;
-    JSON.stringify(usergroups_array_original);
-  $: save_enabled = changes_performed || !groups_changed;
   function submit() {
+    if (
+      !lodashIsEqual(original_data.permissions, editable_userdata.permissions)
+    ) {
+      // TODO: add+delete permissions
+    }
     if (data_loaded === true && save_enabled) {
-      editable_userdata.groups = usergroups_array;
+      let tmp=[];
+      usergroups_array.forEach(g => {
+        const group=allgroups.find(obj=>obj.id===g);
+        tmp.push(group);
+      });
+      editable_userdata.groups=tmp;
       Toastify({
         text: $_("updating-user"),
         duration: 2500,
       }).showToast();
       UserService.userControllerPut(original_data.id, editable_userdata)
         .then((resp) => {
-          Object.assign(original_data, resp);
+          Object.assign(original_data, editable_userdata);
-          Object.assign(editable_userdata, resp);
+          original_data = editable_userdata;
-          original_data.permissions = resp.permissions;
+          Object.assign(original_data, editable_userdata);
-          usergroups_array = [];
-          resp.groups.forEach((g) => {
-            usergroups_array = usergroups_array.concat([g.id]);
-          });
-          usergroups_array_original = usergroups_array;
           //
           Toastify({
             text: $_("user-updated"),
@@ -97,7 +74,9 @@
             backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
           }).showToast();
         })
-        .catch((err) => {});
+        .catch((err) => {
+        });
+    } else {
     }
   }
   function deleteUser() {
@@ -105,7 +84,8 @@
       .then((resp) => {
         location.replace("./");
       })
-      .catch((err) => {});
+      .catch((err) => {
+      });
   }
 </script>
 
@@ -155,7 +135,7 @@
         </nav>
       </div>
     </div>
-    <div class="mb-8 text-3xl font-extrabold">
+    <div class="mb-8 text-3xl font-extrabold leading-tight">
       {original_data.firstname}
       {original_data.middlename || ''}
       {original_data.lastname}
@@ -190,30 +170,31 @@
         {/if}
       </span>
     </div>
-    <div class="mt-3 text-sm w-full">
+    <div class="mt-2 flex items-center">
-      <p class="ml-1 font-medium text-gray-700">Profile Picture</p>
       <img
         alt={$_('profile-picture')}
-        class="h-20 w-20 rounded-full overflow-hidden bg-gray-100"
+        class="inline-block h-20 w-20 rounded-full overflow-hidden bg-gray-100"
         src={editable_userdata.profilePic} />
+      <button
+        type="button"
+        class="ml-5 bg-white py-2 px-3 border border-gray-300 rounded-md shadow-sm text-sm leading-4 font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Change</button>
     </div>
+    <!--  -->
     <div class="mt-3 text-sm w-full">
+      <input
+        id="enabled"
+        on:change={() => {
+          editable_userdata.enabled = !editable_userdata.enabled;
+          // TODO: this reactive set does not work?
+        }}
+        name="enabled"
+        type="checkbox"
+        checked={editable_userdata.enabled}
+        class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
       <label
         for="enabled"
         class="ml-1 font-medium text-gray-700">Active?</label>
-      <br />
+      <p class="text-gray-500">set the user active/ inactive</p>
-      <p class="text-gray-500">
-        <input
-          id="enabled"
-          on:change={() => {
-            editable_userdata.enabled = !editable_userdata.enabled;
-          }}
-          name="enabled"
-          type="checkbox"
-          checked={editable_userdata.enabled}
-          class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
-        set the user active/ inactive
-      </p>
     </div>
     <div class="text-sm w-full">
       <label
@@ -291,29 +272,61 @@
         {/each}
       </select>
     </div>
-    <div class="text-sm w-full mt-8">
+    <div class="text-sm w-full">
-      <p class="font-medium mb-4">
+      <span class="font-medium">Permissions</span>
-        {$_('permissions')}
+      <div class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center">
-        <a
+        <!--  -->
-          class="px-4 py-2 bg-gray-500 rounded-md text-white"
+        <div class="flex flex-wrap -mx-1 overflow-hidden">
-          href="/users/{params.userid}/permissions/">{$_('edit-permissions')}</a>
+          <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
-      </p>
+            verfügbare
-      <div class="w-full sm:my-px sm:px-px sm:w-1/2">
+          </div>
-        <input
+          <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">erteilte</div>
-          autocomplete="off"
+        </div>
-          placeholder="Search for permission"
+        <!--  -->
-          type="text"
+        <div class="flex flex-wrap -mx-1 overflow-hidden">
-          bind:value={search_permission}
+          {#if allpermissions.length > 0}
-          class="mt-4 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2" />
+            <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
+              <div
+                class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center">
+                {#each allpermissions as p}
+                  {#if !editable_userdata.permissions.includes(p)}
+                    <p
+                      class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 bg-gray-200 p-2 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input">
+                      {p}
+                      <button
+                        on:click={() => {
+                          editable_userdata.permissions.push(p);
+                          editable_userdata.permissions = editable_userdata.permissions;
+                        }}
+                        type="button"
+                        class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-200 text-base font-medium text-black hover:bg-green-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 sm:ml-3 sm:w-auto sm:text-sm">+</button>
+                    </p>
+                  {/if}
+                {/each}
+              </div>
+            </div>
+            <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
+              <div
+                class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center">
+                {#each allpermissions as p}
+                  {#if editable_userdata.permissions.includes(p)}
+                    <p
+                      class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 bg-gray-200 p-2 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input">
+                      {p}
+                      <button
+                        on:click={() => {
+                          editable_userdata.permissions = editable_userdata.permissions.filter((obj) => obj !== p);
+                        }}
+                        type="button"
+                        class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-300 text-base font-medium text-black hover:bg-red-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm">-</button>
+                    </p>
+                  {/if}
+                {/each}
+              </div>
+            </div>
+          {/if}
+        </div>
       </div>
-      {#each original_data.permissions as p}
-        {#if p.toLowerCase().includes(search_permission.toLowerCase())}
-          <span
-            style="background:{matched_colors[p.split(':')[0]][0]};color:{matched_colors[p.split(':')[0]][1]};"
-            class="mt-1 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-indigo-100 rounded">{p}</span>
-          <!--  -->
-        {/if}
-      {/each}
     </div>
   </section>
 {:catch error}

src/components/UserPermissions.svelte

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

src/components/UsersEmptyState.svelte

@@ -1,13 +1,11 @@
 <script>
   import { _ } from "svelte-i18n";
   import AddUserModal from "./AddUserModal.svelte";
-  import users_empty from "./users_empty.svg";
   let modal_open = false;
 </script>
 
 <div class="text-center items-center justify-center">
   <p class="mb-16 text-lg text-gray-500">
-    <img class="w-full h-44" src={users_empty} alt="" />
     <span class="font-bold">There are no users added yet.</span><br />
     <span>Add your first user</span>
   </p>

src/components/UsersOverview.svelte

@@ -29,17 +29,17 @@
     {#if current_users.length === 0}
       <UsersEmptyState />
     {:else}
-      <!-- {#if advanced_search}
+      {#if advanced_search}
         advanced search
-      {:else} -->
+      {:else}
         <input
           type="search"
           bind:value={searchvalue}
           placeholder={$_('datatable.search')}
           aria-label={$_('datatable.search')}
           class="gridjs-input gridjs-search-input mb-4" />
-      <!-- {/if} -->
+      {/if}
-      <!-- <button
+      <button
         on:click={() => {
           advanced_search = !advanced_search;
         }}
@@ -48,7 +48,7 @@
         {#if advanced_search}
           toggle simple search
         {:else}toggle advanced search{/if}
-      </button> -->
+      </button>
       <div
         class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
         <table class="divide-y divide-gray-200 w-full">
@@ -93,7 +93,7 @@
                       {/if}
                       <div class="ml-4">
                         <div
-                          class="text-sm font-medium text-gray-900">
+                          class="text-sm font-medium text-gray-900 dark:text-gray-100">
                           {u.firstname}
                           {u.middlename || ''}
                           {u.lastname}

src/locales/de.json

@@ -2,17 +2,10 @@
     "404message": "Die gesuchte Seite wurde leider nicht gefunden.",
     "404title": "Fehler 404",
     "about": "Über",
-    "application_name": "Lauf für Kaya! - Admin",
+    "application_name": "Lauf für Kaya! \n- Admin",
-    "bitte-bestaetige-diese-laeufer-fuer-den-import": "Bitte die Läufer für den import bestätigen.",
     "by": "von",
-    "cancel": "Abbrechen",
     "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.",
     "credits": "",
-    "csv_import__class": "Klasse",
-    "csv_import__firstname": "Vorname",
-    "csv_import__lastname": "Nachname",
-    "csv_import__middlename": "Mittelname",
-    "csv_import__team": "Team",
     "dashboard-greeting": "Moin",
     "datatable": {
         "search": "🔍 Suche ...",
@@ -34,8 +27,6 @@
     "goback": "Zur Startseite",
     "hallo": "hallo",
     "icon-image-credits": "Wir möchten uns außerdem für die verwendeten Icons und Bilder bedanken bei:",
-    "import-runners": "Läufer importieren",
-    "import__target-organization": "Ziel Organisation",
     "invalid-mail-reset": "Das ist keine gültige E-Mail",
     "lfk-is-os": "Das \"Lauf für Kaya!\" Frontend ist (wie alle anderen Projekte für den \"LfK!\" auch) ein OpenSource Projekt.",
     "log_in": "Anmelden",
@@ -43,11 +34,8 @@
     "login_is_checked": "Login wird überprüft",
     "oss_credit_description": "Wir verwenden eine Menge Open Source-Software bei diesen Projekten und möchten uns bei den folgenden Projekten und Mitwirkenden bedanken, die dazu beitragen, Open Source großartig zu machen!",
     "password": "Passwort",
-    "please-provide-the-required-csv-xlsx-file": "Bitte eine CSV oder XLSX Datei hochladen.",
     "register": "Registrieren",
     "reset-my-password": "Passwort zurücksetzen",
-    "runner-import": "Läufer Import",
-    "runnerimport_verify_runners_org": "Bitte die Läufer für den Import in die Organisation \"{org_name}\" bestätigen",
     "runners": "Läufer",
     "send-a-mail-to-lfk-odit-services": "Sende eine Mail an lfk@odit.services",
     "settings": "Einstellungen",

src/locales/en.json

@@ -7,7 +7,6 @@
     "address": "Address",
     "application_name": "Lauf für Kaya! - Admin",
     "author": "Author",
-    "bitte-bestaetige-diese-laeufer-fuer-den-import": "Please confirm these runners for import",
     "browse": "Browse",
     "by": "by",
     "cancel": "Cancel",
@@ -15,22 +14,14 @@
     "changelog": "Changelog",
     "close": "Close",
     "confirm-delete": "Confirm Delete",
-    "confirm-deletion": "Confirm Deletion",
     "contact": "Contact",
-    "contact-information": "Contact Information",
     "count_organizations": "# Organizations",
     "count_teams": "# Teams",
     "create": "Create",
-    "create-a-new-runner": "Create a new Runner",
     "create-a-new-track": "Create a new Track",
     "create-organization": "Create Organization",
     "create-user": "Create User",
     "credits": "Credits",
-    "csv_import__class": "Class",
-    "csv_import__firstname": "Firstname",
-    "csv_import__lastname": "Lastname",
-    "csv_import__middlename": "Middlename",
-    "csv_import__team": "Team",
     "dashboard-greeting": "hello there",
     "dashboard-title": "Dashboard",
     "datatable": {
@@ -48,19 +39,14 @@
         "no_matching_records_found": "No matching records found",
         "an_error_happened_while_fetching_the_data": "An error happened while fetching the data"
     },
-    "delete": "Delete",
     "delete-organization": "Delete Organization",
-    "delete-runner": "Delete Runner",
     "delete-team": "Delete Team",
     "delete-user": "Delete User",
     "dependency_name": "Name",
-    "distance": "Distance",
-    "distance-in-km": "Distance in km",
     "dont-have-your-email-connected": "Don't have your email connected?",
     "dont-panic-were-resetting-it": "Don't panic, we're resetting it ✌",
     "drag-and-drop-your-files-or": "Drag & Drop your files or",
     "e-mail-adress": "E-Mail Adress",
-    "edit-permissions": "edit permissions",
     "email_address_or_username": "Email / username",
     "error_on_login": "Error on login",
     "faq": "FAQ",
@@ -90,12 +76,9 @@
     "general-stats": "General Stats",
     "general_promise_error": "😢 Error",
     "goback": "Go Home",
-    "group": "Group",
     "groups": "Groups",
     "hallo": "hello",
     "icon-image-credits": "We also want to thank these projects for illustrations and icons:",
-    "import-runners": "Import runners",
-    "import__target-organization": "Target Organization",
     "installed-version": "Installed version",
     "invalid-mail-reset": "the provided email is invalid",
     "last-name": "Last name",
@@ -103,7 +86,6 @@
     "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-runners": "loading runners...",
     "log_in": "Log in",
     "log_in_to_your_account": "Log in to your account",
     "login_is_checked": "Login is being checked...",
@@ -112,7 +94,6 @@
     "manage-admin-users": "manage admin users",
     "middle-name": "Middle name",
     "minimum-lap-time-in-s": "minimum lap time in s",
-    "name": "Name",
     "no-license-text-could-be-found": "No license text could be found 😢",
     "no-tracks-added-yet": "there are no tracks added yet.",
     "organization": "Organization",
@@ -121,29 +102,20 @@
     "oss_credit_description": "We use a lot of open source software on these projects, and would like to thank the following projects and contributors who help make open source great!",
     "password": "Password",
     "password-is-required": "Password is required",
-    "permissions": "Permissions",
-    "phone": "Phone",
-    "please-provide-the-required-csv-xlsx-file": "Please provide the required csv/ xlsx file",
-    "please-provide-the-required-information-to-add-a-new-runner": "Please provide the required information to add a new runner.",
     "please-provide-the-required-information-to-add-a-new-track": "Please provide the required information to add a new track.",
     "profile-picture": "Profile Picture",
     "read-license": "Read License",
     "register": "Register",
     "repo_link": "Link",
     "reset-my-password": "Reset my password",
-    "runner-import": "Runner Import",
-    "runner-updated": "Runner updated!",
-    "runnerimport_verify_runners_org": "Please confirm these runners for import into the organization \"{org_name}\"",
     "runners": "Runners",
     "save-changes": "Save Changes",
     "send-a-mail-to-lfk-odit-services": "send a mail to lfk@odit.services",
     "settings": "Settings",
     "signout": "Sign out",
     "stats-are-being-loaded": "stats are being loaded...",
-    "team": "Team",
     "team-name": "Team name",
     "teams": "Teams",
-    "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...",
     "this-might-take-a-moment": "This might take a moment 👀",
     "total-distance": "total distance",
     "total-donations": "total donations",
@@ -154,7 +126,6 @@
     "track-length-in-m": "Track Length in m",
     "track-name": "Track name",
     "tracks": "Tracks",
-    "updating-runner": "Updating runner...",
     "updating-user": "updating user...",
     "user-updated": "User updated",
     "username": "Username",

svelte.config.js

@@ -0,0 +1 @@
+// this is configured with dev scripts

versionbuilder.js

@@ -1,5 +1,5 @@
 const fs = require('fs');
 const package = JSON.parse(fs.readFileSync(`./package.json`, { encoding: 'utf-8' }));
-const original = fs.readFileSync(`./index.template.html`, { encoding: 'utf-8' });
+const original = fs.readFileSync(`./public/index.html`, { encoding: 'utf-8' });
 let out = original.replace(/RELEASE_INFO-(\S)+-RELEASE_INFO/gi, 'RELEASE_INFO-' + package.version + '-RELEASE_INFO');
-fs.writeFileSync(`./index.template.html`, out);
+fs.writeFileSync(`./public/index.html`, out);