From a84b972121e1a2ebfd837d248fa2b9716e768916 Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Wed, 27 Sep 2023 13:47:11 -0700
Subject: [PATCH] feat(web): registration too many devices messaging

---
 web/_data/serverState.ts             | 4 ++--
 web/components/Registration.ce.vue   | 4 +++-
 web/components/Registration/Item.vue | 2 +-
 web/locales/en_US.json               | 1 +
 4 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/web/_data/serverState.ts b/web/_data/serverState.ts
index b0ad95dde..a18db03e8 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 = 'ENOCONN';
+const state: ServerState = 'BASIC';
 let regTy = '';
 switch (state) {
   // @ts-ignore
@@ -72,7 +72,7 @@ export const serverState: Server = {
   connectPluginInstalled: 'dynamix.unraid.net.staging.plg',
   // connectPluginInstalled: '',
   description: 'DevServer9000',
-  deviceCount: 3,
+  deviceCount: 12,
   expireTime,
   flashProduct: 'SanDisk_3.2Gen1',
   flashVendor: 'USB',
diff --git a/web/components/Registration.ce.vue b/web/components/Registration.ce.vue
index 895439a56..b82504a68 100644
--- a/web/components/Registration.ce.vue
+++ b/web/components/Registration.ce.vue
@@ -132,7 +132,9 @@ const items = computed((): RegistrationItemProps[] => {
     ...(!stateDataError.value ? [{
         error: deviceCount.value > devicesAvailable.value,
         label: t('Attached Storage Devices'),
-        text: t('{0} out of {1} devices', [deviceCount.value, devicesAvailable.value > 12 ? t('unlimited') : devicesAvailable.value]),
+        text: deviceCount.value > devicesAvailable.value
+          ? t('{0} out of {1} allowed devices – upgrade your key to support more devices', [deviceCount.value, devicesAvailable.value > 12 ? t('unlimited') : devicesAvailable.value])
+          : t('{0} out of {1} devices', [deviceCount.value, devicesAvailable.value > 12 ? t('unlimited') : devicesAvailable.value]),
       }] : []),
     ...(!stateDataError.value && guid.value ? [{
           label: t('Key Replacement Eligibility'),
diff --git a/web/components/Registration/Item.vue b/web/components/Registration/Item.vue
index 7ca9c0dd4..bf2d596cf 100644
--- a/web/components/Registration/Item.vue
+++ b/web/components/Registration/Item.vue
@@ -29,7 +29,7 @@ const evenBgColor = computed(() => {
       <span>{{ label }}</span>
     </dt>
     <dd class="leading-normal sm:col-span-2">
-      <span v-if="text" class="opacity-75 select-all">{{ text }}</span>
+      <span v-if="text" class="select-all" :class="!error ? 'opacity-75' : ''">{{ text }}</span>
       <template v-if="$slots['right']">
         <slot name="right"></slot>
       </template>
diff --git a/web/locales/en_US.json b/web/locales/en_US.json
index 412971c0c..596c2d9e5 100644
--- a/web/locales/en_US.json
+++ b/web/locales/en_US.json
@@ -251,6 +251,7 @@
   "Flash Product": "Flash Product",
   "Attached Storage Devices": "Attached Storage Devices",
   "{0} out of {1} devices": "{0} out of {1} devices",
+  "{0} out of {1} allowed devices – upgrade your key to support more devices": "{0} out of {1} allowed devices – upgrade your key to support more devices",
   "{0} devices": "{0} devices",
   "unlimited": "unlimited",
   "Unable to check for updates": "Unable to check for updates",