Revert alot of changes

Author: hhvrc

src/lib/init.ts

@@ -0,0 +1,42 @@
+import { browser } from '$app/environment';
+import { initializeDarkModeStore } from '$lib/stores/ColorSchemeStore';
+import { initializeFlashManagersStore } from '$lib/stores/FlashManagersStore';
+import { initializeSerialPortsStore } from '$lib/stores/SerialPortsStore';
+import { UserStore } from '$lib/stores/UserStore';
+import { get, writable } from 'svelte/store';
+import { destroySignalR, initializeSignalR } from './signalr';
+
+const isInitializedStore = writable<true | undefined>();
+
+export async function initializeApp(initializeAuth: boolean) {
+  if (!browser) return;
+
+  // Multiple init protection
+  if (get(isInitializedStore)) return;
+  isInitializedStore.set(true);
+
+  initializeDarkModeStore();
+  initializeFlashManagersStore(); // TODO: Move this OUT of here
+  initializeSerialPortsStore(); // TODO: Move this OUT of here
+
+  if (!initializeAuth) return;
+
+  const isAuthenticated = get(UserStore).self !== null;
+  if (!isAuthenticated) {
+    // Try to authenticate
+    if (!(await UserStore.refreshSelf())) {
+      // Failed to authenticate
+      return;
+    }
+  }
+
+  // Initialize SignalR connection
+  await initializeSignalR();
+
+  return true;
+}
+
+export async function destroyAuth() {
+  UserStore.reset();
+  await destroySignalR();
+}

src/lib/server/cookie.ts

@@ -5,9 +5,8 @@ import {
   HubConnectionState,
   LogLevel,
 } from '@microsoft/signalr';
-import { browser, dev } from '$app/environment';
+import { dev } from '$app/environment';
 import { PUBLIC_BACKEND_API_DOMAIN } from '$env/static/public';
-import { UserStore } from '$lib/stores/UserStore';
 import { toast } from 'svelte-sonner';
 import { type Readable, get, writable } from 'svelte/store';
 import { handleSignalrDeviceState } from './handlers/DeviceStatus';
