new license file version [CI SKIP]

🐞 fixed merge conflict errors
ref #13 #12
2021-01-26 17:26:12 +00:00 · 2021-01-26 18:25:30 +01:00 · 2021-01-26 18:25:02 +01:00 · 2021-01-26 16:28:59 +00:00 · 2021-01-26 17:28:07 +01:00 · 2021-01-26 17:27:44 +01:00
36 changed files with 1283 additions and 336 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -7,4 +7,5 @@ public/env.js
 public/sw.js
 public/index.html
 public/workbox-*.js
-svelte.config.js
+svelte.config.js
 public/index.html
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -4,8 +4,10 @@
        "christian-kohler.npm-intellisense",
        "remimarsal.prettier-now",
        "svelte.svelte-vscode",
-        "antfu.i18n-ally",
+        "lokalise.i18n-ally",
        "fivethree.vscode-svelte-snippets"
    ],
-    "unwantedRecommendations": []
+    "unwantedRecommendations": [
        "antfu.i18n-ally"
    ]
 }
--- a/index.template.html
+++ b/index.template.html
@@ -14,7 +14,7 @@
 </head>
 <body>
-  <span style="display: none;visibility: hidden;" id="buildinfo">RELEASE_INFO-0.3.1-RELEASE_INFO</span>
+  <span style="display: none;visibility: hidden;" id="buildinfo">RELEASE_INFO-0.4.0-RELEASE_INFO</span>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <script src="/env.js"></script>
  <script defer type="module" src="/_dist_/index.js"></script>
