94 lines
2.7 KiB
TypeScript
94 lines
2.7 KiB
TypeScript
import { WebApplication } from '@/UIModels/Application'
|
|
import { SNComponent } from '@standardnotes/snjs'
|
|
import { Component } from 'preact'
|
|
import { findDOMNode, unmountComponentAtNode } from 'preact/compat'
|
|
|
|
interface Props {
|
|
application: WebApplication
|
|
callback: (approved: boolean) => void
|
|
component: SNComponent
|
|
permissionsString: string
|
|
}
|
|
|
|
export class PermissionsModal extends Component<Props> {
|
|
getElement(): Element | null {
|
|
return findDOMNode(this)
|
|
}
|
|
|
|
dismiss = () => {
|
|
const elem = this.getElement()
|
|
if (!elem) {
|
|
return
|
|
}
|
|
|
|
const parent = elem.parentElement
|
|
if (!parent) {
|
|
return
|
|
}
|
|
parent.remove()
|
|
unmountComponentAtNode(parent)
|
|
}
|
|
|
|
accept = () => {
|
|
this.props.callback(true)
|
|
this.dismiss()
|
|
}
|
|
|
|
deny = () => {
|
|
this.props.callback(false)
|
|
this.dismiss()
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div className="sk-modal">
|
|
<div onClick={this.deny} className="sk-modal-background" />
|
|
<div id="permissions-modal" className="sk-modal-content">
|
|
<div className="sn-component">
|
|
<div className="sk-panel">
|
|
<div className="sk-panel-header">
|
|
<div className="sk-panel-header-title">Activate Component</div>
|
|
<a onClick={this.deny} className="sk-a info close-button">
|
|
Cancel
|
|
</a>
|
|
</div>
|
|
<div className="sk-panel-content">
|
|
<div className="sk-panel-section">
|
|
<div className="sk-panel-row">
|
|
<div className="sk-h2">
|
|
<strong>{this.props.component.name}</strong>
|
|
{' would like to interact with your '}
|
|
{this.props.permissionsString}
|
|
</div>
|
|
</div>
|
|
<div className="sk-panel-row">
|
|
<p className="sk-p">
|
|
Components use an offline messaging system to communicate. Learn more at{' '}
|
|
<a
|
|
href="https://standardnotes.com/permissions"
|
|
rel="noopener"
|
|
target="_blank"
|
|
className="sk-a info"
|
|
>
|
|
https://standardnotes.com/permissions.
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="sk-panel-footer">
|
|
<button
|
|
onClick={this.accept}
|
|
className="sn-button info block w-full text-base py-3"
|
|
>
|
|
Continue
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
}
|