refactor: Registration component regExp usage & styles

web/components/Registration.ce.vue

@@ -31,7 +31,7 @@ import type { RegistrationItemProps } from '~/types/registration';
 
 import KeyActions from '~/components/KeyActions.vue';
 import RegistrationReplaceCheck from '~/components/Registration/ReplaceCheck.vue';
-import RegistrationUpgradeExpiration from '~/components/Registration/UpgradeExpiration.vue';
+import RegistrationUpdateExpirationAction from '~/components/Registration/UpdateExpirationAction.vue';
 import UserProfileUptimeExpire from '~/components/UserProfile/UptimeExpire.vue';
 
 const { t } = useI18n();
@@ -111,9 +111,9 @@ const items = computed((): RegistrationItemProps[] => {
         text: formatDate(regTm.value),
       }] : []),
     ...(regExp.value && (state.value === 'STARTER' || state.value === 'UNLEASHED') ? [{
-          error: regUpdatesExpired.value,
           label: t('OS Update Eligibility'),
-          component: RegistrationUpgradeExpiration,
+          warning: regUpdatesExpired.value,
+          component: RegistrationUpdateExpirationAction,
           componentProps: { t },
           componentOpacity: !regUpdatesExpired.value,
         }]
@@ -186,6 +186,7 @@ const items = computed((): RegistrationItemProps[] => {
             :component="item?.component"
             :component-props="item?.componentProps"
             :error="item.error ?? false"
+            :warning="item.warning ?? false"
             :label="item.label"
             :text="item.text"
           >

web/components/Registration/Item.vue

@@ -8,6 +8,7 @@ import { RegistrationItemProps } from '~/types/registration';
 withDefaults(defineProps<RegistrationItemProps>(), {
   error: false,
   text: '',
+  warning: false,
 });
 
 const { darkMode } = storeToRefs(useThemeStore());
@@ -20,8 +21,9 @@ const evenBgColor = computed(() => {
 <template>
   <div
     :class="[
-      !error && evenBgColor,
+      !error && !warning && evenBgColor,
       error && 'text-white bg-unraid-red',
+      warning && 'text-black bg-yellow-100',
     ]"
     class="text-16px p-16px grid grid-cols-1 gap-4px sm:px-20px sm:grid-cols-3 sm:gap-16px items-start rounded"
   >

web/components/Registration/UpdateExpiration.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { storeToRefs } from 'pinia';
+
+import useTimeHelper from '~/composables/time';
+import { useServerStore } from '~/store/server';
+
+export interface Props {
+  componentIs?: string;
+  t: any;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  componentIs: 'p',
+});
+
+const serverStore = useServerStore();
+const { dateTimeFormat, regExp, regUpdatesExpired } = storeToRefs(serverStore);
+
+const { buildStringFromValues, dateDiff, formatDate } = useTimeHelper(dateTimeFormat.value, props.t);
+
+const parsedTime = ref<string>('');
+const formattedTime = computed<string>(() => formatDate(regExp.value));
+
+const output = computed(() => {
+  if (!regExp.value) {
+    return undefined;
+  }
+  return {
+    text: regUpdatesExpired.value
+      ? props.t('Ineligible for updates released after {0}', [formattedTime.value])
+      : props.t('Eligible for updates until {0}', [formattedTime.value]),
+    title: regUpdatesExpired.value
+      ? props.t('Ineligible as of {0}', [parsedTime.value])
+      : props.t('Eligible for updates for {0}', [parsedTime.value]),
+  };
+});
+
+const runDiff = () => {
+  parsedTime.value = buildStringFromValues(dateDiff((regExp.value).toString(), false));
+};
+
+let interval: string | number | NodeJS.Timeout | undefined;
+onBeforeMount(() => {
+  runDiff();
+  interval = setInterval(() => {
+    runDiff();
+  }, 1000);
+});
+
+onBeforeUnmount(() => {
+  clearInterval(interval);
+});
+</script>
+
+<template>
+  <component
+    v-if="output"
+    :is="componentIs"
+    :title="output.title"
+  >
+    <slot></slot>
+    {{ output.text }}
+  </component>
+</template>

web/components/Registration/UpdateExpirationAction.vue

@@ -13,7 +13,7 @@ export interface Props {
 const props = defineProps<Props>();
 
 const serverStore = useServerStore();
-const { dateTimeFormat, regTy, regExp, regUpdatesExpired, renewAction, state } = storeToRefs(serverStore);
+const { dateTimeFormat, regExp, regUpdatesExpired, renewAction } = storeToRefs(serverStore);
 
 const { buildStringFromValues, dateDiff, formatDate } = useTimeHelper(dateTimeFormat.value, props.t);
 
@@ -26,11 +26,11 @@ const output = computed(() => {
   }
   return {
     text: regUpdatesExpired.value
-      ? props.t('Ineligible since {0}', [formattedTime.value])
-      : props.t('Valid until {0}', [formattedTime.value]),
+      ? props.t('Ineligible for updates released after {0}', [formattedTime.value])
+      : props.t('Eligible for updates until {0}', [formattedTime.value]),
     title: regUpdatesExpired.value
       ? props.t('Ineligible as of {0}', [parsedTime.value])
-      : props.t('Valid for {0}', [parsedTime.value]),
+      : props.t('Eligible for updates for {0}', [parsedTime.value]),
   };
 });
 
@@ -53,18 +53,16 @@ onBeforeUnmount(() => {
 
 <template>
   <div v-if="output" class="flex flex-col gap-8px">
-    <p
-      :title="output.title"
-    >
-      {{ output.text }}
-    </p>
-    <p v-if="regUpdatesExpired" class="text-14px opacity-90">
-      <em>{{ t('Renew your license key to continue receiving OS updates.') }}</em>
-    </p>
+    <RegistrationUpdateExpiration :t="t" />
+
+    <template v-if="regUpdatesExpired">
+      <p class="text-14px opacity-90">
+        <em>{{ t('Pay your annual fee to continue receiving OS updates.') }} {{ t('You may still update to releases dated prior to your update expiration date.') }}</em>
+      </p>
+    </template>
     <div class="flex flex-wrap items-start justify-between gap-8px">
       <BrandButton
-        v-if="regUpdatesExpired" 
-        btn-style="white"
+        v-if="regUpdatesExpired"
         :disabled="renewAction?.disabled"
         :external="renewAction?.external"
         :icon="renewAction.icon"
@@ -72,7 +70,7 @@ onBeforeUnmount(() => {
         :icon-right-hover="true"
         :text="t('Renew Key')"
         @click="renewAction.click()"
-        :title="t('Renew your license key to continue receiving OS updates.')"
+        :title="t('Pay your annual fee to continue receiving OS updates.')"
         class="flex-grow"
       />