Remove all {% raw %} usage (#2318)

* Remove raw from templates 
* Remove v-text from q-tooltip
* extension buttons
* Move more to spans
* Reformatted

---------

Co-authored-by: Tiago Vasconcelos <talvasconcelos@gmail.com>

lnbits/core/templates/admin/_tab_funding.html

@@ -7,21 +7,21 @@
         <div class="col">
           <p>Funding Source Info</p>
           <ul>
-            {%raw%}
-            <li>Funding Source: {{settings.lnbits_backend_wallet_class}}</li>
-            <li>
-              Node Balance: {{(auditData.node_balance_msats /
-              1000).toLocaleString()}} sats
-            </li>
-            <li>
-              LNbits Balance: {{(auditData.lnbits_balance_msats /
-              1000).toLocaleString()}} sats
-            </li>
-            <li>
-              Reserve Percent: {{(auditData.node_balance_msats /
-              auditData.lnbits_balance_msats * 100).toFixed(2)}} %
-            </li>
-            {%endraw%}
+            <li
+              v-text="'Funding Source: '+ settings.lnbits_backend_wallet_class"
+            ></li>
+            <li
+              v-text="'Node Balance: ' + (auditData.node_balance_msats /
+              1000).toLocaleString() + ' sats'"
+            ></li>
+            <li
+              v-text="'LNbits Balance: ' + (auditData.lnbits_balance_msats /
+              1000).toLocaleString() + ' sats'"
+            ></li>
+            <li
+              v-text="'Reserve Percent: ' + (auditData.node_balance_msats /
+              auditData.lnbits_balance_msats * 100).toFixed(2) + ' %'"
+            ></li>
           </ul>
           <br />
         </div>

lnbits/core/templates/admin/_tab_security.html

@@ -131,7 +131,7 @@
               style="padding: 10px; color: #fafafa; height: 320px"
             >
               <small v-for="log in logs"
-                >{% raw %}{{ log }}{% endraw %}<br
+                ><span v-text="log"></span><br
               /></small>
             </q-scroll-area>
           </div>
@@ -166,7 +166,6 @@
                 ></q-btn>
               </q-input>
               <div>
-                {%raw%}
                 <q-chip
                   v-for="blocked_ip in formData.lnbits_blocked_ips"
                   :key="blocked_ip"
@@ -174,10 +173,8 @@
                   @remove="removeBlockedIPs(blocked_ip)"
                   color="primary"
                   text-color="white"
-                >
-                  {{ blocked_ip }}
-                </q-chip>
-                {%endraw%}
+                  v-text="blocked_ip"
+                ></q-chip>
               </div>
               <br />
             </div>
@@ -198,7 +195,6 @@
                 ></q-btn>
               </q-input>
               <div>
-                {%raw%}
                 <q-chip
                   v-for="allowed_ip in formData.lnbits_allowed_ips"
                   :key="allowed_ip"
@@ -206,10 +202,8 @@
                   @remove="removeAllowedIPs(allowed_ip)"
                   color="primary"
                   text-color="white"
-                >
-                  {{ allowed_ip }}
-                </q-chip>
-                {%endraw%}
+                  v-text="allowed_ip"
+                ></q-chip>
               </div>
               <br />
             </div>

lnbits/core/templates/admin/_tab_security_notifications.html

@@ -1,4 +1,3 @@
-{% raw %}
 <q-banner v-if="updateAvailable" class="bg-primary text-white">
   <q-icon size="28px" name="update"></q-icon>
 
@@ -30,9 +29,12 @@
       <template v-slot:header="props">
         <q-tr :props="props">
           <q-th auto-width> </q-th>
-          <q-th v-for="col in props.cols" :key="col.name" :props="props"
-            >{{ col.label }}</q-th
-          >
+          <q-th
+            v-for="col in props.cols"
+            :key="col.name"
+            :props="props"
+            v-text="col.label"
+          ></q-th>
         </q-tr>
       </template>
       <template v-slot:body="props">
