Using sessionstores instead of reinventing the wheel

src/lib/stores.js

@@ -1,4 +1,5 @@
 import { writable } from 'svelte/store';
+import { localStorageStore} from "@skeletonlabs/skeleton";
 
 export const urls = {
     capabilities: "/capabilities",
@@ -16,4 +17,6 @@ export const globals = writable({
             reset: false
         },
     }
-});
+});
+
+export const sessionvars = localStorageStore('vars', [], {storage: 'session'})

src/routes/account/login/Login.svelte

@@ -28,11 +28,10 @@
 </style>
 
 <script lang="js">
-    import { urls, alerts, globals } from "$lib/stores.js";
-    import { createEventDispatcher } from 'svelte';
-    import {browser} from "$app/environment";
-    import {requestor} from "../../../serverrequest.js";
-    import {goto} from "$app/navigation";
+    import { urls, alerts, globals, sessionvars } from "$lib/stores.js";
+    import { browser } from "$app/environment";
+    import { requestor, setBaseUrl } from "../../../serverrequest.js";
+    import { goto } from "$app/navigation";
 
     var email = '';
     var password = '';
@@ -43,19 +42,27 @@
         globalvars = value;
     });
 
+    let sessions;
+
+    sessionvars.subscribe(value => {
+        sessions = value;
+    });
+
+    setBaseUrl(globalvars.server.url);
 
     async function handleLogin() {
         try {
             let postdata = {email: email, password: password}
             let response = await requestor.post(urls.login, JSON.stringify(postdata));
             let responsedata = JSON.parse(response.data);
-            if(response.status != 200) {
+            if(response.status !== 200) {
                 let message = 'Something went wrong during login'
                 if(typeof responsedata.message !== 'undefined') message = responsedata.message
                 throw(message)
             }
             if(!responsedata.success) return alerts.update(data => [...data, {text: 'Login failed: ' + responsedata.message , class: 'error'}]);
             globals.update((globalobj) => ({ ...globalobj, ...{user: responsedata.user }}));
+            sessions.update((sessionobj) => ({ ...sessionobj, ...{authorization: responsedata.authorization }}));
             goto('/')
         } catch (error) {
             return alerts.update(data => [...data, {text: error, class: 'error'}]);
@@ -63,8 +70,8 @@
     }
 
     function handleGoToServerSelect() {
-        if(sessionStorage.getItem('serverurl') != undefined) {
-            if(browser) sessionStorage.removeItem('serverurl');
+        if(typeof sessions.serverurl !== 'undefined') {
+            sessionvars.update(data => { delete data.serverurl; return data;});
             globals.update((data) => ({ ...data, ...{server: {url: '', caps: {}}} }));
         }
     }

src/routes/account/login/Server.svelte

@@ -16,21 +16,27 @@
 </style>
 
 <script lang="js">
-    import { urls, alerts, globals } from "$lib/stores.js";
-    import {createEventDispatcher, onMount} from 'svelte';
-    import {browser} from "$app/environment";
+    import {urls, alerts, globals, sessionvars } from "$lib/stores.js";
+    import {onMount} from 'svelte';
     import { requestor, setBaseUrl } from "../../../serverrequest.js";
 
     var loginserver;
 
+    let sessions;
+
+    sessionvars.subscribe(value => {
+        sessions = value;
+    });
+
     onMount(() => {
-        if(sessionStorage.getItem('serverurl') != undefined) {
-            loginserver = sessionStorage.getItem('serverurl');
+        if(typeof sessions.serverurl !== 'undefined') {
+            loginserver = sessions.serverurl;
             handleSelectServer();
         }
     })
 
 
+
     async function handleSelectServer() {
         if(!isValidHttpUrl(loginserver)) {
             loginserver = 'https://' + loginserver;
@@ -46,9 +52,7 @@
             let caps = JSON.parse(response.data);
             if(!caps.login) return alerts.update(data => [...data, {text: loginserver + ' is unavailable for login currently', class: 'error'}]);
             globals.update(data => ({ ...data, ...{server: {url: loginserver, caps: caps}}}));
-            if(browser) {
-                sessionStorage.setItem('serverurl', loginserver);
-            }
+            sessionvars.update((sessionobj) => ({ ...sessionobj, ...{serverurl: loginserver }}));
         } catch (error) {
             return alerts.update(data => [...data, {text: loginserver + ' is not a Blackbird Chess server', class: 'error'}]);
         }