From 2fbd2f1304a490ac4e91e30859454434bd28de04 Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Mon, 7 Aug 2023 15:03:16 -0700
Subject: [PATCH] refactor: urls

---
 components/DownloadApiLogs.ce.vue           |  8 ++++----
 components/UserProfile/CallbackFeedback.vue |  2 +-
 components/UserProfile/DropdownContent.vue  |  6 +++---
 components/UserProfile/Promo.vue            |  3 ++-
 helpers/urls.ts                             | 22 +++++++++++----------
 locales/_template.json                      |  2 +-
 locales/en_US.json                          |  2 +-
 locales/ja.json                             |  2 +-
 store/account.ts                            | 15 +++++++-------
 store/callback.ts                           |  8 ++++++++
 store/purchase.ts                           | 12 ++++++-----
 store/server.ts                             |  4 ++--
 12 files changed, 50 insertions(+), 36 deletions(-)

diff --git a/components/DownloadApiLogs.ce.vue b/components/DownloadApiLogs.ce.vue
index 3d4d4c00b..6f58a88b9 100644
--- a/components/DownloadApiLogs.ce.vue
+++ b/components/DownloadApiLogs.ce.vue
@@ -12,7 +12,7 @@ const { t } = useI18n();
 
 const { apiKey } = storeToRefs(useServerStore());
 
-const downloadUrl = computed(() => new URL(`/graphql/api/logs?apiKey=${apiKey.value}`, DEV_GRAPH_URL || window.location.origin));
+const downloadUrl = computed(() => new URL(`/graphql/api/logs?apiKey=${apiKey.value}`, DEV_GRAPH_URL.toString() || window.location.origin));
 </script>
 
 <template>
