chore: improve misc i18n things (#6645)

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

src/components/notifications/ClickSendSMS.vue

@@ -9,10 +9,14 @@
         <HiddenInput id="clicksendsms-key" v-model="$parent.notification.clicksendsmsPassword" :required="true" autocomplete="new-password"></HiddenInput>
     </div>
     <div class="mb-3">
-        <div class="form-text">
-            {{ $t("checkPrice", ["clicksendsms"]) }}
-            <a href="https://www.clicksend.com/us/pricing" target="_blank">https://clicksend.com/us/pricing</a>
-        </div>
+        <i18n-t tag="div" keypath="checkPriceAt" class="form-text">
+            <template #service>
+                clicksendsms
+            </template>
+            <template #url>
+                <a href="https://www.clicksend.com/us/pricing" target="_blank">https://clicksend.com/us/pricing</a>
+            </template>
+        </i18n-t>
     </div>
     <div class="mb-3">
         <label for="clicksendsms-to-number" class="form-label">{{ $t("Recipient Number") }}</label>

src/components/notifications/PromoSMS.vue

@@ -13,10 +13,14 @@
             <option value="3">{{ $t("promosmsTypeFull") }}</option>
             <option value="4">{{ $t("promosmsTypeSpeed") }}</option>
         </select>
-        <div class="form-text">
-            {{ $t("checkPrice", [$t("promosms")]) }}
-            <a href="https://promosms.com/cennik/" target="_blank">https://promosms.com/cennik/</a>
-        </div>
+        <i18n-t tag="div" keypath="checkPriceAt" class="form-text">
+            <template #service>
+                promosms
+            </template>
+            <template #url>
+                <a href="https://promosms.com/cennik/" target="_blank">https://promosms.com/cennik/</a>
+            </template>
+        </i18n-t>
     </div>
     <div class="mb-3">
         <label for="promosms-phone-number" class="form-label">{{ $t("promosmsPhoneNumber") }}</label>

src/components/notifications/SMSC.vue

@@ -11,10 +11,14 @@
         <HiddenInput id="smsc-key" v-model="$parent.notification.smscPassword" :required="true" autocomplete="new-password"></HiddenInput>
     </div>
     <div class="mb-3">
-        <div class="form-text">
-            {{ $t("checkPrice", ['СМСЦ']) }}
-            <a href="https://smsc.kz/tariffs/" target="_blank">https://smsc.kz/tariffs/</a>
-        </div>
+        <i18n-t tag="div" keypath="checkPriceAt" class="form-text">
+            <template #service>
+                СМСЦ
+            </template>
+            <template #url>
+                <a href="https://smsc.kz/tariffs/" target="_blank">https://smsc.kz/tariffs/</a>
+            </template>
+        </i18n-t>
     </div>
     <div class="mb-3">
         <label for="smsc-to-number" class="form-label">{{ $t("Recipient Number") }}</label>

src/components/notifications/SMSManager.vue

@@ -9,9 +9,14 @@
     </div>
     <div class="mb-3">
         <label for="smsmanager-numbers" class="form-label"> {{ $t("Recipients") }}</label>
-        <div class="form-text">
-            {{ $t("You can divide numbers with") }} <b>,</b> {{ $t("or") }} <b>;</b>
-        </div>
+        <i18n-t tag="div" keypath="You can divide numbers with commas or semicolons" class="form-text">
+            <template #comma>
+                <code>,</code>
+            </template>
+            <template #semicolon>
+                <code>;</code>
+            </template>
+        </i18n-t>
         <input id="smsmanager-numbers" v-model="$parent.notification.numbers" type="text" class="form-control">
     </div>
     <div class="mb-3">
@@ -23,9 +28,13 @@
         </select>
     </div>
     <div class="mb-3">
-        <div class="form-text">
-            {{ $t("checkPrice", [$t("SMSManager")]) }}
-            <a href="https://smsmanager.cz/rozesilani-sms/ceny/ceska-republika/" target="_blank">{{ $t("here") }}</a>
-        </div>
+        <i18n-t tag="div" keypath="checkPriceAt" class="form-text">
+            <template #service>
+                SMSManager
+            </template>
+            <template #url>
+                <a href="https://smsmanager.cz/rozesilani-sms/ceny/ceska-republika/" target="_blank">{{ $t("here") }}</a>
+            </template>
+        </i18n-t>
     </div>
 </template>

src/components/settings/General.vue

@@ -142,12 +142,13 @@
                     v-model="settings.steamAPIKey"
                     autocomplete="new-password"
                 />
-                <div class="form-text">
-                    {{ $t("steamApiKeyDescription") }}
-                    <a href="https://steamcommunity.com/dev" target="_blank">
-                        https://steamcommunity.com/dev
-                    </a>
-                </div>
+                <i18n-t tag="div" keypath="steamApiKeyDescriptionAt" class="form-text">
+                    <template #url>
+                        <a href="https://steamcommunity.com/dev" target="_blank">
+                            https://steamcommunity.com/dev
+                        </a>
+                    </template>
+                </i18n-t>
             </div>
 
             <!-- DNS Cache (nscd) -->

src/lang/en.json

@@ -259,14 +259,14 @@
     "Body": "Body",
     "Headers": "Headers",
     "PushUrl": "Push URL",
-    "HeadersInvalidFormat": "The request headers are not valid JSON: ",
-    "BodyInvalidFormat": "The request body is not valid JSON: ",
+    "HeadersInvalidFormatBecause": "The request headers are not valid JSON because {error}",
+    "BodyInvalidFormatBecause": "The request body is not valid JSON because {error}",
     "Monitor History": "Monitor History",
     "clearDataOlderThan": "Keep monitor history data for {0} days.",
     "PasswordsDoNotMatch": "Passwords do not match.",
     "records": "records",
     "One record": "One record",
-    "steamApiKeyDescription": "For monitoring a Steam Game Server you need a Steam Web-API key. You can register your API key here: ",
+    "steamApiKeyDescriptionAt": "For monitoring a Steam Game Server you need a Steam Web-API key. You can register your API key at {url}",
     "Current User": "Current User",
     "topic": "Topic",
     "topicExplanation": "MQTT topic to monitor",
@@ -703,7 +703,7 @@
     "SMS Type": "SMS Type",
     "octopushTypePremium": "Premium (Fast - recommended for alerting)",
     "octopushTypeLowCost": "Low Cost (Slow - sometimes blocked by operator)",
-    "checkPrice": "Check {0} prices:",
+    "checkPriceAt": "Check {service} prices at {url}",
     "apiCredentials": "API credentials",
     "octopushLegacyHint": "Do you use the legacy version of Octopush (2011-2020) or the new version?",
     "Check octopush prices": "Check octopush prices {0}.",
@@ -725,9 +725,9 @@
     "Lowcost": "Lowcost",
     "high": "high",
     "SendKey": "SendKey",
-    "SMSManager API Docs": "SMSManager API Docs ",
+    "SMSManager API Docs": "SMSManager API Docs",
     "Gateway Type": "Gateway Type",
-    "You can divide numbers with": "You can divide numbers with",
+    "You can divide numbers with commas or semicolons": "You can divide numbers with {comma} or {semicolon}",
     "Base URL": "Base URL",
     "goAlertInfo": "GoAlert is a An open source application for on-call scheduling, automated escalations and notifications (like SMS or voice calls). Automatically engage the right person, the right way, and at the right time! {0}",
     "goAlertIntegrationKeyInfo": "Get generic API integration key for the service in this format \"aaaaaaaa-bbbb-cccc-dddd-eeeeeeeeeeee\" usually the value of token parameter of copied URL.",
@@ -1292,10 +1292,8 @@
     "Sort by certificate expiry": "Sort by certificate expiry",
     "Splunk Rest URL": "Splunk Rest URL",
     "Severity": "Severity",
-    "SMSManager": "SMSManager",
     "Message Format": "Message Format",
     "smscTranslit": "smscTranslit",
-    "promosms": "promosms",
     "Region": "Region",
     "PushDeer Server URL": "PushDeer Server URL",
     "To Number": "To Number",

src/pages/EditMonitor.vue

@@ -2068,7 +2068,7 @@ message HealthCheckResponse {
                 try {
                     JSON.parse(this.monitor.body);
                 } catch (err) {
-                    toast.error(this.$t("BodyInvalidFormat") + err.message);
+                    toast.error(this.$t("BodyInvalidFormatBecause", {error: err.message}));
                     return false;
                 }
             }
@@ -2076,7 +2076,7 @@ message HealthCheckResponse {
                 try {
                     JSON.parse(this.monitor.headers);
                 } catch (err) {
-                    toast.error(this.$t("HeadersInvalidFormat") + err.message);
+                    toast.error(this.$t("HeadersInvalidFormatBecause", {error: err.message}));
                     return false;
                 }
             }