new license file version [CI SKIP]

change i18n-ally scoping

.gitignore

@@ -1,10 +1,10 @@
-.vscode
-.idea
 node_modules
-dist
+build
-dist-ssr
-public/env.js
-/build
-yarn.lock
 package-lock.json
+yarn.lock
 *.map
+public/env.js
+public/sw.js
+public/index.html
+public/workbox-*.js
+svelte.config.js

.vscode/extensions.json

@@ -0,0 +1,13 @@
+{
+    "recommendations": [
+        "2gua.rainbow-brackets",
+        "christian-kohler.npm-intellisense",
+        "remimarsal.prettier-now",
+        "svelte.svelte-vscode",
+        "lokalise.i18n-ally",
+        "fivethree.vscode-svelte-snippets"
+    ],
+    "unwantedRecommendations": [
+        "antfu.i18n-ally"
+    ]
+}

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+    "i18n-ally.localesPaths": "src/locales",
+    "i18n-ally.keystyle": "nested"
+}

CHANGELOG.md

@@ -2,8 +2,32 @@
 
 All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 
+#### [0.4.0](https://git.odit.services/lfk/frontend/compare/0.3.1...0.4.0)
+
+- Merge commit 'a284806d3cb769030a4e28d0403190b746f8fc61' into dev [`#37`](https://git.odit.services/lfk/frontend/issues/37)
+- ✨ AddRunnerModal [`66ffd8e`](https://git.odit.services/lfk/frontend/commit/66ffd8e936010960766e7f9021319d549e1d3e6b)
+- ✨ RunnersOverview [`66a07c6`](https://git.odit.services/lfk/frontend/commit/66a07c6a51674a92d5e8459f250de2ab5ff6d902)
+- ⚡ improved dev scripts for speed starts [`383f828`](https://git.odit.services/lfk/frontend/commit/383f82807f4090bdd2c3dcdc695b75093b854031)
+- ✨ dynamic contact info in AddRunnerModal [`d4579a9`](https://git.odit.services/lfk/frontend/commit/d4579a9a410a27676e0ed0285bd124696153aae4)
+- 🐞 fix cross-env logic for faster dev starts ⚡ [`2ce4199`](https://git.odit.services/lfk/frontend/commit/2ce41990bf9911db11eb556ce4c9aa3b3e5ca16c)
+- 👩‍💻 developer configs/ recommendations for VSCode [`5e02502`](https://git.odit.services/lfk/frontend/commit/5e02502a5c2b8ebf798cbc21856b4425f8510041)
+- ⚡ re-enable PWA functionality via serviceworker [`a284806`](https://git.odit.services/lfk/frontend/commit/a284806d3cb769030a4e28d0403190b746f8fc61)
+- 🔨 cleaned up build process + Dockerfile [`7e10c1d`](https://git.odit.services/lfk/frontend/commit/7e10c1db659c21cd737b5d1e10bf3e61c4e0de94)
+- 🔨 cleaned up build process + Dockerfile [`1179063`](https://git.odit.services/lfk/frontend/commit/11790638d68e8c43f91448bd0c35f910a3d9e446)
+- ⚡ improved serviceworker + PWA logic [`0583cbe`](https://git.odit.services/lfk/frontend/commit/0583cbe2664f8832c5eaa7fb155b3e6deccb2ed3)
+- apply new gitignore config [`2e6874c`](https://git.odit.services/lfk/frontend/commit/2e6874c822f2f8e9a8a7b74b4765631ba08f0255)
+- ⚡ PWA optimizations [`dccf7c6`](https://git.odit.services/lfk/frontend/commit/dccf7c6c8de0da0f25ad77e20822fb4fbf68a61a)
+- ⏫ general dependency bumps [`03125b3`](https://git.odit.services/lfk/frontend/commit/03125b3a2d0ad4b12cffdec98f27da14f3f45f77)
+- 🐞 gitignore fix [`e49dca0`](https://git.odit.services/lfk/frontend/commit/e49dca02754aa57cbe464066f11505db4a9b5ca9)
+- gitignore fix [`a523379`](https://git.odit.services/lfk/frontend/commit/a523379b3a5f7f3cffecca82c0c066167da046ca)
+- fix package:dev script [`aa6348a`](https://git.odit.services/lfk/frontend/commit/aa6348a29a6e9ecb9789681b7195527c4eef19e4)
+- new license file version [CI SKIP] [`382cc3d`](https://git.odit.services/lfk/frontend/commit/382cc3d844bf0af7c46492907f8a9a78fadc25d0)
+- 🧹 gitignore changes in public/index.html & svelte.config.js [`dd74d9e`](https://git.odit.services/lfk/frontend/commit/dd74d9ee89b80c46ce3d3347a3c7cbe34373019c)
+
 #### [0.3.1](https://git.odit.services/lfk/frontend/compare/0.3.0...0.3.1)
 
+> 16 January 2021
+
 - Merge pull request 'feature/16-org-management' (#35) from feature/16-org-management into dev [`#16`](https://git.odit.services/lfk/frontend/issues/16)
 - 🏃‍♂️🏃‍♂️🏃‍♂️ basic UI components for team management [`d87b879`](https://git.odit.services/lfk/frontend/commit/d87b879cc3d6c771a8a9932409e39068e1b2acdb)
 - ✨ TeamDetail with edit,delete [`ccf09f9`](https://git.odit.services/lfk/frontend/commit/ccf09f97d5fb476113f24a9559a48bccd75fd0a5)
@@ -11,14 +35,15 @@ All notable changes to this project will be documented in this file. Dates are d
 - 🔒 ConfirmOrgDeletion in OrgDetail [`d890112`](https://git.odit.services/lfk/frontend/commit/d8901126d0cc91cabe3b94a30a83f36e6288126d)
 - ✨ basic TeamsOverview [`597e9e1`](https://git.odit.services/lfk/frontend/commit/597e9e1ea9da7c73bdcb8ef1ae1a13dfa68ff5a3)
 - ✨ UX - ConfirmOrgDeletion cancel event reflection in datatable [`84a9cf0`](https://git.odit.services/lfk/frontend/commit/84a9cf069a4aa0940eaacc87ea67e745deabe939)
-- 🧹 Dashboard - drop header bar [`f1833f1`](https://git.odit.services/lfk/frontend/commit/f1833f13d57595c23abf29bce1a2795cbb05a116)
-- 🤝 attribution/ credits for icons and illustrations [`eb0dd3f`](https://git.odit.services/lfk/frontend/commit/eb0dd3f781f739c6511588a8e153c14a39096025)
-- ✨ added new empty states [`66e6cd8`](https://git.odit.services/lfk/frontend/commit/66e6cd80d39ef18a29fd8ac80fbac929bd0c4f8c)
-- Merge pull request 'feature/14-team-management' (#36) from feature/14-team-management into dev [`4285168`](https://git.odit.services/lfk/frontend/commit/42851686caae69e6672f48cd7df77ee4c2e49092)
 - 🐞 fix Dashboard sidebar responsiveness [`6a81e36`](https://git.odit.services/lfk/frontend/commit/6a81e369fa20f0bb2846365a45f96e91e95fe2e7)
+- 🧹 Dashboard - drop header bar [`f1833f1`](https://git.odit.services/lfk/frontend/commit/f1833f13d57595c23abf29bce1a2795cbb05a116)
 - ✨ AddTeamModal working [`9bb027e`](https://git.odit.services/lfk/frontend/commit/9bb027ec4c73483907d396180f739dc3a11b2404)
 - 🧹 TeamDetail cleanup [`7654b79`](https://git.odit.services/lfk/frontend/commit/7654b795c756ca198bad77068823032714408535)
+- 🚀RELEASE v0.3.1 [`64ade90`](https://git.odit.services/lfk/frontend/commit/64ade901ded75fa738c713446343a209eca89ce6)
+- 🤝 attribution/ credits for icons and illustrations [`eb0dd3f`](https://git.odit.services/lfk/frontend/commit/eb0dd3f781f739c6511588a8e153c14a39096025)
 - 🔒 re-enable confirmation in OrgOverview [`ce6002a`](https://git.odit.services/lfk/frontend/commit/ce6002a631dd3c140f3892c750d052e89c135653)
+- ✨ added new empty states [`66e6cd8`](https://git.odit.services/lfk/frontend/commit/66e6cd80d39ef18a29fd8ac80fbac929bd0c4f8c)
+- Merge pull request 'feature/14-team-management' (#36) from feature/14-team-management into dev [`4285168`](https://git.odit.services/lfk/frontend/commit/42851686caae69e6672f48cd7df77ee4c2e49092)
 - 🧹 TeamsOverview - formatting [`6870a7f`](https://git.odit.services/lfk/frontend/commit/6870a7f9b1fce2f06182dafa502f6dc4bb818bd3)
 - 🔒 ConfirmOrgDeletion in OrgOverview [`83f19a7`](https://git.odit.services/lfk/frontend/commit/83f19a7572255b5c095c68d688a963dbe3cf4a75)
 - 🧹 Team cleanups [`07f2e65`](https://git.odit.services/lfk/frontend/commit/07f2e65fc722c0328ee5a8dc4d01fc89c906fa86)

Dockerfile

@@ -3,15 +3,13 @@ WORKDIR /app
 RUN npm i -g pnpm
 COPY package.json ./
 RUN pnpm i
-COPY package.json *.config.js workbox-config.js ./
+COPY package.json *.config.js workbox-config.js template-copy.js index.template.html s-config.template.js ./
 COPY src ./src
 COPY public ./public
-RUN pnpm run build:sw
 RUN pnpm run build
 # final image
 FROM alpine
 COPY --from=0 /app/build /app
-RUN rm -rf build/sw.js.map build/workbox-*.js.map
 RUN rm -rf /app/build/_dist_/components
 RUN rm -rf /app/build/_dist_/locales
 RUN rm -rf /app/build-manifest.json

index.template.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" href="/favicon.png" />
+  <link rel="manifest" href="/manifest.webmanifest">
+  <link rel="apple-touch-icon" href="/lfk-logo.png">
+  <meta name="theme-color" content="#FFFFFF">
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="description" content="Lauf Für Kaya! - Admin" />
+  <title>Lauf für Kaya! - Admin</title>
+  __TAILWIND_INSERT__
+</head>
+
+<body>
+  <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>
+</body>
+
+</html>

package.json

@@ -1,16 +1,18 @@
 {
 	"name": "@odit/lfk-frontend",
-	"version": "0.3.1",
+	"version": "0.4.0",
 	"scripts": {
 		"i18n-order": "node order.js",
-		"dev": "snowpack dev",
+		"dev:all": "yarn prebuild && snowpack dev",
-		"build": "snowpack build",
+		"dev": "cross-env NODE_ENV_ODIT=development_fast node template-copy.js && yarn build:sw && snowpack dev",
+		"build": "yarn prebuild && snowpack build",
+		"prebuild": "cross-env NODE_ENV_ODIT=production node template-copy.js && yarn build:sw",
 		"build:sw": "workbox generateSW workbox-config.js",
 		"release": "release-it",
 		"licenses:export": "license-exporter --json -o public"
 	},
 	"dependencies": {
-		"@odit/lfk-client-js": "0.0.12",
+		"@odit/lfk-client-js": "0.3.0",
 		"filepond": "4.25.1",
 		"gridjs": "3.2.2",
 		"localforage": "1.9.0",
@@ -19,21 +21,22 @@
 		"svelte-focus-trap": "1.0.1",
 		"svelte-i18n": "3.3.0",
 		"tailwindcss": "2.0.2",
-		"tinro": "0.5.6",
+		"tinro": "0.5.8",
 		"toastify-js": "1.9.3",
 		"validator": "13.5.2"
 	},
 	"devDependencies": {
 		"@odit/license-exporter": "0.0.9",
-		"@snowpack/plugin-svelte": "3.5.1",
+		"@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.10",
+		"snowpack": "3.0.11",
 		"svelte": "3.31.2",
-		"svelte-preprocess": "4.6.1",
+		"svelte-preprocess": "4.6.3",
 		"workbox-cli": "6.0.2"
 	},
 	"release-it": {

public/index.html

@@ -1,22 +1 @@
-<!DOCTYPE html>
+<!-- this is configured with dev scripts -->
-<html lang="en">
-
-<head>
-  <meta charset="utf-8" />
-  <link rel="icon" href="/favicon.png" />
-  <link rel="manifest" href="/manifest.webmanifest">
-  <link rel="apple-touch-icon" href="/lfk-logo.png">
-  <meta name="theme-color" content="#FFFFFF">
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <meta name="description" content="Lauf Für Kaya! - Admin" />
-  <title>Lauf für Kaya! - Admin</title>
-</head>
-
-<body>
-  <span style="display: none;visibility: hidden;" id="buildinfo">RELEASE_INFO-0.3.1-RELEASE_INFO</span>
-  <noscript>You need to enable JavaScript to run this app.</noscript>
-  <script src="/env.js"></script>
-  <script defer type="module" src="/_dist_/index.js"></script>
-</body>
-
-</html>

public/manifest.webmanifest

@@ -1,11 +1,18 @@
 {
 	"name": "Lauf für Kaya! - Admin",
 	"short_name": "LfK!Admin",
-	"start_url": ".",
+	"start_url": "/?utm_source=pwa",
+	"orientation": "portrait-primary",
 	"display": "standalone",
 	"background_color": "#fff",
 	"theme_color": "#fff",
 	"description": "Lauf für Kaya! - Admin",
+	"shortcuts": [
+		{
+			"name": "Users",
+			"url": "/users/?utm_source=pwa"
+		}
+	],
 	"icons": [
 		{
 			"src": "/favicon.png",

public/sw.js

@@ -1,2 +0,0 @@
-if(!self.define){const e=e=>{"require"!==e&&(e+=".js");let r=Promise.resolve();return i[e]||(r=new Promise((async r=>{if("document"in self){const i=document.createElement("script");i.src=e,document.head.appendChild(i),i.onload=r}else importScripts(e),r()}))),r.then((()=>{if(!i[e])throw new Error(`Module ${e} didn’t register its module`);return i[e]}))},r=(r,i)=>{Promise.all(r.map(e)).then((e=>i(1===e.length?e[0]:e)))},i={require:Promise.resolve(r)};self.define=(r,s,o)=>{i[r]||(i[r]=Promise.resolve().then((()=>{let i={};const c={uri:location.origin+r.slice(1)};return Promise.all(s.map((r=>{switch(r){case"exports":return i;case"module":return c;default:return e(r)}}))).then((e=>{const r=o(...e);return i.default||(i.default=r),i}))})))}}define("./sw.js",["./workbox-c8ead010"],(function(e){"use strict";self.addEventListener("message",(e=>{e.data&&"SKIP_WAITING"===e.data.type&&self.skipWaiting()})),e.precacheAndRoute([{url:"favicon.ico",revision:"ba44f340afba5bb1a07f14decc15dd04"},{url:"favicon.png",revision:"07a9941cec62319578fa2a1734db9959"},{url:"favicon.svg",revision:"689d6c6fda51e359c0e5725d9e905064"},{url:"index.html",revision:"931c34f3675364dcc09411aa0f223776"},{url:"logo.svg",revision:"4c9e31a1f4268d7e36e22cda7656e561"},{url:"manifest.webmanifest",revision:"75c93eb352c4877216e77b1d7f73445f"},{url:"robots.txt",revision:"61c27d2cd39a713f7829422c3d9edcc7"}],{})}));
-//# sourceMappingURL=sw.js.map

s-config.template.js

@@ -0,0 +1,6 @@
+const sveltePreprocess = require('svelte-preprocess');
+const preprocess = sveltePreprocess(__insert__);
+
+module.exports = {
+	preprocess
+};

src/App.svelte

@@ -31,7 +31,6 @@
   import Login from "./components/Login.svelte";
   import Dashboard from "./components/Dashboard.svelte";
   import store from "./store.js";
-  import NotFound from "./components/NotFound.svelte";
   import ForgotPassword from "./components/ForgotPassword.svelte";
   import MainDashContent from "./components/MainDashContent.svelte";
   import Users from "./components/Users.svelte";
@@ -41,17 +40,16 @@
   import Orgs from "./components/Orgs.svelte";
   import Runners from "./components/Runners.svelte";
   import Footer from "./components/Footer.svelte";
-  import Tracks from "./components/Tracks.svelte";
   import TracksOverview from "./components/TracksOverview.svelte";
   import OrgDetail from "./components/OrgDetail.svelte";
   import Teams from "./components/Teams.svelte";
-  import { OpenAPI, AuthService } from "@odit/lfk-client-js";
+  import { OpenAPI } from "@odit/lfk-client-js";
   import UserDetail from "./components/UserDetail.svelte";
   OpenAPI.BASE = config.baseurl;
   import { register as registerSW } from "./swmodule";
   import TeamDetail from "./components/TeamDetail.svelte";
   store.init();
-  // registerSW();
+  registerSW();
 </script>
 
 <Route>

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,

src/components/AddRunnerModal.svelte

@@ -0,0 +1,298 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import { clickOutside } from "./outsideclick";
+  import { focusTrap } from "svelte-focus-trap";
+  import { RunnerService, RunnerTeamService } from "@odit/lfk-client-js";
+  import isEmail from "validator/es/lib/isEmail";
+  import isMobilePhone from "validator/es/lib/isMobilePhone";
+  import Toastify from "toastify-js";
+  export let modal_open;
+  export let current_runners;
+  $: selected_team = undefined;
+  let firstname_input;
+  let lastname_input;
+  let middlename_input;
+  let phone_input;
+  let email_input;
+  let groups = [];
+  RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
+    groups = val;
+  });
+  function focus(el) {
+    el.focus();
+  }
+  $: middlename_input_value = "";
+  $: phone_input_value = "";
+  $: email_input_value = "";
+  $: lastname_input_value = "";
+  $: firstname_input_value = "";
+  $: processed_last_submit = true;
+  $: isPhoneValidOrEmpty =
+    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;
+  $: isFirstnameValid = firstname_input_value.trim().length !== 0;
+  $: createbtnenabled =
+    isFirstnameValid &&
+    isLastnameValid &&
+    isEmailValidOrEmpty &&
+    isPhoneValidOrEmpty;
+  (() => {
+    document.onkeydown = (e) => {
+      e = e || window.event;
+      if (e.key === "Escape") {
+        modal_open = false;
+      }
+      if (e.keyCode === 13) {
+        if (createbtnenabled === true) {
+          createbtnenabled = false;
+          submit();
+        }
+      }
+    };
+  })();
+  function submit() {
+    if (processed_last_submit === true) {
+      processed_last_submit = false;
+      const toast = Toastify({
+        text: "Runner is being added...",
+        duration: -1,
+      }).showToast();
+      let postdata = {
+        group: selected_team,
+        firstname: firstname_input_value,
+        lastname: lastname_input_value,
+      };
+      if (middlename_input_value) {
+        postdata.middlename = middlename_input_value;
+      }
+      if (phone_input_value) {
+        postdata.phone = phone_input_value;
+      }
+      if (email_input_value) {
+        postdata.email = email_input_value;
+      }
+      RunnerService.runnerControllerPost(postdata)
+        .then((result) => {
+          firstname_input_value = "";
+          lastname_input_value = "";
+          middlename_input_value = "";
+          email_input_value = "";
+          modal_open = false;
+          //
+          Toastify({
+            text: "Runner added",
+            duration: 500,
+            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+          }).showToast();
+          current_runners.push(result);
+          current_runners = current_runners;
+        })
+        .catch((err) => {
+          //
+        })
+        .finally(() => {
+          processed_last_submit = true;
+          //
+          toast.hideToast();
+        });
+    }
+  }
+</script>
+
+{#if modal_open}
+  <div
+    class="fixed z-10 inset-0 overflow-y-auto"
+    use:focusTrap
+    use:clickOutside
+    on:click_outside={() => {
+      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-4 sm:text-left">
+              <h3 class="text-lg leading-6 font-medium text-gray-900">
+                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.
+                </p>
+              </div>
+              <div class="grid grid-cols-6 gap-6">
+                <div class="col-span-6">
+                  <label
+                    for="firstname"
+                    class="block text-sm font-medium text-gray-700">{$_('first-name')}</label>
+                  <input
+                    use:focus
+                    autocomplete="off"
+                    placeholder={$_('first-name')}
+                    class:border-red-500={!isFirstnameValid}
+                    class:focus:border-red-500={!isFirstnameValid}
+                    class:focus:ring-red-500={!isFirstnameValid}
+                    bind:value={firstname_input_value}
+                    bind:this={firstname_input}
+                    type="text"
+                    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="col-span-6">
+                  <label
+                    for="trackname"
+                    class="block text-sm font-medium text-gray-700">{$_('middle-name')}</label>
+                  <input
+                    autocomplete="off"
+                    placeholder={$_('middle-name')}
+                    bind:value={middlename_input_value}
+                    bind:this={middlename_input}
+                    type="text"
+                    name="trackname"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                </div>
+                <div class="col-span-6">
+                  <label
+                    for="lastname"
+                    class="block text-sm font-medium text-gray-700">Last Name</label>
+                  <input
+                    autocomplete="off"
+                    placeholder="Last Name"
+                    class:border-red-500={!isLastnameValid}
+                    class:focus:border-red-500={!isLastnameValid}
+                    class:focus:ring-red-500={!isLastnameValid}
+                    bind:value={lastname_input_value}
+                    bind:this={lastname_input}
+                    type="text"
+                    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="col-span-6">
+                  <label
+                    for="team"
+                    class="block text-sm font-medium text-gray-700">Team</label>
+                  <select
+                    name="team"
+                    bind:value={selected_team}
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2">
+                    {#each groups as g}
+                      <option value={g.id}>{g.name}</option>
+                    {/each}
+                  </select>
+                </div>
+                <div class="col-span-6">
+                  <label
+                    for="phone"
+                    class="block text-sm font-medium text-gray-700">Phone</label>
+                  <input
+                    autocomplete="off"
+                    placeholder="Phone"
+                    class:border-red-500={!isPhoneValidOrEmpty}
+                    class:focus:border-red-500={!isPhoneValidOrEmpty}
+                    class:focus:ring-red-500={!isPhoneValidOrEmpty}
+                    bind:value={phone_input_value}
+                    bind:this={phone_input}
+                    type="tel"
+                    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" />
+                  {#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
+                      valid international number...
+                    </span>
+                  {/if}
+                </div>
+                <div class="col-span-6">
+                  <label
+                    for="email"
+                    class="block text-sm font-medium text-gray-700">{$_('e-mail-adress')}</label>
+                  <input
+                    autocomplete="off"
+                    placeholder={$_('e-mail-adress')}
+                    class:border-red-500={!isEmailValidOrEmpty}
+                    class:focus:border-red-500={!isEmailValidOrEmpty}
+                    class:focus:ring-red-500={!isEmailValidOrEmpty}
+                    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 !isEmailValidOrEmpty}
+                    <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>
+            </div>
+          </div>
+        </div>
+        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+          <button
+            disabled={!createbtnenabled}
+            class:opacity-50={!createbtnenabled}
+            on:click={submit}
+            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">
+            {$_('create')}
+          </button>
+          <button
+            on:click={() => {
+              modal_open = false;
+            }}
+            type="button"
+            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
+            {$_('cancel')}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}

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}

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>

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
     )

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>

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">

src/components/OrgDetail.svelte

@@ -1,5 +1,5 @@
 <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";
@@ -12,7 +12,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 +21,8 @@
   });
   let modal_open = false;
   let delete_org = {};
-  function deleteOrganisation() {
+  function deleteOrganization() {
-    // RunnerOrganisationService.runnerOrganisationControllerRemove(
+    // RunnerOrganizationService.runnerOrganizationControllerRemove(
     //   original.id,
     //   false
     // )
@@ -45,7 +45,7 @@
         text: "updating organization",
         duration: 2500,
       }).showToast();
-      RunnerOrganisationService.runnerOrganisationControllerPut(
+      RunnerOrganizationService.runnerOrganizationControllerPut(
         original.id,
         orgdata
       )
@@ -75,7 +75,7 @@
         {#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 +181,7 @@
         type="text"
         bind:value={orgdata.name}
         name="name"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 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 +193,7 @@
         type="text"
         bind:value={orgdata.contact}
         name="contact"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 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 +205,7 @@
         type="text"
         bind:value={orgdata.address}
         name="address"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 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}

src/components/OrgOverview.svelte

@@ -2,8 +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 "gridjs/dist/theme/mermaid.css";
   import store from "../store";
   import OrgsEmptyState from "./OrgsEmptyState.svelte";
   import Toastify from "toastify-js";
@@ -12,7 +11,7 @@
   $: active_deletes = [];
   export let current_organizations = [];
 
-  const promise = RunnerOrganisationService.runnerOrganisationControllerGetAll().then(
+  const promise = RunnerOrganizationService.runnerOrganizationControllerGetAll().then(
     (val) => {
       current_organizations = val;
     }
@@ -26,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"
@@ -80,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>
@@ -90,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}
@@ -102,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}
@@ -122,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({
@@ -147,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;

src/components/Orgs.svelte

@@ -11,7 +11,7 @@
 <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;
@@ -26,6 +26,6 @@
   <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 />
 {/if}

src/components/Profile.svelte

@@ -8,7 +8,7 @@
     </div>
   </div>
   <div
-    class="w-full p-4 mb-4 rounded-lg bg-white border border-grey-100 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

src/components/Runners.svelte

@@ -1,12 +1,30 @@
 <script>
   import { _ } from "svelte-i18n";
-  import RunnersEmptyState from "./RunnersEmptyState.svelte";
+  import store from "../store";
+  import AddRunnerModal from "./AddRunnerModal.svelte";
+  import RunnersOverview from "./RunnersOverview.svelte";
+  export let modal_open = false;
+  let current_runners = [];
 </script>
 
 <section class="container p-5">
   <span class="mb-1 text-3xl font-extrabold leading-tight">
     {$_('runners')}
+    {#if store.state.jwtinfo.userdetails.permissions.includes('USER:CREATE')}
+      <button
+        on:click={() => {
+          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 hinzufügen
+      </button>
+    {/if}
   </span>
   <p class="mb-8 text-lg text-gray-500">läuft bei ihnen</p>
+  <RunnersOverview bind:current_runners />
 </section>
-<RunnersEmptyState />
+
+{#if store.state.jwtinfo.userdetails.permissions.includes('USER:CREATE')}
+  <AddRunnerModal bind:current_runners bind:modal_open />
+{/if}

src/components/RunnersOverview.svelte

@@ -0,0 +1,148 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import { RunnerService } from "@odit/lfk-client-js";
+  import store from "../store";
+  import RunnersEmptyState from "./RunnersEmptyState.svelte";
+  $: searchvalue = "";
+  $: active_deletes = [];
+  export let current_runners = [];
+  const runners_promise = RunnerService.runnerControllerGetAll().then((val) => {
+    current_runners = val;
+  });
+</script>
+
+{#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:GET')}
+  {#await runners_promise}
+    <div
+      class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
+      role="alert">
+      <p class="font-bold">runners are being loaded...</p>
+      <p class="text-sm">{$_('this-might-take-a-moment')}</p>
+    </div>
+  {:then}
+    {#if current_runners.length === 0}
+      <RunnersEmptyState />
+    {:else}
+      <input
+        type="search"
+        bind:value={searchvalue}
+        placeholder={$_('datatable.search')}
+        aria-label={$_('datatable.search')}
+        class="gridjs-input gridjs-search-input mb-4" />
+      <div
+        class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
+        <table class="divide-y divide-gray-200 w-full">
+          <thead class="bg-gray-50">
+            <tr>
+              <th
+                scope="col"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                Name
+              </th>
+              <th
+                scope="col"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                Contact Information
+              </th>
+              <th
+                scope="col"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                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
+              </th>
+              <th scope="col" class="relative px-6 py-3">
+                <span class="sr-only">Action</span>
+              </th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-gray-200">
+            {#each current_runners as runner}
+              {#if Object.values(runner)
+                .toString()
+                .toLowerCase()
+                .includes(searchvalue)}
+                <tr data-rowid="user_{runner.id}">
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="flex items-center">
+                      <div class="ml-4">
+                        <div
+                          class="text-sm font-medium text-gray-900">
+                          {runner.firstname}
+                          {runner.middlename || ''}
+                          {runner.lastname}
+                        </div>
+                      </div>
+                    </div>
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    {#if runner.email}
+                      <div class="text-sm text-gray-500">{runner.email}</div>
+                    {/if}
+                    {#if runner.phone}
+                      <div class="text-sm text-gray-500">{runner.phone}</div>
+                    {/if}
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    {runner.group.name}
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap">{runner.distance}</td>
+                  {#if active_deletes[runner.id] === true}
+                    <td
+                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                      <button
+                        on:click={() => {
+                          active_deletes[runner.id] = false;
+                        }}
+                        tabindex="0"
+                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">Cancel
+                        Delete</button>
+                      <button
+                        on:click={() => {
+                          RunnerService.runnerControllerRemove(runner.id, true)
+                            .then((resp) => {
+                              current_runners = current_runners.filter((obj) => obj.id !== runner.id);
+                            })
+                            .catch((err) => {
+                              // error deleting user
+                            });
+                        }}
+                        tabindex="0"
+                        class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">Confirm
+                        Delete</button>
+                    </td>
+                  {:else}
+                    <td
+                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                      <a
+                        href="./{runner.id}"
+                        class="text-indigo-600 hover:text-indigo-900">Edit</a>
+                      {#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:DELETE')}
+                        <button
+                          on:click={() => {
+                            active_deletes[runner.id] = true;
+                          }}
+                          tabindex="0"
+                          class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">Delete</button>
+                      {/if}
+                    </td>
+                  {/if}
+                </tr>
+              {/if}
+            {/each}
+          </tbody>
+        </table>
+      </div>
+    {/if}
+  {:catch error}
+    <div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
+      <span class="inline-block align-middle mr-8">
+        <b class="capitalize">{$_('general_promise_error')}</b>
+        {error}
+      </span>
+    </div>
+  {/await}
+{/if}

src/components/StatCards.svelte

@@ -18,7 +18,7 @@
     class="flex flex-col lg:flex-row w-full lg:space-x-2 space-y-2 lg:space-y-0 mb-2 lg:mb-4">
     <a href="/runners/" class="w-full lg:w-1/4">
       <div
-        class="widget w-full p-4 rounded-lg bg-white border border-grey-100 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">

src/components/TeamDetail.svelte

@@ -1,6 +1,6 @@
 <script>
   import {
-    RunnerOrganisationService,
+    RunnerOrganizationService,
     RunnerTeamService,
   } from "@odit/lfk-client-js";
   import { _ } from "svelte-i18n";
@@ -28,7 +28,7 @@
     teamdata = Object.assign(teamdata, value);
     original = Object.assign(original, value);
   });
-  RunnerOrganisationService.runnerOrganisationControllerGetAll().then((val) => {
+  RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
     orgs = val;
   });
   function deleteTeam() {
@@ -188,7 +188,7 @@
         type="text"
         bind:value={teamdata.name}
         name="name"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 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 +200,14 @@
         type="text"
         bind:value={teamdata.contact}
         name="contact"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 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}

src/components/TeamsOverview.svelte

@@ -3,7 +3,6 @@
   import Toastify from "toastify-js";
   import { RunnerTeamService } from "@odit/lfk-client-js";
   const teams_promise = RunnerTeamService.runnerTeamControllerGetAll();
-  import "gridjs/dist/theme/mermaid.css";
   import { users as usersstore } from "../store.js";
   import store from "../store";
   import TeamsEmptyState from "./TeamsEmptyState.svelte";
@@ -82,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>
@@ -92,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}
@@ -104,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}

src/components/UserDetail.svelte

@@ -206,7 +206,7 @@
         type="text"
         bind:value={editable_userdata.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 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
@@ -218,7 +218,7 @@
         type="text"
         bind:value={editable_userdata.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 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
@@ -230,7 +230,7 @@
         type="text"
         bind:value={editable_userdata.lastname}
         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 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
@@ -242,7 +242,7 @@
         type="email"
         bind:value={editable_userdata.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 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
@@ -254,14 +254,14 @@
         type="text"
         bind:value={editable_userdata.username}
         name="username"
-        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">
       <span class="font-medium">{$_('groups')}</span>
       <!-- svelte-ignore a11y-no-onchange -->
       <select
         bind:value={usergroups_array}
-        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"
         multiple>
         {#each allgroups as g}
           {#if usergroups_array.includes(g.id)}
@@ -291,7 +291,7 @@
                 {#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">
+                      class="block w-full mt-1 text-sm bg-gray-200 p-2 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple form-input">
                       {p}
                       <button
                         on:click={() => {
@@ -311,7 +311,7 @@
                 {#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">
+                      class="block w-full mt-1 text-sm bg-gray-200 p-2 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple form-input">
                       {p}
                       <button
                         on:click={() => {

src/components/UsersOverview.svelte

@@ -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}

svelte.config.js

@@ -1,11 +1 @@
-const sveltePreprocess = require('svelte-preprocess');
+// this is configured with dev scripts
-
-const preprocess = sveltePreprocess({
-	postcss: {
-		plugins: [ require('tailwindcss'), require('autoprefixer') ]
-	}
-});
-
-module.exports = {
-	preprocess
-};

template-copy.js

@@ -0,0 +1,19 @@
+const fs = require('fs');
+let content_svelteconfig = fs.readFileSync('./s-config.template.js', { encoding: 'utf8' });
+let content_html = fs.readFileSync('./index.template.html', { encoding: 'utf8' });
+if (process.env.NODE_ENV_ODIT == 'development_fast') {
+	content_html = content_html.replace(
+		'__TAILWIND_INSERT__',
+		'<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.0.2/dist/tailwind.min.css">'
+	);
+	content_svelteconfig = content_svelteconfig.replace('__insert__', '{postcss:{}}');
+} else {
+	content_html = content_html.replace('__TAILWIND_INSERT__', '');
+	content_svelteconfig = content_svelteconfig.replace(
+		'__insert__',
+		"{postcss:{plugins:[require('tailwindcss'),require('autoprefixer')]}}"
+	);
+}
+fs.writeFileSync('./public/index.html', content_html);
+fs.writeFileSync('./svelte.config.js', content_svelteconfig);
+console.info('dev setup script done');

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);

workbox-config.js

@@ -1,6 +1,9 @@
 module.exports = {
 	globDirectory: 'public',
-	globPatterns: [ '**/*.{js,ico,png,svg,html,webmanifest,txt}' ],
+	globPatterns: [ '**/*.{js,ico,png,svg,html,webmanifest,txt,json}' ],
-	globIgnores: [ 'env.js', 'env.sample.js', 'licenses.json' ],
+	globIgnores: [ 'env.js', 'env.sample.js' ],
-	swDest: 'public/sw.js'
+	swDest: 'public/sw.js',
+	cleanupOutdatedCaches: true,
+	mode: 'production',
+	sourcemap: false
 };