refactor(web): registration ux/ui button placement

web/components/Brand/Button.vue

@@ -4,7 +4,7 @@ import BrandLoading from '~/components/Brand/Loading.vue';
 import BrandLoadingWhite from '~/components/Brand/LoadingWhite.vue';
 
 export interface ButtonProps {
-  btnStyle?: 'fill' | 'outline' | 'underline';
+  btnStyle?: 'fill' | 'gray' | 'outline' | 'underline';
   btnType?: 'button' | 'submit' | 'reset';
   click?: () => void;
   disabled?: boolean;
@@ -31,6 +31,8 @@ const classes = computed(() => {
   switch (props.btnStyle) {
     case 'fill':
       return 'text-white bg-gradient-to-r from-unraid-red to-orange shadow-none hover:from-unraid-red/60 hover:to-orange/60 focus:from-unraid-red/60 focus:to-orange/60 hover:shadow-md focus:shadow-md';
+    case 'gray':
+      return 'text-black bg-grey shadow-none transition hover:text-white focus:text-white hover:bg-grey-mid focus:bg-grey-mid hover:shadow-md focus:shadow-md';
     case 'outline':
       return 'text-orange bg-gradient-to-r from-transparent to-transparent border-2 border-solid border-orange shadow-none hover:text-white focus:text-white hover:from-unraid-red hover:to-orange focus:from-unraid-red focus:to-orange hover:shadow-md focus:shadow-md';
     case 'underline':

web/components/KeyActions.vue

@@ -2,8 +2,10 @@
 import { storeToRefs } from 'pinia';
 
 import { useServerStore } from '~/store/server';
+import type { ServerStateDataAction } from '~/types/server';
 
 const props = defineProps<{
+  actions: ServerStateDataAction[];
   filterBy?: string[] | undefined;
   filterOut?: string[] | undefined;
   t: any;
@@ -11,10 +13,12 @@ const props = defineProps<{
 
 const { keyActions } = storeToRefs(useServerStore());
 
-const filteredKeyActions = computed(() => {
-  if (!keyActions.value || (!props.filterOut && !props.filterBy)) return keyActions.value;
+const computedActions = computed((): ServerStateDataAction[] | undefined => props.actions ? props.actions : keyActions.value);
 
-  return keyActions.value.filter((action: { name: string; }) => {
+const filteredKeyActions = computed((): ServerStateDataAction[] | undefined => {
+  if (!computedActions.value || (!props.filterOut && !props.filterBy)) return computedActions.value;
+
+  return computedActions.value.filter((action: { name: string; }) => {
     return props.filterOut
       ? !props.filterOut?.includes(action.name)
       : props.filterBy?.includes(action.name);

web/components/Registration.ce.vue

@@ -146,10 +146,14 @@ const items = computed((): RegistrationItemProps[] => {
           component: RegistrationReplaceCheck,
           componentProps: { t: t },
         }] : []),
-    ...(keyActions.value ? [{
+    // filter out renew action and only display other key actions
+    ...(!keyActions.value?.filter(action => !['renew'].includes(action.name)) ? [{
           label: t('License key actions'),
           component: KeyActions,
-          componentProps: { t: t },
+          componentProps: {
+            filterOut: ['renew'],
+            t,
+           },
         }]
       : []),
   ];

web/components/Registration/ReplaceCheck.vue

@@ -5,6 +5,7 @@ import {
 } from '@heroicons/vue/24/solid';
 import { storeToRefs } from 'pinia';
 
+import { DOCS_REGISTRATION_REPLACE_KEY } from '~/helpers/urls';
 import BrandLoadingWhite from '~/components/Brand/LoadingWhite.vue';
 import { useReplaceCheckStore } from '~/store/replaceCheck';
 
@@ -17,30 +18,31 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div class="flex flex-col">
+  <div class="flex flex-wrap items-start justify-between gap-8px">
     <BrandButton
       v-if="status === 'checking' || status === 'ready'"
       @click="replaceCheckStore.check"
       :disabled="status !== 'ready'"
       :icon="status === 'checking' ? BrandLoadingWhite : KeyIcon"
       :text="t('Check Eligibility')"
-      class="w-full sm:max-w-300px" />
+      class="flex-grow" />
 
-    <p
+    <UiBadge
       v-else-if="statusOutput"
-      class="flex flex-col sm:flex-row items-start justify-between gap-4px"
+      :color="statusOutput.color"
+      :icon="statusOutput.icon"
+      size="16px"
     >
-      <UiBadge :color="statusOutput.color" :icon="statusOutput.icon" size="16px">
-        {{ t(statusOutput.text) }}
-      </UiBadge>
-      <BrandButton
-        v-if="status !== 'checking' || status === 'ready'"
-        btn-style="underline"
-        :external="true"
-        :href="'https://docs.unraid.net/unraid-os/manual/changing-the-flash-device/'"
-        :iconRight="ArrowTopRightOnSquareIcon"
-        :text="t('Learn More')"
-      />
-    </p>
+      {{ t(statusOutput.text) }}
+    </UiBadge>
+
+    <BrandButton
+      btn-style="underline"
+      :external="true"
+      :href="DOCS_REGISTRATION_REPLACE_KEY.toString()"
+      :iconRight="ArrowTopRightOnSquareIcon"
+      :text="t('Learn More')"
+      class="text-14px"
+    />
   </div>
 </template>

web/components/Registration/UpgradeExpiration.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
+import { ArrowTopRightOnSquareIcon } from '@heroicons/vue/24/solid';
 import { storeToRefs } from 'pinia';
 
 import useTimeHelper from '~/composables/time';
+import { DOCS_REGISTRATION_LICENSING } from '~/helpers/urls';
 import { useServerStore } from '~/store/server';
 
 export interface Props {
@@ -10,9 +12,8 @@ export interface Props {
 
 const props = defineProps<Props>();
 
-
 const serverStore = useServerStore();
-const { dateTimeFormat, regTy, regExp, regUpdatesExpired, state } = storeToRefs(serverStore);
+const { dateTimeFormat, regTy, regExp, regUpdatesExpired, renewAction, state } = storeToRefs(serverStore);
 
 const { buildStringFromValues, dateDiff, formatDate } = useTimeHelper(dateTimeFormat.value, props.t);
 
@@ -51,7 +52,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <span v-if="output" class="flex flex-col gap-y-4px">
+  <div v-if="output" class="flex flex-col gap-8px">
     <p
       :title="output.title"
     >
@@ -60,5 +61,27 @@ onBeforeUnmount(() => {
     <p v-if="regUpdatesExpired" class="text-14px opacity-90">
       <em>{{ t('Renew your license key to continue receiving OS updates.') }}</em>
     </p>
-  </span>
+    <div class="flex flex-wrap items-start justify-between gap-8px">
+      <BrandButton
+        v-if="regUpdatesExpired" 
+        :btn-style="'gray'"
+        :disabled="renewAction?.disabled"
+        :external="renewAction?.external"
+        :icon="renewAction.icon"
+        :text="t('Renew Key')"
+        @click="renewAction.click()"
+        :title="t('Renew your license key to continue receiving OS updates.')"
+        class="flex-grow"
+      />
+
+      <BrandButton
+        btn-style="underline"
+        :external="true"
+        :href="DOCS_REGISTRATION_LICENSING.toString()"
+        :iconRight="ArrowTopRightOnSquareIcon"
+        :text="t('Learn More')"
+        class="text-14px"
+      />
+    </div>
+  </div>
 </template>

web/helpers/urls.ts

@@ -1,10 +1,11 @@
 const ACCOUNT = new URL(import.meta.env.VITE_ACCOUNT ?? 'https://account.unraid.net');
+const DOCS = new URL('https://docs.unraid.net');
 const FORUMS = new URL('https://forums.unraid.net');
 const UNRAID_NET = new URL(localStorage.getItem('craftUrl') ?? import.meta.env.VITE_UNRAID_NET ?? 'https://unraid.net');
 
 const ACCOUNT_CALLBACK = new URL('c', ACCOUNT);
 const FORUMS_BUG_REPORT = new URL('/bug-reports', FORUMS);
-const CONNECT_DOCS = new URL('https://docs.unraid.net/category/unraid-connect');
+const CONNECT_DOCS = new URL('category/unraid-connect', DOCS);
 const CONNECT_DASHBOARD = new URL(import.meta.env.VITE_CONNECT ?? 'https://connect.myunraid.net');
 const CONNECT_FORUMS = new URL('/forum/94-connect-plugin-support/', FORUMS);
 const CONTACT = new URL('/contact', UNRAID_NET);
@@ -17,6 +18,9 @@ const PLUGIN_SETTINGS = new URL('#UnraidNetSettings', SETTINGS_MANAGMENT_ACCESS)
 
 const OS_RELEASES = new URL('https://s3.amazonaws.com/dnld.lime-technology.com/stable/releases.json');
 
+const DOCS_REGISTRATION_LICENSING = new URL('/unraid-os/faq/licensing-faq', DOCS);
+const DOCS_REGISTRATION_REPLACE_KEY = new URL('/unraid-os/manual/changing-the-flash-device/#notes-about-replacing-your-registration-key', DOCS);
+
 export {
   ACCOUNT,
   ACCOUNT_CALLBACK,
@@ -32,4 +36,6 @@ export {
   PLUGIN_SETTINGS,
   SETTINGS_MANAGMENT_ACCESS,
   OS_RELEASES,
+  DOCS_REGISTRATION_LICENSING,
+  DOCS_REGISTRATION_REPLACE_KEY,
 };

web/locales/en_US.json

@@ -276,6 +276,7 @@
   "Unleashed": "Unleashed",
   "Lifetime": "Lifetime",
   "Renew your license key to continue receiving OS updates.": "Renew your license key to continue receiving OS updates.",
+  "Renew Key": "Renew Key",
   "A valid GUID is required to check for updates.": "A valid GUID is required to check for updates.",
   "A valid keyfile is required to check for updates.": "A valid keyfile is required to check for updates.",
   "A valid OS version is required to check for updates.": "A valid OS version is required to check for updates.",

web/store/server.ts

@@ -35,6 +35,7 @@ import type {
   ServerStateDataAction,
   ServerconnectPluginInstalled,
   ServerDateTimeFormat,
+  ServerStateDataKeyActions,
 } from '~/types/server';
 
 /**
@@ -852,6 +853,16 @@ export const useServerStore = defineStore('server', () => {
     }, refreshTimeout);
   };
 
+  const filteredKeyActions = (filterType: 'by' | 'out', filters: ServerStateDataKeyActions[]): ServerStateDataAction[] | undefined  => {
+    if (!stateData.value.actions) { return; }
+
+    return stateData.value.actions.filter((action) => {
+      return filterType === 'out'
+        ? !filters.includes(action.name)
+        : filters.includes(action.name);
+    });
+  };
+
   return {
     // state
     apiKey,
@@ -908,5 +919,6 @@ export const useServerStore = defineStore('server', () => {
     setServer,
     fetchServerFromApi,
     refreshServerState,
+    filteredKeyActions,
   };
 });