Merge pull request #5 from frak-id/remove-live-preview-generate-js-backend

Remove live preview and generate JS on backend only

Author: KONFeature

admin/class-frak-admin.php

@@ -36,11 +36,6 @@ public function add_admin_menu() {
     public function register_settings() {
         register_setting('frak_settings', 'frak_app_name');
         register_setting('frak_settings', 'frak_logo_url');
-        register_setting('frak_settings', 'frak_custom_config', array(
-            'sanitize_callback' => function($input) {
-                return stripslashes($input);
-            }
-        ));
         register_setting('frak_settings', 'frak_enable_purchase_tracking');
         register_setting('frak_settings', 'frak_enable_floating_button');
         register_setting('frak_settings', 'frak_show_reward');
@@ -178,7 +173,6 @@ private function save_settings() {
             }
         }
 
-        $custom_config = stripslashes($_POST['frak_custom_config']);
         $enable_tracking = isset($_POST['frak_enable_purchase_tracking']) ? 1 : 0;
         $enable_button = isset($_POST['frak_enable_floating_button']) ? 1 : 0;
         $show_reward = isset($_POST['frak_show_reward']) ? 1 : 0;
@@ -189,14 +183,29 @@ private function save_settings() {
         // Handle modal i18n
         $modal_i18n = isset($_POST['frak_modal_i18n']) ? $_POST['frak_modal_i18n'] : array();
         if (is_array($modal_i18n)) {
+            // Sanitize each value
+            foreach ($modal_i18n as $key => $value) {
+                // For text areas, preserve line breaks but sanitize content
+                if (in_array($key, ['sharing.text', 'sdk.wallet.login.text_sharing', 'sdk.wallet.login.text_referred'])) {
+                    $modal_i18n[$key] = sanitize_textarea_field($value);
+                } else {
+                    $modal_i18n[$key] = sanitize_text_field($value);
+                }
+            }
+            
+            // Remove empty values
             $modal_i18n = array_filter($modal_i18n, function($value) {
                 return $value !== '';
             });
+            
+            // Handle special case: if text_referred is set, also set it as text
+            if (isset($modal_i18n['sdk.wallet.login.text_referred'])) {
+                $modal_i18n['sdk.wallet.login.text'] = $modal_i18n['sdk.wallet.login.text_referred'];
+            }
         }
 
         update_option('frak_app_name', $app_name);
         update_option('frak_logo_url', $logo_url);
-        update_option('frak_custom_config', $custom_config);
         update_option('frak_enable_purchase_tracking', $enable_tracking);
         update_option('frak_enable_floating_button', $enable_button);
         update_option('frak_show_reward', $show_reward);
@@ -205,21 +214,57 @@ private function save_settings() {
         update_option('frak_modal_language', $modal_language);
         update_option('frak_modal_i18n', json_encode($modal_i18n));
 
-        // Update config last modified timestamp for cache busting
-        if (class_exists('Frak_Config_Endpoint')) {
-            Frak_Config_Endpoint::update_last_modified();
-        }
+        // Clear any caches to ensure the new configuration is loaded
+        $this->clear_caches();
 
     }
 
+    /**
+     * Clear caches from popular caching plugins
+     */
+    private function clear_caches() {
+        // WP Rocket
+        if (function_exists('rocket_clean_domain')) {
+            rocket_clean_domain();
+        }
+        
+        // W3 Total Cache
+        if (function_exists('w3tc_flush_all')) {
+            w3tc_flush_all();
+        }
+        
+        // WP Super Cache
+        if (function_exists('wp_cache_clear_cache')) {
+            wp_cache_clear_cache();
+        }
+        
+        // WP Fastest Cache
+        if (class_exists('WpFastestCache') && method_exists('WpFastestCache', 'deleteCache')) {
+            $wpfc = new WpFastestCache();
+            $wpfc->deleteCache(true);
+        }
+        
+        // LiteSpeed Cache
+        if (class_exists('LiteSpeed\Purge')) {
+            LiteSpeed\Purge::purge_all();
+        }
+        
+        // Autoptimize
+        if (class_exists('autoptimizeCache') && method_exists('autoptimizeCache', 'clearall')) {
+            autoptimizeCache::clearall();
+        }
+        
+        // Clear WordPress object cache
+        wp_cache_flush();
+    }
+
     private function render_settings_page() {
         // Get default values from WordPress site info
         $default_app_name = get_bloginfo('name');
         $default_logo_url = $this->get_site_icon_url();
 
         $app_name = get_option('frak_app_name', $default_app_name);
         $logo_url = get_option('frak_logo_url', $default_logo_url);
-        $custom_config = get_option('frak_custom_config', '');
         // Auto-enable WooCommerce tracking if WooCommerce is active and setting hasn't been configured yet
         $enable_tracking_option = get_option('frak_enable_purchase_tracking', null);
         if ($enable_tracking_option === null && class_exists('WooCommerce')) {
@@ -235,10 +280,6 @@ private function render_settings_page() {
         $modal_language = get_option('frak_modal_language', 'default');
         $modal_i18n = json_decode(get_option('frak_modal_i18n', '{}'), true);
 
-        if (empty($custom_config)) {
-            $custom_config = $this->get_default_config($app_name, $logo_url);
-        }
-        
         include FRAK_PLUGIN_DIR . 'admin/views/settings-page.php';
     }
 
@@ -263,66 +304,6 @@ private function get_site_icon_url() {
         return '';
     }
 
-    private function get_default_config($app_name, $logo_url) {
-        $modal_language = get_option('frak_modal_language', 'default');
-        $floating_button_position = get_option('frak_floating_button_position', 'right');
-        $modal_i18n = get_option('frak_modal_i18n', '{}');
-        
-        // Handle language setting
-        $lang_code = $modal_language === 'default' ? 'undefined' : "'{$modal_language}'";
-        
-        return <<<JS
-let logoUrl = '{$logo_url}';
-const lang = {$lang_code};
-
-let i18n = {};
-try {
-    i18n = JSON.parse('{$modal_i18n}'.replace(
-        /&amp;|&lt;|&gt;|&#39;|&quot;/g,
-        tag =>
-          ({
-            '&amp;': '&',
-            '&lt;': '<',
-            '&gt;': '>',
-            '&#39;': "'",
-            '&quot;': '"'
-          }[tag] || tag)
-    )) || {};
-} catch (error) {
-    console.error('Error parsing i18n customizations:', error);
-}
-
-window.FrakSetup = {
-    config: { 
-        walletUrl: 'https://wallet.frak.id', 
-        metadata: { 
-            name: '{$app_name}', 
-            lang, 
-            logoUrl 
-        }, 
-        customizations: { i18n }, 
-        domain: window.location.host 
-    },
-    modalConfig: { 
-        login: { 
-            allowSso: true, 
-            ssoMetadata: { 
-                logoUrl, 
-                homepageLink: window.location.host 
-            } 
-        } 
-    },
-    modalShareConfig: { 
-        link: window.location.href 
-    },
-    modalWalletConfig: { 
-        metadata: { 
-            position: '{$floating_button_position}' 
-        } 
-    },
-};
-JS;
-    }
 
     private function handle_logo_upload($file) {
         // Check file type

admin/css/admin.css

@@ -131,11 +131,6 @@
     color: #dc3232;
 }
 
-/* Advanced configuration textarea */
-#frak_custom_config {
-    background: #f0f0f1;
-    border: 1px solid #8c8f94;
-}
 
 /* Button spacing */
 .button + .button {
@@ -154,7 +149,7 @@
 }
 
 .frak-i18n-table td:first-child {
-    width: 150px;
+    width: 250px;
     font-weight: 600;
     color: #23282d;
 }
@@ -163,6 +158,40 @@
     width: 100%;
 }
 
+.frak-i18n-table textarea {
+    width: 100%;
+    resize: vertical;
+}
+
+/* i18n group styling */
+.frak-i18n-group {
+    margin-bottom: 20px;
+    padding: 15px;
+    background: #f5f5f5;
+    border: 1px solid #e0e0e0;
+    border-radius: 3px;
+}
+
+.frak-i18n-group h4 {
+    margin: 0 0 10px 0;
+    color: #23282d;
+    font-size: 14px;
+    font-weight: 600;
+}
+
+.frak-i18n-group .description {
+    font-size: 13px;
+    color: #666;
+    line-height: 1.5;
+}
+
+.frak-i18n-group .description code {
+    background: #e0e0e0;
+    padding: 2px 4px;
+    border-radius: 3px;
+    font-size: 12px;
+}
+
 /* Logo preview */
 .frak-logo-preview {
     margin-top: 10px;

admin/js/admin.js

@@ -1,91 +1,4 @@
 jQuery(document).ready(function($) {
-    var editor;
-    
-    // Initialize code editor if available
-    if (typeof wp.codeEditor !== 'undefined' && $('#frak_custom_config').length) {
-        var editorSettings = wp.codeEditor.defaultSettings ? _.clone(wp.codeEditor.defaultSettings) : {};
-        editorSettings.codemirror = _.extend({}, editorSettings.codemirror, {
-            indentUnit: 4,
-            tabSize: 4,
-            mode: 'javascript',
-            lineNumbers: true,
-            matchBrackets: true,
-            autoCloseBrackets: true,
-            extraKeys: {"Ctrl-Space": "autocomplete"},
-            theme: 'default'
-        });
-        editor = wp.codeEditor.initialize($('#frak_custom_config'), editorSettings);
-    }
-    
-    // Update config function
-    function updateConfig() {
-        if (!editor) return;
-        
-        var appName = $('#frak_app_name').val();
-        var logoUrl = $('#frak_logo_url').val();
-        var position = $('#frak_floating_button_position').val();
-        var modalLang = $('#frak_modal_language').val();
-        var currentConfig = editor.codemirror.getValue();
-        
-        // Collect i18n values
-        var i18nValues = {};
-        $('.frak-i18n-table input').each(function() {
-            var $input = $(this);
-            var key = $input.attr('name').replace('frak_modal_i18n[', '').replace(']', '');
-            var value = $input.val();
-            if (value) {
-                i18nValues[key] = value;
-            }
-        });
-        
-        // Update app name
-        currentConfig = currentConfig.replace(
-            /(metadata:\s*{\s*name:\s*")[^"]*(")/,
-            '$1' + appName + '$2'
-        );
-        
-        // Update logo URL - both in let declaration and in objects
-        currentConfig = currentConfig.replace(
-            /(let logoUrl = ')[^']*(')/,
-            '$1' + logoUrl + '$2'
-        );
-        
-        // Update language - handle both string and variable format
-        if (modalLang === 'default') {
-            // Replace with undefined (variable)
-            currentConfig = currentConfig.replace(
-                /(const lang = )[^;]+/,
-                '$1undefined'
-            );
-        } else {
-            // Replace with quoted string
-            currentConfig = currentConfig.replace(
-                /(const lang = )[^;]+/,
-                "$1'" + modalLang + "'"
-            );
-        }
-        
-        // Update i18n object
-        var i18nJson = JSON.stringify(i18nValues, null, 0);
-        // Find the i18n parsing section and update it
-        var i18nMatch = currentConfig.match(/let i18n = {};\s*try {[\s\S]*?} catch/);
-        if (i18nMatch) {
-            // Replace the entire i18n section
-            var newI18nSection = "let i18n = {};\ntry {\n    i18n = JSON.parse('" + 
-                i18nJson.replace(/'/g, "\\'") + 
-                "'.replace(\n        /&amp;|&lt;|&gt;|&#39;|&quot;/g,\n        tag =>\n          ({\n            '&amp;': '&',\n            '&lt;': '<',\n            '&gt;': '>',\n            '&#39;': \"'\",\n            '&quot;': '"'\n          }[tag] || tag)\n    )) || {};\n} catch";
-            currentConfig = currentConfig.replace(/let i18n = {};\s*try {[\s\S]*?} catch/, newI18nSection);
-        }
-        
-        // Update floating button position
-        currentConfig = currentConfig.replace(
-            /(modalWalletConfig:\s*{[\s\S]*?metadata:\s*{[\s\S]*?position:\s*")[^"]*(")/,
-            '$1' + position + '$2'
-        );
-        
-        editor.codemirror.setValue(currentConfig);
-    }
-    
     // Toggle floating button settings
     function toggleFloatingButtonSettings() {
         var enabled = $('#frak_enable_floating_button').is(':checked');
@@ -140,14 +53,10 @@ jQuery(document).ready(function($) {
     });
 
     // Bind events
-    $('#frak_app_name, #frak_logo_url, #frak_floating_button_position, #frak_modal_language').on('input change', updateConfig);
     $('#frak_enable_floating_button').on('change', toggleFloatingButtonSettings);
     $('#frak_logo_file').on('change', handleLogoFileSelect);
     $('#frak_logo_url').on('input', handleLogoUrlChange);
 
-    // Bind i18n input events
-    $('.frak-i18n-table input').on('input', updateConfig);
-    
     // Initialize toggles
     toggleFloatingButtonSettings();