🚚 move to tinro svelte router

ref #23
2021-01-02 22:23:13 +01:00 · 2021-01-02 22:23:13 +01:00 · a50ea15b38
commit a50ea15b38
parent 1473267e8c
13 changed files with 530 additions and 156 deletions
--- a/nginx.conf
+++ b/nginx.conf
@ -1,8 +1,10 @@
-events{}
+events {
+}
 http {
    include mime.types;
    sendfile on;
    server {
+        error_page 404 /index.html;
        root /usr/share/nginx/html;
        location ~* \.(?:ico|css|js|gif|jpe?g|png)$ {
            expires 1y;
@ -22,6 +24,25 @@ http {
        gzip_comp_level 6;
        gzip_buffers 16 8k;
        gzip_http_version 1.1;
-        gzip_types application/javascript application/rss+xml application/vnd.ms-fontobject application/x-font application/x-font-opentype application/x-font-otf application/x-font-truetype application/x-font-ttf application/x-javascript application/xhtml+xml application/xml font/opentype font/otf font/ttf image/svg+xml image/x-icon text/css text/javascript text/plain text/xml;
+        gzip_types application/javascript
+            application/rss+xml
+            application/vnd.ms-fontobject
+            application/x-font
+            application/x-font-opentype
+            application/x-font-otf
+            application/x-font-truetype
+            application/x-font-ttf
+            application/x-javascript
+            application/xhtml+xml
+            application/xml
+            font/opentype
+            font/otf
+            font/ttf
+            image/svg+xml
+            image/x-icon
+            text/css
+            text/javascript
+            text/plain
+            text/xml;
    }
 }
--- a/package.json
+++ b/package.json
@ -14,6 +14,7 @@
 		"svelte-i18n": "^3.3.0",
 		"svelte-spa-router": "^3.1.0",
 		"tailwindcss": "^2.0.2",
+		"tinro": "^0.4.10",
 		"toastify-js": "^1.9.3",
 		"validator": "^13.5.2"
 	},
--- a/src/App.svelte
+++ b/src/App.svelte
@ -1,8 +1,12 @@
 <script>
-  import Router from "svelte-spa-router";
-  import { replace } from "svelte-spa-router";
-  import { wrap } from "svelte-spa-router/wrap";
  // import TailwindStyles from "./TailwindStyles.svelte";
+  import { Route, router } from "tinro";
+  router.subscribe((routeInfo) => {
+    console.log(routeInfo.path);
+    window.scrollTo(0, 0);
+  });
+  console.log($router.path);
+  console.log(config);
  import localForage from "localforage";
  import { addMessages, init, getLocaleFromNavigator } from "svelte-i18n";
  import en from "./locales/en.json";
@ -22,49 +26,148 @@
  //
  import Login from "./components/Login.svelte";
  import Dashboard from "./components/Dashboard.svelte";
-  import NotFound from "./components/NotFound.svelte";
  import store from "./store.js";
+  import NotFound from "./components/NotFound.svelte";
  import ForgotPassword from "./components/ForgotPassword.svelte";
+  import MainDashContent from "./components/MainDashContent.svelte";
+  import Users from "./components/Users.svelte";
  import About from "./components/About.svelte";
+  import Settings from "./components/Settings.svelte";
+  import Transition from "./components/Transition.svelte";
+  import Orgs from "./components/Orgs.svelte";
+  import Runners from "./components/Runners.svelte";
  store.init();
-  //
-  const checkAuth = (detail) => {
-    if (!$store.isLoggedIn) {
-      console.log("not authed");
-      replace("/login/");
-      return false;
-    }
-    return true;
-  };
-  const routes = {
-    "/about": About,
-    "/login": Login,
-    "/forgot_password": ForgotPassword,
-    "/dashboard": wrap({ component: Dashboard, conditions: [checkAuth] }),
-    "/": wrap({ component: Dashboard, conditions: [checkAuth] }),
-    // Using named parameters, with last being optional
-    // "/author/:first/:last?": Author,

-    // Wildcard parameter
-    // "/book/*": Book,
-
-    // Catch-all
-    // This is optional, but if present it must be the last
-    "*": NotFound,
-  };
-  //
-  if ("serviceWorker" in navigator) {
-    window.addEventListener("load", () => {
-      navigator.serviceWorker.register("/sw.js").then(
-        (registration) => {
-          console.log(`sw successful with scope: ${registration.scope}`);
-        },
-        (err) => {
-          console.log(`sw failed: ${err}`);
-        }
-      );
-    });
-  }
+  // 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}`);
+  //       }
+  //     );
+  //   });
+  // }
 </script>

-<Router {routes} />
+<button
+  on:click={() => {
+    $store.isLoggedIn = true;
+  }}>login</button>
+<!--  -->
+<Route>
+  {#if $router.path === '/forgot_password'}
+    <Route path="/forgot_password">
+      <ForgotPassword />
+    </Route>
+  {:else if $router.path === '/about'}
+    <Route path="/about">
+      <About />
+    </Route>
+  {:else if $store.isLoggedIn}
+    <Dashboard>
+      <Transition>
+        <Route path="/">
+          <MainDashContent />
+        </Route>
+        <Route path="/users">
+          <Users />
+        </Route>
+        <Route path="/runners">
+          <Runners />
+        </Route>
+        <Route path="/orgs/*">
+          <Route path="/">
+            <h1>Portfolio introduction</h1>
+            <nav><a class="underline" href="./1">Org 1</a></nav>
+            <Orgs />
+          </Route>
+          <Route path="/:orgid" let:params>
+            <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>
+          </Route>
+        </Route>
+        <Route path="/about">
+          <About />
+        </Route>
+        <Route path="/settings">
+          <Settings />
+        </Route>
+      </Transition>
+    </Dashboard>
+  {:else}
+    <Login />
+  {/if}
+</Route>
--- a/src/components/Dashboard.svelte
+++ b/src/components/Dashboard.svelte
@ -1,5 +1,9 @@
 <script>
  import { _ } from "svelte-i18n";
+  import { active } from "tinro";
+  import localForage from "localforage";
+  import { router } from "tinro";
+
  import BreadcrumbNav from "./BreadcrumbNav.svelte";
  import DataTable from "./DataTable.svelte";
  import FileUpload from "./FileUpload.svelte";
@ -14,7 +18,11 @@
  import Tags from "./Tags.svelte";
  import Badges from "./Badges.svelte";
  import Avatars from "./Avatars.svelte";
-import store from "../store";
+  import store from "../store";
+  import NoComponentLoaded from "./NoComponentLoaded.svelte";
+  //
+  import Router from "svelte-spa-router";
+  import { replace } from "svelte-spa-router";

  let activePage = "dashboard";
  let dropdown1 = false;
@ -35,6 +43,10 @@ import store from "../store";
    return check;
  }
  $: mobile = ismobile();
+  function logout() {
+    localForage.clear();
+    location.replace("/");
+  }
 </script>

 <section class="min-h-screen bg-gray-50">
@ -50,9 +62,9 @@ import store from "../store";
    </a>
    <nav class="text-sm font-medium text-gray-600" aria-label="Main Navigation">
      <a
-        class:bg-gray-100={activePage === 'dashboard'}
+        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"
-        href="#">
+        href="/">
        <svg
          class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
          xmlns="http://www.w3.org/2000/svg"
@ -64,33 +76,48 @@ import store from "../store";
        <span>Dashboard</span>
      </a>
      <a
-        class:bg-gray-100={activePage === 'users'}
+        class:bg-gray-100={$router.path.includes('/orgs/')}
        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
-        href="/#/users/">
+        href="/orgs/">
        <svg
          class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+          fill="currentColor"
          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 20 20"
-          fill="currentColor">
+          viewBox="0 0 24 24"
+          width="24"
+          height="24"><path fill="none" d="M0 0h24v24H0z" />
          <path
-            d="M5 3a1 1 0 000 2c5.523 0 10 4.477 10 10a1 1 0 102 0C17 8.373 11.627 3 5 3z" />
+            d="M17 19h2v-8h-6v8h2v-6h2v6zM3 19V4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v5h2v10h1v2H2v-2h1zm4-8v2h2v-2H7zm0 4v2h2v-2H7zm0-8v2h2V7H7z" /></svg>
+        <span>Orgs</span>
+      </a>
+      <a
+        class:bg-gray-100={$router.path === '/users/'}
+        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+        href="/users/">
+        <svg
+          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="M4 9a1 1 0 011-1 7 7 0 017 7 1 1 0 11-2 0 5 5 0 00-5-5 1 1 0 01-1-1zM3 15a2 2 0 114 0 2 2 0 01-4 0z" />
-        </svg>
+            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>
      </a>
      <a
-        class:bg-gray-100={activePage === '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"
-        href="/#/runners/">
+        href="/runners/">
        <svg
-          class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 20 20"
-          fill="currentColor">
+          viewBox="0 0 24 24"
+          class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
+          fill="currentColor"
+          width="24"
+          height="24"><path fill="none" d="M0 0h24v24H0z" />
          <path
-            d="M7 3a1 1 0 000 2h6a1 1 0 100-2H7zM4 7a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1zM2 11a2 2 0 012-2h12a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2v-4z" />
-        </svg>
+            d="M9.83 8.79L8 9.456V13H6V8.05h.015l5.268-1.918c.244-.093.51-.14.782-.131a2.616 2.616 0 0 1 2.427 1.82c.186.583.356.977.51 1.182A4.992 4.992 0 0 0 19 11v2a6.986 6.986 0 0 1-5.402-2.547l-.581 3.297L15 15.67V23h-2v-5.986l-2.05-1.987-.947 4.298-6.894-1.215.348-1.97 4.924.868L9.83 8.79zM13.5 5.5a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" /></svg>
        <span>Runners</span>
      </a>
      <a
@ -173,9 +200,9 @@ import store from "../store";
        <span>Changelog</span>
      </a>
      <a
-        class:bg-gray-100={activePage === 'settings'}
+        class:bg-gray-100={$router.path === '/settings/'}
        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
-        href="/#/settings/">
+        href="/settings/">
        <svg
          class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
          xmlns="http://www.w3.org/2000/svg"
@ -189,8 +216,9 @@ import store from "../store";
        <span>Settings</span>
      </a>
      <a
+        class:bg-gray-100={$router.path === '/about/'}
        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
-        href="/#/about/">
+        href="/about/">
        <svg
          class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
          xmlns="http://www.w3.org/2000/svg"
@ -203,6 +231,21 @@ import store from "../store";
          <path d="M12 16v-4M12 8h.01" /></svg>
        <span>About</span>
      </a>
+      <span
+        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
+        on:click={() => {
+          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"
+          width="24"
+          height="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>
+      </span>
    </nav>
  </nav>
  <div class="ml-0 transition md:ml-60">
@ -252,7 +295,7 @@ import store from "../store";
              d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" />
          </svg>
        </a>
-        <a href="/#/profile/" class="ml-4">
+        <a href="/profile/" class="ml-4">
          <img
            class="h-8 w-8 rounded-full"
            src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
@ -260,92 +303,9 @@ import store from "../store";
        </a>
      </div>
    </header>
-    <div
-      class="p-5 overflow-x-hidden"
-      on:click={() => {
-        navOpen = false;
-      }}>
-      <!-- Add content here, remove div below -->
-      <!-- <div class="border-4 border-dashed rounded h-96" /> -->
-      <h1 class="text-3xl leading-tight">
-        <span class="font-bold">Dashboard</span><span> - hello there, <span class="text-blue-500">{store.state.jwtinfo.userdetails.firstname}</span> 👋</span>
-      </h1>
-      <div class="shadow px-6 pt-4 pb-1">
-        <BreadcrumbNav />
-      </div>
-      <StatCards />
-      <div class="mb-8">
-        <FileUpload />
-      </div>
-      <div class="mb-8">
-        <DataTable />
-      </div>
-      <div class="mb-8">
-        <Tabs />
-      </div>
-      <div class="mb-8">
-        <Tags />
-      </div>
-      <div class="mb-8">
-        <Badges />
-      </div>
-      <div class="mb-8">
-        <Avatars />
-      </div>
-      <div class="mb-8">
-        <Tracks />
-      </div>
-      <Pagination />
-      <div class="mb-8">
-        <Table />
-      </div>
-      <div
-        class="widget w-full p-4 mb-4 rounded-lg bg-white border border-grey-100 dark:bg-grey-895 dark:border-grey-890">
-        <div class="flex flex-row items-center justify-between mb-6">
-          <div class="flex flex-col">
-            <div class="text-sm font-light text-grey-500">Regular</div>
-            <div class="text-sm font-bold"><span>Text inputs</span></div>
-          </div>
-        </div>
-        <div class="flex flex-col lg:flex-row lg:flex-wrap w-full lg:space-x-4">
-          <div class="w-full lg:w-1/4">
-            <div class="form-element ">
-              <div class="form-label">Label</div><input
-                name="name"
-                type="text"
-                class="form-input"
-                placeholder="Enter something..." />
-              <div class="form-hint">This is a hint</div>
-            </div>
-          </div>
-          <div class="w-full lg:w-1/4">
-            <div class="form-element ">
-              <div class="form-label">First name</div><input
-                name="name"
-                type="text"
-                class="form-input form-input-invalid"
-                placeholder="john@example.com" />
-              <div class="form-error">First name is required</div>
-            </div>
-          </div>
-          <div class="w-full lg:w-1/4">
-            <div class="form-element ">
-              <div class="form-label">First name</div><input
-                name="name"
-                type="text"
-                class="form-input form-input-valid"
-                placeholder="john@example.com" />
-              <div class="form-success">First name is valid</div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="mb-8">
-        <FormLayout />
-      </div>
-      <Footer />
-      <!-- <NotFound /> -->
-    </div>
+    <slot>
+      <NoComponentLoaded />
+    </slot>
  </div>
  <!-- Sidebar Backdrop -->
  <div
--- a/src/components/ForgotPassword.svelte
+++ b/src/components/ForgotPassword.svelte
@ -21,7 +21,7 @@
      reset_mail_sent = true;
    } else {
      Toastify({
-        text: $_('invalid-mail-reset'),
+        text: $_("invalid-mail-reset"),
        duration: 3500,
      }).showToast();
    }
@ -47,7 +47,7 @@
      <div class="mt-6">
        <div class="mt-6">
          <a
-            href="/#/"
+            href="/"
            class="block w-full text-center py-2 px-3 border border-gray-300 rounded-md text-gray-900 font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm">
            {$_('goback')}
          </a>
@ -125,6 +125,11 @@
              {$_('send-a-mail-to-lfk-odit-services')}
            </a>
          </div>
+          <div class="mt-6">
+            <a
+              href="/"
+              class="block w-full text-center py-2 px-3 border border-gray-300 rounded-md text-gray-900 font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm">{$_('goback')}</a>
+          </div>
        </div>
      </div>
    </div>
--- a/src/components/Login.svelte
+++ b/src/components/Login.svelte
@ -21,7 +21,7 @@
        OpenAPI.TOKEN = value.access_token;
        const jwtinfo = JSON.parse(atob(OpenAPI.TOKEN.split(".")[1]));
        store.login(value.access_token, jwtinfo);
-        replace("/dashboard/");
+        replace("/");
        Toastify({
          text: $_("welcome_wavinghand"),
          duration: 500,
@ -56,7 +56,7 @@
          OpenAPI.TOKEN = result.access_token;
          const jwtinfo = JSON.parse(atob(OpenAPI.TOKEN.split(".")[1]));
          store.login(result.access_token, jwtinfo);
-          replace("/dashboard/");
+          replace("/");
          Toastify({
            text: $_("welcome_wavinghand"),
            duration: 500,
@ -149,7 +149,7 @@
    </div>
    <div class="mt-2">
      <a
-        href="/#/forgot_password"
+        href="/forgot_password"
        class="block w-full text-center py-2 px-3 border border-gray-300 rounded-md font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm">
        {$_('forgot_password?')}
      </a>
--- a/src/components/MainDashContent.svelte
+++ b/src/components/MainDashContent.svelte
@ -0,0 +1,135 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import localForage from "localforage";
+  import BreadcrumbNav from "./BreadcrumbNav.svelte";
+  import DataTable from "./DataTable.svelte";
+  import FileUpload from "./FileUpload.svelte";
+  import Footer from "./Footer.svelte";
+  import FormLayout from "./FormLayout.svelte";
+  import NotFound from "./NotFound.svelte";
+  import Pagination from "./Pagination.svelte";
+  import StatCards from "./StatCards.svelte";
+  import Table from "./Table.svelte";
+  import Tracks from "./Tracks.svelte";
+  import Tabs from "./Tabs.svelte";
+  import Tags from "./Tags.svelte";
+  import Badges from "./Badges.svelte";
+  import Avatars from "./Avatars.svelte";
+  import store from "../store";
+  import NoComponentLoaded from "./NoComponentLoaded.svelte";
+  //
+  import Router from "svelte-spa-router";
+  import { replace } from "svelte-spa-router";
+  import { wrap } from "svelte-spa-router/wrap";
+
+  let activePage = "dashboard";
+  let dropdown1 = false;
+  let navOpen = false;
+  function ismobile() {
+    let check = false;
+    (function (a) {
+      if (
+        /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(
+          a
+        ) ||
+        /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(
+          a.substr(0, 4)
+        )
+      )
+        check = true;
+    })(navigator.userAgent || navigator.vendor || window.opera);
+    return check;
+  }
+  $: mobile = ismobile();
+  function logout() {
+    localForage.clear();
+    replace("/");
+  }
+</script>
+
+<div
+  class="p-5 overflow-x-hidden"
+  on:click={() => {
+    navOpen = false;
+  }}>
+  <!-- Add content here, remove div below -->
+  <!-- <div class="border-4 border-dashed rounded h-96" /> -->
+  <h1 class="text-3xl leading-tight">
+    <span class="font-bold">Dashboard</span><span> - hello there, </span>
+  </h1>
+  <div class="shadow px-6 pt-4 pb-1">
+    <BreadcrumbNav />
+  </div>
+  <StatCards />
+  <div class="mb-8">
+    <FileUpload />
+  </div>
+  <div class="mb-8">
+    <!-- <DataTable /> -->
+  </div>
+  <div class="mb-8">
+    <Tabs />
+  </div>
+  <div class="mb-8">
+    <Tags />
+  </div>
+  <div class="mb-8">
+    <Badges />
+  </div>
+  <div class="mb-8">
+    <Avatars />
+  </div>
+  <div class="mb-8">
+    <Tracks />
+  </div>
+  <Pagination />
+  <div class="mb-8">
+    <!-- <Table /> -->
+  </div>
+  <div
+    class="widget w-full p-4 mb-4 rounded-lg bg-white border border-grey-100 dark:bg-grey-895 dark:border-grey-890">
+    <div class="flex flex-row items-center justify-between mb-6">
+      <div class="flex flex-col">
+        <div class="text-sm font-light text-grey-500">Regular</div>
+        <div class="text-sm font-bold"><span>Text inputs</span></div>
+      </div>
+    </div>
+    <div class="flex flex-col lg:flex-row lg:flex-wrap w-full lg:space-x-4">
+      <div class="w-full lg:w-1/4">
+        <div class="form-element ">
+          <div class="form-label">Label</div><input
+            name="name"
+            type="text"
+            class="form-input"
+            placeholder="Enter something..." />
+          <div class="form-hint">This is a hint</div>
+        </div>
+      </div>
+      <div class="w-full lg:w-1/4">
+        <div class="form-element ">
+          <div class="form-label">First name</div><input
+            name="name"
+            type="text"
+            class="form-input form-input-invalid"
+            placeholder="john@example.com" />
+          <div class="form-error">First name is required</div>
+        </div>
+      </div>
+      <div class="w-full lg:w-1/4">
+        <div class="form-element ">
+          <div class="form-label">First name</div><input
+            name="name"
+            type="text"
+            class="form-input form-input-valid"
+            placeholder="john@example.com" />
+          <div class="form-success">First name is valid</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="mb-8">
+    <FormLayout />
+  </div>
+  <Footer />
+  <!-- <NotFound /> -->
+</div>
--- a/src/components/NoComponentLoaded.svelte
+++ b/src/components/NoComponentLoaded.svelte
@ -0,0 +1,23 @@
+<script>
+  import { _ } from "svelte-i18n";
+</script>
+
+<body class="antialiased font-sans">
+  <div class="flex min-h-screen">
+    <div class="w-full bg-white flex items-center justify-center ">
+      <div class="max-w-sm m-8">
+        <div class="text-black text-5xl md:text-15xl font-black">
+          Internal Error
+        </div>
+        <div class="w-16 h-1 bg-purple-light my-3 md:my-6" />
+        <p
+          class="text-grey-darker text-2xl md:text-3xl font-light mb-8 leading-normal">
+          Something went wrong in the UI logic
+        </p>
+        <a
+          href="/"
+          class="bg-transparent text-grey-darkest font-bold uppercase tracking-wide py-3 px-6 border-2 border-grey-light hover:border-grey rounded-lg">{$_('goback')}</a>
+      </div>
+    </div>
+  </div>
+</body>
--- a/src/components/Orgs.svelte
+++ b/src/components/Orgs.svelte
@ -0,0 +1,23 @@
+<script>
+  import { _ } from "svelte-i18n";
+</script>
+
+<body class="antialiased font-sans">
+  <div class="flex min-h-screen">
+    <div class="w-full bg-white flex items-center justify-center ">
+      <div class="max-w-sm m-8">
+        <div class="text-black text-5xl md:text-15xl font-black">
+          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>
+</body>
--- a/src/components/Runners.svelte
+++ b/src/components/Runners.svelte
@ -0,0 +1,23 @@
+<script>
+  import { _ } from "svelte-i18n";
+</script>
+
+<body class="antialiased font-sans">
+  <div class="flex min-h-screen">
+    <div class="w-full bg-white flex items-center justify-center ">
+      <div class="max-w-sm m-8">
+        <div class="text-black text-5xl md:text-15xl font-black">
+          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>
--- a/src/components/Settings.svelte
+++ b/src/components/Settings.svelte
@ -0,0 +1,46 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import Footer from "./Footer.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
+    </h1>
+    <p
+      class="mt-2 max-w-xl mx-auto text-xl lg:max-w-3xl lg:text-2xl text-gray-300">
+      <span class="text-lg">configure your profile however you want</span>
+    </p>
+  </div>
+</div>
+
+<div class="pt-0 pb-16 bg-gray-50 overflow-hidden lg:pt-12 lg:py-24">
+  <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
+    <h2 class="text-4xl font-display font-semibold text-gray-900 md:text-5xl">
+      General
+    </h2>
+    <div
+      class="max-w-3xl mx-auto text-xl leading-8 font-medium text-gray-900 mt-8">
+      <p class="text-center">
+        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Temporibus et
+        amet voluptate nulla accusantium vero blanditiis nobis facere veritatis.
+        Impedit deserunt saepe aliquid unde consequuntur officia consequatur
+        fugit iusto dolorem?
+      </p>
+    </div>
+  </div>
+</div>
+<Footer />
--- a/src/components/Transition.svelte
+++ b/src/components/Transition.svelte
@ -0,0 +1,11 @@
+<!-- Transition.svelte -->
+<script>
+  import { router } from "tinro";
+  import { fade } from "svelte/transition";
+</script>
+
+{#key $router.path}
+  <div in:fade={{ duration: 75 }}>
+    <slot />
+  </div>
+{/key}
--- a/src/components/Users.svelte
+++ b/src/components/Users.svelte
@ -0,0 +1,23 @@
+<script>
+  import { _ } from "svelte-i18n";
+</script>
+
+<body class="antialiased font-sans">
+  <div class="flex min-h-screen">
+    <div class="w-full bg-white flex items-center justify-center ">
+      <div class="max-w-sm m-8">
+        <div class="text-black text-5xl md:text-15xl font-black">
+          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>