[web] Remove v-html usage

Reinforcing security by remove the usage of v-html.

web-src/src/locales/de.json

@@ -237,9 +237,10 @@
     "about": {
       "albums": "Albums",
       "artists": "Künstler",
-      "built-with": "Oberfläche erstellt mit <a href=\"https://bulma.io\">Bulma</a>, <a href=\"https://pictogrammers.com/library/mdi/\">Material Design Icons</a>, <a href=\"https://vuejs.org/\">Vue.js</a>, <a href=\"https://github.com/mzabriskie/axios\">axios</a> und <a href=\"https://github.com/owntone/owntone-server/network/dependencies\">anderem</a>.",
+      "built-with": "Oberfläche erstellt mit {bulma}, {mdi}, {vuejs}, {axios} und {others}.",
       "compiled-with": "Compiliert mit Unterstützung von {options}.",
       "library": "Bibliothek",
+      "more": "mehr",
       "total-playtime": "Gesamte Spielzeit",
       "tracks": "Tracks",
       "update": "Neu einlesen",
@@ -414,7 +415,8 @@
       "artists": "Künstler",
       "audiobooks": "Hörbücher",
       "composers": "Komponisten",
-      "help": "Tip: Du kannst mit einer Smart-Playlist-Abfrage-Sprache nach <a href=\"https://owntone.github.io/owntone-server/smart-playlists/\" target=\"_blank\">Ausdrücken</a> suchen wenn Du dem Ausdruck ein <code>query:</code> voranstellst.",
+      "expression": "Ausdrücken",
+      "help": "Tip: Du kannst mit einer Smart-Playlist-Abfrage-Sprache nach {help} suchen wenn Du dem Ausdruck ein {query} voranstellst.",
       "no-albums": "Keine Alben gefunden",
       "no-artists": "Keine Künstler gefunden",
       "no-audiobooks": "Keine Hörbücher gefunden",
@@ -486,7 +488,7 @@
       },
       "services": {
         "lastfm": {
-          "grant-access": "<b>Last.fm</b> - melde Dich mit Deinem Last.fm-Benutzernamen und Passwort an, um Scrobbeln zu aktivieren",
+          "grant-access": "Melde Dich mit Deinem Last.fm-Benutzernamen und Passwort an, um Scrobbeln zu aktivieren",
           "info": "OwnTone wird den Benutzernamen und das Passwort von last.fm nicht speichern, nur den Sitzungs-Schlüssel. Dieser läuft nicht ab.",
           "title": "Last.fm",
           "no-support": "OwnTone wurde ohne Unterstützung für Last.fm erstellt.",
@@ -500,7 +502,7 @@
           "user": "Zugriff gestattet für ",
           "authorize": "Authorisiere Web-API-Zugriff",
           "credentials": " - Anmelden mit dem Spotify Benutzername und Passwort",
-          "grant-access": "<b>Spotify Web-API</b> - Zugriff auf die Spotify Web-API gestatten",
+          "grant-access": "Zugriff auf die Spotify Web-API gestatten",
           "help-1": "libspotify ermöglicht OwnTone, Spotify-Tracks abzuspielen.",
           "help-2": "OwnTone speichert das Passwort nicht, aber wird über libspotify dennoch einen automatischen Login über ein Login-Token ermöglichen.",
           "reauthorize": "Bitte den Zugriff der Web-API durch setzen folgender Zugriffsrechte für Owntone: ",

web-src/src/locales/en.json

@@ -237,9 +237,10 @@
     "about": {
       "albums": "Albums",
       "artists": "Artists",
-      "built-with": "Web interface built with <a href=\"https://bulma.io\">Bulma</a>, <a href=\"https://pictogrammers.com/library/mdi/\">Material Design Icons</a>, <a href=\"https://vuejs.org/\">Vue.js</a>, <a href=\"https://github.com/mzabriskie/axios\">axios</a> and <a href=\"https://github.com/owntone/owntone-server/network/dependencies\">more</a>.",
+      "built-with": "Web interface built with {bulma}, {mdi}, {vuejs}, {axios} and {others}.",
       "compiled-with": "Compiled with support for {options}.",
       "library": "Library",
+      "more": "more",
       "total-playtime": "Total playtime",
       "tracks": "Tracks",
       "update": "Update",
@@ -414,7 +415,8 @@
       "artists": "Artists",
       "audiobooks": "Audiobooks",
       "composers": "Composers",
-      "help": "Tip: you can search by a smart playlist query language <a href=\"https://owntone.github.io/owntone-server/smart-playlists/\" target=\"_blank\">expression</a> if you prefix it with <code>query:</code>.",
+      "expression": "expression",
+      "help": "Tip: you can search by a smart playlist query language {help} if you prefix it with {query}.",
       "no-albums": "No albums found",
       "no-artists": "No artists found",
       "no-audiobooks": "No audiobooks found",
@@ -486,7 +488,7 @@
       },
       "services": {
         "lastfm": {
-          "grant-access": "<b>Last.fm</b> - Login with your Last.fm username and password to enable scrobbling",
+          "grant-access": "Login with your Last.fm username and password to enable scrobbling",
           "info": "OwnTone will not store your Last.fm username/password, only the session key. The session key does not expire.",
           "title": "Last.fm",
           "no-support": "OwnTone was built without support for Last.fm.",
@@ -500,7 +502,7 @@
           "user": "Access granted for ",
           "authorize": "Authorize Web API access",
           "credentials": " - Login with your Spotify username and password",
-          "grant-access": "<b>Spotify Web API</b> - Grant access to the Spotify Web API",
+          "grant-access": "Grant access to the Spotify Web API",
           "help-1": "libspotify enables OwnTone to play Spotify tracks.",
           "help-2": "OwnTone will not store your password, but will still be able to log you in automatically afterwards, because libspotify saves a login token.",
           "reauthorize": "Please reauthorize Web API access to grant OwnTone the following additional access rights: ",

web-src/src/locales/fr.json

@@ -237,16 +237,17 @@
     "about": {
       "albums": "Albums",
       "artists": "Artistes",
-      "built-with": "Interface utilisateur construite avec <a href=\"https://bulma.io\">Bulma</a>, <a href=\"https://pictogrammers.com/library/mdi/\">Material Design Icons</a>, <a href=\"https://vuejs.org/\">Vue.js</a>, <a href=\"https://github.com/mzabriskie/axios\">axios</a> et <a href=\"https://github.com/owntone/owntone-server/network/dependencies\">plus</a>.",
+      "built-with": "Interface utilisateur construite avec {bulma}, {mdi}, {vuejs}, {axios} et {others}.",
       "compiled-with": "Compilé avec les options {options}.",
       "library": "Bibliothèque",
+      "more": "plus",
       "total-playtime": "Durée totale de lecture",
       "tracks": "Pistes",
       "update": "Actualiser",
       "updated-on": "il y a {time}",
       "updated": "Mis à jour",
       "uptime": "Temps de fonctionnement",
-      "name": "Version {version}"
+      "version": "Version {version}"
     },
     "album": {
       "shuffle": "Lecture aléatoire",
@@ -414,7 +415,8 @@
       "artists": "Artistes",
       "audiobooks": "Livres audio",
       "composers": "Compositeurs",
-      "help": "Astuce : en préfixant votre requête avec <code>query:</code>, vous pouvez effectuer une recherche avec une <a href=\"https://owntone.github.io/owntone-server/smart-playlists/\" target=\"_blank\">expression</a> du langage de requête de liste de lecture intelligente.",
+      "expression": "expression",
+      "help": "Astuce : vous pouvez effectuer une recherche avec une {help} du langage de requête de liste de lecture intelligente en préfixant votre requête avec {query}",
       "no-albums": "Aucun album trouvé",
       "no-artists": "Aucun artiste trouvé",
       "no-audiobooks": "Aucun livre audio trouvé",
@@ -486,7 +488,7 @@
       },
       "services": {
         "lastfm": {
-          "grant-access": "<b>Last.fm</b> - Connectez-vous avec votre nom d’utilisateur et votre mot de passe Last.fm pour activer le scrobbling.",
+          "grant-access": "Connectez-vous avec votre nom d’utilisateur et votre mot de passe Last.fm pour activer le scrobbling.",
           "info": "Le nom d’utilisateur et le mot de passe Last.fm ne sont pas enregistrés, uniquement la clé de session. La clé de session n’expire pas.",
           "title": "Last.fm",
           "no-support": "L’option Last.fm n’est pas présente.",
@@ -500,7 +502,7 @@
           "user": "Accès autorisé pour ",
           "authorize": "Autoriser l’accès à l’API",
           "credentials": " - Connectez-vous avec votre nom d’utilisateur et mot de passe Spotify",
-          "grant-access": "<b>Spotify</b> - Accordez l’accès à l’API de Spotify",
+          "grant-access": "Accordez l’accès à l’API de Spotify",
           "help-1": "La bibliothèque libspotify permet de lire les pistes de Spotify.",
           "help-2": "Votre nom d’utilisateur et votre mot de passe Spotify ne sont pas enregistrés, uniquement le jeton de connexion.",
           "reauthorize": "Veuillez autoriser à nouveau l’accès à l’API pour accorder à OwnTone les droits d’accès supplémentaires suivants :",

web-src/src/pages/PageAbout.vue

@@ -140,7 +140,27 @@
                   })
                 "
               />
-              <p class="is-size-7" v-html="$t('page.about.built-with')" />
+              <i18n-t tag="p" class="is-size-7" keypath="page.about.built-with">
+                <template #bulma><a href="https://bulma.io">Bulma</a></template>
+                <template #mdi
+                  ><a href="https://pictogrammers.com/library/mdi/"
+                    >Material Design Icons</a
+                  ></template
+                >
+                <template #vuejs
+                  ><a href="https://vuejs.org/">Vue.js</a></template
+                >
+                <template #axios
+                  ><a href="https://github.com/mzabriskie/axios"
+                    >axios</a
+                  ></template
+                >
+                <template #others
+                  ><a
+                    href="https://github.com/owntone/owntone-server/network/dependencies"
+                    v-text="$t('page.about.more')"
+                /></template>
+              </i18n-t>
             </div>
           </div>
         </div>

web-src/src/pages/PageSearch.vue

@@ -18,9 +18,19 @@
                   />
                   <mdicon class="icon is-left" name="magnify" size="16" />
                 </p>
-                <p class="help has-text-centered">
+                <i18n-t
-                  <span v-html="$t('page.search.help')" />
+                  tag="p"
-                </p>
+                  class="help has-text-centered"
+                  keypath="page.search.help"
+                >
+                  <template #query><code>query:</code></template>
+                  <template #help
+                    ><a
+                      href="https://owntone.github.io/owntone-server/smart-playlists/"
+                      target="_blank"
+                      v-text="$t('page.search.expression')"
+                  /></template>
+                </i18n-t>
               </div>
             </form>
             <div class="tags mt-4">

web-src/src/pages/SettingsPageOnlineServices.vue

@@ -19,7 +19,7 @@
           <div class="mt-5">
             <p
               class="content"
-              v-html="$t('page.settings.services.spotify.grant-access')"
+              v-text="$t('page.settings.services.spotify.grant-access')"
             />
             <p v-if="spotify.webapi_token_valid">
               <span v-text="$t('page.settings.services.spotify.user')" />
@@ -74,7 +74,7 @@
         <div v-if="lastfm.enabled">
           <p
             class="content"
-            v-html="$t('page.settings.services.lastfm.grant-access')"
+            v-text="$t('page.settings.services.lastfm.grant-access')"
           />
           <div v-if="lastfm.scrobbling_enabled">
             <a