From 13ccb56354135704834ffade8085ddbc8c03b369 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Wed, 30 Dec 2020 19:55:57 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=BE=20login=20state=20preserve=20(loca?=
 =?UTF-8?q?lstorage)=20+=20=E2=84=B9=20JWT=20payload=20parsing?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref #8
---
 package.json                |  3 ++-
 src/App.svelte              |  7 +++++++
 src/components/Login.svelte | 29 +++++++++++++++++++++++++----
 src/store.js                |  6 ++++--
 4 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index 3fcd96a9..30537df5 100644
--- a/package.json
+++ b/package.json
@@ -6,9 +6,10 @@
 		"build": "snowpack build"
 	},
 	"dependencies": {
-		"@odit/lfk-client-js": "^0.0.5",
+		"@odit/lfk-client-js": "0.0.6",
 		"filepond": "^4.25.1",
 		"gridjs": "^3.2.0",
+		"localforage": "^1.9.0",
 		"svelte-filepond": "^0.0.1",
 		"svelte-i18n": "^3.3.0",
 		"svelte-spa-router": "^3.1.0",
diff --git a/src/App.svelte b/src/App.svelte
index f748e89e..6663c578 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -3,6 +3,7 @@
   import Router from "svelte-spa-router";
   import { replace } from "svelte-spa-router";
   import { wrap } from "svelte-spa-router/wrap";
+  import localForage from "localforage";
   import { addMessages, init, getLocaleFromNavigator } from "svelte-i18n";
   import en from "./locales/en.json";
   import de from "./locales/de.json";
@@ -12,6 +13,12 @@
     fallbackLocale: "en",
     initialLocale: getLocaleFromNavigator(),
   });
+  localForage.config({
+    name: "lfk_admin",
+    version: 1.0,
+    storeName: "lfk_admin",
+    description: "LfK! admin dashbaord",
+  });
   //
   import Login from "./components/Login.svelte";
   import Dashboard from "./components/Dashboard.svelte";
diff --git a/src/components/Login.svelte b/src/components/Login.svelte
index a5fbaa25..ac8d44cb 100644
--- a/src/components/Login.svelte
+++ b/src/components/Login.svelte
@@ -1,5 +1,6 @@
 <script>
   import store from "../store.js";
+  import localForage from "localforage";
   import { _ } from "svelte-i18n";
   store.init();
   import { push, pop, replace } from "svelte-spa-router";
@@ -7,14 +8,32 @@
   OpenAPI.BASE = config.baseurl;
   import Toastify from "toastify-js";
   import "toastify-js/src/toastify.css";
-  import { init } from "svelte/internal";
+  // ------
   let usersUsername;
   let usersPassword = "";
+  let is_blocked_by_autologin = false;
   let last_loginclick_processed = true;
 
+  localForage.getItem("logindata", (err, value) => {
+    if (value) {
+      if (value.access_token && value.refresh_token) {
+        is_blocked_by_autologin = true;
+        OpenAPI.TOKEN = value.access_token;
+        const jwtinfo = JSON.parse(atob(OpenAPI.TOKEN.split(".")[1]));
+        store.login(value.access_token, jwtinfo);
+        replace("/dashboard/");
+        Toastify({
+          text: $_("welcome_wavinghand"),
+          duration: 500,
+          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+        }).showToast();
+      }
+    }
+  });
+
   const login = async () => {
     // prevent login button spamming
-    if (last_loginclick_processed) {
+    if (last_loginclick_processed && is_blocked_by_autologin === false) {
       last_loginclick_processed = false;
       Toastify({
         text: $_("login_is_checked"),
@@ -32,9 +51,11 @@
         username,
         password,
       })
-        .then((result) => {
+        .then(async (result) => {
+          await localForage.setItem("logindata", result);
           OpenAPI.TOKEN = result.access_token;
-          store.login(result.access_token);
+          const jwtinfo = JSON.parse(atob(OpenAPI.TOKEN.split(".")[1]));
+          store.login(result.access_token, jwtinfo);
           replace("/dashboard/");
           Toastify({
             text: $_("welcome_wavinghand"),
diff --git a/src/store.js b/src/store.js
index 63c1e6c6..3f8d29a4 100644
--- a/src/store.js
+++ b/src/store.js
@@ -3,6 +3,7 @@ import { writable } from 'svelte/store';
 const store = () => {
 	const state = {
 		access_token: undefined,
+		jwtinfo: undefined,
 		isLoggedIn: false
 	};
 
@@ -16,10 +17,10 @@ const store = () => {
 				return state;
 			});
 		},
-
-		login(access_token) {
+		login(access_token, jwtinfo) {
 			update((state) => {
 				state.access_token = access_token;
+				state.jwtinfo = jwtinfo;
 				state.isLoggedIn = true;
 				console.log('login performed');
 				return state;
@@ -37,6 +38,7 @@ const store = () => {
 		subscribe,
 		set,
 		update,
+		state,
 		...methods
 	};
 };