Many changes. See further for more details.
- Notification API - New Modal API - Vault JSON import and export - Improved Page Cache - Adding Context Menu API - Adding Vault Deletion - Fixing Sync Issues - Implementing Share Target API - Implementing Share To API
This commit is contained in:
Fabian
257
src/components/routes/vaults/Vaults.tsx
Executable file → Normal file
257
src/components/routes/vaults/Vaults.tsx
Executable file → Normal file
@ -8,61 +8,207 @@ import Navigation from "../../../navigation";
|
||||
import { InputModal } from "../../modals/InputModal";
|
||||
import { YesNoModal } from "../../modals/YesNoModal";
|
||||
import AddButton from "../../AddButton";
|
||||
import ContextMenu from "../../modals/context";
|
||||
import Notifications from "../../../notifications";
|
||||
|
||||
export interface VaultsProps {
|
||||
state: any;
|
||||
selectVault?: boolean;
|
||||
onSelected?: (vaultid: string) => void;
|
||||
}
|
||||
|
||||
export default class VaultsPage extends Page<VaultsProps, { vaults: VaultList, modal: JSX.Element | undefined }> {
|
||||
export default class VaultsPage extends Page<VaultsProps, { vaults: VaultList, modal: JSX.Element | undefined, context: JSX.Element | undefined }> {
|
||||
constructor(props: VaultsProps) {
|
||||
super(props);
|
||||
this.state = { vaults: [], modal: undefined };
|
||||
this.state = { vaults: [], modal: undefined, context: undefined };
|
||||
this.updateVaults = this.updateVaults.bind(this);
|
||||
}
|
||||
|
||||
updateVaults() {
|
||||
Notes.getVaults().then(vaults => this.setState({ vaults }))
|
||||
return new Promise(yes => {
|
||||
Notes.getVaults().then(vaults => this.setState({ vaults }, yes))
|
||||
})
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
this.updateVaults()
|
||||
Notes.syncObservable.subscribe(this.updateVaults);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
Notes.syncObservable.unsubscribe(this.updateVaults);
|
||||
}
|
||||
|
||||
async getKey(vault: { name: string, id: string }, permanent = true) {
|
||||
let inp_mod = new InputModal("Enter password for " + vault.name, "Password", "password");
|
||||
let key = undefined;
|
||||
while (true) {
|
||||
let value = await inp_mod.getResult();
|
||||
if (value === null) {
|
||||
inp_mod.close();
|
||||
return false;
|
||||
} else {
|
||||
key = Notes.passwordToKey(value);
|
||||
try {
|
||||
await Notes.getVault(vault.id, key);
|
||||
break;
|
||||
} catch (err) {
|
||||
Notifications.sendError("Invalid password!")
|
||||
}
|
||||
}
|
||||
}
|
||||
inp_mod.close();
|
||||
|
||||
let perm = false;
|
||||
if (permanent) {
|
||||
let save_modal = new YesNoModal("Save permanent?");
|
||||
let res = await save_modal.getResult();
|
||||
save_modal.close();
|
||||
if (res === undefined) {
|
||||
res = false;
|
||||
}
|
||||
|
||||
perm = res;
|
||||
}
|
||||
|
||||
Notes.saveVaultKey(vault.id, key, perm);
|
||||
return true;
|
||||
}
|
||||
|
||||
async openVault(vault: { name: string, encrypted: boolean, id: string }) {
|
||||
const action = () => {
|
||||
if (this.props.selectVault) {
|
||||
this.props.onSelected(vault.id);
|
||||
} else {
|
||||
Navigation.setPage("/vault", { id: vault.id })
|
||||
}
|
||||
}
|
||||
|
||||
if (vault.encrypted) {
|
||||
let key = Notes.getVaultKey(vault.id);
|
||||
if (key)
|
||||
action()
|
||||
else {
|
||||
if (await this.getKey(vault))
|
||||
action();
|
||||
}
|
||||
} else {
|
||||
action()
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
async addButtonClick() {
|
||||
let name_modal = new InputModal("Enter new name", "Name", "text");
|
||||
let name = await name_modal.getResult();
|
||||
name_modal.close();
|
||||
if (name === null) return;
|
||||
|
||||
let encrypted_modal = new YesNoModal("Encrypt?");
|
||||
let encrypted = encrypted_modal.getResult();
|
||||
encrypted_modal.close();
|
||||
if (encrypted === null) return;
|
||||
|
||||
let password;
|
||||
if (encrypted) {
|
||||
let password_modal = new InputModal("Enter new password", "Password", "password");
|
||||
password = await password_modal.getResult();
|
||||
password_modal.close();
|
||||
if (password === null) return;
|
||||
}
|
||||
|
||||
let key;
|
||||
if (password) {
|
||||
key = Notes.passwordToKey(password)
|
||||
}
|
||||
await Notes.createVault(name, key)
|
||||
this.updateVaults();
|
||||
}
|
||||
|
||||
onContext(evt: MouseEvent, vault: { name: string, encrypted: boolean, id: string }) {
|
||||
evt.preventDefault();
|
||||
console.log("Context", evt);
|
||||
|
||||
// let context = <div style={{ position: "fixed", left: evt.pageX, top: evt.pageY, zIndex: 10 }}>
|
||||
// <button>Action 1</button>
|
||||
// </div>
|
||||
|
||||
const close = () => {
|
||||
window.removeEventListener("click", close);
|
||||
this.setState({ context: undefined });
|
||||
}
|
||||
window.addEventListener("click", close);
|
||||
|
||||
let deleteb = <button onClick={async () => {
|
||||
let delete_modal = new YesNoModal("Delete Vault? Cannot be undone!");
|
||||
let result = await delete_modal.getResult();
|
||||
delete_modal.close();
|
||||
if (result) {
|
||||
Notes.deleteVault(vault.id).then(() => {
|
||||
this.updateVaults();
|
||||
}).catch(err => {
|
||||
Notifications.sendError("error deleting vault!")
|
||||
console.error(err);
|
||||
})
|
||||
}
|
||||
}}>
|
||||
delete
|
||||
</button>;
|
||||
|
||||
let delete_key;
|
||||
if (Notes.getVaultKey(vault.id)) {
|
||||
delete_key = <button onClick={() => { Notes.forgetVaultKey(vault.id); }}>
|
||||
forget password
|
||||
</button>;
|
||||
}
|
||||
|
||||
let exportb = <button onClick={async () => {
|
||||
let key: Uint8Array;
|
||||
if (vault.encrypted) {
|
||||
await this.getKey(vault, false)
|
||||
key = Notes.getVaultKey(vault.id);
|
||||
}
|
||||
let note_vault = await Notes.getVault(vault.id, key);
|
||||
let base_notes = await note_vault.getAllNotes();
|
||||
let notes = await Promise.all(base_notes.map(e => {
|
||||
return note_vault.getNote(e._id);
|
||||
}));
|
||||
|
||||
let result =
|
||||
{
|
||||
version: 1,
|
||||
notes: notes.map(e => {
|
||||
return {
|
||||
content: e.__value,
|
||||
time: e.time
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(result, undefined, 3));
|
||||
var downloadAnchorNode = document.createElement('a');
|
||||
downloadAnchorNode.setAttribute("href", dataStr);
|
||||
downloadAnchorNode.setAttribute("download", "notes_export_" + vault.name + ".json");
|
||||
document.body.appendChild(downloadAnchorNode); // required for firefox
|
||||
downloadAnchorNode.click();
|
||||
downloadAnchorNode.remove();
|
||||
}}>
|
||||
export
|
||||
</button>;
|
||||
|
||||
let context = <ContextMenu event={evt} >
|
||||
{deleteb}
|
||||
{delete_key}
|
||||
{exportb}
|
||||
</ContextMenu>
|
||||
|
||||
this.setState({ context });
|
||||
return false;
|
||||
}
|
||||
|
||||
render() {
|
||||
let elms = this.state.vaults.map(vault => {
|
||||
return <div class="vaults_vault" onClick={() => {
|
||||
const open = () => {
|
||||
Navigation.setPage("/vault", { id: vault.id })
|
||||
}
|
||||
if (vault.encrypted) {
|
||||
let key = Notes.getVaultKey(vault.id);
|
||||
if (key) open()
|
||||
else {
|
||||
let modal = <InputModal title={"Enter password for " + vault.name} type="password" fieldname="Password" onResult={(value) => {
|
||||
if (value === null) this.setState({ modal: undefined });
|
||||
else {
|
||||
let key = Notes.passwordToKey(value);
|
||||
Notes.getVault(vault.id, key).then(() => {
|
||||
let modal = <YesNoModal title="Save permanent?" onResult={(res) => {
|
||||
if (res === undefined)
|
||||
this.setState({ modal: undefined });
|
||||
else {
|
||||
this.setState({ modal: undefined });
|
||||
Notes.saveVaultKey(vault.id, key, res);
|
||||
open()
|
||||
}
|
||||
}} />
|
||||
this.setState({ modal })
|
||||
}).catch(err => {
|
||||
alert("Invalid password!")
|
||||
})
|
||||
}
|
||||
}} />
|
||||
this.setState({ modal })
|
||||
}
|
||||
} else {
|
||||
open()
|
||||
}
|
||||
}}>
|
||||
return <div class="vaults_vault" onClick={() => this.openVault(vault)} onContextMenu={(evt) => this.onContext(evt, vault)}>
|
||||
{vault.encrypted ? <Lock height={undefined} width={undefined} /> : <Unlock height={undefined} width={undefined} />}
|
||||
<span>
|
||||
{vault.name}
|
||||
@ -72,41 +218,8 @@ export default class VaultsPage extends Page<VaultsProps, { vaults: VaultList, m
|
||||
|
||||
return <div style={{ marginTop: "-12px", paddingTop: "12px" }} >
|
||||
{this.state.modal}
|
||||
<AddButton onClick={() => {
|
||||
|
||||
let modal = <InputModal title="Enter new name" fieldname="Name" type="text" onResult={(name) => {
|
||||
const create = async (password?: string) => {
|
||||
let key;
|
||||
if (password) {
|
||||
key = Notes.passwordToKey(password)
|
||||
}
|
||||
await Notes.createVault(name, key)
|
||||
this.updateVaults();
|
||||
}
|
||||
|
||||
if (name === null) this.setState({ modal: undefined })
|
||||
else {
|
||||
let modal = <YesNoModal title="Encrypt?" onResult={(encrypted) => {
|
||||
if (encrypted === null) this.setState({ modal: undefined })
|
||||
if (encrypted) {
|
||||
let modal = <InputModal title="Enter new password" fieldname="Password" type="password" onResult={(password) => {
|
||||
if (password === null) this.setState({ modal: undefined })
|
||||
else {
|
||||
create(password)
|
||||
this.setState({ modal: undefined });
|
||||
}
|
||||
}} />
|
||||
this.setState({ modal })
|
||||
} else {
|
||||
create()
|
||||
this.setState({ modal: undefined });
|
||||
}
|
||||
}} />
|
||||
this.setState({ modal })
|
||||
}
|
||||
}} />
|
||||
this.setState({ modal })
|
||||
}} />
|
||||
{this.state.context}
|
||||
<AddButton onClick={() => this.addButtonClick()} />
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-8 col-lg-6 col-md-offset-2 col-lg-offset-3">
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
|
||||
.vaults_vault {
|
||||
padding: 0.5rem;
|
||||
border-bottom: solid 1px var(--fore-color);
|
||||
border-bottom: solid 1px var(--card-border-color);
|
||||
}
|
||||
|
||||
.vaults_vault:hover {
|
||||
|
||||
Reference in New Issue
Block a user