refactor: extract permissions component
This commit is contained in:
Vlad Stan
@@ -19,6 +19,7 @@ include('components/lnbits-header-wallets.vue') %} {%
|
||||
include('components/lnbits-drawer.vue') %} {%
|
||||
include('components/lnbits-home-logos.vue') %} {%
|
||||
include('components/lnbits-manage-extension-list.vue') %} {%
|
||||
include('components/lnbits-extension-permissions.vue') %} {%
|
||||
include('components/lnbits-manage-wallet-list.vue') %} {%
|
||||
include('components/lnbits-language-dropdown.vue') %} {%
|
||||
include('components/lnbits-payment-list.vue') %} {%
|
||||
|
||||
@@ -0,0 +1,105 @@
|
||||
<template id="lnbits-extension-permissions">
|
||||
<q-list bordered separator>
|
||||
<q-expansion-item
|
||||
v-for="permission of displayItems"
|
||||
:key="permission.id"
|
||||
dense
|
||||
expand-separator
|
||||
class="q-pt-xs"
|
||||
>
|
||||
<template v-slot:header>
|
||||
<q-item-section>
|
||||
<q-item-label class="text-weight-medium">
|
||||
<span v-text="permission.label"></span>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section
|
||||
v-if="permission.risk.level !== 'low' || permission.badges.length"
|
||||
side
|
||||
top
|
||||
>
|
||||
<div class="row items-center justify-end q-gutter-xs">
|
||||
<q-badge
|
||||
v-for="badge of permission.badges"
|
||||
:key="badge.key"
|
||||
outline
|
||||
color="primary"
|
||||
v-text="badge.label"
|
||||
></q-badge>
|
||||
<q-badge
|
||||
v-if="permission.risk.level !== 'low'"
|
||||
:color="permission.risk.color"
|
||||
v-text="permission.risk.label"
|
||||
></q-badge>
|
||||
</div>
|
||||
</q-item-section>
|
||||
</template>
|
||||
|
||||
<div class="q-px-md q-pb-sm">
|
||||
<div
|
||||
v-if="permission.risk.warning"
|
||||
class="row items-center text-negative text-caption q-mb-xs"
|
||||
>
|
||||
<q-icon name="warning" size="16px" class="q-mr-xs"></q-icon>
|
||||
<span v-text="permission.risk.warning"></span>
|
||||
</div>
|
||||
<p
|
||||
v-for="description of permission.descriptions"
|
||||
:key="description"
|
||||
class="text-caption q-mb-xs"
|
||||
v-text="description"
|
||||
></p>
|
||||
<p
|
||||
v-for="policy of permission.invoicePolicies"
|
||||
:key="policy.table + ':' + policy.walletField"
|
||||
class="text-caption q-mb-xs"
|
||||
v-text="publicInvoicePolicySentence(policy)"
|
||||
></p>
|
||||
<ul v-if="permission.fieldGroups.length" class="q-my-sm q-pl-md">
|
||||
<li v-for="group of permission.fieldGroups" :key="group.table">
|
||||
<span v-text="group.table"></span>
|
||||
<ul v-if="group.fields.length" class="q-pl-md">
|
||||
<li
|
||||
v-for="field of group.fields"
|
||||
:key="group.table + ':' + field"
|
||||
v-text="field"
|
||||
></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<div v-if="permission.extensionAccess.length" class="q-mt-sm">
|
||||
<div
|
||||
class="text-caption text-grey"
|
||||
v-text="$t('extension_permission_extension_api_request_extensions')"
|
||||
></div>
|
||||
<div
|
||||
v-for="target of permission.extensionAccess"
|
||||
:key="target.id"
|
||||
class="row items-center q-gutter-xs q-mt-xs"
|
||||
>
|
||||
<span class="text-caption" v-text="target.name"></span>
|
||||
<q-badge
|
||||
v-for="access of target.access"
|
||||
:key="target.id + access"
|
||||
color="grey-7"
|
||||
v-text="permissionAccessLabel(access)"
|
||||
></q-badge>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="permission.httpHosts.length" class="q-mt-sm">
|
||||
<div
|
||||
class="text-caption text-grey"
|
||||
v-text="$t('extension_permission_http_request_hosts')"
|
||||
></div>
|
||||
<ul class="q-my-sm q-pl-md">
|
||||
<li
|
||||
v-for="host of permission.httpHosts"
|
||||
:key="host"
|
||||
v-text="host"
|
||||
></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</q-expansion-item>
|
||||
</q-list>
|
||||
</template>
|
||||
@@ -463,10 +463,6 @@
|
||||
<q-card v-if="permissionGrant.show" class="q-pa-md lnbits__dialog-card">
|
||||
<q-card-section>
|
||||
<div class="text-h6" v-text="$t('extension_permissions_title')"></div>
|
||||
<div
|
||||
class="text-body2 q-mt-sm"
|
||||
v-text="$t('extension_permissions_request')"
|
||||
></div>
|
||||
<q-banner
|
||||
v-if="permissionGrantHasHighRisk()"
|
||||
dense
|
||||
@@ -479,111 +475,11 @@
|
||||
</q-banner>
|
||||
</q-card-section>
|
||||
|
||||
<q-list bordered separator class="q-mt-md">
|
||||
<q-expansion-item
|
||||
v-for="permission of permissionGrantDisplayItems()"
|
||||
:key="permission.id"
|
||||
dense
|
||||
expand-separator
|
||||
class="q-pt-xs"
|
||||
>
|
||||
<template v-slot:header>
|
||||
<q-item-section>
|
||||
<q-item-label class="text-weight-medium">
|
||||
<span v-text="permission.label"></span>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section
|
||||
v-if="permission.risk.level !== 'low' || permission.badges.length"
|
||||
side
|
||||
top
|
||||
>
|
||||
<div class="row items-center justify-end q-gutter-xs">
|
||||
<q-badge
|
||||
v-for="badge of permission.badges"
|
||||
:key="badge.key"
|
||||
outline
|
||||
color="primary"
|
||||
v-text="badge.label"
|
||||
></q-badge>
|
||||
<q-badge
|
||||
v-if="permission.risk.level !== 'low'"
|
||||
:color="permission.risk.color"
|
||||
v-text="permission.risk.label"
|
||||
></q-badge>
|
||||
</div>
|
||||
</q-item-section>
|
||||
</template>
|
||||
|
||||
<div class="q-px-md q-pb-sm">
|
||||
<div
|
||||
v-if="permission.risk.warning"
|
||||
class="row items-center text-negative text-caption q-mb-xs"
|
||||
>
|
||||
<q-icon name="warning" size="16px" class="q-mr-xs"></q-icon>
|
||||
<span v-text="permission.risk.warning"></span>
|
||||
</div>
|
||||
<p
|
||||
v-for="description of permission.descriptions"
|
||||
:key="description"
|
||||
class="text-caption q-mb-xs"
|
||||
v-text="description"
|
||||
></p>
|
||||
<p
|
||||
v-for="policy of permission.invoicePolicies"
|
||||
:key="policy.table + ':' + policy.walletField"
|
||||
class="text-caption q-mb-xs"
|
||||
v-text="publicInvoicePolicySentence(policy)"
|
||||
></p>
|
||||
<ul v-if="permission.fieldGroups.length" class="q-my-sm q-pl-md">
|
||||
<li v-for="group of permission.fieldGroups" :key="group.table">
|
||||
<span v-text="group.table"></span>
|
||||
<ul v-if="group.fields.length" class="q-pl-md">
|
||||
<li
|
||||
v-for="field of group.fields"
|
||||
:key="group.table + ':' + field"
|
||||
v-text="field"
|
||||
></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<div v-if="permission.extensionAccess.length" class="q-mt-sm">
|
||||
<div
|
||||
class="text-caption text-grey"
|
||||
v-text="
|
||||
$t('extension_permission_extension_api_request_extensions')
|
||||
"
|
||||
></div>
|
||||
<div
|
||||
v-for="target of permission.extensionAccess"
|
||||
:key="target.id"
|
||||
class="row items-center q-gutter-xs q-mt-xs"
|
||||
>
|
||||
<span class="text-caption" v-text="target.name"></span>
|
||||
<q-badge
|
||||
v-for="access of target.access"
|
||||
:key="target.id + access"
|
||||
color="grey-7"
|
||||
v-text="permissionAccessLabel(access)"
|
||||
></q-badge>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="permission.httpHosts.length" class="q-mt-sm">
|
||||
<div
|
||||
class="text-caption text-grey"
|
||||
v-text="$t('extension_permission_http_request_hosts')"
|
||||
></div>
|
||||
<ul class="q-my-sm q-pl-md">
|
||||
<li
|
||||
v-for="host of permission.httpHosts"
|
||||
:key="host"
|
||||
v-text="host"
|
||||
></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</q-expansion-item>
|
||||
</q-list>
|
||||
<lnbits-extension-permissions
|
||||
class="q-mt-md"
|
||||
:permissions="permissionGrant.permissions"
|
||||
:extensions="extensions"
|
||||
></lnbits-extension-permissions>
|
||||
|
||||
<div class="row q-mt-lg">
|
||||
<q-btn
|
||||
|
||||
Reference in New Issue
Block a user