From 83e2b495c577b0f924a3361e07c33e2f0030f4ae Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Tue, 5 Sep 2023 13:59:13 -0700
Subject: [PATCH] feat(web): disable sign in / out until connected to api

---
 web/components/Brand/Button.vue               |  5 +-
 web/components/Brand/LoadingWhite.vue         | 12 ++++
 web/components/KeyActions.ce.vue              |  2 -
 .../UserProfile/DropdownLaunchpad.vue         | 15 +++++
 web/composables/services/request.ts           |  2 -
 web/composables/services/webgui.ts            |  7 ++-
 web/store/server.ts                           | 59 ++++++++++++-------
 web/store/unraidApi.ts                        | 28 +++++----
 8 files changed, 91 insertions(+), 39 deletions(-)
 create mode 100644 web/components/Brand/LoadingWhite.vue

diff --git a/web/components/Brand/Button.vue b/web/components/Brand/Button.vue
index 297ea0b89..128e33772 100644
--- a/web/components/Brand/Button.vue
+++ b/web/components/Brand/Button.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import { XCircleIcon } from '@heroicons/vue/24/solid';
+import BrandLoading from '~/components/Brand/Loading.vue';
+import BrandLoadingWhite from '~/components/Brand/LoadingWhite.vue';
+
 export interface ButtonProps {
   btnStyle?: 'fill' | 'outline' | 'underline';
   btnType?: 'button' | 'submit' | 'reset';
@@ -8,7 +11,7 @@ export interface ButtonProps {
   download?: boolean;
   external?: boolean;
   href?: string;
-  icon?: typeof XCircleIcon;
+  icon?: typeof XCircleIcon | typeof BrandLoading | typeof BrandLoadingWhite;
   text?: string;
 }
 const props = withDefaults(defineProps<ButtonProps>(), {
diff --git a/web/components/Brand/LoadingWhite.vue b/web/components/Brand/LoadingWhite.vue
new file mode 100644
index 000000000..81fd0c146
--- /dev/null
+++ b/web/components/Brand/LoadingWhite.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+/**
+ * The purpose of this component is to have the ability to pass a
+ * white Loading component as a prop into a different component.
+ * I couldn't figure out how use the base BrandLoading coponent
+ * as a prop iteself and also pass in prop values to change the gradient colors.
+ */
+</script>
+
+<template>
+  <BrandLoading gradient-start="#ffffff" gradient-stop="#ffffff" />
+</template>
diff --git a/web/components/KeyActions.ce.vue b/web/components/KeyActions.ce.vue
index 4c2b2abbf..8b31e8b31 100644
--- a/web/components/KeyActions.ce.vue
+++ b/web/components/KeyActions.ce.vue
@@ -8,8 +8,6 @@ import '~/assets/main.css';
 
 const { t } = useI18n();
 const { keyActions } = storeToRefs(useServerStore());
-
-console.log('[keyActions]', keyActions.value);
 </script>
 
 <template>
diff --git a/web/components/UserProfile/DropdownLaunchpad.vue b/web/components/UserProfile/DropdownLaunchpad.vue
index 95d8b6f01..a319cc5f0 100644
--- a/web/components/UserProfile/DropdownLaunchpad.vue
+++ b/web/components/UserProfile/DropdownLaunchpad.vue
@@ -1,12 +1,17 @@
 <script lang="ts" setup>
 import { storeToRefs } from 'pinia';
 import { useServerStore } from '~/store/server';
+import { useUnraidApiStore } from '~/store/unraidApi';
+
 import 'tailwindcss/tailwind.css';
 import '~/assets/main.css';
 
+import BrandLoadingWhite from '~/components/Brand/LoadingWhite.vue';
+
 const props = defineProps<{ t: any; }>();
 
 const { expireTime, connectPluginInstalled, registered, state, stateData } = storeToRefs(useServerStore());
+const { unraidApiStatus, unraidApiRestartAction } = storeToRefs(useUnraidApiStore());
 
 const showConnectCopy = computed(() => (connectPluginInstalled.value && !registered.value && !stateData.value?.error));
 
@@ -37,6 +42,16 @@ const showExpireTime = computed(() => {
       />
     </header>
     <ul v-if="stateData.actions" class="list-reset flex flex-col gap-y-8px px-16px">
+      <li v-if="unraidApiStatus !== 'online'">
+        <BrandButton
+          class="w-full"
+          :disabled="unraidApiStatus === 'connecting' || unraidApiStatus === 'restarting'"
+          :icon="unraidApiStatus === 'restarting' ? BrandLoadingWhite : unraidApiRestartAction?.icon"
+          :text="unraidApiStatus === 'restarting' ? t('Restarting unraid-api…') : t('Restart unraid-api')"
+          :title="unraidApiStatus === 'restarting' ? t('Restarting unraid-api…') : t('Restart unraid-api')"
+          @click="unraidApiRestartAction?.click()"
+        />
+      </li>
       <li v-for="action in stateData.actions" :key="action.name">
         <BrandButton
           class="w-full"
diff --git a/web/composables/services/request.ts b/web/composables/services/request.ts
index 27e912f99..d92187234 100644
--- a/web/composables/services/request.ts
+++ b/web/composables/services/request.ts
@@ -14,11 +14,9 @@ export const request = wretch()
     return (
       response
         .error('Error', (error) => {
-          console.log('global catch (Error class)', error);
           errorsStore.setError(error);
         })
         .error('TypeError', (error) => {
-          console.log('global type error catch (TypeError class)', error);
           errorsStore.setError(error);
         })
     );
diff --git a/web/composables/services/webgui.ts b/web/composables/services/webgui.ts
index 149d0b629..cc7f0b62b 100644
--- a/web/composables/services/webgui.ts
+++ b/web/composables/services/webgui.ts
@@ -44,6 +44,7 @@ export interface WebguiUnraidApiCommandPayload {
   param1?: '-v'|'-vv';
 }
 export const WebguiUnraidApiCommand = async (payload: WebguiUnraidApiCommandPayload) => {
+  console.debug('[WebguiUnraidApiCommand] payload', payload);
   if (!payload) { return console.error('[WebguiUnraidApiCommand] payload is required'); }
 
   try {
@@ -55,9 +56,11 @@ export const WebguiUnraidApiCommand = async (payload: WebguiUnraidApiCommandPayl
         return json;
       })
       .catch((error) => {
-        console.error(`[WebguiUnraidApiCommand] catch failed to execute unraid-api ${payload}`, error);
+        console.error(`[WebguiUnraidApiCommand] catch failed to execute unraid-api`, error, payload);
+        return error;
       });
   } catch (error) {
-    console.error(`[WebguiUnraidApiCommand] catch failed to execute unraid-api ${payload}`, error);
+    console.error(`[WebguiUnraidApiCommand] catch failed to execute unraid-api`, error, payload);
+    return error;
   }
 };
diff --git a/web/store/server.ts b/web/store/server.ts
index 3fa81828c..24b885f31 100644
--- a/web/store/server.ts
+++ b/web/store/server.ts
@@ -261,25 +261,42 @@ export const useServerStore = defineStore('server', () => {
     name: 'replace',
     text: 'Replace Key',
   };
-  const signInAction: ServerStateDataAction = {
-    click: () => { accountStore.signIn(); },
-    external: true,
-    icon: GlobeAltIcon,
-    name: 'signIn',
-    text: 'Sign In with Unraid.net Account',
-  };
   /**
-   * This action is a computed property because it depends on the state of the keyfile
+   * The Sign In action is a computed property because it depends on the state of the unraid-api being online
+   */
+  const signInAction = computed((): ServerStateDataAction => {
+    const disabled = unraidApiStore.unraidApiStatus !== 'online';
+    let title = disabled ? 'Sign In requires a connection to unraid-api' : '';
+    return {
+      click: () => { accountStore.signIn(); },
+      disabled,
+      external: true,
+      icon: GlobeAltIcon,
+      name: 'signIn',
+      text: 'Sign In with Unraid.net Account',
+      title,
+    }
+  });
+  /**
+   * The Sign Out action is a computed property because it depends on the state of the keyfile & unraid-api being online
    */
   const signOutAction = computed((): ServerStateDataAction => {
+    const disabled: boolean = !keyfile.value || unraidApiStore.unraidApiStatus !== 'online';
+    let title = '';
+    if (!keyfile.value) {
+      title = 'Sign Out requires a keyfile';
+    }
+    if (unraidApiStore.unraidApiStatus !== 'online') {
+      title = 'Sign Out requires a connection to unraid-api';
+    }
     return {
       click: () => { accountStore.signOut(); },
-      disabled: !keyfile.value,
+      disabled,
       external: true,
       icon: ArrowRightOnRectangleIcon,
       name: 'signOut',
       text: 'Sign Out of Unraid.net',
-      title: !keyfile.value ? 'Sign Out requires a keyfile' : '',
+      title,
     };
   });
   const trialExtendAction: ServerStateDataAction = {
@@ -303,7 +320,7 @@ export const useServerStore = defineStore('server', () => {
       case 'ENOKEYFILE':
         return {
           actions: [
-            ...(!registered.value && connectPluginInstalled.value ? [signInAction] : []),
+            ...(!registered.value && connectPluginInstalled.value ? [signInAction.value] : []),
             ...([purchaseAction, redeemAction, trialStartAction]),
             ...(registered.value && connectPluginInstalled.value ? [signOutAction.value] : []),
           ],
@@ -314,7 +331,7 @@ export const useServerStore = defineStore('server', () => {
       case 'TRIAL':
         return {
           actions: [
-            ...(!registered.value && connectPluginInstalled.value ? [signInAction] : []),
+            ...(!registered.value && connectPluginInstalled.value ? [signInAction.value] : []),
             ...([purchaseAction, redeemAction]),
             ...(registered.value && connectPluginInstalled.value ? [signOutAction.value] : []),
           ],
@@ -325,7 +342,7 @@ export const useServerStore = defineStore('server', () => {
       case 'EEXPIRED':
         return {
           actions: [
-            ...(!registered.value && connectPluginInstalled.value ? [signInAction] : []),
+            ...(!registered.value && connectPluginInstalled.value ? [signInAction.value] : []),
             ...([purchaseAction, redeemAction]),
             ...(trialExtensionEligible.value ? [trialExtendAction] : []),
             ...(registered.value && connectPluginInstalled.value ? [signOutAction.value] : []),
@@ -340,7 +357,7 @@ export const useServerStore = defineStore('server', () => {
       case 'BASIC':
         return {
           actions: [
-            ...(!registered.value && connectPluginInstalled.value ? [signInAction] : []),
+            ...(!registered.value && connectPluginInstalled.value ? [signInAction.value] : []),
             ...([upgradeAction]),
             ...(registered.value && connectPluginInstalled.value ? [signOutAction.value] : []),
           ],
@@ -355,7 +372,7 @@ export const useServerStore = defineStore('server', () => {
       case 'PLUS':
         return {
           actions: [
-            ...(!registered.value && connectPluginInstalled.value ? [signInAction] : []),
+            ...(!registered.value && connectPluginInstalled.value ? [signInAction.value] : []),
             ...([upgradeAction]),
             ...(registered.value && connectPluginInstalled.value ? [signOutAction.value] : []),
           ],
@@ -370,7 +387,7 @@ export const useServerStore = defineStore('server', () => {
       case 'PRO':
         return {
           actions: [
-            ...(!registered.value && connectPluginInstalled.value ? [signInAction] : []),
+            ...(!registered.value && connectPluginInstalled.value ? [signInAction.value] : []),
             ...(registered.value && connectPluginInstalled.value ? [signOutAction.value] : []),
           ],
           humanReadable: 'Pro',
@@ -391,7 +408,7 @@ export const useServerStore = defineStore('server', () => {
         }
         return {
           actions: [
-            ...(!registered.value && connectPluginInstalled.value ? [signInAction] : []),
+            ...(!registered.value && connectPluginInstalled.value ? [signInAction.value] : []),
             ...([replaceAction, purchaseAction, redeemAction]),
             ...(registered.value && connectPluginInstalled.value ? [signOutAction.value] : []),
           ],
@@ -403,7 +420,7 @@ export const useServerStore = defineStore('server', () => {
       case 'EGUID1':
         return {
           actions: [
-            ...(!registered.value && connectPluginInstalled.value ? [signInAction] : []),
+            ...(!registered.value && connectPluginInstalled.value ? [signInAction.value] : []),
             ...([purchaseAction, redeemAction]),
             ...(registered.value && connectPluginInstalled.value ? [signOutAction.value] : []),
           ],
@@ -416,7 +433,7 @@ export const useServerStore = defineStore('server', () => {
       case 'ENOKEYFILE2':
         return {
           actions: [
-            ...(!registered.value && connectPluginInstalled.value ? [signInAction] : []),
+            ...(!registered.value && connectPluginInstalled.value ? [signInAction.value] : []),
             ...([recoverAction, purchaseAction, redeemAction]),
             ...(registered.value ? [signOutAction.value] : []),
           ],
@@ -430,7 +447,7 @@ export const useServerStore = defineStore('server', () => {
       case 'ETRIAL':
         return {
           actions: [
-            ...(!registered.value && connectPluginInstalled.value ? [signInAction] : []),
+            ...(!registered.value && connectPluginInstalled.value ? [signInAction.value] : []),
             ...([purchaseAction, redeemAction]),
             ...(registered.value && connectPluginInstalled.value ? [signOutAction.value] : []),
           ],
@@ -442,7 +459,7 @@ export const useServerStore = defineStore('server', () => {
       case 'ENOKEYFILE1':
         return {
           actions: [
-            ...(!registered.value && connectPluginInstalled.value ? [signInAction] : []),
+            ...(!registered.value && connectPluginInstalled.value ? [signInAction.value] : []),
             ...([purchaseAction, redeemAction]),
             ...(registered.value && connectPluginInstalled.value ? [signOutAction.value] : []),
           ],
diff --git a/web/store/unraidApi.ts b/web/store/unraidApi.ts
index 855158ca1..5fd956863 100644
--- a/web/store/unraidApi.ts
+++ b/web/store/unraidApi.ts
@@ -12,7 +12,7 @@ import { UserProfileLink } from 'types/userProfile';
 
 import { WebguiUnraidApiCommand } from '~/composables/services/webgui';
 import { GRAPHQL } from '~/helpers/urls';
-// import { useErrorsStore } from '~/store/errors';
+import { useErrorsStore } from '~/store/errors';
 import { useServerStore } from '~/store/server';
 
 /**
@@ -28,7 +28,7 @@ const httpEndpoint = GRAPHQL;
 const wsEndpoint = new URL(GRAPHQL.toString().replace('http', 'ws'));
 
 export const useUnraidApiStore = defineStore('unraidApi', () => {
-  // const errorsStore = useErrorsStore();
+  const errorsStore = useErrorsStore();
   const serverStore = useServerStore();
 
   const unraidApiClient = ref<ApolloClient<any>>();
@@ -62,6 +62,7 @@ export const useUnraidApiStore = defineStore('unraidApi', () => {
    * Automatically called when an apiKey is set in the serverStore
    */
   const createApolloClient = () => {
+    // return; // @todo remove
     unraidApiStatus.value = 'connecting';
 
     const headers = { 'x-api-key': serverStore.apiKey };
@@ -170,15 +171,20 @@ export const useUnraidApiStore = defineStore('unraidApi', () => {
 
   const restartUnraidApiClient = async () => {
     unraidApiStatus.value = 'restarting';
-    await WebguiUnraidApiCommand({
-      csrf_token: serverStore.csrf,
-      command: 'start',
-    });
-    return setTimeout(() => {
-      if (unraidApiClient.value) {
-        createApolloClient();
-      }
-    }, 5000);
+    try {
+      const response = await WebguiUnraidApiCommand({
+        csrf_token: serverStore.csrf,
+        command: 'start',
+      });
+      console.debug('[restartUnraidApiClient] response', response);
+      return setTimeout(() => {
+        if (unraidApiClient.value) {
+          createApolloClient();
+        }
+      }, 5000);
+    } catch (error) {
+      errorsStore.setError(error);
+    }
   };
 
   return {