feat: contact support using webgui feedback modal

components/Brand/Avatar.vue

@@ -13,13 +13,13 @@ withDefaults(defineProps<Props>(), {
 });
 
 const serverStore = useServerStore();
-const { avatar, pluginInstalled, registered, username } = storeToRefs(serverStore);
+const { avatar, connectPluginInstalled, registered, username } = storeToRefs(serverStore);
 </script>
 
 <template>
   <figure class="group relative z-0 flex items-center justify-center w-36px h-36px rounded-full bg-gradient-to-r from-unraid-red to-orange">
     <img
-      v-if="avatar && pluginInstalled && registered"
+      v-if="avatar && connectPluginInstalled && registered"
       :src="avatar"
       :alt="username"
       class="absolute z-10 inset-0 w-36px h-36px rounded-full overflow-hidden">

components/Brand/Button.vue

@@ -3,6 +3,7 @@ import { XCircleIcon } from '@heroicons/vue/24/solid';
 export interface ButtonProps {
   btnStyle?: 'fill' | 'outline' | 'underline';
   btnType?: 'button' | 'submit' | 'reset';
+  click?: () => void;
   download?: boolean;
   external?: boolean;
   href?: string;
@@ -31,7 +32,7 @@ const classes = computed(() => {
 <template>
   <component
     :is="href ? 'a' : 'button'"
-    @click="$emit('click')"
+    @click="click ?? $emit('click')"
     :href="href"
     :rel="external ? 'noopener noreferrer' : ''"
     :target="external ? '_blank' : ''"

components/UserProfile/CallbackFeedback.vue

@@ -43,7 +43,7 @@ const {
   keyType,
 } = storeToRefs(installKeyStore);
 const {
-  pluginInstalled,
+  connectPluginInstalled,
   registered,
   authAction,
 } = storeToRefs(serverStore);
@@ -62,8 +62,8 @@ const {
  */
 const isSettingsPage = ref<boolean>(document.location.pathname === '/Settings/ManagementAccess');
 
-const showPromoCta = computed(() => callbackStatus.value === 'success' && !pluginInstalled.value);
-const showSignInCta = computed(() => pluginInstalled.value && !registered.value && authAction.value?.name === 'signIn' && accountActionType.value !== 'signIn');
+const showPromoCta = computed(() => callbackStatus.value === 'success' && !connectPluginInstalled.value);
+const showSignInCta = computed(() => connectPluginInstalled.value && !registered.value && authAction.value?.name === 'signIn' && accountActionType.value !== 'signIn');
 
 const heading = computed(() => {
   switch (callbackStatus.value) {
@@ -162,7 +162,7 @@ const { text, copy, copied, isSupported } = useClipboard({ source: keyUrl.value
 
     <template #footer>
       <div v-if="callbackStatus === 'success'" class="flex flex-row-reverse justify-center gap-16px">
-        <template v-if="pluginInstalled && accountActionType === 'signIn'">
+        <template v-if="connectPluginInstalled && accountActionType === 'signIn'">
           <BrandButton
             v-if="isSettingsPage"
             @click="close"
@@ -192,7 +192,7 @@ const { text, copy, copied, isSupported } = useClipboard({ source: keyUrl.value
         <BrandButton
           @click="close"
           btn-style="underline"
-          :text="!pluginInstalled ? 'No Thanks' : 'Close'" />
+          :text="!connectPluginInstalled ? 'No Thanks' : 'Close'" />
       </div>
     </template>
   </Modal>

components/UserProfile/Dropdown.vue

@@ -7,10 +7,10 @@ import { useServerStore } from '~/store/server';
 
 const dropdownStore = useDropdownStore()
 const { dropdownVisible } = storeToRefs(dropdownStore);
-const { pluginInstalled, registered, state, stateDataError, serverErrors } = storeToRefs(useServerStore());
+const { connectPluginInstalled, registered, state, stateDataError, serverErrors } = storeToRefs(useServerStore());
 
 const showDefaultContent = computed(() => !showLaunchpad.value);
-const showLaunchpad = computed(() => state.value === 'ENOKEYFILE' || (pluginInstalled.value && !registered.value) && !stateDataError.value);
+const showLaunchpad = computed(() => state.value === 'ENOKEYFILE' || (connectPluginInstalled.value && !registered.value) && !stateDataError.value);
 </script>
 
 <template>

components/UserProfile/DropdownContent.vue

@@ -11,14 +11,14 @@ const myServersEnv = ref<string>('Staging');
 const devEnv = ref<string>('development');
 
 const promoStore = usePromoStore();
-const { keyActions, pluginInstalled, registered, stateData } = storeToRefs(useServerStore());
+const { keyActions, connectPluginInstalled, registered, stateData } = storeToRefs(useServerStore());
 
 const signInAction = computed(() => stateData.value.actions?.filter((act: { name: string; }) => act.name === 'signIn') ?? []);
 const signOutAction = computed(() => stateData.value.actions?.filter((act: { name: string; }) => act.name === 'signOut') ?? []);
 
 const links = computed(():UserProfileLink[] => {
   return [
-    ...(registered.value && pluginInstalled.value
+    ...(registered.value && connectPluginInstalled.value
       ? [
         {
           emphasize: true,
@@ -45,13 +45,13 @@ const links = computed(():UserProfileLink[] => {
       ]
       : []
     ),
-    ...(!registered.value && pluginInstalled.value
+    ...(!registered.value && connectPluginInstalled.value
       ? [
         ...(signInAction.value),
       ]
       : []
     ),
-    ...(!pluginInstalled.value
+    ...(!connectPluginInstalled.value
       ? [
         {
           click: () => {
@@ -70,7 +70,7 @@ const links = computed(():UserProfileLink[] => {
 
 <template>
   <div class="flex flex-col gap-y-8px min-w-300px max-w-350px">
-    <header v-if="pluginInstalled" class="flex flex-row items-center justify-between mt-8px mx-8px">
+    <header v-if="connectPluginInstalled" class="flex flex-row items-center justify-between mt-8px mx-8px">
       <h2 class="text-18px leading-none flex flex-row gap-x-8px items-center justify-between">
         <BrandLogoConnect gradient-start="currentcolor" gradient-stop="currentcolor" class="text-beta w-[120px]" />
         <UpcBeta />
@@ -82,7 +82,7 @@ const links = computed(():UserProfileLink[] => {
     </header>
     <ul class="list-reset flex flex-col gap-y-4px p-0">
       <UpcDropdownError />
-      <UpcDropdownConnectStatus v-if="!stateData.error && registered && pluginInstalled" class="mt-8px" />
+      <UpcDropdownConnectStatus v-if="!stateData.error && registered && connectPluginInstalled" class="mt-8px" />
 
       <li v-if="keyActions || links.length" class="m-8px">
         <UpcKeyline />

components/UserProfile/DropdownLaunchpad.vue

@@ -4,9 +4,9 @@ import { useServerStore } from '~/store/server';
 import 'tailwindcss/tailwind.css';
 import '~/assets/main.css';
 
-const { expireTime, pluginInstalled, registered, state, stateData } = storeToRefs(useServerStore());
+const { expireTime, connectPluginInstalled, registered, state, stateData } = storeToRefs(useServerStore());
 
-const showConnectCopy = computed(() => (pluginInstalled.value && !registered.value && !stateData.value?.error));
+const showConnectCopy = computed(() => (connectPluginInstalled.value && !registered.value && !stateData.value?.error));
 
 const heading = computed(() => {
   if (showConnectCopy.value) return 'Thank you for installing Connect!';

components/UserProfile/DropdownTrigger.vue

@@ -9,19 +9,19 @@ const dropdownStore = useDropdownStore();
 const { dropdownVisible } = storeToRefs(dropdownStore);
 const { errors } = storeToRefs(useErrorsStore());
 const {
-  pluginInstalled,
+  connectPluginInstalled,
   registered,
   state,
   stateData,
   username,
 } = storeToRefs(useServerStore());
 
-const registeredAndPluginInstalled = computed(() => pluginInstalled.value && registered.value);
+const registeredAndconnectPluginInstalled = computed(() => connectPluginInstalled.value && registered.value);
 const showErrorIcon = computed(() => errors.value.length || stateData.value.error);
 
 const text = computed((): string | undefined => {
   if ((stateData.value.error) && state.value !== 'EEXPIRED') return 'Fix Error';
-  if (registeredAndPluginInstalled.value) return username.value;
+  if (registeredAndconnectPluginInstalled.value) return username.value;
   return;
 });