92 lines
2.3 KiB
JavaScript
92 lines
2.3 KiB
JavaScript
import browser from 'webextension-polyfill'
|
|
import React, {useState, useEffect} from 'react'
|
|
import {render} from 'react-dom'
|
|
|
|
import {getPermissionsString, readPermissions} from './common'
|
|
|
|
function Options() {
|
|
let [key, setKey] = useState('')
|
|
let [permissions, setPermissions] = useState()
|
|
let [message, setMessage] = useState('')
|
|
|
|
useEffect(() => {
|
|
browser.storage.local.get(['private_key']).then(results => {
|
|
if (results.private_key) setKey(results.private_key)
|
|
})
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
readPermissions().then(permissions => {
|
|
setPermissions(
|
|
Object.entries(permissions).map(
|
|
([host, {level, condition, created_at}]) => ({
|
|
host,
|
|
level,
|
|
condition,
|
|
created_at
|
|
})
|
|
)
|
|
)
|
|
})
|
|
}, [])
|
|
|
|
return (
|
|
<>
|
|
<h1>nos2x</h1>
|
|
<p>nostr signer extension</p>
|
|
<h2>options</h2>
|
|
<label>
|
|
private key:
|
|
<input value={key} onChange={handleKeyChange} />
|
|
</label>
|
|
{permissions?.length > 0 && (
|
|
<>
|
|
<h2>permissions</h2>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>domain</th>
|
|
<th>permissions</th>
|
|
<th>condition</th>
|
|
<th>since</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{permissions.map(({host, level, condition, created_at}) => (
|
|
<tr key={host}>
|
|
<td>{host}</td>
|
|
<td>{getPermissionsString(level)}</td>
|
|
<td>{condition}</td>
|
|
<td>
|
|
{new Date(created_at * 1000)
|
|
.toISOString()
|
|
.split('.')[0]
|
|
.split('T')
|
|
.join(' ')}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</>
|
|
)}
|
|
<div>{message}</div>
|
|
</>
|
|
)
|
|
|
|
async function handleKeyChange(e) {
|
|
let key = e.target.value.toLowerCase().trim()
|
|
setKey(key)
|
|
|
|
if (key.match(/^[a-f0-9]{64}$/) || key === '') {
|
|
await browser.storage.local.set({
|
|
private_key: key
|
|
})
|
|
setMessage('saved!')
|
|
setTimeout(setMessage, 3000)
|
|
}
|
|
}
|
|
}
|
|
|
|
render(<Options />, document.getElementById('main'))
|