From 17a5767108f5e7ec1b62bc741f92d2242c56c594 Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Mon, 25 Sep 2023 20:25:19 -0700
Subject: [PATCH] refactor(web): registration page UI UX

---
 web/_data/serverState.ts            |   2 +-
 web/components/Registration.ce.vue  | 122 +++++++++++++++++-----------
 web/components/Ui/PageContainer.vue |   2 +-
 web/components/UpdateOs/Update.vue  |   1 -
 web/package-lock.json               |  35 ++++++++
 web/package.json                    |   1 +
 web/tailwind.config.ts              |  19 ++++-
 7 files changed, 128 insertions(+), 54 deletions(-)

diff --git a/web/_data/serverState.ts b/web/_data/serverState.ts
index b0cfd0bee..4dff636e3 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 = 'TRIAL';
+const state: ServerState = 'EEXPIRED';
 
 const uptime = Date.now() - 60 * 60 * 1000; // 1 hour ago
 let expireTime = 0;
diff --git a/web/components/Registration.ce.vue b/web/components/Registration.ce.vue
index bbd0fb67b..a7ad6493f 100644
--- a/web/components/Registration.ce.vue
+++ b/web/components/Registration.ce.vue
@@ -15,6 +15,10 @@ else
   echo "Third party plugins found - PLEASE CHECK YOUR UNRAID NOTIFICATIONS AND WAIT FOR THE MESSAGE THAT IT IS SAFE TO REBOOT!"
 fi
  */
+import {
+  ShieldCheckIcon,
+  ShieldExclamationIcon,
+} from '@heroicons/vue/24/solid';
 import dayjs from 'dayjs'
 import { storeToRefs } from 'pinia';
 import { useI18n } from 'vue-i18n';
