David Disu
3 years ago
parent
15c0033345
commit
11f5de164b
@ -1,147 +0,0 @@ |
||||
const yo = require('yo-yo') |
||||
const csjs = require('csjs-inject') |
||||
const modalDialog = require('../ui/modaldialog') |
||||
|
||||
const css = csjs` |
||||
.remixui_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%; |
||||
} |
||||
.permissionKey { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
} |
||||
.permissionKey i { |
||||
cursor: pointer; |
||||
} |
||||
.checkbox { |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
.checkbox label { |
||||
margin: 0; |
||||
font-size: 1rem; |
||||
} |
||||
` |
||||
|
||||
export class PluginManagerSettings { |
||||
constructor () { |
||||
const fromLocal = window.localStorage.getItem('plugins/permissions') |
||||
this.permissions = JSON.parse(fromLocal || '{}') |
||||
} |
||||
|
||||
openDialog () { |
||||
this.currentSetting = this.settings() |
||||
modalDialog('Plugin Manager Permissions', this.currentSetting, |
||||
{ fn: () => this.onValidation() } |
||||
) |
||||
} |
||||
|
||||
onValidation () { |
||||
const permissions = JSON.stringify(this.permissions) |
||||
window.localStorage.setItem('plugins/permissions', permissions) |
||||
} |
||||
|
||||
/** Clear one permission from a plugin */ |
||||
clearPersmission (from, to, method) { |
||||
// eslint-disable-next-line no-debugger
|
||||
debugger |
||||
if (this.permissions[to] && this.permissions[to][method]) { |
||||
delete this.permissions[to][method][from] |
||||
if (Object.keys(this.permissions[to][method]).length === 0) { |
||||
delete this.permissions[to][method] |
||||
} |
||||
if (Object.keys(this.permissions[to]).length === 0) { |
||||
delete this.permissions[to] |
||||
} |
||||
yo.update(this.currentSetting, this.settings()) |
||||
} |
||||
} |
||||
|
||||
/** Clear all persmissions from a plugin */ |
||||
clearAllPersmission (to) { |
||||
// eslint-disable-next-line no-debugger
|
||||
debugger |
||||
if (!this.permissions[to]) return |
||||
delete this.permissions[to] |
||||
yo.update(this.currentSetting, this.settings()) |
||||
} |
||||
|
||||
settings () { |
||||
const permissionByToPlugin = (toPlugin, funcObj) => { |
||||
const permissionByMethod = (methodName, fromPlugins) => { |
||||
const togglePermission = (fromPlugin) => { |
||||
this.permissions[toPlugin][methodName][fromPlugin].allow = !this.permissions[toPlugin][methodName][fromPlugin].allow |
||||
} |
||||
return Object.keys(fromPlugins).map(fromName => { |
||||
const fromPluginPermission = fromPlugins[fromName] |
||||
const checkbox = fromPluginPermission.allow |
||||
? yo`<input onchange=${() => togglePermission(fromName)} class="mr-2" type="checkbox" checked id="permission-checkbox-${toPlugin}-${methodName}-${toPlugin}" aria-describedby="module ${fromPluginPermission} asks permission for ${methodName}" />` |
||||
: yo`<input onchange=${() => togglePermission(fromName)} class="mr-2" type="checkbox" id="permission-checkbox-${toPlugin}-${methodName}-${toPlugin}" aria-describedby="module ${fromPluginPermission} asks permission for ${methodName}" />` |
||||
return yo` |
||||
<div class="form-group ${css.permissionKey}"> |
||||
<div class="${css.checkbox}"> |
||||
${checkbox} |
||||
<label for="permission-checkbox-${toPlugin}-${methodName}-${toPlugin}" data-id="permission-label-${toPlugin}-${methodName}-${toPlugin}">Allow <u>${fromName}</u> to call <u>${methodName}</u></label> |
||||
</div> |
||||
<i onclick="${() => this.clearPersmission(fromName, toPlugin, methodName)}" class="fa fa-trash-alt" data-id="pluginManagerSettingsRemovePermission-${toPlugin}-${methodName}-${toPlugin}"></i> |
||||
</div> |
||||
` |
||||
}) |
||||
} |
||||
|
||||
const permissionsByFunctions = Object |
||||
.keys(funcObj) |
||||
.map(methodName => permissionByMethod(methodName, funcObj[methodName])) |
||||
|
||||
return yo` |
||||
<div border p-2> |
||||
<div class="pb-2 ${css.permissionKey}"> |
||||
<h3>${toPlugin} permissions:</h3> |
||||
<i onclick="${() => this.clearAllPersmission(toPlugin)}" class="far fa-trash-alt" data-id="pluginManagerSettingsClearAllPermission-${toPlugin}"></i> |
||||
</div> |
||||
${permissionsByFunctions} |
||||
</div>` |
||||
} |
||||
|
||||
const byToPlugin = Object |
||||
.keys(this.permissions) |
||||
.map(toPlugin => permissionByToPlugin(toPlugin, this.permissions[toPlugin])) |
||||
|
||||
const title = byToPlugin.length === 0 |
||||
? yo`<h4>No Permission requested yet.</h4>` |
||||
: yo`<h4>Current Permission settings</h4>` |
||||
|
||||
return yo`<form class="${css.permissionForm}" data-id="pluginManagerSettingsPermissionForm">
|
||||
${title} |
||||
<hr/> |
||||
${byToPlugin} |
||||
</form>` |
||||
} |
||||
|
||||
render () { |
||||
return yo` |
||||
<footer class="bg-light ${css.permissions} remix-bg-opacity"> |
||||
<button onclick="${() => this.openDialog()}" class="btn btn-primary settings-button" data-id="pluginManagerPermissionsButton">Permissions</button> |
||||
</footer>` |
||||
} |
||||
} |
||||
@ -1 +1,2 @@ |
||||
export * from './lib/remix-ui-helper' |
||||
export * from './lib/components' |
||||
|
||||
@ -0,0 +1,12 @@ |
||||
import React from 'react' |
||||
|
||||
export const fileChangedToasterMsg = (from: string, path: string) => ( |
||||
<div><i className="fas fa-exclamation-triangle text-danger mr-1"></i> |
||||
<span> |
||||
{from} |
||||
<span className="font-weight-bold text-warning"> |
||||
is modifying
|
||||
</span>{path} |
||||
</span> |
||||
</div> |
||||
) |
||||
Loading…
Reference in new issue