wip

frontend/src/components/Container.vue

@@ -7,7 +7,7 @@
                     <span class="me-1">{{ imageName }}:</span><span class="tag">{{ imageTag }}</span>
                 </div>
                 <div v-if="!isEditMode">
-                    <span class="badge bg-primary me-1">Running</span>
+                    <span class="badge me-1" :class="bgStyle">{{ status }}</span>
                 </div>
             </div>
             <div class="col-5">
@@ -146,6 +146,10 @@ export default defineComponent({
             type: Boolean,
             default: false,
         },
+        status: {
+            type: String,
+            default: "N/A",
+        }
     },
     emits: [
     ],
@@ -156,6 +160,14 @@ export default defineComponent({
     },
     computed: {
 
+        bgStyle() {
+            if (this.status === "running") {
+                return "bg-primary";
+            } else {
+                return "bg-secondary";
+            }
+        },
+
         terminalRouteLink() {
             return {
                 name: "containerTerminal",

frontend/src/components/Login.vue

@@ -71,7 +71,7 @@ export default {
         submit() {
             this.processing = true;
 
-            this.login(this.username, this.password, this.token, (res) => {
+            this.$root.login(this.username, this.password, this.token, (res) => {
                 this.processing = false;
 
                 if (res.tokenRequired) {
@@ -82,40 +82,6 @@ export default {
             });
         },
 
-        /**
-         * Send request to log user in
-         * @param {string} username Username to log in with
-         * @param {string} password Password to log in with
-         * @param {string} token User token
-         * @param {loginCB} callback Callback to call with result
-         * @returns {void}
-         */
-        login(username, password, token, callback) {
-
-            this.$root.getSocket().emit("login", {
-                username,
-                password,
-                token,
-            }, (res) => {
-                if (res.tokenRequired) {
-                    callback(res);
-                }
-
-                if (res.ok) {
-                    this.$root.storage().token = res.token;
-                    this.$root.socketIO.token = res.token;
-                    this.$root.loggedIn = true;
-                    this.$root.username = this.$root.getJWTPayload()?.username;
-
-                    this.$root.afterLogin();
-
-                    // Trigger Chrome Save Password
-                    history.pushState({}, "");
-                }
-
-                callback(res);
-            });
-        }
     },
 };
 </script>

frontend/src/components/settings/Security.vue

@@ -64,7 +64,8 @@
                 </form>
             </template>
 
-            <div v-if="! settings.disableAuth" class="mt-5 mb-3">
+            <!-- TODO: Hidden for now -->
+            <div v-if="! settings.disableAuth && false" class="mt-5 mb-3">
                 <h5 class="my-4 settings-subheading">
                     {{ $t("Two Factor Authentication") }}
                 </h5>
@@ -182,7 +183,7 @@ export default {
             this.saveSettings(() => {
                 this.password.currentPassword = "";
                 this.$root.username = null;
-                this.$root.socket.token = "autoLogin";
+                this.$root.socketIO.token = "autoLogin";
             }, this.password.currentPassword);
         },
 

frontend/src/lang/en.json

@@ -43,5 +43,6 @@
     "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 Uptime Kuma such as Cloudflare Access, Authelia or other authentication mechanisms."
+    "disableauth.message2": "It is designed for scenarios <strong>where you intend to implement third-party authentication</strong> in front of Uptime Kuma such as Cloudflare Access, Authelia or other authentication mechanisms.",
+    "passwordNotMatchMsg": "The repeat password does not match."
 }

frontend/src/mixins/socket.ts

@@ -220,6 +220,40 @@ export default defineComponent({
             return undefined;
         },
 
+        /**
+         * Send request to log user in
+         * @param {string} username Username to log in with
+         * @param {string} password Password to log in with
+         * @param {string} token User token
+         * @param {loginCB} callback Callback to call with result
+         * @returns {void}
+         */
+        login(username : string, password : string, token : string, callback) {
+            this.getSocket().emit("login", {
+                username,
+                password,
+                token,
+            }, (res) => {
+                if (res.tokenRequired) {
+                    callback(res);
+                }
+
+                if (res.ok) {
+                    this.storage().token = res.token;
+                    this.socketIO.token = res.token;
+                    this.loggedIn = true;
+                    this.username = this.getJWTPayload()?.username;
+
+                    this.afterLogin();
+
+                    // Trigger Chrome Save Password
+                    history.pushState({}, "");
+                }
+
+                callback(res);
+            });
+        },
+
         /**
          * Log in using a token
          * @param {string} token Token to log in with

frontend/src/pages/Compose.vue

@@ -97,6 +97,7 @@
                             :name="name"
                             :is-edit-mode="isEditMode"
                             :first="name === Object.keys(jsonConfig.services)[0]"
+                            :status="serviceStatusList[name]"
                         />
                     </div>
 
@@ -201,6 +202,8 @@ services:
 
 let yamlErrorTimeout = null;
 
+let serviceStatusTimeout = null;
+
 export default {
     components: {
         NetworkInput,
@@ -228,10 +231,12 @@ export default {
             stack: {
 
             },
+            serviceStatusList: {},
             isEditMode: false,
             submitted: false,
             showDeleteDialog: false,
             newContainerName: "",
+            stopServiceStatusTimeout: false,
         };
     },
     computed: {
@@ -331,8 +336,33 @@ export default {
             this.stack.name = this.$route.params.stackName;
             this.loadStack();
         }
+
+        this.requestServiceStatus();
+    },
+    unmounted() {
+        this.stopServiceStatusTimeout = true;
+        clearTimeout(serviceStatusTimeout);
     },
     methods: {
+
+        startServiceStatusTimeout() {
+            clearTimeout(serviceStatusTimeout);
+            serviceStatusTimeout = setTimeout(async () => {
+                this.requestServiceStatus();
+            }, 2000);
+        },
+
+        requestServiceStatus() {
+            this.$root.getSocket().emit("serviceStatusList", this.stack.name, (res) => {
+                if (res.ok) {
+                    this.serviceStatusList = res.serviceStatusList;
+                }
+                if (!this.stopServiceStatusTimeout) {
+                    this.startServiceStatusTimeout();
+                }
+            });
+        },
+
         exitConfirm(next) {
             if (this.isEditMode) {
                 if (confirm("You are currently editing a stack. Are you sure you want to leave?")) {