Add Translation keys (#768)

frontend/src/lang/en.json

@@ -25,6 +25,7 @@
     "saveStackDraft": "Save",
     "notAvailableShort": "N/A",
     "deleteStackMsg": "Are you sure you want to delete this stack?",
+    "cancel": "Cancel",
     "stackNotManagedByDockgeMsg": "This stack is not managed by Dockge.",
     "primaryHostname": "Primary Hostname",
     "general": "General",
@@ -128,5 +129,10 @@
     "New Container Name...": "New Container Name...",
     "Network name...": "Network name...",
     "Select a network...": "Select a network...",
-    "NoNetworksAvailable": "No networks available. You need to add internal networks or enable external networks in the right side first."
+    "NoNetworksAvailable": "No networks available. You need to add internal networks or enable external networks in the right side first.",
+    "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.",
+    "confirmLeaveStack": "You are currently editing a stack. Are you sure you want to leave?"
 }

frontend/src/pages/Compose.vue

@@ -229,7 +229,7 @@
             </div>
 
             <!-- Delete Dialog -->
-            <BModal v-model="showDeleteDialog" :okTitle="$t('deleteStack')" okVariant="danger" @ok="deleteDialog">
+            <BModal v-model="showDeleteDialog" :cancelTitle="$t('cancel')" :okTitle="$t('deleteStack')" okVariant="danger" @ok="deleteDialog">
                 {{ $t("deleteStackMsg") }}
             </BModal>
         </div>
@@ -508,7 +508,7 @@ export default {
 
         exitConfirm(next) {
             if (this.isEditMode) {
-                if (confirm("You are currently editing a stack. Are you sure you want to leave?")) {
+                if (confirm(this.$t("confirmLeaveStack"))) {
                     this.exitAction();
                     next();
                 } else {

frontend/src/pages/Console.vue

@@ -1,23 +1,15 @@
 <template>
     <transition name="slide-fade" appear>
         <div v-if="!processing">
-            <h1 class="mb-3">Console</h1>
+            <h1 class="mb-3">{{ $t("console") }}</h1>
 
             <Terminal v-if="enableConsole" class="terminal" :rows="20" mode="mainTerminal" name="console" :endpoint="endpoint"></Terminal>
 
             <div v-else class="alert alert-warning shadow-box" role="alert">
-                <h4 class="alert-heading">Console is not enabled</h4>
+                <h4 class="alert-heading">{{ $t("Console is not enabled") }}</h4>
-                <p>
+                <p v-html="$t('ConsoleNotEnabledMSG1')"></p>
-                    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.
+                <p v-html="$t('ConsoleNotEnabledMSG2')"></p>
-                </p>
+                <p v-html="$t('ConsoleNotEnabledMSG3')"></p>
-
-                <p>
-                    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>.
-                </p>
-
-                <p>
-                    If you understand the risk, you can enable it by setting <code>DOCKGE_ENABLE_CONSOLE=true</code> in the environment variables.
-                </p>
             </div>
         </div>
     </transition>