feat: disable sign out w/o a key

2026-01-02 22:50:02 -06:00 · 2023-08-07 16:11:57 -07:00
parent 45fbe9ad1f
commit e735847742
9 changed files with 42 additions and 29 deletions
--- a/_data/serverState.ts
+++ b/_data/serverState.ts
@@ -29,7 +29,7 @@ const randomGuid = `1111-1111-${makeid(4)}-123412341234`; // this guid is regist
 // EBLACKLISTED1
 // EBLACKLISTED2
 // ENOCONN
-const state: ServerState = 'ENOKEYFILE';
+const state: ServerState = 'ENOKEYFILE1';

 const uptime = Date.now() - 60 * 60 * 1000; // 1 hour ago
 let expireTime = 0;
@@ -37,7 +37,7 @@ if (state === 'TRIAL') { expireTime = Date.now() + 60 * 60 * 1000; } // in 1 hou
 if (state === 'EEXPIRED') { expireTime = uptime; } // 1 hour ago

 export const serverState: Server = {
-  apiKey: 'unupc_fab6ff6ffe51040595c6d9ffb63a353ba16cc2ad7d93f813a2e80a5810',
+  // apiKey: 'unupc_fab6ff6ffe51040595c6d9ffb63a353ba16cc2ad7d93f813a2e80a5810',
  avatar: 'https://source.unsplash.com/300x300/?portrait',
  config: {
    // error: 'INVALID',
@@ -51,14 +51,14 @@ export const serverState: Server = {
  guid: randomGuid,
  // "guid": "0781-5583-8355-81071A2B0211",
  inIframe: false,
-  // keyfile: 'DUMMY_KEYFILE',
+  keyfile: 'DUMMY_KEYFILE',
  lanIp: '192.168.254.36',
  license: '',
  locale: 'en_US', // en_US, ja
  name: 'fuji',
-  // connectPluginInstalled: 'dynamix.unraid.net.staging.plg',
-  connectPluginInstalled: '',
-  registered: false,
+  connectPluginInstalled: 'dynamix.unraid.net.staging.plg',
+  // connectPluginInstalled: '',
+  registered: true,
  regGen: 0,
  // "regGuid": "0781-5583-8355-81071A2B0211",
  site: 'http://localhost:4321',
--- a/components/Auth.ce.vue
+++ b/components/Auth.ce.vue
@@ -20,6 +20,7 @@ const { authAction, stateData } = storeToRefs(serverStore);
    </span>
    <span v-if="authAction">
      <BrandButton
+        :disabled="authAction?.disabled"
        :icon="authAction.icon"
        :text="t(authAction.text)"
        @click="authAction.click()"
--- a/components/Brand/Button.vue
+++ b/components/Brand/Button.vue
@@ -4,6 +4,7 @@ export interface ButtonProps {
  btnStyle?: 'fill' | 'outline' | 'underline';
  btnType?: 'button' | 'submit' | 'reset';
  click?: () => void;
+  disabled?: boolean;
  download?: boolean;
  external?: boolean;
  href?: string;
@@ -36,11 +37,12 @@ const classes = computed(() => {
 <template>
  <component
    :is="href ? 'a' : 'button'"
+    :disabled="disabled ?? null"
    :href="href"
    :rel="external ? 'noopener noreferrer' : ''"
    :target="external ? '_blank' : ''"
    :type="!href ? btnType : ''"
-    class="text-14px text-center font-semibold flex-none flex flex-row items-center justify-center gap-x-8px px-8px py-8px cursor-pointer rounded-md"
+    class="text-14px text-center font-semibold flex-none flex flex-row items-center justify-center gap-x-8px px-8px py-8px cursor-pointer rounded-md disabled:opacity-50 disabled:hover:opacity-50 disabled:focus:opacity-50 disabled:cursor-not-allowed"
    :class="classes"
    @click="click ?? $emit('click')"
  >
--- a/components/KeyActions.ce.vue
+++ b/components/KeyActions.ce.vue
@@ -8,6 +8,8 @@ import '~/assets/main.css';

 const { t } = useI18n();
 const { keyActions } = storeToRefs(useServerStore());
+
+console.log('[keyActions]', keyActions.value);
 </script>

 <template>
@@ -15,6 +17,7 @@ const { keyActions } = storeToRefs(useServerStore());
    <li v-for="action in keyActions" :key="action.name">
      <BrandButton
        class="w-full max-w-300px"
+        :disabled="action?.disabled"
        :external="action?.external"
        :href="action?.href"
        :icon="action.icon"
--- a/components/UserProfile/CallbackFeedback.vue
+++ b/components/UserProfile/CallbackFeedback.vue
@@ -267,6 +267,7 @@ const accountActionStatusCopy = computed((): { text: string; } => {

        <BrandButton
          v-if="showSignInCta"
+          :disabled="authAction?.disabled"
          :external="authAction?.external"
          :icon="authAction?.icon"
          :text="t(authAction?.text)"
--- a/components/UserProfile/DropdownItem.vue
+++ b/components/UserProfile/DropdownItem.vue
@@ -19,8 +19,9 @@ const showExternalIconOnHover = computed(() => props.item?.external && props.ite
 <template>
  <component
    :is="item?.click ? 'button' : 'a'"
+    :disabled="item?.disabled"
    :href="item?.href ?? null"
-    :title="item?.title ?? null"
+    :title="item?.title ? t(item?.title) : null"
    :target="item?.external ? '_blank' : null"
    :rel="item?.external ? 'noopener noreferrer' : null"
    class="text-left text-14px w-full flex flex-row items-center justify-between gap-x-8px px-8px py-8px cursor-pointer"
@@ -29,6 +30,7 @@ const showExternalIconOnHover = computed(() => props.item?.external && props.ite
      'text-white bg-gradient-to-r from-unraid-red to-orange hover:from-unraid-red/60 hover:to-orange/60 focus:from-unraid-red/60 focus:to-orange/60': item?.emphasize,
      'group': showExternalIconOnHover,
      'rounded-md': rounded,
+      'disabled:opacity-50 disabled:hover:opacity-50 disabled:focus:opacity-50 disabled:cursor-not-allowed': item?.disabled,
    }"
    @click.stop="item?.click ? item?.click() : null"
  >
--- a/components/UserProfile/DropdownLaunchpad.vue
+++ b/components/UserProfile/DropdownLaunchpad.vue
@@ -40,6 +40,7 @@ const showExpireTime = computed(() => {
      <li v-for="action in stateData.actions" :key="action.name">
        <BrandButton
          class="w-full"
+          :disabled="action?.disabled"
          :external="action?.external"
          :href="action?.href"
          :icon="action.icon"
--- a/store/server.ts
+++ b/store/server.ts
@@ -19,7 +19,6 @@ import { SETTINGS_MANAGMENT_ACCESS } from '~/helpers/urls';
 import { useAccountStore } from '~/store/account';
 import { useErrorsStore, type Error } from '~/store/errors';
 import { usePurchaseStore } from '~/store/purchase';
-import { useTrialStore } from '~/store/trial';
 import { useThemeStore, type Theme } from '~/store/theme';
 import { useUnraidApiStore } from '~/store/unraidApi';

@@ -47,7 +46,6 @@ export const useServerStore = defineStore('server', () => {
  const errorsStore = useErrorsStore();
  const purchaseStore = usePurchaseStore();
  const themeStore = useThemeStore();
-  const trialStore = useTrialStore();
  const unraidApiStore = useUnraidApiStore();
  /**
   * State
@@ -263,15 +261,19 @@ export const useServerStore = defineStore('server', () => {
    text: 'Sign In with Unraid.net Account',
  };
  /**
-   * @todo implment conditional sign out to show that a keyfile is required
+   * This action is a computed property because it depends on the state of the keyfile
   */
-  const signOutAction: ServerStateDataAction = {
-    click: () => { accountStore.signOut(); },
-    external: true,
-    icon: ArrowRightOnRectangleIcon,
-    name: 'signOut',
-    text: 'Sign Out of Unraid.net',
-  };
+  const signOutAction = computed((): ServerStateDataAction => {
+    return {
+      click: () => { accountStore.signOut(); },
+      disabled: !keyfile.value,
+      external: true,
+      icon: ArrowRightOnRectangleIcon,
+      name: 'signOut',
+      text: 'Sign Out of Unraid.net',
+      title: !keyfile.value ? 'Sign Out requires a keyfile' : '',
+    };
+  });
  const trialExtendAction: ServerStateDataAction = {
    click: () => { accountStore.trialExtend(); },
    external: true,
@@ -295,7 +297,7 @@ export const useServerStore = defineStore('server', () => {
          actions: [
            ...(!registered.value && connectPluginInstalled.value ? [signInAction] : []),
            ...([purchaseAction, redeemAction, trialStartAction]),
-            ...(registered.value && connectPluginInstalled.value ? [signOutAction] : []),
+            ...(registered.value && connectPluginInstalled.value ? [signOutAction.value] : []),
          ],
          humanReadable: 'No Keyfile',
          heading: 'Let\'s Unleash your Hardware!',
@@ -306,7 +308,7 @@ export const useServerStore = defineStore('server', () => {
          actions: [
            ...(!registered.value && connectPluginInstalled.value ? [signInAction] : []),
            ...([purchaseAction, redeemAction]),
-            ...(registered.value && connectPluginInstalled.value ? [signOutAction] : []),
+            ...(registered.value && connectPluginInstalled.value ? [signOutAction.value] : []),
          ],
          humanReadable: 'Trial',
          heading: 'Thank you for choosing Unraid OS!',
@@ -318,7 +320,7 @@ export const useServerStore = defineStore('server', () => {
            ...(!registered.value && connectPluginInstalled.value ? [signInAction] : []),
            ...([purchaseAction, redeemAction]),
            ...(trialExtensionEligible.value ? [trialExtendAction] : []),
-            ...(registered.value && connectPluginInstalled.value ? [signOutAction] : []),
+            ...(registered.value && connectPluginInstalled.value ? [signOutAction.value] : []),
          ],
          error: true,
          humanReadable: 'Trial Expired',
@@ -332,7 +334,7 @@ export const useServerStore = defineStore('server', () => {
          actions: [
            ...(!registered.value && connectPluginInstalled.value ? [signInAction] : []),
            ...([upgradeAction]),
-            ...(registered.value && connectPluginInstalled.value ? [signOutAction] : []),
+            ...(registered.value && connectPluginInstalled.value ? [signOutAction.value] : []),
          ],
          humanReadable: 'Basic',
          heading: 'Thank you for choosing Unraid OS!',
@@ -347,7 +349,7 @@ export const useServerStore = defineStore('server', () => {
          actions: [
            ...(!registered.value && connectPluginInstalled.value ? [signInAction] : []),
            ...([upgradeAction]),
-            ...(registered.value && connectPluginInstalled.value ? [signOutAction] : []),
+            ...(registered.value && connectPluginInstalled.value ? [signOutAction.value] : []),
          ],
          humanReadable: 'Plus',
          heading: 'Thank you for choosing Unraid OS!',
@@ -361,7 +363,7 @@ export const useServerStore = defineStore('server', () => {
        return {
          actions: [
            ...(!registered.value && connectPluginInstalled.value ? [signInAction] : []),
-            ...(registered.value && connectPluginInstalled.value ? [signOutAction] : []),
+            ...(registered.value && connectPluginInstalled.value ? [signOutAction.value] : []),
          ],
          humanReadable: 'Pro',
          heading: 'Thank you for choosing Unraid OS!',
@@ -383,7 +385,7 @@ export const useServerStore = defineStore('server', () => {
          actions: [
            ...(!registered.value && connectPluginInstalled.value ? [signInAction] : []),
            ...([replaceAction, purchaseAction, redeemAction]),
-            ...(registered.value && connectPluginInstalled.value ? [signOutAction] : []),
+            ...(registered.value && connectPluginInstalled.value ? [signOutAction.value] : []),
          ],
          error: true,
          humanReadable: 'Flash GUID Error',
@@ -395,7 +397,7 @@ export const useServerStore = defineStore('server', () => {
          actions: [
            ...(!registered.value && connectPluginInstalled.value ? [signInAction] : []),
            ...([purchaseAction, redeemAction]),
-            ...(registered.value && connectPluginInstalled.value ? [signOutAction] : []),
+            ...(registered.value && connectPluginInstalled.value ? [signOutAction.value] : []),
          ],
          error: true,
          humanReadable: 'Multiple License Keys Present',
@@ -409,7 +411,7 @@ export const useServerStore = defineStore('server', () => {
            ...(!registered.value && connectPluginInstalled.value ? [signInAction] : []),
            ...(connectPluginInstalled.value ? [recoverAction] : []),
            ...([purchaseAction, redeemAction]),
-            ...(registered.value ? [signOutAction] : []),
+            ...(registered.value ? [signOutAction.value] : []),
          ],
          error: true,
          humanReadable: 'Missing key file',
@@ -423,7 +425,7 @@ export const useServerStore = defineStore('server', () => {
          actions: [
            ...(!registered.value && connectPluginInstalled.value ? [signInAction] : []),
            ...([purchaseAction, redeemAction]),
-            ...(registered.value && connectPluginInstalled.value ? [signOutAction] : []),
+            ...(registered.value && connectPluginInstalled.value ? [signOutAction.value] : []),
          ],
          error: true,
          humanReadable: 'Invalid installation',
@@ -435,7 +437,7 @@ export const useServerStore = defineStore('server', () => {
          actions: [
            ...(!registered.value && connectPluginInstalled.value ? [signInAction] : []),
            ...([purchaseAction, redeemAction]),
-            ...(registered.value && connectPluginInstalled.value ? [signOutAction] : []),
+            ...(registered.value && connectPluginInstalled.value ? [signOutAction.value] : []),
          ],
          error: true,
          humanReadable: 'No Keyfile',
--- a/types/userProfile.ts
+++ b/types/userProfile.ts
@@ -2,6 +2,7 @@ import { ArrowTopRightOnSquareIcon } from '@heroicons/vue/24/solid';

 export interface UserProfileLink {
  click?: any; // @todo be more specific
+  disabled?: boolean;
  emphasize?: boolean;
  external?: boolean;
  href?: string;