@@ -51,12 +53,16 @@
               color="red"
             ></q-icon>
           </q-td>
-          <q-td auto-width key="date" :props="props">
-            {{ formatDate(props.row.date) }}
+          <q-td
+            auto-width
+            key="date"
+            :props="props"
+            v-text="formatDate(props.row.date)"
+          >
           </q-td>
           <q-td key="message" :props="props"
-            >{{ props.row.message }}
-            <a
+            ><span v-text="props.row.message"></span
+            ><a
               v-if="props.row.link"
               target="_blank"
               rel="noopener noreferrer"
@@ -69,4 +75,3 @@
     </q-table>
   </q-card-section>
 </q-card>
-{% endraw %}

lnbits/core/templates/admin/_tab_server.html

@@ -7,14 +7,14 @@
         <div class="col">
           <p>Server Info</p>
           <ul>
-            {%raw%}
-            <li v-if="settings.lnbits_data_folder">
-              SQlite: {{settings.lnbits_data_folder}}
-            </li>
-            <li v-if="settings.lnbits_database_url">
-              Postgres: {{settings.lnbits_database_url}}
-            </li>
-            {%endraw%}
+            <li
+              v-if="settings.lnbits_data_folder"
+              v-text="'SQlite: ' + settings.lnbits_data_folder"
+            ></li>
+            <li
+              v-if="settings.lnbits_database_url"
+              v-text="'Postgres: ' + settings.lnbits_database_url"
+            ></li>
           </ul>
           <br />
         </div>
@@ -154,7 +154,6 @@
           <q-btn @click="addExtensionsManifest" dense flat icon="add"></q-btn>
         </q-input>
         <div>
-          {%raw%}
           <q-chip
             v-for="manifestUrl in formData.lnbits_extensions_manifests"
             :key="manifestUrl"
@@ -162,10 +161,8 @@
             @remove="removeExtensionsManifest(manifestUrl)"
             color="primary"
             text-color="white"
-          >
-            {{ manifestUrl }}
-          </q-chip>
-          {%endraw%}
+            v-text="manifestUrl"
+          ></q-chip>
         </div>
         <br />
       </div>

lnbits/core/templates/admin/index.html

@@ -8,9 +8,9 @@
       @click="updateSettings"
       :disabled="!checkChanges"
     >
-      <q-tooltip v-if="checkChanges"
-        >{%raw%}{{ $t('save_tooltip') }}{%endraw%}</q-tooltip
-      >
+      <q-tooltip v-if="checkChanges">
+        <span v-text="$t('save_tooltip')"></span>
+      </q-tooltip>
 
       <q-badge
         v-if="checkChanges"
@@ -27,9 +27,9 @@
       color="primary"
       @click="restartServer"
     >
-      <q-tooltip v-if="needsRestart"
-        >{%raw%}{{ $t('restart_tooltip') }}{%endraw%}</q-tooltip
-      >
+      <q-tooltip v-if="needsRestart">
+        <span v-text="$t('restart_tooltip')"></span>
+      </q-tooltip>
 
       <q-badge
         v-if="needsRestart"
@@ -46,7 +46,9 @@
       color="primary"
       @click="topUpDialog.show = true"
     >
-      <q-tooltip>{%raw%}{{ $t('add_funds_tooltip') }}{%endraw%}</q-tooltip>
+      <q-tooltip>
+        <span v-text="$t('add_funds_tooltip')"></span>
+      </q-tooltip>
     </q-btn>
 
     <q-btn :label="$t('download_backup')" flat @click="downloadBackup"></q-btn>
@@ -59,7 +61,9 @@
       @click="deleteSettings"
       class="float-right"
     >
-      <q-tooltip>{%raw%}{{ $t('reset_defaults_tooltip') }}{%endraw%}</q-tooltip>
+      <q-tooltip>
+        <span v-text="$t('reset_defaults_tooltip')"></span>
+      </q-tooltip>
     </q-btn>
   </div>
 </div>

