Merge pull request #1965 from ethereum/issue#1784-clear_permission_list

Add Permission Management for plugins

src/app/components/plugin-manager-component.js

@@ -3,6 +3,7 @@ const csjs = require('csjs-inject')
 const EventEmitter = require('events')
 const LocalPlugin = require('./local-plugin')
 import { Plugin, BaseApi } from 'remix-plugin'
+import { PluginManagerSettings } from './plugin-manager-settings'
 
 const css = csjs`
   .pluginSearch {
@@ -152,14 +153,16 @@ class PluginManagerComponent extends BaseApi {
       </nav>`
       : ''
 
+    const settings = new PluginManagerSettings().render()
+
     const rootView = yo`
       <div id='pluginManager'>
-        <div class="form-group ${css.pluginSearch}">
+        <header class="form-group ${css.pluginSearch}">
           <input onkeyup="${e => this.filterPlugins(e)}" class="form-control" placeholder="Search">
           <button onclick="${_ => this.openLocalPlugin()}" class="btn btn-sm text-info ${css.localPluginBtn}">
             Connect to a Local Plugin
           </button>
-        </div>
+        </header>
         <section>
           ${activeTile}
           <div class="list-group list-group-flush">
@@ -170,6 +173,7 @@ class PluginManagerComponent extends BaseApi {
             ${inactives.map(name => this.renderItem(name))}
           </div>
         </section>
+        ${settings}
       </div>
     `
     if (!this.views.root) this.views.root = rootView

src/app/components/plugin-manager-settings.js

@@ -0,0 +1,102 @@
+const yo = require('yo-yo')
+const csjs = require('csjs-inject')
+const modalDialog = require('../ui/modaldialog')
+
+const css = csjs` 
+.permissions {
+  position: sticky;
+  bottom: 0;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 5px 20px;
+}
+.permissions button {
+  padding: 2px 5px;
+  cursor: pointer;
+}
+.permissionForm h4 {
+  font-size: 1.3rem;
+  text-align: center;
+}
+.permissionForm h6 {
+  font-size: 1.1rem;
+}
+.permissionForm hr {
+  width: 80%;
+}
+.checkbox {
+  display: flex;
+  align-items: center;
+}
+.checkbox label {
+  margin: 0;
+  font-size: 1rem;
+}`
+
+export class PluginManagerSettings {
+
+  openDialog () {
+    const fromLocal = window.localStorage.getItem('plugins/permissions')
+    this.permissions = JSON.parse(fromLocal || '{}')
+    modalDialog('Plugin Manager Settings', this.settings(),
+      { fn: () => this.onValidation() },
+    )
+  }
+
+  onValidation () {
+    const permissions = JSON.stringify(this.permissions)
+    window.localStorage.setItem('plugins/permissions', permissions)
+  }
+
+  settings () {
+    const permissionByModule = (key, permission) => {
+      const permissionByPlugin = (name, plugin) => {
+        function updatePermission () {
+          plugin.allow = !plugin.allow
+        }
+        const checkbox = plugin.allow
+          ? yo`<input onchange="${updatePermission}" type="checkbox" checked id="permission-${name}" aria-describedby="module ${key} ask permission for ${name}" />`
+          : yo`<input onchange="${updatePermission}" type="checkbox" id="permission-${name}" aria-describedby="module ${key} ask permission for ${name}" />`
+
+        return yo`
+        <div class="form-group ${css.checkbox}">
+          ${checkbox}
+          <label for="permission-${name}">Allow plugin ${name} to write on ${key}</label>
+        </div>`
+      }
+
+      const byModule = Object
+        .keys(permission)
+        .map(name => permissionByPlugin(name, permission[name]))
+
+      return yo`
+      <div>
+        <h6>${key} :</h6>
+        ${byModule}
+      </div>`
+    }
+
+    const permissions = Object
+      .keys(this.permissions)
+      .map(key => permissionByModule(key, this.permissions[key]))
+
+    const title = permissions.length === 0
+      ? yo`<h4>No Permission requested yet.</h4>`
+      : yo`<h4>Current Permission settings</h4>`
+
+    return yo`<form class="${css.permissionForm}">
+      ${title}
+      <hr/>
+      ${permissions}
+    </form>`
+  }
+
+  render () {
+    return yo`
+    <footer class="navbar navbar-light bg-light ${css.permissions}">
+      <button onclick="${() => this.openDialog()}" class="btn btn-info">Settings</button>
+    </footer>`
+  }
+
+}

src/app/components/swap-panel.js

@@ -54,19 +54,13 @@ export class SwapPanel extends AbstractPanel {
   /** The header of the swap panel */
   renderHeader () {
     let name = ' - '
-    let hasSettings = false
     if (this.active) {
       const { profile } = this.store.getOne(this.active)
       name = profile.displayName ? profile.displayName : profile.name
-      hasSettings = profile.settings || false
     }
     return yo`
     <header class="${css.swapitHeader}">
       <h6 class="${css.swapitTitle}">${name}</h6>
-      <div class="${css.icons}">
-        ${hasSettings
-            ? yo`<i class="fas fa-cog"></i>`
-            : yo`<i></i>`}
       </div>
     </header>`
   }