🚀RELEASE v0.1.0

add basic package script
ref #4
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 · 2021-01-10 11:42:30 +01:00 · 2021-01-09 18:39:13 +01:00
52 changed files with 1597 additions and 645 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
@@ -6,4 +6,5 @@ dist-ssr
 public/env.js
 /build
 yarn.lock
-package-lock.json
+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/nginx.conf
+++ b/nginx.conf
@@ -6,16 +6,19 @@ http {
    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";
--- 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,29 +1,54 @@
 {
 	"name": "@odit/lfk-frontend",
-	"version": "0.0.0",
+	"version": "0.1.0",
 	"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.6",
-		"filepond": "^4.25.1",
-		"gridjs": "^3.2.1",
-		"localforage": "^1.9.0",
-		"svelte-filepond": "^0.0.1",
-		"svelte-i18n": "^3.3.0",
-		"tailwindcss": "^2.0.2",
-		"tinro": "^0.4.10",
-		"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.2",
-		"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": {
+			"changelog": "git log --pretty=format:\"* %s (%h)\" ${from}...${to}",
+			"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,7 +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,11 +5,11 @@
  <meta charset="utf-8" />
  <link rel="icon" href="/favicon.png" />
  <link rel="manifest" href="/manifest.webmanifest">
+  <link rel="apple-touch-icon" href="/lfk-logo.png">
  <meta name="theme-color" content="#FFFFFF">
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="Lauf Für Kaya! - Admin" />
  <title>Lauf für Kaya! - Admin</title>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.0.2/dist/tailwind.min.css">
 </head>

 <body>
--- 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,12 +1,10 @@
 <script>
-  // import TailwindStyles from "./TailwindStyles.svelte";
+  import "./TailwindStyles.svelte";
+  import "toastify-js/src/toastify.css";
  import { Route, router } from "tinro";
  router.subscribe((routeInfo) => {
-    console.log(routeInfo.path);
    window.scrollTo(0, 0);
  });
-  console.log($router.path);
-  console.log(config);
  if (config.prefersHashRouting) {
    if (config.prefersHashRouting === true) {
      router.useHashNavigation();
@@ -43,21 +41,15 @@
  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 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();
-
-  // 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>

 <Route>
@@ -75,8 +67,13 @@ import TracksOverview from "./components/TracksOverview.svelte";
        <Route path="/">
          <MainDashContent />
        </Route>
-        <Route path="/users">
-          <Users />
+        <Route path="/users/*">
+          <Route path="/">
+            <Users />
+          </Route>
+          <Route path="/:userid" let:params>
+            <UserDetail {params} />
+          </Route>
        </Route>
        <Route path="/tracks/*">
          <Route path="/">
@@ -87,89 +84,15 @@ import TracksOverview from "./components/TracksOverview.svelte";
        <Route path="/runners">
          <Runners />
        </Route>
+        <Route path="/teams">
+          <Teams />
+        </Route>
        <Route path="/orgs/*">
          <Route path="/">
-            <div class="bg-white p-5">
-              <h1>Portfolio introduction</h1>
-              <nav><a class="underline" href="./1">Org 1</a></nav>
-            </div>
            <Orgs />
          </Route>
          <Route path="/:orgid" let:params>
-            <div class="bg-white p-5">
-              <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>
-            </div>
+            <OrgDetail {params} />
          </Route>
        </Route>
        <Route path="/about">
--- a/src/components/About.svelte
+++ b/src/components/About.svelte
@@ -1,18 +1,92 @@
 <script>
  import { _ } from "svelte-i18n";
+  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;
-  }
-</style>
-
-<svelte:head>
-  <link
-    rel="stylesheet"
-    href="https://cdn.jsdelivr.net/npm/@xz/fonts@1/serve/agave.min.css" />
-</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
@@ -33,161 +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">
-      <!--  -->
-      <table>
-        <thead>
-          <tr>
-            <th>name</th>
-            <th>licenseType</th>
-            <th>link</th>
-            <th>installedVersion</th>
-            <th>author</th>
-          </tr>
-        </thead>
-        <tbody>
-          <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>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>
-          </tr>
-        </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> -->
+      {#await license_promise}
+        <p class="text-center w-full">Licenses are being loaded...</p>
+      {:then}
+        <table>
+          <thead>
+            <tr>
+              <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>{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>
+      {: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}
    </div>
-    <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">
      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>
@@ -195,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>
--- a/src/components/AddTrackModal.svelte
+++ b/src/components/AddTrackModal.svelte
@@ -1,14 +1,39 @@
 <script>
  import { _ } from "svelte-i18n";
+  import { clickOutside } from "./outsideclick";
+  import { focusTrap } from "svelte-focus-trap";
  import { tracks as tracksstore } from "../store.js";
-  let trackname_input;
-  let trackname_input_value;
-  let tracklength;
  import { TrackService } from "@odit/lfk-client-js";
-  export let modal_open;
-  let processed_last_submit = true;
  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;
@@ -19,14 +44,19 @@
      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();
-          modal_open = false;
          let storeval = [];
          tracksstore.subscribe((val) => {
            storeval = val;
@@ -47,11 +77,19 @@
 </script>

 {#if modal_open}
-  <div class="fixed z-10 inset-0 overflow-y-auto">
+  <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" />
+        <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"
@@ -67,17 +105,13 @@
              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"
-                xmlns="http://www.w3.org/2000/svg"
                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-                aria-hidden="true">
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-              </svg>
+                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">
@@ -94,11 +128,23 @@
                    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 sm:text-sm border-gray-300 rounded-md" />
+                    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
@@ -106,14 +152,49 @@
                    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-r-md sm:text-sm border-gray-300"
+                      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-l-0 border-gray-300 bg-gray-50 text-gray-500 text-sm">m</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>
@@ -121,6 +202,8 @@
        </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">
--- 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
@@ -3,7 +3,6 @@
  import Badges from "./Badges.svelte";
  import BreadcrumbNav from "./BreadcrumbNav.svelte";
  import FileUpload from "./FileUpload.svelte";
-  import FormLayout from "./FormLayout.svelte";
  import Pagination from "./Pagination.svelte";
  import Table from "./Table.svelte";
  import Tabs from "./Tabs.svelte";
@@ -71,9 +70,6 @@
    </div>
  </div>
 </div>
-<div class="mb-8">
-  <FormLayout />
-</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
@@ -6,6 +6,7 @@

  import store from "../store";
  import NoComponentLoaded from "./NoComponentLoaded.svelte";
+  import { AuthService, OpenAPI } from "@odit/lfk-client-js";

  let activePage = "dashboard";
  let dropdown1 = false;
@@ -32,21 +33,22 @@
  }
 </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:dark:bg-gray-900={$router.path === '/'}
        class:bg-gray-100={$router.path === '/'}
-        class="flex items-center px-4 py-3 text-gray-900 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
        href="/">
        <svg
          class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
@@ -56,9 +58,10 @@
          <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: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="/orgs/">
@@ -71,26 +74,28 @@
          height="24"><path fill="none" d="M0 0h24v24H0z" />
          <path
            d="M17 19h2v-8h-6v8h2v-6h2v6zM3 19V4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v5h2v10h1v2H2v-2h1zm4-8v2h2v-2H7zm0 4v2h2v-2H7zm0-8v2h2V7H7z" /></svg>
-        <span>Orgs</span>
+        <span>{$_('orgs')}</span>
      </a>
      <a
+        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
-          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"
-          width="24"
          fill="currentColor"
-          height="24"><path fill="none" d="M0 0h24v24H0z" />
-          <path
-            d="M2 22a8 8 0 1 1 16 0H2zm8-9c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6zm7.363 2.233A7.505 7.505 0 0 1 22.983 22H20c0-2.61-1-4.986-2.637-6.767zm-2.023-2.276A7.98 7.98 0 0 0 18 7a7.964 7.964 0 0 0-1.015-3.903A5 5 0 0 1 21 8a4.999 4.999 0 0 1-5.66 4.957z" /></svg>
-        <span>Users</span>
+          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>
+        <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 text-gray-900 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
        href="/runners/">
        <svg
          xmlns="http://www.w3.org/2000/svg"
@@ -101,21 +106,42 @@
          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>
+        <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 text-gray-900 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
        href="/tracks/">
-        <svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path
-            d="M0 0h24v24H0z"
-            class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
-            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>
-        <span>Tracks</span>
+        <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="#">
@@ -134,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"
@@ -206,9 +234,10 @@
            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: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/">
@@ -222,9 +251,10 @@
            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/">
@@ -238,28 +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
-          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" />
+          height="24"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z" />
          <path
-            d="M5 22a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v3h-2V4H6v16h12v-2h2v3a1 1 0 0 1-1 1H5zm13-6v-3h-7v-2h7V8l5 4-5 4z" /></svg>
-        <span>Logout</span>
+            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;
--- 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,20 +2,14 @@
  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">
-        <p class="text-sm text-gray-500 mt-4">
-          Lauf für Kaya! Läufersystem - Copyright © 2020 + proudly powered by
-          <a
-            class="underline"
-            href="https://odit.services"
-            rel="noopener,noreferrer"
-            target="_blank">ODIT.Services</a>
-        </p>
-      </div>
-    </footer>
-  </div>
+<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
+      class="underline"
+      href="https://odit.services"
+      rel="noopener,noreferrer"
+      target="_blank">ODIT.Services</a>
+  </p>
 </footer>
--- a/src/components/ForgotPassword.svelte
+++ b/src/components/ForgotPassword.svelte
@@ -1,23 +1,28 @@
 <script>
+  import { ApiError, AuthService } from "@odit/lfk-client-js";
  import { _ } from "svelte-i18n";
-  import store from "../store.js";
-  store.init();
-  //
-  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)) {
-      Toastify({
-        text: $_("mail-validation-in-progress"),
-        duration: 3500,
-      }).showToast();
-      reset_mail_sent = true;
+      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"),
@@ -30,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>
@@ -57,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>
--- 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
@@ -4,9 +4,7 @@
  import { _ } from "svelte-i18n";
  store.init();
  import { OpenAPI, AuthService } from "@odit/lfk-client-js";
-  OpenAPI.BASE = config.baseurl;
  import Toastify from "toastify-js";
-  import "toastify-js/src/toastify.css";
  // ------
  let username = "demo";
  let password = "demo";
@@ -83,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>
--- 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
@@ -13,7 +13,7 @@
  }}>
  <!-- <div class="border-4 border-dashed rounded h-96" /> -->
  <h1 class="text-3xl leading-tight">
-    <span class="font-bold">{$_('dashboard-title')}</span><span>
+    <span class="font-extrabold">{$_('dashboard-title')}</span> <span>
      -
      {$_('dashboard-greeting')},
      <span
--- 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
@@ -2,18 +2,12 @@
  import { _ } from "svelte-i18n";
 </script>

-<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">Orgs</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">
-        bla
-      </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>
+<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
@@ -2,22 +2,9 @@
  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">
-          Runners
-        </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">
-          bla
-        </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>
+<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
@@ -1,23 +1,13 @@
 <script>
  import { _ } from "svelte-i18n";
+import FormLayout from "./FormLayout.svelte";
 </script>

-<style>
-  * {
-    font-family: "Agave", sans-serif;
-  }
-</style>
-
-<svelte:head>
-  <link
-    rel="stylesheet"
-    href="https://cdn.jsdelivr.net/npm/@xz/fonts@1/serve/agave.min.css" />
-</svelte:head>
 <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
+      🔨<br />{$_('settings')}
    </h1>
    <p
      class="mt-2 max-w-xl mx-auto text-xl lg:max-w-3xl lg:text-2xl text-gray-300">
@@ -28,11 +18,11 @@

 <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">
+    <!-- <h2 class="text-4xl font-display font-semibold text-gray-900 md:text-5xl">
      General
-    </h2>
+    </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 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.
@@ -40,5 +30,6 @@
        fugit iusto dolorem?
      </p>
    </div>
+    <FormLayout />
  </div>
-</div>
+</div>
--- a/src/components/StatCards.svelte
+++ b/src/components/StatCards.svelte
@@ -1,27 +1,24 @@
 <script>
+  import { StatsService } from "@odit/lfk-client-js";
  import { _ } from "svelte-i18n";
-  import { TrackService, StatsService } from "@odit/lfk-client-js";
  const stats_promise = StatsService.statsControllerGet();
-  stats_promise.then((res) => {
-    console.log(res);
-  });
 </script>

 <!--  -->
-<h1>Allgemeine Statistiken</h1>
+<h1>{$_('general-stats')}</h1>
 {#await stats_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">stats are being loaded...</p>
-    <p class="text-sm">This might take a moment 👀</p>
+    <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">
-    <div class="w-full lg:w-1/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">
+        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">
@@ -32,16 +29,17 @@
          <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>
-    </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">
+        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">
@@ -50,7 +48,7 @@
            <div class="text-xl font-bold">{stats.total_scans}</div>
          </div><svg
            stroke="currentColor"
-            fill="none"
+            fill="currentColor"
            stroke-width="2"
            viewBox="0 0 24 24"
            stroke-linecap="round"
@@ -66,7 +64,7 @@
    </div>
    <div class="w-full lg:w-1/4">
      <div
-        class="widget w-full p-4 rounded-lg bg-white border border-grey-100 dark:bg-grey-895 dark:border-grey-890">
+        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">
@@ -76,6 +74,7 @@
          </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>
@@ -84,7 +83,7 @@
    </div>
    <div class="w-full lg:w-1/4">
      <div
-        class="widget w-full p-4 rounded-lg bg-white border border-grey-100 dark:bg-grey-895 dark:border-grey-890">
+        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">
@@ -95,17 +94,19 @@
              km
            </div>
          </div>
-          <svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path
-              d="M0 0h24v24H0z"
-              fill="none" />
+          <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>
-    <div class="w-full lg:w-1/4">
+    <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">
+        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">
@@ -131,10 +132,10 @@
            <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">
@@ -144,6 +145,7 @@
          </div>
          <svg
            height="24"
+            fill="currentColor"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z" />
@@ -151,7 +153,7 @@
              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>
-    </div>
+    </a>
  </div>
 {:catch error}
  <div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
--- 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,5 +1,6 @@
 <script>
  import { _, json } from "svelte-i18n";
+  import Toastify from "toastify-js";
  import TracksEmptyState from "./TracksEmptyState.svelte";
  import { TrackService } from "@odit/lfk-client-js";
  const tracks_promise = TrackService.trackControllerGetAll();
@@ -7,39 +8,146 @@
  import { Grid, html } from "gridjs";
  import "gridjs/dist/theme/mermaid.css";
  import { tracks as tracksstore } from "../store.js";
-  let trackscache = [];
+  $: trackscache = [];
+  $: blocked = [];
  let table;
  let datatable;
  let datatable_inited = false;
-  let initial_load_done = false;
+  tracksstore.subscribe((val) => {
+    trackscache = val;
+    setTimeout(() => {
+      if (val.length > 0) {
+        renderdatatable();
+      }
+    }, 100);
+  });
  tracks_promise.then((data) => {
    tracksstore.set(data);
-    tracksstore.subscribe((val) => {
-      trackscache = val;
-      if (initial_load_done === false) {
-        initial_load_done = true;
-      }
-      setTimeout(() => {
-        renderdatatable();
-      }, 100);
-    });
-    table_visible = true;
  });
+  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(`
-        <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">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">Delete</button>
+        <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"), "Action"],
+        columns: [
+          $_("track-name"),
+          $_("track-length-in-m"),
+          $_("minimum-lap-time-in-s"),
+          $_("action"),
+        ],
        language: getlang($json("datatable")),
        sort: true,
        search: { enabled: true },
@@ -55,10 +163,9 @@
      datatable.updateConfig({ data: tabledata }).forceRender();
    }
  }
-  let table_visible = false;
 </script>

-{#if table_visible}
+{#if trackscache.length > 0}
  <div bind:this={table} />
 {/if}
 {#await tracks_promise}
@@ -68,10 +175,8 @@
    <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}
-    <!--  -->
-  {:else}
+{:then}
+  {#if trackscache.length === 0}
    <TracksEmptyState />
  {/if}
 {:catch error}
--- a/src/components/TracksEmptyState.svelte
+++ b/src/components/TracksEmptyState.svelte
@@ -253,17 +253,7 @@
      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
-      on:click={() => {
-        modal_open = true;
-      }}
-      class="underline text-blue-500 cursor-pointer">{$_('add-your-first-track')}</span>
-    <br />
-    <span
-      on:click={() => {
-        modal_open = true;
-      }}
-      class="cursor-pointer inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">{$_('add-your-first-track')}</span>
+    <span>{$_('add-your-first-track')}</span>
  </p>
 </div>

--- a/src/components/TracksOverview.svelte
+++ b/src/components/TracksOverview.svelte
@@ -5,8 +5,8 @@
  import Tracks from "./Tracks.svelte";
 </script>

-<section class="container py-10 mx-auto sm:px-2">
-  <span class="mb-1 text-3xl font-extrabold leading-tight text-gray-900">
+<section class="container p-5">
+  <span class="mb-1 text-3xl font-extrabold leading-tight">
    Tracks
    <button
      on:click={() => {
@@ -18,7 +18,7 @@
    </button>
  </span>
  <p class="mb-8 text-lg text-gray-500">
-    configure the tracks/ min-max lap times
+    configure the tracks & minimum lap times
  </p>
  <Tracks />
 </section>
--- 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
@@ -1,23 +1,25 @@
 <script>
  import { _ } from "svelte-i18n";
+  import AddUserModal from "./AddUserModal.svelte";
+  export let modal_open = false;
+  import UsersOverview from "./UsersOverview.svelte";
 </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">
-          Users
-        </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">
-          bla
-        </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>
+<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,45 +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",
-  "application_name": "Lauf für Kaya! \n- Admin",
-  "goback": "Zur Startseite",
-  "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",
-  "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",
-    "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",
-  "hallo": "hallo",
-  "total-scans": "gesamte Scans",
-  "total-donations": "Spendensumme",
-  "credits": "",
-  "runners": "Läufer",
-  "total-distance": "gelaufene Strecke"
-}
+    "404message": "Die gesuchte Seite wurde leider nicht gefunden.",
+    "404title": "Fehler 404",
+    "about": "Über",
+    "application_name": "Lauf für Kaya! \n- Admin",
+    "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.",
+    "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",
+        "to": "bis",
+        "showing": "Zeige"
+    },
+    "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",
+    "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",
+    "total-scans": "gesamte Scans",
+    "welcome_wavinghand": "Willkommen 👋",
+    "your_profile": "Dein Profil"
+}
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1,67 +1,85 @@
 {
-  "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",
-  "application_name": "Lauf für Kaya! - Admin",
-  "reset-my-password": "Reset my password",
-  "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",
-  "datatable": {
-    "search": "🔍 Search...",
-    "sort_column_ascending": "Sort column ascending",
-    "sort_column_descending": "Sort column descending",
-    "previous": "Previous",
-    "next": "Next",
-    "page": "Page",
-    "showing": "Showing",
-    "records": "Records",
-    "of": "of",
-    "to": "to",
-    "loading": "Loading...",
-    "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",
-  "lfk-is-os": "The \"Lauf für Kaya!\" Frontend is (like all other projects for the \"LfK!\" Also) an open source project.",
-  "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",
-  "count_organizations": "# Organizations",
-  "count_teams": "# Teams",
-  "general_promise_error": "😢 Error",
-  "add-your-first-track": "Add your first track",
-  "no-tracks-added-yet": "there are no tracks added yet.",
-  "track-length-in-m": "Track Length in m",
-  "track-name": "Track name",
-  "please-provide-the-required-information-to-add-a-new-track": "Please provide the required information to add a new track.",
-  "create-a-new-track": "Create a new Track",
-  "dashboard-greeting": "hello there",
-  "dashboard-title": "Dashboard",
-  "track-added": "Track added",
-  "track-is-being-added": "Track is being added...",
-  "this-might-take-a-moment": "This might take a moment 👀",
-  "track-data-is-being-loaded": "track data is being loaded..."
-}
+    "404message": "Sorry, the page you are looking for could not be found.",
+    "404title": "Error 404",
+    "about": "About",
+    "action": "Action",
+    "add-your-first-track": "Add your first track",
+    "application_name": "Lauf für Kaya! - Admin",
+    "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",
+    "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",
+        "sort_column_descending": "Sort column descending",
+        "previous": "Previous",
+        "next": "Next",
+        "page": "Page",
+        "showing": "Showing",
+        "records": "Records",
+        "of": "of",
+        "to": "to",
+        "loading": "Loading...",
+        "no_matching_records_found": "No matching records found",
+        "an_error_happened_while_fetching_the_data": "An error happened while fetching the data"
+    },
+    "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!",
+    "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,5 +1,6 @@
 import { writable } from 'svelte/store';

+export let users = writable([]);
 export let tracks = writable([]);
 const store = () => {
 	const state = {
@@ -12,7 +13,6 @@ const store = () => {

 	const methods = {
 		init() {
-			console.log('*: playerStore -> init()');
 			update((state) => {
 				state.isLoggedIn = false;
 				return state;
@@ -23,7 +23,6 @@ const store = () => {
 				state.access_token = access_token;
 				state.jwtinfo = jwtinfo;
 				state.isLoggedIn = true;
-				console.log('login performed');
 				return state;
 			});
 		},
@@ -43,5 +42,4 @@ const store = () => {
 		...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/svelte.config.js
+++ b/svelte.config.js
@@ -1,9 +1,9 @@
 const sveltePreprocess = require('svelte-preprocess');

 const preprocess = sveltePreprocess({
-	// postcss: {
-	// 	plugins: [ require('tailwindcss'), require('autoprefixer') ]
-	// }
+	postcss: {
+		plugins: [ require('tailwindcss'), require('autoprefixer') ]
+	}
 });

 module.exports = {
--- 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	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
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