tls: pages: Add 'TCP Port (TLS)' monitor type and configuration options

src/lang/en.json

@@ -58,6 +58,7 @@
     "Monitor Type": "Monitor Type",
     "Keyword": "Keyword",
     "Invert Keyword": "Invert Keyword",
+    "Request": "Request",
     "Expected Value": "Expected Value",
     "Json Query": "Json Query",
     "Friendly Name": "Friendly Name",
@@ -561,6 +562,7 @@
     "infiniteRetention": "Set to 0 for infinite retention.",
     "confirmDeleteTagMsg": "Are you sure you want to delete this tag? Monitors associated with this tag will not be deleted.",
     "enableGRPCTls": "Allow to send gRPC request with TLS connection",
+    "Use STARTTLS": "Use STARTTLS",
     "grpcMethodDescription": "Method name is convert to camelCase format such as sayHello, check, etc.",
     "acceptedStatusCodesDescription": "Select status codes which are considered as a successful response.",
     "deleteMonitorMsg": "Are you sure want to delete this monitor?",
@@ -588,6 +590,7 @@
     "notificationDescription": "Notifications must be assigned to a monitor to function.",
     "keywordDescription": "Search keyword in plain HTML or JSON response. The search is case-sensitive.",
     "invertKeywordDescription": "Look for the keyword to be absent rather than present.",
+    "requestDescription": "Request to send to the server after establishing the connection. Note that trailing newlines may be significant.",
     "jsonQueryDescription": "Do a json Query against the response and check for expected value (Return value will get converted into string for comparison). Check out {0} for the documentation about the query language. A playground can be found {1}.",
     "backupDescription": "You can backup all monitors and notifications into a JSON file.",
     "backupDescription2": "Note: history and event data is not included.",

src/pages/Details.vue

@@ -19,7 +19,7 @@
                 <a v-if="monitor.type === 'http' || monitor.type === 'keyword' || monitor.type === 'json-query' || monitor.type === 'mp-health' " :href="monitor.url" target="_blank" rel="noopener noreferrer">{{ filterPassword(monitor.url) }}</a>
                 <span v-if="monitor.type === 'port'">TCP Port {{ monitor.hostname }}:{{ monitor.port }}</span>
                 <span v-if="monitor.type === 'ping'">Ping: {{ monitor.hostname }}</span>
-                <span v-if="monitor.type === 'keyword'">
+                <span v-if="monitor.type === 'keyword' || monitor.type === 'port-tls'">
                     <br>
                     <span>{{ $t("Keyword") }}: </span>
                     <span class="keyword">{{ monitor.keyword }}</span>

src/pages/EditMonitor.vue

@@ -21,6 +21,9 @@
                                         <option value="port">
                                             TCP Port
                                         </option>
+                                        <option value="port-tls">
+                                            TCP Port (TLS)
+                                        </option>
                                         <option value="ping">
                                             Ping
                                         </option>
@@ -125,7 +128,7 @@
                             </div>
 
                             <!-- Keyword -->
-                            <div v-if="monitor.type === 'keyword' || monitor.type === 'grpc-keyword'" class="my-3">
+                            <div v-if="monitor.type === 'keyword' || monitor.type === 'grpc-keyword' || monitor.type === 'port-tls'" class="my-3">
                                 <label for="keyword" class="form-label">{{ $t("Keyword") }}</label>
                                 <input id="keyword" v-model="monitor.keyword" type="text" class="form-control" required>
                                 <div class="form-text">
@@ -134,7 +137,7 @@
                             </div>
 
                             <!-- Invert keyword -->
-                            <div v-if="monitor.type === 'keyword' || monitor.type === 'grpc-keyword'" class="my-3 form-check">
+                            <div v-if="monitor.type === 'keyword' || monitor.type === 'grpc-keyword' || monitor.type === 'port-tls'" class="my-3 form-check">
                                 <input id="invert-keyword" v-model="monitor.invertKeyword" class="form-check-input" type="checkbox">
                                 <label class="form-check-label" for="invert-keyword">
                                     {{ $t("Invert Keyword") }}
@@ -246,15 +249,15 @@
                             </template>
 
                             <!-- Hostname -->
-                            <!-- TCP Port / Ping / DNS / Steam / MQTT / Radius / Tailscale Ping only -->
+                            <!-- TCP Port / Ping / DNS / Steam / MQTT / Radius / Tailscale Ping / TLS only -->
-                            <div v-if="monitor.type === 'port' || monitor.type === 'ping' || monitor.type === 'dns' || monitor.type === 'steam' || monitor.type === 'gamedig' ||monitor.type === 'mqtt' || monitor.type === 'radius' || monitor.type === 'tailscale-ping'" class="my-3">
+                            <div v-if="monitor.type === 'port' || monitor.type === 'ping' || monitor.type === 'dns' || monitor.type === 'steam' || monitor.type === 'gamedig' ||monitor.type === 'mqtt' || monitor.type === 'radius' || monitor.type === 'tailscale-ping' || monitor.type === 'port-tls'" class="my-3">
                                 <label for="hostname" class="form-label">{{ $t("Hostname") }}</label>
                                 <input id="hostname" v-model="monitor.hostname" type="text" class="form-control" :pattern="`${monitor.type === 'mqtt' ? mqttIpOrHostnameRegexPattern : ipOrHostnameRegexPattern}`" required>
                             </div>
 
                             <!-- Port -->
-                            <!-- For TCP Port / Steam / MQTT / Radius Type -->
+                            <!-- For TCP Port / Steam / MQTT / Radius / TLS Type -->
-                            <div v-if="monitor.type === 'port' || monitor.type === 'steam' || monitor.type === 'gamedig' || monitor.type === 'mqtt' || monitor.type === 'radius'" class="my-3">
+                            <div v-if="monitor.type === 'port' || monitor.type === 'steam' || monitor.type === 'gamedig' || monitor.type === 'mqtt' || monitor.type === 'radius' || monitor.type === 'port-tls'" class="my-3">
                                 <label for="port" class="form-label">{{ $t("Port") }}</label>
                                 <input id="port" v-model="monitor.port" type="number" class="form-control" required min="0" max="65535" step="1">
                             </div>
@@ -899,6 +902,28 @@
                                     </div>
                                 </template>
                             </template>
+
+                            <!-- TLS Options -->
+                            <template v-if="monitor.type === 'port-tls'">
+                                <h2 class="mt-5 mb-2">{{ $t("TLS Options") }}</h2>
+
+                                <!-- Use STARTTLS -->
+                                <div class="my-3 form-check">
+                                    <input id="start-tls" v-model="monitor.startTls" class="form-check-input" type="checkbox">
+                                    <label class="form-check-label" for="start-tls">
+                                        {{ $t("Use STARTTLS") }}
+                                    </label>
+                                </div>
+
+                                <!-- Request -->
+                                <div class="my-3">
+                                    <label for="request" class="form-label">{{ $t("Request") }}</label>
+                                    <textarea id="request" v-model="monitor.request" class="form-control"></textarea>
+                                </div>
+                                <div class="form-text">
+                                    {{ $t("requestDescription") }}
+                                </div>
+                            </template>
                         </div>
                     </div>