From 858a93ccd2baa8906e5110a44d2e7f9c28d002f5 Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Mon, 25 Sep 2023 18:02:39 -0700
Subject: [PATCH] feat(web): WIP registration page web component

---
 plugin/scripts/deploy-dev.sh                  |   2 +-
 .../dynamix.my.servers/include/state.php      |   2 +
 web/_data/serverState.ts                      |   2 +
 .../{KeyActions.ce.vue => KeyActions.vue}     |  14 +-
 web/components/Registration.ce.vue            | 126 ++++++++++++++++++
 web/components/Registration/Item.vue          |  22 +++
 web/components/Ui/CardWrapper.vue             |  13 +-
 web/components/Ui/PageContainer.vue           |   5 +
 web/components/UpdateOs.ce.vue                |   4 +-
 web/nuxt.config.ts                            |   8 +-
 web/pages/index.vue                           |  10 +-
 web/pages/webComponents.vue                   |  10 +-
 web/store/server.ts                           |   8 ++
 web/types/server.ts                           |   2 +
 14 files changed, 198 insertions(+), 30 deletions(-)
 rename web/components/{KeyActions.ce.vue => KeyActions.vue} (73%)
 create mode 100644 web/components/Registration.ce.vue
 create mode 100644 web/components/Registration/Item.vue
 create mode 100644 web/components/Ui/PageContainer.vue

diff --git a/plugin/scripts/deploy-dev.sh b/plugin/scripts/deploy-dev.sh
index 102da7e04..8979540b1 100755
--- a/plugin/scripts/deploy-dev.sh
+++ b/plugin/scripts/deploy-dev.sh
@@ -29,7 +29,7 @@ source_directory="plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dyna
 destination_directory="/usr/local/emhttp/plugins/dynamix.my.servers"
 
 # Replace the value inside the rsync command with the user's input
-rsync_command="rsync -avz --progress --stats -m -e ssh \"$source_directory/\" \"root@${server_name}.local:$destination_directory/\""
+rsync_command="rsync -avz --progress --stats -m -e ssh \"$source_directory/\" \"root@${server_name}:$destination_directory/\""
 
 echo "Executing the following command:"
 echo "$rsync_command"
