SecureNotes/src/components/routes/vaults/Vaults.tsx

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>
   }
}