Bump yaml from 2.3.4 to 2.8.3

Bumps [yaml](https://github.com/eemeli/yaml) from 2.3.4 to 2.8.3.
- [Release notes](https://github.com/eemeli/yaml/releases)
- [Commits](https://github.com/eemeli/yaml/compare/v2.3.4...v2.8.3)

---
updated-dependencies:
- dependency-name: yaml
  dependency-version: 2.8.3
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <support@github.com>

backend/stack.ts

@@ -553,7 +553,7 @@ export class Stack {
 
     async startService(socket: DockgeSocket, serviceName: string) {
         const terminalName = getComposeTerminalName(socket.endpoint, this.name);
-        const exitCode = await Terminal.exec(this.server, socket, terminalName, "docker", ["compose", "up", "-d", serviceName], this.path);
+        const exitCode = await Terminal.exec(this.server, socket, terminalName, "docker", [ "compose", "up", "-d", serviceName ], this.path);
         if (exitCode !== 0) {
             throw new Error(`Failed to start service ${serviceName}, please check logs for more information.`);
         }
@@ -563,7 +563,7 @@ export class Stack {
 
     async stopService(socket: DockgeSocket, serviceName: string): Promise<number> {
         const terminalName = getComposeTerminalName(socket.endpoint, this.name);
-        const exitCode = await Terminal.exec(this.server, socket, terminalName, "docker", ["compose", "stop", serviceName], this.path);
+        const exitCode = await Terminal.exec(this.server, socket, terminalName, "docker", [ "compose", "stop", serviceName ], this.path);
         if (exitCode !== 0) {
             throw new Error(`Failed to stop service ${serviceName}, please check logs for more information.`);
         }
@@ -573,7 +573,7 @@ export class Stack {
 
     async restartService(socket: DockgeSocket, serviceName: string): Promise<number> {
         const terminalName = getComposeTerminalName(socket.endpoint, this.name);
-        const exitCode = await Terminal.exec(this.server, socket, terminalName, "docker", ["compose", "restart", serviceName], this.path);
+        const exitCode = await Terminal.exec(this.server, socket, terminalName, "docker", [ "compose", "restart", serviceName ], this.path);
         if (exitCode !== 0) {
             throw new Error(`Failed to restart service ${serviceName}, please check logs for more information.`);
         }

frontend/src/components/Container.vue

@@ -21,24 +21,30 @@
                             <font-awesome-icon icon="terminal" />
                             Bash
                         </router-link>
-                        <button v-if="this.serviceCount > 1 && !isEditMode && status !== 'running' && status !== 'healthy'"
-                                class="btn btn-primary"
-                                :disabled="processing"
-                                @click="startService">
+                        <button
+                            v-if="serviceCount > 1 && !isEditMode && status !== 'running' && status !== 'healthy'"
+                            class="btn btn-primary"
+                            :disabled="processing"
+                            @click="startService"
+                        >
                             <font-awesome-icon icon="play" class="me-1" />
                             {{ $t("startStack") }}
                         </button>
-                        <button v-if="this.serviceCount > 1 && !isEditMode && (status === 'running' || status === 'healthy' || status === 'unhealthy')"
-                                class="btn btn-normal"
-                                :disabled="processing"
-                                @click="restartService">
+                        <button
+                            v-if="serviceCount > 1 && !isEditMode && (status === 'running' || status === 'healthy' || status === 'unhealthy')"
+                            class="btn btn-normal"
+                            :disabled="processing"
+                            @click="restartService"
+                        >
                             <font-awesome-icon icon="rotate" class="me-1" />
                             {{ $t("restartStack") }}
                         </button>
-                        <button v-if="this.serviceCount > 1 && !isEditMode && (status === 'running' || status === 'healthy' || status === 'unhealthy')"
-                                class="btn btn-normal"
-                                :disabled="processing"
-                                @click="stopService">
+                        <button
+                            v-if="serviceCount > 1 && !isEditMode && (status === 'running' || status === 'healthy' || status === 'unhealthy')"
+                            class="btn btn-normal"
+                            :disabled="processing"
+                            @click="stopService"
+                        >
                             <font-awesome-icon icon="stop" class="me-1" />
                             {{ $t("stopStack") }}
                         </button>
@@ -292,7 +298,7 @@ export default defineComponent({
         serviceCount() {
             return Object.keys(this.jsonObject.services).length;
         },
-        
+
         jsonObject() {
             return this.$parent.$parent.jsonConfig;
         },

frontend/src/components/StackList.vue

@@ -3,8 +3,10 @@
         <div class="list-header">
             <div class="header-top">
                 <!-- TODO -->
-                <button v-if="false" class="btn btn-outline-normal ms-2" :class="{ 'active': selectMode }" type="button"
-                    @click="selectMode = !selectMode">
+                <button
+                    v-if="false" class="btn btn-outline-normal ms-2" :class="{ 'active': selectMode }" type="button"
+                    @click="selectMode = !selectMode"
+                >
                     {{ $t("Select") }}
                 </button>
 
@@ -31,10 +33,14 @@
             <div v-if="selectMode && false" class="selection-controls px-2 pt-2">
                 <input v-model="selectAll" class="form-check-input select-input" type="checkbox" />
 
-                <button class="btn-outline-normal" @click="pauseDialog"><font-awesome-icon icon="pause" size="sm" /> {{
-                    $t("Pause") }}</button>
-                <button class="btn-outline-normal" @click="resumeSelected"><font-awesome-icon icon="play" size="sm" />
-                    {{ $t("Resume") }}</button>
+                <button class="btn-outline-normal" @click="pauseDialog">
+                    <font-awesome-icon icon="pause" size="sm" /> {{
+                        $t("Pause") }}
+                </button>
+                <button class="btn-outline-normal" @click="resumeSelected">
+                    <font-awesome-icon icon="play" size="sm" />
+                    {{ $t("Resume") }}
+                </button>
 
                 <span v-if="selectedStackCount > 0">
                     {{ $t("selectedStackCount", [selectedStackCount]) }}
@@ -45,9 +51,11 @@
             <div v-if="agentStackList[0] && agentStackList[0].stacks.length === 0" class="text-center mt-3">
                 <router-link to="/compose">{{ $t("addFirstStackMsg") }}</router-link>
             </div>
-            <div class="stack-list-inner" v-for="(agent, index) in agentStackList" :key="index">
-                <div v-if="$root.agentCount > 1" class="p-2 agent-select"
-                    @click="closedAgents.set(agent.endpoint, !closedAgents.get(agent.endpoint))">
+            <div v-for="(agent, agentIndex) in agentStackList" :key="agentIndex" class="stack-list-inner">
+                <div
+                    v-if="$root.agentCount > 1" class="p-2 agent-select"
+                    @click="closedAgents.set(agent.endpoint, !closedAgents.get(agent.endpoint))"
+                >
                     <span class="me-1">
                         <font-awesome-icon v-show="closedAgents.get(agent.endpoint)" icon="chevron-circle-right" />
                         <font-awesome-icon v-show="!closedAgents.get(agent.endpoint)" icon="chevron-circle-down" />
@@ -55,9 +63,11 @@
                     <span v-if="agent.endpoint === 'current'">{{ $t("currentEndpoint") }}</span>
                     <span v-else>{{ agent.endpoint }}</span>
                 </div>
-                <StackListItem v-show="$root.agentCount === 1 || !closedAgents.get(agent.endpoint)"
-                    v-for="(item, index) in agent.stacks" :key="index" :stack="item" :isSelectMode="selectMode"
-                    :isSelected="isSelected" :select="select" :deselect="deselect" />
+                <StackListItem
+                    v-for="(item, index) in agent.stacks"
+                    v-show="$root.agentCount === 1 || !closedAgents.get(agent.endpoint)" :key="index" :stack="item" :isSelectMode="selectMode"
+                    :isSelected="isSelected" :select="select" :deselect="deselect"
+                />
             </div>
         </div>
     </div>
@@ -195,20 +205,20 @@ export default {
             // and the rest are sorted alphabetically
             result = [
                 ...result.reduce((acc, stack) => {
-                    const endpoint = stack.endpoint || 'current';
+                    const endpoint = stack.endpoint || "current";
                     if (!acc.has(endpoint)) {
                         acc.set(endpoint, []);
                     }
                     acc.get(endpoint).push(stack);
                     return acc;
                 }, new Map()).entries()
-            ].map(([endpoint, stacks]) => ({
+            ].map(([ endpoint, stacks ]) => ({
                 endpoint,
                 stacks
             })).sort((a, b) => {
-                if (a.endpoint === 'current' && b.endpoint !== 'current') {
+                if (a.endpoint === "current" && b.endpoint !== "current") {
                     return -1;
-                } else if (a.endpoint !== 'current' && b.endpoint === 'current') {
+                } else if (a.endpoint !== "current" && b.endpoint === "current") {
                     return 1;
                 }
                 return a.endpoint.localeCompare(b.endpoint);

frontend/src/components/Terminal.vue

@@ -20,22 +20,24 @@ export default {
     props: {
         name: {
             type: String,
-            require: true,
+            required: true,
         },
 
         endpoint: {
             type: String,
-            require: true,
+            required: true,
         },
 
         // Require if mode is interactive
         stackName: {
             type: String,
+            default: "",
         },
 
         // Require if mode is interactive
         serviceName: {
             type: String,
+            default: "",
         },
 
         // Require if mode is interactive
@@ -102,7 +104,7 @@ export default {
         this.terminal.focus();
 
         // Add right-click context menu handler for paste
-        this.$refs.terminal.addEventListener('contextmenu', this.handleContextMenu);
+        this.$refs.terminal.addEventListener("contextmenu", this.handleContextMenu);
 
         // Add selection handler for copy to clipboard
         this.terminal.onSelectionChange(() => {
@@ -143,7 +145,7 @@ export default {
         window.removeEventListener("resize", this.onResizeEvent); // Remove the resize event listener from the window object.
         this.$root.unbindTerminal(this.name);
         this.terminal.dispose();
-        this.$refs.terminal?.removeEventListener('contextmenu', this.handleContextMenu);
+        this.$refs.terminal?.removeEventListener("contextmenu", this.handleContextMenu);
     },
 
     methods: {
@@ -206,7 +208,7 @@ export default {
                         const afterCursor = this.terminalInputBuffer.slice(this.cursorPosition);
                         this.terminalInputBuffer = beforeCursor + afterCursor;
                         this.cursorPosition--;
-                        
+
                         // Redraw the line
                         this.terminal.write("\b" + afterCursor + " \b".repeat(afterCursor.length + 1));
                     }
@@ -216,7 +218,7 @@ export default {
                         const beforeCursor = this.terminalInputBuffer.slice(0, this.cursorPosition);
                         const afterCursor = this.terminalInputBuffer.slice(this.cursorPosition + 1);
                         this.terminalInputBuffer = beforeCursor + afterCursor;
-                        
+
                         // Redraw the line from cursor position
                         this.terminal.write(afterCursor + " \b".repeat(afterCursor.length + 1));
                     }
@@ -312,19 +314,19 @@ export default {
                 // For main terminal, insert text at current cursor position
                 const beforeCursor = this.terminalInputBuffer.slice(0, this.cursorPosition);
                 const afterCursor = this.terminalInputBuffer.slice(this.cursorPosition);
-                
+
                 // Update the buffer with inserted text
                 this.terminalInputBuffer = beforeCursor + text + afterCursor;
-                
+
                 // Clear the current line and rewrite it
                 this.clearCurrentLine();
                 this.terminal.write(this.terminalInputBuffer);
-                
+
                 // Move cursor to the correct position (after the pasted text)
                 this.cursorPosition += text.length;
                 const backspaces = "\b".repeat(afterCursor.length);
                 this.terminal.write(backspaces);
-                
+
             } else if (this.mode === "interactive") {
                 // For interactive terminal, send directly to server
                 this.$root.emitAgent(this.endpoint, "terminalInput", this.name, text, (res) => {
@@ -341,7 +343,7 @@ export default {
         handleContextMenu(event) {
             // Prevent default context menu
             event.preventDefault();
-            
+
             // Only handle paste for modes that support input
             if (this.mode === "mainTerminal" || this.mode === "interactive") {
                 this.handlePaste();

frontend/src/components/settings/GlobalEnv.vue

@@ -57,7 +57,8 @@ export default {
             EditorView.focusChangeEffect.of(focusEffectHandler),
         ];
 
-        return { editorFocus, extensionsEnv };
+        return { editorFocus,
+            extensionsEnv };
     },
 
     computed: {

frontend/src/components/settings/Security.vue

@@ -94,10 +94,18 @@
         <TwoFADialog ref="TwoFADialog" />
 
         <Confirm ref="confirmDisableAuth" btn-style="btn-danger" :yes-text="$t('I understand, please disable')" :no-text="$t('Leave')" @yes="disableAuth">
-            <!-- eslint-disable-next-line vue/no-v-html -->
-            <p v-html="$t('disableauth.message1')"></p>
-            <!-- eslint-disable-next-line vue/no-v-html -->
-            <p v-html="$t('disableauth.message2')"></p>
+            <i18n-t keypath="disableauth.message1" tag="p">
+                <template #disableAuth>
+                    <strong>{{ $t('disableAuth') }}</strong>
+                </template>
+            </i18n-t>
+
+            <i18n-t keypath="disableauth.message2" tag="p">
+                <template #scenarios>
+                    <strong>{{ $t('scenarios') }}</strong>
+                </template>
+            </i18n-t>
+
             <p>{{ $t("Please use this option carefully!") }}</p>
 
             <div class="mb-3">

frontend/src/lang/en.json

@@ -47,8 +47,10 @@
     "deleteContainer": "Delete",
     "addContainer": "Add Container",
     "addNetwork": "Add Network",
-    "disableauth.message1": "Are you sure want to <strong>disable authentication</strong>?",
-    "disableauth.message2": "It is designed for scenarios <strong>where you intend to implement third-party authentication</strong> in front of Dockge such as Cloudflare Access, Authelia or other authentication mechanisms.",
+    "disableauth.message1": "Are you sure want to {disableAuth}?",
+    "disableauth.message2": "It is designed for scenarios {scenarios}",
+    "disableAuth": "disable authentication",
+    "scenarios": "where you intend to implement third-party authentication",
     "passwordNotMatchMsg": "The repeat password does not match.",
     "autoGet": "Auto Get",
     "add": "Add",
@@ -139,8 +141,12 @@
     "networkIO": "Network I/O",
     "blockIO": "Block I/O",
     "Console is not enabled": "Console is not enabled",
-    "ConsoleNotEnabledMSG1": "Console is a powerful tool that allows you to execute any commands such as <code>docker</code>, <code>rm</code> within the Dockge's container in this Web UI.",
-    "ConsoleNotEnabledMSG2": "It might be dangerous since this Dockge container is connecting to the host's Docker daemon. Also Dockge could be possibly taken down by commands like <code>rm -rf</code>" ,
-    "ConsoleNotEnabledMSG3": "If you understand the risk, you can enable it by setting <code>DOCKGE_ENABLE_CONSOLE=true</code> in the environment variables.",
+    "ConsoleNotEnabledMSG1": "Console is a powerful tool that allows you to execute any commands such as {docker}, {rm} within the Dockge's container in this Web UI.",
+    "ConsoleNotEnabledMSG2": "It might be dangerous since this Dockge container is connecting to the host's Docker daemon. Also Dockge could be possibly taken down by commands like {rmRf}",
+    "ConsoleNotEnabledMSG3": "If you understand the risk, you can enable it by setting {envVar} in the environment variables.",
+    "dockerCode": "docker",
+    "rmCode": "rm",
+    "rmRfCode": "rm -rf",
+    "envVarCode": "DOCKGE_ENABLE_CONSOLE=true",
     "confirmLeaveStack": "You are currently editing a stack. Are you sure you want to leave?"
 }

frontend/src/mixins/socket.ts

@@ -131,7 +131,7 @@ export default defineComponent({
     methods: {
 
         endpointDisplayFunction(endpoint : string) {
-            for (const [k, v] of Object.entries(this.$data.agentList)) {
+            for (const [ k, v ] of Object.entries(this.$data.agentList)) {
                 if (endpoint) {
                     if (endpoint === v["endpoint"] && v["name"] !== "") {
                         return v["name"];

frontend/src/pages/Compose.vue

@@ -63,8 +63,8 @@
 
             <!-- URLs -->
             <div v-if="urls.length > 0" class="mb-3">
-                <a v-for="(url, index) in urls" :key="index" target="_blank" :href="url.url">
-                    <span class="badge bg-secondary me-2">{{ url.display }}</span>
+                <a v-for="(urlItem, index) in urls" :key="index" target="_blank" :href="urlItem.url">
+                    <span class="badge bg-secondary me-2">{{ urlItem.display }}</span>
                 </a>
             </div>
 
@@ -98,8 +98,8 @@
                             <div class="mt-3">
                                 <label for="name" class="form-label">{{ $t("dockgeAgent") }}</label>
                                 <select v-model="stack.endpoint" class="form-select">
-                                    <option v-for="(agent, endpoint) in $root.agentList" :key="endpoint" :value="endpoint" :disabled="$root.agentStatusList[endpoint] != 'online'">
-                                        ({{ $root.agentStatusList[endpoint] }}) {{ (agent.name !== '') ? agent.name : agent.url || $t("Current") }}
+                                    <option v-for="(agent, agentEndpoint) in $root.agentList" :key="agentEndpoint" :value="agentEndpoint" :disabled="$root.agentStatusList[agentEndpoint] != 'online'">
+                                        ({{ $root.agentStatusList[agentEndpoint] }}) {{ (agent.name !== '') ? agent.name : agent.url || $t("Current") }}
                                     </option>
                                 </select>
                             </div>
@@ -282,11 +282,6 @@ let yamlErrorTimeout = null;
 
 let serviceStatusTimeout = null;
 let dockerStatsTimeout = null;
-let prismjsSymbolDefinition = {
-    "symbol": {
-        pattern: /(?<!\$)\$(\{[^{}]*\}|\w+)/,
-    }
-};
 
 export default {
     components: {

frontend/src/pages/Console.vue

@@ -7,9 +7,22 @@
 
             <div v-else class="alert alert-warning shadow-box" role="alert">
                 <h4 class="alert-heading">{{ $t("Console is not enabled") }}</h4>
-                <p v-html="$t('ConsoleNotEnabledMSG1')"></p>
-                <p v-html="$t('ConsoleNotEnabledMSG2')"></p>
-                <p v-html="$t('ConsoleNotEnabledMSG3')"></p>
+                <i18n-t keypath="ConsoleNotEnabledMSG1" tag="p">
+                    <template #docker><code>{{ $t('dockerCode') }}</code></template>
+                    <template #rm><code>{{ $t('rmCode') }}</code></template>
+                </i18n-t>
+
+                <i18n-t keypath="ConsoleNotEnabledMSG2" tag="p">
+                    <template #rmRf>
+                        <code>{{ $t('rmRfCode') }}</code>
+                    </template>
+                </i18n-t>
+
+                <i18n-t keypath="ConsoleNotEnabledMSG3" tag="p">
+                    <template #envVar>
+                        <code>{{ $t('envVarCode') }}</code>
+                    </template>
+                </i18n-t>
             </div>
         </div>
     </transition>
@@ -37,7 +50,7 @@ export default {
         });
     },
     methods: {
-        
+
     }
 };
 </script>

frontend/src/pages/ContainerTerminal.vue

@@ -1,7 +1,7 @@
 <template>
     <transition name="slide-fade" appear>
         <div>
-            <h1 class="mb-3">{{$t("terminal")}} - {{ serviceName }} ({{ stackName }})</h1>
+            <h1 class="mb-3">{{ $t("terminal") }} - {{ serviceName }} ({{ stackName }})</h1>
 
             <div class="mb-3">
                 <router-link :to="sh" class="btn btn-normal me-2">{{ $t("Switch to sh") }}</router-link>

frontend/src/pages/DashboardHome.vue

@@ -40,7 +40,7 @@
                     <div class="shadow-box big-padding">
                         <h4 class="mb-3">{{ $tc("dockgeAgent", 2) }} <span class="badge bg-warning" style="font-size: 12px;">beta</span></h4>
 
-                        <div v-for="(agent, endpoint) in $root.agentList" :key="endpoint" class="mb-3 agent">
+                        <div v-for="(agentItem, endpoint) in $root.agentList" :key="endpoint" class="mb-3 agent">
                             <!-- Agent Status -->
                             <template v-if="$root.agentStatusList[endpoint]">
                                 <span v-if="$root.agentStatusList[endpoint] === 'online'" class="badge bg-primary me-2">{{ $t("agentOnline") }}</span>
@@ -50,26 +50,26 @@
 
                             <!-- Agent Display Name -->
                             <template v-if="$root.agentStatusList[endpoint]">
-                                <span v-if="endpoint === '' && agent.name === ''" class="badge bg-secondary me-2">Current</span>
-                                <span v-else-if="agent.name === ''" :href="agent.url" class="me-2">{{ endpoint }}</span>
-                                <span v-else :href="agent.url" class="me-2">{{ agent.name }}</span>
+                                <span v-if="endpoint === '' && agentItem.name === ''" class="badge bg-secondary me-2">Current</span>
+                                <span v-else-if="agentItem.name === ''" :href="agentItem.url" class="me-2">{{ endpoint }}</span>
+                                <span v-else :href="agentItem.url" class="me-2">{{ agentItem.name }}</span>
                             </template>
 
                             <!-- Edit Name  -->
-                            <font-awesome-icon v-if="agent.name !== ''" icon="pen-to-square" @click="showEditAgentNameDialog[agent.name] = !showEditAgentNameDialog[agent.Name]" />
+                            <font-awesome-icon v-if="agentItem.name !== ''" icon="pen-to-square" @click="showEditAgentNameDialog[agentItem.name] = !showEditAgentNameDialog[agentItem.Name]" />
 
                             <!-- Edit Dialog -->
-                            <BModal v-model="showEditAgentNameDialog[agent.name]" :no-close-on-backdrop="true" :close-on-esc="true" :okTitle="$t('Update Name')" okVariant="info" @ok="updateName(agent.url, agent.updatedName)">
-                                <label for="Update Name" class="form-label">Current value: {{ $t(agent.name) }}</label>
-                                <input id="updatedName" v-model="agent.updatedName" type="text" class="form-control" optional>
+                            <BModal v-model="showEditAgentNameDialog[agentItem.name]" :no-close-on-backdrop="true" :close-on-esc="true" :okTitle="$t('Update Name')" okVariant="info" @ok="updateName(agentItem.url, agentItem.updatedName)">
+                                <label for="Update Name" class="form-label">Current value: {{ $t(agentItem.name) }}</label>
+                                <input id="updatedName" v-model="agentItem.updatedName" type="text" class="form-control" optional>
                             </BModal>
 
                             <!-- Remove Button -->
-                            <font-awesome-icon v-if="endpoint !== ''" class="ms-2 remove-agent" icon="trash" @click="showRemoveAgentDialog[agent.url] = !showRemoveAgentDialog[agent.url]" />
+                            <font-awesome-icon v-if="endpoint !== ''" class="ms-2 remove-agent" icon="trash" @click="showRemoveAgentDialog[agentItem.url] = !showRemoveAgentDialog[agentItem.url]" />
 
                             <!-- Remove Agent Dialog -->
-                            <BModal v-model="showRemoveAgentDialog[agent.url]" :okTitle="$t('removeAgent')" okVariant="danger" @ok="removeAgent(agent.url)">
-                                <p>{{ agent.url }}</p>
+                            <BModal v-model="showRemoveAgentDialog[agentItem.url]" :okTitle="$t('removeAgent')" okVariant="danger" @ok="removeAgent(agentItem.url)">
+                                <p>{{ agentItem.url }}</p>
                                 {{ $t("removeAgentMsg") }}
                             </BModal>
                         </div>

package.json

@@ -55,7 +55,7 @@
         "ts-command-line-args": "~2.5.1",
         "tsx": "~4.19.3",
         "type-fest": "~4.3.3",
-        "yaml": "~2.3.4"
+        "yaml": "~2.8.3"
     },
     "devDependencies": {
         "@actions/github": "^6.0.0",