@@ -21,7 +20,7 @@ import {
 const signalr_connection = writable<HubConnection | null>(null);
 const signalr_state = writable<HubConnectionState>(HubConnectionState.Disconnected);
 
-async function create_signalr_connection() {
+export async function initializeSignalR() {
   let connection = get(signalr_connection);
   if (connection) {
     return;
@@ -62,16 +61,30 @@ async function create_signalr_connection() {
 
   signalr_connection.set(connection);
 
-  await connection.start();
+  try {
+    await connection.start();
+    signalr_state.set(HubConnectionState.Connected);
+  } catch (error) {
+    console.error(error);
+    toast.error('Failed to connect to server!');
+    signalr_state.set(HubConnectionState.Disconnected);
+  }
 }
 
-function destroy_signalr_connection() {
-  if (signalr_connection) {
+export async function destroySignalR() {
+  if (!signalr_connection) return;
+
+  try {
     const connection = get(signalr_connection);
     if (connection) {
-      connection.stop();
-      signalr_connection.set(null);
+      await connection.stop();
     }
+  } catch (error) {
+    console.error(error);
+    toast.error('Encountered error while disconnecting from server!');
+  } finally {
+    signalr_connection.set(null);
+    signalr_state.set(HubConnectionState.Disconnected);
   }
 }
 
@@ -82,23 +95,3 @@ export const SignalR_State = {
 export const SignalR_Connection = {
   subscribe: signalr_connection.subscribe,
 } as Readable<HubConnection | null>;
-
-export function initializeSignalR() {
-  if (!browser) return;
-
-  UserStore.subscribe(({ self }) => {
-    if (self === null) {
-      destroy_signalr_connection();
-    } else {
-      create_signalr_connection()
-        .then(() => {
-          signalr_state.set(HubConnectionState.Connected);
-        })
-        .catch((e) => {
-          console.error(e);
-          toast.error('Failed to connect to server!');
-          signalr_state.set(HubConnectionState.Disconnected);
-        });
-    }
-  });
-}

src/lib/signalr/index.ts

@@ -100,7 +100,6 @@ export function willActivateLightMode(value: 'dark' | 'light' | 'system') {
 export function initializeDarkModeStore() {
   const schemePreference = getColorSchemePreference();
   setHtmlDarkModeSelector(schemePreference === 'dark');
-  set(schemePreference);
 
   window
     .matchMedia('(prefers-color-scheme: light)')

src/lib/stores/AuthenticatedStore.ts

@@ -1,4 +1,5 @@
 import { usersApi } from '$lib/api';
+import { handleApiError } from '$lib/errorhandling/apiErrorHandling';
 import type { ApiUser, ApiUserSelf } from '$lib/types/ApiUser';
 import { writable } from 'svelte/store';
 
@@ -35,35 +36,40 @@ function setSelfName(name: string) {
   });
 }
 
-function refreshSelf() {
+async function refreshSelf(): Promise<boolean> {
   update((v) => ({ ...v, loading: true }));
-  usersApi
-    .usersGetSelf()
-    .then(({ data, message }) => {
-      if (!data) {
-        console.error(`Failed to get user self: ${message}`);
-        reset();
-        return;
-      }
 
-      const user = {
-        id: data.id,
-        name: data.name,
-        avatar: data.image,
-        roles: data.roles,
-        email: data.email,
-      };
+  try {
+    const { data, message } = await usersApi.usersGetSelf();
 
-      update((state) => ({
-        loading: false,
-        self: user,
-        all: updateAllFromSelf(state.all, user),
-      }));
-    })
-    .catch((error) => {
-      update((v) => ({ ...v, loading: false }));
-      console.error(error); // TODO: Show toast
-    });
+    if (!data) {
+      console.error(`Failed to get user self: ${message}`);
+      reset();
+      return false;
+    }
+
+    const user = {
+      id: data.id,
+      name: data.name,
+      avatar: data.image,
+      roles: data.roles,
+      email: data.email,
+    };
+
+    update((state) => ({
+      loading: false,
+      self: user,
+      all: updateAllFromSelf(state.all, user),
+    }));
+  } catch (error) {
+    reset();
+
+    handleApiError(error);
+
+    return false;
+  }
+
+  return true;
 }
 
 export const UserStore = {
@@ -74,7 +80,3 @@ export const UserStore = {
   refreshSelf,
   reset,
 };
-
-export function initializeUserStore() {
-  refreshSelf();
-}

src/lib/stores/ColorSchemeStore.ts

@@ -0,0 +1,8 @@
+import { redirect } from '@sveltejs/kit';
+
+export async function load({ cookies, url }) {
+  const cookieValue = cookies.get('openShockSession');
+  if (cookieValue !== undefined && cookieValue !== null) {
+    redirect(302, url.searchParams.get('redirect') ?? '/home');
+  }
+}

src/lib/stores/UserStore.ts

@@ -1,26 +1 @@
-import { browser } from '$app/environment';
-import { IsAuthenticated } from '$lib/stores/AuthenticatedStore';
-import { UserStore } from '$lib/stores/UserStore';
-import { redirect } from '@sveltejs/kit';
-import { get } from 'svelte/store';
-
-// Makes the load function only run in browser
-export const ssr = false;
-
-// Its fine to prerender all pages below this one as they wont change from browser to browser
 export const prerender = true;
-
-export function load() {
-  if (!browser) return; // Just to be safe that the code below definetly runs in browser
-
-  console.log('(anonymous)/+layout.ts (browser) - entry');
-
-  // On loading in the anonymous section, check if cookie is set, if it is send us to the authenticated section
-  if (get(IsAuthenticated)) {
-    console.log('(anonymous)/+layout.ts (browser) - redirect');
-    redirect(302, '/home');
-  }
-
-  // If we make it to the anonymous section, make sure that userstore is clear, else behaviour will look weird
-  UserStore.reset();
-}

src/routes/(anonymous)/+layout.server.ts

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
+  import { page } from '$app/state';
   import { accountV2Api } from '$lib/api';
   import Container from '$lib/components/Container.svelte';
   import Turnstile from '$lib/components/Turnstile.svelte';
@@ -14,20 +15,20 @@
   let password = $state<string>('');
   let turnstileResponse = $state<string | null>(null);
 
-  function handleSubmission(e: SubmitEvent) {
+  async function handleSubmission(e: SubmitEvent) {
     e.preventDefault();
 
     if (!usernameOrEmail || !password || !turnstileResponse) {
       return;
     }
 
-    accountV2Api
-      .accountLoginV2({ usernameOrEmail, password, turnstileResponse })
-      .then(() => {
-        UserStore.refreshSelf();
-        goto('/home');
-      })
-      .catch(handleApiError);
+    try {
+      await accountV2Api.accountLoginV2({ usernameOrEmail, password, turnstileResponse });
+      await UserStore.refreshSelf();
+      goto(page.url.searchParams.get('redirect') ?? '/home');
+    } catch (error) {
+      handleApiError(error);
+    }
   }
 
   let canSubmit = $derived(

src/routes/(anonymous)/+layout.ts

@@ -0,0 +1,25 @@
+import { browser } from '$app/environment';
+import { goto } from '$app/navigation';
+import { accountV1Api } from '$lib/api';
+import { destroyAuth } from '$lib/init';
+
+export async function load() {
+  if (!browser) return; // Do not run the following on server
+
+  // Clear cookie and server state
+  try {
+    await accountV1Api.accountLogout();
+  } catch (error) {
+    console.error(error);
+  }
+
+  try {
+    // Clear local context
+    await destroyAuth();
+  } catch (error) {
+    console.error(error);
+  }
+
+  // Go to landing page
+  goto('/');
+}