lnbits/core/templates/core/extensions.html

@@ -2,7 +2,7 @@
 %} {{ window_vars(user, extensions) }}{% block page %}
 <div class="row q-col-gutter-md q-mb-md">
   <div class="col-sm-9 col-xs-12">
-    <p class="text-h4 gt-sm">{%raw%}{{ $t('extensions') }}{%endraw%}</p>
+    <p class="text-h4 gt-sm" v-text="$t('extensions')"></p>
   </div>
 
   <div class="col-sm-3 col-xs-12 q-ml-auto">
@@ -43,9 +43,10 @@
               :label="$t('featured')"
               @update="val => tab = val.name"
             ></q-tab>
-            <i v-if="!g.user.admin && tab != 'installed'"
-              >{%raw%}{{ $t('only_admins_can_install') }}{%endraw%}</i
-            >
+            <i
+              v-if="!g.user.admin && tab != 'installed'"
+              v-text="$t('only_admins_can_install')"
+            ></i>
           </q-tabs>
         </div>
       </div>
@@ -89,45 +90,42 @@
               color="green"
               class="float-right"
             >
-              <small>{%raw%}{{ $t('new_version') }}{%endraw%}</small>
+              <small v-text="$t('new_version')"></small>
               <q-tooltip
                 ><span v-text="extension.latestRelease.version"></span
               ></q-tooltip>
             </q-badge>
-            {% raw %}
-            <div class="text-h5 gt-sm q-mt-sm q-mb-xs gt-sm">
-              {{ extension.name }}
-            </div>
+            <div
+              class="text-h5 gt-sm q-mt-sm q-mb-xs gt-sm"
+              v-text="extension.name"
+            ></div>
             <div
               class="text-h5 gt-sm q-mt-sm q-mb-xs lt-md"
               style="min-height: 60px"
-            >
-              {{ extension.name }}
-            </div>
+              v-text="extension.name"
+            ></div>
             <div
               class="text-subtitle2 gt-sm"
               style="font-size: 11px; height: 34px"
-            >
-              {{ extension.shortDescription ||
-              extension.installedRelease?.description }}
-            </div>
-            <div class="text-subtitle1 lt-md q-mt-sm q-mb-xs">
-              {{ extension.name }}
-            </div>
+              v-text="extension.shortDescription || extension.installedRelease?.description"
+            ></div>
+            <div
+              class="text-subtitle1 lt-md q-mt-sm q-mb-xs"
+              v-text="extension.name"
+            ></div>
             <div
               class="text-subtitle2 lt-md"
               style="font-size: 9px; height: 34px"
-            >
-              {{ extension.shortDescription }}
-            </div>
-            {% endraw %}
+              v-text="extension.shortDescription"
+            ></div>
           </div>
         </div>
         <div class="row q-pt-sm">
           <div class="col">
-            <small v-if="extension.dependencies?.length"
-              >{%raw%}{{ $t('extension_depends_on') }}{%endraw%}</small
-            >
+            <small
+              v-if="extension.dependencies?.length"
+              v-text="$t('extension_depends_on')"
+            ></small>
             <small v-else>&nbsp;</small>
             <q-badge
               v-for="dep in extension.dependencies"
@@ -148,20 +146,18 @@
             size="1.5em"
             :max="5"
             color="primary"
-            ><q-tooltip
-              >{%raw%}{{ $t('extension_rating_soon') }}{%endraw%}</q-tooltip
-            ></q-rating
-          >
+            ><q-tooltip>
+              <span v-text="$t('extension_rating_soon')"></span> </q-tooltip
+          ></q-rating>
           <q-rating
             v-model="maxStars"
             class="lt-md"
             size="1.5em"
             :max="5"
             color="primary"
