update post api from controller

app/code/IpSupply/SyncOrder/Api/Repository.php

@@ -21,7 +21,7 @@ class Repository implements RepositoryInterface
 
         foreach ($headers as $key => $value) {
             $key = strtolower($key);
-            if ('api_key' === $key && $value === $apiKey) {
+            if ('api-key' === $key && $value === $apiKey) {
                 return true;
             }
         }

app/code/IpSupply/SyncOrder/Controller/Adminhtml/Config/Post.php

@@ -0,0 +1,49 @@
+<?php
+
+namespace IpSupply\SyncOrder\Controller\Adminhtml\Config;
+
+use IpSupply\SyncOrder\Config\Setter;
+use IpSupply\SyncOrder\Helper;
+use Magento\Framework\App\Action\HttpGetActionInterface;
+use Magento\Framework\App\Action\HttpPostActionInterface;
+use Magento\Framework\Controller\ResultFactory;
+
+/**
+ * Note: if getUrl('...') not working, pls disable "Add Secret Key to URLs"
+ * https://www.mageplaza.com/kb/magento-2-secure-your-admin.html
+ *
+ * @author
+ */
+class Post extends \Magento\Backend\App\Action implements HttpGetActionInterface, HttpPostActionInterface
+{
+    protected $_pageFactory;
+
+    public function __construct(
+        \Magento\Backend\App\Action\Context $context,
+        \Magento\Framework\View\Result\PageFactory $pageFactory
+    ) {
+        $this->_pageFactory = $pageFactory;
+        return parent::__construct($context);
+    }
+
+    public function execute()
+    {
+        $payload = $this->getRequest()->getPostValue();
+
+        unset($payload['form_key']);
+        \IpSupply\SyncOrder\Config\Setter::set(
+            path: 'config',
+            value: json_encode($payload),
+        );
+
+        if ($this->getRequest()->getParam('isAjax')) {
+            return Helper::responseOk([
+                'status' => true
+            ]);
+        } else {
+            $resultRedirect = $this->resultFactory->create(ResultFactory::TYPE_REDIRECT);
+            $resultRedirect->setPath('*/*/index');
+            return $resultRedirect;
+        }
+    }
+}

app/code/IpSupply/SyncOrder/view/adminhtml/templates/syncorder_config.phtml

@@ -1,10 +1,16 @@
 <div class="ipsupply">
-    <form id="form">
+    <form id="form" action="<?php echo $this->getUrl('*/*/post'); ?>">
+        <?= $this->getBlockHtml('formkey') ?>
         <?php foreach ($block->getForm() as $field) : ?>
-            <div class="form-group">
+        <div class="form-group">
-                <label for="<?= $field['name'] ?>"><?= $field['label'] ?></label>
+            <label for="<?= $field['name'] ?>"><?= $field['label'] ?></label>
-                <input type="text" id="<?= $field['name'] ?>" name="<?= $field['name'] ?>" value="<?= $field['value'] ?>" />
+            <input
-            </div>
+                type="text"
+                id="<?= $field['name'] ?>"
+                name="<?= $field['name'] ?>"
+                value="<?= $field['value'] ?>"
+            />
+        </div>
         <?php endforeach ?>
 
         <div class="form-group">
@@ -13,8 +19,6 @@
     </form>
 </div>
 <script>
-    const AJAX_URL = location.origin + "/rest/V1/syncorder/config"; // TODO: need /sync to /config
-
     require([
         "jquery",
         "mage/translate",
@@ -23,17 +27,17 @@
         "Magento_Ui/js/modal/alert",
         "Magento_Ui/js/modal/confirm",
         "Magento_Ui/js/modal/modal",
-    ], function($, $t, Component, ko, alertModal, confirmModal, modal) {
+    ], function ($, $t, Component, ko, alertModal, confirmModal, modal) {
         "use strict";
         $.ajaxSetup({
             contentType: "application/json;",
             headers: {
-                API_KEY: "<?= $block->getApiKey() ?>",
+                "API-KEY": "<?= $block->getApiKey() ?>",
             },
-            success: function(data) {
+            success: function (data) {
                 // do something before xhr
             },
-            fail: function(error) {
+            fail: function (error) {
                 console.error(error);
                 alertModal({
                     content: error.message,
@@ -42,35 +46,38 @@
         });
 
         // Event
-        $("#form").on("submit", function(e) {
+        $("#form").on("submit", function (e) {
             e.preventDefault();
             e.stopPropagation();
-            $(this)
+            $(this).find("[type=submit]").attr("disabled", "disabled");
-                .find('[type=submit]')
-                .attr('disabled', 'disabled');
 
-            $.post(AJAX_URL, $(this).serialize())
+            $.ajax({
-                .then(res => {
+                url: $(this).attr("action"),
+                type: "POST",
+                cache: false,
+                contentType: false,
+                processData: false,
+                data: new FormData(this),
+            })
+                .done((res) => {
                     if (res.status) {
                         alertModal({
-                            content: 'Successfully: Data saved!'
+                            content: "Successfully: Data saved!",
-                        })
+                        });
                     } else {
                         alertModal({
-                            content: 'Failed: Data not saved!'
+                            content: "Failed: Data not saved!",
-                        })
+                        });
                     }
                 })
-                .catch(() => {
+                .fail(() => {
                     alertModal({
-                        content: 'Fail saved!'
+                        content: "Fail saved!",
-                    })
+                    });
-                })
-                .then(() => {
-                    $(this)
-                        .find('[type=submit]')
-                        .removeAttr('disabled');
                 })
+                .always( () => {
+                    $(this).find("[type=submit]").removeAttr("disabled");
+                });
         });
     });
 </script>