💾 login state preserve (localstorage) + ℹ JWT payload parsing

ref #8

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",

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";

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"),

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, jwtinfo) {
-		login(access_token) {
 			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
 	};
 };