migrated all v-html translations to componentised translations

src/components/settings/Security.vue

@@ -93,10 +93,16 @@
         <TwoFADialog ref="TwoFADialog" />
 
         <Confirm ref="confirmDisableAuth" btn-style="btn-danger" :yes-text="$t('I understand, please disable')" :no-text="$t('Leave')" @yes="disableAuth">
-            <!-- eslint-disable-next-line vue/no-v-html -->
-            <p v-html="$t('disableauth.message1')"></p>
-            <!-- eslint-disable-next-line vue/no-v-html -->
-            <p v-html="$t('disableauth.message2')"></p>
+            <i18n-t tag="p" keypath="disableauth.message1">
+                <template #disableAuth>
+                    <strong>{{ $t('disable authentication') }}</strong>
+                </template>
+            </i18n-t>
+            <i18n-t tag="p" keypath="disableauth.message2">
+                <template #intendThirdPartyAuth>
+                    <strong>{{ $t('intend to implement third-party authentication') }}</strong>
+                </template>
+            </i18n-t>
             <p>{{ $t("Please use this option carefully!") }}</p>
 
             <div class="mb-3">

src/lang/en.json

@@ -112,8 +112,10 @@
     "Update Password": "Update Password",
     "Disable Auth": "Disable Auth",
     "Enable Auth": "Enable Auth",
-    "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.message1": "Are you sure want to {disableAuth}?",
+    "disable authentication": "disable authentication",
+    "disableauth.message2": "It is designed for scenarios where you {intendThirdPartyAuth} in front of Uptime Kuma such as Cloudflare Access, Authelia or other authentication mechanisms.",
+    "where you intend to implement third-party authentication": "where you intend to implement third-party authentication",
     "Please use this option carefully!": "Please use this option carefully!",
     "Logout": "Logout",
     "Leave": "Leave",
@@ -565,7 +567,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.",
-    "jsonQueryDescription": "Do a json Query against the response and check for expected value (Return value will get converted into string for comparison). Check out <a href='https://jsonata.org/'>jsonata.org</a> for the documentation about the query language. A playground can be found <a href='https://try.jsonata.org/'>here</a>.",
+    "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.",
     "backupDescription3": "Sensitive data such as notification tokens are included in the export file; please store export securely.",

src/pages/EditMonitor.vue

@@ -149,9 +149,10 @@
                                 <label for="jsonPath" class="form-label">{{ $t("Json Query") }}</label>
                                 <input id="jsonPath" v-model="monitor.jsonPath" type="text" class="form-control" required>
 
-                                <!-- eslint-disable-next-line vue/no-v-html -->
-                                <div class="form-text" v-html="$t('jsonQueryDescription')">
-                                </div>
+                                <i18n-t tag="div" class="form-text" keypath="jsonQueryDescription">
+                                    <a href="https://jsonata.org/">jsonata.org</a>
+                                    <a href="https://try.jsonata.org/">{{ $t('here') }}</a>
+                                </i18n-t>
                                 <br>
 
                                 <label for="expectedValue" class="form-label">{{ $t("Expected Value") }}</label>