First alpha

src/components/routes/vaults/Vaults.tsx

@@ -0,0 +1,126 @@
+import { h } from "preact"
+import { Page } from "../../../page";
+import Notes, { VaultList } from "../../../notes";
+import "./vaults.scss"
+import Lock from "feather-icons/dist/icons/lock.svg";
+import Unlock from "feather-icons/dist/icons/unlock.svg";
+import Navigation from "../../../navigation";
+import { InputModal } from "../../modals/InputModal";
+import { YesNoModal } from "../../modals/YesNoModal";
+import AddButton from "../../AddButton";
+
+export interface VaultsProps {
+   state: any;
+}
+
+export default class VaultsPage extends Page<VaultsProps, { vaults: VaultList, modal: JSX.Element | undefined }> {
+   constructor(props: VaultsProps) {
+      super(props);
+      this.state = { vaults: [], modal: undefined };
+   }
+
+   updateVaults() {
+      Notes.getVaults().then(vaults => this.setState({ vaults }))
+   }
+
+   componentWillMount() {
+      this.updateVaults()
+   }
+
+   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()
+            }
+         }}>
+            {vault.encrypted ? <Lock height={undefined} width={undefined} /> : <Unlock height={undefined} width={undefined} />}
+            <span>
+               {vault.name}
+            </span>
+         </div>
+      })
+
+      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 })
+         }} />
+         <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">
+                  <div class="card fluid">
+
+                     <h1 class="section double-padded">Your vaults:</h1>
+
+                     <div class="section">
+                        {elms}
+                     </div>
+                  </div>
+               </div>
+            </div>
+         </div>
+      </div>
+   }
+}

src/components/routes/vaults/vaults.scss

@@ -0,0 +1,21 @@
+.vaults_vault>span {
+   font-size: 2rem !important;
+}
+
+.vaults_vault {
+   padding: 0.5rem;
+   border-bottom: solid 1px var(--fore-color);
+}
+
+.vaults_vault:hover {
+   background: var(--nav-hover-back-color);
+}
+
+.vaults_vault>svg {
+   height: 2rem;
+   margin-right: 1rem;
+}
+
+.vaults_vault:last-child {
+   border-bottom: none;
+}