first working router 🎉

package.json

@@ -9,6 +9,7 @@
 	"dependencies": {
 		"@odit/lfk-client-js": "^0.0.4",
 		"svelte-i18n": "^3.3.0",
+		"svelte-spa-router": "^3.1.0",
 		"toastify-js": "^1.9.3"
 	},
 	"devDependencies": {

src/App.svelte

@@ -1,4 +1,7 @@
 <script>
+  import Router from "svelte-spa-router";
+  import { replace } from "svelte-spa-router";
+  import { wrap } from "svelte-spa-router/wrap";
   import { addMessages, init, getLocaleFromNavigator } from "svelte-i18n";
   import en from "./locales/en";
   import de from "./locales/de";
@@ -12,17 +15,39 @@
   import Login from "./components/Login.svelte";
   import Dashboard from "./components/Dashboard.svelte";
   import Footer from "./components/Footer.svelte";
+  import NotFound from "./components/NotFound.svelte";
   import Tracks from "./components/Tracks.svelte";
   // import Profile from "./components/Profile.svelte";
   import store from "./store.js";
+  import ForgotPassword from "./components/ForgotPassword.svelte";
   store.init();
   $: logged_in = $store.isLoggedIn;
+  //
+  const checkAuth = (detail) => {
+    if (!$store.isLoggedIn) {
+      console.log("not authed");
+      replace("/login/");
+      return false;
+    }
+    return true;
+  };
+  const routes = {
+    "/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,
+  };
+  //
 </script>
 
-{#if logged_in === true}
-  <Dashboard />
-  <Footer />
-  <!-- <Profile /> -->
-{:else}
-  <Login />
-{/if}
+<Router {routes} />

src/components/Login.svelte

@@ -2,6 +2,7 @@
   import { _ } from "svelte-i18n";
   import store from "../store.js";
   store.init();
+  import {push, pop, replace} from 'svelte-spa-router'
   //
   import { OpenAPI, AuthService } from "@odit/lfk-client-js";
   OpenAPI.BASE = "http://localhost:4010";
@@ -32,6 +33,7 @@
         .then((result) => {
           OpenAPI.TOKEN = result.access_token;
           store.login(result.access_token);
+          replace('/dashboard/')
           Toastify({
             text: $_("welcome_wavinghand"),
             duration: 500,
@@ -120,7 +122,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 text-gray-900 font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm">
         {$_('forgot_password?')}
       </a>

src/components/NotFound.svelte

@@ -14,8 +14,9 @@
           class="text-grey-darker text-2xl md:text-3xl font-light mb-8 leading-normal">
           {$_('404message')}
         </p>
-        <button
-          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')}</button>
+        <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>