Sort non managed stack to the end

Translations update from Kuma Weblate

.github/workflows/ci.yml

@@ -14,8 +14,8 @@ jobs:
   ci:
     strategy:
       matrix:
-        os: [ubuntu-latest, windows-latest, macos-latest]
+        os: [ubuntu-latest, windows-latest, macos-latest, ARM64]
-        node: [20.x] # Can be changed
+        node: [18.17.1] # Can be changed
     runs-on: ${{ matrix.os }}
     steps:
       - name: Checkout Code

.github/workflows/prevent-file-change.yml

@@ -0,0 +1,16 @@
+name: Prevent File Change
+
+on:
+  pull_request:
+
+jobs:
+  check-file-changes:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Prevent file change
+        uses: xalvarez/prevent-file-change-action@v1
+        with:
+          githubToken: ${{ secrets.GITHUB_TOKEN }}
+          # Regex, /src/lang/*.json is not allowed to be changed, except for /src/lang/en.json
+          pattern: '^(?!frontend/src/lang/en\.json$)frontend/src/lang/.*\.json$'
+          trustedAuthors: UptimeKumaBot

CONTRIBUTING.md

@@ -7,13 +7,15 @@ Here are some references:
 ### ✅ Usually accepted:
 - Bug fix
 - Security fix
