Permission modal UI fixes

pull/1/head
LianaHus 5 years ago committed by Liana Husikyan
parent 3db22b13a3
commit c2d7338ace
  1. 82
      src/app/components/plugin-manager-settings.js
  2. 2
      src/remixAppManager.js

@ -60,68 +60,76 @@ export class PluginManagerSettings {
} }
/** Clear one permission from a plugin */ /** Clear one permission from a plugin */
clearPersmission (from, to) { clearPersmission (from, to, method) {
if (!this.permissions[from]) return if (this.permissions[to] && this.permissions[to][method]) {
delete this.permissions[from][to] delete this.permissions[to][method][from]
if (Object.keys(this.permissions[from]).length === 0) { if (Object.keys(this.permissions[to][method]).length === 0) {
delete this.permissions[from] delete this.permissions[to][method]
}
if (Object.keys(this.permissions[to]).length === 0) {
delete this.permissions[to]
}
yo.update(this.currentSetting, this.settings())
} }
yo.update(this.currentSetting, this.settings())
} }
/** Clear all persmissions from a plugin */ /** Clear all persmissions from a plugin */
clearAllPersmission (from) { clearAllPersmission (to) {
if (!this.permissions[from]) return if (!this.permissions[to]) return
delete this.permissions[from] delete this.permissions[to]
yo.update(this.currentSetting, this.settings()) yo.update(this.currentSetting, this.settings())
} }
settings () { settings () {
const permissionByModule = (key, permission) => { const permissionByToPlugin = (toPlugin, funcObj) => {
const permissionByPlugin = (name, plugin) => { const permissionByFunctions = (funcName, fromPlugins) => {
function updatePermission () { function updatePermission (plugin) {
plugin.allow = !plugin.allow self.permissions[toPlugin][funcName][plugin].allow = !self.permissions[toPlugin][funcName][plugin].allow
} }
const checkbox = plugin.allow let self = this
? yo`<input onchange="${updatePermission}" type="checkbox" checked id="permission-${name}" aria-describedby="module ${key} ask permission for ${name}" />` return Object.keys(fromPlugins).map(fromName => {
: yo`<input onchange="${updatePermission}" type="checkbox" id="permission-${name}" aria-describedby="module ${key} ask permission for ${name}" />` const fromPluginPermission = fromPlugins[fromName]
const checkbox = fromPluginPermission.allow
return yo` ? yo`<input onchange=${() => updatePermission(fromName)} class="mr-2" type="checkbox" checked id="permission-checkbox-${toPlugin}-${funcName}-${toPlugin}" aria-describedby="module ${fromPluginPermission} ask permission for ${funcName}" />`
<div class="form-group ${css.permissionKey}"> : yo`<input onchange=${() => updatePermission(fromName)} class="mr-2" type="checkbox" id="permission-checkbox-${toPlugin}-${funcName}-${toPlugin}" aria-describedby="module ${fromPluginPermission} ask permission for ${funcName}" />`
<div class="${css.checkbox}"> return yo`
${checkbox} <div class="form-group ${css.permissionKey}">
<label for="permission-${name}" data-id="pluginManagerSettingsPermission${name}">Allow <u>${name}</u> to access <u>${key}</u></label> <div class="${css.checkbox}">
</div> ${checkbox}
<i onclick="${() => this.clearPersmission(key, name)}" class="fa fa-trash-alt" data-id="pluginManagerSettingsRemovePermission${name}"></i> <label for="permission-checkbox-${toPlugin}-${funcName}-${toPlugin}" data-id="permission-label-${toPlugin}-${funcName}-${toPlugin}">Allow <u>${fromName}</u> to call <u>${funcName}</u></label>
</div>` </div>
<i onclick="${() => this.clearPersmission(fromName, toPlugin, funcName)}" class="fa fa-trash-alt" data-id="pluginManagerSettingsRemovePermission-${toPlugin}-${funcName}-${toPlugin}"></i>
</div>
`
})
} }
const byModule = Object const permissionsByFunctions = Object
.keys(permission) .keys(funcObj)
.map(name => permissionByPlugin(name, permission[name])) .map(funcName => permissionByFunctions(funcName, funcObj[funcName]))
return yo` return yo`
<div> <div border p-2>
<div class="${css.permissionKey}"> <div class="pb-2 ${css.permissionKey}">
<h6>${key} :</h6> <h3>${toPlugin} permissions:</h3>
<i onclick="${() => this.clearAllPersmission(key)}" class="far fa-trash-alt" data-id="pluginManagerSettingsClearAllPermission"></i> <i onclick="${() => this.clearAllPersmission(toPlugin)}" class="far fa-trash-alt" data-id="pluginManagerSettingsClearAllPermission-${toPlugin}"></i>
</div> </div>
${byModule} ${permissionsByFunctions}
</div>` </div>`
} }
const permissions = Object const byToPlugin = Object
.keys(this.permissions) .keys(this.permissions)
.map(key => permissionByModule(key, this.permissions[key])) .map(toPlugin => permissionByToPlugin(toPlugin, this.permissions[toPlugin]))
const title = permissions.length === 0 const title = byToPlugin.length === 0
? yo`<h4>No Permission requested yet.</h4>` ? yo`<h4>No Permission requested yet.</h4>`
: yo`<h4>Current Permission settings</h4>` : yo`<h4>Current Permission settings</h4>`
return yo`<form class="${css.permissionForm}" data-id="pluginManagerSettingsPermissionForm"> return yo`<form class="${css.permissionForm}" data-id="pluginManagerSettingsPermissionForm">
${title} ${title}
<hr/> <hr/>
${permissions} ${byToPlugin}
</form>` </form>`
} }

@ -10,7 +10,7 @@ const requiredModules = [ // services + layout views + system views
'terminal', 'settings', 'pluginManager'] 'terminal', 'settings', 'pluginManager']
export function isNative (name) { export function isNative (name) {
const nativePlugins = ['workshops', 'ethdoc', 'etherscan'] const nativePlugins = ['vyper', 'workshops', 'ethdoc', 'etherscan']
return nativePlugins.includes(name) || requiredModules.includes(name) return nativePlugins.includes(name) || requiredModules.includes(name)
} }

Loading…
Cancel
Save