refactor(web): registration page UI UX

2026-01-07 09:10:05 -06:00 · 2023-09-25 20:25:19 -07:00
parent e04b619071
commit 17a5767108
7 changed files with 128 additions and 54 deletions
--- 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;
--- 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>
--- 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>
--- 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,
--- 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",
--- 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",
--- 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'),
+  ],
 };