-- Translation
+- Adding new language files (see [these instructions](https://github.com/louislam/dockge/blob/master/frontend/src/lang/README.md))
+- Adding new language keys: `$t("...")`
 
 ### ⚠️ Discussion required:
 - Large pull requests
 - New features
 
 ### ❌ Won't be merged:
+- A dedicated PR for translating existing languages (see [these instructions](https://github.com/louislam/dockge/blob/master/frontend/src/lang/README.md))
 - Do not pass the auto-test
 - Any breaking changes
 - Duplicated pull requests

README.md

@@ -34,12 +34,18 @@ View Video: https://youtu.be/AWAlOQeNpgU?t=48
 ## 🔧 How to Install
 
 Requirements:
-- [Docker CE](https://docs.docker.com/engine/install/) 20+ is recommended / Podman
+- [Docker](https://docs.docker.com/engine/install/) 20+ / Podman
-- (Docker only) [Docker Compose Plugin](https://docs.docker.com/compose/install/linux/)
 - (Podman only) podman-docker (Debian: `apt install podman-docker`)
 - OS:
-  - As long as you can run Docker CE / Podman, it should be fine, but:
+  - Major Linux distros that can run Docker/Podman such as:
-  - Debian/Raspbian Buster or lower is not supported, please upgrade to Bullseye or higher
+     - ✅ Ubuntu
+     - ✅ Debian (Bullseye or newer)
+     - ✅ Raspbian (Bullseye or newer)
+     - ✅ CentOS
+     - ✅ Fedora
+     - ✅ ArchLinux
+  - ❌ Debian/Raspbian Buster or lower is not supported
+  - ❌ Windows (Will be supported later)
 - Arch: armv7, arm64, amd64 (a.k.a x86_64)
 
 ### Basic
@@ -48,14 +54,14 @@ Requirements:
 - Default Port: 5001
 
 ```
-# Create a directory that stores your stacks and stores dockge's compose.yaml
+# Create directories that store your stacks and stores Dockge's stack
 mkdir -p /opt/stacks /opt/dockge
 cd /opt/dockge
 
 # Download the compose.yaml
 curl https://raw.githubusercontent.com/louislam/dockge/master/compose.yaml --output compose.yaml
 
-# Start the Server
+# Start the server
 docker compose up -d
 
 # If you are using docker-compose V1 or Podman
@@ -66,40 +72,24 @@ Dockge is now running on http://localhost:5001
 
 ### Advanced
 
-If you want to store your stacks in another directory, you can change the `DOCKGE_STACKS_DIR` environment variable and volumes.
+If you want to store your stacks in another directory, you can generate your compose.yaml file by using the following URL with custom query strings.
 
-```yaml
-version: "3.8"
-services:
-  dockge:
-    image: louislam/dockge:1
-    restart: unless-stopped
-    ports:
-      # Host Port : Container Port
-      - 5001:5001
-    volumes:
-      - /var/run/docker.sock:/var/run/docker.sock
-      - ./data:/app/data
-        
-      # If you want to use private registries, you need to share the auth file with Dockge:
-      # - /root/.docker/:/root/.docker
-
-      # Your stacks directory in the host (The paths inside container must be the same as the host)
-      # ⚠️⚠️ If you did it wrong, your data could end up be written into a wrong path.
-      # ✔️✔️✔️✔️ CORRECT: - /my-stacks:/my-stacks (Both paths match)
-      # ❌❌❌❌ WRONG: - /docker:/my-stacks (Both paths do not match)
-      - /opt/stacks:/opt/stacks
-    environment:
-      # Tell Dockge where is your stacks directory
-      - DOCKGE_STACKS_DIR=/opt/stacks
 ```
+# Download your compose.yaml
+curl "https://dockge.kuma.pet/compose.yaml?port=5001&stacksPath=/opt/stacks" --output compose.yaml
+```
+
+- port=`5001`
+- stacksPath=`/opt/stacks`
+
+Interactive compose.yaml generator is available on: 
+https://dockge.kuma.pet
 
 ## How to Update
 
 ```bash
 cd /opt/dockge
-docker compose pull
+docker compose pull && docker compose up -d
-docker compose up -d
 ```
 
 ## Screenshots
@@ -122,7 +112,7 @@ docker compose up -d
 If you love this project, please consider giving it a ⭐.
 
 
-## 🗣️
+## 🗣️ Community and Contribution
 
 ### Bug Report
 https://github.com/louislam/dockge/issues
@@ -130,10 +120,13 @@ https://github.com/louislam/dockge/issues
 ### Ask for Help / Discussions
 https://github.com/louislam/dockge/discussions
 
-## Translation
+### Translation
-
 If you want to translate Dockge into your language, please read [Translation Guide](https://github.com/louislam/dockge/blob/master/frontend/src/lang/README.md)
 
+### Create a Pull Request
+
+Be sure to read the [guide](https://github.com/louislam/dockge/blob/master/CONTRIBUTING.md), as we don't accept all types of pull requests and don't want to waste your time.
+
 ## FAQ
 
 #### "Dockge"?
@@ -155,17 +148,18 @@ Yes, you can. However, you need to move your compose file into the stacks direct
 3. In Dockge, click the " Scan Stacks Folder" button in the top-right corner's dropdown menu
 4. Now you should see your stack in the list
 
-## More Ideas?
+#### Is Dockge a Portainer replcement?
 
-- Stats
+Yes or no. Portainer provides a lot of Docker features. While Dockge is currently only focusing on docker-compose with a better user interface and better user experience.
-- File manager
-- App store for yaml templates
-- Get app icons
-- Switch Docker context
-- Support Dockerfile and build
-- Support Docker swarm
 
+If you want to manage your container with docker-compose only, the answer may be yes.
 
-# Others
+If you still need to manage something like docker networks, signle containers, the answer may be no.
+
+#### Can I install both Dockge and Portainer?
+
+Yes, you can.
+
+## Others
 
 Dockge is built on top of [Compose V2](https://docs.docker.com/compose/migrate/). `compose.yaml`  also known as `docker-compose.yml`.

backend/dockge-server.ts

@@ -150,9 +150,6 @@ export class DockgeServer {
             }
         }
 
-        // Create all the necessary directories
-        this.initDataDir();
-
         // Create express
         this.app = express();
 
@@ -255,6 +252,9 @@ export class DockgeServer {
      *
      */
     async serve() {
+        // Create all the necessary directories
+        this.initDataDir();
+
         // Connect to database
         try {
             await Database.init(this);

backend/socket-handlers/docker-socket-handler.ts

@@ -9,10 +9,10 @@ import composerize from "composerize";
 export class DockerSocketHandler extends SocketHandler {
     create(socket : DockgeSocket, server : DockgeServer) {
 
-        socket.on("deployStack", async (name : unknown, composeYAML : unknown, isAdd : unknown, callback) => {
+        socket.on("deployStack", async (name : unknown, composeYAML : unknown, composeENV : unknown, isAdd : unknown, callback) => {
             try {
                 checkLogin(socket);
-                const stack = this.saveStack(socket, server, name, composeYAML, isAdd);
+                const stack = this.saveStack(socket, server, name, composeYAML, composeENV, isAdd);
                 await stack.deploy(socket);
                 server.sendStackList();
                 callback({
@@ -25,10 +25,10 @@ export class DockerSocketHandler extends SocketHandler {
             }
         });
 
-        socket.on("saveStack", async (name : unknown, composeYAML : unknown, isAdd : unknown, callback) => {
+        socket.on("saveStack", async (name : unknown, composeYAML : unknown, composeENV : unknown, isAdd : unknown, callback) => {
             try {
                 checkLogin(socket);
-                this.saveStack(socket, server, name, composeYAML, isAdd);
+                this.saveStack(socket, server, name, composeYAML, composeENV, isAdd);
                 callback({
                     ok: true,
                     "msg": "Saved"
@@ -264,7 +264,7 @@ export class DockerSocketHandler extends SocketHandler {
         });
     }
 
-    saveStack(socket : DockgeSocket, server : DockgeServer, name : unknown, composeYAML : unknown, isAdd : unknown) : Stack {
+    saveStack(socket : DockgeSocket, server : DockgeServer, name : unknown, composeYAML : unknown, composeENV : unknown, isAdd : unknown) : Stack {
         // Check types
         if (typeof(name) !== "string") {
             throw new ValidationError("Name must be a string");
@@ -272,11 +272,14 @@ export class DockerSocketHandler extends SocketHandler {
         if (typeof(composeYAML) !== "string") {
             throw new ValidationError("Compose YAML must be a string");
         }
+        if (typeof(composeENV) !== "string") {
+            throw new ValidationError("Compose ENV must be a string");
+        }
         if (typeof(isAdd) !== "boolean") {
             throw new ValidationError("isAdd must be a boolean");
         }
 
-        const stack = new Stack(server, name, composeYAML);
+        const stack = new Stack(server, name, composeYAML, composeENV, false);
         stack.save(isAdd);
         return stack;
     }

backend/stack.ts

@@ -23,6 +23,7 @@ export class Stack {
     name: string;
     protected _status: number = UNKNOWN;
     protected _composeYAML?: string;
+    protected _composeENV?: string;
     protected _configFilePath?: string;
     protected _composeFileName: string = "compose.yaml";
     protected server: DockgeServer;
@@ -31,10 +32,11 @@ export class Stack {
 
     protected static managedStackList: Map<string, Stack> = new Map();
 
-    constructor(server : DockgeServer, name : string, composeYAML? : string, skipFSOperations = false) {
+    constructor(server : DockgeServer, name : string, composeYAML? : string, composeENV? : string, skipFSOperations = false) {
         this.name = name;
         this.server = server;
         this._composeYAML = composeYAML;
+        this._composeENV = composeENV;
 
         if (!skipFSOperations) {
             // Check if compose file name is different from compose.yaml
@@ -53,6 +55,7 @@ export class Stack {
         return {
             ...obj,
             composeYAML: this.composeYAML,
+            composeENV: this.composeENV,
         };
     }
 
@@ -105,6 +108,17 @@ export class Stack {
         return this._composeYAML;
     }
 
+    get composeENV() : string {
+        if (this._composeENV === undefined) {
+            try {
+                this._composeENV = fs.readFileSync(path.join(this.path, ".env"), "utf-8");
+            } catch (e) {
+                this._composeENV = "";
+            }
+        }
+        return this._composeENV;
+    }
+
     get path() : string {
         return path.join(this.server.stacksDir, this.name);
     }
@@ -149,6 +163,8 @@ export class Stack {
 
         // Write or overwrite the compose.yaml
         fs.writeFileSync(path.join(dir, this._composeFileName), this.composeYAML);
+        // Write or overwrite the .env
+        fs.writeFileSync(path.join(dir, ".env"), this.composeENV);
     }
 
     async deploy(socket? : DockgeSocket) : Promise<number> {
@@ -306,7 +322,7 @@ export class Stack {
         if (!skipFSOperations) {
             stack = new Stack(server, stackName);
         } else {
-            stack = new Stack(server, stackName, undefined, true);
+            stack = new Stack(server, stackName, undefined, undefined, true);
         }
 
         stack._status = UNKNOWN;

backend/terminal.ts

@@ -5,8 +5,6 @@ import { LimitQueue } from "./utils/limit-queue";
 import { DockgeSocket } from "./util-server";
 import {
     allowedCommandList, allowedRawKeys,
-    getComposeTerminalName,
-    getCryptoRandomInt,
     PROGRESS_TERMINAL_ROWS,
     TERMINAL_COLS,
     TERMINAL_ROWS
@@ -207,14 +205,20 @@ export class Terminal {
     }
 
     public static exec(server : DockgeServer, socket : DockgeSocket | undefined, terminalName : string, file : string, args : string | string[], cwd : string) : Promise<number> {
-        const terminal = new Terminal(server, terminalName, file, args, cwd);
+        return new Promise((resolve, reject) => {
-        terminal.rows = PROGRESS_TERMINAL_ROWS;
+            // check if terminal exists
+            if (Terminal.terminalMap.has(terminalName)) {
+                reject("Another operation is already running, please try again later.");
+                return;
+            }
 
-        if (socket) {
+            let terminal = new Terminal(server, terminalName, file, args, cwd);
-            terminal.join(socket);
+            terminal.rows = PROGRESS_TERMINAL_ROWS;
-        }
+
+            if (socket) {
+                terminal.join(socket);
+            }
 
-        return new Promise((resolve) => {
             terminal.onExit((exitCode : number) => {
                 resolve(exitCode);
             });

backend/util-common.ts

@@ -203,7 +203,7 @@ export function getContainerTerminalName(container : string) {
 }
 
 export function getContainerExecTerminalName(stackName : string, container : string, index : number) {
-    return "container-exec-" + container + "-" + index;
+    return "container-exec-" + stackName + "-" + container + "-" + index;
 }
 
 export function copyYAMLComments(doc : Document, src : Document) {

compose.yaml

@@ -13,10 +13,10 @@ services:
       # If you want to use private registries, you need to share the auth file with Dockge:
       # - /root/.docker/:/root/.docker
 
-      # Your stacks directory in the host (The paths inside container must be the same as the host)
+      # Stacks Directory
-      # ⚠️⚠️ If you did it wrong, your data could end up be written into a wrong path.
+      # ⚠️ READ IT CAREFULLY. If you did it wrong, your data could end up writing into a WRONG PATH.
-      # ✔️✔️✔️✔️ CORRECT: - /my-stacks:/my-stacks (Both paths match)
+      # ⚠️ 1. FULL path only. No relative path (MUST)
-      # ❌❌❌❌ WRONG: - /docker:/my-stacks (Both paths do not match)
+      # ⚠️ 2. Left Stacks Path === Right Stacks Path (MUST)
       - /opt/stacks:/opt/stacks
     environment:
       # Tell Dockge where is your stacks directory

docker/Base.Dockerfile

@@ -1,9 +1,7 @@
-FROM node:20-bookworm-slim
+# Due to the bug of #145, Node.js's version cannot be changed, unless upstream is fixed.
+FROM node:18.17.1-bookworm-slim
 ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"
-
-# COPY --from=docker:dind /usr/local/bin/docker /usr/local/bin/
-
 RUN apt update && apt install --yes --no-install-recommends \
     curl \
     ca-certificates \
@@ -24,16 +22,3 @@ RUN apt update && apt install --yes --no-install-recommends \
     && rm -rf /var/lib/apt/lists/* \
     && npm install pnpm -g \
     && pnpm install -g tsx
-
-# ensures that /var/run/docker.sock exists
-# changes the ownership of /var/run/docker.sock
-RUN touch /var/run/docker.sock && chown node:node /var/run/docker.sock
-
-# Full Base Image
-# MariaDB, Chromium and fonts
-#FROM base-slim AS base
-#ENV DOCKGE_ENABLE_EMBEDDED_MARIADB=1
-#RUN apt update && \
-#   apt --yes --no-install-recommends install mariadb-server && \
-#   rm -rf /var/lib/apt/lists/* && \
-#   apt --yes autoremove

docker/BuildHealthCheck.Dockerfile

@@ -0,0 +1,10 @@
+############################################
+# Build in Golang
+############################################
+FROM golang:1.21.4-bookworm
+WORKDIR /app
+ARG TARGETPLATFORM
+COPY ./extra/healthcheck.go ./extra/healthcheck.go
+
+# Compile healthcheck.go
+RUN go build -x -o ./extra/healthcheck ./extra/healthcheck.go

docker/Dockerfile

@@ -1,3 +1,8 @@
+############################################
+# Healthcheck Binary
+############################################
+FROM louislam/dockge:build-healthcheck AS build_healthcheck
+
 ############################################
 # Build
 ############################################
@@ -12,16 +17,17 @@ RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --prod --frozen-l
 ############################################
 FROM louislam/dockge:base AS release
 WORKDIR /app
-COPY --chown=node:node  . .
+COPY --chown=node:node --from=build_healthcheck /app/extra/healthcheck /app/extra/healthcheck
 COPY --from=build /app/node_modules /app/node_modules
+COPY --chown=node:node  . .
 RUN mkdir ./data
 
 VOLUME /app/data
 EXPOSE 5001
+HEALTHCHECK --interval=60s --timeout=30s --start-period=60s --retries=5 CMD extra/healthcheck
 ENTRYPOINT ["/usr/bin/dumb-init", "--"]
 CMD ["tsx", "./backend/index.ts"]
 
-
 ############################################
 # Mark as Nightly
 ############################################

extra/healthcheck.go

@@ -0,0 +1,74 @@
+/*
+ * If changed, have to run `npm run build-docker-builder-go`.
+ * This script should be run after a period of time (180s), because the server may need some time to prepare.
+ */
+package main
+
+import (
+	"crypto/tls"
+	"io/ioutil"
+	"log"
+	"net/http"
+	"os"
+	"strings"
+	"time"
+)
+
+func main() {
+	// Is K8S + "dockge" as the container name
+	// See https://github.com/louislam/uptime-kuma/pull/2083
+	isK8s := strings.HasPrefix(os.Getenv("DOCKGE_PORT"), "tcp://")
+
+	// process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0";
+	http.DefaultTransport.(*http.Transport).TLSClientConfig = &tls.Config{
+		InsecureSkipVerify: true,
+	}
+
+	client := http.Client{
+		Timeout: 28 * time.Second,
+	}
+
+	sslKey := os.Getenv("DOCKGE_SSL_KEY")
+	sslCert := os.Getenv("DOCKGE_SSL_CERT")
+
+	hostname := os.Getenv("DOCKGE_HOST")
+	if len(hostname) == 0 {
+		hostname = "127.0.0.1"
+	}
+
+	port := ""
+	// DOCKGE_PORT is override by K8S unexpectedly,
+	if !isK8s {
+		port = os.Getenv("DOCKGE_PORT")
+	}
+	if len(port) == 0 {
+		port = "5001"
+	}
+
+	protocol := ""
+	if len(sslKey) != 0 && len(sslCert) != 0 {
+		protocol = "https"
+	} else {
+		protocol = "http"
+	}
+
+	url := protocol + "://" + hostname + ":" + port
+
+	log.Println("Checking " + url)
+	resp, err := client.Get(url)
+
+	if err != nil {
+		log.Fatalln(err)
+	}
+
+	defer resp.Body.Close()
+
+	_, err = ioutil.ReadAll(resp.Body)
+
+	if err != nil {
+		log.Fatalln(err)
+	}
+
+	log.Printf("Health Check OK [Res Code: %d]\n", resp.StatusCode)
+
+}

extra/reset-password.ts

@@ -0,0 +1,84 @@
+import { Database } from "../backend/database";
+import { R } from "redbean-node";
+import readline from "readline";
+import { User } from "../backend/models/user";
+import { DockgeServer } from "../backend/dockge-server";
+import { log } from "../backend/log";
+
+console.log("== Dockge Reset Password Tool ==");
+
+const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout
+});
+
+export const main = async () => {
+    const server = new DockgeServer();
+
+    // Check if
+
+    console.log("Connecting the database");
+    try {
+        await Database.init(server);
+    } catch (e) {
+        if (e instanceof Error) {
+            log.error("server", "Failed to connect to your database: " + e.message);
+        }
+        process.exit(1);
+    }
+
+    try {
+        // No need to actually reset the password for testing, just make sure no connection problem. It is ok for now.
+        if (!process.env.TEST_BACKEND) {
+            const user = await R.findOne("user");
+            if (! user) {
+                throw new Error("user not found, have you installed?");
+            }
+
+            console.log("Found user: " + user.username);
+
+            while (true) {
+                let password = await question("New Password: ");
+                let confirmPassword = await question("Confirm New Password: ");
+
+                if (password === confirmPassword) {
+                    await User.resetPassword(user.id, password);
+
+                    // Reset all sessions by reset jwt secret
+                    await server.initJWTSecret();
+
+                    break;
+                } else {
+                    console.log("Passwords do not match, please try again.");
+                }
+            }
+            console.log("Password reset successfully.");
+        }
+    } catch (e) {
+        if (e instanceof Error) {
+            console.error("Error: " + e.message);
+        }
+    }
+
+    await Database.close();
+    rl.close();
+
+    console.log("Finished.");
+};
+
+/**
+ * Ask question of user
+ * @param question Question to ask
+ * @returns Users response
+ */
+function question(question : string) : Promise<string> {
+    return new Promise((resolve) => {
+        rl.question(question, (answer) => {
+            resolve(answer);
+        });
+    });
+}
+
+if (!process.env.TEST_BACKEND) {
+    main();
+}

frontend/src/components/ArrayInput.vue

@@ -30,6 +30,10 @@ export default {
         displayName: {
             type: String,
             required: true,
+        },
+        objectType: {
+            type: String,
+            default: "service",
         }
     },
     data() {
@@ -41,8 +45,7 @@ export default {
         array() {
             // Create the array if not exists, it should be safe.
             if (!this.service[this.name]) {
-                // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+                return [];
-                this.service[this.name] = [];
             }
             return this.service[this.name];
         },
@@ -56,8 +59,24 @@ export default {
             return this.service[this.name] !== undefined;
         },
 
+        /**
+         * Not a good name, but it is used to get the object.
+         */
         service() {
-            return this.$parent.$parent.service;
+            if (this.objectType === "service") {
+                // Used in Container.vue
+                return this.$parent.$parent.service;
+            } else if (this.objectType === "x-dockge") {
+
+                if (!this.$parent.$parent.jsonConfig["x-dockge"]) {
+                    return {};
+                }
+
+                // Used in Compose.vue
+                return this.$parent.$parent.jsonConfig["x-dockge"];
+            } else {
+                return {};
+            }
         },
 
         valid() {
@@ -81,6 +100,19 @@ export default {
     },
     methods: {
         addField() {
+
+            // Create the object if not exists.
+            if (this.objectType === "x-dockge") {
+                if (!this.$parent.$parent.jsonConfig["x-dockge"]) {
+                    this.$parent.$parent.jsonConfig["x-dockge"] = {};
+                }
+            }
+
+            // Create the array if not exists.
+            if (!this.service[this.name]) {
+                this.service[this.name] = [];
+            }
+
             this.array.push("");
         },
         remove(index) {

frontend/src/components/ArraySelect.vue

@@ -49,8 +49,7 @@ export default {
         array() {
             // Create the array if not exists, it should be safe.
             if (!this.service[this.name]) {
-                // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+                return [];
-                this.service[this.name] = [];
             }
             return this.service[this.name];
         },
@@ -89,6 +88,10 @@ export default {
     },
     methods: {
         addField() {
+            // Create the array if not exists.
+            if (!this.service[this.name]) {
+                this.service[this.name] = [];
+            }
             this.array.push("");
         },
         remove(index) {

frontend/src/components/StackList.vue

@@ -152,6 +152,14 @@ export default {
             });
 
             result.sort((m1, m2) => {
+
+                // sort by managed by dockge
+                if (m1.isManagedByDockge && !m2.isManagedByDockge) {
+                    return -1;
+                } else if (!m1.isManagedByDockge && m2.isManagedByDockge) {
+                    return 1;
+                }
+
                 if (m1.status !== m2.status) {
                     if (m2.status === RUNNING) {
                         return 1;

frontend/src/i18n.ts

@@ -19,10 +19,14 @@ const languageList = {
     "ru": "Русский",
     "cs-CZ": "Čeština",
     "ar": "العربية",
-    "th":"ไทย",
+    "th": "ไทย",
-    "it-IT":"Italiano",
+    "it-IT": "Italiano",
-    "sv-SE":"Svenska",
+    "sv-SE": "Svenska",
-    "uk-UA":"Українська"
+    "uk-UA": "Українська",
+    "da": "Dansk",
+    "ja": "日本語",
+    "nl": "Nederlands",
+    "ro": "Română",
 };
 
 let messages = {

frontend/src/lang/README.md

@@ -2,13 +2,18 @@
 
 A simple guide on how to translate `Dockge` in your native language.
 
+## How to Translate
+
+(11-26-2023) Updated
+
+1. Go to <https://weblate.kuma.pet>
+2. Register an account on Weblate
+3. Make sure your GitHub email is matched with Weblate's account, so that it could show you as a contributor on GitHub
+4. Choose your language on Weblate and start translating.
+
 ## How to add a new language in the dropdown
 
-(11-21-2023) Updated
+1. Add your Language at <https://weblate.kuma.pet/projects/dockge/dockge/>.
-
+2. Find the language code (You can find it at the end of the URL)
-1. Add your Language at `frontend/src/lang/` by creating a new file with your language Code, format: `zh-TW.json` .
-2. Copy the content from `en.json` and make translations from that.
 3. Add your language at the end of `languageList` in `frontend/src/i18n.ts`, format: `"zh-TW": "繁體中文 (台灣)"`,
 4. Commit to new branch and make a new Pull Request for me to approve.
-
-*Note:* Currently we are only accepting one Pull Request per Language Translate.

frontend/src/lang/ar.json

@@ -12,8 +12,8 @@
     "registry": "السجل",
     "compose": "أنشاء كمبوز",
     "addFirstStackMsg": "أنشيء أول كمبوز!",
-    "stackName" : "اسم المكدسة",
+    "stackName": "اسم المكدسة",
-    "deployStack": "شنر",
+    "deployStack": "نشر",
     "deleteStack": "حذف",
     "stopStack": "إيقاف",
     "restartStack": "إعادة تشغيل",
@@ -23,7 +23,7 @@
     "editStack": "تعديل",
     "discardStack": "إهمال",
     "saveStackDraft": "حفظ",
-    "notAvailableShort" : "غير متوفر",
+    "notAvailableShort": "غير متوفر",
     "deleteStackMsg": "هل أنت متأكد أنك تريد حذف هذه المكدسة؟",
     "stackNotManagedByDockgeMsg": "لا يتم إدارة هذه المكدس بواسطة Dockge.",
     "primaryHostname": "اسم المضيف الرئيسي",
@@ -46,7 +46,7 @@
     "deleteContainer": "حذف",
     "addContainer": "أضافة حاوية",
     "addNetwork": "أضافة شبكة",
-    "disableauth.message1": "هل أنت متأكد أنك تريد  <strong>تعطيل المصادقة</strong>?",
+    "disableauth.message1": "هل أنت متأكد أنك تريد <strong>تعطيل المصادقة</strong>؟",
     "disableauth.message2": "إنه مصمم للحالات <strong>التي تنوي فيها مصادقة الطرف الثالث</strong> أمام Dockge مثل Cloudflare Access, Authelia أو أي من آليات المصادقة الأخرى.",
     "passwordNotMatchMsg": "كلمة المرور المكررة غير متطابقة.",
     "autoGet": "الجلب التلقائي",
@@ -91,5 +91,12 @@
     "Allowed commands:": "الأوامر المسموح بها:",
     "Internal Networks": "الشبكات الداخلية",
     "External Networks": "الشبكات الخارجية",
-    "No External Networks": "لا توجد شبكات خارجية"
+    "No External Networks": "لا توجد شبكات خارجية",
+    "reverseProxyMsg2": "تحقق كيف يتم إعداده لمقبس ويب",
+    "Cannot connect to the socket server.": "تعذر الاتصال بخادم المقبس.",
+    "reconnecting...": "إعادة الاتصال…",
+    "url": "رابط | روابط",
+    "extra": "إضافات",
+    "reverseProxyMsg1": "هل تستدخم خادم عكسي؟",
+    "connecting...": "جاري الاتصال بخادم المقبس…"
 }

frontend/src/lang/da.json

@@ -0,0 +1,102 @@
+{
+    "languageName": "Dansk",
+    "authIncorrectCreds": "Forkert brugernavn eller adgangskode.",
+    "PasswordsDoNotMatch": "Adgangskode stemmer ikke overens.",
+    "Repeat Password": "Gentag adgangskode",
+    "Create": "Opret",
+    "signedInDisp": "Logget ind som {0}",
+    "signedInDispDisabled": "Auth Deaktiveret.",
+    "home": "Hjem",
+    "console": "Konsol",
+    "registry": "Registry",
+    "compose": "Compose",
+    "stackName": "Stack-navn",
+    "deployStack": "Udrulle",
+    "deleteStack": "Slet",
+    "stopStack": "Stop",
+    "restartStack": "Genstart",
+    "updateStack": "Opdatere",
+    "startStack": "Start",
+    "downStack": "Stop & Sluk",
+    "editStack": "Editere",
+    "discardStack": "Annuller",
+    "saveStackDraft": "Gem",
+    "notAvailableShort": "Ugyldig",
+    "stackNotManagedByDockgeMsg": "Denne stack administreres ikke af Dockge.",
+    "primaryHostname": "Primært værtsnavn",
+    "general": "Generelt",
+    "container": "Container | Containere",
+    "scanFolder": "Scan Stack-mappe",
+    "dockerImage": "Billede",
+    "restartPolicyUnlessStopped": "Medmindre stoppet",
+    "restartPolicyAlways": "Altid",
+    "restartPolicyOnFailure": "Ved fejl",
+    "restartPolicyNo": "Nej",
+    "restartPolicy": "Genstart politik",
+    "containerName": "Container navn",
+    "port": "Port | Porte",
+    "volume": "Volumen | Voluminer",
+    "network": "Netværk | Netværker",
+    "dependsOn": "Container Dependency | Container Dependencies",
+    "addListItem": "Tilføj {0}",
+    "deleteContainer": "Slet",
+    "addNetwork": "Tilføj Netværk",
+    "passwordNotMatchMsg": "Koden du gentog stemmer ikke overens.",
+    "autoGet": "Auto Get",
+    "add": "Tilføj",
+    "Edit": "Redigere",
+    "applyToYAML": "Anvend til YAML",
+    "createExternalNetwork": "Skabe",
+    "addInternalNetwork": "Tilføj",
+    "Save": "Gem",
+    "Language": "Sprog",
+    "Current User": "Nuværende bruger",
+    "Change Password": "Ændre adgangskode",
+    "Current Password": "Nuværende adgangskode",
+    "New Password": "Ny adgangskode",
+    "Repeat New Password": "Gentag ny adgangskode",
+    "Update Password": "Opdater adgangskode",
+    "Advanced": "Avanceret",
+    "Please use this option carefully!": "Brug venligst denne indstilling forsigtigt!",
+    "Enable Auth": "Aktiver Auth",
+    "Disable Auth": "Deaktiver Auth",
+    "I understand, please disable": "Jeg forstår, venligst deaktiver",
+    "Leave": "Forlad",
+    "Frontend Version": "Frontend Version",
+    "Check Update On GitHub": "Tjek opdatering på GitHub",
+    "Also check beta release": "Tjek også betaversionen",
+    "Remember me": "Husk mig",
+    "Login": "Login",
+    "Username": "Brugernavn",
+    "Password": "Adgangskode",
+    "Settings": "Indstillinger",
+    "Logout": "Log ud",
+    "Convert to Compose": "Konverter til Compose",
+    "active": "aktive",
+    "exited": "forladt",
+    "inactive": "inaktive",
+    "Appearance": "Udseende",
+    "Security": "Sikkerhed",
+    "Docker Run": "Docker Kør",
+    "About": "Om",
+    "Allowed commands:": "Tilladte kommandoer:",
+    "Internal Networks": "Interne netværk",
+    "External Networks": "Eksterne netværk",
+    "No External Networks": "Ingen eksterne netværk",
+    "reverseProxyMsg1": "Bruger du en Reverse-Proxy?",
+    "reverseProxyMsg2": "Tjek, hvordan du konfigurerer det til WebSocket",
+    "Cannot connect to the socket server.": "Kan ikke oprette forbindelse til socket-serveren.",
+    "reconnecting...": "Genopretter forbindelse…",
+    "connecting...": "Opretter forbindelse til socket-serveren…",
+    "url": "URL | URL'er",
+    "extra": "Ekstra",
+    "Create your admin account": "Opret din administratorkonto",
+    "addFirstStackMsg": "Compose din første stack!",
+    "deleteStackMsg": "Er du sikker på, at du vil slette denne stack?",
+    "environmentVariable": "Miljøvariabel | miljøvariabler",
+    "addContainer": "Tilføj Container",
+    "disableauth.message1": "Er du sikker på, at du vil <strong>deaktivere godkendelse</strong>?",
+    "disableauth.message2": "Det er designet til scenarier <strong>hvor du har til hensigt at implementere tredjepartsgodkendelse</strong> foran Dockge såsom Cloudflare Access, Authelia eller andre godkendelsesmekanismer.",
+    "Show update if available": "Vis opdatering, hvis tilgængelig",
+    "Lowercase only": "Kun små bogstaver"
+}

frontend/src/lang/de.json

@@ -6,14 +6,14 @@
     "Repeat Password": "Passwort wiederholen",
     "Create": "Erstellen",
     "signedInDisp": "Angemeldet als {0}",
-    "signedInDispDisabled": "Authentifizierung deaktiviert.",
+    "signedInDispDisabled": "Anmeldung deaktiviert.",
     "home": "Startseite",
     "console": "Konsole",
-    "registry": "Register",
+    "registry": "Container Registry",
-    "compose": "Zusammenstellen",
+    "compose": "",
     "addFirstStackMsg": "Stelle deinen ersten Stack zusammen!",
-    "stackName" : "Stack-Name",
+    "stackName": "Stack-Name",
-    "deployStack": "Bereitstellen",
+    "deployStack": "Deployen",
     "deleteStack": "Löschen",
     "stopStack": "Anhalten",
     "restartStack": "Neustarten",
@@ -22,33 +22,33 @@
     "editStack": "Bearbeiten",
     "discardStack": "Verwerfen",
     "saveStackDraft": "Speichern",
-    "notAvailableShort" : "N/A",
+    "notAvailableShort": "N/V",
     "deleteStackMsg": "Möchtest du diesen Stack wirklich löschen?",
     "stackNotManagedByDockgeMsg": "Dieser Stack wird nicht von Dockge verwaltet.",
     "primaryHostname": "Primärer Hostname",
     "general": "Allgemein",
-    "container": "Container | Container",
+    "container": "Container",
     "scanFolder": "Stacks-Ordner durchsuchen",
     "dockerImage": "Image",
     "restartPolicyUnlessStopped": "Falls nicht gestoppt",
     "restartPolicyAlways": "Immer",
     "restartPolicyOnFailure": "Bei Fehler",
     "restartPolicyNo": "Kein Neustart",
-    "environmentVariable": "Umgebungsvariable | Umgebungsvariablen",
+    "environmentVariable": "Umgebungsvariable/n",
     "restartPolicy": "Neustart Richtlinie",
     "containerName": "Container-Name",
-    "port": "Port | Ports",
+    "port": "Port / Ports",
-    "volume": "Volume | Volumes",
+    "volume": "Volume / Volumes",
     "network": "Netzwerk | Netzwerke",
-    "dependsOn": "Container-Abhängigkeit | Container-Abhängigkeiten",
+    "dependsOn": "Container-Abhängigkeit/en",
     "addListItem": "{0} hinzufügen",
     "deleteContainer": "Löschen",
     "addContainer": "Container hinzufügen",
     "addNetwork": "Netzwerk hinzufügen",
-    "disableauth.message1": "Bist du sicher, dass du die <strong>Authentifizierung deaktivieren</strong> möchtest?",
+    "disableauth.message1": "Bist du sicher, dass du die <strong>Anmeldung deaktivieren</strong> möchtest?",
     "disableauth.message2": "Es ist für Szenarien vorgesehen, <strong>in denen du beabsichtigst, eine Drittanbieter-Authentifizierung</strong> vor Dockge zu implementieren, wie zum Beispiel Cloudflare Access, Authelia oder andere Authentifizierungsmechanismen.",
     "passwordNotMatchMsg": "Das wiederholte Passwort stimmt nicht überein.",
-    "autoGet": "Automatisch holen",
+    "autoGet": "Automatisch laden",
     "add": "Hinzufügen",
     "Edit": "Bearbeiten",
     "applyToYAML": "Auf YAML anwenden",
@@ -64,8 +64,8 @@
     "Update Password": "Passwort aktualisieren",
     "Advanced": "Erweitert",
     "Please use this option carefully!": "Bitte verwende diese Option sorgfältig!",
-    "Enable Auth": "Authentifizierung aktivieren",
+    "Enable Auth": "Anmeldung aktivieren",
-    "Disable Auth": "Authentifizierung deaktivieren",
+    "Disable Auth": "Anmeldung deaktivieren",
     "I understand, please disable": "Ich verstehe, bitte deaktivieren",
     "Leave": "Verlassen",
     "Frontend Version": "Frontend Version",
@@ -90,5 +90,13 @@
     "Allowed commands:": "Zugelassene Befehle:",
     "Internal Networks": "Interne Netzwerke",
     "External Networks": "Externe Netzwerke",
-    "No External Networks": "Keine externen Netzwerke"
+    "No External Networks": "Keine externen Netzwerke",
-}
+    "Cannot connect to the socket server.": "Keine Verbindung zum Socket Server.",
+    "reverseProxyMsg1": "Wird ein Reverse Proxy genutzt?",
+    "reconnecting...": "Erneuter Verbindungsaufbau…",
+    "downStack": "Stoppen & Aus",
+    "extra": "Extra",
+    "url": "URL / URLs",
+    "reverseProxyMsg2": "Lerne wie dieser für WebSockets zu konfigurieren ist.",
+    "connecting...": "Verbindungsaufbau zum Socket Server…"
+}

frontend/src/lang/en.json

@@ -12,7 +12,7 @@
     "registry": "Registry",
     "compose": "Compose",
     "addFirstStackMsg": "Compose your first stack!",
-    "stackName" : "Stack Name",
+    "stackName": "Stack Name",
     "deployStack": "Deploy",
     "deleteStack": "Delete",
     "stopStack": "Stop",
@@ -23,7 +23,7 @@
     "editStack": "Edit",
     "discardStack": "Discard",
     "saveStackDraft": "Save",
-    "notAvailableShort" : "N/A",
+    "notAvailableShort": "N/A",
     "deleteStackMsg": "Are you sure you want to delete this stack?",
     "stackNotManagedByDockgeMsg": "This stack is not managed by Dockge.",
     "primaryHostname": "Primary Hostname",
@@ -91,5 +91,12 @@
     "Allowed commands:": "Allowed commands:",
     "Internal Networks": "Internal Networks",
     "External Networks": "External Networks",
-    "No External Networks": "No External Networks"
+    "No External Networks": "No External Networks",
+    "reverseProxyMsg1": "Using a Reverse Proxy?",
+    "reverseProxyMsg2": "Check how to config it for WebSocket",
+    "Cannot connect to the socket server.": "Cannot connect to the socket server.",
+    "reconnecting...": "Reconnecting…",
+    "connecting...": "Connecting to the socket server…",
+    "url": "URL | URLs",
+    "extra": "Extra"
 }

frontend/src/lang/fr.json

@@ -1,5 +1,5 @@
 {
-    "languageName": "Francais",
+    "languageName": "Français",
     "Create your admin account": "Créez votre compte administrateur",
     "authIncorrectCreds": "identifiant ou mot de passe incorrect.",
     "Repeat Password": "Répéter le mot de passe",
@@ -11,8 +11,8 @@
     "console": "Console",
     "registry": "Registre",
     "compose": "Compose",
-    "addFirstStackMsg": "Créez votre première pile!",
+    "addFirstStackMsg": "Créez votre première pile !",
-    "stackName" : "Nom de la pile",
+    "stackName": "Nom de la pile",
     "deployStack": "Déployer",
     "deleteStack": "Supprimer",
     "stopStack": "Arrêter",
@@ -22,11 +22,11 @@
     "editStack": "Modifier",
     "discardStack": "Ignorer",
     "saveStackDraft": "Sauvegarder",
-    "notAvailableShort" : "N/A",
+    "notAvailableShort": "N/A",
     "deleteStackMsg": "Êtes-vous sûr de vouloir supprimer cette pile ?",
     "stackNotManagedByDockgeMsg": "Cette pile n'est pas gérée par Dockge.",
     "primaryHostname": "Nom d'hôte principal",
-    "general": "Générale",
+    "general": "Général",
     "container": "Conteneur | Conteneurs",
     "scanFolder": "Analyser le dossier des piles",
     "dockerImage": "Image",
@@ -51,7 +51,7 @@
     "autoGet": "Obtention automatique",
     "add": "Ajouter",
     "Edit": "Modifier",
-    "applyToYAML": "Appliquer à YAML",
+    "applyToYAML": "Appliquer au YAML",
     "createExternalNetwork": "Créer",
     "addInternalNetwork": "Ajouter",
     "Save": "Enregistrer",
@@ -87,8 +87,16 @@
     "Appearance": "Apparence",
     "Security": "Sécurité",
     "About": "À propos",
-    "Allowed commands:": "Commandes autorisées:",
+    "Allowed commands:": "Commandes autorisées :",
     "Internal Networks": "Réseaux Internes",
     "External Networks": "Réseaux Externes",
-    "No External Networks": "Aucun Réseau Externe"
+    "No External Networks": "Aucun Réseau Externe",
+    "reverseProxyMsg2": "Vérifier comment le configurer pour WebSocket",
+    "connecting...": "Connexion au serveur socket…",
+    "url": "URL | URLs",
+    "extra": "Supplémentaire",
+    "downStack": "Arrêter et désactiver",
+    "reverseProxyMsg1": "Utilisez vous un proxy inverse ?",
+    "Cannot connect to the socket server.": "Impossible de se connecter au serveur socket.",
+    "reconnecting...": "Reconnexion…"
 }

frontend/src/lang/ja.json

@@ -0,0 +1,98 @@
+{
+    "authIncorrectCreds": "ユーザーネームまたはパスワードが正しくありません。",
+    "PasswordsDoNotMatch": "パスワードが一致しません。",
+    "Repeat Password": "パスワードを再度入力してください",
+    "Create": "作成",
+    "signedInDispDisabled": "認証が無効化されています。",
+    "home": "ホーム",
+    "console": "コンソール",
+    "registry": "レジストリ",
+    "stackName": "スタック名",
+    "deployStack": "デプロイ",
+    "deleteStack": "削除",
+    "stopStack": "停止",
+    "restartStack": "再起動",
+    "updateStack": "更新",
+    "startStack": "起動",
+    "editStack": "編集",
+    "discardStack": "破棄",
+    "saveStackDraft": "保存",
+    "stackNotManagedByDockgeMsg": "このスタックはDockageによって管理されていません。",
+    "general": "一般",
+    "scanFolder": "スタックフォルダをスキャン",
+    "dockerImage": "イメージ",
+    "environmentVariable": "環境変数",
+    "restartPolicy": "再起動ポリシー",
+    "containerName": "コンテナ名",
+    "port": "ポート",
+    "volume": "ボリューム",
+    "network": "ネットワーク",
+    "addListItem": "{0} を追加",
+    "addContainer": "コンテナを追加",
+    "addNetwork": "ネットワークを追加",
+    "compose": "Compose",
+    "primaryHostname": "主ホスト名",
+    "container": "コンテナ",
+    "dependsOn": "コンテナ依存関係",
+    "downStack": "停止して削除",
+    "notAvailableShort": "N/A",
+    "restartPolicyUnlessStopped": "手動で停止されるまで",
+    "restartPolicyAlways": "常時",
+    "restartPolicyOnFailure": "失敗時",
+    "restartPolicyNo": "しない",
+    "passwordNotMatchMsg": "繰り返しのパスワードが一致しません。",
+    "autoGet": "自動取得",
+    "add": "追加",
+    "Edit": "編集",
+    "applyToYAML": "YAMLに適用",
+    "createExternalNetwork": "作成",
+    "addInternalNetwork": "追加",
+    "Save": "保存",
+    "Language": "言語",
+    "Change Password": "パスワードを変更する",
+    "Current Password": "現在のパスワード",
+    "New Password": "新しいパスワード",
+    "Update Password": "パスワードを更新",
+    "Advanced": "高度",
+    "Please use this option carefully!": "このオプションは注意して使用してください！",
+    "Enable Auth": "認証を有効化",
+    "Disable Auth": "認証を無効化",
+    "Check Update On GitHub": "GitHubで更新を確認",
+    "Show update if available": "アップデートがある場合表示",
+    "Also check beta release": "ベータ版のリリースも確認する",
+    "Login": "ログイン",
+    "Username": "ユーザー名",
+    "Password": "パスワード",
+    "Settings": "設定",
+    "Logout": "ログアウト",
+    "Convert to Compose": "Composeに変換",
+    "Appearance": "外観",
+    "Security": "セキュリティ",
+    "Allowed commands:": "許可されたコマンド:",
+    "Internal Networks": "内部ネットワーク",
+    "External Networks": "外部ネットワーク",
+    "reverseProxyMsg2": "WebSocketの設定方法を確認",
+    "Cannot connect to the socket server.": "ソケットサーバーに接続できません。",
+    "reconnecting...": "再接続中…",
+    "Leave": "やめる",
+    "Frontend Version": "フロントエンドバージョン",
+    "Remember me": "覚えておく",
+    "No External Networks": "外部ネットワークなし",
+    "exited": "終了済み",
+    "inactive": "非アクティブ",
+    "active": "アクティブ",
+    "languageName": "日本語",
+    "Create your admin account": "管理者アカウントを作成してください",
+    "signedInDisp": "{0} としてログイン中",
+    "addFirstStackMsg": "最初のスタックを組み立てましょう！",
+    "deleteStackMsg": "本当にこのスタックを削除しますか？",
+    "deleteContainer": "削除",
+    "disableauth.message1": "本当に<strong>認証を無効化</strong>しますか?",
+    "disableauth.message2": "これはCloudflare AccessやAutheliaなどの認証手段をDockgeの前段に置いて<strong>サードパーティー認証を実装することをあなたが意図している</strong>場合のために設計されています。",
+    "Current User": "現在のユーザー",
+    "Repeat New Password": "新しいパスワードを繰り返してください",
+    "I understand, please disable": "理解しました。無効化してください",
+    "Lowercase only": "小文字のみ",
+    "reverseProxyMsg1": "リバースプロキシを使用していますか？",
+    "connecting...": "ソケットサーバーに接続中…"
+}

frontend/src/lang/nl.json

@@ -0,0 +1,102 @@
+{
+    "languageName": "Nederlands",
+    "authIncorrectCreds": "Onjuiste gebruikersnaam of wachtwoord.",
+    "PasswordsDoNotMatch": "Paswoorden komen niet overeen.",
+    "Repeat Password": "Herhaal wachtwoord",
+    "Create": "Aanmaken",
+    "signedInDisp": "Ingelogd als {0}",
+    "home": "Startpagina",
+    "console": "Console",
+    "registry": "Register",
+    "compose": "Samenstellen",
+    "stackName": "Stack naam",
+    "deployStack": "Opzetten",
+    "deleteStack": "Verwijder",
+    "stopStack": "Stop",
+    "restartStack": "Herstart",
+    "updateStack": "Update",
+    "startStack": "Start",
+    "downStack": "Stop & Down",
+    "editStack": "Bewerken",
+    "discardStack": "Verwijderen",
+    "saveStackDraft": "Opslaan",
+    "notAvailableShort": "NVT",
+    "stackNotManagedByDockgeMsg": "Deze stack wordt niet beheerd door Dockge.",
+    "primaryHostname": "Primaire hostnaam",
+    "general": "Algemeen",
+    "scanFolder": "Scan stacks folder",
+    "dockerImage": "Image",
+    "restartPolicyUnlessStopped": "Tenzij gestopt",
+    "restartPolicyAlways": "Altijd",
+    "restartPolicyOnFailure": "Bij fout",
+    "restartPolicyNo": "Neen",
+    "environmentVariable": "Omgevings variabele(n)",
+    "restartPolicy": "Herstart policy",
+    "containerName": "Containernaam",
+    "port": "Poort(en)",
+    "volume": "Volume(s)",
+    "network": "Netwerk(en)",
+    "addListItem": "Voeg {0} toe",
+    "deleteContainer": "Verwijder",
+    "addContainer": "Container toevoegen",
+    "addNetwork": "Netwerk toevoegen",
+    "signedInDispDisabled": "Aanmelden uitgeschakeld.",
+    "container": "Container(s)",
+    "autoGet": "Auto ophalen",
+    "add": "Toevoegen",
+    "Edit": "Bewerken",
+    "applyToYAML": "Toevoegen aan YAML",
+    "createExternalNetwork": "Aanmaken",
+    "addInternalNetwork": "Toevoegen",
+    "Save": "Opslaan",
+    "Language": "Taal",
+    "Change Password": "Verander wachtwoord",
+    "Current Password": "Huidig wachtwoord",
+    "New Password": "Nieuw wachtwoord",
+    "Repeat New Password": "Herhaal nieuw wachtwoord",
+    "Update Password": "Update wachtwoord",
+    "Advanced": "Geavanceerd",
+    "I understand, please disable": "Begrepen, dit uitschakelen",
+    "Disable Auth": "Aanmelden uitschakelen",
+    "Enable Auth": "Aanmelden inschakelen",
+    "Leave": "Afmelden",
+    "Frontend Version": "Frontend versie",
+    "Check Update On GitHub": "Controleer via GitHub op updates",
+    "Show update if available": "Toon update indien beschikbaar",
+    "Remember me": "Onthoud mij",
+    "Login": "Inloggen",
+    "Username": "Gebruikersnaam",
+    "Password": "Wachtwoord",
+    "Settings": "Instellingen",
+    "Logout": "Uitloggen",
+    "Lowercase only": "Geen hoofdletters",
+    "Docker Run": "Docker run",
+    "active": "actief",
+    "exited": "gestopt",
+    "inactive": "inactief",
+    "Appearance": "Uiterlijk",
+    "Security": "Beveiliging",
+    "About": "Over",
+    "Allowed commands:": "Toegelaten commando's:",
+    "Internal Networks": "Interne netwerken",
+    "No External Networks": "Geen externe netwerken",
+    "reverseProxyMsg1": "Reverse proxy in gebruik?",
+    "reverseProxyMsg2": "Controleer hoe te configureren voor WebSocket",
+    "Cannot connect to the socket server.": "Kan geen verbinding maken met de socket server.",
+    "reconnecting...": "Herverbinden...",
+    "connecting...": "Verbinden met de socket server...",
+    "url": "Url(s)",
+    "extra": "Extra",
+    "Create your admin account": "Creëer je beheerders-account",
+    "addFirstStackMsg": "Maak je eerste stack!",
+    "deleteStackMsg": "Zeker dat je deze stack wilt verwijderen?",
+    "dependsOn": "Container afhankelijkheid | afhankelijkheden",
+    "disableauth.message1": "Zeker dat u <strong>aanmelden</strong> wilt uitschakelen?",
+    "disableauth.message2": "Dit is enkel bedoeld om te gebruiken wanneer je<strong> third-party autorisatie wilt gebruiken voor Dockge</strong>, zoals Cloudflare Acces, Authelia, ...",
+    "passwordNotMatchMsg": "De wachtwoorden komen niet overeen.",
+    "Current User": "Huidige gebruiker",
+    "Please use this option carefully!": "Wees voorzichtig met deze optie!",
+    "Also check beta release": "Controleer ook op beta releases",
+    "Convert to Compose": "Converteer naar compose",
+    "External Networks": "Externe netwerken"
+}

frontend/src/lang/ro.json

@@ -0,0 +1,102 @@
+{
+    "Create your admin account": "Creați-vă contul de administrator",
+    "PasswordsDoNotMatch": "Parolele nu se potrivesc.",
+    "Repeat Password": "Repetați parola",
+    "signedInDisp": "Conectat ca {0}",
+    "signedInDispDisabled": "Autentificare dezactivată.",
+    "Create": "Creează",
+    "home": "Acasă",
+    "console": "Consolă",
+    "registry": "Registru",
+    "compose": "Compune",
+    "addFirstStackMsg": "Compune prima ta stivă!",
+    "stackName": "Nume stivă",
+    "deployStack": "Lansează",
+    "deleteStack": "Șterge",
+    "stopStack": "Oprește",
+    "restartStack": "Repornire",
+    "updateStack": "Actualizare",
+    "languageName": "Română",
+    "authIncorrectCreds": "Numele de utilizator sau parola incorectă.",
+    "startStack": "Pornește",
+    "editStack": "Editați",
+    "discardStack": "Renunţa",
+    "notAvailableShort": "N/A",
+    "deleteStackMsg": "Sigur doriți să ștergeți această stivă?",
+    "stackNotManagedByDockgeMsg": "Această stivă nu este gestionată de Dockge.",
+    "primaryHostname": "Numele gazdei principale",
+    "general": "General",
+    "container": "Container | Containere",
+    "scanFolder": "Scanează folderul cu stive",
+    "dockerImage": "Imagine",
+    "restartPolicyOnFailure": "La Defecţiune",
+    "restartPolicyNo": "Nu",
+    "restartPolicy": "Politica de repornire",
+    "restartPolicyAlways": "Mereu",
+    "containerName": "Numele Containerului",
+    "port": "Port | Porturi",
+    "volume": "Volum | Volume",
+    "network": "Reţea | Reţele",
+    "dependsOn": "Dependența containerului | Dependențele containerelor",
+    "addListItem": "Adaugă {0}",
+    "deleteContainer": "Șterge",
+    "addContainer": "Adaugă Container",
+    "addNetwork": "Adaugă Rețea",
+    "addInternalNetwork": "Adaugă",
+    "Save": "Salvează",
+    "Current User": "Utilizator Curent",
+    "Change Password": "Schimbă Parola",
+    "Current Password": "Parolă Curenta",
+    "New Password": "Parolă Nouă",
+    "Repeat New Password": "Repetă Parola Nouă",
+    "Update Password": "Actualizează Parola",
+    "Advanced": "Avansat",
+    "Enable Auth": "Activați Autentificarea",
+    "Disable Auth": "Dezactivați Autentificarea",
+    "I understand, please disable": "Am înțeles, vă rog dezactivați",
+    "Leave": "Părăsiți",
+    "Frontend Version": "Versiunea Frontend",
+    "Check Update On GitHub": "Verificați actualizarea pe GitHub",
+    "Also check beta release": "Verificați și versiunea beta",
+    "Remember me": "Ține-mă minte",
+    "Login": "Autentificare",
+    "Username": "Nume de utilizator",
+    "Password": "Parolă",
+    "passwordNotMatchMsg": "Parola repetată nu se potrivește.",
+    "autoGet": "Obținere automată",
+    "add": "Adăuga",
+    "Edit": "Editați",
+    "applyToYAML": "Aplicați la YAML",
+    "createExternalNetwork": "Creează",
+    "Settings": "Setări",
+    "Logout": "Deconectare",
+    "Lowercase only": "Doar litere mici",
+    "Convert to Compose": "Convertiți în Compose",
+    "Docker Run": "Docker Run",
+    "active": "activ",
+    "exited": "ieșit",
+    "inactive": "inactiv",
+    "Appearance": "Aspect",
+    "Security": "Securitate",
+    "About": "Despre",
+    "Allowed commands:": "Comenzi permise:",
+    "Internal Networks": "Rețele interne",
+    "External Networks": "Rețele externe",
+    "No External Networks": "Fără rețele externe",
+    "reverseProxyMsg1": "Folosești un proxy invers?",
+    "reverseProxyMsg2": "Verificați cum să-l configurați pentru WebSocket",
+    "Cannot connect to the socket server.": "Nu se poate conecta la serverul socket.",
+    "reconnecting...": "Reconectare...",
+    "connecting...": "Se conectează la serverul socket...",
+    "url": "URL | URLs",
+    "extra": "Suplimentar",
+    "downStack": "Opriți & Coborâți",
+    "saveStackDraft": "Salvați",
+    "restartPolicyUnlessStopped": "Dacă nu este oprit",
+    "environmentVariable": "Variabila de mediu | Variabile de mediu",
+    "Language": "Limbă",
+    "Please use this option carefully!": "Vă rugăm să utilizați această opțiune cu atenție!",
+    "Show update if available": "Afișează actualizarea dacă este disponibilă",
+    "disableauth.message1": "Sigur doriți să <strong>dezactivați autentificarea</strong>?",
+    "disableauth.message2": "Este conceput pentru scenarii <strong>în care intenționați să implementați autentificarea terță</strong> în fața Dockge-lui, cum ar fi Cloudflare Access, Authelia sau alte mecanisme de autentificare."
+}

frontend/src/lang/ru.json

@@ -5,14 +5,14 @@
     "PasswordsDoNotMatch": "Пароль не совпадает.",
     "Repeat Password": "Повторите пароль",
     "Create": "Создать",
-    "signedInDisp": "Авторизлван как {0}",
+    "signedInDisp": "Авторизован как",
     "signedInDispDisabled": "Авторизация выключена.",
     "home": "Главная",
     "console": "Консоль",
     "registry": "Registry",
     "compose": "Compose",
     "addFirstStackMsg": "Создайте свой первый стек!",
-    "stackName" : "Имя стека",
+    "stackName": "Имя стека",
     "deployStack": "Развернуть",
     "deleteStack": "Удалить",
     "stopStack": "Остановить",
@@ -22,7 +22,7 @@
     "editStack": "Изменить",
     "discardStack": "Отменить",
     "saveStackDraft": "Сохранить",
-    "notAvailableShort" : "Н/Д",
+    "notAvailableShort": "Н/Д",
     "deleteStackMsg": "Вы уверены что хотите удалить этот стек?",
     "stackNotManagedByDockgeMsg": "Данный стек не обслуживается Dockge.",
     "primaryHostname": "Имя хоста",
@@ -79,7 +79,7 @@
     "Settings": "Настройки",
     "Logout": "Выйти",
     "Lowercase only": "Только нижний регистр",
-    "Convert to Compose": "Преобразовать вCompose",
+    "Convert to Compose": "Преобразовать в Compose",
     "Docker Run": "Запустить Docker",
     "active": "активный",
     "exited": "завершенный",

frontend/src/lang/tr.json

@@ -12,7 +12,7 @@
     "registry": "Kayıt Defteri",
     "compose": "Compose",
     "addFirstStackMsg": "İlk yığınınızı oluşturun!",
-    "stackName" : "Yığın Adı",
+    "stackName": "Yığın Adı",
     "deployStack": "Dağıtmak",
     "deleteStack": "Sil",
     "stopStack": "Dudur",
@@ -22,7 +22,7 @@
     "editStack": "Düzenle",
     "discardStack": "Çıkar",
     "saveStackDraft": "Kaydet",
-    "notAvailableShort" : "N/A",
+    "notAvailableShort": "N/A",
     "deleteStackMsg": "Bu yığını silmek istediğinizden emin misiniz?",
     "stackNotManagedByDockgeMsg": "Bu yığın Dockge tarafından yönetilmemektedir.",
     "primaryHostname": "Birincil Ana Bilgisayar Adı",
@@ -90,5 +90,13 @@
     "Allowed commands:": "İzin verilen komutlar:",
     "Internal Networks": "İç Ağlar",
     "External Networks": "Dış Ağlar",
-    "No External Networks": "Dış Ağ Yok"
+    "No External Networks": "Dış Ağ Yok",
+    "extra": "Ekstra",
+    "reverseProxyMsg1": "Ters Proxy mi kullanıyorsunuz?",
+    "reverseProxyMsg2": "WebSocket için nasıl yapılandırma yapılacağını kontrol edin",
+    "reconnecting...": "Yeniden bağlanıyor…",
+    "connecting...": "Soket sunucusuna bağlanıyor…",
+    "url": "URL | URL’ler",
+    "Cannot connect to the socket server.": "Soket sunucusuna bağlanılamıyor.",
+    "downStack": "Durdur & Kapat"
 }

frontend/src/lang/uk-UA.json

@@ -1,8 +1,8 @@
 {
     "languageName": "Українська",
     "Create your admin account": "Створити акаунт адміністратора",
-    "authIncorrectCreds": "Невірний логін чи пароль",
+    "authIncorrectCreds": "Неправильне ім'я користувача або пароль.",
-    "PasswordsDoNotMatch": "Паролі не співпадають.",
+    "PasswordsDoNotMatch": "Паролі не збігаються.",
     "Repeat Password": "Повторіть пароль",
     "Create": "Створити",
     "signedInDisp": "Авторизовано як {0}",
@@ -12,8 +12,8 @@
     "registry": "Registry",
     "compose": "Compose",
     "addFirstStackMsg": "Додайте свій перший стек!",
-    "stackName" : "Назва стеку",
+    "stackName": "Назва стеку",
-    "deployStack": "Розрознути",
+    "deployStack": "Розгорнути",
     "deleteStack": "Видалити",
     "stopStack": "Зупинити",
     "restartStack": "Перезапустити",
@@ -22,7 +22,7 @@
     "editStack": "Редагувати",
     "discardStack": "Відмінити",
     "saveStackDraft": "Зберегти",
-    "notAvailableShort" : "Н/Д",
+    "notAvailableShort": "Н/Д",
     "deleteStackMsg": "Ви впевнені що хочете видалити цей стек?",
     "stackNotManagedByDockgeMsg": "Даний стек не управляється Dockge.",
     "primaryHostname": "Назва хосту",
@@ -47,7 +47,7 @@
     "addNetwork": "Додати Мережу",
     "disableauth.message1": "Ви впевнені що хочете <strong>вимкнути авторизацію</strong>?",
     "disableauth.message2": "Це призначено для сценаріїв, <strong>де ви збираєтесь використати сторонню авторизацію</strong> перед Dockge, наприклад Cloudflare Access, Authelia чи інші.",
-    "passwordNotMatchMsg": "Паролі не співпадають.",
+    "passwordNotMatchMsg": "Повторення паролю не збігається.",
     "autoGet": "Отримати",
     "add": "Додати",
     "Edit": "Змінити",
@@ -63,10 +63,10 @@
     "Repeat New Password": "Повторіть новий пароль",
     "Update Password": "Оновити пароль",
     "Advanced": "Розширені опції",
-    "Please use this option carefully!": "Будь-ласка, використовуйте цю опцію з обережністю!",
+    "Please use this option carefully!": "Будь ласка, використовуйте цю опцію з обережністю!",
     "Enable Auth": "Увімкнути автентифікацію",
     "Disable Auth": "Вимкнути автентифікацію",
-    "I understand, please disable": "Зрозуміло, все-одно вимкнути",
+    "I understand, please disable": "Зрозуміло, все одно вимкнути",
     "Leave": "Покинути",
     "Frontend Version": "Версія інтерфейсу",
     "Check Update On GitHub": "Перевірити оновлення на GitHub",
@@ -90,5 +90,13 @@
     "Allowed commands:": "Дозволені команди:",
     "Internal Networks": "Внутрішні мережі",
     "External Networks": "Зовнішні мережі",
-    "No External Networks": "Немає зовнішніх мереж"
+    "No External Networks": "Немає зовнішніх мереж",
+    "downStack": "Зупинити і вимкнути",
+    "reverseProxyMsg1": "Використовувати зворотній проксі?",
+    "Cannot connect to the socket server.": "Не вдається підключитися до сервера сокетів.",
+    "reconnecting...": "Повторне підключення…",
+    "connecting...": "Підключення до сервера сокетів…",
+    "url": "URL-адреса | URL-адреси",
+    "reverseProxyMsg2": "Перевірте, як налаштувати його для WebSocket",
+    "extra": "Додатково"
 }

frontend/src/lang/ur.json

@@ -12,23 +12,23 @@
     "registry": "رجسٹری",
     "compose": "تحریر",
     "addFirstStackMsg": "اپنا پہلا اسٹیک کمپوز کریں!",
-    "stackName" : "اسٹیک کا نام",
+    "stackName": "اسٹیک کا نام",
     "deployStack": "تعینات",
     "deleteStack": "حذف کریں",
     "stopStack": "روکو",
     "restartStack": "دوبارہ شروع کریں",
     "updateStack": "اپ ڈیٹ",
-    "startStack": "شروع کریں۔",
+    "startStack": "شروع کریں",
     "editStack": "ترمیم",
-    "discardStack": "رد کر دیں۔",
+    "discardStack": "رد کر دیں",
     "saveStackDraft": "محفوظ کریں۔",
-    "notAvailableShort" : "N / A",
+    "notAvailableShort": "N / A",
     "deleteStackMsg": "کیا آپ واقعی اس اسٹیک کو حذف کرنا چاہتے ہیں؟",
     "stackNotManagedByDockgeMsg": "یہ اسٹیک Dockge کے زیر انتظام نہیں ہے۔",
     "primaryHostname": "بنیادی میزبان نام",
     "general": "جنرل",
     "container": "کنٹینر | کنٹینرز",
-    "scanFolder": "اسٹیک فولڈر کو اسکین کریں۔",
+    "scanFolder": "اسٹیک فولڈر کو اسکین کریں",
     "dockerImage": "تصویر",
     "restartPolicyUnlessStopped": "جب تک روکا نہیں جاتا",
     "restartPolicyAlways": "ہمیشہ",
@@ -51,7 +51,7 @@
     "autoGet": "آٹو حاصل کریں",
     "add": "شامل کریں",
     "Edit": "ترمیم",
-    "applyToYAML": "YAML پر درخواست دیں۔",
+    "applyToYAML": "YAML پر درخواست دیں",
     "createExternalNetwork": "بنانا",
     "addInternalNetwork": "شامل کریں",
     "Save": "محفوظ کریں",
@@ -64,12 +64,12 @@
     "Update Password": "پاس ورڈ اپ ڈیٹ کریں",
     "Advanced": "ترقی یافتہ",
     "Please use this option carefully!": "براہ کرم اس اختیار کو احتیاط سے استعمال کریں!",
-    "Enable Auth": "تصدیق کو فعال کریں۔",
+    "Enable Auth": "تصدیق کو فعال کریں",
-    "Disable Auth": "توثیق کو غیر فعال کریں۔",
+    "Disable Auth": "توثیق کو غیر فعال کریں",
-    "I understand, please disable": "میں سمجھتا ہوں، براہ کرم غیر فعال کریں۔",
+    "I understand, please disable": "میں سمجھتا ہوں، براہ کرم غیر فعال کریں",
     "Leave": "چھوڑ دو",
     "Frontend Version": "فرنٹ اینڈ ورژن",
-    "Check Update On GitHub": "گیتوب پر اپ ڈیٹ چیک کریں۔",
+    "Check Update On GitHub": "گیتوب پر اپ ڈیٹ چیک کریں",
     "Show update if available": "اگر دستیاب ہو تو اپ ڈیٹ دکھائیں",
     "Also check beta release": "بیٹا ریلیز بھی چیک کریں",
     "Remember me": "مجھے پہچانتے ہو",
@@ -90,5 +90,13 @@
     "Allowed commands:": "اجازت شدہ احکامات:",
     "Internal Networks": "اندرونی نیٹ ورکس",
     "External Networks": "بیرونی نیٹ ورکس",
-    "No External Networks": "کوئی بیرونی نیٹ ورک نہیں"
+    "No External Networks": "کوئی بیرونی نیٹ ورک نہیں",
+    "reverseProxyMsg1": "ایک ریورس پراکسی کا استعمال کرتے ہوئے؟",
+    "Cannot connect to the socket server.": "ساکٹ سرور سے منسلک نہیں ہو سکتا۔",
+    "reconnecting...": "دوبارہ منسلک ہو رہا ہے…",
+    "connecting...": "ساکٹ سرور سے منسلک ہو رہا ہے…",
+    "url": "یو آر ایل | یو آر ایل",
+    "extra": "اضافی",
+    "downStack": "اسٹاپ اینڈ ڈاؤن",
+    "reverseProxyMsg2": "اسے WebSocket کے لیے ترتیب دینے کا طریقہ چیک کریں"
 }

frontend/src/lang/zh-CN.json

@@ -1,18 +1,18 @@
 {
     "languageName": "简体中文",
     "Create your admin account": "创建你的管理员账号",
-    "authIncorrectCreds": "用户名或密码错误",
+    "authIncorrectCreds": "用户名或密码错误。",
     "PasswordsDoNotMatch": "两次输入的密码不一致。",
     "Repeat Password": "重复以确认密码",
     "Create": "创建",
     "signedInDisp": "当前用户： {0}",
-    "signedInDispDisabled": "已禁用身份验证",
+    "signedInDispDisabled": "已禁用身份验证。",
     "home": "主页",
     "console": "终端",
     "registry": "镜像仓库",
     "compose": "Compose",
     "addFirstStackMsg": "组合你的第一个堆栈！",
-    "stackName" : "堆栈名称",
+    "stackName": "堆栈名称",
     "deployStack": "部署",
     "deleteStack": "删除",
     "stopStack": "停止",
@@ -22,9 +22,9 @@
     "editStack": "编辑",
     "discardStack": "放弃",
     "saveStackDraft": "保存",
-    "notAvailableShort" : "不可用",
+    "notAvailableShort": "不可用",
     "deleteStackMsg": "你确定要删除这个堆栈吗?",
-    "stackNotManagedByDockgeMsg": "这个堆栈不由Dockge管理",
+    "stackNotManagedByDockgeMsg": "这个堆栈不由Dockge管理。",
     "primaryHostname": "主机名",
     "general": "常规",
     "container": "容器 | 容器组",
@@ -90,5 +90,13 @@
     "Allowed commands:": "允许使用的指令:",
     "Internal Networks": "内部网络",
     "External Networks": "外部网络",
-    "No External Networks": "无外部网络"
+    "No External Networks": "无外部网络",
+    "reconnecting...": "重连中…",
+    "reverseProxyMsg2": "检查如何配置WebSocket",
+    "reverseProxyMsg1": "正在使用反向代理？",
+    "connecting...": "正在连接到socket服务器…",
+    "Cannot connect to the socket server.": "无法连接到socket服务器。",
+    "url": "网址 | 网址",
+    "extra": "额外",
+    "downStack": "停止并删除"
 }

frontend/src/lang/zh-TW.json

@@ -1,12 +1,12 @@
 {
     "languageName": "繁體中文(台灣)",
     "Create your admin account": "建立您的管理員帳號",
-    "authIncorrectCreds": "使用者名稱或密碼錯誤",
+    "authIncorrectCreds": "使用者名稱或密碼錯誤。",
     "PasswordsDoNotMatch": "兩次輸入的密碼不一致。",
     "Repeat Password": "重複以確認密碼",
     "Create": "建立",
     "signedInDisp": "目前使用者：{0}",
-    "signedInDispDisabled": "已停用身份驗證",
+    "signedInDispDisabled": "已停用身份驗證。",
     "home": "首頁",
     "console": "主控台",
     "registry": "映像倉庫",
@@ -24,7 +24,7 @@
     "saveStackDraft": "儲存",
     "notAvailableShort": "不可用",
     "deleteStackMsg": "您確定要刪除這個堆疊嗎？",
-    "stackNotManagedByDockgeMsg": "這個堆疊不由 Dockge 管理",
+    "stackNotManagedByDockgeMsg": "這個堆疊不由 Dockge 管理。",
     "primaryHostname": "主機名稱",
     "general": "一般",
     "container": "容器 | 容器群組",
@@ -90,5 +90,13 @@
     "Allowed commands:": "允許使用的指令:",
     "Internal Networks": "內部網路",
     "External Networks": "外部網路",
-    "No External Networks": "無外部網路"
+    "No External Networks": "無外部網路",
+    "downStack": "停止",
+    "reverseProxyMsg1": "在使用反向代理吗？",
+    "reverseProxyMsg2": "點擊這裡了解如何為 WebSocket 配置反向代理",
+    "Cannot connect to the socket server.": "無法連接到 Socket 伺服器。",
+    "reconnecting...": "重新連線中…",
+    "connecting...": "連線至 Socket 伺服器中…",
+    "url": "網址 | 網址",
+    "extra": "額外"
 }

frontend/src/layouts/Layout.vue

@@ -3,6 +3,9 @@
         <div v-if="! $root.socketIO.connected && ! $root.socketIO.firstConnect" class="lost-connection">
             <div class="container-fluid">
                 {{ $root.socketIO.connectionErrorMsg }}
+                <div v-if="$root.socketIO.showReverseProxyGuide">
+                    {{ $t("reverseProxyMsg1") }} <a href="https://github.com/louislam/uptime-kuma/wiki/Reverse-Proxy" target="_blank">{{ $t("reverseProxyMsg2") }}</a>
+                </div>
             </div>
         </div>
 
@@ -82,6 +85,10 @@
         </header>
 
         <main>
+            <div v-if="$root.socketIO.connecting" class="container mt-5">
+                <h4>{{ $t("connecting...") }}</h4>
+            </div>
+
             <router-view v-if="$root.loggedIn" />
             <Login v-if="! $root.loggedIn && $root.allowLoginDialog" />
         </main>

frontend/src/mixins/socket.ts

@@ -19,6 +19,7 @@ export default defineComponent({
                 initedSocketIO: false,
                 connectionErrorMsg: `${this.$t("Cannot connect to the socket server.")} ${this.$t("Reconnecting...")}`,
                 showReverseProxyGuide: true,
+                connecting: false,
             },
             info: {
 
@@ -103,6 +104,10 @@ export default defineComponent({
                 url = location.protocol + "//" + location.host;
             }
 
+            let connectingMsgTimeout = setTimeout(() => {
+                this.socketIO.connecting = true;
+            }, 1500);
+
             socket = io(url, {
                 transports: [ "websocket", "polling" ]
             });
@@ -110,6 +115,9 @@ export default defineComponent({
             socket.on("connect", () => {
                 console.log("Connected to the socket server");
 
+                clearTimeout(connectingMsgTimeout);
+                this.socketIO.connecting = false;
+
                 this.socketIO.connectCount++;
                 this.socketIO.connected = true;
                 this.socketIO.showReverseProxyGuide = false;
@@ -143,10 +151,11 @@ export default defineComponent({
 
             socket.on("connect_error", (err) => {
                 console.error(`Failed to connect to the backend. Socket.io connect_error: ${err.message}`);
-                this.socketIO.connectionErrorMsg = `${this.$t("Cannot connect to the socket server.")} [${err}] ${this.$t("Reconnecting...")}`;
+                this.socketIO.connectionErrorMsg = `${this.$t("Cannot connect to the socket server.")} [${err}] ${this.$t("reconnecting...")}`;
                 this.socketIO.showReverseProxyGuide = true;
                 this.socketIO.connected = false;
                 this.socketIO.firstConnect = false;
+                this.socketIO.connecting = false;
             });
 
             // Custom Events

frontend/src/pages/Compose.vue

@@ -41,7 +41,7 @@
                         {{ $t("stopStack") }}
                     </button>
 
-                    <BDropdown v-if="!isEditMode && active" right text="" variant="normal">
+                    <BDropdown right text="" variant="normal">
                         <BDropdownItem @click="downStack">
                             <font-awesome-icon icon="stop" class="me-1" />
                             {{ $t("downStack") }}
@@ -56,6 +56,13 @@
                 </button>
             </div>
 
+            <!-- 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>
+            </div>
+
             <!-- Progress Terminal -->
             <transition name="slide-fade" appear>
                 <Terminal
@@ -111,6 +118,20 @@
 
                     <button v-if="false && isEditMode && jsonConfig.services && Object.keys(jsonConfig.services).length > 0" class="btn btn-normal mb-3" @click="addContainer">{{ $t("addContainer") }}</button>
 
+                    <!-- General -->
+                    <div v-if="isEditMode">
+                        <h4 class="mb-3">{{ $t("extra") }}</h4>
+                        <div class="shadow-box big-padding mb-3">
+                            <!-- URLs -->
+                            <div class="mb-4">
+                                <label class="form-label">
+                                    {{ $tc("url", 2) }}
+                                </label>
+                                <ArrayInput name="urls" :display-name="$t('url')" placeholder="https://" object-type="x-dockge" />
+                            </div>
+                        </div>
+                    </div>
+
                     <!-- Combined Terminal Output -->
                     <div v-show="!isEditMode">
                         <h4 class="mb-3">Terminal</h4>
@@ -133,7 +154,7 @@
                             ref="editor"
                             v-model="stack.composeYAML"
                             class="yaml-editor"
-                            :highlight="highlighter"
+                            :highlight="highlighterYAML"
                             line-numbers :readonly="!isEditMode"
                             @input="yamlCodeChange"
                             @focus="editorFocus = true"
@@ -144,6 +165,22 @@
                         {{ yamlError }}
                     </div>
 
+                    <!-- ENV editor -->
+                    <div v-if="isEditMode">
+                        <h4 class="mb-3">.env</h4>
+                        <div class="shadow-box mb-3 editor-box" :class="{'edit-mode' : isEditMode}">
+                            <prism-editor
+                                ref="editor"
+                                v-model="stack.composeENV"
+                                class="env-editor"
+                                :highlight="highlighterENV"
+                                line-numbers :readonly="!isEditMode"
+                                @focus="editorFocus = true"
+                                @blur="editorFocus = false"
+                            ></prism-editor>
+                        </div>
+                    </div>
+
                     <div v-if="isEditMode">
                         <!-- Volumes -->
                         <div v-if="false">
@@ -211,10 +248,16 @@ services:
     ports:
       - "8080:80"
 `;
+const envDefault = "# VARIABLE=value #comment";
 
 let yamlErrorTimeout = null;
 
 let serviceStatusTimeout = null;
+let prismjsSymbolDefinition = {
+    "symbol": {
+        pattern: /(?<!\$)\$(\{[^{}]*\}|\w+)/,
+    }
+};
 
 export default {
     components: {
@@ -252,6 +295,34 @@ export default {
         };
     },
     computed: {
+
+        urls() {
+            if (!this.jsonConfig["x-dockge"] || !this.jsonConfig["x-dockge"].urls || !Array.isArray(this.jsonConfig["x-dockge"].urls)) {
+                return [];
+            }
+
+            let urls = [];
+            for (const url of this.jsonConfig["x-dockge"].urls) {
+                let display;
+                try {
+                    let obj = new URL(url);
+                    let pathname = obj.pathname;
+                    if (pathname === "/") {
+                        pathname = "";
+                    }
+                    display = obj.host + pathname + obj.search;
+                } catch (e) {
+                    display = url;
+                }
+
+                urls.push({
+                    display,
+                    url,
+                });
+            }
+            return urls;
+        },
+
         isAdd() {
             return this.$route.path === "/compose" && !this.submitted;
         },
@@ -332,19 +403,26 @@ export default {
             this.isEditMode = true;
 
             let composeYAML;
+            let composeENV;
 
             if (this.$root.composeTemplate) {
                 composeYAML = this.$root.composeTemplate;
                 this.$root.composeTemplate = "";
-
             } else {
                 composeYAML = template;
             }
+            if (this.$root.envTemplate) {
+                composeENV = this.$root.envTemplate;
+                this.$root.envTemplate = "";
+            } else {
+                composeENV = envDefault;
+            }
 
             // Default Values
             this.stack = {
                 name: "",
                 composeYAML,
+                composeENV,
                 isManagedByDockge: true,
             };
 
@@ -443,7 +521,7 @@ export default {
 
             this.bindTerminal(this.terminalName);
 
-            this.$root.getSocket().emit("deployStack", this.stack.name, this.stack.composeYAML, this.isAdd, (res) => {
+            this.$root.getSocket().emit("deployStack", this.stack.name, this.stack.composeYAML, this.stack.composeENV, this.isAdd, (res) => {
                 this.processing = false;
                 this.$root.toastRes(res);
 
@@ -457,7 +535,7 @@ export default {
         saveStack() {
             this.processing = true;
 
-            this.$root.getSocket().emit("saveStack", this.stack.name, this.stack.composeYAML, this.isAdd, (res) => {
+            this.$root.getSocket().emit("saveStack", this.stack.name, this.stack.composeYAML, this.stack.composeENV, this.isAdd, (res) => {
                 this.processing = false;
                 this.$root.toastRes(res);
 
@@ -527,8 +605,44 @@ export default {
             this.isEditMode = false;
         },
 
-        highlighter(code) {
+        highlighterYAML(code) {
-            return highlight(code, languages.yaml);
+            if (!languages.yaml_with_symbols) {
+                languages.yaml_with_symbols = languages.insertBefore("yaml", "punctuation", {
+                    "symbol": prismjsSymbolDefinition["symbol"]
+                });
+            }
+            return highlight(code, languages.yaml_with_symbols);
+        },
+
+        highlighterENV(code) {
+            if (!languages.docker_env) {
+                languages.docker_env = {
+                    "comment": {
+                        pattern: /(^#| #).*$/m,
+                        greedy: true
+                    },
+                    "keyword": {
+                        pattern: /^[^ :=]*(?=[:=])/m,
+                        greedy: true
+                    },
+                    "value": {
+                        pattern: /(?<=[:=]).*?((?= #)|$)/m,
+                        greedy: true,
+                        inside: {
+                            "string": [
+                                {
+                                    pattern: /^ *'.*?(?<!\\)'/m,
+                                },
+                                {
+                                    pattern: /^ *".*?(?<!\\)"|^.*$/m,
+                                    inside: prismjsSymbolDefinition
+                                },
+                            ],
+                        },
+                    },
+                };
+            }
+            return highlight(code, languages.docker_env);
         },
 
         yamlCodeChange() {

package.json

@@ -1,7 +1,10 @@
 {
     "name": "dockge",
-    "version": "1.1.1",
+    "version": "1.2.0",
     "type": "module",
+    "engines": {
+        "node": ">= 18.0.0 && <= 18.17.1"
+    },
     "scripts": {
         "fmt": "eslint \"**/*.{ts,vue}\" --fix",
         "lint": "eslint \"**/*.{ts,vue}\"",
@@ -14,9 +17,11 @@
         "build:docker-base": "docker buildx build --platform linux/amd64,linux/arm64,linux/arm/v7 -t louislam/dockge:base -f ./docker/Base.Dockerfile . --push",
         "build:docker": "node ./extra/env2arg.js docker buildx build --platform linux/amd64,linux/arm64,linux/arm/v7 -t louislam/dockge:latest -t louislam/dockge:1 -t louislam/dockge:$VERSION --target release -f ./docker/Dockerfile . --push",
         "build:docker-nightly": "pnpm run build:frontend && docker buildx build --platform linux/amd64,linux/arm64,linux/arm/v7 -t louislam/dockge:nightly --target nightly -f ./docker/Dockerfile . --push",
+        "build:healthcheck": "docker buildx build -f docker/BuildHealthCheck.Dockerfile --platform linux/amd64,linux/arm64,linux/arm/v7 -t louislam/dockge:build-healthcheck . --push",
         "start-docker": "docker run --rm -p 5001:5001 --name dockge louislam/dockge:latest",
         "mark-as-nightly": "tsx ./extra/mark-as-nightly.ts",
-        "reformat-changelog": "tsx ./extra/reformat-changelog.ts"
+        "reformat-changelog": "tsx ./extra/reformat-changelog.ts",
+        "reset-password": "tsx ./extra/reset-password.ts"
     },
     "dependencies": {
         "@homebridge/node-pty-prebuilt-multiarch": "~0.11.11",