🚀RELEASE v0.1.1

🧪 move changelog generation to default
🚀RELEASE v0.1.0
2021-01-10 12:24:29 +01:00 · 2021-01-10 12:24:19 +01:00 · 2021-01-10 12:21:35 +01:00 · 2021-01-10 12:18:22 +01:00 · 2021-01-10 12:18:00 +01:00 · 2021-01-10 12:17:49 +01:00
55 changed files with 2567 additions and 674 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -0,0 +1,3 @@
+public/env.sample.js
+public/workbox-*.js
+public/workbox-*.js.map
--- a/.drone.yml
+++ b/.drone.yml
@@ -0,0 +1,41 @@
+---
+kind: pipeline
+type: docker
+name: build:dev
+
+steps:
+  - name: build dev
+    image: plugins/docker
+    depends_on: [clone]
+    settings:
+      username:
+        from_secret: DOCKER_REGISTRY_USER
+      password:
+        from_secret: DOCKER_REGISTRY_PASSWORD
+      repo: registry.odit.services/lfk/frontend
+      tags:
+        - dev
+      registry: registry.odit.services
+  - name: run full license export
+    depends_on: ["clone"]
+    image: node:alpine
+    commands:
+      - yarn
+      - yarn licenses:export
+  - name: push new licenses file to repo
+    depends_on: ["run full license export"]
+    image: appleboy/drone-git-push
+    settings:
+      branch: dev
+      commit: true
+      commit_message: new license file version [CI SKIP]
+      author_email: bot@odit.services
+      remote: git@git.odit.services:lfk/frontend.git
+      ssh_key:
+        from_secret: GITLAB_SSHKEY
+
+trigger:
+  branch:
+    - dev
+  event:
+    - push
--- a/.gitignore
+++ b/.gitignore
@@ -5,3 +5,6 @@ dist
 dist-ssr
 public/env.js
 /build
+yarn.lock
+package-lock.json
+*.map
--- a/10
+++ b/10
@@ -3,11 +3,17 @@ WORKDIR /app
 RUN npm i -g pnpm
 COPY package.json ./
 RUN pnpm i
-COPY package.json *.config.js ./
+COPY package.json *.config.js workbox-config.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 /app/build/_dist_/components
+RUN rm -rf /app/build/_dist_/locales
+RUN rm -rf /app/build-manifest.json
 FROM fholzer/nginx-brotli:v1.19.1
-COPY --from=0 /app/build /usr/share/nginx/html
+COPY --from=1 /app /usr/share/nginx/html
 COPY ./nginx.conf /etc/nginx/nginx.conf
--- a/env.sample.js
+++ b/env.sample.js
@@ -1,5 +1,6 @@
 const config = {
 	baseurl: 'https://dev.lauf-fuer-kaya.de',
 	fallback_username: 'admin',
-	fallback_password: '72fpTzsev4xUu78QPs2FCbwZ3'
+	fallback_password: '72fpTzsev4xUu78QPs2FCbwZ3',
+	prefersHashRouting: true
 };
--- a/nginx.conf
+++ b/nginx.conf
@@ -1,19 +1,24 @@
-events{}
+events {
+}
 http {
    include mime.types;
    sendfile on;
    server {
+        error_page 404 /index.html;
        root /usr/share/nginx/html;
+        location / {
+            try_files $uri $uri/ /index.html;
+        }
        location ~* \.(?:ico|css|js|gif|jpe?g|png)$ {
            expires 1y;
            add_header Pragma public;
            add_header Cache-Control "public";
        }
        # --- Brotli
-        # brotli on;
-        # brotli_comp_level 6;
-        # brotli_static on;
-        # brotli_types application/atom+xml application/javascript application/json application/rss+xml application/vnd.ms-fontobject application/x-font-opentype application/x-font-truetype application/x-font-ttf application/x-javascript application/xhtml+xml application/xml font/eot font/opentype font/otf font/truetype image/svg+xml image/vnd.microsoft.icon image/x-icon image/x-win-bitmap text/css text/javascript text/plain text/xml;
+        brotli on;
+        brotli_comp_level 6;
+        brotli_static on;
+        brotli_types application/atom+xml application/javascript application/json application/rss+xml application/vnd.ms-fontobject application/x-font-opentype application/x-font-truetype application/x-font-ttf application/x-javascript application/xhtml+xml application/xml font/eot font/opentype font/otf font/truetype image/svg+xml image/vnd.microsoft.icon image/x-icon image/x-win-bitmap text/css text/javascript text/plain text/xml;
        # --- GZIP
        gzip on;
        gzip_disable "msie6";
@@ -22,6 +27,25 @@ http {
        gzip_comp_level 6;
        gzip_buffers 16 8k;
        gzip_http_version 1.1;
-        gzip_types application/javascript application/rss+xml application/vnd.ms-fontobject application/x-font application/x-font-opentype application/x-font-otf application/x-font-truetype application/x-font-ttf application/x-javascript application/xhtml+xml application/xml font/opentype font/otf font/ttf image/svg+xml image/x-icon text/css text/javascript text/plain text/xml;
+        gzip_types application/javascript
+            application/rss+xml
+            application/vnd.ms-fontobject
+            application/x-font
+            application/x-font-opentype
+            application/x-font-otf
+            application/x-font-truetype
+            application/x-font-ttf
+            application/x-javascript
+            application/xhtml+xml
+            application/xml
+            font/opentype
+            font/otf
+            font/ttf
+            image/svg+xml
+            image/x-icon
+            text/css
+            text/javascript
+            text/plain
+            text/xml;
    }
 }
--- a/order.js
+++ b/order.js
@@ -0,0 +1,16 @@
+const fs = require('fs');
+// get all language files
+const files = fs.readdirSync('./src/locales/');
+files.forEach((f) => {
+	// read file as object
+	const unordered = JSON.parse(fs.readFileSync(`src/locales/${f}`));
+	// order object by keys alpabetically A-Z
+	const ordered = Object.keys(unordered).sort().reduce((obj, key) => {
+		obj[key] = unordered[key];
+		return obj;
+	}, {});
+	// format output as json for commit diff compatibility
+	const out = JSON.stringify(ordered, 0, 4);
+	// write output file
+	fs.writeFileSync(`src/locales/${f}`, out);
+});
--- a/package.json
+++ b/package.json
@@ -1,28 +1,53 @@
 {
 	"name": "@odit/lfk-frontend",
-	"version": "0.0.0",
+	"version": "0.1.1",
 	"scripts": {
+		"i18n-order": "node order.js",
 		"dev": "snowpack dev",
-		"build": "snowpack build"
+		"build": "snowpack build",
+		"build:sw": "workbox generateSW workbox-config.js",
+		"release": "release-it",
+		"changelog": "npx auto-changelog --commit-limit false --template https://raw.githubusercontent.com/release-it/release-it/master/templates/changelog-compact.hbs",
+		"licenses:export": "license-exporter --json -o public"
 	},
 	"dependencies": {
-		"@odit/lfk-client-js": "^0.0.5",
-		"filepond": "^4.25.1",
-		"gridjs": "^3.2.0",
-		"svelte-filepond": "^0.0.1",
-		"svelte-i18n": "^3.3.0",
-		"svelte-spa-router": "^3.1.0",
-		"tailwindcss": "^2.0.2",
-		"toastify-js": "^1.9.3",
-		"validator": "^13.5.2"
+		"@odit/lfk-client-js": "0.0.10",
+		"filepond": "4.25.1",
+		"gridjs": "3.2.1",
+		"localforage": "1.9.0",
+		"svelte-filepond": "0.0.1",
+		"svelte-focus-trap": "1.0.1",
+		"svelte-i18n": "3.3.0",
+		"tailwindcss": "2.0.2",
+		"tinro": "0.5.6",
+		"toastify-js": "1.9.3",
+		"validator": "13.5.2"
 	},
 	"devDependencies": {
-		"@snowpack/plugin-svelte": "^3.4.1",
-		"autoprefixer": "^10.1.0",
-		"postcss": "^8.2.1",
-		"postcss-load-config": "^3.0.0",
+		"@odit/license-exporter": "0.0.9",
+		"@snowpack/plugin-svelte": "3.4.1",
+		"auto-changelog": "^2.2.1",
+		"autoprefixer": "10.2.1",
+		"postcss": "8.2.4",
+		"postcss-load-config": "3.0.0",
+		"release-it": "^14.2.2",
 		"snowpack": "3.0.0-rc.2",
-		"svelte": "^3.31.0",
-		"svelte-preprocess": "^4.6.1"
+		"svelte": "3.31.2",
+		"svelte-preprocess": "4.6.1",
+		"workbox-cli": "6.0.2"
+	},
+	"release-it": {
+		"git": {
+			"commit": true,
+			"requireCleanWorkingDir": false,
+			"commitMessage": "🚀RELEASE v${version}",
+			"push": false,
+			"tag": true,
+			"tagName": null,
+			"tagAnnotation": "v${version}"
+		},
+		"npm": {
+			"publish": false
+		}
 	}
 }
--- a/public/env.sample.js
+++ b/public/env.sample.js
@@ -1,6 +1,5 @@
 const config = {
 	baseurl: 'http://localhost:4010',
-	// optional params ⏬
-	fallback_username: 'demo',
-	fallback_password: 'demo'
+	// optional
+	prefersHashRouting: true
 };
--- a/public/index.html
+++ b/public/index.html
@@ -5,6 +5,7 @@
  <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" />
--- a/public/lfk-logo.png
+++ b/public/lfk-logo.png
--- a/public/licenses.json
+++ b/public/licenses.json
--- a/public/manifest.webmanifest
+++ b/public/manifest.webmanifest
@@ -4,6 +4,7 @@
 	"start_url": ".",
 	"display": "standalone",
 	"background_color": "#fff",
+	"theme_color": "#fff",
 	"description": "Lauf für Kaya! - Admin",
 	"icons": [
 		{
@@ -15,6 +16,12 @@
 			"src": "/favicon.png",
 			"sizes": "144x144",
 			"type": "image/png"
-		}
+		},
+		{
+			"src": "/lfk-logo.png",
+			"sizes": "1540x144",
+			"type": "image/png"
+		},
+		{ "src": "/maskable_icon_x1.png", "sizes": "750x750", "type": "image/png", "purpose": "any maskable" }
 	]
 }
--- a/public/maskable_icon_x1.png
+++ b/public/maskable_icon_x1.png
--- a/public/sw.js
+++ b/public/sw.js
@@ -1 +1,2 @@
-if(!self.define){const e=e=>{"require"!==e&&(e+=".js");let r=Promise.resolve();return s[e]||(r=new Promise((async r=>{if("document"in self){const s=document.createElement("script");s.src=e,document.head.appendChild(s),s.onload=r}else importScripts(e),r()}))),r.then((()=>{if(!s[e])throw new Error(`Module ${e} didn’t register its module`);return s[e]}))},r=(r,s)=>{Promise.all(r.map(e)).then((e=>s(1===e.length?e[0]:e)))},s={require:Promise.resolve(r)};self.define=(r,i,c)=>{s[r]||(s[r]=Promise.resolve().then((()=>{let s={};const o={uri:location.origin+r.slice(1)};return Promise.all(i.map((r=>{switch(r){case"exports":return s;case"module":return o;default:return e(r)}}))).then((e=>{const r=c(...e);return s.default||(s.default=r),s}))})))}}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:"env.js",revision:"d774a7cf97a5e7390045bcf8b304062c"},{url:"env.sample.js",revision:"83a2a360688fb3ab53c67f3137a72683"},{url:"favicon.ico",revision:"ba44f340afba5bb1a07f14decc15dd04"},{url:"favicon.png",revision:"07a9941cec62319578fa2a1734db9959"},{url:"favicon.svg",revision:"689d6c6fda51e359c0e5725d9e905064"},{url:"index.html",revision:"4c19a21d81de8fd5ca73503cec356c7c"},{url:"logo.svg",revision:"4c9e31a1f4268d7e36e22cda7656e561"},{url:"robots.txt",revision:"61c27d2cd39a713f7829422c3d9edcc7"}],{})}));
+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
--- a/public/workbox-c8ead010.js
+++ b/public/workbox-c8ead010.js
--- a/snowpack.config.js
+++ b/snowpack.config.js
@@ -10,6 +10,7 @@ module.exports = {
 	],
 	installOptions: {
 		/* ... */
+		sourceMap: false
 	},
 	devOptions: {
 		/* ... */
@@ -22,5 +23,8 @@ module.exports = {
 	},
 	alias: {
 		/* ... */
+	},
+	experiments: {
+		optimize: { bundle: true, minify: true }
 	}
 };
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,8 +1,16 @@
 <script>
-  import TailwindStyles from "./TailwindStyles.svelte";
-  import Router from "svelte-spa-router";
-  import { replace } from "svelte-spa-router";
-  import { wrap } from "svelte-spa-router/wrap";
+  import "./TailwindStyles.svelte";
+  import "toastify-js/src/toastify.css";
+  import { Route, router } from "tinro";
+  router.subscribe((routeInfo) => {
+    window.scrollTo(0, 0);
+  });
+  if (config.prefersHashRouting) {
+    if (config.prefersHashRouting === true) {
+      router.useHashNavigation();
+    }
+  }
+  import localForage from "localforage";
  import { addMessages, init, getLocaleFromNavigator } from "svelte-i18n";
  import en from "./locales/en.json";
  import de from "./locales/de.json";
@@ -12,52 +20,91 @@
    fallbackLocale: "en",
    initialLocale: getLocaleFromNavigator(),
  });
+  localForage.config({
+    name: "lfk_admin",
+    version: 1.0,
+    storeName: "lfk_admin",
+    description: "LfK! admin dashbaord",
+  });
  //
  import Login from "./components/Login.svelte";
  import Dashboard from "./components/Dashboard.svelte";
-  import NotFound from "./components/NotFound.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";
  import About from "./components/About.svelte";
+  import Settings from "./components/Settings.svelte";
+  import Transition from "./components/Transition.svelte";
+  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 UserDetail from "./components/UserDetail.svelte";
+  OpenAPI.BASE = config.baseurl;
+  import { register as registerSW } from "./swmodule";
  store.init();
-  //
-  const checkAuth = (detail) => {
-    if (!$store.isLoggedIn) {
-      console.log("not authed");
-      replace("/login/");
-      return false;
-    }
-    return true;
-  };
-  const routes = {
-    "/about": About,
-    "/login": Login,
-    "/forgot_password": ForgotPassword,
-    "/dashboard": wrap({ component: Dashboard, conditions: [checkAuth] }),
-    "/": wrap({ component: Dashboard, conditions: [checkAuth] }),
-    // Using named parameters, with last being optional
-    // "/author/:first/:last?": Author,
-
-    // Wildcard parameter
-    // "/book/*": Book,
-
-    // Catch-all
-    // This is optional, but if present it must be the last
-    "*": NotFound,
-  };
-  //
-  if ("serviceWorker" in navigator) {
-    window.addEventListener("load", () => {
-      navigator.serviceWorker.register("/sw.js").then(
-        (registration) => {
-          console.log(`sw successful with scope: ${registration.scope}`);
-        },
-        (err) => {
-          console.log(`sw failed: ${err}`);
-        }
-      );
-    });
-  }
+  // registerSW();
 </script>

