refactor: move /admin into vue component (#3466)

lnbits/templates/components.vue

@@ -1,3 +1,16 @@
+{% include('components/admin/funding.vue') %} {%
+include('components/admin/funding_sources.vue') %} {%
+include('components/admin/fiat_providers.vue') %} {%
+include('components/admin/exchange_providers.vue') %} {%
+include('components/admin/security.vue') %} {%
+include('components/admin/users.vue') %} {%
+include('components/admin/site_customisation.vue') %} {%
+include('components/admin/audit.vue') %} {%
+include('components/admin/extensions.vue') %} {%
+include('components/admin/library.vue') %} {%
+include('components/admin/notifications.vue') %} {%
+include('components/admin/server.vue') %}
+
 <template id="lnbits-wallet-list">
   <q-list
     v-if="g.user && g.user.wallets.length"
@@ -1232,92 +1245,6 @@
   </q-btn>
 </template>
 
-<template id="lnbits-funding-sources">
-  <div class="funding-sources">
-    <h6 class="q-my-none q-mb-sm">
-      <span v-text="$t('funding_sources')"></span>
-      <q-btn
-        round
-        flat
-        @click="this.hideInput = !this.hideInput"
-        :icon="this.hideInput ? 'visibility_off' : 'visibility'"
-      ></q-btn>
-    </h6>
-
-    <div class="row">
-      <div class="col-12">
-        <p>Active Funding<small> (Requires server restart)</small></p>
-        <q-select
-          filled
-          v-model="formData.lnbits_backend_wallet_class"
-          hint="Select the active funding wallet"
-          :options="sortedAllowedFundingSources"
-          :option-label="item => getFundingSourceLabel(item)"
-        ></q-select>
-      </div>
-    </div>
-    <q-list
-      class="q-mt-md"
-      v-for="(fund, idx) in allowedFundingSources"
-      :key="idx"
-    >
-      <div
-        v-if="
-          fundingSources.get(fund) &&
-          fund === formData.lnbits_backend_wallet_class
-        "
-      >
-        <div
-          class="row"
-          v-for="([key, prop], i) in Object.entries(fundingSources.get(fund))"
-          :key="i"
-        >
-          <div class="col-12">
-            <q-input
-              v-model="formData[key]"
-              filled
-              class="q-mt-sm"
-              :type="hideInput ? 'password' : 'text'"
-              :label="prop.label"
-              :hint="prop.hint"
-              :readonly="prop.readonly || false"
-            >
-              <q-btn
-                v-if="prop.copy"
-                @click="copyText(formData[key])"
-                icon="content_copy"
-                class="cursor-pointer"
-                color="grey"
-                flat
-                dense
-              ></q-btn>
-              <q-btn
-                v-if="prop.qrcode"
-                @click="showQRValue(formData[key])"
-                icon="qr_code"
-                class="cursor-pointer"
-                color="grey"
-                flat
-                dense
-              ></q-btn>
-            </q-input>
-          </div>
-        </div>
-      </div>
-    </q-list>
-    <q-dialog v-model="showQRDialog">
-      <q-card class="q-pa-md">
-        <q-card-section>
-          <lnbits-qrcode :value="qrValue"></lnbits-qrcode>
-        </q-card-section>
-        <q-card-actions align="right">
-          <q-btn flat :label="$t('close')" v-close-popup />
-        </q-card-actions>
-      </q-card>
-    </q-dialog>
-  </div>
-</template>
-
 <template id="user-id-only">
   <div v-if="authAction === 'login' && authMethod === 'user-id-only'">
     <q-card-section class="q-pb-none">