sal-modular/extension/popup/KeyspaceManager.jsx

31 lines
1.3 KiB
JavaScript

import React, { useState } from 'react';
export default function KeyspaceManager({ keyspaces, onUnlock, onCreate, locked, onLock, currentKeyspace }) {
const [selected, setSelected] = useState(keyspaces[0] || '');
const [password, setPassword] = useState('');
const [newKeyspace, setNewKeyspace] = useState('');
if (locked) {
return (
<div className="keyspace-manager">
<label>Keyspace:</label>
<select value={selected} onChange={e => setSelected(e.target.value)}>
{keyspaces.map(k => <option key={k} value={k}>{k}</option>)}
</select>
<button onClick={() => onUnlock(selected, password)} disabled={!selected || !password}>Unlock</button>
<div style={{marginTop: '0.5rem'}}>
<input placeholder="New keyspace name" value={newKeyspace} onChange={e => setNewKeyspace(e.target.value)} />
<input placeholder="Password" type="password" value={password} onChange={e => setPassword(e.target.value)} />
<button onClick={() => onCreate(newKeyspace, password)} disabled={!newKeyspace || !password}>Create</button>
</div>
</div>
);
}
return (
<div className="keyspace-manager">
<span>Keyspace: <b>{currentKeyspace}</b></span>
<button onClick={onLock} style={{marginLeft: 8}}>Lock Session</button>
</div>
);
}