From f4ab3639015be46730bddc9992a5b242af9d7482 Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Thu, 28 Sep 2023 16:46:37 -0700
Subject: [PATCH] refactor(web): improved regExp handling

---
 web/_data/serverState.ts           | 12 +++++++++---
 web/components/UpdateOs/Update.vue | 17 +++++++++++++----
 web/store/server.ts                |  5 ++++-
 3 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/web/_data/serverState.ts b/web/_data/serverState.ts
index 5cf8be3e5..b2ce42b58 100644
--- a/web/_data/serverState.ts
+++ b/web/_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 = 'STARTER';
 let regDev = 0;
 let regTy = '';
 switch (state) {
@@ -66,6 +66,12 @@ let expireTime = 0;
 if (state === 'TRIAL') { expireTime = oneHourFromNow; } // in 1 hour
 else if (state === 'EEXPIRED') { expireTime = uptime; } // 1 hour ago
 
+let regExp: number | undefined = undefined;
+if (state === 'STARTER' || state === 'UNLEASHED') {
+  // regExp = oneHourFromNow;
+  regExp = uptime;
+}
+
 export const serverState: Server = {
   apiKey: 'unupc_fab6ff6ffe51040595c6d9ffb63a353ba16cc2ad7d93f813a2e80a5810',
   avatar: 'https://source.unsplash.com/300x300/?portrait',
@@ -83,7 +89,7 @@ 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
@@ -95,7 +101,7 @@ export const serverState: Server = {
   regTo: 'Zack Spear',
   regTy,
   // regExp: oneHourFromNow,
-  regExp: uptime,
+  regExp,
   // "regGuid": "0781-5583-8355-81071A2B0211",
   site: 'http://localhost:4321',
   state,
diff --git a/web/components/UpdateOs/Update.vue b/web/components/UpdateOs/Update.vue
index 52e752bd5..34da43cca 100644
--- a/web/components/UpdateOs/Update.vue
+++ b/web/components/UpdateOs/Update.vue
@@ -34,9 +34,6 @@ const { ineligibleText } = storeToRefs(updateOsActionsStore);
 const updateButton = ref<UserProfileLink | undefined>();
 
 const heading = computed(() => {
-  if (ineligibleText.value) {
-    return props.t('Ineligible for Unraid OS updates');
-  }
   if (available.value && updateButton?.value?.text && updateButton?.value?.textParams) {
     return props.t(updateButton?.value.text, updateButton?.value.textParams);
   }
@@ -53,6 +50,13 @@ const headingIcon = computed(() => {
   return ArrowPathIcon;
 });
 
+const subheading = computed(() => {
+  if (ineligibleText.value) {
+    return props.t('Ineligible for Unraid OS updates');
+  }
+  return '';
+});
+
 watchEffect(() => {
   if (available.value) {
     updateButton.value = updateOsActionsStore.initUpdateOsCallback();
@@ -72,6 +76,9 @@ watchEffect(() => {
             {{ heading }}
           </span>
         </h3>
+        <h4 v-if="subheading" class="text-18px font-semibold leading-normal">
+          {{ subheading }}
+        </h4>
         <div class="text-16px leading-relaxed whitespace-normal" :class="!ineligibleText ? 'opacity-75' : ''">
           <p v-if="ineligibleText">{{ ineligibleText }}</p>
           <p v-else>{{ t('Receive the latest and greatest for Unraid OS. Whether it new features, security patches, or bug fixes – keeping your server up-to-date ensures the best experience that Unraid has to offer.') }}</p>
@@ -85,6 +92,7 @@ watchEffect(() => {
         :icon="WrenchScrewdriverIcon"
         :icon-right="ArrowSmallRightIcon"
         :text="t('Learn more and fix')"
+        class="flex-none"
         />
       <BrandButton
         v-else-if="available && updateButton"
@@ -92,7 +100,8 @@ watchEffect(() => {
         :external="updateButton?.external"
         :icon-right="ArrowTopRightOnSquareIcon"
         :name="updateButton?.name"
-        :text="t('View changelog & update')" />
+        :text="t('View changelog & update')"
+        class="flex-none" />
     </div>
   </UiCardWrapper>
 </template>
diff --git a/web/store/server.ts b/web/store/server.ts
index 68f407e8f..d978b9278 100644
--- a/web/store/server.ts
+++ b/web/store/server.ts
@@ -95,7 +95,10 @@ export const useServerStore = defineStore('server', () => {
   const regTo = ref<string>('');
   const regTy = ref<string>('');
   const regExp = ref<number>(0);
-  const regUpdatesExpired = computed(() => regExp.value < Date.now());
+  const regUpdatesExpired = computed(() => {
+    if (!regExp.value || state.value !== 'STARTER' && state.value !== 'UNLEASHED') { return false; }
+    return regExp.value < Date.now();
+  });
   const site = ref<string>('');
   const state = ref<ServerState>();
   const theme = ref<Theme>();