diff --git a/plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/include/state.php b/plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/include/state.php
index b21b59cb8..d0d6ec743 100644
--- a/plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/include/state.php
+++ b/plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/include/state.php
@@ -61,6 +61,8 @@ $serverState = [
     "protocol" => $_SERVER['REQUEST_SCHEME'],
     "regGen" => (int)$var['regGen'],
     "regGuid" => $var['regGUID'],
+    "regTo" => $var['regTo'],
+    "regTm" => $var['regTm'] * 1000, // JS expects milliseconds
     "registered" => $registered,
     "registeredTime" => $myservers['remote']['regWizTime'] ?? '',
     "site" => $_SERVER['REQUEST_SCHEME'] . "://" . $_SERVER['HTTP_HOST'],
diff --git a/web/_data/serverState.ts b/web/_data/serverState.ts
index 87136e908..b0cfd0bee 100644
--- a/web/_data/serverState.ts
+++ b/web/_data/serverState.ts
@@ -61,6 +61,8 @@ export const serverState: Server = {
   osVersion: '6.12.3',
   registered: true,
   regGen: 0,
+  regTm: uptime,
+  regTo: 'Zack Spear',
   // "regGuid": "0781-5583-8355-81071A2B0211",
   site: 'http://localhost:4321',
   state,
diff --git a/web/components/KeyActions.ce.vue b/web/components/KeyActions.vue
similarity index 73%
rename from web/components/KeyActions.ce.vue
rename to web/components/KeyActions.vue
index 8b31e8b31..3a13864d9 100644
--- a/web/components/KeyActions.ce.vue
+++ b/web/components/KeyActions.vue
@@ -1,12 +1,12 @@
 <script lang="ts" setup>
 import { storeToRefs } from 'pinia';
-import { useI18n } from 'vue-i18n';
 
 import { useServerStore } from '~/store/server';
-import 'tailwindcss/tailwind.css';
-import '~/assets/main.css';
 
-const { t } = useI18n();
+defineProps<{
+  t: any;
+}>();
+
 const { keyActions } = storeToRefs(useServerStore());
 </script>
 
@@ -25,9 +25,3 @@ const { keyActions } = storeToRefs(useServerStore());
     </li>
   </ul>
 </template>
-
-<style lang="postcss">
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-</style>
diff --git a/web/components/Registration.ce.vue b/web/components/Registration.ce.vue
new file mode 100644
index 000000000..047cad7a7
--- /dev/null
+++ b/web/components/Registration.ce.vue
@@ -0,0 +1,126 @@
+<script lang="ts" setup>
+/**
+ * @todo how are we going to update test, beta, and stable releases for internal testing?
+ * @todo after install / downgrade detect if third-party drivers are installed and tell users to wait for a user to wait for a new notification
+ *
+ * run exec("ps aux | grep -E "inotifywait -q /boot/changes.txt -e move_self,delete_self" | grep -v "grep -E inotifywait" | awk '{print $2}'");
+ * if this returns are value assume we have third-party drivers installed and tell the user to wait for a new notification
+ *
+ * view https://s3.amazonaws.com/dnld.lime-technology.com/stable/unRAIDServer.plg to see how the update is handled
+# ensure writes to USB flash boot device have completed
+sync -f /boot
+if [ -z "${plg_update_helper}" ]; then
+  echo "Update successful - PLEASE REBOOT YOUR SERVER"
+else
+  echo "Third party plugins found - PLEASE CHECK YOUR UNRAID NOTIFICATIONS AND WAIT FOR THE MESSAGE THAT IT IS SAFE TO REBOOT!"
+fi
+ */
+import dayjs from 'dayjs'
+import { storeToRefs } from 'pinia';
+import { useI18n } from 'vue-i18n';
+
+import { useServerStore } from '~/store/server';
+
+import 'tailwindcss/tailwind.css';
+import '~/assets/main.css';
+
+const { t } = useI18n();
+
+export interface Props {
+  restoreReleaseDate?: string;
+  restoreVersion?: string;
+}
+withDefaults(defineProps<Props>(), {
+  restoreReleaseDate: '',
+  restoreVersion: '',
+});
+
+const serverStore = useServerStore();
+const {
+  deviceCount,
+  guid,
+  flashVendor,
+  flashProduct,
+  regTm,
+  regTo,
+  stateData,
+  stateDataError,
+} = storeToRefs(serverStore);
+
+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'),
+    },
+    {
+      label: 'Flash GUID:',
+      text: guid.value,
+    },
+    {
+      label: 'Flash Vendor:',
+      text: flashVendor.value,
+    },
+    {
+      label: 'Flash Product:',
+      text: flashProduct.value,
+    },
+    {
+      label: 'Attached Storage Devices:',
+      text: deviceCount.value,
+    },
+  ];
+});
+</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>
+      </div>
+    </UiCardWrapper>
+  </UiPageContainer>
+</template>
+
+<style lang="postcss">
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+</style>
diff --git a/web/components/Registration/Item.vue b/web/components/Registration/Item.vue
new file mode 100644
index 000000000..a1a84d3d6
--- /dev/null
+++ b/web/components/Registration/Item.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+export interface Props {
+  label?: string;
+  text?: number | string | undefined;
+  t: any;
+}
+withDefaults(defineProps<Props>(), {
+  label: '',
+  text: '',
+});
+</script>
+<template>
+  <div class="text-16px p-16px sm:px-20px sm:grid sm:grid-cols-3 sm:gap-16px even:bg-gray-200/50">
+    <dt class="font-semibold">{{ t(label) }}</dt>
+    <dd class="mt-4px leading-normal sm:col-span-2 sm:mt-0">
+      <span v-if="text" class="opacity-75">{{ text }}</span>
+      <template v-else-if="$slots['text']">
+        <slot name="text"></slot>
+      </template>
+    </dd>
+  </div>
+</template>
diff --git a/web/components/Ui/CardWrapper.vue b/web/components/Ui/CardWrapper.vue
index 01007d628..81a19e8a6 100644
--- a/web/components/Ui/CardWrapper.vue
+++ b/web/components/Ui/CardWrapper.vue
@@ -1,13 +1,20 @@
 <script setup lang="ts">
