feat: disable sign out w/o a key

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()"

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')"
   >

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"

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)"

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"
   >

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"