@@ -51,41 +55,59 @@ const {
 
 const items = computed(() => {
   return [
-    {
-      label: 'Registered to:',
-      text: regTo.value,
-    },
-    {
-      label: 'Registered on:',
-      text: dayjs(regTm.value).format('YYYY-MM-DD HH:mm'),
-    },
-    {
-      label: 'Updates Expire:',
-      text: dayjs(regTm.value).format('YYYY-MM-DD HH:mm'),
-    },
+    ...(regTo.value
+      ? [
+          {
+            label: 'Registered to',
+            text: regTo.value,
+          },
+        ]
+      : []
+    ),
+    ...(regTo.value
+      ? [
+          {
+            label: 'Registered on',
+            text: dayjs(regTm.value).format('YYYY-MM-DD HH:mm'),
+          },
+        ]
+      : []
+    ),
+    /**
+     * @todo factor in grandfathered users and display a different message
+     */
+    ...(regTo.value
+      ? [
+          {
+            label: 'Updates Expire',
+            text: dayjs(regTm.value).format('YYYY-MM-DD HH:mm'),
+          },
+        ]
+      : []
+    ),
     ...(state.value === 'EGUID'
       ? [
           {
-            label: 'Registered GUID:',
+            label: 'Registered GUID',
             text: regGuid.value,
           },
         ]
       : []
     ),
     {
-      label: 'Flash GUID:',
+      label: 'Flash GUID',
       text: guid.value,
     },
     {
-      label: 'Flash Vendor:',
+      label: 'Flash Vendor',
       text: flashVendor.value,
     },
     {
-      label: 'Flash Product:',
+      label: 'Flash Product',
       text: flashProduct.value,
     },
     {
-      label: 'Attached Storage Devices:',
+      label: 'Attached Storage Devices',
       text: deviceCount.value,
     },
   ];
@@ -93,38 +115,40 @@ const items = computed(() => {
 </script>
 
 <template>
-  <UiPageContainer>
-    <UiCardWrapper>
-      <div class="p-16px sm:px-20px">
-        <h3
-          class="text-24px font-semibold"
-          :class="{
-            'text-red-500': stateDataError,
-            'text-green-500': !stateDataError,
-          }"
-        >
-          {{ stateData.heading }}
-        </h3>
-        <div
-          v-if="stateData.message"
-          v-html="stateData.message"
-          class="text-16px leading-normal opacity-75"></div>
-      </div>
-      <div>
-        <dl>
-          <RegistrationItem
-            v-for="item in items"
-            :key="item.label"
-            :label="item.label"
-            :text="item.text"
-            :t="t" />
-          <div class="p-16px sm:px-20px sm:grid sm:grid-cols-3 sm:gap-16px">
-            <dt class="text-16px font-medium leading-normal">&nbsp;</dt>
-            <dd class="mt-2 text-16px sm:col-span-2 sm:mt-0">
-              <KeyActions :t="t" />
-            </dd>
-          </div>
-        </dl>
+  <UiPageContainer class="max-w-800px">
+    <UiCardWrapper :increased-padding="true">
+      <div class="flex flex-col gap-20px sm:gap-24px">
+        <header class="grid gap-y-16px">
+          <h3
+            class="text-20px md:text-24px font-semibold leading-normal flex flex-row items-center gap-8px"
+            :class="stateDataError ? 'text-unraid-red' : 'text-green-500'"
+          >
+            <component :is="stateDataError ? ShieldExclamationIcon : ShieldCheckIcon" class="w-24px h-24px" />
+            <span>
+              {{ stateData.heading }}
+            </span>
+          </h3>
+          <div
+            v-if="stateData.message"
+            v-html="stateData.message"
+            class="prose text-16px leading-relaxed whitespace-normal opacity-75"></div>
+        </header>
+        <section>
+          <dl>
+            <RegistrationItem
+              v-for="item in items"
+              :key="item.label"
+              :label="item.label"
+              :text="item.text"
+              :t="t" />
+            <div class="p-16px sm:px-20px sm:grid sm:grid-cols-3 sm:gap-16px">
+              <dt class="text-16px font-medium leading-normal">&nbsp;</dt>
+              <dd class="mt-2 text-16px sm:col-span-2 sm:mt-0">
+                <KeyActions :t="t" />
+              </dd>
+            </div>
+          </dl>
+        </section>
       </div>
     </UiCardWrapper>
   </UiPageContainer>
diff --git a/web/components/Ui/PageContainer.vue b/web/components/Ui/PageContainer.vue
index e10eecd48..10e8a88c6 100644
--- a/web/components/Ui/PageContainer.vue
+++ b/web/components/Ui/PageContainer.vue
@@ -8,7 +8,7 @@ withDefaults(defineProps<{
 
 <template>
   <div
-    class="grid gap-y-24px mx-auto px-16px"
+    class="grid gap-y-24px w-full mx-auto px-16px"
     :class="maxWidth"
   >
     <slot></slot>
diff --git a/web/components/UpdateOs/Update.vue b/web/components/UpdateOs/Update.vue
index 8b1334fc9..6a37a1a32 100644
--- a/web/components/UpdateOs/Update.vue
+++ b/web/components/UpdateOs/Update.vue
@@ -4,7 +4,6 @@
  * @todo require keyfile to update
  * @todo require valid guid / server state to update
  */
-import { Switch, SwitchGroup, SwitchLabel } from '@headlessui/vue'
 import {
   ArrowPathIcon,
   ArrowTopRightOnSquareIcon,
diff --git a/web/package-lock.json b/web/package-lock.json
index cd122c7b5..997d250f6 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -33,6 +33,7 @@
         "@nuxt/eslint-config": "^0.1.1",
         "@nuxtjs/eslint-config-typescript": "^12.0.0",
         "@nuxtjs/tailwindcss": "^6.7.0",
+        "@tailwindcss/typography": "^0.5.10",
         "@types/crypto-js": "^4.1.1",
         "@types/node": "^18",
         "@vue/apollo-util": "^4.0.0-beta.6",
@@ -5309,6 +5310,34 @@
         "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
+    "node_modules/@tailwindcss/typography": {
+      "version": "0.5.10",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.10.tgz",
+      "integrity": "sha512-Pe8BuPJQJd3FfRnm6H0ulKIGoMEQS+Vq01R6M5aCrFB/ccR/shT+0kXLjouGC1gFLm9hopTFN+DMP0pfwRWzPw==",
+      "dev": true,
+      "dependencies": {
+        "lodash.castarray": "^4.4.0",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.merge": "^4.6.2",
+        "postcss-selector-parser": "6.0.10"
+      },
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders"
+      }
+    },
+    "node_modules/@tailwindcss/typography/node_modules/postcss-selector-parser": {
+      "version": "6.0.10",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+      "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+      "dev": true,
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/@tootallnate/once": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
@@ -12938,6 +12967,12 @@
       "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
       "dev": true
     },
+    "node_modules/lodash.castarray": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
+      "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
+      "dev": true
+    },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
diff --git a/web/package.json b/web/package.json
index f03228fe5..1e4dc7017 100644
--- a/web/package.json
+++ b/web/package.json
@@ -24,6 +24,7 @@
     "@nuxt/eslint-config": "^0.1.1",
     "@nuxtjs/eslint-config-typescript": "^12.0.0",
     "@nuxtjs/tailwindcss": "^6.7.0",
+    "@tailwindcss/typography": "^0.5.10",
     "@types/crypto-js": "^4.1.1",
     "@types/node": "^18",
     "@vue/apollo-util": "^4.0.0-beta.6",
diff --git a/web/tailwind.config.ts b/web/tailwind.config.ts
index 7317cf194..9532554dd 100644
--- a/web/tailwind.config.ts
+++ b/web/tailwind.config.ts
@@ -1,5 +1,5 @@
 import type { Config } from 'tailwindcss';
-
+/** @type {import('tailwindcss').Config} */
 export default <Partial<Config>>{
   safelist: [
     'DropdownWrapper_blip',
@@ -104,6 +104,21 @@ export default <Partial<Config>>{
         '2xs': '470px',
         xs: '530px',
       },
+      /**
+       * @todo modify prose classes to use pixels for webgui…sadge https://tailwindcss.com/docs/typography-plugin#customizing-the-default-theme
+       */
+      typography: (theme) => ({
+        DEFAULT: {
+          css: {
+            color: theme('colors.beta'),
+
+            // ...
+          },
+        },
+      }),
     }
-  }
+  },
+  plugins: [
+    require('@tailwindcss/typography'),
+  ],
 };