@necrolab/dashboard 0.4.3

package/src/views/Editor.vue

@@ -0,0 +1,785 @@
+<template>
+    <div>
+        <!-- Heading -->
+        <GearIcon class="w-5 cursor-pointer" @click="ui.toggleModal('quick-settings')" />
+        <h4 class="text-white text-xl font-bold mb-5 pt-5 flex gap-2 items-center">
+            Editor <img src="@/assets/img/pencil.svg" />
+        </h4>
+
+        <div class="card-dark p-2">
+            <div v-if="ui.profile.admin">
+                <h5 class="text-white text-xl font-bold flex gap-x-3 mb-3">Admin Editor</h5>
+                <div class="flex justify-between items-center">
+                    <div class="w-64 flex">
+                        <div class="relative flex-grow">
+                            <Dropdown
+                                class="bg-dark-500 border-2 border-r-0 border-dark-550 admin-file-dropdown w-full"
+                                default="Select a file"
+                                :onClick="(f) => loadFile(f)"
+                                :options="availableFiles"
+                                :allowDefault="false"
+                                rightAmount="right-1"
+                            />
+                        </div>
+                        <button
+                            class="refresh-button flex items-center justify-center w-10 h-10 text-white bg-dark-400 rounded-r-lg border-2 border-dark-550 border-l-0"
+                            @click="loadAvailableFiles()"
+                            title="Refresh file list"
+                        >
+                            <ReloadIcon class="refresh-icon" />
+                        </button>
+                    </div>
+                    <!-- Admin editor buttons moved here -->
+                    <div v-if="textEditorVisible" class="flex gap-x-2" style="margin-right: 1px;">
+                        <button class="btn-action" @click="format()" v-if="isJsonFile()">
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                width="16"
+                                height="16"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="2"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            >
+                                <path d="M21 10H7" />
+                                <path d="M21 6H3" />
+                                <path d="M21 14H3" />
+                                <path d="M21 18H7" />
+                            </svg>
+                            <span>Format</span>
+                        </button>
+                        <button class="btn-action" @click="saveAll">
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                width="16"
+                                height="16"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="2"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            >
+                                <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" />
+                                <polyline points="17 21 17 13 7 13 7 21" />
+                                <polyline points="7 3 7 8 15 8" />
+                            </svg>
+                            <span>Save File</span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <transition name="fade">
+                <div v-if="textEditorVisible" class="my-3 relative">
+                    <div class="pb-4">
+                        <!-- Syntax Highlighting Editor -->
+                        <div class="editor-container">
+                            <div class="editor-wrapper">
+                                <pre ref="codeDisplay" class="language-json code-highlight"></pre>
+                                <textarea
+                                    ref="codeEditor"
+                                    v-model="currentContent"
+                                    class="code-editor"
+                                    spellcheck="false"
+                                    @scroll="syncScroll"
+                                    @input="highlightCode"
+                                    @keydown.tab.prevent="handleTab"
+                                ></textarea>
+                            </div>
+                        </div>
+                    </div>
+
+                    <p class="text-red-400 text-bold">{{ errorMessage }}</p>
+                </div>
+            </transition>
+            <div class="border border-light-300 my-8" />
+
+            <h5 class="text-white text-xl font-bold flex gap-x-3 mb-3">Proxy Editor</h5>
+            <div class="flex justify-between items-center mb-4 relative z-60">
+                <div class="w-64">
+                    <div class="relative">
+                        <Dropdown
+                            class="bg-dark-500 border-2 border-dark-550 rounded-lg w-full h-10"
+                            :default="ui.profile.proxyList?.checkout || proxyLists[0]"
+                            :onClick="loadProxies"
+                            :options="proxyLists"
+                            :allowDefault="false"
+                            rightAmount="right-1"
+                        />
+                    </div>
+                </div>
+                <!-- Proxy save button moved here -->
+                <div v-if="currentProxyList" style="margin-right: 1px;">
+                    <button class="btn-action h-12" @click="saveProxies">
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="16"
+                            height="16"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        >
+                            <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" />
+                            <polyline points="17 21 17 13 7 13 7 21" />
+                            <polyline points="7 3 7 8 15 8" />
+                        </svg>
+                        <span>Save Proxies</span>
+                    </button>
+                </div>
+            </div>
+            <!-- Textarea -->
+            <transition name="fade">
+                <div v-if="currentProxyList" class="relative my-3">
+                    <div class="pb-4">
+                        <div class="proxy-editor-container">
+                            <textarea
+                                v-model="proxyContent"
+                                class="proxy-editor"
+                                spellcheck="false"
+                            ></textarea>
+                        </div>
+                    </div>
+                </div>
+            </transition>
+        </div>
+        <QuickSettings v-if="activeModal === 'quick-settings'" />
+    </div>
+</template>
+<script setup>
+import { ref, computed, watch, onMounted, nextTick } from "vue";
+import { DownIcon, ReloadIcon, EditIcon } from "@/components/icons";
+import { useUIStore } from "@/stores/ui";
+import Dropdown from "@/components/ui/controls/atomic/Dropdown.vue";
+import { getProxyLists, getProxyFile } from "@/stores/requests";
+import { DEBUG } from "@/utils/debug";
+
+const loadFromApi = async (path) => {
+    const res = await fetch(path);
+    return res.json();
+};
+
+const availableFiles = ref([]);
+if (DEBUG) availableFiles.value.push("used-codes.json", "proxies.txt", "toMonitor.txt", "test.txt");
+const currentFile = ref("");
+const textEditorVisible = ref(false);
+const currentContent = ref("");
+const proxyContent = ref("");
+const proxyLists = ref(["loading..."]);
+const currentProxyList = ref("");
+const activeModal = computed(() => ui.activeModal);
+const ui = useUIStore();
+
+// References to editor elements
+const codeEditor = ref(null);
+const codeDisplay = ref(null);
+
+let previous = {
+    proxyContent: { list: ui.profile.proxyList, content: "" },
+    currentContent: { file: "", content: "" }
+};
+
+const errorMessage = computed(() => {
+    if (!currentFile.value.endsWith(".json")) return;
+
+    let err;
+    try {
+        JSON.parse(currentContent.value);
+    } catch (e) {
+        err = e;
+    }
+    return err?.message;
+});
+
+const loadAvailableFiles = async () => (availableFiles.value = await loadFromApi("/api/json-files"));
+
+const isJsonFile = () => currentFile.value.endsWith(".json");
+
+// Function to highlight code using Prism
+const highlightCode = () => {
+    if (!codeDisplay.value || !codeEditor.value) return;
+
+    // Get the language based on file extension
+    let language = "javascript"; // Default language
+
+    if (currentFile.value) {
+        if (currentFile.value.endsWith(".json")) {
+            language = "json";
+        } else if (currentFile.value.endsWith(".js")) {
+            language = "javascript";
+        } else if (currentFile.value.endsWith(".txt") || currentFile.value.endsWith(".csv")) {
+            language = "text";
+            // Plain text doesn't need highlighting
+            codeDisplay.value.textContent = currentContent.value || "";
+            codeDisplay.value.className = "language-text code-highlight";
+            return;
+        }
+    }
+
+    // Ensure Prism is available
+    if (typeof Prism === "undefined") {
+        console.error("Prism is not loaded");
+        return;
+    }
+
+    // Use requestAnimationFrame for smoother updates
+    requestAnimationFrame(() => {
+        try {
+            // Update the pre element with highlighted HTML
+            const highlighted = Prism.highlight(currentContent.value || "", Prism.languages[language], language);
+            codeDisplay.value.innerHTML = highlighted;
+            codeDisplay.value.className = `language-${language} code-highlight`;
+        } catch (e) {
+            console.error("Highlight error:", e);
+            // Fallback to plain text if highlighting fails
+            codeDisplay.value.textContent = currentContent.value || "";
+        }
+
+        // Ensure scroll positions are synced after highlighting
+        syncScroll();
+    });
+};
+
+// Function to sync scrolling between textarea and highlighted code
+const syncScroll = () => {
+    if (!codeDisplay.value || !codeEditor.value) return;
+
+    // Synchronize scrolling between the textarea and the highlighted code
+    requestAnimationFrame(() => {
+        codeDisplay.value.scrollTop = codeEditor.value.scrollTop;
+        codeDisplay.value.scrollLeft = codeEditor.value.scrollLeft;
+    });
+};
+
+// Function to handle tab key press in the editor
+const handleTab = (e) => {
+    const textarea = codeEditor.value;
+    const start = textarea.selectionStart;
+    const end = textarea.selectionEnd;
+
+    // Insert 4 spaces at cursor position
+    const spaces = "    ";
+    currentContent.value = currentContent.value.substring(0, start) + spaces + currentContent.value.substring(end);
+
+    // Move cursor position after the inserted tab
+    nextTick(() => {
+        textarea.selectionStart = textarea.selectionEnd = start + spaces.length;
+        highlightCode();
+    });
+};
+
+const format = () => {
+    try {
+        if (!isJsonFile()) return;
+
+        const formatted = JSON.stringify(JSON.parse(currentContent.value), null, 4);
+        currentContent.value = formatted;
+
+        // Apply syntax highlighting after formatting
+        nextTick(() => {
+            highlightCode();
+        });
+    } catch (e) {
+        ui.logger.Error("Could not format JSON", e);
+    }
+};
+
+// Watch for content changes to apply syntax highlighting
+watch(currentContent, () => {
+    nextTick(() => {
+        highlightCode();
+    });
+});
+
+const loadFile = async (f) => {
+    currentFile.value = f;
+    if (DEBUG) {
+        textEditorVisible.value = true;
+        currentProxyList.value = "";
+        currentContent.value = new Array(100).fill(0, 0, 100).join("\n");
+
+        // Update pre element class based on file type
+        if (codeDisplay.value) {
+            if (f.endsWith(".json")) {
+                codeDisplay.value.className = "language-json";
+            } else if (f.endsWith(".js")) {
+                codeDisplay.value.className = "language-javascript";
+            } else {
+                codeDisplay.value.className = "language-text";
+            }
+        }
+
+        // Apply syntax highlighting after content is set
+        nextTick(() => {
+            highlightCode();
+        });
+        return;
+    }
+
+    const res = await loadFromApi("/api/json-file?file=" + currentFile.value);
+    const text = atob(res.content);
+    textEditorVisible.value = true;
+    currentProxyList.value = "";
+    currentContent.value = text;
+    previous.currentContent = { file: currentFile.value, content: text };
+
+    // Update pre element class based on file type
+    if (codeDisplay.value) {
+        if (f.endsWith(".json")) {
+            codeDisplay.value.className = "language-json";
+        } else if (f.endsWith(".js")) {
+            codeDisplay.value.className = "language-javascript";
+        } else {
+            codeDisplay.value.className = "language-text";
+        }
+    }
+
+    // Apply syntax highlighting after content is loaded
+    nextTick(() => {
+        highlightCode();
+    });
+};
+
+const saveDataToAPI = async (data, endpoint, msg, json = true) => {
+    if (DEBUG) return;
+    const options = {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ content: data })
+    };
+
+    let j;
+    const res = await fetch(endpoint, options);
+    if (json) {
+        try {
+            j = await res.json();
+        } catch (e) {
+            ui.showError("Error saving proxies");
+            return;
+        }
+        if (j?.error) return ui.showError(j.error);
+    } else {
+        try {
+            j = await res.text();
+        } catch (e) {
+            ui.showError("Error saving proxies");
+            return;
+        }
+    }
+    ui.showSuccess(msg);
+};
+
+const saveFile = async () => {
+    if (
+        btoa(currentContent.value) === previous.currentContent.content &&
+        currentFile.value === previous.currentContent.file
+    )
+        return ui.logger.Info("Content did not change");
+    saveDataToAPI(btoa(currentContent.value), "/api/json-file?file=" + currentFile.value, "Successfully saved file");
+    previous.currentContent = { file: currentFile.value, content: btoa(currentContent.value) };
+};
+
+const saveAll = async () => {
+    if (DEBUG) return;
+    if (currentFile.value && currentContent.value) await saveFile();
+    await saveQuickConfig();
+};
+
+const loadProxies = async (list) => {
+    try {
+        if (DEBUG) {
+            currentProxyList.value = list;
+            textEditorVisible.value = false;
+            proxyContent.value = new Array(100).fill(0, 0, 100).join("\n");
+            return;
+        }
+
+        ui.logger.Info("Loading proxies: " + list);
+        currentProxyList.value = list;
+        const file = await getProxyFile(list);
+        proxyContent.value = file;
+        previous.proxyContent = { content: proxyContent.value };
+        textEditorVisible.value = false;
+    } catch (ex) {
+        ui.logger.Error("Could not load proxies", ex);
+    }
+};
+
+const saveProxies = async () => {
+    // if (!DEBUG) return;
+    if (previous.proxyContent.content === proxyContent.value) ui.logger.Info("proxies did not change");
+    else {
+        await saveDataToAPI(
+            btoa(proxyContent.value),
+            "/api/proxies?file=" + currentProxyList.value,
+            "Successfully saved proxies",
+            false
+        );
+        previous.proxyContent.content = btoa(proxyContent.value);
+    }
+};
+
+const loadProxyLists = async () => {
+    if (DEBUG) return (proxyLists.value = ["test-proxies", "recaptcha-proxies", "checkout-proxies", "queue-proxies"]);
+    const res = await getProxyLists();
+    if (Array.isArray(res)) proxyLists.value = res;
+    else ui.showError("Could not load proxylists");
+};
+
+// Initialize syntax highlighting
+onMounted(() => {
+    // Apply highlighting when the component is mounted
+    nextTick(() => {
+        highlightCode();
+
+        // Ensure scroll synchronization on initial load
+        if (codeEditor.value && codeDisplay.value) {
+            syncScroll();
+        }
+    });
+
+    // Watch for editor visibility changes
+    watch(textEditorVisible, (newValue) => {
+        if (newValue) {
+            nextTick(() => {
+                highlightCode();
+
+                // Focus the editor when it becomes visible
+                if (codeEditor.value) {
+                    codeEditor.value.focus();
+                }
+            });
+        }
+    });
+});
+
+if (ui.profile.admin && !DEBUG) loadAvailableFiles();
+loadProxyLists();
+</script>
+<style lang="scss" scoped>
+.console {
+    @apply bg-dark-400 p-7 rounded relative border-dark-550 border-2;
+
+    textarea {
+        background: transparent;
+        resize: none;
+        height: calc(100vh - 450px);
+        @apply w-full focus:outline-none text-xs text-white;
+    }
+
+    $border: 2px;
+
+    // &:before {
+    //     content: "";
+    //     @apply absolute top-0 left-0 right-0 bottom-0 opacity-60;
+    //     z-index: -2;
+    //     margin: -$border;
+    //     border-radius: inherit;
+    //     background: radial-gradient(rgba(96, 66, 255, 0.6), rgba(255, 255, 255, 0));
+    // }
+}
+
+.z-inf {
+    z-index: 1000;
+}
+
+.z-inf2 {
+    z-index: 2000;
+}
+
+.z-inf3 {
+    z-index: 3000;
+}
+
+.special-dropdown {
+    margin-left: 0 !important;
+}
+
+.button-default-smaller -smaller {
+    @apply h-10;
+    border-radius: 0.5rem;
+    font-weight: 500;
+    --tw-text-opacity: 1;
+    color: rgb(255 255 255 / 1);
+    transition-duration: 150ms;
+}
+
+/* Modern dropdown with refresh button styles */
+/* Removed custom dropdown styling to ensure default behavior */
+
+.refresh-button {
+    &:hover {
+        .refresh-icon {
+            transform: rotate(180deg);
+        }
+    }
+}
+
+.refresh-icon {
+    transition: transform 0.5s ease;
+}
+
+/* Admin file dropdown should match refresh button height and have no right corners */
+.admin-file-dropdown {
+    height: 2.5rem !important; /* Always 40px to match refresh button */
+    border-top-right-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+    border-top-left-radius: 0.5rem !important; /* lg border radius */
+    border-bottom-left-radius: 0.5rem !important; /* lg border radius */
+}
+
+/* Prism.js syntax highlighting styles */
+.editor-container {
+    position: relative;
+    min-height: 300px;
+    max-height: 600px;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    overflow: hidden;
+    background-color: #1a1a2e;
+}
+
+.editor-wrapper {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    min-height: 300px;
+    max-height: 600px;
+}
+
+.code-editor {
+    width: 100%;
+    height: 100%;
+    min-height: 300px;
+    max-height: 600px;
+    background-color: transparent;
+    /* Make text completely transparent */
+    color: rgba(0, 0, 0, 0);
+    caret-color: #e2e8f0;
+    font-family: "JetBrains Mono", "Fira Code", "Menlo", "Monaco", "Courier New", monospace;
+    padding: 12px;
+    border: none;
+    resize: none;
+    font-size: 14px;
+    line-height: 1.6;
+    tab-size: 4;
+    outline: none;
+    border: 1px solid #2d2d3b;
+    border-radius: 8px;
+    z-index: 10;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    white-space: pre;
+    overflow: auto;
+}
+
+/* Enhance the text selection color */
+.code-editor::selection {
+    background: rgba(98, 114, 164, 0.4);
+}
+
+.code-highlight {
+    width: 100%;
+    height: 100%;
+    min-height: 300px;
+    max-height: 600px;
+    overflow: auto;
+    white-space: pre;
+    font-family: "JetBrains Mono", "Fira Code", "Menlo", "Monaco", "Courier New", monospace;
+    font-size: 14px;
+    line-height: 1.6;
+    background-color: transparent !important;
+    pointer-events: none;
+    z-index: 5;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding: 12px;
+    margin: 0;
+}
+
+.code-editor,
+.prism-editor {
+    font-family: "Menlo", "Monaco", "Courier New", monospace !important;
+    font-size: 14px !important;
+    line-height: 1.5 !important;
+}
+
+/* Proxy editor container */
+.proxy-editor-container {
+    @apply w-full overflow-hidden rounded-lg border border-dark-550;
+    height: 400px;
+    max-height: 60vh;
+    background-color: #1a1a2e;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+@media (min-width: 1024px) {
+    .proxy-editor-container {
+        max-height: 60vh;
+    }
+}
+
+@media (min-width: 1280px) {
+    .proxy-editor-container {
+        max-height: 70vh;
+    }
+}
+
+/* Proxy editor styles */
+.proxy-editor {
+    @apply w-full h-full resize-none focus:outline-none;
+    background-color: transparent;
+    color: #f8f8f2;
+    font-family: "JetBrains Mono", "Fira Code", "Menlo", "Monaco", "Courier New", monospace;
+    padding: 12px;
+    border: none;
+    font-size: 14px;
+    line-height: 1.6;
+    tab-size: 4;
+    overflow: auto;
+}
+
+.proxy-editor:focus {
+    outline: none;
+}
+
+.proxy-editor-container:focus-within {
+    border-color: #6272a4;
+    box-shadow: 0 0 0 2px rgba(98, 114, 164, 0.25);
+}
+
+/* Prism.js dark theme */
+code[class*="language-"],
+pre[class*="language-"] {
+    color: #f8f8f2;
+    background: none;
+    text-shadow: 0 1px rgba(0, 0, 0, 0.3);
+    font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+    line-height: 1.5;
+    tab-size: 4;
+    hyphens: none;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+    padding: 12px;
+    margin: 0;
+    overflow: auto;
+    border-radius: 4px;
+    font-family: "Menlo", "Monaco", "Courier New", monospace;
+    font-size: 14px;
+    line-height: 1.5;
+    tab-size: 4;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+    background: #1e1e2e;
+    white-space: pre;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+    padding: 0.1em;
+    border-radius: 0.3em;
+    white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+    color: #676f7d;
+    font-style: italic;
+}
+
+.token.punctuation {
+    color: #a9b7c6;
+}
+
+.namespace {
+    opacity: 0.8;
+}
+
+.token.property,
+.token.tag,
+.token.constant,
+.token.symbol,
+.token.deleted {
+    color: #e06c75;
+}
+
+.token.boolean,
+.token.number {
+    color: #c792ea;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+    color: #98c379;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+    color: #89ddff;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+    color: #61afef;
+}
+
+.token.function,
+.token.class-name {
+    color: #ffcb6b;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+    color: #c5e478;
+}
+
+/* Add a slight hover effect to the editor for better UX */
+.editor-container:hover {
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
+    transition: box-shadow 0.3s ease;
+}
+
+.token.important,
+.token.bold {
+    font-weight: bold;
+}
+
+.token.italic {
+    font-style: italic;
+}
+
+.token.entity {
+    cursor: help;
+}
+</style>