refactor: code readability for callbacks feedback

store/account.ts

@@ -15,8 +15,8 @@ export const useAccountStore = defineStore('account', () => {
   const serverStore = useServerStore();
 
   // State
-  const updating = ref<boolean | undefined>(undefined);
-  const updateSuccess = ref<boolean | undefined>(undefined);
+  const accountUpdating = ref<boolean | undefined>(undefined);
+  const accountSuccess = ref<boolean | undefined>(undefined);
 
   // Actions
   const recover = () => {
@@ -70,7 +70,7 @@ export const useAccountStore = defineStore('account', () => {
    */
   const updatePluginConfig = async (action: CallbackAction) => {
     console.debug('[accountStore.updatePluginConfig]', action);
-    updating.value = true;
+    accountUpdating.value = true;
     const userPayload = {
       ...(action.user
         ? {
@@ -101,26 +101,26 @@ export const useAccountStore = defineStore('account', () => {
         .post()
         .res(res => {
           console.debug('[accountStore.updatePluginConfig] WebguiUpdate res', res);
-          updateSuccess.value = true;
+          accountSuccess.value = true;
         })
         .catch(err => {
           console.debug('[accountStore.updatePluginConfig] WebguiUpdate err', err);
-          updateSuccess.value = false;
+          accountSuccess.value = false;
         });
       return response;
     } finally {
-      updating.value = false;
+      accountUpdating.value = false;
     }
   };
 
-  watch(updating, (newV, oldV) => {
-    console.debug('[updating.watch]', newV, oldV);
+  watch(accountUpdating, (newV, oldV) => {
+    console.debug('[accountUpdating.watch]', newV, oldV);
   });
 
   return {
     // State
-    updating,
-    updateSuccess,
+    accountUpdating,
+    accountSuccess,
     // Actions
     recover,
     replace,

store/callbackActions.ts

@@ -2,20 +2,23 @@ import { defineStore } from 'pinia';
 
 import { useAccountStore } from './account';
 import { useInstallKeyStore } from './installKey';
-import { useCallbackStoreGeneric, type UpcActions, type QueryPayloads } from './callback';
-import { useServerStore } from './server';
+import { useCallbackStoreGeneric, type ExternalPayload, type QueryPayloads } from './callback';
+// import { useServerStore } from './server';
 
 export const useCallbackActionsStore = defineStore(
   'callbackActions',
   () => {
   const accountStore = useAccountStore();
   const installKeyStore = useInstallKeyStore();
-  const serverStore = useServerStore();
+  // const serverStore = useServerStore();
 
+  const callbackData = ref<ExternalPayload>();
   const callbackError = ref();
   const callbackLoading = ref(false);
   const callbackFeedbackVisible = ref<boolean>(false);
 
+  const callbackKeyAction = ref<CallbackAction>();
+
   const redirectToCallbackType = (decryptedData: QueryPayloads) => {
     console.debug('[redirectToCallbackType]', { decryptedData });
 
@@ -25,14 +28,16 @@ export const useCallbackActionsStore = defineStore(
     }
 
     // Display the feedback modal
+    callbackData.value = decryptedData;
     callbackFeedbackVisible.value = true;
     callbackLoading.value = true;
     // Parse the data and perform actions
-    decryptedData.actions.forEach(async (action, index, array) => {
+    callbackData.value.actions.forEach(async (action, index, array) => {
       console.debug('[action]', action);
       if (action?.keyUrl) {
         await installKeyStore.install(action);
       }
+      /** @todo add oemSignOut */
       if (action?.user || action.type === 'signOut') {
         await accountStore.updatePluginConfig(action);
       }
@@ -74,6 +79,7 @@ export const useCallbackActionsStore = defineStore(
 
   return {
     redirectToCallbackType,
+    callbackData,
     callbackFeedbackVisible,
     callbackLoading,
     closeCallbackFeedback,

store/installKey.ts

@@ -1,8 +1,9 @@
 import { defineStore, createPinia, setActivePinia } from 'pinia';
 import { delay } from 'wretch/middlewares';
 import { WebguiInstallKey, WebguiUpdateDns } from '~/composables/services/webgui';
-import { useServerStore } from './server';
-import type { CallbackAction } from '~/types/callback';
+import { useServerStore } from '~/store/server';
+import type { ExternalKeyActions } from '~/store/callback';
+import type { ServerStateDataKeyActions } from '~/types/server'
 /**
  * @see https://stackoverflow.com/questions/73476371/using-pinia-with-vue-js-web-components
  * @see https://github.com/vuejs/pinia/discussions/1085
@@ -12,54 +13,61 @@ setActivePinia(createPinia());
 export const useInstallKeyStore = defineStore('installKey', () => {
   const serverStore = useServerStore();
 
-  //	"https://keys.lime-technology.com/unraid/c9785e151ae3b0f056238e403809fd28b82eb4ad/Plus.key"
+  const keyActionType = ref<ServerStateDataKeyActions>();
+  const keyInstalling = ref<boolean | undefined>();
   const keyUrl = ref<string>('');
-  const installing = ref<boolean | undefined>();
-  const success = ref<boolean | undefined>();
+  const keySuccess = ref<boolean | undefined>();
 
+  /**
+   * Extracts key type from key url. Works for both .key and .unkey.
+   */
   const keyType = computed((): string | undefined => {
     if (!keyUrl.value) return undefined;
     const parts = keyUrl.value.split('/');
-    return parts[parts.length - 1].replace('.key', '');
+    return parts[parts.length - 1].replace(/\.key|\.unkey/g, '');
   });
 
-  const install = async (action: CallbackAction) => {
+  const install = async (action: ExternalKeyActions) => {
     console.debug('[install]');
-    installing.value = true;
-    keyUrl.value = action.keyUrl ?? '';
+    keyInstalling.value = true;
+    keyActionType.value = action.type;
+    keyUrl.value = action.keyUrl;
 
     if (!keyUrl.value) return console.error('[install] no key to install');
 
     try {
-      const response = await WebguiInstallKey
+      const installResponse = await WebguiInstallKey
         .query({ url: keyUrl.value })
         .get();
-      console.log('[install] WebguiInstallKey response', response);
-      success.value = true;
+      console.log('[install] WebguiInstallKey installResponse', installResponse);
+
+      keySuccess.value = true;
+
       try {
-        const response = await WebguiUpdateDns
+        const updateDnsResponse = await WebguiUpdateDns
           .middlewares([
             delay(1500)
           ])
           .formUrl({ csrf_token: serverStore.csrf })
           .post();
-        console.log('[install] WebguiUpdateDns response', response);
+        console.log('[install] WebguiUpdateDns updateDnsResponse', updateDnsResponse);
       } catch (error) {
         console.error('[install] WebguiUpdateDns error', error);
       }
     } catch (error) {
       console.error('[install] WebguiInstallKey error', error);
-      success.value = false;
+      keySuccess.value = false;
     } finally {
-      installing.value = false;
+      keyInstalling.value = false;
     }
   };
 
   return {
     // State
+    keyActionType,
+    keyInstalling,
+    keySuccess,
     keyUrl,
-    installing,
-    success,
     // getters
     keyType,
     // Actions