-<Router {routes} />
+<Route>
+  {#if $router.path === '/forgot_password'}
+    <Route path="/forgot_password">
+      <ForgotPassword />
+    </Route>
+  {:else if $router.path === '/about'}
+    <Route path="/about">
+      <About />
+    </Route>
+  {:else if $store.isLoggedIn}
+    <Dashboard>
+      <Transition>
+        <Route path="/">
+          <MainDashContent />
+        </Route>
+        <Route path="/users/*">
+          <Route path="/">
+            <Users />
+          </Route>
+          <Route path="/:userid" let:params>
+            <UserDetail {params} />
+          </Route>
+        </Route>
+        <Route path="/tracks/*">
+          <Route path="/">
+            <TracksOverview />
+          </Route>
+          <Route path="/:trackid" let:params />
+        </Route>
+        <Route path="/runners">
+          <Runners />
+        </Route>
+        <Route path="/teams">
+          <Teams />
+        </Route>
+        <Route path="/orgs/*">
+          <Route path="/">
+            <Orgs />
+          </Route>
+          <Route path="/:orgid" let:params>
+            <OrgDetail {params} />
+          </Route>
+        </Route>
+        <Route path="/about">
+          <About />
+        </Route>
+        <Route path="/settings">
+          <Settings />
+        </Route>
+      </Transition>
+      <Footer />
+    </Dashboard>
+  {:else}
+    <Login />
+  {/if}
+</Route>
--- a/src/TailwindStyles.svelte
+++ b/src/TailwindStyles.svelte
@@ -1,4 +1,5 @@
 <style global>
+  /*! @import */
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
--- a/src/components/About.svelte
+++ b/src/components/About.svelte
@@ -1,27 +1,92 @@
 <script>
  import { _ } from "svelte-i18n";
-  import Footer from "./Footer.svelte";
+  import { clickOutside } from "./outsideclick";
+  import { focusTrap } from "svelte-focus-trap";
+  export let modal_open;
+  (function () {
+    document.onkeydown = function (e) {
+      e = e || window.event;
+      if (e.key === "Escape") {
+        modal_open = false;
+      }
+    };
+  })();
+  const license_promise = fetch("/licenses.json");
+  let licenses = [];
+  $: currentlicense = "";
+  $: licensetext = "";
+  license_promise
+    .then((response) => response.json())
+    .then((json) => {
+      licenses = json;
+    });
 </script>

-<style>
-  * {
-    font-family: "Agave", sans-serif;
-    /* font-family: "Comic Neue", cursive; */
-  }
-</style>
-
-<svelte:head>
-  <link
-    rel="stylesheet"
-    href="https://cdn.jsdelivr.net/npm/@xz/fonts@1/serve/agave.min.css" />
-  <link
-    rel="stylesheet"
-    href="https://cdn.jsdelivr.net/npm/@xz/fonts@1/serve/nevermind.min.css" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" />
-  <link
-    href="https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&display=swap"
-    rel="stylesheet" />
-</svelte:head>
+{#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
+                class="h-6 w-6 text-blue-600"
+                fill="none"
+                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>
+            </div>
+            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+              <h3 class="text-lg leading-6 font-medium">
+                {$_('read-license')}
+              </h3>
+              <div class="mt-2 mb-6">
+                <p class="text-sm text-gray-500">{currentlicense}</p>
+              </div>
+              <div class="mt-2 mb-6">
+                <p class="text-sm text-gray-500">{licensetext}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+          <button
+            on:click={() => {
+              modal_open = false;
+            }}
+            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">
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}
+<!-- /// -->
 <div class="pt-12 px-4 sm:px-6 lg:px-8 lg:pt-20 bg-gray-900 pb-12">
  <div class="text-center mb-8">
    <h1
@@ -42,168 +107,71 @@
  </div>
 </div>

-<div class="pt-0 pb-16 bg-gray-50 overflow-hidden lg:pt-12 lg:py-24">
+<div class="pt-0 pb-16 overflow-hidden lg:pt-12 lg:py-24">
  <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
-    <h2 class="text-4xl font-display font-semibold text-gray-900 md:text-5xl">
+    <h2 class="text-4xl font-display font-semibold md:text-5xl">
      {$_('credits')}
    </h2>
    <div
-      class="max-w-3xl mx-auto text-xl leading-8 font-medium text-gray-900 mt-8">
+      class="max-w-3xl mx-auto text-xl leading-8 font-medium mt-8">
      <p class="text-center">{$_('oss_credit_description')}</p>
    </div>
    <div class="w-screen leading-8 pl-5 mt-5">
-      <!--  -->
+      {#await license_promise}
+        <p class="text-center w-full">Licenses are being loaded...</p>
+      {:then}
        <table>
          <thead>
            <tr>
-            <th>name</th>
-            <th>licenseType</th>
-            <th>link</th>
-            <th>installedVersion</th>
-            <th>author</th>
+              <th>{$_('dependency_name')}</th>
+              <th>{$_('license')}</th>
+              <th>{$_('repo_link')}</th>
+              <th>{$_('installed-version')}</th>
+              <th>{$_('author')}</th>
            </tr>
          </thead>
          <tbody>
+            {#each licenses as l}
              <tr>
-            <td>@odit/lfk-client-js</td>
-            <td>CC-BY-NC-SA-4.0</td>
-            <td>https://git.odit.services/lfk/lfk-client-js</td>
-            <td>0.0.5</td>
-            <td>ODIT.Services</td>
-          </tr>
-          <tr>
-            <td>filepond</td>
-            <td>MIT</td>
-            <td>https://github.com/pqina/filepond.git</td>
-            <td>4.25.1</td>
-            <td>PQINA</td>
-          </tr>
-          <tr>
-            <td>gridjs</td>
-            <td>MIT</td>
-            <td>https://github.com/grid-js/gridjs.git</td>
-            <td>3.2.0</td>
-            <td>Afshin Mehrabani</td>
-          </tr>
-          <tr>
-            <td>svelte-filepond</td>
-            <td>MIT</td>
-            <td>https://github.com/pqina/svelte-filepond.git</td>
-            <td>0.0.1</td>
-            <td>PQINA</td>
-          </tr>
-          <tr>
-            <td>svelte-i18n</td>
-            <td>MIT</td>
-            <td>https://github.com/kaisermann/svelte-i18n.git</td>
-            <td>3.3.0</td>
-            <td>Christian Kaisermann</td>
-          </tr>
-          <tr>
-            <td>svelte-spa-router</td>
-            <td>MIT</td>
-            <td>https://github.com/ItalyPaleAle/svelte-spa-router.git</td>
-            <td>3.1.0</td>
-            <td>Alessandro Segala</td>
-          </tr>
-          <tr>
-            <td>tailwindcss</td>
-            <td>MIT</td>
-            <td>https://github.com/tailwindlabs/tailwindcss.git</td>
-            <td>2.0.2</td>
-            <td />
-          </tr>
-          <tr>
-            <td>toastify-js</td>
-            <td>MIT</td>
-            <td>https://github.com/apvarun/toastify-js.git</td>
-            <td>1.9.3</td>
-            <td>Varun A P</td>
-          </tr>
-          <tr>
-            <td>validator</td>
-            <td>MIT</td>
-            <td>https://github.com/chriso/validator.js.git</td>
-            <td>13.5.2</td>
-            <td>Chris O'Hara</td>
-          </tr>
-          <tr>
-            <td>@snowpack/plugin-svelte</td>
-            <td>MIT</td>
-            <td>https://github.com/snowpackjs/snowpack.git</td>
-            <td>3.4.1</td>
-            <td />
-          </tr>
-          <tr>
-            <td>autoprefixer</td>
-            <td>MIT</td>
-            <td>https://github.com/postcss/autoprefixer.git</td>
-            <td>10.1.0</td>
-            <td>Andrey Sitnik</td>
-          </tr>
-          <tr>
-            <td>postcss</td>
-            <td>MIT</td>
-            <td>https://github.com/postcss/postcss.git</td>
-            <td>8.2.1</td>
-            <td>Andrey Sitnik</td>
-          </tr>
-          <tr>
-            <td>postcss-load-config</td>
-            <td>MIT</td>
-            <td>https://github.com/postcss/postcss-load-config.git</td>
-            <td>3.0.0</td>
-            <td>Michael Ciniawky</td>
-          </tr>
-          <tr>
-            <td>snowpack</td>
-            <td>MIT</td>
-            <td>https://github.com/snowpackjs/snowpack.git</td>
-            <td>3.0.0-rc.2</td>
-            <td>Fred K. Schott</td>
-          </tr>
-          <tr>
-            <td>svelte</td>
-            <td>MIT</td>
-            <td>https://github.com/sveltejs/svelte.git</td>
-            <td>3.31.0</td>
-            <td>Rich Harris</td>
-          </tr>
-          <tr>
-            <td>svelte-preprocess</td>
-            <td>MIT</td>
-            <td>https://github.com/sveltejs/svelte-preprocess.git</td>
-            <td>4.6.1</td>
-            <td>Christian Kaisermann</td>
+                <td>{l.name}</td>
+                <td>
+                  {l.license || '?'}<br /><span
+                    class="underline cursor-pointer"
+                    on:click={() => {
+                      modal_open = true;
+                      currentlicense = l.name + '@' + l.version;
+                      licensetext = l.licensetext || $_('no-license-text-could-be-found');
+                    }}>{$_('read-license')}</span>
+                </td>
+                <td>
+                  {(l.repo?.url || l.repo)
+                    .replace('git+', '')
+                    .replace('git://', '')}
+                </td>
+                <td>{l.version || '?'}</td>
+                <td>{l.author?.name || l.author || '?'}</td>
              </tr>
+            {/each}
          </tbody>
        </table>
-      <!--  -->
-      <!-- <ul class="list-disc text-gray-500">
-        <li>
-          Snowpack:
-          <a
-            class="underline"
-            href="https://snowpack.dev"
-            target="_blank">https://snowpack.dev</a>
-        </li>
-        <li>
-          SvelteJS:
-          <a
-            class="underline"
-            href="https://svelte.dev"
-            target="_blank">https://svelte.dev</a>
-        </li>
-      </ul> -->
+      {: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>
-    <h2 class="text-4xl font-display font-semibold text-gray-900 md:text-5xl">
+      {/await}
+    </div>
+    <h2 class="text-4xl font-display font-semibold md:text-5xl">
      Fragen
    </h2>
    <div class="mt-6 border-t-2 border-gray-100 pt-10">
      <dl class="md:grid md:grid-cols-2 md:gap-8">
        <div>
          <div>
-            <dt class="text-lg leading-6 font-medium text-gray-900">Q</dt>
+            <dt class="text-lg leading-6 font-medium">Q</dt>
            <dd class="mt-2">
              <p class="text-base text-gray-500">A</p>
            </dd>
@@ -211,13 +179,13 @@
        </div>
        <div class="mt-12 sm:mt-0">
          <div id="team-pricing">
-            <dt class="text-lg leading-6 font-medium text-gray-900">Q</dt>
+            <dt class="text-lg leading-6 font-medium">Q</dt>
            <dd class="mt-2">
              <p class="text-base text-gray-500">A</p>
            </dd>
          </div>
          <div class="mt-12">
-            <dt class="text-lg leading-6 font-medium text-gray-900">Q</dt>
+            <dt class="text-lg leading-6 font-medium">Q</dt>
            <dd class="mt-2">
              <p class="text-base text-gray-500">A</p>
            </dd>
@@ -227,4 +195,3 @@
    </div>
  </div>
 </div>
-<Footer />
--- a/src/components/AddTrackModal.svelte
+++ b/src/components/AddTrackModal.svelte
@@ -0,0 +1,224 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import { clickOutside } from "./outsideclick";
+  import { focusTrap } from "svelte-focus-trap";
+  import { tracks as tracksstore } from "../store.js";
+  import { TrackService } from "@odit/lfk-client-js";
+  import Toastify from "toastify-js";
+  import "toastify-js/src/toastify.css";
+  export let modal_open;
+  let trackname_input;
+  function focus(el) {
+    el.focus();
+  }
+  $: trackname_input_value = "";
+  $: track_min_duration = 0;
+  $: tracklength = 0;
+  $: processed_last_submit = true;
+  $: smart_track_min_duration_placeholder = parseInt(tracklength || 0) * 0.369;
+  $: isTracknameValid = trackname_input_value.trim().length === 0;
+  $: isTracklengthValid = tracklength <= 0;
+  $: trackMintimevalid = track_min_duration >= 0;
+  $: createbtnenabled = !isTracknameValid && !isTracklengthValid;
+  (function () {
+    document.onkeydown = function (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: $_("track-is-being-added"),
+        duration: -1,
+      }).showToast();
+      TrackService.trackControllerPost({
+        distance: parseInt(tracklength),
+        name: trackname_input_value,
+        minimumLapTime: track_min_duration,
+      })
+        .then((result) => {
+          trackname_input_value = "";
+          track_min_duration = 0;
+          tracklength = 0;
+          modal_open = false;
+          //
+          Toastify({
+            text: $_("track-added"),
+            duration: 500,
+            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+          }).showToast();
+          let storeval = [];
+          tracksstore.subscribe((val) => {
+            storeval = val;
+          });
+          storeval.push(result);
+          tracksstore.set(storeval);
+        })
+        .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
+                class="h-6 w-6 text-blue-600"
+                fill="none"
+                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>
+            </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-track')}
+              </h3>
+              <div class="mt-2 mb-6">
+                <p class="text-sm text-gray-500">
+                  {$_('please-provide-the-required-information-to-add-a-new-track')}
+                </p>
+              </div>
+              <div class="grid grid-cols-6 gap-6">
+                <div class="col-span-6">
+                  <label
+                    for="trackname"
+                    class="block text-sm font-medium text-gray-700">{$_('track-name')}</label>
+                  <input
+                    use:focus
+                    autocomplete="off"
+                    placeholder={$_('track-name')}
+                    class:border-red-500={isTracknameValid}
+                    class:focus:border-red-500={isTracknameValid}
+                    class:focus:ring-red-500={isTracknameValid}
+                    bind:value={trackname_input_value}
+                    bind:this={trackname_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" />
+                  {#if isTracknameValid}
+                    <span
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      Track name must not be empty
+                    </span>
+                  {/if}
+                </div>
+                <div class="col-span-6">
+                  <label
+                    for="track_length_m"
+                    class="block text-sm font-medium text-gray-700">{$_('track-length-in-m')}</label>
+                  <div class="mt-1 flex rounded-md shadow-sm">
+                    <input
+                      autocomplete="off"
+                      class:border-red-500={isTracklengthValid}
+                      class:focus:border-red-500={isTracklengthValid}
+                      class:focus:ring-red-500={isTracklengthValid}
+                      bind:value={tracklength}
+                      type="number"
+                      name="track_length_m"
+                      class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 p-2"
+                      placeholder="1000" />
+                    <span
+                      class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm">m</span>
+                  </div>
+                  {#if isTracklengthValid}
+                    <span
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      Track length must be greater than 0
+                    </span>
+                  {/if}
+                </div>
+                <div class="col-span-6">
+                  <label
+                    for="track_min_duration"
+                    class="block text-sm font-medium text-gray-700">{$_('minimum-lap-time-in-s')}</label>
+                  <div class="mt-1 flex rounded-md shadow-sm">
+                    <input
+                      autocomplete="off"
+                      class:border-red-500={!trackMintimevalid}
+                      class:focus:border-red-500={!trackMintimevalid}
+                      class:focus:ring-red-500={!trackMintimevalid}
+                      bind:value={track_min_duration}
+                      type="number"
+                      name="track_min_duration"
+                      class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 p-2"
+                      placeholder={smart_track_min_duration_placeholder} />
+                    <span
+                      class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm">s</span>
+                  </div>
+                  {#if !trackMintimevalid}
+                    <span
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      minimum lap time must be a positive number or 0
+                    </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}
--- a/src/components/AddUserModal.svelte
+++ b/src/components/AddUserModal.svelte
@@ -0,0 +1,264 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import { clickOutside } from "./outsideclick";
+  import { focusTrap } from "svelte-focus-trap";
+  import { tracks as tracksstore } from "../store.js";
+  import { TrackService, UserService } from "@odit/lfk-client-js";
+  import isEmail from "validator/es/lib/isEmail";
+  import Toastify from "toastify-js";
+  import "toastify-js/src/toastify.css";
+  import About from "./About.svelte";
+  export let modal_open;
+  let firstname_input;
+  let lastname_input;
+  let middlename_input;
+  let password_input;
+  let email_input;
+  function focus(el) {
+    el.focus();
+  }
+  $: middlename_input_value = "";
+  $: password_input_value = "";
+  $: email_input_value = "";
+  $: lastname_input_value = "";
+  $: firstname_input_value = "";
+  $: track_min_duration = 0;
+  $: tracklength = 0;
+  $: processed_last_submit = true;
+  $: isPasswordValid = password_input_value.trim().length === 0;
+  $: isEmailValid = isEmail(email_input_value);
+  $: isLastnameValid = lastname_input_value.trim().length === 0;
+  $: isFirstnameValid = firstname_input_value.trim().length === 0;
+  $: createbtnenabled = !isFirstnameValid && !isLastnameValid;
+  (function () {
+    document.onkeydown = function (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: "User is being added...",
+        duration: -1,
+      }).showToast();
+      UserService.userControllerPost({
+        firstname: firstname_input_value,
+        lastname: lastname_input_value,
+        middlename: middlename_input_value,
+        email:email_input_value,password:password_input_value
+      })
+        .then((result) => {
+          firstname_input_value = "";
+          lastname_input_value = "";
+          middlename_input_value = "";
+          modal_open = false;
+          //
+          Toastify({
+            text: "User added",
+            duration: 500,
+            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+          }).showToast();
+          let storeval = [];
+          tracksstore.subscribe((val) => {
+            storeval = val;
+          });
+          storeval.push(result);
+          tracksstore.set(storeval);
+        })
+        .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
+                class="h-6 w-6 text-blue-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>
+            </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 User
+              </h3>
+              <div class="mt-2 mb-6">
+                <p class="text-sm text-gray-500">
+                  Please provide the required information to add a new user.
+                </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="password"
+                    class="block text-sm font-medium text-gray-700">Password</label>
+                  <input
+                    autocomplete="off"
+                    placeholder="Password"
+                    class:border-red-500={isPasswordValid}
+                    class:focus:border-red-500={isPasswordValid}
+                    class:focus:ring-red-500={isPasswordValid}
+                    bind:value={password_input_value}
+                    bind:this={password_input}
+                    type="password"
+                    name="password"
+                    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 isPasswordValid}
+                    <span
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      Password is required
+                    </span>
+                  {/if}
+                </div>
+                <div class="col-span-6">
+                  <label
+                    for="email"
+                    class="block text-sm font-medium text-gray-700">E-Mail</label>
+                  <input
+                    autocomplete="off"
+                    placeholder="E-Mail"
+                    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}
+                    <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}
--- a/src/components/ComponentDump.svelte
+++ b/src/components/ComponentDump.svelte
@@ -0,0 +1,75 @@
+<script>
+  import Avatars from "./Avatars.svelte";
+  import Badges from "./Badges.svelte";
+  import BreadcrumbNav from "./BreadcrumbNav.svelte";
+  import FileUpload from "./FileUpload.svelte";
+  import Pagination from "./Pagination.svelte";
+  import Table from "./Table.svelte";
+  import Tabs from "./Tabs.svelte";
+  import Tags from "./Tags.svelte";
+</script>
+
+<div class="border-4 border-dashed rounded h-96 mb-4" />
+<div class="mb-8">
+  <FileUpload />
+</div>
+<div class="mb-8">
+  <Tabs />
+</div>
+<div class="mb-8">
+  <Tags />
+</div>
+<div class="mb-8">
+  <Badges />
+</div>
+<div class="mb-8">
+  <Avatars />
+</div>
+<Pagination />
+<div class="mb-8">
+  <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">
+  <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>
+      <div class="text-sm font-bold"><span>Text inputs</span></div>
+    </div>
+  </div>
+  <div class="flex flex-col lg:flex-row lg:flex-wrap w-full lg:space-x-4">
+    <div class="w-full lg:w-1/4">
+      <div class="form-element ">
+        <div class="form-label">Label</div><input
+          name="name"
+          type="text"
+          class="form-input"
+          placeholder="Enter something..." />
+        <div class="form-hint">This is a hint</div>
+      </div>
+    </div>
+    <div class="w-full lg:w-1/4">
+      <div class="form-element ">
+        <div class="form-label">First name</div><input
+          name="name"
+          type="text"
+          class="form-input form-input-invalid"
+          placeholder="john@example.com" />
+        <div class="form-error">First name is required</div>
+      </div>
+    </div>
+    <div class="w-full lg:w-1/4">
+      <div class="form-element ">
+        <div class="form-label">First name</div><input
+          name="name"
+          type="text"
+          class="form-input form-input-valid"
+          placeholder="john@example.com" />
+        <div class="form-success">First name is valid</div>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="mb-8">
+  <BreadcrumbNav />
+</div>
--- a/src/components/Dash.svelte
+++ b/src/components/Dash.svelte
@@ -538,7 +538,7 @@
              stroke-linejoin="round" size="18" height="18" width="18" xmlns="http://www.w3.org/2000/svg">
              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
            </svg><span
-              class="absolute uppercase font-bold inline-flex text-center p-0 leading-none text-2xs h-4 w-4 inline-flex items-center justify-center rounded-full bg-blue-500 text-white"
+              class="absolute uppercase font-bold inline-flex text-center p-0 leading-none text-2xs h-4 w-4 items-center justify-center rounded-full bg-blue-500 text-white"
              style="top:14px;right:8px">5</span></button>
          <div class="dropdown absolute top-0 right-0 mt-16 ">
            <div class="dropdown-content w-64 bottom-start">
@@ -659,7 +659,7 @@
        <div class="relative"><button class="flex h-16 w-8 rounded-full ml-2 relative"><span
              class="absolute top-0 left-0 pt-4"><img class="h-8 w-8 rounded-full shadow" src="/images/faces/m1.png"
                alt="avatar"><span
-                class="absolute uppercase font-bold inline-flex text-center p-0 leading-none text-2xs h-4 w-4 inline-flex items-center justify-center rounded-full bg-red-500 text-white shadow-outline-white"
+                class="absolute uppercase font-bold inline-flex text-center p-0 leading-none text-2xs h-4 w-4 items-center justify-center rounded-full bg-red-500 text-white shadow-outline-white"
                style="top:10px;right:-4px">2</span></span></button>
          <div class="dropdown absolute top-0 right-0 mt-16 ">
            <div class="dropdown-content w-48 bottom-end">
@@ -672,7 +672,7 @@
                        <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
                        <polyline points="22,6 12,13 2,6"></polyline>
                      </svg><span class="mx-2">Inbox</span><span
-                        class="uppercase font-bold inline-flex text-center p-0 leading-none text-2xs h-4 w-4 inline-flex items-center justify-center rounded-full bg-red-500 text-white ml-auto">2</span></a>
+                        class="uppercase font-bold inline-flex text-center p-0 leading-none text-2xs h-4 w-4 items-center justify-center rounded-full bg-red-500 text-white ml-auto">2</span></a>
                  </li>
                  <li class="dropdown-item"><a class="flex flex-row items-center justify-start h-10 w-full px-2"
                      href="/"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24"
@@ -682,7 +682,7 @@
                          points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
                        </polygon>
                      </svg><span class="mx-2">Messages</span><span
-                        class="uppercase font-bold inline-flex text-center p-0 leading-none text-2xs h-4 w-4 inline-flex items-center justify-center rounded-full bg-blue-500 text-white ml-auto">3</span></a>
+                        class="uppercase font-bold inline-flex text-center p-0 leading-none text-2xs h-4 w-4 items-center justify-center rounded-full bg-blue-500 text-white ml-auto">3</span></a>
                  </li>
                  <li class="dropdown-item"><a class="flex flex-row items-center justify-start h-10 w-full px-2"
                      href="/extras/user-profile"><svg stroke="currentColor" fill="none" stroke-width="2"
--- a/src/components/Dashboard.svelte
+++ b/src/components/Dashboard.svelte
@@ -1,19 +1,12 @@
 <script>
  import { _ } from "svelte-i18n";
-  import BreadcrumbNav from "./BreadcrumbNav.svelte";
-  import DataTable from "./DataTable.svelte";
-  import FileUpload from "./FileUpload.svelte";
-  import Footer from "./Footer.svelte";
-  import FormLayout from "./FormLayout.svelte";
-  import NotFound from "./NotFound.svelte";
-  import Pagination from "./Pagination.svelte";
-  import StatCards from "./StatCards.svelte";
-  import Table from "./Table.svelte";
-  import Tracks from "./Tracks.svelte";
-  import Tabs from "./Tabs.svelte";
-  import Tags from "./Tags.svelte";
-  import Badges from "./Badges.svelte";
-  import Avatars from "./Avatars.svelte";
+  import { active } from "tinro";
+  import localForage from "localforage";
+  import { router } from "tinro";
+
+  import store from "../store";
+  import NoComponentLoaded from "./NoComponentLoaded.svelte";
+  import { AuthService, OpenAPI } from "@odit/lfk-client-js";

  let activePage = "dashboard";
  let dropdown1 = false;
@@ -34,24 +27,29 @@
    return check;
  }
  $: mobile = ismobile();
+  function logout() {
+    localForage.clear();
+    location.replace("/");
+  }
 </script>

-<section class="min-h-screen bg-gray-50">
+<section class="min-h-screen bg-gray-50 dark:bg-black dark:text-gray-100">
  <nav
    class:hidden={!navOpen && mobile}
-    class="select-none fixed top-0 left-0 z-20 h-full pb-10 overflow-x-hidden overflow-y-auto transition origin-left transform bg-white border-r w-60 md:translate-x-0">
+    class="select-none fixed top-0 left-0 z-20 h-full pb-10 overflow-x-hidden overflow-y-auto transition origin-left transform border-r w-60 md:translate-x-0">
    <a href="/" class="flex items-center px-4 py-5">
      <img
-        src="https://lauf-fuer-kaya.de/Bilder/kaya-logo-quadrat.png"
+        src="/lfk-logo.png"
        alt="Logo"
        class="h-10" />
      <h3 class="text-lg">Lauf für Kaya! Admin</h3>
    </a>
    <nav class="text-sm font-medium text-gray-600" aria-label="Main Navigation">
      <a
-        class:bg-gray-100={activePage === 'dashboard'}
-        class="flex items-center px-4 py-3 text-gray-900 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
-        href="#">
+        class:dark:bg-gray-900={$router.path === '/'}
+        class:bg-gray-100={$router.path === '/'}
+        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+        href="/">
        <svg
          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"
@@ -60,39 +58,90 @@
          <path
            d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
        </svg>
-        <span>Dashboard</span>
+        <span>{$_('dashboard-title')}</span>
      </a>
      <a
-        class:bg-gray-100={activePage === 'users'}
+        class:dark:bg-gray-900={$router.path.includes('/orgs/')}
+        class:bg-gray-100={$router.path.includes('/orgs/')}
        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
-        href="/#/users/">
+        href="/orgs/">
        <svg
          class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+          fill="currentColor"
          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 20 20"
-          fill="currentColor">
+          viewBox="0 0 24 24"
+          width="24"
+          height="24"><path fill="none" d="M0 0h24v24H0z" />
          <path
-            d="M5 3a1 1 0 000 2c5.523 0 10 4.477 10 10a1 1 0 102 0C17 8.373 11.627 3 5 3z" />
-          <path
-            d="M4 9a1 1 0 011-1 7 7 0 017 7 1 1 0 11-2 0 5 5 0 00-5-5 1 1 0 01-1-1zM3 15a2 2 0 114 0 2 2 0 01-4 0z" />
-        </svg>
-        <span>Users</span>
+            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={activePage === 'runners'}
-        class="flex items-center px-4 py-3 text-gray-900 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
-        href="/#/runners/">
+        class:dark:bg-gray-900={$router.path === '/users/'}
+        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 20 20"
-          fill="currentColor">
-          <path
-            d="M7 3a1 1 0 000 2h6a1 1 0 100-2H7zM4 7a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1zM2 11a2 2 0 012-2h12a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2v-4z" />
-        </svg>
-        <span>Runners</span>
+          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>
+        <span>{$_('users')}</span>
      </a>
      <a
+        class:dark:bg-gray-900={$router.path === '/runners/'}
+        class:bg-gray-100={$router.path === '/runners/'}
+        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+        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"
+          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>
+        <span>{$_('runners')}</span>
+      </a>
+      <a
+        class:dark:bg-gray-900={$router.path === '/teams/'}
+        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>
+      <a
+        class:dark:bg-gray-900={$router.path === '/tracks/'}
+        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>
+      <a
+        class:dark:bg-gray-900={activePage === 'blub'}
        class:bg-gray-100={activePage === 'blub'}
        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
        href="#">
@@ -111,6 +160,8 @@
      </a>
      <div>
        <div
+          tabindex="0"
+          class:dark:bg-gray-900={activePage === 'blub'}
          class:bg-gray-100={activePage === 'blub'}
          class="flex items-center justify-between px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
          role="button"
@@ -130,6 +181,19 @@
            </svg>
            <span>Integrations</span>
          </div>
+          {#if dropdown1}
+            <svg
+              class="flex-shrink-0 w-4 h-4 ml-2 transition transform"
+              xmlns="http://www.w3.org/2000/svg"
+              style="transform:rotate(90deg)"
+              viewBox="0 0 20 20"
+              fill="currentColor">
+              <path
+                fill-rule="evenodd"
+                d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                clip-rule="evenodd" />
+            </svg>
+          {:else}
            <svg
              class="flex-shrink-0 w-4 h-4 ml-2 transition transform"
              xmlns="http://www.w3.org/2000/svg"
@@ -140,6 +204,7 @@
                d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                clip-rule="evenodd" />
            </svg>
+          {/if}
        </div>
        {#if dropdown1}
          <div class="mb-4">
@@ -169,12 +234,13 @@
            clip-rule="evenodd" />
          <path d="M9 11H3v5a2 2 0 002 2h4v-7zM11 18h4a2 2 0 002-2v-5h-6v7z" />
        </svg>
-        <span>Changelog</span>
+        <span>{$_('changelog')}</span>
      </a>
      <a
-        class:bg-gray-100={activePage === 'settings'}
+        class:dark:bg-gray-900={$router.path === '/settings/'}
+        class:bg-gray-100={$router.path === '/settings/'}
        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
-        href="/#/settings/">
+        href="/settings/">
        <svg
          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"
@@ -185,11 +251,13 @@
            d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z"
            clip-rule="evenodd" />
        </svg>
-        <span>Settings</span>
+        <span>{$_('settings')}</span>
      </a>
      <a
+        class:dark:bg-gray-900={$router.path === '/about/'}
+        class:bg-gray-100={$router.path === '/about/'}
        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
-        href="/#/about/">
+        href="/about/">
        <svg
          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"
@@ -200,13 +268,31 @@
          stroke-linejoin="round"
          viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" />
          <path d="M12 16v-4M12 8h.01" /></svg>
-        <span>About</span>
+        <span>{$_('about')}</span>
      </a>
+      <span
+        tabindex="0"
+        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+        on:click={() => {
+          AuthService.authControllerLogout();
+          logout();
+        }}>
+        <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 24 24"><path fill="none" d="M0 0h24v24H0z" />
+          <path
+            d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2a9.985 9.985 0 0 1 8 4h-2.71a8 8 0 1 0 .001 12h2.71A9.985 9.985 0 0 1 12 22zm7-6v-3h-8v-2h8V8l5 4-5 4z" /></svg>
+        <span>{$_('logout')}</span>
+      </span>
    </nav>
  </nav>
  <div class="ml-0 transition md:ml-60">
    <header
-      class="flex items-center justify-between w-full px-4 bg-white border-b h-14">
+      class="flex items-center justify-between w-full px-4 border-b h-14">
      <button
        on:click={() => {
          navOpen = !navOpen;
@@ -251,7 +337,7 @@
              d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" />
          </svg>
        </a>
-        <a href="/#/profile/" class="ml-4">
+        <a href="/profile/" class="ml-4">
          <img
            class="h-8 w-8 rounded-full"
            src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
@@ -259,92 +345,9 @@
        </a>
      </div>
    </header>
-    <div
-      class="p-5 overflow-x-hidden"
-      on:click={() => {
-        navOpen = false;
-      }}>
-      <!-- Add content here, remove div below -->
-      <!-- <div class="border-4 border-dashed rounded h-96" /> -->
-      <h1 class="text-3xl leading-tight">
-        <span class="font-bold">Dashboard</span><span> - hello there 👋</span>
-      </h1>
-      <div class="shadow px-6 pt-4 pb-1">
-        <BreadcrumbNav />
-      </div>
-      <div class="mb-8">
-        <FileUpload />
-      </div>
-      <div class="mb-8">
-        <DataTable />
-      </div>
-      <div class="mb-8">
-        <Tabs />
-      </div>
-      <div class="mb-8">
-        <Tags />
-      </div>
-      <div class="mb-8">
-        <Badges />
-      </div>
-      <div class="mb-8">
-        <Avatars />
-      </div>
-      <StatCards />
-      <div class="mb-8">
-        <Tracks />
-      </div>
-      <Pagination />
-      <div class="mb-8">
-        <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">
-        <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>
-            <div class="text-sm font-bold"><span>Text inputs</span></div>
-          </div>
-        </div>
-        <div class="flex flex-col lg:flex-row lg:flex-wrap w-full lg:space-x-4">
-          <div class="w-full lg:w-1/4">
-            <div class="form-element ">
-              <div class="form-label">Label</div><input
-                name="name"
-                type="text"
-                class="form-input"
-                placeholder="Enter something..." />
-              <div class="form-hint">This is a hint</div>
-            </div>
-          </div>
-          <div class="w-full lg:w-1/4">
-            <div class="form-element ">
-              <div class="form-label">First name</div><input
-                name="name"
-                type="text"
-                class="form-input form-input-invalid"
-                placeholder="john@example.com" />
-              <div class="form-error">First name is required</div>
-            </div>
-          </div>
-          <div class="w-full lg:w-1/4">
-            <div class="form-element ">
-              <div class="form-label">First name</div><input
-                name="name"
-                type="text"
-                class="form-input form-input-valid"
-                placeholder="john@example.com" />
-              <div class="form-success">First name is valid</div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="mb-8">
-        <FormLayout />
-      </div>
-      <Footer />
-      <!-- <NotFound /> -->
-    </div>
+    <slot>
+      <NoComponentLoaded />
+    </slot>
  </div>
  <!-- Sidebar Backdrop -->
  <div
--- a/src/components/FileUpload.svelte
+++ b/src/components/FileUpload.svelte
@@ -6,10 +6,10 @@
  // the name to use for the internal file input
  let name = "filepond";
  function handleInit() {
-    console.log("FilePond has initialised");
+    // console.log("FilePond has initialised");
  }
  function handleAddFile(err, fileItem) {
-    console.log("A file has been added", fileItem);
+    // console.log("A file has been added", fileItem);
  }
 </script>

--- a/src/components/Footer.svelte
+++ b/src/components/Footer.svelte
@@ -2,11 +2,8 @@
  import { _ } from "svelte-i18n";
 </script>

-<footer class="block py-4">
-  <div class="container mx-auto px-4">
-    <hr class="mb-4 border-b-1 border-gray-300" />
-    <footer class="text-gray-700 body-font">
-      <div class="container mx-auto flex items-center sm:flex-row flex-col">
+<footer class="container">
+  <hr class="mt-2 mb-4 border-b-1 border-gray-300" />
  <p class="text-sm text-gray-500 mt-4">
    Lauf für Kaya! Läufersystem - Copyright © 2020 + proudly powered by
    <a
@@ -15,7 +12,4 @@
      rel="noopener,noreferrer"
      target="_blank">ODIT.Services</a>
  </p>
-      </div>
-    </footer>
-  </div>
 </footer>
--- a/src/components/ForgotPassword.svelte
+++ b/src/components/ForgotPassword.svelte
@@ -1,27 +1,31 @@
 <script>
+  import { ApiError, AuthService } from "@odit/lfk-client-js";
  import { _ } from "svelte-i18n";
-  import store from "../store.js";
-  store.init();
-  import { push, pop, replace } from "svelte-spa-router";
-  //
-  import { OpenAPI, AuthService } from "@odit/lfk-client-js";
-  import isEmail from "validator/es/lib/isEmail";
-
-  //
  import Toastify from "toastify-js";
  import "toastify-js/src/toastify.css";
+  import isEmail from "validator/es/lib/isEmail";
+
  let reset_mail_sent = false;
  let usersEmail = "";
  function reset() {
    if (isEmail(usersEmail)) {
+      AuthService.authControllerGetResetToken({ email: usersEmail })
+        .then((resp) => {
+          console.log(resp);
+          console.log(resp.resetToken);
          Toastify({
            text: $_("mail-validation-in-progress"),
            duration: 3500,
          }).showToast();
          reset_mail_sent = true;
+        })
+        .catch((err) => {
+          console.log(err.body.name);
+          console.log(err.body.message);
+        });
    } else {
      Toastify({
-        text: $_('invalid-mail-reset'),
+        text: $_("invalid-mail-reset"),
        duration: 3500,
      }).showToast();
    }
@@ -31,11 +35,7 @@
 {#if reset_mail_sent}
  <div class="min-h-screen flex items-center justify-center bg-gray-100">
    <div class="max-w-md w-full py-12 px-6">
-      <img
-        style="height:10rem;"
-        class="mx-auto"
-        src="https://lauf-fuer-kaya.de/Bilder/kaya-logo-quadrat.png"
-        alt="" />
+      <img style="height:10rem;" class="mx-auto" src="/lfk-logo.png" alt="" />
      <p class="mt-6 text-lg text-center font-bold text-gray-900">
        {$_('application_name')}
      </p>
@@ -47,7 +47,7 @@
      <div class="mt-6">
        <div class="mt-6">
          <a
-            href="/#/"
+            href="/"
            class="block w-full text-center py-2 px-3 border border-gray-300 rounded-md text-gray-900 font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm">
            {$_('goback')}
          </a>
@@ -58,11 +58,7 @@
 {:else}
  <div class="min-h-screen flex items-center justify-center bg-gray-100">
    <div class="max-w-md w-full py-12 px-6">
-      <img
-        style="height:10rem;"
-        class="mx-auto"
-        src="https://lauf-fuer-kaya.de/Bilder/kaya-logo-quadrat.png"
-        alt="" />
+      <img style="height:10rem;" class="mx-auto" src="/lfk-logo.png" alt="" />
      <p class="mt-6 text-lg text-center font-bold text-gray-900">
        {$_('application_name')}
      </p>
@@ -125,6 +121,11 @@
              {$_('send-a-mail-to-lfk-odit-services')}
            </a>
          </div>
+          <div class="mt-6">
+            <a
+              href="/"
+              class="block w-full text-center py-2 px-3 border border-gray-300 rounded-md text-gray-900 font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm">{$_('goback')}</a>
+          </div>
        </div>
      </div>
    </div>
--- a/src/components/FormLayout.svelte
+++ b/src/components/FormLayout.svelte
@@ -55,6 +55,7 @@
            </div>

            <div>
+              <!-- svelte-ignore a11y-label-has-associated-control -->
              <label class="block text-sm font-medium text-gray-700">
                Photo
              </label>
@@ -71,6 +72,7 @@
            </div>

            <div>
+              <!-- svelte-ignore a11y-label-has-associated-control -->
              <label class="block text-sm font-medium text-gray-700">
                Cover photo
              </label>
--- a/src/components/Login.svelte
+++ b/src/components/Login.svelte
@@ -1,41 +1,50 @@
 <script>
  import store from "../store.js";
+  import localForage from "localforage";
  import { _ } from "svelte-i18n";
  store.init();
-  import { push, pop, replace } from "svelte-spa-router";
  import { OpenAPI, AuthService } from "@odit/lfk-client-js";
-  OpenAPI.BASE = config.baseurl;
  import Toastify from "toastify-js";
-  import "toastify-js/src/toastify.css";
-  import { init } from "svelte/internal";
-  let usersUsername;
-  let usersPassword = "";
+  // ------
+  let username = "demo";
+  let password = "demo";
+  let is_blocked_by_autologin = false;
  let last_loginclick_processed = true;

+  localForage.getItem("logindata", (err, value) => {
+    if (value) {
+      if (value.access_token && value.refresh_token) {
+        is_blocked_by_autologin = true;
+        OpenAPI.TOKEN = value.access_token;
+        const jwtinfo = JSON.parse(atob(OpenAPI.TOKEN.split(".")[1]));
+        store.login(value.access_token, jwtinfo);
+        Toastify({
+          text: $_("welcome_wavinghand"),
+          duration: 500,
+          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+        }).showToast();
+      }
+    }
+  });
+
  const login = async () => {
    // prevent login button spamming
-    if (last_loginclick_processed) {
+    if (last_loginclick_processed && is_blocked_by_autologin === false) {
      last_loginclick_processed = false;
      Toastify({
        text: $_("login_is_checked"),
        duration: 500,
      }).showToast();
-      let username = usersUsername;
-      let password = usersPassword;
-      // if ((usersUsername + "").length == 0) {
-      username = config.fallback_username || "demo";
-      // }
-      // if ((usersPassword + "").length == 0) {
-      password = config.fallback_password || "demo";
-      // }
      AuthService.authControllerLogin({
        username,
        password,
      })
-        .then((result) => {
+        .then(async (result) => {
+          await localForage.setItem("logindata", result);
          OpenAPI.TOKEN = result.access_token;
-          store.login(result.access_token);
-          replace("/dashboard/");
+          const jwtinfo = JSON.parse(atob(OpenAPI.TOKEN.split(".")[1]));
+          store.login(result.access_token, jwtinfo);
+          location.replace("/");
          Toastify({
            text: $_("welcome_wavinghand"),
            duration: 500,
@@ -72,12 +81,8 @@

 <div
  class="min-h-screen flex items-center justify-center bg-gray-100 text-gray-900">
-  <div class="max-w-md w-full py-12 px-6">
-    <img
-      style="height:10rem;"
-      class="mx-auto"
-      src="https://lauf-fuer-kaya.de/Bilder/kaya-logo-quadrat.png"
-      alt="" />
+  <div class="max-w-md w-full py-12 px-6" role="main">
+    <img style="height:10rem;" class="mx-auto" src="/lfk-logo.png" alt="" />
    <p class="mt-6 text-lg text-center font-bold">{$_('application_name')}</p>
    <p class="mt-6 text-sm text-center">{$_('log_in_to_your_account')}</p>
    <div>
@@ -92,14 +97,14 @@
            class="border-gray-300 placeholder-gray-500 appearance-none rounded-none relative block w-full px-3 py-2 border rounded-t-md focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm"
            on:keydown={handleKeydown}
            placeholder={$_('email_address_or_username')}
-            bind:value={usersUsername} />
+            bind:value={username} />
        </div>
        <div class="-mt-px relative">
          <input
            aria-label={$_('password')}
            type="password"
            required=""
-            bind:value={usersPassword}
+            bind:value={password}
            class="border-gray-300 placeholder-gray-500 appearance-none rounded-none relative block w-full px-3 py-2 border rounded-b-md focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm"
            on:keydown={handleKeydown}
            placeholder={$_('password')} />
@@ -128,7 +133,7 @@
    </div>
    <div class="mt-2">
      <a
-        href="/#/forgot_password"
+        href="/forgot_password"
        class="block w-full text-center py-2 px-3 border border-gray-300 rounded-md font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm">
        {$_('forgot_password?')}
      </a>
--- a/src/components/LoginAlt.svelte
+++ b/src/components/LoginAlt.svelte
@@ -12,7 +12,7 @@
    <div>
      <img
        class="mx-auto h-12 w-auto"
-        src="https://lauf-fuer-kaya.de/Bilder/kaya-logo-quadrat.png"
+        src="/lfk-logo.png"
        alt="" />
      <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">
        Sign in to your account
--- a/src/components/MainDashContent.svelte
+++ b/src/components/MainDashContent.svelte
@@ -0,0 +1,25 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import StatCards from "./StatCards.svelte";
+  import store from "../store";
+  import ComponentDump from "./ComponentDump.svelte";
+  let navOpen = false;
+</script>
+
+<div
+  class="p-5 overflow-x-hidden"
+  on:click={() => {
+    navOpen = false;
+  }}>
+  <!-- <div class="border-4 border-dashed rounded h-96" /> -->
+  <h1 class="text-3xl leading-tight">
+    <span class="font-extrabold">{$_('dashboard-title')}</span> <span>
+      -
+      {$_('dashboard-greeting')},
+      <span
+        class="text-blue-500">{store.state.jwtinfo.userdetails.firstname}</span>
+      👋</span>
+  </h1>
+  <StatCards />
+  <ComponentDump />
+</div>
--- a/src/components/NoComponentLoaded.svelte
+++ b/src/components/NoComponentLoaded.svelte
@@ -0,0 +1,23 @@
+<script>
+  import { _ } from "svelte-i18n";
+</script>
+
+<body class="antialiased font-sans">
+  <div class="flex min-h-screen">
+    <div class="w-full bg-white flex items-center justify-center ">
+      <div class="max-w-sm m-8">
+        <div class="text-black text-5xl md:text-15xl font-black">
+          Internal Error
+        </div>
+        <div class="w-16 h-1 bg-purple-light my-3 md:my-6" />
+        <p
+          class="text-grey-darker text-2xl md:text-3xl font-light mb-8 leading-normal">
+          Something went wrong in the UI logic
+        </p>
+        <a
+          href="/"
+          class="bg-transparent text-grey-darkest font-bold uppercase tracking-wide py-3 px-6 border-2 border-grey-light hover:border-grey rounded-lg">{$_('goback')}</a>
+      </div>
+    </div>
+  </div>
+</body>
--- a/src/components/OrgDetail.svelte
+++ b/src/components/OrgDetail.svelte
@@ -0,0 +1,83 @@
+<script>
+  export let params;
+</script>
+
+<section class="container p-5">
+  <span class="mb-1 text-3xl font-extrabold leading-tight">
+    Orgs
+  </span>
+  <p class="mb-8 text-lg text-gray-500">
+    configure the tracks & minimum lap times
+  </p>
+  <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="mr-2 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 stroke-current"
+              height="1em"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"><path
+                d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+              <polyline points="9 22 9 12 15 12 15 22" /></svg>
+          </li>
+          <li class="flex items-center">
+            <a class="mr-2" href="/">Home</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="mr-2 flex items-center">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              width="24"
+              height="24"><path fill="none" d="M0 0h24v24H0z" />
+              <path
+                d="M21 20h2v2H1v-2h2V3a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v17zm-2 0V4H5v16h14zM8 11h3v2H8v-2zm0-4h3v2H8V7zm0 8h3v2H8v-2zm5 0h3v2h-3v-2zm0-4h3v2h-3v-2zm0-4h3v2h-3V7z" /></svg>
+          </li>
+          <li class="flex items-center">
+            <a class="mr-2" href="./">Orgs</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">Org-Details #{params.orgid}</span>
+          </li>
+        </ol>
+      </nav>
+    </div>
+  </div>
+</section>
--- a/src/components/Orgs.svelte
+++ b/src/components/Orgs.svelte
@@ -0,0 +1,13 @@
+<script>
+  import { _ } from "svelte-i18n";
+</script>
+
+<section class="container p-5">
+  <span class="mb-1 text-3xl font-extrabold leading-tight">
+    Orgs
+  </span>
+  <p class="mb-8 text-lg text-gray-500">
+    add, delete, edit organizations
+  </p>
+  <nav><a class="underline" href="./1">Org 1</a></nav>
+</section>
--- a/src/components/PromiseError.svelte
+++ b/src/components/PromiseError.svelte
@@ -0,0 +1,11 @@
+<script>
+  import { _ } from "svelte-i18n";
+  export let error;
+</script>
+
+<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>
--- a/src/components/Runners.svelte
+++ b/src/components/Runners.svelte
@@ -0,0 +1,10 @@
+<script>
+  import { _ } from "svelte-i18n";
+</script>
+
+<section class="container p-5">
+  <span class="mb-1 text-3xl font-extrabold leading-tight">
+    {$_('runners')}
+  </span>
+  <p class="mb-8 text-lg text-gray-500">läuft bei ihnen</p>
+</section>
--- a/src/components/Settings.svelte
+++ b/src/components/Settings.svelte
@@ -0,0 +1,35 @@
+<script>
+  import { _ } from "svelte-i18n";
+import FormLayout from "./FormLayout.svelte";
+</script>
+
+<div class="pt-12 px-4 sm:px-6 lg:px-8 lg:pt-20 bg-gray-900 pb-12">
+  <div class="text-center mb-8">
+    <h1
+      class="mt-9 font-display text-4xl leading-none font-semibold text-white sm:text-5xl lg:text-6xl">
+      🔨<br />{$_('settings')}
+    </h1>
+    <p
+      class="mt-2 max-w-xl mx-auto text-xl lg:max-w-3xl lg:text-2xl text-gray-300">
+      <span class="text-lg">configure your profile however you want</span>
+    </p>
+  </div>
+</div>
+
+<div class="pt-0 pb-16 bg-gray-50 overflow-hidden lg:pt-12 lg:py-24">
+  <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
+    <!-- <h2 class="text-4xl font-display font-semibold text-gray-900 md:text-5xl">
+      General
+    </h2> -->
+    <div
+      class="max-w-3xl mx-auto text-xl leading-8 font-medium text-gray-900 mb-16">
+      <p class="text-center">
+        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Temporibus et
+        amet voluptate nulla accusantium vero blanditiis nobis facere veritatis.
+        Impedit deserunt saepe aliquid unde consequuntur officia consequatur
+        fugit iusto dolorem?
+      </p>
+    </div>
+    <FormLayout />
+  </div>
+</div>
--- a/src/components/StatCards.svelte
+++ b/src/components/StatCards.svelte
@@ -1,19 +1,120 @@
 <script>
+  import { StatsService } from "@odit/lfk-client-js";
  import { _ } from "svelte-i18n";
+  const stats_promise = StatsService.statsControllerGet();
 </script>

-<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">
+<!--  -->
+<h1>{$_('general-stats')}</h1>
+{#await stats_promise}
  <div
-      class="widget w-full p-4 rounded-lg bg-white border border-grey-100 dark:bg-grey-895 dark:border-grey-890">
+    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">{$_('stats-are-being-loaded')}</p>
+    <p class="text-sm">{$_('this-might-take-a-moment')}</p>
+  </div>
+{:then stats}
+  <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">
+    <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">
        <div class="flex flex-row items-center justify-between">
          <div class="flex flex-col">
            <div class="text-xs uppercase font-light text-grey-500">
              {$_('runners')}
            </div>
-          <div class="text-xl font-bold">69</div>
+            <div class="text-xl font-bold">{stats.total_runners}</div>
+          </div>
+          <svg
+            height="24"
+            width="24"
+            fill="currentColor"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none" />
+            <path
+              d="M13.49 5.48c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm-3.6 13.9l1-4.4 2.1 2v6h2v-7.5l-2.1-2 .6-3c1.3 1.5 3.3 2.5 5.5 2.5v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1-.3 0-.5.1-.8.1l-5.2 2.2v4.7h2v-3.4l1.8-.7-1.6 8.1-4.9-1-.4 2 7 1.4z" /></svg>
+        </div>
+      </div>
+    </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">
+        <div class="flex flex-row items-center justify-between">
+          <div class="flex flex-col">
+            <div class="text-xs uppercase font-light text-grey-500">
+              {$_('total-scans')}
+            </div>
+            <div class="text-xl font-bold">{stats.total_scans}</div>
          </div><svg
+            stroke="currentColor"
+            fill="currentColor"
+            stroke-width="2"
+            viewBox="0 0 24 24"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            size="24"
+            class="stroke-current text-grey-500"
+            height="24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"><polyline
+              points="22 12 18 12 15 21 9 3 6 12 2 12" /></svg>
+        </div>
+      </div>
+    </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">
+        <div class="flex flex-row items-center justify-between">
+          <div class="flex flex-col">
+            <div class="text-xs uppercase font-light text-grey-500">
+              {$_('total-donations')}
+            </div>
+            <div class="text-xl font-bold">{stats.total_donation} €</div>
+          </div><svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="24"
+            fill="currentColor"
+            width="24"><path d="M0 0h24v24H0z" fill="none" />
+            <path
+              d="M15 18.5A6.48 6.48 0 019.24 15H15v-2H8.58c-.05-.33-.08-.66-.08-1s.03-.67.08-1H15V9H9.24A6.491 6.491 0 0115 5.5c1.61 0 3.09.59 4.23 1.57L21 5.3A8.955 8.955 0 0015 3c-3.92 0-7.24 2.51-8.48 6H3v2h3.06a8.262 8.262 0 000 2H3v2h3.52c1.24 3.49 4.56 6 8.48 6 2.31 0 4.41-.87 6-2.3l-1.78-1.77c-1.13.98-2.6 1.57-4.22 1.57z" /></svg>
+        </div>
+      </div>
+    </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">
+        <div class="flex flex-row items-center justify-between">
+          <div class="flex flex-col">
+            <div class="text-xs uppercase font-light text-grey-500">
+              {$_('total-distance')}
+            </div>
+            <div class="text-xl font-bold">
+              {stats.total_distance / 1000}
+              km
+            </div>
+          </div>
+          <svg
+            fill="currentColor"
+            xmlns="http://www.w3.org/2000/svg"
+            height="24"
+            width="24"><path d="M0 0h24v24H0z" fill="none" />
+            <path
+              d="M21 6H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 10H3V8h2v4h2V8h2v4h2V8h2v4h2V8h2v4h2V8h2v8z" /></svg>
+        </div>
+      </div>
+    </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">
+        <div class="flex flex-row items-center justify-between">
+          <div class="flex flex-col">
+            <div class="text-xs uppercase font-light text-grey-500">
+              {$_('count_teams')}
+            </div>
+            <div class="text-xl font-bold">{stats.total_teams}</div>
+          </div>
+          <svg
            stroke="currentColor"
            fill="none"
            stroke-width="2"
@@ -31,66 +132,34 @@
            <path d="M16 3.13a4 4 0 0 1 0 7.75" /></svg>
        </div>
      </div>
-  </div>
-  <div class="w-full lg:w-1/4">
+    </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">
+        class="widget w-full p-4 rounded-lg bg-white border border-grey-100 dark:bg-grey-895 dark:border-grey-890 dark:bg-gray-900 dark:text-white">
        <div class="flex flex-row items-center justify-between">
          <div class="flex flex-col">
            <div class="text-xs uppercase font-light text-grey-500">
-            {$_('total-scans')}
+              {$_('count_organizations')}
            </div>
-          <div class="text-xl font-bold">1500</div>
-        </div><svg
-          stroke="currentColor"
-          fill="none"
-          stroke-width="2"
-          viewBox="0 0 24 24"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          size="24"
-          class="stroke-current text-grey-500"
+            <div class="text-xl font-bold">{stats.total_orgs}</div>
+          </div>
+          <svg
            height="24"
+            fill="currentColor"
            width="24"
-          xmlns="http://www.w3.org/2000/svg"><polyline
-            points="22 12 18 12 15 21 9 3 6 12 2 12" /></svg>
-      </div>
-    </div>
-  </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">
-      <div class="flex flex-row items-center justify-between">
-        <div class="flex flex-col">
-          <div class="text-xs uppercase font-light text-grey-500">
-            {$_('total-donations')}
-          </div>
-          <div class="text-xl font-bold">5000,00 €</div>
-        </div><svg
            xmlns="http://www.w3.org/2000/svg"
-          height="24"
-          width="24"><path d="M0 0h24v24H0z" fill="none" />
+            viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z" />
            <path
-            d="M15 18.5A6.48 6.48 0 019.24 15H15v-2H8.58c-.05-.33-.08-.66-.08-1s.03-.67.08-1H15V9H9.24A6.491 6.491 0 0115 5.5c1.61 0 3.09.59 4.23 1.57L21 5.3A8.955 8.955 0 0015 3c-3.92 0-7.24 2.51-8.48 6H3v2h3.06a8.262 8.262 0 000 2H3v2h3.52c1.24 3.49 4.56 6 8.48 6 2.31 0 4.41-.87 6-2.3l-1.78-1.77c-1.13.98-2.6 1.57-4.22 1.57z" /></svg>
+              d="M17 11V3H7v4H3v14h8v-4h2v4h8V11h-4zM7 19H5v-2h2v2zm0-4H5v-2h2v2zm0-4H5V9h2v2zm4 4H9v-2h2v2zm0-4H9V9h2v2zm0-4H9V5h2v2zm4 8h-2v-2h2v2zm0-4h-2V9h2v2zm0-4h-2V5h2v2zm4 12h-2v-2h2v2zm0-4h-2v-2h2v2z" /></svg>
        </div>
      </div>
+    </a>
  </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">
-      <div class="flex flex-row items-center justify-between">
-        <div class="flex flex-col">
-          <div class="text-xs uppercase font-light text-grey-500">
-            {$_('total-distance')}
+{: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>
-          <div class="text-xl font-bold">100.0 km</div>
-        </div>
-        <svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path
-            d="M0 0h24v24H0z"
-            fill="none" />
-          <path
-            d="M21 6H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 10H3V8h2v4h2V8h2v4h2V8h2v4h2V8h2v4h2V8h2v8z" /></svg>
-      </div>
-    </div>
-  </div>
-</div>
+{/await}
--- a/src/components/Table.svelte
+++ b/src/components/Table.svelte
@@ -32,7 +32,7 @@
              </th>
            </tr>
          </thead>
-          <tbody class="bg-white divide-y divide-gray-200">
+          <tbody class="divide-y divide-gray-200">
            <tr>
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="flex items-center">
--- a/src/components/Teams.svelte
+++ b/src/components/Teams.svelte
@@ -0,0 +1,10 @@
+<script>
+  import { _ } from "svelte-i18n";
+</script>
+
+<section class="container p-5">
+  <span class="mb-1 text-3xl font-extrabold leading-tight">
+    {$_('teams')}
+  </span>
+  <p class="mb-8 text-lg text-gray-500">everything is more fun together 🏃‍♂️🏃‍♀️🏃‍♂️</p>
+</section>
--- a/src/components/Tracks.svelte
+++ b/src/components/Tracks.svelte
@@ -1,33 +1,188 @@
 <script>
-  import { _ } from "svelte-i18n";
-  import store from "../store.js";
+  import { _, json } from "svelte-i18n";
+  import Toastify from "toastify-js";
+  import TracksEmptyState from "./TracksEmptyState.svelte";
  import { TrackService } from "@odit/lfk-client-js";
-  let tracks_promise = TrackService.trackControllerGetAll();
+  const tracks_promise = TrackService.trackControllerGetAll();
+  import { getlang } from "./datatable_i18n";
+  import { Grid, html } from "gridjs";
+  import "gridjs/dist/theme/mermaid.css";
+  import { tracks as tracksstore } from "../store.js";
+  $: trackscache = [];
+  $: blocked = [];
+  let table;
+  let datatable;
+  let datatable_inited = false;
+  tracksstore.subscribe((val) => {
+    trackscache = val;
+    setTimeout(() => {
+      if (val.length > 0) {
+        renderdatatable();
+      }
+    }, 100);
+  });
+  tracks_promise.then((data) => {
+    tracksstore.set(data);
+  });
+  window.track__edit_cancel = () => renderdatatable();
+  window.track__edit_save = () => {
+    const trackid = parseInt(window.event.target.getAttribute("data-trackid"));
+    if (blocked.includes(trackid)) {
+      //
+    } else {
+      blocked.push(trackid);
+      const elem = document.querySelector(
+        `[data-id="triggered_table_actions_${trackid}"]`
+      ).parentNode.parentNode.parentNode;
+      Toastify({
+        text: "Track is being updated...",
+        duration: 500,
+      }).showToast();
+      TrackService.trackControllerPut(trackid, {
+        id: trackid,
+        name: elem.childNodes[0].childNodes[0].value,
+        distance: parseInt(elem.childNodes[1].childNodes[0].value),
+        minimumLapTime: parseInt(elem.childNodes[2].childNodes[0].value),
+      })
+        .then((r) => {
+          Toastify({
+            text: "Track was updated!",
+            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+            duration: 1000,
+          }).showToast();
+          blocked = blocked.filter((e) => e !== trackid);
+          document
+            .querySelector(`[data-id="default_table_actions_${trackid}"]`)
+            .classList.remove("hidden");
+          document
+            .querySelector(`[data-id="triggered_table_actions_${trackid}"]`)
+            .classList.add("hidden");
+          //
+          elem.childNodes[0].innerHTML = `<td data-column-id="trackName" class="gridjs-td">${elem.childNodes[0].childNodes[0].value}</td>`;
+          elem.childNodes[1].innerHTML = `<td data-column-id="trackName" class="gridjs-td">${elem.childNodes[1].childNodes[0].value}</td>`;
+          elem.childNodes[2].innerHTML = `<td data-column-id="trackName" class="gridjs-td">${elem.childNodes[2].childNodes[0].value}</td>`;
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    }
+  };
+  window.track__delete_handler = () => {
+    const trackid = parseInt(window.event.target.getAttribute("data-trackid"));
+    document
+      .querySelector(`[data-id="default_table_actions_${trackid}"]`)
+      .classList.add("hidden");
+    document
+      .querySelector(`[data-id="deleteconfirmation_table_actions_${trackid}"]`)
+      .classList.remove("hidden");
+  };
+  window.track__delete_cancel = () => {
+    const trackid = parseInt(window.event.target.getAttribute("data-trackid"));
+    document
+      .querySelector(`[data-id="default_table_actions_${trackid}"]`)
+      .classList.remove("hidden");
+    document
+      .querySelector(`[data-id="deleteconfirmation_table_actions_${trackid}"]`)
+      .classList.add("hidden");
+  };
+  window.track__delete_confirm = () => {
+    const trackid = parseInt(window.event.target.getAttribute("data-trackid"));
+    TrackService.trackControllerRemove(trackid)
+      .then(() => {
+        const newStoreVal = trackscache.filter((obj) => obj.id !== trackid);
+        tracksstore.set(newStoreVal);
+        renderdatatable();
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+  window.track__edit_handler = () => {
+    const trackid = parseInt(window.event.target.getAttribute("data-trackid"));
+    document
+      .querySelector(`[data-id="default_table_actions_${trackid}"]`)
+      .classList.add("hidden");
+    document
+      .querySelector(`[data-id="triggered_table_actions_${trackid}"]`)
+      .classList.remove("hidden");
+    const elem = document.querySelector(
+      `[data-id="triggered_table_actions_${trackid}"]`
+    ).parentNode.parentNode.parentNode;
+    const trackname = elem.childNodes[0].textContent;
+    const tracklength = parseInt(elem.childNodes[1].textContent);
+    const trackmintime = parseInt(elem.childNodes[2].textContent);
+    elem.childNodes[0].innerHTML = `<input type="text" value="${trackname}" 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">`;
+    elem.childNodes[1].innerHTML = `<input type="text" value="${tracklength}" name="tracklength" 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">`;
+    elem.childNodes[2].innerHTML = `<input type="text" value="${trackmintime}" name="trackmintime" 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">`;
+  };
+  //
+  function renderdatatable() {
+    let tabledata = [];
+    trackscache.forEach((track) => {
+      tabledata.push([
+        track.name,
+        track.distance,
+        track.minimumLapTime || 0,
+        html(`
+        <div class="hidden" data-id="triggered_table_actions_${track.id}">
+          <button class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-400 text-base font-medium text-white sm:w-auto sm:text-sm" data-trackid="${track.id}" onclick="track__edit_save()">Save</button>
+          <button class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-500 text-base font-medium text-white sm:w-auto sm:text-sm" data-trackid="${track.id}" onclick="track__edit_cancel()">Cancel</button>
+        </div>
+        <div data-id="default_table_actions_${track.id}">
+          <button class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-400 text-base font-medium text-white sm:w-auto sm:text-sm" data-trackid="${track.id}" onclick="track__edit_handler()">Edit</button>
+          <button class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-500 text-base font-medium text-white sm:w-auto sm:text-sm" data-trackid="${track.id}" onclick="track__delete_handler()">Delete</button>
+        </div>
+        <div class="hidden" data-id="deleteconfirmation_table_actions_${track.id}">
+          <button class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-400 text-base font-medium text-white sm:w-auto sm:text-sm" data-trackid="${track.id}" onclick="track__delete_cancel()">Cancel</button>
+          <button class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-500 text-base font-medium text-white sm:w-auto sm:text-sm" data-trackid="${track.id}" onclick="track__delete_confirm()">Confirm</button>
+        </div>
+      `),
+      ]);
+    });
+
+    if (datatable_inited === false) {
+      datatable = new Grid({
+        columns: [
+          $_("track-name"),
+          $_("track-length-in-m"),
+          $_("minimum-lap-time-in-s"),
+          $_("action"),
+        ],
+        language: getlang($json("datatable")),
+        sort: true,
+        search: { enabled: true },
+        data: tabledata,
+        pagination: {
+          enabled: true,
+          limit: 25,
+          summary: false,
+        },
+      }).render(table);
+      datatable_inited = true;
+    } else {
+      datatable.updateConfig({ data: tabledata }).forceRender();
+    }
+  }
 </script>

-<h1>{$_('tracks')}</h1>
+{#if trackscache.length > 0}
+  <div bind:this={table} />
+{/if}
 {#await tracks_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">track data is being loaded...</p>
-    <p class="text-sm">This might take a moment 👀</p>
+    <p class="font-bold">{$_('track-data-is-being-loaded')}</p>
+    <p class="text-sm">{$_('this-might-take-a-moment')}</p>
  </div>
-{:then tracks}
-  {#if tracks.length > 0}
-    <h4>{tracks.length}</h4>
-    <hr />
-    <ul>
-      {#each tracks as item}
-        <li>{item.name}</li>
-        <li>{item.distance}</li>
-      {/each}
-    </ul>
-  {:else}keine Tracks{/if}
+{:then}
+  {#if trackscache.length === 0}
+    <TracksEmptyState />
+  {/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">😢 Error</b>
+      <b class="capitalize">{$_('general_promise_error')}</b>
      {error}
    </span>
  </div>
--- a/src/components/TracksEmptyState.svelte
+++ b/src/components/TracksEmptyState.svelte
@@ -0,0 +1,260 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import AddTrackModal from "./AddTrackModal.svelte";
+  let modal_open = false;
+</script>
+
+<div class="text-center items-center justify-center">
+  <svg
+    class="mx-auto"
+    style="height:15rem;"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 997 808"><defs>
+      <linearGradient
+        id="a"
+        x1="570.56"
+        y1="454"
+        x2="570.56"
+        y2="63.07"
+        gradientUnits="userSpaceOnUse">
+        <stop offset="0" stop-color="gray" stop-opacity=".25" />
+        <stop offset=".54" stop-color="gray" stop-opacity=".12" />
+        <stop offset="1" stop-color="gray" stop-opacity=".1" />
+      </linearGradient>
+    </defs>
+    <path
+      d="M260.64.9c93 12.73 168.51 101.25 252.3 156.49 18.67 12.31 38.24 23.15 58.93 26.36 68.54 10.64 131.74-63.09 200.6-57.07 55.81 4.88 103.14 64 123.22 133.54s17 147.32 5.85 220.32c-17.46 114-56.14 226.15-123.47 300.3-11.11 12.24-23.52 23.69-37.79 26.47-23.78 4.69-45.83-15.46-66.41-32.12-92.88-75.22-210.3-94.32-314-51.08-35.12 14.64-68.71 36-104.65 46.54-69.21 20.26-147.53-5.34-194.52-76s-54.63-186.8-9.86-260c18.69-30.55 44.45-52.12 64.07-81.6 49.3-74 31.1-148.82 25-235.6C133.9 31.94 206.31-6.53 260.64.9z"
+      fill="#4299e1"
+      opacity=".1" />
+    <g opacity=".2">
+      <path
+        d="M683.38 545s27.51 27.51 12 68.33S722 722.03 722 722.03l-1.29-.21c-56.5-10-84.57-74.59-53.15-122.59 11.66-17.81 21.25-38.75 15.82-54.23z"
+        fill="#4299e1" />
+      <path
+        d="M683.38 545.5s27.51 27.51 12 68.33S722 722.53 722 722.53l-1.29-.21c-56.5-10-84.57-74.59-53.15-122.59 11.66-17.86 21.25-38.79 15.82-54.23z"
+        opacity=".1" />
+      <path
+        d="M683.38 545s15.53 33.72 0 61.23-2.66 104.71 38.6 115.8"
+        fill="none"
+        stroke="#535461"
+        stroke-miterlimit="10" />
+      <path
+        d="M634.39 656.3s31.39-5 34.25 23.13 60.36 32 60.36 32l-1.08.72c-47.48 31.17-92.86 19.85-86-21.53 2.53-15.35 2.32-30.81-7.53-34.32z"
+        fill="#4299e1" />
+      <path
+        d="M634.39 656.3s24.37 5.35 22.36 27.5 36.18 48.71 72.25 27.66"
+        fill="none"
+        stroke="#535461"
+        stroke-miterlimit="10" />
+    </g>
+    <g opacity=".2">
+      <path
+        d="M357.1 501.68s22.86 22.86 10 56.77 22.12 90.32 22.12 90.32l-1.07-.18c-46.94-8.29-70.27-62-44.17-101.86 9.66-14.83 17.63-32.22 13.12-45.05z"
+        fill="#4299e1" />
+      <path
+        d="M357.1 502.06s22.86 22.86 10 56.77 22.12 90.32 22.12 90.32l-1.12-.15c-46.94-8.29-70.27-62-44.17-101.86 9.71-14.86 17.68-32.25 13.17-45.08z"
+        opacity=".1" />
+      <path
+        d="M357.1 501.68s12.9 28 0 50.87-2.21 87 32.07 96.22"
+        fill="none"
+        stroke="#535461"
+        stroke-miterlimit="10" />
+      <path
+        d="M316.39 594.13s26.11-4.13 28.46 19.22S395 640 395 640l-.9.6c-39.45 25.9-77.16 16.5-71.47-17.89 2.11-12.83 1.94-25.71-6.24-28.58z"
+        fill="#4299e1" />
+      <path
+        d="M316.39 594.13s20.24 4.44 18.58 22.85 30.06 40.48 60 23"
+        fill="none"
+        stroke="#535461"
+        stroke-miterlimit="10" />
+    </g>
+    <g opacity=".2">
+      <path
+        d="M261.1 357.68s22.86 22.86 10 56.77 22.12 90.32 22.12 90.32l-1.07-.18c-46.94-8.29-70.27-62-44.17-101.86 9.66-14.83 17.63-32.22 13.12-45.05z"
+        fill="#4299e1" />
+      <path
+        d="M261.1 358.06s22.86 22.86 10 56.77 22.12 90.32 22.12 90.32l-1.12-.15c-46.94-8.29-70.27-62-44.17-101.86 9.71-14.86 17.68-32.25 13.17-45.08z"
+        opacity=".1" />
+      <path
+        d="M261.1 357.68s12.9 28 0 50.87-2.21 87 32.07 96.22"
+        fill="none"
+        stroke="#535461"
+        stroke-miterlimit="10" />
+      <path
+        d="M220.39 450.13s26.11-4.13 28.46 19.22S299 496 299 496l-.9.6c-39.45 25.9-77.16 16.5-71.47-17.89 2.11-12.83 1.94-25.71-6.24-28.58z"
+        fill="#4299e1" />
+      <path
+        d="M220.39 450.13s20.24 4.44 18.58 22.85 30.06 40.48 60 23"
+        fill="none"
+        stroke="#535461"
+        stroke-miterlimit="10" />
+    </g>
+    <path
+      fill="#dfe5ee"
+      d="M14.76 592.38v-13.63l279.29-78.33 49.95-5.68v12.49l-278.15 99.9-51.09-14.75z" />
+    <path
+      opacity=".05"
+      d="M14.76 592.38v-13.63l279.29-78.33 49.95-5.68v12.49l-278.15 99.9-51.09-14.75z" />
+    <path
+      fill="#dfe5ee"
+      d="M14.76 578.75l279.29-91.96 48.82 7.95-277.02 98.77-51.09-14.76z" />
+    <path
+      fill="#dfe5ee"
+      d="M57.9 370.99h18.17v211.17H57.9zM275.88 322.17h18.17v185.06h-18.17z" />
+    <path
+      fill="#dfe5ee"
+      d="M339.46 264.27v56.77L112.67 371.7l-26.83 6-66.54 14.86L0 386.88v-65.84l102.91-19.62 25.61-4.88 187.1-35.67 23.84 3.4z" />
+    <path
+      opacity=".05"
+      d="M339.46 264.27v56.77L112.67 371.7l-26.83 6-66.54 14.86L0 386.88v-65.84l102.91-19.62 25.61-4.88 187.1-35.67 23.84 3.4z" />
+    <path
+      opacity=".05"
+      d="M76.07 370.99v11.16l-18.17 4.06v-15.22h18.17zM294.05 322.17v11.29l-18.17 4.05v-15.34h18.17z" />
+    <path
+      fill="#dfe5ee"
+      d="M339.46 264.27v56.77l-92.08 20.57-26.78 5.98-107.93 24.11-26.83 6-66.54 14.86 1.14-64.71 92.47-18.43 25.87-5.15h.01L244.5 283.2l25.82-5.15 69.14-13.78z" />
+    <path
+      fill="#4299e1"
+      d="M138.79 304.27l-26.12 67.43-26.83 6 27.07-68.28-10-8 25.61-4.88 10.26 7.73h.01zM271.62 279.03l-24.24 62.58-26.78 5.98 25.14-63.41-1.24-.98-8.76-7.02 25.61-4.88 8.97 6.75 1.29.98h.01z" />
+    <path
+      opacity=".05"
+      d="M61.88 578.47l18.16-4.26v4.26l-18.16 4.26v-4.26zM278.72 503.54l18.16-4.26v4.26l-18.16 4.26v-4.26z" />
+    <path
+      d="M761.23 394.51c-28.95 15.25-58.92-2-58.92-2a19.07 19.07 0 01-1.61 2.52c-.37-.28-.75-.57-1.13-.88-12.44-10.17-26.21-34.18-26.21-34.18l-26.83-50.31a78.52 78.52 0 01-7.37-19.19c-4.42-19.18-18.53-20-18.53-20H604.1c-8 0-19.56 1.68-31 4a2.1 2.1 0 00.57-1.14l-.55.11 6.14-6s17.57-7.12 19.64-22.37l9.3-9.15s.3-.8.72-2.21l3.09-3.89c13.46-16.85 14.43-17.13 14.43-17.13l40.81-24.15s14.65-2.08 8.54-43.05-2-46-2-46 11.1-41.05-10.18-35.94-11.66 40.2-11.66 40.2l1.48 7.75a74.2 74.2 0 01-.3 29.35c-2.21 10.45-4.68 23.36-4.06 26.44 1.09 5.37-11.2 12.17-11.2 12.17l-6.95 4.06a35.17 35.17 0 01-24.39 4.16l-.37-.56L602 184a12.05 12.05 0 00-.3 1.3L600 184v.1c0-.36 0-.7.08-1.08a53.88 53.88 0 012.69-11.28c.11-.34.25-.7.37-1A30.72 30.72 0 00632 140.29a30 30 0 00-1.52-9.44 6.51 6.51 0 002.38 0c3.74-.6 7.71-2.52 9.65-5.83a10.7 10.7 0 00-.79-11.72 11.71 11.71 0 00-1.6-1.67c-3.55-4-9.49-5-14.21-7.69-4.49-2.53-7.9-6.57-12.08-9.58-7.9-5.71-18-7.43-27.64-9-4.14-.67-8.35-1.34-12.51-.79-5.26.7-10.1 3.33-14.22 6.62a12.8 12.8 0 00-3.59 3.95c-1.53 3-.86 6.52-1.13 9.84-.66 8.08-7 14.66-14 18.95-4.3 2.63-9 4.73-12.61 8.26s-5.74 9.1-3.49 13.56c1.19 2.36 3.54 4.33 3.56 7a7.84 7.84 0 01-1 3.34 48.67 48.67 0 01-9.59 13.5c-14.6-3.52-30.36 4.22-30.36 4.22l-47.55 2s-13.44-6.1-31 31.52-23.78 39.66-23.78 39.66-32 28.47-11.37 35.59 32-27.46 32-27.46L417 233.84s25.84-24.41 27.91-29.49 14.47-5.08 14.47-5.08l50.41 2a9.59 9.59 0 01.12 1.23c.12 5.64-5.17 10-10.49 12.09-3.36 1.34-7.2 2.35-9.25 5.29s-1.56 7.21.5 10.21a13.42 13.42 0 002.19 2.43 20.53 20.53 0 007.72 5 35.81 35.81 0 007.51 2.08 76 76 0 01-4.25 12.6l2 .86-.66 1.76c-2.82 7.49-8.63 22.27-13.77 31.21-.05 0-9.34 7.88-16.55 15-5.51 5.42-18.79 57.6 20.07 58.54l8.87 6.54h.18c7.89 11.14 33.94 29.44 33.94 29.44l-46.07 2.72a57.66 57.66 0 00-6.85.83q-1.13.2-2.26.45c-8.12 1.78-17.11 1.15-21.93.58-3.19-6-18-3.56-18-3.56s-2.07 30.51 1 47.79 14.47 6.1 14.47 6.1c-2.07-15.25 15-26.47 15-26.47 2.17-1.09 4.74-2.41 7.76-4 9.58-5.14 55.15 2.72 69.24 5.32a47.65 47.65 0 009.41.8c40.39-.66 29.9-20.36 29.9-20.36l-8.13-16a82.22 82.22 0 01-3.56-8.18c-7.18-19-18.34-29.46-26.89-35.06.46-.58.92-1.16 1.37-1.77 0 0-.68-.16-1.71-.47 7.22-3.69 12-6.64 12-6.64s47.55-28.47 45.49-21.35 10.34 34.57 33.08 53.89c.66.56 1.3 1.13 1.94 1.71l.62.57 1.27 1.2.69.67 1.18 1.18.66.68 1.25 1.34.5.54q.85.94 1.68 1.9l.36.43q.64.76 1.27 1.52l.57.71 1 1.28.58.75 1 1.31.52.69 1.16 1.61.28.38q.71 1 1.39 2l.34.51 1 1.51.42.65.89 1.4.39.62.93 1.53.27.44q1.21 2 2.3 4l.12.22.95 1.72.15.28.91 1.72.06.12a151.46 151.46 0 016.87 15.07 26.4 26.4 0 01-3.53.6c-6.2 27.46 10.34 27.46 10.34 27.46s61-9.15 83.74-32.54-4.08-21.44-4.08-21.44z"
+      transform="translate(-101.5 -46)"
+      fill="url(#a)" />
+    <path
+      d="M438.5 296.5s25.14 6.52 37.68 40.22a81.56 81.56 0 003.45 8l7.87 15.78s10.15 19.37-28.92 20a45.36 45.36 0 01-9.1-.79c-13.63-2.55-57.71-10.28-67-5.23a172.92 172.92 0 01-16 8l-11-12 4-16s13.21 2.48 24.62-.07a55.86 55.86 0 018.81-1.26l44.59-2.65s-35-25-35-34 36-20 36-20z"
+      fill="#f8bdc5" />
+    <path
+      d="M363.5 357.5s-11 17.94 11.49 21c0 0-16.49 11-14.49 26 0 0-11 11-14-6s-1-47-1-47 18-3 18 6z"
+      opacity=".05" />
+    <path
+      d="M438.5 296.5s25.14 6.52 37.68 40.22a81.56 81.56 0 003.45 8l7.87 15.78s10.15 19.37-28.92 20a45.36 45.36 0 01-9.1-.79c-13.63-2.55-57.71-10.28-67-5.23a172.92 172.92 0 01-16 8l-11-12 4-16s13.21 2.48 24.62-.07a55.86 55.86 0 018.81-1.26l44.59-2.65s-35-25-35-34 36-20 36-20z"
+      opacity=".05" />
+    <path
+      d="M360.5 372.5l4-16s13.21 2.48 24.62-.07a55.86 55.86 0 018.81-1.26l44.57-2.67s-35-25-35-34 36-20 36-20l.27.08a32.74 32.74 0 00-5.27-2.08s-36 11-36 20 35 34 35 34l-44.56 2.67a55.86 55.86 0 00-8.81 1.26c-11.41 2.55-24.62.07-24.62.07l-4 16 11 12s.74-.3 2.26-1z"
+      opacity=".05" />
+    <path
+      d="M363.5 357.5s-11 17.94 11.49 21c0 0-16.49 11-14.49 26 0 0-11 11-14-6s-1-47-1-47 18-3 18 6z"
+      fill="#ffd97b" />
+    <path
+      fill="#dfe5ee"
+      d="M333.76 647.38v-13.63l279.29-78.33 49.95-5.68v12.49l-278.15 99.9-51.09-14.75z" />
+    <path
+      opacity=".05"
+      d="M333.76 647.38v-13.63l279.29-78.33 49.95-5.68v12.49l-278.15 99.9-51.09-14.75z" />
+    <path
+      fill="#dfe5ee"
+      d="M333.76 633.75l279.29-91.96 48.82 7.95-277.02 98.77-51.09-14.76z" />
+    <path
+      fill="#dfe5ee"
+      d="M376.9 425.99h18.17v211.17H376.9zM594.88 377.17h18.17v185.06h-18.17z" />
+    <path
+      fill="#dfe5ee"
+      d="M658.46 319.27v56.77L431.67 426.7l-26.83 6-66.54 14.86-19.3-5.68v-65.84l102.9-19.62 25.62-4.88 187.1-35.67 23.84 3.4z" />
+    <path
+      opacity=".05"
+      d="M658.46 319.27v56.77L431.67 426.7l-26.83 6-66.54 14.86-19.3-5.68v-65.84l102.9-19.62 25.62-4.88 187.1-35.67 23.84 3.4z" />
+    <path
+      opacity=".05"
+      d="M395.07 425.99v11.16l-18.17 4.06v-15.22h18.17zM613.05 377.17v11.29l-18.17 4.05v-15.34h18.17z" />
+    <path
+      fill="#dfe5ee"
+      d="M658.46 319.27v56.77l-92.08 20.57-26.78 5.98-107.93 24.11-26.83 6-66.54 14.86 1.14-64.71 92.47-18.43 25.87-5.15h.01L563.5 338.2l25.82-5.15 69.14-13.78z" />
+    <path
+      fill="#4299e1"
+      d="M457.79 359.27l-26.12 67.43-26.83 6 27.07-68.28-10.01-8 25.62-4.88 10.26 7.73h.01zM590.62 334.03l-24.24 62.58-26.78 5.98 25.14-63.41-1.24-.98-8.76-7.02 25.61-4.88 8.97 6.75 1.29.98h.01z" />
+    <path
+      opacity=".05"
+      d="M380.88 633.47l18.16-4.26v4.26l-18.16 4.26v-4.26zM597.72 558.54l18.16-4.26v4.26l-18.16 4.25v-4.25z" />
+    <path
+      d="M562.63 146.9l-39.48 23.75s-.94.28-14 16.85l-4.69 6c-9.92 12.75-30.54 17-30.54 17l-13.08-20.12-2.76-24.44 2.9-9.87 2.3-7.82 20.12 2.88 8.1 4.37 10-10c.78.21 1.57.4 2.36.55a33.55 33.55 0 0023.59-4.05l6.72-4s11.88-6.69 10.83-12c-.6-3 1.79-15.72 3.93-26a74.16 74.16 0 00.29-28.86l-1.43-7.62S538.5 29 559.07 24s9.85 35.34 9.85 35.34-3.94 4.94 2 45.23-8.29 42.33-8.29 42.33z"
+      fill="#f8bdc5" />
+    <path
+      d="M497.55 141.54c-1.12 10.58 3.95 12 3.95 12l3 12v13l-9 15h-22l-19-9v-42l-3-10a38.7 38.7 0 005-.65c9.65-1.93 15.12-7.29 18.2-13.11 4.8-9.11 3.8-19.28 3.8-19.28s40-11 26 20c-1.86 4.13-3.28 7.76-4.35 11a53.72 53.72 0 00-2.6 11.04zM472.09 229.33a2.08 2.08 0 01-.59 1.17 8.65 8.65 0 00-1.29 2c-4.68 8.83-13.71 40-13.71 40l-49-18-.71-.18-19.29-4.82c5.47-3.91 14.61-27.36 18.33-37.42 1-2.81 1.67-4.58 1.67-4.58l52 5s13.48 11.8 12.59 16.83z"
+      fill="#f8bdc5" />
+    <path
+      d="M451.5 129.5s-15 6-30 0-33 3-33 3l-46 2s-13-6-30 31-23 39-23 39-31 28-11 35 31-27 31-27l11-21s25-24 27-29 14-5 14-5l50 2-.31 14.62 15.31 13.38 14-12 11-22z"
+      fill="#f8bdc5" />
+    <path
+      d="M504.5 119.5c-1.86 4.13-3.28 7.76-4.35 11h-1.65a29.92 29.92 0 01-23.81-11.76c4.81-9.07 3.81-19.24 3.81-19.24s40-11 26 20z"
+      opacity=".1" />
+    <circle cx="498.5" cy="99.5" r="30" fill="#f8bdc5" />
+    <path
+      d="M472.09 229.33a2.08 2.08 0 01-.59 1.17 8.65 8.65 0 00-1.29 2c-17.79-.78-56.72-17.11-64.38-20.38 1-2.81 1.67-4.58 1.67-4.58l52 5s13.48 11.76 12.59 16.79zM509.19 187.5l-4.69 6c-9.92 12.75-30.54 17-30.54 17l-13.08-20.12-2.76-24.44L459 142c2.79 13 10.59 40.12 22.5 42.5 19.91 4 18.48-24.53 17.5-36.5a16.2 16.2 0 01.5-5.5l4 3 .36.55c9.53 14.8 7.39 32.42 5.33 41.45z"
+      opacity=".1" />
+    <path
+      d="M456.5 127.5h-10s10 64-37 46c0 0 4 15-5 36 0 0 48 21 67 21l6-6s17-7 19-22l9-9s10-27-4-48l-4-3a16.16 16.16 0 00-.5 5.5c1 12 2.41 40.48-17.5 36.5-25-5-23-57-23-57z"
+      fill="#eb6576" />
+    <path
+      d="M388.5 309.5l16 12s26 8 47-21c0 0-13-3-11-10s-52 19-52 19z"
+      fill="#5e52ad" />
+    <path
+      d="M388.5 309.5l16 12s26 8 47-21c0 0-13-3-11-10s-52 19-52 19z"
+      opacity=".05" />
+    <path
+      d="M472.09 230.33a2.08 2.08 0 01-.59 1.17c-4 4-15 42-15 42l-49-18-.71-.18a70.21 70.21 0 0112-6.06c3.41-1.32 6.84-2.72 9.81-4.06a44.92 44.92 0 006.91-3.7c4.19-3 20.28-7.8 36.58-11.17z"
+      opacity=".1" />
+    <path
+      d="M585.5 372.5l-15 4s-.34-1-1-2.74c-3.2-8.14-13.86-32.61-32-48.26-22-19-34-46-32-53s-44 21-44 21-33.35 20.75-55.39 20.78a23.28 23.28 0 01-9.61-1.78c-8.5-3.83-11.94-10.54-13.09-17a29.72 29.72 0 016-23.31 68.38 68.38 0 0129.4-21.93c3.41-1.32 6.84-2.72 9.81-4.06a44.92 44.92 0 006.91-3.7c7-5 47-15 66-15h16s13.64.8 17.92 19.66a78 78 0 007.1 18.84l25.95 49.5s13.32 23.61 25.35 33.61c3.43 2.86 6.76 4.61 9.65 4.39 13-1-18 19-18 19z"
+      fill="#f8bdc5" />
+    <path
+      d="M538.66 84.52A10.67 10.67 0 00537.9 73c-3.36-4.37-9.43-5.37-14.22-8.11-4.35-2.49-7.64-6.46-11.68-9.42-7.64-5.61-17.38-7.31-26.73-8.84-4-.66-8.08-1.32-12.1-.77-5.09.69-9.77 3.28-13.76 6.51a12.52 12.52 0 00-3.47 3.88c-1.48 2.92-.83 6.42-1.09 9.68-.64 7.95-6.78 14.42-13.55 18.63-4.16 2.59-8.74 4.65-12.2 8.12s-5.55 8.95-3.37 13.33c1.16 2.32 3.43 4.26 3.44 6.86a7.8 7.8 0 01-.94 3.29 47.87 47.87 0 01-9.54 13.55c-3.54 3.52-7.77 6.68-9.61 11.33-1.77 4.47-1 9.57.63 14.1.76 2.16 1.71 4.32 1.75 6.6.11 5.55-5 9.81-10.15 11.89-3.25 1.31-7 2.31-8.95 5.2s-1.51 7.09.48 10 5.2 4.86 8.5 6.19a31.16 31.16 0 0019.38 1.58 23.74 23.74 0 0015.15-11.78c3-5.84 3.2-13 7.36-18.1 7.33-8.91 22.79-6.66 30.44-15.31 6.14-6.95 4.47-17.48 4-26.74a82.37 82.37 0 01.64-15.45c.5-3.64 1.42-7.55 4.28-9.85 2.31-1.86 5.43-2.28 8.37-2.64 6.14-.77 13.21-2.26 16-7.79 1.16-2.3 1.51-5.2 3.6-6.7 2.89-2.08 6.94 0 9.46 2.5 2.78 2.77 5.11 6.18 9.34 5.49 3.59-.56 7.43-2.45 9.3-5.71z"
+      opacity=".1" />
+    <path
+      d="M537.58 83.44a10.67 10.67 0 00-.77-11.52c-3.36-4.37-9.43-5.37-14.22-8.11-4.35-2.49-7.64-6.46-11.68-9.42-7.64-5.61-17.38-7.31-26.73-8.84-4-.66-8.08-1.32-12.1-.77-5.09.69-9.77 3.28-13.76 6.51a12.52 12.52 0 00-3.47 3.88c-1.48 2.92-.83 6.42-1.09 9.68-.64 7.95-6.78 14.42-13.55 18.63-4.16 2.59-8.74 4.65-12.2 8.12s-5.55 8.95-3.37 13.33c1.16 2.32 3.43 4.26 3.44 6.86a7.8 7.8 0 01-.94 3.29 47.87 47.87 0 01-9.54 13.55c-3.54 3.52-7.77 6.68-9.61 11.33-1.77 4.47-1 9.57.63 14.1.76 2.16 1.71 4.32 1.75 6.6.11 5.55-5 9.81-10.15 11.89-3.25 1.31-7 2.31-8.95 5.2s-1.51 7.09.48 10 5.2 4.86 8.5 6.19a31.16 31.16 0 0019.38 1.58 23.74 23.74 0 0015.15-11.78c3-5.84 3.2-13 7.36-18.1 7.33-8.91 22.79-6.66 30.44-15.31 6.14-6.95 4.47-17.48 4-26.74a82.37 82.37 0 01.64-15.45c.5-3.64 1.42-7.55 4.28-9.85 2.31-1.86 5.43-2.28 8.37-2.64 6.14-.77 13.21-2.26 16-7.79 1.16-2.3 1.51-5.2 3.6-6.7 2.89-2.08 6.94 0 9.46 2.5 2.78 2.77 5.11 6.18 9.34 5.49 3.59-.57 7.44-2.46 9.31-5.71z"
+      fill="#6e464e" />
+    <path d="M434 202s11 9 25 8" opacity=".1" />
+    <path
+      d="M605.92 353.68c-5.74 5.64-18.42 13.82-18.42 13.82l-15 4s-11-32-33-51-34-46-32-53-44 21-44 21-33.35 20.75-55.39 20.78a23.28 23.28 0 01-9.61-1.78c-8.5-3.83-11.94-10.54-13.09-17a28.68 28.68 0 01.82-13.31 29.19 29.19 0 00-2.82 18.31c1.15 6.46 4.59 13.17 13.09 17a23.28 23.28 0 009.61 1.78c22 0 55.39-20.78 55.39-20.78s46-28 44-21 10 34 32 53 33 51 33 51l15-4s25.89-16.71 20.42-18.82z"
+      opacity=".05" />
+    <path
+      d="M429.5 246.5l-1.7.79a61.63 61.63 0 00-28.9 27.46c-13.4 26.08 4.31 37.83 7.21 39.53a23.28 23.28 0 01-9.61-1.78c-8.5-3.83-11.94-10.54-13.09-17a29.72 29.72 0 016-23.31 68.38 68.38 0 0129.4-21.93c3.41-1.32 6.84-2.72 9.81-4.06z"
+      opacity=".1" />
+    <path
+      d="M427.5 246.5s-21-7.46-35-3.73c0 0-9 7.73-16 14.73-5.7 5.7-20 64 28 57 0 0-22.16-11.42-7.6-39.75a61.62 61.62 0 0128.9-27.46z"
+      fill="#5e52ad" />
+    <path
+      d="M585.5 372.5l-15 4s-.34-1-1-2.74c3.49-.92 8-3 8-7.26 0 0 11.45-10.69 16.35-17.39 3.43 2.86 6.76 4.61 9.65 4.39 13-1-18 19-18 19z"
+      opacity=".1" />
+    <path
+      d="M578.5 367.5s15-14 18-20c0 0 29 17 57 2 0 0 26-2 4 21s-81 32-81 32-16 0-10-27c0 0 12-1 12-8z"
+      fill="#ffd97b" />
+    <path
+      fill="#dfe5ee"
+      d="M667.76 717.38v-13.63l279.29-78.33 49.95-5.68v12.49l-278.15 99.9-51.09-14.75z" />
+    <path
+      opacity=".05"
+      d="M667.76 717.38v-13.63l279.29-78.33 49.95-5.68v12.49l-278.15 99.9-51.09-14.75z" />
+    <path
+      fill="#dfe5ee"
+      d="M667.76 703.75l279.29-91.96 48.82 7.95-277.02 98.77-51.09-14.76z" />
+    <path
+      fill="#dfe5ee"
+      d="M710.9 495.99h18.17v211.17H710.9zM928.88 447.17h18.17v185.06h-18.17z" />
+    <path
+      fill="#dfe5ee"
+      d="M992.46 389.27v56.77L765.67 496.7l-26.83 6-66.54 14.86-19.3-5.68v-65.84l102.9-19.62 25.62-4.88 187.1-35.67 23.84 3.4z" />
+    <path
+      opacity=".05"
+      d="M992.46 389.27v56.77L765.67 496.7l-26.83 6-66.54 14.86-19.3-5.68v-65.84l102.9-19.62 25.62-4.88 187.1-35.67 23.84 3.4z" />
+    <path
+      opacity=".05"
+      d="M729.07 495.99v11.16l-18.17 4.06v-15.22h18.17zM947.05 447.17v11.29l-18.17 4.05v-15.34h18.17z" />
+    <path
+      fill="#dfe5ee"
+      d="M992.46 389.27v56.77l-92.08 20.57-26.78 5.98-107.93 24.11-26.83 6-66.54 14.86 1.14-64.71 92.47-18.43 25.87-5.15h.01L897.5 408.2l25.82-5.15 69.14-13.78z" />
+    <path
+      fill="#4299e1"
+      d="M791.79 429.27l-26.12 67.43-26.83 6 27.07-68.28-10.01-8 25.62-4.88 10.26 7.73h.01zM924.62 404.03l-24.24 62.58-26.78 5.98 25.14-63.41-1.24-.98-8.76-7.02 25.61-4.88 8.97 6.75 1.29.98h.01z" />
+    <path
+      opacity=".05"
+      d="M714.88 703.47l18.16-4.26v4.26l-18.16 4.26v-4.26zM931.72 628.54l18.16-4.26v4.26l-18.16 4.25v-4.25z" /></svg>
+  <p class="mb-16 text-lg text-gray-500">
+    <span class="font-bold">{$_('no-tracks-added-yet')}</span><br />
+    <span>{$_('add-your-first-track')}</span>
+  </p>
+</div>
+
+<AddTrackModal bind:modal_open />
--- a/src/components/TracksOverview.svelte
+++ b/src/components/TracksOverview.svelte
@@ -0,0 +1,25 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import AddTrackModal from "./AddTrackModal.svelte";
+  let modal_open = false;
+  import Tracks from "./Tracks.svelte";
+</script>
+
+<section class="container p-5">
+  <span class="mb-1 text-3xl font-extrabold leading-tight">
+    Tracks
+    <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">
+      Create Track
+    </button>
+  </span>
+  <p class="mb-8 text-lg text-gray-500">
+    configure the tracks & minimum lap times
+  </p>
+  <Tracks />
+</section>
+<AddTrackModal bind:modal_open />
--- a/src/components/Transition.svelte
+++ b/src/components/Transition.svelte
@@ -0,0 +1,11 @@
+<!-- Transition.svelte -->
+<script>
+  import { router } from "tinro";
+  import { fade } from "svelte/transition";
+</script>
+
+{#key $router.path}
+  <div in:fade={{ duration: 75 }}>
+    <slot />
+  </div>
+{/key}
--- a/src/components/UserDetail.svelte
+++ b/src/components/UserDetail.svelte
@@ -0,0 +1,128 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import { UserService } from "@odit/lfk-client-js";
+  import "gridjs/dist/theme/mermaid.css";
+  import { tracks as tracksstore } from "../store.js";
+  import PromiseError from "./PromiseError.svelte";
+  export let params;
+  const user_promise = UserService.userControllerGetOne(params.userid);
+  user_promise.then((data) => {
+    console.log(data);
+    tracksstore.set(data);
+  });
+</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">{user.firstname}
+                {user.middlename || ''}
+                {user.lastname}</span>
+            </li>
+          </ol>
+        </nav>
+      </div>
+    </div>
+    <span
+      class="mb-4 text-3xl font-extrabold leading-tight">{user.firstname}
+      {user.middlename || ''}
+      {user.lastname}
+      <button
+        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">Delete
+        User</button></span>
+    <!--  -->
+    <div class="mt-2 flex items-center">
+      <img
+        alt={$_('profile-picture')}
+        class="inline-block h-20 w-20 rounded-full overflow-hidden bg-gray-100"
+        src={user.profilePic} />
+      <!-- <span
+        class="inline-block h-12 w-12 rounded-full overflow-hidden bg-gray-100"><svg
+          class="h-full w-full text-gray-300"
+          fill="currentColor"
+          viewBox="0 0 24 24"><path
+            d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" /></svg></span> -->
+      <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"
+        name="enabled"
+        type="checkbox"
+        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>
+    </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"
+        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" />
+    </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"
+        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" />
+    </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"
+        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" />
+    </div>
+  </section>
+{:catch error}
+  <!-- promise was rejected -->
+  <PromiseError {error} />
+{/await}
--- a/src/components/Users.svelte
+++ b/src/components/Users.svelte
@@ -0,0 +1,25 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import AddUserModal from "./AddUserModal.svelte";
+  export let modal_open = false;
+  import UsersOverview from "./UsersOverview.svelte";
+</script>
+
+<section class="container p-5">
+  <span class="mb-1 text-3xl font-extrabold leading-tight">
+    Users
+    <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">
+      Create User
+    </button>
+  </span>
+  <p class="mb-8 text-lg text-gray-500">
+    manage admin users
+  </p>
+  <UsersOverview />
+</section>
+<AddUserModal bind:modal_open />
--- a/src/components/UsersEmptyState.svelte
+++ b/src/components/UsersEmptyState.svelte
@@ -0,0 +1,14 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import AddUserModal from "./AddUserModal.svelte";
+  let modal_open = false;
+</script>
+
+<div class="text-center items-center justify-center">
+  <p class="mb-16 text-lg text-gray-500">
+    <span class="font-bold">There are no users added yet.</span><br />
+    <span>Add your first user</span>
+  </p>
+</div>
+
+<AddUserModal bind:modal_open />
--- a/src/components/UsersOverview.svelte
+++ b/src/components/UsersOverview.svelte
@@ -0,0 +1,217 @@
+<script>
+  import { _, json } from "svelte-i18n";
+  import Toastify from "toastify-js";
+  import TracksEmptyState from "./TracksEmptyState.svelte";
+  import { TrackService, UserService } from "@odit/lfk-client-js";
+  const users_promise = UserService.userControllerGetAll();
+  import { getlang } from "./datatable_i18n";
+  import { Grid, html } from "gridjs";
+  import "gridjs/dist/theme/mermaid.css";
+  import { tracks as tracksstore } from "../store.js";
+  import UsersEmptyState from "./UsersEmptyState.svelte";
+  $: userscache = [];
+  $: blocked = [];
+  let table;
+  let datatable;
+  let datatable_inited = false;
+  tracksstore.subscribe((val) => {
+    userscache = val;
+  });
+  users_promise.then((data) => {
+    console.log(data);
+    tracksstore.set(data);
+  });
+</script>
+
+{#await users_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">users are being loaded...</p>
+    <p class="text-sm">{$_('this-might-take-a-moment')}</p>
+  </div>
+{:then users}
+  {#if userscache.length === 0}
+    <UsersEmptyState />
+  {:else}
+    <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">
+              Title
+            </th>
+            <th
+              scope="col"
+              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+              Status
+            </th>
+            <th
+              scope="col"
+              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+              Groups
+            </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 users as u}
+            <tr>
+              <td class="px-6 py-4 whitespace-nowrap">
+                <div class="flex items-center">
+                  {#if u.profilePic}
+                    <div class="flex-shrink-0 h-10 w-10">
+                      <img
+                        class="h-10 w-10 rounded-full"
+                        src={u.profilePic}
+                        alt="" />
+                    </div>
+                  {/if}
+                  <div class="ml-4">
+                    <div
+                      class="text-sm font-medium text-gray-900 dark:text-gray-100">
+                      {u.firstname}
+                      {u.middlename || ''}
+                      {u.lastname}
+                    </div>
+                    <div class="text-sm text-gray-500">
+                      {u.email || u.username}
+                    </div>
+                  </div>
+                </div>
+              </td>
+              <td class="px-6 py-4 whitespace-nowrap">
+                <div class="text-sm text-gray-900 dark:text-gray-100">
+                  Regional Paradigm Technician
+                </div>
+                <div class="text-sm text-gray-500">Optimization</div>
+              </td>
+              <td class="px-6 py-4 whitespace-nowrap">
+                {#if u.enabled}
+                  <span
+                    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span>
+                {:else}
+                  <span
+                    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Inactive</span>
+                {/if}
+              </td>
+              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                {#each u.groups as g}
+                  <a
+                    href="../groups/{g.id}"
+                    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{g.name}</a>
+                {/each}
+              </td>
+              <td
+                class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                <a
+                  href="./{u.id}"
+                  class="text-indigo-600 hover:text-indigo-900">Edit</a>
+                <span
+                  tabindex="0"
+                  href="#"
+                  class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">Delete</span>
+              </td>
+            </tr>
+          {/each}
+        </tbody>
+      </table>
+      <div
+        class="grid px-4 py-3 text-xs font-semibold tracking-wide text-gray-500 uppercase border-t dark:border-gray-700 bg-gray-50 sm:grid-cols-9 dark:text-gray-400 dark:bg-gray-900">
+        <span class="flex items-center col-span-3"> Showing 21-30 of 100 </span>
+        <span class="col-span-2" />
+        <!-- Pagination -->
+        <span class="flex col-span-4 mt-2 sm:mt-auto sm:justify-end">
+          <nav aria-label="Table navigation">
+            <ul class="inline-flex items-center">
+              <li>
+                <button
+                  class="px-3 py-1 rounded-md rounded-l-lg focus:outline-none focus:shadow-outline-purple"
+                  aria-label="Previous">
+                  <svg
+                    aria-hidden="true"
+                    class="w-4 h-4 fill-current"
+                    viewBox="0 0 20 20">
+                    <path
+                      d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
+                      clip-rule="evenodd"
+                      fill-rule="evenodd" />
+                  </svg>
+                </button>
+              </li>
+              <li>
+                <button
+                  class="px-3 py-1 rounded-md focus:outline-none focus:shadow-outline-purple">
+                  1
+                </button>
+              </li>
+              <li>
+                <button
+                  class="px-3 py-1 rounded-md focus:outline-none focus:shadow-outline-purple">
+                  2
+                </button>
+              </li>
+              <li>
+                <button
+                  class="px-3 py-1 text-white transition-colors duration-150 bg-purple-600 border border-r-0 border-purple-600 rounded-md focus:outline-none focus:shadow-outline-purple">
+                  3
+                </button>
+              </li>
+              <li>
+                <button
+                  class="px-3 py-1 rounded-md focus:outline-none focus:shadow-outline-purple">
+                  4
+                </button>
+              </li>
+              <li><span class="px-3 py-1">...</span></li>
+              <li>
+                <button
+                  class="px-3 py-1 rounded-md focus:outline-none focus:shadow-outline-purple">
+                  8
+                </button>
+              </li>
+              <li>
+                <button
+                  class="px-3 py-1 rounded-md focus:outline-none focus:shadow-outline-purple">
+                  9
+                </button>
+              </li>
+              <li>
+                <button
+                  class="px-3 py-1 rounded-md rounded-r-lg focus:outline-none focus:shadow-outline-purple"
+                  aria-label="Next">
+                  <svg
+                    class="w-4 h-4 fill-current"
+                    aria-hidden="true"
+                    viewBox="0 0 20 20">
+                    <path
+                      d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                      clip-rule="evenodd"
+                      fill-rule="evenodd" />
+                  </svg>
+                </button>
+              </li>
+            </ul>
+          </nav>
+        </span>
+      </div>
+    </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}
--- a/src/components/outsideclick.js
+++ b/src/components/outsideclick.js
@@ -0,0 +1,10 @@
+/** Dispatch event on click outside of node */
+export function clickOutside(node) {
+	const handleClick = (event) => {
+		if (event.target.getAttribute('data-id') === 'modal_backdrop') {
+			node.dispatchEvent(new CustomEvent('click_outside', node));
+		}
+	};
+	document.removeEventListener('click', handleClick, true);
+	document.addEventListener('click', handleClick, true);
+}
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -1,41 +1,47 @@
 {
-  "forgot_password?": "Passwort vergessen?",
-  "log_in": "Anmelden",
-  "log_in_to_your_account": "Bitte melde dich an",
-  "login_is_checked": "Login wird überprüft",
-  "welcome_wavinghand": "Willkommen 👋",
-  "error_on_login": "😢Fehler beim Login",
-  "settings": "Einstellungen",
-  "your_profile": "Dein Profil",
-  "password": "Passwort",
-  "email_address_or_username": "E-Mail-Addresse/ Benutzername",
-  "signout": "Abmelden",
    "404message": "Die gesuchte Seite wurde leider nicht gefunden.",
    "404title": "Fehler 404",
+    "about": "Über",
    "application_name": "Lauf für Kaya! \n- Admin",
-  "goback": "Zur Startseite",
+    "by": "von",
    "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.",
-  "register": "Registrieren",
-  "send-a-mail-to-lfk-odit-services": "Sende eine Mail an lfk@odit.services",
-  "dont-panic-were-resetting-it": "Keine Panik, wir setzen es zurück ✌",
-  "dont-have-your-email-connected": "Deine E-Mail ist nicht verknüpft?",
-  "reset-my-password": "Passwort zurücksetzen",
-  "e-mail-adress": "E-Mail-Adresse",
-  "invalid-mail-reset": "Das ist keine gültige E-Mail",
+    "credits": "",
+    "dashboard-greeting": "Moin",
    "datatable": {
        "search": "🔍 Suche ...",
        "an_error_happened_while_fetching_the_data": "Beim Abrufen der Daten ist ein Fehler aufgetreten",
        "loading": "Wird geladen...",
        "next": "Nächste",
        "of": "von",
-    "previous": "Vorherige"
+        "previous": "Vorherige",
+        "to": "bis",
+        "showing": "Zeige"
    },
-  "lfk-is-os": "Das \"Lauf für Kaya!\" Frontend ist (wie alle anderen Projekte für den \"LfK!\" auch) ein OpenSource Projekt.",
-  "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!",
-  "about": "Über",
-  "by": "von",
+    "dont-have-your-email-connected": "Deine E-Mail ist nicht verknüpft?",
+    "dont-panic-were-resetting-it": "Keine Panik, wir setzen es zurück ✌",
+    "e-mail-adress": "E-Mail-Adresse",
+    "email_address_or_username": "E-Mail-Addresse/ Benutzername",
+    "error_on_login": "😢Fehler beim Login",
+    "forgot_password?": "Passwort vergessen?",
+    "general-stats": "Allgemeine Statistiken",
+    "goback": "Zur Startseite",
    "hallo": "hallo",
-  "total-scans": "gesamte Scans",
+    "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",
+    "log_in_to_your_account": "Bitte melde dich an",
+    "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",
+    "register": "Registrieren",
+    "reset-my-password": "Passwort zurücksetzen",
+    "runners": "Läufer",
+    "send-a-mail-to-lfk-odit-services": "Sende eine Mail an lfk@odit.services",
+    "settings": "Einstellungen",
+    "signout": "Abmelden",
+    "total-distance": "gelaufene Strecke",
    "total-donations": "Spendensumme",
-  "credits": ""
+    "total-scans": "gesamte Scans",
+    "welcome_wavinghand": "Willkommen 👋",
+    "your_profile": "Dein Profil"
 }
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1,34 +1,20 @@
 {
-  "forgot_password?": "Forgot your password?",
-  "register": "Register",
-  "log_in": "Log in",
-  "password": "Password",
-  "log_in_to_your_account": "Log in to your account",
-  "welcome_wavinghand": "Welcome 👋",
-  "login_is_checked": "Login is being checked...",
-  "error_on_login": "Error on login",
-  "settings": "Settings",
-  "your_profile": "Your Profile",
-  "email_address_or_username": "Email / username",
-  "tracks": "Tracks",
-  "signout": "Sign out",
-  "hallo": "hello",
    "404message": "Sorry, the page you are looking for could not be found.",
    "404title": "Error 404",
-  "goback": "Go Home",
+    "about": "About",
+    "action": "Action",
+    "add-your-first-track": "Add your first track",
    "application_name": "Lauf für Kaya! - Admin",
-  "reset-my-password": "Reset my password",
+    "author": "Author",
+    "by": "by",
    "cannot-reset-your-password-directly": "Bummer. We unfortunately cannot reset your password directly. Please send us a mail and confirm your identity",
-  "send-a-mail-to-lfk-odit-services": "send a mail to lfk@odit.services",
-  "dont-have-your-email-connected": "Don't have your email connected?",
-  "dont-panic-were-resetting-it": "Don't panic, we're resetting it ✌",
-  "e-mail-adress": "E-Mail Adress",
-  "mail-validation-in-progress": "mail validation in progress...",
-  "invalid-mail-reset": "the provided email is invalid",
-  "runners": "runners",
-  "total-scans": "total scans",
-  "total-donations": "total donations",
-  "total-distance": "total distance",
+    "changelog": "Changelog",
+    "count_organizations": "# Organizations",
+    "count_teams": "# Teams",
+    "create-a-new-track": "Create a new Track",
+    "credits": "Credits",
+    "dashboard-greeting": "hello there",
+    "dashboard-title": "Dashboard",
    "datatable": {
        "search": "🔍 Search...",
        "sort_column_ascending": "Sort column ascending",
@@ -44,9 +30,56 @@
        "no_matching_records_found": "No matching records found",
        "an_error_happened_while_fetching_the_data": "An error happened while fetching the data"
    },
-  "about": "About",
-  "by": "by",
+    "dependency_name": "Name",
+    "dont-have-your-email-connected": "Don't have your email connected?",
+    "dont-panic-were-resetting-it": "Don't panic, we're resetting it ✌",
+    "e-mail-adress": "E-Mail Adress",
+    "email_address_or_username": "Email / username",
+    "error_on_login": "Error on login",
+    "faq": "FAQ",
+    "forgot_password?": "Forgot your password?",
+    "general-stats": "General Stats",
+    "general_promise_error": "😢 Error",
+    "goback": "Go Home",
+    "hallo": "hello",
+    "installed-version": "Installed version",
+    "invalid-mail-reset": "the provided email is invalid",
    "lfk-is-os": "The \"Lauf für Kaya!\" Frontend is (like all other projects for the \"LfK!\" Also) an open source project.",
+    "license": "License",
+    "log_in": "Log in",
+    "log_in_to_your_account": "Log in to your account",
+    "login_is_checked": "Login is being checked...",
+    "logout": "Logout",
+    "mail-validation-in-progress": "mail validation in progress...",
+    "minimum-lap-time-in-s": "minimum lap time in s",
+    "no-license-text-could-be-found": "No license text could be found 😢",
+    "no-tracks-added-yet": "there are no tracks added yet.",
+    "orgs": "Orgs",
    "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!",
-  "credits": "Credits"
+    "password": "Password",
+    "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",
+    "runners": "Runners",
+    "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...",
+    "teams": "Teams",
+    "this-might-take-a-moment": "This might take a moment 👀",
+    "total-distance": "total distance",
+    "total-donations": "total donations",
+    "total-scans": "total scans",
+    "track-added": "Track added",
+    "track-data-is-being-loaded": "Track data is being loaded",
+    "track-is-being-added": "Track is being added...",
+    "track-length-in-m": "Track Length in m",
+    "track-name": "Track name",
+    "tracks": "Tracks",
+    "users": "Users",
+    "welcome_wavinghand": "Welcome 👋",
+    "your_profile": "Your Profile"
 }
--- a/src/store.js
+++ b/src/store.js
@@ -1,8 +1,11 @@
 import { writable } from 'svelte/store';

+export let users = writable([]);
+export let tracks = writable([]);
 const store = () => {
 	const state = {
 		access_token: undefined,
+		jwtinfo: undefined,
 		isLoggedIn: false
 	};

@@ -10,18 +13,16 @@ const store = () => {

 	const methods = {
 		init() {
-			console.log('*: playerStore -> init()');
 			update((state) => {
 				state.isLoggedIn = false;
 				return state;
 			});
 		},
-
-		login(access_token) {
+		login(access_token, jwtinfo) {
 			update((state) => {
 				state.access_token = access_token;
+				state.jwtinfo = jwtinfo;
 				state.isLoggedIn = true;
-				console.log('login performed');
 				return state;
 			});
 		},
@@ -37,8 +38,8 @@ const store = () => {
 		subscribe,
 		set,
 		update,
+		state,
 		...methods
 	};
 };
-
 export default store();
--- a/src/swmodule.js
+++ b/src/swmodule.js
@@ -0,0 +1,14 @@
+export const register = () => {
+	if ('serviceWorker' in navigator) {
+		window.addEventListener('load', () => {
+			navigator.serviceWorker.register('/sw.js').then(
+				(registration) => {
+					// console.log(`sw successful with scope: ${registration.scope}`);
+				},
+				(err) => {
+					// console.log(`sw failed: ${err}`);
+				}
+			);
+		});
+	}
+};
--- a/workbox-config.js
+++ b/workbox-config.js
@@ -1,7 +1,6 @@
 module.exports = {
-  "globDirectory": "public/",
-  "globPatterns": [
-    "**/*.{js,ico,png,svg,html,txt}"
-  ],
-  "swDest": "public/sw.js"
+	globDirectory: 'public',
+	globPatterns: [ '**/*.{js,ico,png,svg,html,webmanifest,txt}' ],
+	globIgnores: [ 'env.js', 'env.sample.js', 'licenses.json' ],
+	swDest: 'public/sw.js'
 };
Author	SHA1	Message	Date
Philipp Dormann	a66f6bbec8	🚀RELEASE v0.1.1	2021-01-10 12:24:29 +01:00
Philipp Dormann	139b3294cd	🧪 move changelog generation to default	2021-01-10 12:24:19 +01:00
Philipp Dormann	1aac783df3	🚀RELEASE v0.1.0	2021-01-10 12:21:35 +01:00
Philipp Dormann	e361c89f6c	add basic package script ref #4	2021-01-10 12:18:22 +01:00
Philipp Dormann	52a19c2036	added basic release-it config ref #4	2021-01-10 12:18:00 +01:00
Philipp Dormann	0023e22524	added release-it dev dependency ref #4	2021-01-10 12:17:49 +01:00
Philipp Dormann	8f25a874cb	move serviceworker registration to separate module All checks were successful continuous-integration/drone/push Build is passing Details	2021-01-10 11:42:30 +01:00
Philipp Dormann	7cf2ffce2d	🐞 fix malfuntion in logout logic All checks were successful continuous-integration/drone/push Build is passing Details	2021-01-09 18:39:13 +01:00
Philipp Dormann	848fb2fb65	Merge branch 'feature/12-user-management' into dev All checks were successful continuous-integration/drone/push Build is passing Details	2021-01-09 18:29:47 +01:00
Philipp Dormann	6529907a13	display full user names in overview table ref #12	2021-01-09 18:27:22 +01:00
Philipp Dormann	e5ec98bf6f	basic AddUserModal ui ref #12	2021-01-09 18:26:14 +01:00
Philipp Dormann	2048533fda	actually perform user logout (recreate Cookies, invalidate token)	2021-01-09 18:24:57 +01:00
Philipp Dormann	cb58fdfd8e	working on AddUserModal ref #12	2021-01-09 17:39:17 +01:00
Philipp Dormann	9684c22da3	simplified css classes for cleanliness	2021-01-09 17:15:52 +01:00
Philipp Dormann	59d5ad5bd3	logic cleanup 🧠 All checks were successful continuous-integration/drone/push Build is passing Details ref #12	2021-01-09 16:06:03 +01:00
Philipp Dormann	71c761187f	UserOverview cleanup ref #12	2021-01-09 15:58:58 +01:00
Philipp Dormann	11457b2792	added Breadcrumb nav to UserDetail ref #12	2021-01-09 15:40:10 +01:00
Philipp Dormann	4fd1ac28c5	display profilepic properly ref #12	2021-01-09 15:39:56 +01:00
Philipp Dormann	8cf73a2be0	added middlename input field to mock ref #12	2021-01-09 15:39:43 +01:00
Philipp Dormann	644b9a7683	proper middlename display support ref #12	2021-01-09 15:39:28 +01:00
Philipp Dormann	23e03bec35	UserDetailOne sample ui All checks were successful continuous-integration/drone/push Build is passing Details ref #12	2021-01-09 14:16:07 +01:00
Philipp Dormann	9e19c48258	added general PromiseError component ref #12	2021-01-09 14:15:55 +01:00
Philipp Dormann	e7f63cf07b	Merge branch 'dev' into feature/12-user-management	2021-01-09 14:05:00 +01:00
Philipp Dormann	c38d33a549	ignore licenses.json in serviceworker All checks were successful continuous-integration/drone/push Build is passing Details ref #17	2021-01-09 14:02:10 +01:00
Philipp Dormann	1c2636d669	i18n 🌍 ref #17	2021-01-09 14:01:20 +01:00
Philipp Dormann	c0328c5cdb	AboutPage - read license text modal ref #17	2021-01-09 13:57:25 +01:00
Philipp Dormann	919910d4a8	⏫ bump to @odit/license-exporter@0.0.9 for version support ref #17	2021-01-09 13:56:55 +01:00
Philipp Dormann	9ab72aed19	license.json export + usage ref #17	2021-01-09 13:32:54 +01:00
Philipp Dormann	0e08c7f075	working on user detail page ref #12	2021-01-09 12:54:55 +01:00
Philipp Dormann	d5703365e4	first UserDetail page mockup ref #12	2021-01-09 12:46:47 +01:00
Philipp Dormann	58d68c8324	User Overview table expansion ref #12	2021-01-09 12:46:35 +01:00
Philipp Dormann	3c4a10944e	added routing to UserDetail page ref #12	2021-01-09 12:46:21 +01:00
Philipp Dormann	6e4fe37378	general dependency bump ⏫	2021-01-09 12:07:29 +01:00
Philipp Dormann	04794ff75e	Merge branch 'feature/12-user-management' into dev All checks were successful continuous-integration/drone/push Build is passing Details	2021-01-08 21:20:44 +01:00
Philipp Dormann	f7d7b837c4	general dependency bump ⏫	2021-01-08 21:20:20 +01:00
Philipp Dormann	08278b36a5	basic User Components ref #12	2021-01-08 21:19:43 +01:00
Philipp Dormann	9aeb99d775	dependency bump ⏫ ref #12	2021-01-08 21:19:05 +01:00
Philipp Dormann	e8c98a0a29	basic ForgotPassword improvements All checks were successful continuous-integration/drone/push Build is passing Details validation, steps towards error handlind	2021-01-08 17:32:31 +01:00
Philipp Dormann	b107f5de95	move OpenAPI config to App component rather than Login	2021-01-08 17:31:37 +01:00
Philipp Dormann	0c7bc07d67	🐞👀 visual fix in Footer component	2021-01-08 16:28:38 +01:00
Philipp Dormann	970a7c58d3	Merge commit '2657f30cf3acaa592408d2d4cddcb02bf76bb6af' into dev ✅ close #27	2021-01-08 16:24:11 +01:00
Philipp Dormann	2657f30cf3	use outsideclick custom directive in AddTrackModal component ref #27	2021-01-08 16:23:45 +01:00
Philipp Dormann	a042c8a870	added outsideclick as custom directive ref #27	2021-01-08 16:23:20 +01:00
Philipp Dormann	fc5c8d1309	Login Component Accessibility 👀 All checks were successful continuous-integration/drone/push Build is passing Details	2021-01-07 20:56:24 +01:00
Philipp Dormann	32e4f223f8	NGINX config - fix 404 error for SPA usage	2021-01-07 20:56:09 +01:00
Philipp Dormann	1f5057438f	NGINX config - enable brotli compression	2021-01-07 20:55:49 +01:00
Philipp Dormann	dbc660c48e	remove duplicate class usage in Dash Component All checks were successful continuous-integration/drone/push Build is passing Details	2021-01-07 20:32:56 +01:00
Philipp Dormann	be440684b3	Merge commit '80d30a8e5425f4041e79c299095c36386b8d7777' into dev All checks were successful continuous-integration/drone/push Build is passing Details close #26	2021-01-07 20:24:44 +01:00
Philipp Dormann	80d30a8e54	▶ ENTER key submit ref #26	2021-01-07 20:23:45 +01:00
Philipp Dormann	0c3e74f8a3	❌ escape key support ref #26	2021-01-07 20:21:17 +01:00
Philipp Dormann	ac952b6906	📦 further Dockerfile/ Bundle optimizations All checks were successful continuous-integration/drone/push Build is passing Details close #25	2021-01-07 20:14:45 +01:00
Philipp Dormann	43ecd83213	general + PWA optimizations All checks were successful continuous-integration/drone/push Build is passing Details selfhosting logo + PWA score optimization	2021-01-07 19:55:18 +01:00
Philipp Dormann	aaef97dd43	🐳 added Docker buildsteps for sw generation All checks were successful continuous-integration/drone/push Build is passing Details	2021-01-07 18:27:44 +01:00
Philipp Dormann	bc66ebbf0a	⚡ PWA optimizations All checks were successful continuous-integration/drone/push Build is passing Details this supports asset caching + proper handling of the /env.js file (might have lead to config errors in previous versions)	2021-01-07 18:16:36 +01:00
Philipp Dormann	44029c812e	Dashboard - fix accessibility focus state on nav Dropdown + Logout All checks were successful continuous-integration/drone/push Build is passing Details	2021-01-07 14:18:22 +01:00
Philipp Dormann	3e8d0b5462	🐞fixed snowpack config for bundle optimization	2021-01-07 14:17:45 +01:00
Philipp Dormann	6915123973	re-enable Tailwind compile with postcss	2021-01-07 14:16:03 +01:00
Philipp Dormann	089813146f	Merge commit 'bb0eb6d1e276186af2c1e5d26abda4413c278981' into dev All checks were successful continuous-integration/drone/push Build is passing Details close #11	2021-01-05 22:24:18 +01:00
Philipp Dormann	bb0eb6d1e2	AddTrackModal - minlaptime validation ref #11	2021-01-05 22:15:20 +01:00
Philipp Dormann	388fc8f239	AddTrackModal - autofocus on modal open ref #11	2021-01-05 22:11:06 +01:00
Philipp Dormann	0e7640bf86	AddTrackModal - trap focus if active ref #11	2021-01-05 22:07:38 +01:00
Philipp Dormann	d45eec94ab	AddTrackModal - placeholder input ref #11	2021-01-05 22:05:22 +01:00
Philipp Dormann	7bb5a18527	AddTrackModal - add track icon ref #11	2021-01-05 22:05:06 +01:00
Philipp Dormann	fe297f6779	AddTrackModal - more input validation response ref #11	2021-01-05 22:02:41 +01:00
Philipp Dormann	591dc09228	AddTrackModal - basic validation w/ class + layout responses ref #11	2021-01-05 21:53:06 +01:00
Philipp Dormann	7d1b51918f	delete confirmation ref #11	2021-01-05 21:42:42 +01:00
Philipp Dormann	e5fcb2ef68	Track edit animation ref #11	2021-01-05 21:38:57 +01:00
Philipp Dormann	34ecb8b2fb	move toastify css to app base ref #11	2021-01-05 21:38:47 +01:00
Philipp Dormann	68de076227	edit is working 🎉 ref #11	2021-01-05 21:30:01 +01:00
Philipp Dormann	039fd8f90e	basic edit logic in table ref #11	2021-01-05 21:16:50 +01:00
Philipp Dormann	02bfecd540	EmptyState fixup ref #11	2021-01-05 20:34:10 +01:00
Philipp Dormann	10bf88e4ba	fixed datatable-emptystate transition ref #11	2021-01-05 20:27:06 +01:00
Philipp Dormann	6e00ac8f1f	improved empty state ref #11	2021-01-05 18:31:36 +01:00
Philipp Dormann	35a9aa40cb	basic track deletion working ✅ ref #11	2021-01-05 18:31:26 +01:00
Philipp Dormann	c23fb5a450	Merge branch 'feature/24-i18n-formatting' into dev All checks were successful continuous-integration/drone/push Build is passing Details close #24	2021-01-04 20:29:58 +01:00
Philipp Dormann	1cd03ef027	add package script ref #24	2021-01-04 20:29:43 +01:00
Philipp Dormann	17e7778d15	re-added missing i18n keys All checks were successful continuous-integration/drone/push Build is passing Details ref #11	2021-01-04 19:59:18 +01:00
Philipp Dormann	70e10f7a70	demo run ref #24	2021-01-04 19:55:23 +01:00
Philipp Dormann	947482c1b5	improved order script for scalability ref #24	2021-01-04 19:55:12 +01:00
Philipp Dormann	f9aa262cab	basic formatting script ref #24	2021-01-04 19:52:05 +01:00
Philipp Dormann	ff91995337	Merge branch 'dev' into feature/11-tracks-management All checks were successful continuous-integration/drone/push Build is passing Details # Conflicts: # src/locales/en.json	2021-01-04 19:40:53 +01:00
Philipp Dormann	5b15141ecc	general cleanups All checks were successful continuous-integration/drone/push Build is passing Details	2021-01-04 19:39:57 +01:00
Philipp Dormann	008c91a552	track lap time interactive placeholder ref #11	2021-01-04 19:37:17 +01:00
Philipp Dormann	d830727036	AddTrackModal padding style ref #11	2021-01-04 19:37:02 +01:00
Philipp Dormann	dadccc1b5f	🌍 i18n lap time ref #11	2021-01-04 19:33:48 +01:00
Philipp Dormann	6022953417	Merge branch 'dev' into feature/11-tracks-management	2021-01-04 19:20:45 +01:00
Philipp Dormann	e62277bdd2	⏫ tinro dependency bump All checks were successful continuous-integration/drone/push Build is passing Details	2021-01-04 19:20:41 +01:00
Philipp Dormann	7210f1b947	include minimum lap times ref #11	2021-01-04 19:20:13 +01:00
Philipp Dormann	8af63fc22a	Merge commit '3a702aa91e768ab58e017d859732fcac960edac6' into feature/11-tracks-management	2021-01-04 18:24:56 +01:00
Philipp Dormann	3a702aa91e	🎨 OrgDetail style fix All checks were successful continuous-integration/drone/push Build is passing Details	2021-01-04 18:24:35 +01:00
Philipp Dormann	312ddef193	Merge branch 'feature/17-license_collection' into dev All checks were successful continuous-integration/drone/push Build is passing Details close #17	2021-01-03 19:39:27 +01:00
Philipp Dormann	236aba89c2	⏫ bump lfk client	2021-01-03 19:34:03 +01:00
Philipp Dormann	ba87349a88	⏫ dependency bump	2021-01-03 19:07:53 +01:00
Philipp Dormann	9527167fbc	StatCards direct linking to detail page	2021-01-03 19:01:14 +01:00
Philipp Dormann	9309ea9a30	move FormLayout component to Settings Page	2021-01-03 19:00:59 +01:00
Philipp Dormann	02d8888d97	🎨 general page styles	2021-01-03 18:54:54 +01:00
Philipp Dormann	56556bad6e	Merge branch 'dev' into feature/11-tracks-management # Conflicts: # src/locales/en.json	2021-01-03 18:18:31 +01:00
Philipp Dormann	84430854df	🌍 i18n	2021-01-03 18:14:40 +01:00
Philipp Dormann	3f961dd3bd	general page cleanups let's go, devspeed 🚀	2021-01-03 18:14:31 +01:00
Philipp Dormann	5c218c64ab	improved sidebar icons	2021-01-03 18:04:03 +01:00
Philipp Dormann	51c9c3fe3c	new layout margin from page title ref #11	2021-01-03 17:52:21 +01:00
Philipp Dormann	281747a681	🌍 i18n ref #11	2021-01-03 17:52:02 +01:00
Philipp Dormann	f37ba1dbf7	reactivity on adding a new Track ref #11	2021-01-03 17:51:46 +01:00
Philipp Dormann	48ddc62192	🌍 translations ref #11	2021-01-03 16:01:46 +01:00
Philipp Dormann	1954909786	Merge branch 'dev' into feature/11-tracks-management	2021-01-03 15:55:50 +01:00
Philipp Dormann	b1114634e8	Component + Login cleanup	2021-01-03 15:55:46 +01:00
Philipp Dormann	501bf7a5f4	AddTrackModal action ref #11	2021-01-03 15:55:29 +01:00
Philipp Dormann	9975c0cf64	Tracks datatable action ui ref #11	2021-01-03 15:55:16 +01:00
Philipp Dormann	f5d0e285fb	AddTrackModal cleanup ref #11	2021-01-03 15:53:13 +01:00
Philipp Dormann	89fcfe6a49	Dashboard component cleanup	2021-01-03 14:03:08 +01:00
Philipp Dormann	72f1645767	Track page cleanup	2021-01-03 13:59:58 +01:00
Philipp Dormann	9af4cfe73f	Tracks page cleanup	2021-01-03 13:50:31 +01:00
Philipp Dormann	9b036de4d7	Dashboard code cleanup	2021-01-03 13:45:38 +01:00
Philipp Dormann	c2cf8a0989	Tracks sample page w/ modal ref #23	2021-01-03 13:45:04 +01:00
Philipp Dormann	728dd40f16	add Tracks route to app ref #23	2021-01-03 13:44:45 +01:00
Philipp Dormann	f3f318fd01	TracksOverview route	2021-01-03 13:44:22 +01:00
Philipp Dormann	05306c75a5	Footer component cleanup	2021-01-03 12:22:15 +01:00
Philipp Dormann	b27fb8c0b5	Dashboard - dropdown arrow change ref #23	2021-01-03 00:58:57 +01:00
Philipp Dormann	0e5fbb8835	general UI cleanup ref #23	2021-01-03 00:58:39 +01:00
Philipp Dormann	12eb207605	🔧 re-enable jwtinfo userdetails in Dashboard ref #23	2021-01-02 23:04:58 +01:00
Philipp Dormann	b9410dc5f1	small bugfix ref #23	2021-01-02 22:32:26 +01:00
Philipp Dormann	46491f38a0	♻️ drop svelte-spa-router ref #23	2021-01-02 22:25:52 +01:00
Philipp Dormann	3396d17358	hash based routing in env file ref #23	2021-01-02 22:23:32 +01:00
Philipp Dormann	a50ea15b38	🚚 move to tinro svelte router ref #23	2021-01-02 22:23:13 +01:00
Philipp Dormann	1473267e8c	[tmp] - move to cdn usage for dev server compilation/ faster startup times	2021-01-02 22:16:54 +01:00
Philipp Dormann	112516ccfd	gitignore yarn.lock package-lock.json	2021-01-02 22:14:40 +01:00
Philipp Dormann	1104ab20c7	⏫ dependency bump postcss + gridjs	2021-01-02 22:14:07 +01:00
Philipp Dormann	9fbe1c7c6c	🎨 TailwindStyles - Chromium fix	2021-01-02 22:12:33 +01:00
Nicolai Ort	0842640fec	Dependency: Bumped license-exporter version ref odit/license-exporter#1 odit/license-exporter#3	2021-01-02 20:50:55 +01:00
Nicolai Ort	b538b6cb71	Updated dev branch name	2021-01-01 14:02:29 +01:00
Nicolai Ort	4c96b9a3e0	Initial license export ref #18	2020-12-31 22:42:50 +01:00
Nicolai Ort	9bf21a0eeb	Added drone file with pipeline for dev ref #18	2020-12-31 22:41:30 +01:00
Nicolai Ort	1fba3ef9e4	Added script for license export ref #18	2020-12-31 22:41:10 +01:00
Philipp Dormann	6ed818ef2d	Merge pull request 'feature/10-dashboard-stats' (#21 ) from feature/10-dashboard-stats into develop Reviewed-on: #21 ▶ closes #10	2020-12-31 16:58:16 +00:00
Philipp Dormann	4f02a5bac0	🖼 new icons + i18n for card titles ref #10	2020-12-31 16:33:08 +01:00
Philipp Dormann	f1b2c1de26	🌍 i18n - general_promise_error ref #10	2020-12-31 16:32:42 +01:00
Philipp Dormann	3d93b04264	StatCards - fetch real data from API ref #10	2020-12-31 16:19:58 +01:00
Philipp Dormann	e9a6637eb9	move StatCards up in Dashboard UI ref #10	2020-12-31 16:19:40 +01:00
Philipp Dormann	b4df123c04	added translations 🌍 ref #10	2020-12-31 16:18:32 +01:00
Philipp Dormann	725edfbb19	Merge pull request 'feature/8-login-preserve' (#19 ) from feature/8-login-preserve into develop Reviewed-on: #19 close #8	2020-12-30 19:05:31 +00:00
Philipp Dormann	813c058a9a	👋 sample user info usage on dashboard ref #8	2020-12-30 19:56:21 +01:00
Philipp Dormann	13ccb56354	💾 login state preserve (localstorage) + ℹ JWT payload parsing ref #8	2020-12-30 19:55:57 +01:00