-            ><q-tooltip
-              >{%raw%}{{ $t('extension_rating_soon') }}{%endraw%}</q-tooltip
-            ></q-rating
-          >
+            ><q-tooltip>
+              <span v-text="$t('extension_rating_soon')"></span> </q-tooltip
+          ></q-rating>
           <q-toggle
             v-if="extension.isAvailable && extension.isInstalled && g.user.admin"
             :label="extension.isActive ? $t('activated'):  $t('deactivated') "
@@ -169,11 +165,11 @@
             style="max-height: 21px"
             v-model="extension.isActive"
             @input="toggleExtension(extension)"
-            ><q-tooltip
-              >{%raw%}{{ $t('activate_extension_details')
-              }}{%endraw%}</q-tooltip
-            ></q-toggle
-          >
+            ><q-tooltip>
+              <span
+                v-text="$t('activate_extension_details')"
+              ></span> </q-tooltip
+          ></q-toggle>
         </div>
       </q-card-section>
       <q-separator></q-separator>
@@ -186,8 +182,8 @@
               color="primary"
               type="a"
               :href="extension.id + '/'"
-              >{%raw%}{{ $t('open') }}{%endraw%}</q-btn
-            >
+              :label="$t('open')"
+            ></q-btn>
             <q-btn
               v-if="user.extensions.includes(extension.id) && extension.isActive && extension.isInstalled"
               flat
@@ -196,11 +192,12 @@
               :href="['{{
                 url_for('install.extensions')
               }}', '?disable=', extension.id].join('')"
+              :label="$t('disable')"
+            ></q-btn>
+            <q-badge
+              v-if="extension.isAdminOnly && !user.admin"
+              v-text="$t('admin_only')"
             >
-              {%raw%}{{ $t('disable') }}{%endraw%}</q-btn
-            >
-            <q-badge v-if="extension.isAdminOnly && !user.admin">
-              {%raw%}{{ $t('admin_only') }}{%endraw%}
             </q-badge>
             <q-btn
               v-else-if="extension.isInstalled && extension.isActive && !user.extensions.includes(extension.id)"
@@ -210,8 +207,8 @@
               :href="['{{
                 url_for('install.extensions')
               }}', '?enable=', extension.id].join('')"
+              :label="$t('enable')"
             >
-              {%raw%}{{ $t('enable') }}{%endraw%}
               <q-tooltip>
                 <span v-text="$t('enable_extension_details')">
                 </span> </q-tooltip
@@ -222,12 +219,11 @@
               flat
               color="primary"
               v-if="g.user.admin"
-            >
-              {%raw%}{{ $t('manage') }}{%endraw%}<q-tooltip
-                >{%raw%}{{ $t('manage_extension_details')
-                }}{%endraw%}</q-tooltip
-              ></q-btn
-            >
+              :label="$t('manage')"
+              ><q-tooltip
+                ><span v-text="$t('manage_extension_details')"></span
+              ></q-tooltip>
+            </q-btn>
           </div>
           <div v-else>
             <q-spinner color="primary" size="2.55em"></q-spinner>
@@ -240,7 +236,7 @@
             class="float-right"
           >
             <q-badge>
-              {% raw %}{{ extension.installedRelease.version }}{% endraw %}
+              <span v-text="extension.installedRelease.version"></span>
               <q-tooltip>
                 <span v-text="$t('extension_installed_version')"></span>
               </q-tooltip>
@@ -252,10 +248,10 @@
   </div>
   <q-dialog v-model="showUninstallDialog">
     <q-card class="q-pa-lg">
-      <h6 class="q-my-md text-primary">{%raw%}{{ $t('warning') }}{%endraw%}</h6>
+      <h6 class="q-my-md text-primary" v-text="$t('warning')"></h6>
       <p>
-        {%raw%}{{ $t('extension_uninstall_warning') }}{%endraw%} <br />
-        {%raw%}{{ $t('confirm_continue') }}{%endraw%}
+        <span v-text="$t('extension_uninstall_warning')"></span><br />
+        <span v-text="$t('confirm_continue')"></span>
       </p>
 
       <div class="row q-mt-lg">