--- a/package.json
+++ b/package.json
@@ -12,7 +12,8 @@
 		"licenses:export": "license-exporter --json -o public"
 	},
 	"dependencies": {
-		"@odit/lfk-client-js": "0.1.1",
+		"@odit/lfk-client-js": "0.3.0",
 		"csvtojson": "^2.0.10",
 		"filepond": "4.25.1",
 		"gridjs": "3.2.2",
 		"localforage": "1.9.0",
@@ -21,22 +22,23 @@
 		"svelte-focus-trap": "1.0.1",
 		"svelte-i18n": "3.3.0",
 		"tailwindcss": "2.0.2",
-		"tinro": "0.5.7",
+		"tinro": "0.5.9",
 		"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.1",
+		"autoprefixer": "10.2.3",
 		"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.31.2",
+		"svelte": "3.32.0",
-		"svelte-preprocess": "4.6.1",
+		"svelte-preprocess": "4.6.3",
 		"workbox-cli": "6.0.2"
 	},
 	"release-it": {
--- a/public/index.html
+++ b/public/index.html
@@ -1 +0,0 @@
 <!-- this is configured with dev scripts -->
--- a/public/licenses.json
+++ b/public/licenses.json
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -48,6 +48,8 @@
  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>
@@ -71,8 +73,13 @@
          <Route path="/">
            <Users />
          </Route>
-          <Route path="/:userid" let:params>
+          <Route path="/:userid/*" let:params>
-            <UserDetail {params} />
+            <Route path="/">
              <UserDetail {params} />
            </Route>
            <Route path="/permissions/">
              <UserPermissions {params} />
            </Route>
          </Route>
        </Route>
        <Route path="/tracks/*">
@@ -81,8 +88,13 @@
          </Route>
          <Route path="/:trackid" let:params />
        </Route>
-        <Route path="/runners">
+        <Route path="/runners/*">
-          <Runners />
+          <Route path="/">
            <Runners />
          </Route>
          <Route path="/:runnerid" let:params>
            <RunnerDetail {params} />
          </Route>
        </Route>
        <Route path="/teams/*">
          <Route path="/">
--- a/src/components/AddOrgModal.svelte
+++ b/src/components/AddOrgModal.svelte
@@ -2,7 +2,7 @@
  import { _ } from "svelte-i18n";
  import { clickOutside } from "./outsideclick";
  import { focusTrap } from "svelte-focus-trap";
-  import { RunnerOrganisationService } from "@odit/lfk-client-js";
+  import { RunnerOrganizationService } 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();
-      RunnerOrganisationService.runnerOrganisationControllerPost({
+      RunnerOrganizationService.runnerOrganizationControllerPost({
        name,
        address: undefined,
        contact: undefined,
--- a/src/components/AddRunnerModal.svelte
+++ b/src/components/AddRunnerModal.svelte
@@ -2,7 +2,11 @@
  import { _ } from "svelte-i18n";
  import { clickOutside } from "./outsideclick";
  import { focusTrap } from "svelte-focus-trap";
-  import { RunnerService, RunnerTeamService } from "@odit/lfk-client-js";
+  import {
    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";
@@ -14,9 +18,13 @@
  let middlename_input;
  let phone_input;
  let email_input;
-  let groups = [];
+  let teams = [];
  RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
-    groups = val;
+    teams = val;
  });
  let orgs = [];
  RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
    orgs = val;
  });
  function focus(el) {
    el.focus();
@@ -28,7 +36,13 @@
  $: firstname_input_value = "";
  $: processed_last_submit = true;
  $: isPhoneValidOrEmpty =
-    isMobilePhone(phone_input_value) || phone_input_value === "";
+    isMobilePhone(
      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;
@@ -140,11 +154,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">
@@ -209,13 +223,20 @@
                <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 dark:bg-gray-900 dark:text-gray-100 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 rounded-md p-2">
-                    {#each groups as g}
+                    {#each teams as team}
-                      <option value={g.id}>{g.name}</option>
+                      <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>
@@ -237,8 +258,7 @@
                  {#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.<br />please enter a
+                      {$_('the-provided-phone-number-is-invalid-less-than-br-greater-than-please-enter-a-valid-international-number')}
                      valid international number...
                    </span>
                  {/if}
                </div>
--- a/src/components/AddTeamModal.svelte
+++ b/src/components/AddTeamModal.svelte
@@ -3,7 +3,7 @@
  import { clickOutside } from "./outsideclick";
  import { focusTrap } from "svelte-focus-trap";
  import {
-    RunnerOrganisationService,
+    RunnerOrganizationService,
    RunnerTeamService,
  } from "@odit/lfk-client-js";
  import Toastify from "toastify-js";
@@ -33,7 +33,7 @@
  })();
  $: parentGroup = undefined;
  $: orgs = [];
-  RunnerOrganisationService.runnerOrganisationControllerGetAll().then((val) => {
+  RunnerOrganizationService.runnerOrganizationControllerGetAll().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 dark:bg-gray-900 dark:text-gray-100 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 rounded-md p-2">
                    {#each orgs as t}
                      <option value={t.id}>{t.name}</option>
                    {/each}
--- a/src/components/AddUserModal.svelte
+++ b/src/components/AddUserModal.svelte
@@ -28,7 +28,10 @@
  $: isLastnameValid = lastname_input_value.trim().length !== 0;
  $: isFirstnameValid = firstname_input_value.trim().length !== 0;
  $: createbtnenabled =
-    isFirstnameValid && isLastnameValid && isEmailValid && isPasswordValid;
+    isFirstnameValid &&
    isLastnameValid &&
    isPasswordValid &&
    !(!isEmailValid && username_input_value.trim().length === 0);
  (function () {
    document.onkeydown = function (e) {
      e = e || window.event;
@@ -50,19 +53,14 @@
        text: "User is being added...",
        duration: -1,
      }).showToast();
-      let postdata={
+      UserService.userControllerPost({
        firstname: firstname_input_value,
        lastname: lastname_input_value,
        middlename: middlename_input_value,
-        password: password_input_value
+        password: password_input_value,
-      };
+        email: email_input_value,
-      if(email_input_value!==""){
+        username: username_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 = "";
@@ -77,7 +75,7 @@
            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
          }).showToast();
          current_users.push(result);
-          current_users=current_users;
+          current_users = current_users;
        })
        .catch((err) => {
          //
@@ -238,18 +236,21 @@
                  <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-is-required')}
+                      valid email or username 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>
--- a/src/components/ComponentDump.svelte
+++ b/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 dark:bg-grey-895 dark:border-grey-890">
+  class="widget w-full p-4 mb-4 rounded-lg bg-white border border-grey-100">
  <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>
--- a/src/components/ConfirmOrgDeletion.svelte
+++ b/src/components/ConfirmOrgDeletion.svelte
@@ -2,7 +2,7 @@
  import { _ } from "svelte-i18n";
  import { clickOutside } from "./outsideclick";
  import { focusTrap } from "svelte-focus-trap";
-  import { RunnerOrganisationService } from "@odit/lfk-client-js";
+  import { RunnerOrganizationService } 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() {
-    RunnerOrganisationService.runnerOrganisationControllerRemove(
+    RunnerOrganizationService.runnerOrganizationControllerRemove(
      delete_org.id,
      true
    )
--- a/src/components/ConversionsChart.svelte
+++ b/src/components/ConversionsChart.svelte
@@ -1,4 +1,4 @@
-<div class="w-full p-4 rounded-lg bg-white border border-grey-100 dark:bg-grey-895 dark:border-grey-890">
+<div class="w-full p-4 rounded-lg bg-white border border-grey-100">
  <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 dark:bg-grey-895 dark:hover:bg-grey-890"
+                  class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
                  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 dark:bg-grey-895 dark:hover:bg-grey-890"
+                  class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
                  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 dark:bg-grey-895 dark:hover:bg-grey-890"
+                  class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
                  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 dark:bg-grey-895 dark:hover:bg-grey-890"
+                  class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
                  href="/">This year</a></li>
            </ul>
          </div>
--- a/src/components/Dash.svelte
+++ b/src/components/Dash.svelte
@@ -323,7 +323,7 @@
      </li>
    </ul>
  </div>
-  <div class="main w-full bg-grey-50 text-grey-900 dark:bg-grey-900 dark:text-white">
+  <div class="main w-full bg-grey-50 text-grey-900">
    <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 dark:bg-grey-895 dark:border-grey-890">
+            class="widget w-full p-4 rounded-lg bg-white border border-grey-100">
            <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 dark:bg-grey-895 dark:border-grey-890">
+            class="widget w-full p-4 rounded-lg bg-white border border-grey-100">
            <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 dark:bg-grey-895 dark:border-grey-890">
+            class="widget w-full p-4 rounded-lg bg-white border border-grey-100">
            <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 dark:bg-grey-895 dark:border-grey-890">
+            class="widget w-full p-4 rounded-lg bg-white border border-grey-100">
            <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 dark:bg-grey-895 dark:border-grey-890">
+          <div class="w-full p-4 rounded-lg bg-white border border-grey-100">
            <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 dark:bg-grey-895 dark:hover:bg-grey-890"
+                            class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
                            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 dark:bg-grey-895 dark:hover:bg-grey-890"
+                            class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
                            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 dark:bg-grey-895 dark:hover:bg-grey-890"
+                            class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
                            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 dark:bg-grey-895 dark:hover:bg-grey-890"
+                            class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
                            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 dark:bg-grey-895 dark:border-grey-890">
+        <div class="w-full p-4 rounded-lg bg-white border border-grey-100">
          <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 dark:text-white">Next</button><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">Last</button>
+                    class="btn btn-default bg-transparent hover:bg-grey-200 text-grey-900">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 dark:bg-grey-800 dark:border-grey-800 outline-none shadow-none focus:shadow-none">
+                  class="hidden lg:block form-select text-sm bg-white 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 dark:bg-grey-895 dark:border-grey-890">
+          <div class="w-full p-4 rounded-lg bg-white border border-grey-100">
            <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 dark:bg-grey-895 dark:hover:bg-grey-890"
+                            class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
                            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 dark:bg-grey-895 dark:hover:bg-grey-890"
+                            class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
                            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 dark:bg-grey-895 dark:hover:bg-grey-890"
+                            class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
                            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 dark:bg-grey-895 dark:hover:bg-grey-890"
+                            class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
                            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 dark:bg-grey-895 dark:border-grey-890">
+          <div class="w-full p-4 rounded-lg bg-white border border-grey-100">
            <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 dark:bg-grey-895 dark:hover:bg-grey-890"
+                            class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
                            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 dark:bg-grey-895 dark:hover:bg-grey-890"
+                            class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
                            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 dark:bg-grey-895 dark:hover:bg-grey-890"
+                            class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
                            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 dark:bg-grey-895 dark:hover:bg-grey-890"
+                            class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
                            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 dark:bg-grey-895 dark:border-grey-890">
+          <div class="w-full p-4 rounded-lg bg-white border border-grey-100">
            <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 dark:bg-grey-895 dark:hover:bg-grey-890"
+                            class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
                            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 dark:bg-grey-895 dark:hover:bg-grey-890"
+                            class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
                            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 dark:bg-grey-895 dark:hover:bg-grey-890"
+                            class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
                            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 dark:bg-grey-895 dark:hover:bg-grey-890"
+                            class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
                            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 dark:bg-grey-800 pointer-events-none"></div>
+                    <div class="h-full w-1 bg-grey-200 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 dark:bg-grey-800 pointer-events-none"></div>
+                    <div class="h-full w-1 bg-grey-200 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 dark:bg-grey-800 pointer-events-none"></div>
+                    <div class="h-full w-1 bg-grey-200 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 dark:bg-grey-800 pointer-events-none"></div>
+                    <div class="h-full w-1 bg-grey-200 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 dark:bg-grey-895 dark:border-grey-890">
+          <div class="w-full p-4 rounded-lg bg-white border border-grey-100">
            <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 dark:bg-grey-895 dark:hover:bg-grey-890"
+                            class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
                            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 dark:bg-grey-895 dark:hover:bg-grey-890"
+                            class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
                            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 dark:bg-grey-895 dark:hover:bg-grey-890"
+                            class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
                            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 dark:bg-grey-895 dark:hover:bg-grey-890"
+                            class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
                            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 dark:bg-grey-800 dark:border-grey-800"
+                      class="form-input text-sm bg-white"
                      placeholder="Add new..."></div>
                </form>
                <div class="flex flex-row items-center justify-between">
--- a/src/components/Dashboard.svelte
+++ b/src/components/Dashboard.svelte
@@ -1,6 +1,7 @@
 <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";
@@ -36,81 +37,91 @@
        </svg>
        <span>{$_('dashboard-title')}</span>
      </a>
-      <a
+      {#if store.state.jwtinfo.userdetails.permissions.includes('ORGANIZATION:GET')}
-        class:bg-gray-100={$router.path.includes('/orgs/')}
+        <a
-        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+          class:bg-gray-100={$router.path.includes('/orgs/')}
-        href="/orgs/">
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
-        <svg
+          href="/orgs/">
-          class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+          <svg
-          fill="currentColor"
+            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
          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"
-            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>
+            xmlns="http://www.w3.org/2000/svg"
-        <span>{$_('users')}</span>
+            viewBox="0 0 24 24"
-      </a>
+            width="24"
-      <a
+            height="24"><path fill="none" d="M0 0h24v24H0z" />
-        class:bg-gray-100={$router.path === '/runners/'}
+            <path
-        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+              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>
-        href="/runners/">
+          <span>{$_('orgs')}</span>
-        <svg
+        </a>
-          xmlns="http://www.w3.org/2000/svg"
+      {/if}
-          viewBox="0 0 24 24"
+      {#if store.state.jwtinfo.userdetails.permissions.includes('USER:GET')}
-          class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+        <a
-          fill="currentColor"
+          class:bg-gray-100={$router.path === '/users/'}
-          width="24"
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
-          height="24"><path fill="none" d="M0 0h24v24H0z" />
+          href="/users/">
-          <path
+          <svg
-            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>
+            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
        <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"
-            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>
+            width="24"
-        <span>{$_('teams')}</span>
+            height="24"
-      </a>
+            xmlns="http://www.w3.org/2000/svg"
-      <a
+            viewBox="0 0 640 512"><path
-        class:bg-gray-100={$router.path === '/tracks/'}
+              fill="currentColor"
-        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+              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>
-        href="/tracks/">
+          <span>{$_('users')}</span>
-        <svg
+        </a>
-          class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+      {/if}
-          fill="currentColor"
+      {#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:GET')}
-          width="24"
+        <a
-          height="24"
+          class:bg-gray-100={$router.path === '/runners/'}
-          xmlns="http://www.w3.org/2000/svg"
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
-          viewBox="0 0 640 512"><path
+          href="/runners/">
          <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"
-            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>
+            width="24"
-        <span>{$_('tracks')}</span>
+            height="24"><path fill="none" d="M0 0h24v24H0z" />
-      </a>
+            <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>
          <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"
--- a/src/components/ImportRunnerModal.svelte
+++ b/src/components/ImportRunnerModal.svelte
@@ -0,0 +1,286 @@
 <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}
--- a/src/components/OrgDetail.svelte
+++ b/src/components/OrgDetail.svelte
@@ -1,9 +1,10 @@
 <script>
-  import { RunnerOrganisationService } from "@odit/lfk-client-js";
+  import { RunnerOrganizationService } 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;
@@ -12,7 +13,7 @@
  let original = {};
  $: data_loaded = false;
  $: data_changed = JSON.stringify(orgdata) === JSON.stringify(original);
-  const promise = RunnerOrganisationService.runnerOrganisationControllerGetOne(
+  const promise = RunnerOrganizationService.runnerOrganizationControllerGetOne(
    params.orgid
  ).then((value) => {
    data_loaded = true;
@@ -21,8 +22,8 @@
  });
  let modal_open = false;
  let delete_org = {};
-  function deleteOrganisation() {
+  function deleteOrganization() {
-    // RunnerOrganisationService.runnerOrganisationControllerRemove(
+    // RunnerOrganizationService.runnerOrganizationControllerRemove(
    //   original.id,
    //   false
    // )
@@ -45,7 +46,7 @@
        text: "updating organization",
        duration: 2500,
      }).showToast();
-      RunnerOrganisationService.runnerOrganisationControllerPut(
+      RunnerOrganizationService.runnerOrganizationControllerPut(
        original.id,
        orgdata
      )
@@ -64,18 +65,38 @@
    } 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={deleteOrganisation}
+              on:click={deleteOrganization}
              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={() => {
@@ -181,7 +202,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 dark:bg-gray-900 dark:text-gray-100 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 rounded-md p-2" />
    </div>
    <div class="text-sm w-full">
      <label
@@ -193,7 +214,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 dark:bg-gray-900 dark:text-gray-100 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 rounded-md p-2" />
    </div>
    <div class="text-sm w-full">
      <label
@@ -205,7 +226,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 dark:bg-gray-900 dark:text-gray-100 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 rounded-md p-2" />
    </div>
  </section>
 {:else}
--- a/src/components/OrgOverview.svelte
+++ b/src/components/OrgOverview.svelte
@@ -2,7 +2,7 @@
  import { _ } from "svelte-i18n";
  let modal_open = false;
  let delete_org = {};
-  import { RunnerOrganisationService } from "@odit/lfk-client-js";
+  import { RunnerOrganizationService } 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 = RunnerOrganisationService.runnerOrganisationControllerGetAll().then(
+  const promise = RunnerOrganizationService.runnerOrganizationControllerGetAll().then(
    (val) => {
      current_organizations = val;
    }
@@ -25,7 +25,7 @@
  }}
  bind:modal_open
  bind:delete_org />
-{#if store.state.jwtinfo.userdetails.permissions.includes('ORGANISATION:GET')}
+{#if store.state.jwtinfo.userdetails.permissions.includes('ORGANIZATION: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 dark:text-gray-100">
+                          class="text-sm font-medium text-gray-900">
                          {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 dark:text-gray-100">
+                          class="text-sm font-medium text-gray-900">
                          {#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 dark:text-gray-100">
+                          class="text-sm font-medium text-gray-900">
                          {#if o.contact}
                            {JSON.stringify(o.contact)}
                          {:else}no contact specified{/if}
@@ -121,7 +121,7 @@
                        Delete</button>
                      <button
                        on:click={() => {
-                          RunnerOrganisationService.runnerOrganisationControllerRemove(o.id, false)
+                          RunnerOrganizationService.runnerOrganizationControllerRemove(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('ORGANISATION:DELETE')}
+                      {#if store.state.jwtinfo.userdetails.permissions.includes('ORGANIZATION:DELETE')}
                        <button
                          on:click={() => {
                            active_deletes[o.id] = true;
--- a/src/components/Orgs.svelte
+++ b/src/components/Orgs.svelte
@@ -4,14 +4,15 @@
  import AddOrgModal from "./AddOrgModal.svelte";
  export let modal_open = false;
  import OrgOverview from "./OrgOverview.svelte";
-  console.log(store.state.jwtinfo.userdetails.permissions);
+  import ImportRunnerModal from "./ImportRunnerModal.svelte";
  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('ORGANISATION:CREATE')}
+    {#if store.state.jwtinfo.userdetails.permissions.includes('ORGANIZATION:CREATE')}
      <button
        on:click={() => {
          modal_open = true;
@@ -21,11 +22,30 @@
        {$_('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('ORGANISATION:CREATE')}
+{#if store.state.jwtinfo.userdetails.permissions.includes('ORGANIZATION: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}
--- a/src/components/Profile.svelte
+++ b/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 dark:bg-grey-895 dark:border-grey-890">
+    class="w-full p-4 mb-4 rounded-lg bg-white border border-grey-100">
    <div class="flex flex-row items-center justify-start p-4">
      <div class="flex-shrink-0 w-24">
        <img
--- a/src/components/RunnerDetail.svelte
+++ b/src/components/RunnerDetail.svelte
@@ -0,0 +1,264 @@
 <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}
--- a/src/components/Runners.svelte
+++ b/src/components/Runners.svelte
@@ -2,15 +2,17 @@
  import { _ } from "svelte-i18n";
  import store from "../store";
  import AddRunnerModal from "./AddRunnerModal.svelte";
  import ImportRunnerModal from "./ImportRunnerModal.svelte";
  import RunnersOverview from "./RunnersOverview.svelte";
  export let modal_open = false;
  let current_runners = [];
  export let modal_open = false;
  export let import_modal_open = false;
 </script>
 <section class="container p-5">
  <span class="mb-1 text-3xl font-extrabold leading-tight">
    {$_('runners')}
-    {#if store.state.jwtinfo.userdetails.permissions.includes('USER:CREATE')}
+    {#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:CREATE')}
      <button
        on:click={() => {
          modal_open = true;
@@ -19,12 +21,28 @@
        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('USER:CREATE')}
+{#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER: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}
--- a/src/components/RunnersOverview.svelte
+++ b/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,8 +69,7 @@
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="flex items-center">
                      <div class="ml-4">
-                        <div
+                        <div class="text-sm font-medium text-gray-900">
                          class="text-sm font-medium text-gray-900 dark:text-gray-100">
                          {runner.firstname}
                          {runner.middlename || ''}
                          {runner.lastname}
@@ -111,8 +110,7 @@
                            });
                        }}
                        tabindex="0"
-                        class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">Confirm
+                        class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
                        Delete</button>
                    </td>
                  {:else}
                    <td
@@ -126,7 +124,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}
--- a/src/components/StatCards.svelte
+++ b/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 dark:bg-grey-895 dark:border-grey-890 dark:bg-gray-900 dark:text-white">
+        class="widget w-full p-4 rounded-lg bg-white border border-grey-100">
        <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 dark:bg-grey-895 dark:border-grey-890 dark:bg-gray-900 dark:text-white">
+        class="widget w-full p-4 rounded-lg bg-white border border-grey-100">
        <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 dark:bg-grey-895 dark:border-grey-890 dark:bg-gray-900 dark:text-white">
+        class="widget w-full p-4 rounded-lg bg-white border border-grey-100">
        <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 dark:bg-grey-895 dark:border-grey-890 dark:bg-gray-900 dark:text-white">
+        class="widget w-full p-4 rounded-lg bg-white border border-grey-100">
        <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 dark:bg-grey-895 dark:border-grey-890 dark:bg-gray-900 dark:text-white">
+        class="widget w-full p-4 rounded-lg bg-white border border-grey-100">
        <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 dark:bg-grey-895 dark:border-grey-890 dark:bg-gray-900 dark:text-white">
+        class="widget w-full p-4 rounded-lg bg-white border border-grey-100">
        <div class="flex flex-row items-center justify-between">
          <div class="flex flex-col">
            <div class="text-xs uppercase font-light text-grey-500">
--- a/src/components/TeamDetail.svelte
+++ b/src/components/TeamDetail.svelte
@@ -1,11 +1,12 @@
 <script>
  import {
-    RunnerOrganisationService,
+    RunnerOrganizationService,
    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;
@@ -16,6 +17,7 @@
    [],
    false,
  ];
  export let import_modal_open = false;
  $: delete_triggered = false;
  $: save_enabled = !data_changed;
  $: data_loaded = false;
@@ -28,7 +30,7 @@
    teamdata = Object.assign(teamdata, value);
    original = Object.assign(original, value);
  });
-  RunnerOrganisationService.runnerOrganisationControllerGetAll().then((val) => {
+  RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
    orgs = val;
  });
  function deleteTeam() {
@@ -71,12 +73,31 @@
  }
 </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
@@ -188,7 +209,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 dark:bg-gray-900 dark:text-gray-100 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 rounded-md p-2" />
    </div>
    <div class="text-sm w-full">
      <label
@@ -200,14 +221,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 dark:bg-gray-900 dark:text-gray-100 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 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 dark:bg-gray-900 dark:text-gray-100 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 rounded-md p-2">
        {#each orgs as o}
          <option value={o.id}>{o.name}</option>
        {/each}
--- a/src/components/TeamsOverview.svelte
+++ b/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 dark:text-gray-100">
+                          class="text-sm font-medium text-gray-900">
                          {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 dark:text-gray-100">
+                          class="text-sm font-medium text-gray-900">
                          {#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 dark:text-gray-100">
+                          class="text-sm font-medium text-gray-900">
                          {#if t.contact}
                            {JSON.stringify(t.contact)}
                          {:else}no contact specified{/if}
--- a/src/components/UserDetail.svelte
+++ b/src/components/UserDetail.svelte
@@ -2,31 +2,63 @@
  import { _ } from "svelte-i18n";
  import lodashIsEqual from "lodash.isequal";
  import store from "../store";
-  import {
+  import { UserService, UserGroupService } from "@odit/lfk-client-js";
    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 = [];
-  let usergroups_array_original = [];
+  $: search_permission = "";
  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) => {
@@ -36,37 +68,28 @@
  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 = JSON.stringify(usergroups_array)===JSON.stringify(usergroups_array_original);
+  $: groups_changed =
-  $: save_enabled = changes_performed||!groups_changed;
+    JSON.stringify(usergroups_array) ===
    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) {
-      let tmp=[];
+      editable_userdata.groups = usergroups_array;
      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, editable_userdata);
+          Object.assign(original_data, resp);
-          original_data = editable_userdata;
+          Object.assign(editable_userdata, resp);
-          Object.assign(original_data, editable_userdata);
+          original_data.permissions = resp.permissions;
          usergroups_array = [];
          resp.groups.forEach((g) => {
            usergroups_array = usergroups_array.concat([g.id]);
          });
          usergroups_array_original = usergroups_array;
          //
          Toastify({
            text: $_("user-updated"),
@@ -74,9 +97,7 @@
            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
          }).showToast();
        })
-        .catch((err) => {
+        .catch((err) => {});
        });
    } else {
    }
  }
  function deleteUser() {
@@ -84,8 +105,7 @@
      .then((resp) => {
        location.replace("./");
      })
-      .catch((err) => {
+      .catch((err) => {});
      });
  }
 </script>
@@ -135,7 +155,7 @@
        </nav>
      </div>
    </div>
-    <div class="mb-8 text-3xl font-extrabold leading-tight">
+    <div class="mb-8 text-3xl font-extrabold">
      {original_data.firstname}
      {original_data.middlename || ''}
      {original_data.lastname}
@@ -170,31 +190,30 @@
        {/if}
      </span>
    </div>
-    <div class="mt-2 flex items-center">
+    <div class="mt-3 text-sm w-full">
      <p class="ml-1 font-medium text-gray-700">Profile Picture</p>
      <img
        alt={$_('profile-picture')}
-        class="inline-block h-20 w-20 rounded-full overflow-hidden bg-gray-100"
+        class="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>
-      <p class="text-gray-500">set the user active/ inactive</p>
+      <br />
      <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
@@ -272,61 +291,29 @@
        {/each}
      </select>
    </div>
-    <div class="text-sm w-full">
+    <div class="text-sm w-full mt-8">
-      <span class="font-medium">Permissions</span>
+      <p class="font-medium mb-4">
-      <div class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center">
+        {$_('permissions')}
-        <!--  -->
+        <a
-        <div class="flex flex-wrap -mx-1 overflow-hidden">
+          class="px-4 py-2 bg-gray-500 rounded-md text-white"
-          <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
+          href="/users/{params.userid}/permissions/">{$_('edit-permissions')}</a>
-            verfügbare
+      </p>
-          </div>
+      <div class="w-full sm:my-px sm:px-px sm:w-1/2">
-          <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">erteilte</div>
+        <input
-        </div>
+          autocomplete="off"
-        <!--  -->
+          placeholder="Search for permission"
-        <div class="flex flex-wrap -mx-1 overflow-hidden">
+          type="text"
-          {#if allpermissions.length > 0}
+          bind:value={search_permission}
-            <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
+          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="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}
--- a/src/components/UserPermissions.svelte
+++ b/src/components/UserPermissions.svelte
@@ -0,0 +1,241 @@
 <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}
--- a/src/components/UsersEmptyState.svelte
+++ b/src/components/UsersEmptyState.svelte
@@ -1,11 +1,13 @@
 <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>
--- a/src/components/UsersOverview.svelte
+++ b/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 dark:text-gray-100">
+                          class="text-sm font-medium text-gray-900">
                          {u.firstname}
                          {u.middlename || ''}
                          {u.lastname}
--- a/src/components/users_empty.svg
+++ b/src/components/users_empty.svg
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -2,10 +2,17 @@
    "404message": "Die gesuchte Seite wurde leider nicht gefunden.",
    "404title": "Fehler 404",
    "about": "Über",
-    "application_name": "Lauf für Kaya! \n- Admin",
+    "application_name": "Lauf für Kaya! - 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 ...",
@@ -27,6 +34,8 @@
    "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",
@@ -34,8 +43,11 @@
    "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",
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -7,6 +7,7 @@
    "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",
@@ -14,14 +15,22 @@
    "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": {
@@ -39,14 +48,19 @@
        "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",
@@ -76,9 +90,12 @@
    "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",
@@ -86,6 +103,7 @@
    "lfk-is-os": "The \"Lauf für Kaya!\" Frontend is (like all other projects for the \"LfK!\" Also) an open source project.",
    "license": "License",
    "licenses-are-being-loaded": "Licenses are being loaded...",
    "loading-runners": "loading runners...",
    "log_in": "Log in",
    "log_in_to_your_account": "Log in to your account",
    "login_is_checked": "Login is being checked...",
@@ -94,6 +112,7 @@
    "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",
@@ -102,20 +121,29 @@
    "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",
@@ -126,6 +154,7 @@
    "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",
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -1 +0,0 @@
 // this is configured with dev scripts
--- a/versionbuilder.js
+++ b/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(`./public/index.html`, { encoding: 'utf-8' });
+const original = fs.readFileSync(`./index.template.html`, { encoding: 'utf-8' });
 let out = original.replace(/RELEASE_INFO-(\S)+-RELEASE_INFO/gi, 'RELEASE_INFO-' + package.version + '-RELEASE_INFO');
-fs.writeFileSync(`./public/index.html`, out);
+fs.writeFileSync(`./index.template.html`, out);
Author	SHA1	Message	Date
Philipp Dormann	3d30734dc2	new license file version [CI SKIP]	2021-01-26 17:26:12 +00:00
Philipp Dormann	cbc1d53cc2	🐞 fixed merge conflict errors All checks were successful continuous-integration/drone/push Build is passing Details ref #13 #12	2021-01-26 18:25:30 +01:00
Philipp Dormann	9a1f7a13f8	⏫ general dependency bump	2021-01-26 18:25:02 +01:00
Philipp Dormann	d48b9b7f91	Merge pull request 'feature/12-user-management' (#39 ) from feature/12-user-management into dev All checks were successful continuous-integration/drone/push Build is passing Details Reviewed-on: #39 close #12	2021-01-26 16:28:59 +00:00
Philipp Dormann	358865dc6a	UserDetail - update permission badges on change save ref #12	2021-01-26 17:28:07 +01:00
Philipp Dormann	e750c37473	🌎 UserDetail - more i18n keys ref #12	2021-01-26 17:27:44 +01:00
Philipp Dormann	71a589c10c	Merge branch 'dev' into feature/12-user-management # Conflicts: # src/App.svelte	2021-01-26 17:00:21 +01:00
Philipp Dormann	3281239ff5	new license file version [CI SKIP]	2021-01-26 15:59:14 +00:00
Philipp Dormann	3e2cdddd5a	Merge pull request 'feature/13-runner-management' (#42 ) from feature/13-runner-management into dev All checks were successful continuous-integration/drone/push Build is passing Details Reviewed-on: #42 close #13	2021-01-26 15:58:28 +00:00
Philipp Dormann	1d4c3e51c7	Merge branch 'dev' into feature/13-runner-management	2021-01-26 15:57:55 +00:00
Philipp Dormann	1694c71528	AddRunnerModal - improved team select ref #13	2021-01-26 16:54:15 +01:00
Philipp Dormann	169ffc1b0b	🌎 added more i18n keys ref #13	2021-01-26 16:53:59 +01:00
Philipp Dormann	89eb3259d4	Merge pull request 'added permissions to dashboard sidebar' (#41 ) from feature/40-dynamic-sidebar-options into dev All checks were successful continuous-integration/drone/push Build is passing Details Reviewed-on: #41 close #41	2021-01-26 15:42:02 +00:00
Philipp Dormann	ffd88ffc66	🐞 alphabetically sort permission targets in UserDetail ref #39 ref #12	2021-01-25 20:56:20 +01:00
Philipp Dormann	6c2d13bd17	🌎 last i18n keys ref #13	2021-01-25 20:39:34 +01:00
Philipp Dormann	8d92a75ef0	🏃‍♂️ support for runner group edit ref #13	2021-01-25 20:39:22 +01:00
Philipp Dormann	acb86ae266	added permissions to dashboard sidebar ref #40	2021-01-25 20:20:58 +01:00
Nicolai Ort	473cf978b4	Merge branch 'dev' into feature/12-user-management # Conflicts: # src/components/UserDetail.svelte	2021-01-24 21:50:38 +01:00
Philipp Dormann	4debab2636	Merge branch 'dev' into feature/13-runner-management # Conflicts: # package.json	2021-01-24 20:39:11 +01:00
Philipp Dormann	e91e197873	new license file version [CI SKIP]	2021-01-24 19:39:09 +00:00
Philipp Dormann	b30b6734a1	⏫ general dependency bump All checks were successful continuous-integration/drone/push Build is passing Details	2021-01-24 20:38:29 +01:00
Philipp Dormann	dadb80608a	💣 process breaking changes for lib v0.3.0 Some checks failed continuous-integration/drone/push Build is failing Details	2021-01-24 20:37:56 +01:00
Philipp Dormann	16c9969fb9	Merge branch 'feature/13-runner-management' of https://git.odit.services/lfk/frontend into feature/13-runner-management	2021-01-24 18:41:04 +01:00
Philipp Dormann	dc1644ed25	🐞 ImportRunnerModal - table overflow fix ref #13	2021-01-24 18:40:54 +01:00
Philipp Dormann	2cc9b3e1ed	👀 ImportRunnerModal - layout cleanup ref #13	2021-01-24 18:38:16 +01:00
Nicolai Ort	415f340a68	i18n 🌍 ref #13	2021-01-24 18:20:48 +01:00
Philipp Dormann	2d4869128d	🌎 i18n ref #13	2021-01-24 17:54:45 +01:00
Philipp Dormann	ae8bc01d9b	🌎 i18n ref #13	2021-01-24 17:47:29 +01:00
Philipp Dormann	e2552d9442	Merge branch 'dev' into feature/13-runner-management	2021-01-24 17:41:11 +01:00
Philipp Dormann	5d1b5d80b6	Merge branch 'feature/13-runner-management' of https://git.odit.services/lfk/frontend into feature/13-runner-management	2021-01-24 17:31:31 +01:00
Philipp Dormann	366804aa29	🌎 i18n ref #13	2021-01-24 17:31:10 +01:00
Philipp Dormann	9240e0c903	🧹 general runner cleanup ref #13	2021-01-24 17:30:31 +01:00
Nicolai Ort	7baaf2cff3	Merge branch 'feature/13-runner-management' of git.odit.services:lfk/frontend into feature/13-runner-management	2021-01-24 17:23:18 +01:00
Nicolai Ort	9fbc1ba031	Added friles to ignore	2021-01-24 17:21:48 +01:00
Nicolai Ort	6704c07db0	Deleted files to ignore	2021-01-24 17:21:39 +01:00
Philipp Dormann	a87165148a	🧹 RunnerDetail cleanup + i18n 🌎 ref #13	2021-01-24 17:21:19 +01:00
Philipp Dormann	ec4bcd093b	🐞 [bugfix] RunnerDetail update ref #13	2021-01-24 17:16:49 +01:00
Philipp Dormann	5552055b98	RunnerDetail - button text fixes ref #13	2021-01-21 20:50:14 +01:00
Philipp Dormann	03aa67034d	✨ basic RunnerDetail ref #13	2021-01-21 19:07:43 +01:00
Philipp Dormann	fc21427685	💻 updated VSCode recommended extensions All checks were successful continuous-integration/drone/push Build is passing Details change i18n-ally scoping	2021-01-21 18:41:05 +01:00
Philipp Dormann	819b02a204	✨ ImportRunnerModal - hide team when loading from TeamDetail ref #13	2021-01-20 20:25:41 +01:00
Philipp Dormann	de0bd5fd57	✨ ImportRunnerModal usage in TeamDetail ref #13	2021-01-20 20:21:59 +01:00
Philipp Dormann	8aa1d94a1a	✨ use ImportRunnerModal in OrgDetail + Orgs ref #13	2021-01-20 19:59:53 +01:00
Philipp Dormann	f8a59133a2	✨ ImportRunnerModal - compatibility for multi-component access ref #13	2021-01-20 19:59:31 +01:00
Philipp Dormann	c382f770dc	👀 basic ui interaction for ImportRunnerModal ref #13	2021-01-20 18:31:23 +01:00
Philipp Dormann	cde4ec13ef	✨ basic cancel event dispatch from ImportRunnerModal ref #13	2021-01-20 18:15:47 +01:00
Philipp Dormann	ecad1ea839	↙ added default fallback parsing to ImportRunnerModal ref #13	2021-01-20 17:56:32 +01:00
Philipp Dormann	6b91b22713	🚀 ImportRunnerModal - working demo ref #13	2021-01-20 17:46:18 +01:00
Philipp Dormann	e34c91b2cc	🌎 i18n in ImportRunnerModal headers ref #13	2021-01-20 17:33:10 +01:00
Philipp Dormann	822759a688	😦 added missing dependencies ref #13	2021-01-19 21:45:00 +01:00
Philipp Dormann	b606037890	🌎 added locale based csv/xlsx header parsing ref #13	2021-01-19 21:44:41 +01:00
Philipp Dormann	74d9b94119	✨ basic xlsx + csv parsing ref #13	2021-01-19 21:44:13 +01:00
Philipp Dormann	b1e9f955b0	✨ basic ImportRunnerModal with CSV input ref #13	2021-01-19 18:19:21 +01:00
Philipp Dormann	e0356fa360	fixed runner permissions ref #13	2021-01-19 18:18:51 +01:00
Philipp Dormann	fbc67eeb98	Merge branch 'dev' of https://git.odit.services/lfk/frontend into dev	2021-01-18 20:34:50 +01:00
Philipp Dormann	09fd73b130	🐞 improved version builder from template	2021-01-18 20:34:47 +01:00
Philipp Dormann	259a76f46b	🧹 darkmode classes cleanup	2021-01-18 20:29:44 +01:00
Philipp Dormann	c6504c2eaf	new license file version [CI SKIP]	2021-01-17 18:46:15 +00:00
Philipp Dormann	44f07ca231	🧹 AddUserModal cleanup	2021-01-17 17:23:26 +01:00
Philipp Dormann	ff14f024af	AddUserModal - username/email validation ref #12	2021-01-17 17:14:34 +01:00
Philipp Dormann	10d7955f99	UserPermissions - working edit ref #12	2021-01-16 21:42:09 +01:00
Philipp Dormann	959b32de1c	✨ new UsersEmptyState ref #12	2021-01-16 20:48:45 +01:00
Philipp Dormann	9c6dc5b424	basic UserPermissions view ref #12	2021-01-16 20:33:34 +01:00
Philipp Dormann	aaab95d414	UserDetail - link to permission page ref #12	2021-01-16 18:30:35 +01:00
Philipp Dormann	7d4e93912c	UserDetail - basic permission badges ref #12	2021-01-16 18:23:28 +01:00
Philipp Dormann	d65b463547	UserDetail - add permission layout ref #12	2021-01-16 17:31:17 +01:00
Philipp Dormann	6e5a4bcb39	✨ formatting ref #12	2021-01-16 17:19:03 +01:00
Nicolai Ort	1a799dc30a	Fixed User group update ref #12	2021-01-16 17:17:56 +01:00
Philipp Dormann	e3d2676858	Merge branch 'dev' into feature/12-user-management	2021-01-16 17:11:10 +01:00
Philipp Dormann	65b36f8e69	🙋‍♂️🔒 UserDetail - permission layout ui ref #12	2021-01-14 18:56:28 +01:00
Philipp Dormann	87387a54f2	Merge branch 'dev' into feature/12-user-management	2021-01-14 18:30:08 +01:00
Philipp Dormann	b34e3aeed0	👀 UsersOverview - disable advanced search ref #12	2021-01-14 18:24:37 +01:00
Philipp Dormann	86c54e04a8	🙋‍♂️ UserDetail - active/inactive user state edit ref #12	2021-01-14 18:22:09 +01:00
Philipp Dormann	ef9fc596f5	🙋‍♂️ UserDetail - disable profile picture edit ref #12	2021-01-14 18:21:48 +01:00
		`@@ -1 +0,0 @@`
			`<!-- this is configured with dev scripts -->`