feat(web): disable sign in / out until connected to api

2026-01-01 22:20:05 -06:00 · 2023-09-05 13:59:13 -07:00
parent e3c3cb0688
commit 83e2b495c5
8 changed files with 91 additions and 39 deletions
--- 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>(), {
--- a/web/components/Brand/LoadingWhite.vue
+++ 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>
--- 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>
--- 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"
--- 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);
        })
    );
--- 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;
  }
 };
--- 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] : []),
          ],
--- 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 {