-withDefaults(defineProps<{ increasedPadding?: boolean }>(), {
+withDefaults(defineProps<{
+  increasedPadding?: boolean;
+  noPadding?: boolean;
+}>(), {
   increasedPadding: false,
+  noPadding: false,
 });
 </script>
 
 <template>
   <div
-    class="group/card p-4 text-left relative flex flex-col flex-1 text-beta bg-alpha border-2 border-solid border-gamma-opaque rounded-md shadow-md hover:shadow-orange/50 transition-all"
-    :class="increasedPadding && 'md:p-6'"
+    class="group/card text-left relative flex flex-col flex-1 text-beta bg-alpha border-2 border-solid border-gamma-opaque rounded-md shadow-md hover:shadow-orange/50 transition-all"
+    :class="[
+      !noPadding && 'p-4',
+      increasedPadding && 'md:p-6',
+    ]"
   >
     <slot></slot>
   </div>
diff --git a/web/components/Ui/PageContainer.vue b/web/components/Ui/PageContainer.vue
new file mode 100644
index 000000000..2d230fffc
--- /dev/null
+++ b/web/components/Ui/PageContainer.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="grid gap-y-24px max-w-1024px mx-auto px-16px">
+    <slot></slot>
+  </div>
+</template>
\ No newline at end of file
diff --git a/web/components/UpdateOs.ce.vue b/web/components/UpdateOs.ce.vue
index 3a898c978..5e53d79f5 100644
--- a/web/components/UpdateOs.ce.vue
+++ b/web/components/UpdateOs.ce.vue
@@ -39,7 +39,7 @@ const { rebootType } = storeToRefs(updateOsActionsStore);
 </script>
 
 <template>
-  <div class="grid gap-y-24px max-w-1024px mx-auto px-16px">
+  <PageContainer>
     <UpdateOsStatus :t="t" />
     <UpdateOsUpdate
       v-if="rebootType === ''"
@@ -52,7 +52,7 @@ const { rebootType } = storeToRefs(updateOsActionsStore);
     <UpdateOsThirdPartyDrivers
       v-if="rebootType === 'thirdPartyDriversDownloading'"
       :t="t" />
-  </div>
+  </PageContainer>
 </template>
 
 <style lang="postcss">
diff --git a/web/nuxt.config.ts b/web/nuxt.config.ts
index d975ace9f..e8dce7845 100644
--- a/web/nuxt.config.ts
+++ b/web/nuxt.config.ts
@@ -88,10 +88,6 @@ export default defineNuxtConfig({
             name: 'UnraidHeaderOsVersion',
             path: '@/components/HeaderOsVersion.ce',
           },
-          {
-            name: 'UnraidKeyActions',
-            path: '@/components/KeyActions.ce',
-          },
           {
             name: 'UnraidModals',
             path: '@/components/Modals.ce',
@@ -104,6 +100,10 @@ export default defineNuxtConfig({
             name: 'UnraidUpdateOs',
             path: '@/components/UpdateOs.ce',
           },
+          {
+            name: 'UnraidRegistration',
+            path: '@/components/Registration.ce',
+          },
           {
             name: 'UnraidWanIpCheck',
             path: '@/components/WanIpCheck.ce',
diff --git a/web/pages/index.vue b/web/pages/index.vue
index 5cc92521f..0326bcd4b 100644
--- a/web/pages/index.vue
+++ b/web/pages/index.vue
@@ -32,11 +32,6 @@ onBeforeMount(() => {
           </h3>
           <AuthCe />
           <hr class="border-black dark:border-white">
-          <h3 class="text-lg font-semibold font-mono">
-            KeyActionsCe
-          </h3>
-          <KeyActionsCe />
-          <hr class="border-black dark:border-white">
           <h3 class="text-lg font-semibold font-mono">
             WanIpCheckCe
           </h3>
@@ -52,6 +47,11 @@ onBeforeMount(() => {
           </h3>
           <UpdateOsCe :restore-version="'6.11.2'" />
           <hr class="border-black dark:border-white">
+          <h3 class="text-lg font-semibold font-mono">
+            RegistrationCe
+          </h3>
+          <RegistrationCe :restore-version="'6.11.2'" />
+          <hr class="border-black dark:border-white">
           <h3 class="text-lg font-semibold font-mono">
             ModalsCe
           </h3>
diff --git a/web/pages/webComponents.vue b/web/pages/webComponents.vue
index 2200d1ad5..fcb42615a 100644
--- a/web/pages/webComponents.vue
+++ b/web/pages/webComponents.vue
@@ -30,11 +30,6 @@ onBeforeMount(() => {
       </h3>
       <unraid-auth />
       <hr class="border-black dark:border-white">
-      <h3 class="text-lg font-semibold font-mono">
-        KeyActionsCe
-      </h3>
-      <unraid-key-actions />
-      <hr class="border-black dark:border-white">
       <h3 class="text-lg font-semibold font-mono">
         WanIpCheckCe
       </h3>
@@ -50,6 +45,11 @@ onBeforeMount(() => {
       </h3>
       <unraid-update-os />
       <hr class="border-black dark:border-white">
+      <h3 class="text-lg font-semibold font-mono">
+        RegistrationCe
+      </h3>
+      <unraid-registration />
+      <hr class="border-black dark:border-white">
       <h3 class="text-lg font-semibold font-mono">
         ModalsCe
       </h3>
diff --git a/web/store/server.ts b/web/store/server.ts
index e0c58f810..1648c5305 100644
--- a/web/store/server.ts
+++ b/web/store/server.ts
@@ -87,6 +87,8 @@ export const useServerStore = defineStore('server', () => {
   const registered = ref<boolean>();
   const regGen = ref<number>(0);
   const regGuid = ref<string>('');
+  const regTm = ref<number>(0);
+  const regTo = ref<string>('');
   const site = ref<string>('');
   const state = ref<ServerState>();
   const theme = ref<Theme>();
@@ -720,6 +722,8 @@ export const useServerStore = defineStore('server', () => {
     if (typeof data?.uptime !== 'undefined') { uptime.value = data.uptime; }
     if (typeof data?.username !== 'undefined') { username.value = data.username; }
     if (typeof data?.wanFQDN !== 'undefined') { wanFQDN.value = data.wanFQDN; }
+    if (typeof data?.regTm !== 'undefined') { regTm.value = data.regTm; }
+    if (typeof data?.regTo !== 'undefined') { regTo.value = data.regTo; }
   };
 
   const mutateServerStateFromApi = (data: serverStateQuery): Server => {
@@ -835,6 +839,8 @@ export const useServerStore = defineStore('server', () => {
     description,
     deviceCount,
     expireTime,
+    flashProduct,
+    flashVendor,
     guid,
     keyfile,
     inIframe,
@@ -845,6 +851,8 @@ export const useServerStore = defineStore('server', () => {
     registered,
     regGen,
     regGuid,
+    regTm,
+    regTo,
     site,
     state,
     theme,
diff --git a/web/types/server.ts b/web/types/server.ts
index 4078f61cc..3315f398a 100644
--- a/web/types/server.ts
+++ b/web/types/server.ts
@@ -62,6 +62,8 @@ export interface Server {
   registered?: boolean;
   regGen?: number;
   regGuid?: string;
+  regTm?: number;
+  regTo?: string;
   site?: string;
   state?: ServerState;
   theme?: Theme | undefined;