feat: ui polish
This commit is contained in:
Vlad Stan
Vendored
+1
-1
File diff suppressed because one or more lines are too long
@@ -525,10 +525,13 @@ window.localisation.en = {
|
||||
extension_permission_ext_storage_read: 'Read extension storage',
|
||||
extension_permission_ext_storage_read_public: 'Read public extension storage',
|
||||
extension_permission_ext_storage_write: 'Write extension storage',
|
||||
extension_permission_ext_storage_read_write: 'Read & Write extension storage',
|
||||
extension_permission_extension_api_request: 'Use other extensions',
|
||||
extension_permission_extension_api_request_desc:
|
||||
'Call approved installed extensions using your account permissions.',
|
||||
extension_permission_extension_api_request_extensions: 'Allowed extensions',
|
||||
extension_permission_access_read: 'Read',
|
||||
extension_permission_access_write: 'Write',
|
||||
extension_permission_http_request: 'Connect to external websites',
|
||||
extension_permission_http_request_desc:
|
||||
'Make HTTP requests to approved external hosts.',
|
||||
|
||||
@@ -724,6 +724,159 @@ window.PageExtensions = {
|
||||
resolve(grantedPermissions)
|
||||
}
|
||||
},
|
||||
permissionGrantDisplayItems() {
|
||||
const permissions = this.permissionGrant.permissions || []
|
||||
const permissionsById = new Map(
|
||||
permissions.map(permission => [permission.id, permission])
|
||||
)
|
||||
const hasReadWriteStorage =
|
||||
permissionsById.has('ext.storage.read') &&
|
||||
permissionsById.has('ext.storage.write')
|
||||
let addedReadWriteStorage = false
|
||||
|
||||
return permissions
|
||||
.map((permission, index) => {
|
||||
if (
|
||||
hasReadWriteStorage &&
|
||||
['ext.storage.read', 'ext.storage.write'].includes(permission.id)
|
||||
) {
|
||||
if (addedReadWriteStorage) return null
|
||||
addedReadWriteStorage = true
|
||||
return {
|
||||
index,
|
||||
orderId: 'ext.storage.read',
|
||||
permissions: [
|
||||
permissionsById.get('ext.storage.read'),
|
||||
permissionsById.get('ext.storage.write')
|
||||
]
|
||||
}
|
||||
}
|
||||
return {
|
||||
index,
|
||||
orderId: permission.id,
|
||||
permissions: [permission]
|
||||
}
|
||||
})
|
||||
.filter(Boolean)
|
||||
.sort((left, right) => {
|
||||
const leftOrder = this.permissionOrderIndex(left.orderId)
|
||||
const rightOrder = this.permissionOrderIndex(right.orderId)
|
||||
return leftOrder === rightOrder
|
||||
? left.index - right.index
|
||||
: leftOrder - rightOrder
|
||||
})
|
||||
.map(group => this.permissionDisplayItem(group.permissions))
|
||||
},
|
||||
permissionDisplayItem(permissions) {
|
||||
const permission = permissions[0]
|
||||
const isReadWriteStorage =
|
||||
permissions.length === 2 &&
|
||||
permissions.some(permission => permission.id === 'ext.storage.read') &&
|
||||
permissions.some(permission => permission.id === 'ext.storage.write')
|
||||
const descriptions = permissions
|
||||
.map(permission => this.permissionManifestDescription(permission))
|
||||
.filter(Boolean)
|
||||
const item = {
|
||||
id: isReadWriteStorage ? 'ext.storage.read_write' : permission.id,
|
||||
label: isReadWriteStorage
|
||||
? this.$t('extension_permission_ext_storage_read_write')
|
||||
: this.permissionLabel(permission),
|
||||
badges: [],
|
||||
descriptions,
|
||||
fieldGroups: [],
|
||||
extensionAccess: []
|
||||
}
|
||||
|
||||
if (permission.id === 'ext.storage.read_public') {
|
||||
item.fieldGroups = this.publicStorageFieldGroups(permission)
|
||||
item.badges = item.fieldGroups.map(group => ({
|
||||
key: group.table,
|
||||
label: group.table
|
||||
}))
|
||||
}
|
||||
|
||||
if (permission.id === 'extension.api.request') {
|
||||
item.extensionAccess = this.extensionApiPermissionTargets(permission)
|
||||
item.badges = item.extensionAccess.map(target => ({
|
||||
key: target.id,
|
||||
label: target.name
|
||||
}))
|
||||
}
|
||||
|
||||
return item
|
||||
},
|
||||
permissionOrderIndex(permissionId) {
|
||||
const order = [
|
||||
'wallet.pay_invoice',
|
||||
'wallet.list',
|
||||
'wallet.balance.read',
|
||||
'extension.api.request',
|
||||
'ui.camera.scan_qr',
|
||||
'ext.storage.read',
|
||||
'ext.storage.write',
|
||||
'ext.storage.read_public',
|
||||
'wallet.create_invoice',
|
||||
'wallet.create_invoice_public',
|
||||
'utils.basic'
|
||||
]
|
||||
const index = order.indexOf(permissionId)
|
||||
return index === -1 ? order.length : index
|
||||
},
|
||||
publicStorageFieldGroups(permission) {
|
||||
const tables = permission.policy?.tables
|
||||
if (!Array.isArray(tables)) return []
|
||||
return tables
|
||||
.map(table => {
|
||||
const tableName =
|
||||
typeof table === 'string' ? table : table?.table_name || ''
|
||||
const fields =
|
||||
typeof table === 'string' || !Array.isArray(table?.public_fields)
|
||||
? []
|
||||
: table.public_fields.filter(
|
||||
field => typeof field === 'string' && field
|
||||
)
|
||||
return tableName ? {table: tableName, fields} : null
|
||||
})
|
||||
.filter(Boolean)
|
||||
},
|
||||
extensionApiPermissionTargets(permission) {
|
||||
const extensions = permission.policy?.extensions
|
||||
if (!Array.isArray(extensions)) return []
|
||||
return extensions
|
||||
.map(extension => {
|
||||
const extensionId =
|
||||
typeof extension === 'string' ? extension : extension?.id
|
||||
if (!extensionId) return null
|
||||
const access =
|
||||
typeof extension === 'string'
|
||||
? ['read']
|
||||
: Array.isArray(extension.access) && extension.access.length
|
||||
? extension.access
|
||||
: ['read']
|
||||
return {
|
||||
id: extensionId,
|
||||
name: this.extensionDisplayName(extensionId),
|
||||
access
|
||||
}
|
||||
})
|
||||
.filter(Boolean)
|
||||
},
|
||||
extensionDisplayName(extensionId) {
|
||||
const extension = (this.extensions || []).find(
|
||||
extension => extension.id === extensionId
|
||||
)
|
||||
return extension?.name || extensionId
|
||||
},
|
||||
permissionAccessLabel(access) {
|
||||
const key = `extension_permission_access_${access}`
|
||||
const label = this.$t(key)
|
||||
return label === key ? access : label
|
||||
},
|
||||
permissionManifestDescription(permission) {
|
||||
return typeof permission.description === 'string'
|
||||
? permission.description
|
||||
: ''
|
||||
},
|
||||
permissionI18nKey(permission) {
|
||||
return `extension_permission_${permission.id.replace(/[^A-Za-z0-9]/g, '_')}`
|
||||
},
|
||||
@@ -732,35 +885,6 @@ window.PageExtensions = {
|
||||
const label = this.$t(key)
|
||||
return label === key ? permission.id : label
|
||||
},
|
||||
permissionDescription(permission) {
|
||||
const key = `${this.permissionI18nKey(permission)}_desc`
|
||||
const description = this.$t(key)
|
||||
return description === key ? permission.description : description
|
||||
},
|
||||
permissionPolicyDetails(permission) {
|
||||
if (permission.id === 'http.request') {
|
||||
const hosts = permission.policy?.hosts
|
||||
if (!Array.isArray(hosts) || !hosts.length) return ''
|
||||
return `${this.$t('extension_permission_http_request_hosts')}: ${hosts.join(', ')}`
|
||||
}
|
||||
if (permission.id === 'extension.api.request') {
|
||||
const extensions = permission.policy?.extensions
|
||||
if (!Array.isArray(extensions) || !extensions.length) return ''
|
||||
const targets = extensions
|
||||
.map(extension => {
|
||||
if (typeof extension === 'string') return `${extension} (read)`
|
||||
if (!extension?.id) return null
|
||||
const access = Array.isArray(extension.access)
|
||||
? extension.access.join(', ')
|
||||
: 'read'
|
||||
return `${extension.id} (${access})`
|
||||
})
|
||||
.filter(Boolean)
|
||||
if (!targets.length) return ''
|
||||
return `${this.$t('extension_permission_extension_api_request_extensions')}: ${targets.join(', ')}`
|
||||
}
|
||||
return ''
|
||||
},
|
||||
async selectAllUpdatableExtensionss() {
|
||||
this.updatableExtensions.forEach(e => (e.selectedForUpdate = true))
|
||||
},
|
||||
|
||||
@@ -460,7 +460,7 @@
|
||||
position="top"
|
||||
@hide="onManageExtensionDialogHide"
|
||||
>
|
||||
<q-card v-if="permissionGrant.show" class="q-pa-lg lnbits__dialog-card">
|
||||
<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
|
||||
@@ -470,26 +470,73 @@
|
||||
</q-card-section>
|
||||
|
||||
<q-list bordered separator class="q-mt-md">
|
||||
<q-item
|
||||
v-for="permission of permissionGrant.permissions"
|
||||
<q-expansion-item
|
||||
v-for="permission of permissionGrantDisplayItems()"
|
||||
:key="permission.id"
|
||||
dense
|
||||
expand-separator
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label>
|
||||
<li><strong v-text="permissionLabel(permission)"></strong></li>
|
||||
</q-item-label>
|
||||
<q-item-label
|
||||
v-if="permissionDescription(permission)"
|
||||
caption
|
||||
v-text="permissionDescription(permission)"
|
||||
></q-item-label>
|
||||
<q-item-label
|
||||
v-if="permissionPolicyDetails(permission)"
|
||||
caption
|
||||
v-text="permissionPolicyDetails(permission)"
|
||||
></q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<template v-slot:header>
|
||||
<q-item-section>
|
||||
<q-item-label
|
||||
class="text-weight-medium"
|
||||
v-text="permission.label"
|
||||
></q-item-label>
|
||||
<q-item-label v-if="permission.badges.length" caption>
|
||||
<q-badge
|
||||
v-for="badge of permission.badges"
|
||||
:key="badge.key"
|
||||
outline
|
||||
color="primary"
|
||||
class="q-mr-xs q-mt-xs"
|
||||
v-text="badge.label"
|
||||
></q-badge>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</template>
|
||||
|
||||
<div class="q-px-md q-pb-sm">
|
||||
<p
|
||||
v-for="description of permission.descriptions"
|
||||
:key="description"
|
||||
class="text-caption q-mb-xs"
|
||||
v-text="description"
|
||||
></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>
|
||||
</q-expansion-item>
|
||||
</q-list>
|
||||
|
||||
<div class="row q-mt-lg">
|
||||
|
||||
Reference in New Issue
Block a user