@@ -264,32 +260,39 @@
           value="false"
           label="Cleanup database tables"
         >
-          <q-tooltip class="bg-grey-8" anchor="bottom left" self="top left">
-            {%raw%}{{ $t('extension_db_drop_info') }}{%endraw%}
+          <q-tooltip class="bg-grey-8" anchor="bottom left" self="top left"
+            ><span v-text="$t('extension_db_drop_info')"></span>
           </q-tooltip>
         </q-checkbox>
       </div>
       <div class="row q-mt-lg">
-        <q-btn outline color="grey" @click="uninstallExtension()"
-          >{%raw%}{{ $t('uninstall_confirm') }}{%endraw%}</q-btn
-        >
-        <q-btn v-close-popup flat color="grey" class="q-ml-auto"
-          >{%raw%}{{ $t('cancel') }}{%endraw%}</q-btn
-        >
+        <q-btn
+          outline
+          color="grey"
+          @click="uninstallExtension()"
+          v-text="$t('uninstall_confirm')"
+        ></q-btn>
+        <q-btn
+          v-close-popup
+          flat
+          color="grey"
+          class="q-ml-auto"
+          v-text="$t('cancel')"
+        ></q-btn>
       </div>
     </q-card>
   </q-dialog>
 
   <q-dialog v-model="showDropDbDialog">
     <q-card v-if="selectedExtension" class="q-pa-lg">
-      <h6 class="q-my-md text-primary">{%raw%}{{ $t('warning') }}{%endraw%}</h6>
-      <p>{%raw%}{{ $t('extension_db_drop_warning') }}{%endraw%} <br /></p>
+      <h6 class="q-my-md text-primary" v-text="$t('warning')"></h6>
+      <p><span v-text="$t('extension_db_drop_warning')"></span><br /></p>
       <q-input
         v-model="dropDbExtensionId"
         :label="selectedExtension.id"
       ></q-input>
       <br />
-      <p>{%raw%}{{ $t('confirm_continue') }}{%endraw%}</p>
+      <p v-text="$t('confirm_continue')"></p>
 
       <div class="row q-mt-lg">
         <q-btn
@@ -297,11 +300,15 @@
           outline
           color="red"
           @click="dropExtensionDb()"
-          >{%raw%}{{ $t('confirm') }}{%endraw%}</q-btn
-        >
-        <q-btn v-close-popup flat color="grey" class="q-ml-auto"
-          >{%raw%}{{ $t('cancel') }}{%endraw%}</q-btn
-        >
+          v-text="$t('confirm')"
+        ></q-btn>
+        <q-btn
+          v-close-popup
+          flat
+          color="grey"
+          class="q-ml-auto"
+          v-text="$t('cancel')"
+        ></q-btn>
       </div>
     </q-card>
   </q-dialog>
@@ -334,9 +341,13 @@
           ></q-btn>
         </div>
         <div class="col">
-          <q-btn v-close-popup flat color="grey" class="float-right q-ml-lg">
-            {%raw%}{{ $t('close') }}{%endraw%}</q-btn
-          >
+          <q-btn
+            v-close-popup
+            flat
+            color="grey"
+            class="float-right q-ml-lg"
+            v-text="$t('close')"
+          ></q-btn>
         </div>
       </div>
     </q-card>
@@ -370,7 +381,7 @@
               <q-item-section>
                 <div class="row">
                   <div class="col-10">
-                    {%raw%}{{ $t('repository') }}{%endraw%}
+                    <span v-text="$t('repository')"></span>
                     <br />
                     <small v-text="repoName"></small>
                     <q-tooltip
@@ -514,11 +525,11 @@
                         target="_blank"
                         rel="noopener noreferrer"
                         style="color: inherit"
