refactor(web): cors error message

plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/Connect.page

@@ -87,14 +87,6 @@ div.shade-gray{background-color:#121510;margin-top:10px;padding:8px 0 3px 0}
 const hasMyUnraidNetCert = <?=($hasMyUnraidNetCert ? 'true' : 'false')?>;
 const wanAccessOrg = "<?=$myservers['remote']['wanaccess']?>";
 
-$('body').on('change keyup', '#UnraidNetSettings', function(data) {
-  validateExtraOrigins();
-  if (!isExtraOriginsValid) {
-    return $(this).find('.applyBtn').prop("disabled",true);
-  }
-  return $(this).find('.applyBtn').removeAttr('disabled');
-});
-
 function registerServer(button) {
 
     const $remoteAccessInput = $('#remoteAccess');
@@ -153,7 +145,6 @@ function registerServer(button) {
              // only allow 'yes' value when fields are enabled
             "local_2Fa": enableLocalT2fa ? $('#local2fa').val() : 'no',
             "remote_2Fa": enableRemoteT2fa ? $('#remote2fa').val()  : 'no',
-            "api_extraOrigins": validateExtraOrigins(),
         };
 
         $(button).prop("disabled", true).html("_(Applying)_ <i class=\"fa fa-spinner fa-spin\" aria-hidden=\"true\"></i>");
@@ -427,12 +418,24 @@ function buttonStateReset(newstate) {
 }
 $.post('/plugins/dynamix.my.servers/include/UpdateFlashBackup.php',{command:"status"});
 
+function applyExtraOrigins(button) {
+  const postobj = {
+      "#cfg": "/boot/config/plugins/dynamix.my.servers/myservers.cfg",
+      "api_extraOrigins": validateExtraOrigins(),
+  };
+
+  $(button).prop("disabled", true).html("_(Applying)_ <i class=\"fa fa-spinner fa-spin\" aria-hidden=\"true\"></i>");
+  $.post('/webGui/include/Dispatcher.php', postobj, function(_extraOriginsData) {
+    window.location.reload();
+  });
+}
+
 let isExtraOriginsValid = false;
 const validateExtraOrigins = () => {
   const val = $('.js-extraOrigins').val();
-  const $grandParent = $('.js-extraOrigins').parent().parent(); // setting here in this scope b/c it didn't work setting outside of this function
+  const $label = $('.js-extraOriginsLabel'); // setting here in this scope b/c it didn't work setting outside of this function
   if (!val) {
-    $grandParent.removeClass('red-text');
+    $label.removeClass('red-text');
     isExtraOriginsValid = true;
     return '';
   }
@@ -440,12 +443,12 @@ const validateExtraOrigins = () => {
   if (trimmed.slice(-1) === ',') trimmed = trimmed.slice(0, -1); // if last char is in string is a comma we need to remove it other wise `isCommaSeparatedURLs` will fail
   const isValid = isCommaSeparatedURLs(trimmed);
   if (!isValid) { // tell the user to fix it
-    $grandParent.addClass('red-text');
+    $label.addClass('red-text');
     isExtraOriginsValid = false;
     return '';
   }
   // remove any negative feedback
-  $grandParent.removeClass('red-text');
+  $label.removeClass('red-text');
   isExtraOriginsValid = true;
   return trimmed;
 };
@@ -453,6 +456,15 @@ const isCommaSeparatedURLs = input =>
   input
     .split(",")
     .every(value => /^(http|https):\/\/[^ "]+$/.test(value));
+
+$('body').on('change keyup', '.js-extraOrigins', function(data) {
+  console.debug('change keyup', data);
+  validateExtraOrigins();
+  if (!isExtraOriginsValid) {
+    return $('.js-extraOriginsApply').prop("disabled",true);
+  }
+  return $('.js-extraOriginsApply').removeAttr('disabled');
+});
 </script>
 
 <form id="UnraidNetSettings" markdown="1" name="UnraidNetSettings" method="POST" action="/update.htm" target="progressFrame">
@@ -591,11 +603,6 @@ _(Enable Transparent 2FA for Local Access)_<!-- do not index -->:
   </select> <span id="local2fa_remark" style="display:<?=($enableLocalT2fa ? 'none' : 'inline')?>;"><?=$localT2faRemark??''?></span>
 
 :myservers_local_t2fa_help:
-
-_(Unraid API extra origins)_<!-- do not index -->:
-: <input class="js-extraOrigins" name="extraOrigins" type="text" value="<?=$myservers['api']['extraOrigins']??''?>">
-
-:unraidnet_extraorigins_help:
 <?endif // end check for showT2Fa ?>
 
 &nbsp;
@@ -666,7 +673,6 @@ _(Flash backup)_:
 
 </div>
 </form>
-</div><!-- end Flash Backup section -->
 <script>
 changeRemoteAccess($('#remoteAccess'));
 var flashbackupsub = new NchanSubscriber('/sub/flashbackup');
@@ -683,6 +689,7 @@ $(function() {
 });
 </script>
 <?endif // end show flash backup form ?>
+</div><!-- end Flash Backup section -->
 
 <!-- start unraid-api section -->
 <div markdown="1" class="js-unraidApiLogs <?=$shade?>">
@@ -692,6 +699,17 @@ $(function() {
 _(Account status)_:
 : <unraid-i18n-host><unraid-auth></unraid-auth></unraid-i18n-host>
 
+<!-- start extra origins -->
+<span id="extraOriginsSettings" class="js-extraOriginsLabel">_(Unraid API extra origins)_:</span>
+: <input class="js-extraOrigins" name="extraOrigins" type="text" value="<?=$myservers['api']['extraOrigins']??''?>">
+
+:unraidnet_extraorigins_help:
+
+&nbsp;
+: <button class="js-extraOriginsApply" type="button" onclick="applyExtraOrigins(this)" disabled="disabled">_(Apply)_</button>
+<!-- // end extra origins -->
+
+
 <?if($isRegistered):?>
 _(Connected to Unraid Connect Cloud)_: 
 <?if($isConnected):?>

web/store/errors.ts

@@ -11,7 +11,7 @@ import type { Server } from '~/types/server';
  */
 setActivePinia(createPinia());
 
-export type ErrorType = 'account' | 'callback' | 'installKey' | 'server' | 'serverState' | 'unraidApiState';
+export type ErrorType = 'account' | 'callback' | 'installKey' | 'server' | 'serverState' | 'unraidApiGQL' | 'unraidApiState';
 export interface Error {
   actions?: ButtonProps[];
   debugServer?: Server;

web/store/unraidApi.ts

@@ -3,7 +3,7 @@ import { onError } from '@apollo/client/link/error';
 import { RetryLink } from '@apollo/client/link/retry';
 import { GraphQLWsLink } from '@apollo/client/link/subscriptions';
 import { getMainDefinition } from '@apollo/client/utilities';
-import { ArrowPathIcon } from '@heroicons/vue/24/solid';
+import { ArrowPathIcon, CogIcon } from '@heroicons/vue/24/solid';
 import { provideApolloClient } from '@vue/apollo-composable';
 // import { logErrorMessages } from '@vue/apollo-util';
 import { createClient } from 'graphql-ws';
@@ -11,7 +11,7 @@ import { defineStore, createPinia, setActivePinia } from 'pinia';
 import { UserProfileLink } from 'types/userProfile';
 
 import { WebguiUnraidApiCommand } from '~/composables/services/webgui';
-import { GRAPHQL } from '~/helpers/urls';
+import { GRAPHQL, SETTINGS_MANAGMENT_ACCESS } from '~/helpers/urls';
 import { useErrorsStore } from '~/store/errors';
 import { useServerStore } from '~/store/server';
 
@@ -95,6 +95,21 @@ export const useUnraidApiStore = defineStore('unraidApi', () => {
           }
           if (error.error.message && error.error.message.includes(ERROR_CORS_403)) {
             prioritizeCorsError = true;
+            const msg = `<p>The CORS policy for the unraid-api does not allow access from the specified origin.</p><p>If you are using a reverse proxy, you need to copy your origin <strong class="font-mono"><em>${window.location.origin}</em></strong> and paste it into the "Extra Origins" list in the Connect settings.</p>`;
+            errorsStore.setError({
+              heading: 'Unraid API • CORS Error',
+              message: msg,
+              level: 'error',
+              ref: 'unraidApiCorsError',
+              type: 'unraidApiGQL',
+              actions: [
+                {
+                  href: `${SETTINGS_MANAGMENT_ACCESS.toString()}#extraOriginsSettings`,
+                  icon: CogIcon,
+                  text: 'Go to Connect Settings',
+                }
+              ],
+            });
           }
           return error.message;
         });