@@ -35,15 +35,15 @@ const downloadUrl = computed(() => new URL(`/graphql/api/logs?apiKey=${apiKey.va
       </div>
 
       <div class="flex flex-row items-baseline gap-8px">
-        <a :href="CONNECT_FORUMS" target="_blank" rel="noopener noreferrer" class="text-[#486dba] hover:text-[#3b5ea9] focus:text-[#3b5ea9] hover:underline focus:underline inline-flex flex-row items-center justify-start gap-8px">
+        <a :href="CONNECT_FORUMS.toString()" target="_blank" rel="noopener noreferrer" class="text-[#486dba] hover:text-[#3b5ea9] focus:text-[#3b5ea9] hover:underline focus:underline inline-flex flex-row items-center justify-start gap-8px">
           {{ t('Unraid Connect Forums') }}
           <ArrowTopRightOnSquareIcon class="w-16px" />
         </a>
-        <a :href="DISCORD" target="_blank" rel="noopener noreferrer" class="text-[#486dba] hover:text-[#3b5ea9] focus:text-[#3b5ea9] hover:underline focus:underline inline-flex flex-row items-center justify-start gap-8px">
+        <a :href="DISCORD.toString()" target="_blank" rel="noopener noreferrer" class="text-[#486dba] hover:text-[#3b5ea9] focus:text-[#3b5ea9] hover:underline focus:underline inline-flex flex-row items-center justify-start gap-8px">
           {{ t('Unraid Discord') }}
           <ArrowTopRightOnSquareIcon class="w-16px" />
         </a>
-        <a :href="CONTACT" target="_blank" rel="noopener noreferrer" class="text-[#486dba] hover:text-[#3b5ea9] focus:text-[#3b5ea9] hover:underline focus:underline inline-flex flex-row items-center justify-start gap-8px">
+        <a :href="CONTACT.toString()" target="_blank" rel="noopener noreferrer" class="text-[#486dba] hover:text-[#3b5ea9] focus:text-[#3b5ea9] hover:underline focus:underline inline-flex flex-row items-center justify-start gap-8px">
           {{ t('Unraid Contact Page') }}
           <ArrowTopRightOnSquareIcon class="w-16px" />
         </a>
diff --git a/components/UserProfile/CallbackFeedback.vue b/components/UserProfile/CallbackFeedback.vue
index 9dd4d6d19..0594bacff 100644
--- a/components/UserProfile/CallbackFeedback.vue
+++ b/components/UserProfile/CallbackFeedback.vue
@@ -252,7 +252,7 @@ const accountActionStatusCopy = computed((): { text: string; } => {
           />
           <BrandButton
             v-else
-            :href="PLUGIN_SETTINGS"
+            :href="PLUGIN_SETTINGS.toString()"
             :icon="CogIcon"
             :text="t('Configure Connect Features')"
             class="grow-0"
diff --git a/components/UserProfile/DropdownContent.vue b/components/UserProfile/DropdownContent.vue
index 09027f541..65d91175f 100644
--- a/components/UserProfile/DropdownContent.vue
+++ b/components/UserProfile/DropdownContent.vue
@@ -26,20 +26,20 @@ const links = computed(():UserProfileLink[] => {
           {
             emphasize: true,
             external: true,
-            href: CONNECT_DASHBOARD,
+            href: CONNECT_DASHBOARD.toString(),
             icon: ArrowTopRightOnSquareIcon,
             text: props.t('Go to Connect'),
             title: props.t('Opens Connect in new tab'),
           },
           {
             external: true,
-            href: ACCOUNT,
+            href: ACCOUNT.toString(),
             icon: ArrowTopRightOnSquareIcon,
             text: props.t('Manage Unraid.net Account'),
             title: props.t('Manage Unraid.net Account in new tab'),
           },
           {
-            href: PLUGIN_SETTINGS,
+            href: PLUGIN_SETTINGS.toString(),
             icon: CogIcon,
             text: props.t('Settings'),
             title: props.t('Go to Connect plugin settings'),
diff --git a/components/UserProfile/Promo.vue b/components/UserProfile/Promo.vue
index ab28bf459..e914c82c7 100644
--- a/components/UserProfile/Promo.vue
+++ b/components/UserProfile/Promo.vue
@@ -8,6 +8,7 @@ import { Switch, SwitchGroup, SwitchLabel } from '@headlessui/vue';
 import { ArrowTopRightOnSquareIcon } from '@heroicons/vue/24/solid';
 
 import useInstallPlugin from '~/composables/installPlugin';
+import { CONNECT_DOCS } from '~/helpers/urls';
 import { usePromoStore } from '~/store/promo';
 import type { UserProfilePromoFeature } from '~/types/userProfile';
 import 'tailwindcss/tailwind.css';
@@ -112,7 +113,7 @@ const { install } = useInstallPlugin();
         </button>
         <div>
           <a
-            href="https://docs.unraid.net/category/unraid-connect"
+            :href="CONNECT_DOCS.toString()"
             class="text-12px tracking-wide inline-flex flex-row items-center justify-start gap-8px mx-8px opacity-60 hover:opacity-100 focus:opacity-100 underline transition"
             target="_blank"
             rel="noopener noreferrer"
diff --git a/helpers/urls.ts b/helpers/urls.ts
index 8ff7f64dc..74093d810 100644
--- a/helpers/urls.ts
+++ b/helpers/urls.ts
@@ -1,27 +1,29 @@
 /**
  * @todo setup .env
  */
-const ACCOUNT = 'https://localhost:8008';
-const CONNECT_DOCS = 'https://docs.unraid.net/category/unraid-connect';
-const CONNECT_DASHBOARD = 'https://connect.myunraid.net';
-const CONNECT_FORUMS = 'https://forums.unraid.net/forum/94-connect-plugin-support/';
-const CONTACT = 'https://unraid.net/contact';
+const ACCOUNT = new URL('https://localhost:8008');
+const ACCOUNT_CALLBACK = new URL('c', ACCOUNT);
+const CONNECT_DOCS = new URL('https://docs.unraid.net/category/unraid-connect');
+const CONNECT_DASHBOARD = new URL('https://connect.myunraid.net');
+const CONNECT_FORUMS = new URL('https://forums.unraid.net/forum/94-connect-plugin-support/');
+const CONTACT = new URL('https://unraid.net/contact');
 const DEV_GRAPH_URL = '';
-const DISCORD = 'https://discord.gg/unraid';
-const PURCHASE = 'https://unraid.ddev.site/callback';
+const DISCORD = new URL('https://discord.gg/unraid');
+const PURCHASE_CALLBACK = new URL('https://unraid.ddev.site/c');
 
-const SETTINGS_MANAGMENT_ACCESS = '/Settings/ManagementAccess';
-const PLUGIN_SETTINGS = `${SETTINGS_MANAGMENT_ACCESS}#UnraidNetSettings`;
+const SETTINGS_MANAGMENT_ACCESS = new URL('/Settings/ManagementAccess', window.location.origin);
+const PLUGIN_SETTINGS = new URL('#UnraidNetSettings', SETTINGS_MANAGMENT_ACCESS);
 
 export {
   ACCOUNT,
+  ACCOUNT_CALLBACK,
   CONNECT_DASHBOARD,
   CONNECT_DOCS,
   CONNECT_FORUMS,
   CONTACT,
   DEV_GRAPH_URL,
   DISCORD,
-  PURCHASE,
+  PURCHASE_CALLBACK,
   PLUGIN_SETTINGS,
   SETTINGS_MANAGMENT_ACCESS,
 };
diff --git a/locales/_template.json b/locales/_template.json
index aa6b35fed..30ddce248 100644
--- a/locales/_template.json
+++ b/locales/_template.json
@@ -120,7 +120,7 @@
   "Sign In with Unraid.net Account": "",
   "Sign Out of Unraid.net": "",
   "Extend Trial": "",
-  "Start Free 30 day Trial": "",
+  "Start Free 30 Day Trial": "",
   "Go to Management Access Now": "",
   "Contact Support": "",
   "Learn More": "",
diff --git a/locales/en_US.json b/locales/en_US.json
index 4ff1389a6..7a2c1e8a0 100644
--- a/locales/en_US.json
+++ b/locales/en_US.json
@@ -120,7 +120,7 @@
   "Sign In with Unraid.net Account": "Sign In with Unraid.net Account",
   "Sign Out of Unraid.net": "Sign Out of Unraid.net",
   "Extend Trial": "Extend Trial",
-  "Start Free 30 day Trial": "Start Free 30 day Trial",
+  "Start Free 30 Day Trial": "Start Free 30 Day Trial",
   "Go to Management Access Now": "Go to Management Access Now",
   "Contact Support": "Contact Support",
   "Learn More": "Learn More",
diff --git a/locales/ja.json b/locales/ja.json
index 2f5c072b9..3f020d1db 100644
--- a/locales/ja.json
+++ b/locales/ja.json
@@ -120,7 +120,7 @@
   "Sign In with Unraid.net Account": "Unraid.net アカウントでサインインする",
   "Sign Out of Unraid.net": "Unraid.net からサインアウトする",
   "Extend Trial": "トライアルの延長",
-  "Start Free 30 day Trial": "30 日間の無料トライアルを開始する",
+  "Start Free 30 Day Trial": "30 日間の無料トライアルを開始する",
   "Go to Management Access Now": "今すぐ管理アクセスに移動",
   "Contact Support": "サポート問い合わせ先",
   "Learn More": "もっと詳しく知る",
diff --git a/store/account.ts b/store/account.ts
index 23b683290..a15582eef 100644
--- a/store/account.ts
+++ b/store/account.ts
@@ -1,9 +1,10 @@
 import { defineStore, createPinia, setActivePinia } from 'pinia';
+
 import { useCallbackStore } from '~/store/callbackActions';
 import { useErrorsStore } from '~/store/errors';
 import { useServerStore } from '~/store/server';
 import { WebguiUpdate } from '~/composables/services/webgui';
-import { ACCOUNT } from '~/helpers/urls';
+import { ACCOUNT_CALLBACK } from '~/helpers/urls';
 import type { ExternalSignIn, ExternalSignOut } from '~/store/callback';
 /**
  * @see https://stackoverflow.com/questions/73476371/using-pinia-with-vue-js-web-components
@@ -29,7 +30,7 @@ export const useAccountStore = defineStore('account', () => {
   // Actions
   const recover = () => {
     console.debug('[accountStore.recover]');
-    callbackStore.send(`${ACCOUNT}/connect`, [{
+    callbackStore.send(ACCOUNT_CALLBACK.toString(), [{
       server: {
         ...serverStore.serverAccountPayload,
       },
@@ -38,7 +39,7 @@ export const useAccountStore = defineStore('account', () => {
   };
   const replace = () => {
     console.debug('[accountStore.replace]');
-    callbackStore.send(`${ACCOUNT}/connect`, [{
+    callbackStore.send(ACCOUNT_CALLBACK.toString(), [{
       server: {
         ...serverStore.serverAccountPayload,
       },
@@ -47,7 +48,7 @@ export const useAccountStore = defineStore('account', () => {
   };
   const signIn = () => {
     console.debug('[accountStore.signIn]');
-    callbackStore.send(`${ACCOUNT}/connect`, [{
+    callbackStore.send(ACCOUNT_CALLBACK.toString(), [{
       server: {
         ...serverStore.serverAccountPayload,
       },
@@ -56,7 +57,7 @@ export const useAccountStore = defineStore('account', () => {
   };
   const signOut = () => {
     console.debug('[accountStore.accountStore.signOut]');
-    callbackStore.send(`${ACCOUNT}/connect`, [{
+    callbackStore.send(ACCOUNT_CALLBACK.toString(), [{
       server: {
         ...serverStore.serverAccountPayload,
       },
@@ -65,7 +66,7 @@ export const useAccountStore = defineStore('account', () => {
   };
   const trialExtend = () => {
     console.debug('[accountStore.accountStore.trialExtend]');
-    callbackStore.send(`${ACCOUNT}/connect`, [{
+    callbackStore.send(ACCOUNT_CALLBACK.toString(), [{
       server: {
         ...serverStore.serverAccountPayload,
       },
@@ -74,7 +75,7 @@ export const useAccountStore = defineStore('account', () => {
   };
   const trialStart = () => {
     console.debug('[accountStore.accountStore.trialStart]');
-    callbackStore.send(`${ACCOUNT}/connect`, [{
+    callbackStore.send(ACCOUNT_CALLBACK.toString(), [{
       server: {
         ...serverStore.serverAccountPayload,
       },
diff --git a/store/callback.ts b/store/callback.ts
index c34bd2637..9bee116a0 100644
--- a/store/callback.ts
+++ b/store/callback.ts
@@ -1,3 +1,11 @@
+/**
+ * This file is used to handle callbacks from the server.
+ * It is used in the following apps:
+ * - auth
+ * - craft-unraid
+ * - connect @todo
+ * - connect-components
+ */
 import AES from 'crypto-js/aes';
 import Utf8 from 'crypto-js/enc-utf8';
 import { defineStore, createPinia, setActivePinia } from 'pinia';
diff --git a/store/purchase.ts b/store/purchase.ts
index 387b515e8..da4a5ae43 100644
--- a/store/purchase.ts
+++ b/store/purchase.ts
@@ -1,6 +1,8 @@
 import { defineStore, createPinia, setActivePinia } from 'pinia';
-import { useCallbackStore } from './callbackActions';
-import { useServerStore } from './server';
+
+import { PURCHASE_CALLBACK } from '~/helpers/urls';
+import { useCallbackStore } from '~/store/callbackActions';
+import { useServerStore } from '~/store/server';
 
 /**
  * @see https://stackoverflow.com/questions/73476371/using-pinia-with-vue-js-web-components
@@ -14,7 +16,7 @@ export const usePurchaseStore = defineStore('purchase', () => {
 
   const redeem = () => {
     console.debug('[redeem]');
-    callbackStore.send('https://unraid.ddev.site/callback', [{
+    callbackStore.send(PURCHASE_CALLBACK.toString(), [{
       server: {
         ...serverStore.serverPurchasePayload,
       },
@@ -23,7 +25,7 @@ export const usePurchaseStore = defineStore('purchase', () => {
   };
   const purchase = () => {
     console.debug('[purchase]');
-    callbackStore.send('https://unraid.ddev.site/callback', [{
+    callbackStore.send(PURCHASE_CALLBACK.toString(), [{
       server: {
         ...serverStore.serverPurchasePayload,
       },
@@ -32,7 +34,7 @@ export const usePurchaseStore = defineStore('purchase', () => {
   };
   const upgrade = () => {
     console.debug('[upgrade]');
-    callbackStore.send('https://unraid.ddev.site/callback', [{
+    callbackStore.send(PURCHASE_CALLBACK.toString(), [{
       server: {
         ...serverStore.serverPurchasePayload,
       },
diff --git a/store/server.ts b/store/server.ts
index e46f988b5..a385746c1 100644
--- a/store/server.ts
+++ b/store/server.ts
@@ -284,7 +284,7 @@ export const useServerStore = defineStore('server', () => {
     external: true,
     icon: KeyIcon,
     name: 'trialStart',
-    text: 'Start Free 30 day Trial',
+    text: 'Start Free 30 Day Trial',
   };
 
   let messageEGUID = '';
@@ -622,7 +622,7 @@ export const useServerStore = defineStore('server', () => {
       ? {
           actions: [
             {
-              href: SETTINGS_MANAGMENT_ACCESS,
+              href: SETTINGS_MANAGMENT_ACCESS.toString(),
               icon: CogIcon,
               text: 'Go to Management Access Now',
             },