-                        >{%raw%}{{ $t('release_notes') }}{%endraw%}</a
-                      >
+                        v-text="$t('release_notes')"
+                      ></a>
                     </q-card-section>
                     <q-card-section v-else>
-                      {%raw%}{{ $t('extension_min_lnbits_version') }}{%endraw%}
+                      <span v-text="$t('extension_min_lnbits_version')"></span>
                       <strong>
                         <span v-text="release.min_lnbits_version"></span>
                       </strong>
@@ -526,8 +537,11 @@
                     <q-card v-if="release.warning">
                       <q-card-section>
                         <div class="text-h6">
-                          <q-badge color="yellow" text-color="black">
-                            {%raw%}{{ $t('warning') }}{%endraw%}
+                          <q-badge
+                            color="yellow"
+                            text-color="black"
+                            v-text="$t('warning')"
+                          >
                           </q-badge>
                         </div>
                         <div class="text-subtitle2">
@@ -550,9 +564,8 @@
           @click="showUninstall()"
           flat
           color="red"
-        >
-          {%raw%}{{ $t('uninstall') }}{%endraw%}</q-btn
-        >
+          v-text="$t('uninstall')"
+        ></q-btn>
         <q-btn
           v-else-if="selectedExtension?.hasDatabaseTables"
           @click="showDropDb()"
@@ -560,9 +573,13 @@
           color="red"
           :label="$t('drop_db')"
         ></q-btn>
-        <q-btn v-close-popup flat color="grey" class="q-ml-auto">
-          {%raw%}{{ $t('close') }}{%endraw%}</q-btn
-        >
+        <q-btn
+          v-close-popup
+          flat
+          color="grey"
+          class="q-ml-auto"
+          v-text="$t('close')"
+        ></q-btn>
       </div>
     </q-card>
   </q-dialog>

lnbits/core/templates/node/_tab_channels.html

@@ -150,7 +150,6 @@
                 Open channel
               </q-btn>
             </div>
-            {% raw %}
             <div>
               <div class="text-subtitle1 col-grow">Total</div>
               <lnbits-channel-balance
@@ -172,11 +171,12 @@
                 <q-tr :props="props">
                   <div class="q-pb-sm">
                     <div class="row items-center q-gutter-sm">
-                      <div class="text-subtitle1 col-grow">
-                        {{props.row.name}}
-                      </div>
+                      <div
+                        class="text-subtitle1 col-grow"
+                        v-text="props.row.name"
+                      ></div>
                       <div class="text-caption" v-if="props.row.short_id">
-                        {{ props.row.short_id }}
+                        <span v-text="props.row.short_id"></span>
                         <q-btn
                           size="xs"
                           flat
@@ -188,9 +188,8 @@
                       <q-badge
                         rounded
                         :color="states.find(s => s.value == props.row.state)?.color"
+                        v-text="states.find(s => s.value == props.row.state)?.label"
                       >
-                        {{ states.find(s => s.value == props.row.state)?.label
-                        }}
                       </q-badge>
                       <q-btn
                         :disable='props.row.state !== "active"'
@@ -210,15 +209,12 @@
                 </q-tr>
               </template>
             </q-table>
-
-            {% endraw %}
           </q-card-section>
         </q-card>
       </div>
       <div class="col-12 col-xl-6">
         <q-card class="full-height">
           <q-card-section class="column q-gutter-y-sm">
-            {% raw %}
             <div
               class="row items-center q-mt-none justify-between q-gutter-x-md no-wrap"
             >
@@ -254,19 +250,21 @@
                 <q-tr :props="props">
                   <div class="row no-wrap items-center q-gutter-sm">
                     <div class="q-my-sm col-grow">
-                      <div class="text-subtitle1 text-bold">
-                        {{ props.row.alias }}
-                      </div>
+                      <div
+                        class="text-subtitle1 text-bold"
+                        v-text="props.row.alias"
+                      ></div>
                       <div class="row items-center q-gutter-sm">
                         <q-badge
                           :style="`background-color: #${props.row.color}`"
                           class="text-bold"
