From 8096ed300db2c3789ebb493c6c2c6a3ec454fcbe Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Tue, 16 Nov 2021 07:52:26 +0530
Subject: [PATCH] feat: add authentication to MQTT - resolved #1772

---
 .../components/realtime/Mqtt.vue              | 38 +++++++++++++++++--
 .../components/realtime/Socketio.vue          |  1 +
 .../components/realtime/Sse.vue               |  1 +
 3 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/packages/hoppscotch-app/components/realtime/Mqtt.vue b/packages/hoppscotch-app/components/realtime/Mqtt.vue
index 75d9b5103..77efd5c45 100644
--- a/packages/hoppscotch-app/components/realtime/Mqtt.vue
+++ b/packages/hoppscotch-app/components/realtime/Mqtt.vue
@@ -11,7 +11,9 @@
       <Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
         <Pane class="hide-scrollbar !overflow-auto">
           <AppSection label="request">
-            <div class="bg-primary flex p-4 top-0 z-10 sticky">
+            <div
+              class="bg-primary flex flex-col space-y-4 p-4 top-0 z-10 sticky"
+            >
               <div class="space-x-2 flex-1 inline-flex">
                 <input
                   id="mqtt-url"
@@ -33,6 +35,7 @@
                   "
                   :placeholder="$t('mqtt.url')"
                   :disabled="connectionState"
+                  @keyup.enter="validUrl ? toggleConnection() : null"
                 />
                 <ButtonPrimary
                   id="connect"
@@ -47,6 +50,24 @@
                   @click.native="toggleConnection"
                 />
               </div>
+              <div class="flex space-x-4">
+                <input
+                  id="mqtt-username"
+                  v-model="username"
+                  type="text"
+                  spellcheck="false"
+                  class="input"
+                  :placeholder="$t('authorization.username')"
+                />
+                <input
+                  id="mqtt-password"
+                  v-model="password"
+                  type="password"
+                  spellcheck="false"
+                  class="input"
+                  :placeholder="$t('authorization.password')"
+                />
+              </div>
             </div>
           </AppSection>
         </Pane>
@@ -175,6 +196,8 @@ export default defineComponent({
       log: null,
       manualDisconnect: false,
       subscriptionState: false,
+      username: "",
+      password: "",
     }
   },
   computed: {
@@ -225,11 +248,18 @@ export default defineComponent({
         parseUrl.port !== "" ? Number(parseUrl.port) : 8081,
         "hoppscotch"
       )
-      this.client.connect({
+      const connectOptions = {
         onSuccess: this.onConnectionSuccess,
         onFailure: this.onConnectionFailure,
-        useSSL: true,
-      })
+        useSSL: parseUrl.protocol !== "ws:",
+      }
+      if (this.username !== "") {
+        connectOptions.userName = this.username
+      }
+      if (this.password !== "") {
+        connectOptions.password = this.password
+      }
+      this.client.connect(connectOptions)
       this.client.onConnectionLost = this.onConnectionLost
       this.client.onMessageArrived = this.onMessageArrived
 
diff --git a/packages/hoppscotch-app/components/realtime/Socketio.vue b/packages/hoppscotch-app/components/realtime/Socketio.vue
index 255e66e43..0fde8c04b 100644
--- a/packages/hoppscotch-app/components/realtime/Socketio.vue
+++ b/packages/hoppscotch-app/components/realtime/Socketio.vue
@@ -98,6 +98,7 @@
                     "
                     spellcheck="false"
                     :disabled="connectionState"
+                    @keyup.enter="urlValid ? toggleConnection() : null"
                   />
                 </div>
                 <ButtonPrimary
diff --git a/packages/hoppscotch-app/components/realtime/Sse.vue b/packages/hoppscotch-app/components/realtime/Sse.vue
index 0e0ddf293..9d5747a3f 100644
--- a/packages/hoppscotch-app/components/realtime/Sse.vue
+++ b/packages/hoppscotch-app/components/realtime/Sse.vue
@@ -57,6 +57,7 @@
               "
               spellcheck="false"
               :disabled="connectionSSEState"
+              @keyup.enter="serverValid ? toggleSSEConnection() : null"
             />
           </div>
           <ButtonPrimary