From b4d13701a7ee16ad0281271b233eb03632673ffc Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Sat, 19 Dec 2020 18:27:48 +0100
Subject: [PATCH] =?UTF-8?q?first=20working=20router=20=F0=9F=8E=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                   |  1 +
 src/App.svelte                 | 39 ++++++++++++++++++++++++++++------
 src/components/Login.svelte    |  4 +++-
 src/components/NotFound.svelte |  5 +++--
 4 files changed, 39 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index 52827775..d5f35af7 100644
--- a/package.json
+++ b/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": {
diff --git a/src/App.svelte b/src/App.svelte
index 67bf245d..e1e7bd87 100644
--- a/src/App.svelte
+++ b/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} />
diff --git a/src/components/Login.svelte b/src/components/Login.svelte
index 0b6ff21f..ec1af162 100644
--- a/src/components/Login.svelte
+++ b/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>
diff --git a/src/components/NotFound.svelte b/src/components/NotFound.svelte
index 4f168264..62da0764 100644
--- a/src/components/NotFound.svelte
+++ b/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>