+                          v-text="'#'+props.row.color"
                         >
-                          #{{ props.row.color }}
                         </q-badge>
-                        <div class="text-bold">
-                          {{ shortenNodeId(props.row.id) }}
-                        </div>
+                        <div
+                          class="text-bold"
+                          v-text="shortenNodeId(props.row.id)"
+                        ></div>
                         <q-btn
                           size="xs"
                           flat
@@ -302,8 +300,6 @@
                 </q-tr>
               </template>
             </q-table>
-
-            {% endraw %}
           </q-card-section>
         </q-card>
       </div>

lnbits/core/templates/node/_tab_dashboard.html

@@ -1,6 +1,5 @@
 <q-tab-panel name="dashboard">
   <q-card-section class="q-pa-none">
-    {% raw %}
     <lnbits-node-info :info="this.info"></lnbits-node-info>
     <div class="row q-col-gutter-lg q-mt-sm">
       <div class="col-12 col-md-8 q-gutter-y-md">
@@ -65,6 +64,5 @@
         ></lnbits-channel-stats>
       </div>
     </div>
-    {% endraw %}
   </q-card-section>
 </q-tab-panel>

lnbits/core/templates/node/_tab_transactions.html

@@ -3,7 +3,6 @@
     <q-dialog v-model="transactionDetailsDialog.show">
       <q-card class="my-card">
         <q-card-section>
-          {% raw %}
           <div class="text-center q-mb-lg">
             <div
               v-if="transactionDetailsDialog.data.isIn && transactionDetailsDialog.data.pending"
@@ -18,7 +17,9 @@
             <div class="row q-my-md">
               <div class="col-3"><b v-text="$t('payment_hash')"></b>:</div>
               <div class="col-9 text-wrap mono">
-                {{ transactionDetailsDialog.data.payment_hash }}
+                <span
+                  v-text="transactionDetailsDialog.data.payment_hash"
+                ></span>
                 <q-icon
                   name="content_copy"
                   @click="copyText(transactionDetailsDialog.data.payment_hash)"
@@ -33,7 +34,7 @@
               >
                 <div class="col-3"><b v-text="$t('payment_proof')"></b>:</div>
                 <div class="col-9 text-wrap mono">
-                  {{ transactionDetailsDialog.data.preimage }}
+                  <span v-text="transactionDetailsDialog.data.preimage"></span>
                   <q-icon
                     name="content_copy"
                     @click="copyText(transactionDetailsDialog.data.preimage)"
@@ -66,7 +67,6 @@
               ></q-btn>
             </div>
           </div>
-          {% endraw %}
         </q-card-section>
       </q-card>
     </q-dialog>
@@ -102,7 +102,6 @@
               :filter="paymentsTable.filter"
               @request="getPayments"
             >
-              {% raw %}
               <template v-slot:body-cell-pending="props">
                 <q-td auto-width class="text-center">
                   <q-icon
@@ -211,9 +210,8 @@
                     <q-badge
                       :style="`background-color: #${props.row.destination?.color}`"
                       class="text-bold"
-                    >
-                      {{ props.row.destination?.alias }}
-                    </q-badge>
+                      v-text="props.row.destination?.alias"
+                    ></q-badge>
                     <div>
                       <q-btn
                         size="xs"
@@ -233,7 +231,6 @@
                   </div>
                 </q-td>
               </template>
-              {% endraw %}
             </q-table>
           </q-card-section>
         </q-card>
@@ -266,7 +263,6 @@
               :filter="invoiceTable.filter"
               @request="getInvoices"
             >
-              {% raw %}
               <template v-slot:body-cell-pending="props">
                 <q-td auto-width class="text-center">
                   <q-icon
@@ -305,8 +301,6 @@
                   ></lnbits-date>
                 </q-td>
               </template>
-
-              {% endraw %}
             </q-table>
           </q-card-section>
         </q-card>