Added translation strings, made the API work with group IDs and fixed the HTML

server/notification-providers/whapi.js

@@ -12,26 +12,22 @@ class Whapi extends NotificationProvider {
 
         let okMsg = "Sent Successfully.";
 
-        let apiUrl = notification.whapiApiUrl;
-        let apiToken = notification.whapiAuthToken;
-        let toNumber = notification.whapiToNumber;
-
         try {
 
-            let config = {
+            const config = {
                 headers: {
                     "Accept": "application/json",
                     "Content-Type": "application/json",
-                    "Authorization": "Bearer " + apiToken,
+                    "Authorization": "Bearer " + notification.whapiAuthToken,
                 }
             };
 
             let data = {
-                "to": toNumber + "@s.whatsapp.net",
+                "to": notification.whapiRecipient,
                 "body": msg,
             };
 
-            let url = apiUrl + "/messages/text";
+            let url = notification.whapiApiUrl + "/messages/text";
 
             await axios.post(url, data, config);
 

src/components/notifications/Whapi.vue

@@ -6,18 +6,28 @@
 
     <div class="mb-3">
         <label for="whapi-auth-token" class="form-label">{{ $t("Token") }}</label>
-        <input id="whapi-auth-token" v-model="$parent.notification.whapiAuthToken" type="text" class="form-control" required>
+        <HiddenInput id="whapi-auth-token" v-model="$parent.notification.whapiAuthToken" :required="true" autocomplete="new-password"></HiddenInput>
+        <i18n-t tag="div" keypath="wayToGetWhapiUrlAndToken" class="form-text">
+            <a href="https://panel.whapi.cloud/dashboard" target="_blank">https://panel.whapi.cloud/dashboard</a>
+        </i18n-t>
     </div>
 
     <div class="mb-3">
-        <label for="whapi-to-number" class="form-label">{{ $t("Phone number") }}</label>
+        <label for="whapi-recipient" class="form-label">{{ $t("whapiRecipient") }}</label>
-        <input id="whapi-to-number" v-model="$parent.notification.whapiToNumber" type="text" pattern="^[\d-]{10,31}$" class="form-control" required>
+        <input id="whapi-recipient" v-model="$parent.notification.whapiRecipient" type="text" pattern="^[\d-]{10,31}(@[\w\.]{1,})?$" class="form-control" required>
-        <i18n-t tag="div" keypath="wayToWriteWhapiPhoneNumber" class="form-text"></i18n-t>
+        <div class="form-text">{{ $t("wayToWriteWhapiRecipient", ["00117612345678", "00117612345678@s.whatsapp.net", "123456789012345678@g.us"]) }}</div>
     </div>
 
-    <div class="mb-3">
+    <i18n-t tag="div" keypath="More info on:" class="mb-3 form-text">
-        <i18n-t tag="p" keypath="More info on:" style="margin-top: 8px;">
+        <a href="https://whapi.cloud/" target="_blank">https://whapi.cloud/</a>
-            <a href="https://whapi.cloud/" target="_blank">https://whapi.cloud/</a>
+    </i18n-t>
-        </i18n-t>
-    </div>
 </template>
+<script>
+import HiddenInput from "../HiddenInput.vue";
+
+export default {
+    components: {
+        HiddenInput,
+    }
+};
+</script>

src/lang/en.json

@@ -883,5 +883,8 @@
     "deleteRemoteBrowserMessage": "Are you sure want to delete this Remote Browser for all monitors?",
     "GrafanaOncallUrl": "Grafana Oncall URL",
     "Browser Screenshot": "Browser Screenshot",
-    "wayToWriteWhapiPhoneNumber": "The phone number with the international prefix, but without the plus sign at the start"
+    "wayToWriteWhapiRecipient": "The phone number with the international prefix, but without the plus sign at the start ({0}), the Contact ID ({1}) or the Group ID ({2}).",
+    "wayToGetWhapiUrlAndToken": "You can get the API URL and the token by going into your desired channel from {0}",
+    "whapiRecipient": "Phone Number / Contact ID / Group ID",
+    "API URL": "API URL"
 }