Fix bug with error when decoding

package.json

@@ -4,34 +4,48 @@
    "description": "",
    "main": "index.js",
    "scripts": {
-      "build": "parcel build src/index.html",
-      "dev": "parcel src/index.html"
+      "build": "webpack --mode=production",
+      "watch": "webpack --mode=development --watch",
+      "start": "webpack-dev-server --mode=production",
+      "start:prod": "webpack-dev-server --mode=production",
+      "start:dev": "webpack-dev-server --mode=development"
    },
    "author": "Fabian Stamm <dev@fabianstamm.de>",
    "license": "MIT",
-   "browserslist": [
-      "last 2 Chrome versions"
-   ],
    "dependencies": {
-      "@hibas123/secure-file-wrapper": "^2.5.1",
-      "@hibas123/theme": "^1.2.14",
-      "@hibas123/utils": "^2.2.3",
+      "@hibas123/secure-file-wrapper": "^2.5.0",
+      "@hibas123/theme": "^1.0.5",
+      "@hibas123/utils": "^2.1.0",
       "aes-js": "^3.1.2",
-      "feather-icons": "^4.26.0",
+      "feather-icons": "^4.22.1",
       "idb": "^4.0.3",
       "js-sha256": "^0.9.0",
       "lodash.clonedeep": "^4.5.0",
-      "parcel": "^1.12.4",
-      "uuid": "^3.4.0"
+      "secure-file-wrapper": "git+https://git.stamm.me/OpenServer/OSSecureFileWrapper.git",
+      "uuid": "^3.3.2"
    },
    "devDependencies": {
       "@types/lodash.clonedeep": "^4.5.6",
       "@types/uikit": "^2.27.7",
-      "@types/uuid": "^3.4.7",
-      "node-sass": "^4.13.1",
-      "parcel-bundler": "^1.12.4",
-      "preact": "^10.3.1",
-      "ts-loader": "^6.2.1",
-      "typescript": "^3.7.5"
+      "@types/uuid": "^3.4.5",
+      "copy-webpack-plugin": "^5.0.3",
+      "css-loader": "^3.0.0",
+      "file-loader": "^4.0.0",
+      "html-webpack-plugin": "^3.2.0",
+      "mini-css-extract-plugin": "^0.7.0",
+      "node-sass": "^4.12.0",
+      "preact": "^8.3.1",
+      "preact-svg-loader": "^0.2.1",
+      "raw-loader": "^3.0.0",
+      "sass-loader": "^7.1.0",
+      "style-loader": "^0.23.1",
+      "ts-loader": "^6.0.4",
+      "typescript": "^3.5.2",
+      "webpack": "^4.35.2",
+      "webpack-bundle-analyzer": "^3.3.2",
+      "webpack-cli": "^3.3.5",
+      "webpack-dev-server": "^3.7.2",
+      "webpack-visualizer-plugin": "^0.1.11",
+      "worker-loader": "^2.0.0"
    }
 }

src/components/AddButton.tsx

@@ -7,8 +7,6 @@ export default function AddButton({ onClick }: { onClick: () => void }) {
       class="fab btn-primary"
       onClick={() => onClick()}
    >
-      <img src={Plus} />
+      <Plus width={undefined} height={undefined} />
    </button>
-}
-
-// <Plus width={undefined} height={undefined} />
+}

src/components/Footer.tsx

@@ -4,74 +4,76 @@ import Refresh from "feather-icons/dist/icons/refresh-cw.svg";
 import "./footer.scss";
 import Notifications from "../notifications";
 
-export class Footer extends Component<{}, { synced: boolean, syncing: boolean }> {
-    constructor(props) {
-        super(props);
-        this.state = { synced: false, syncing: false };
-        this.onSyncedChange = this.onSyncedChange.bind(this);
-        this.onSyncChange = this.onSyncChange.bind(this);
-    }
+export class Footer extends Component<
+   {},
+   { synced: boolean; syncing: boolean }
+> {
+   constructor(props) {
+      super(props);
+      this.state = { synced: false, syncing: false };
+      this.onSyncedChange = this.onSyncedChange.bind(this);
+      this.onSyncChange = this.onSyncChange.bind(this);
+   }
 
-    async componentWillMount() {
-        Notes.syncedObservable.subscribe(this.onSyncedChange);
-        Notes.syncObservable.subscribe(this.onSyncChange);
-        this.setState({ synced: await Notes.isSynced() })
-    }
+   async componentWillMount() {
+      Notes.syncedObservable.subscribe(this.onSyncedChange);
+      Notes.syncObservable.subscribe(this.onSyncChange);
+      this.setState({ synced: await Notes.isSynced() });
+   }
 
-    componentWillUnmount() {
-        Notes.syncedObservable.unsubscribe(this.onSyncedChange);
-        Notes.syncObservable.unsubscribe(this.onSyncChange);
-    }
+   componentWillUnmount() {
+      Notes.syncedObservable.unsubscribe(this.onSyncedChange);
+      Notes.syncObservable.unsubscribe(this.onSyncChange);
+   }
 
-    onSyncChange(state: boolean) {
-        console.log("sync", state);
-        this.setState({ syncing: state })
-    }
+   onSyncChange(state: boolean) {
+      console.log("sync", state);
+      this.setState({ syncing: state });
+   }
 
-    onSyncedChange(state: boolean) {
-        console.log("synced", state);
-        this.setState({ synced: state })
-    }
+   onSyncedChange(state: boolean) {
+      console.log("synced", state);
+      this.setState({ synced: state });
+   }
 
-    onSyncClick() {
-        Notes.sync().then(() => {
-            Notifications.sendInfo("Finished Synchronisation");
-        })
-    }
+   onSyncClick() {
+      Notes.sync().then(() => {
+         Notifications.sendInfo("Finished Synchronisation");
+      });
+   }
 
-    render() {
-        let extrac = undefined;
-        let color;
-        let text;
-        if (this.state.syncing) {
-            color = "orange";
-            text = "syncing";
-            extrac = "reloading"
-        } else {
-            if (this.state.synced) {
-                color = "green";
-                text = "synced";
-            } else {
-                color = "red";
-                text = "not synced";
-            }
-        }
-        return <footer class="elv-8">
+   render() {
+      let extrac = undefined;
+      let color;
+      let text;
+      if (this.state.syncing) {
+         color = "orange";
+         text = "syncing";
+         extrac = "reloading";
+      } else {
+         if (this.state.synced) {
+            color = "green";
+            text = "synced";
+         } else {
+            color = "red";
+            text = "not synced";
+         }
+      }
+      return (
+         <footer class="elv-8">
             <span>
-                <span class={extrac} >
-                    <a onClick={() => this.onSyncClick()} >
-                        <img src={Refresh} style="height: 1em; width: 1em;" />
-                        {/* <Refresh style="height: 1em; width: 1em;"></Refresh> */}
-                    </a>
-                </span>
-                <span style={"margin-left: 8px; color:" + color}>{text}</span>
+               <span class={extrac}>
+                  <a onClick={() => this.onSyncClick()}>
+                     <Refresh style="height: 1em; width: 1em;"></Refresh>
+                  </a>
+               </span>
+               <span style={"margin-left: 8px; color:" + color}>{text}</span>
             </span>
             <span>
-                Welcome <b>{Notes.name}</b>
+               Welcome <b>{Notes.name}</b>
             </span>
-            <span style="color: lightgrey;">
-                v1.4
-            </span>
-        </footer>
-    }
-}
+            <span style="color: lightgrey;">v1.5</span>
+         </footer>
+      );
+   }
+}

src/components/Routing.tsx

@@ -1,4 +1,4 @@
-import { h, Component, JSX } from 'preact';
+import { h, Component } from 'preact';
 import Navigation from '../navigation';
 import "./routing.scss"
 

src/components/context.tsx

@@ -1,4 +1,4 @@
-import { h, JSX } from "preact";
+import { h } from "preact";
 import "./context.scss";
 
 export default function ContextMenu({ children, event }: { children: JSX.Element | JSX.Element[], event: MouseEvent }) {

src/components/modals/Modal.tsx

@@ -1,5 +1,5 @@
 import { Observable } from "@hibas123/utils";
-import { h, Component, JSX } from "preact";
+import { h, Component } from "preact";
 import CloseIcon from "feather-icons/dist/icons/x.svg";
 
 export default abstract class Modal<T> {
@@ -70,8 +70,7 @@ export default abstract class Modal<T> {
                   <h3>{this.props.modal.title}</h3>
                   {/* <div> */}
                   {!this.props.modal.noClose ?
-                     <img src={CloseIcon} onClick={() => this.props.modal.result(null)} />
-                     // <CloseIcon onClick={() => this.props.modal.result(null)} width={undefined} height={undefined} />
+                     <CloseIcon onClick={() => this.props.modal.result(null)} width={undefined} height={undefined} />
                      : undefined
                   }
                   {/* </div> */}

src/components/routes/settings/Settings.tsx

@@ -1,7 +1,7 @@
 import { h } from "preact";
-import { Page } from "../../page";
-import Theme, { ThemeStates } from "../../theme";
-import Navigation from "../../navigation";
+import { Page } from "../../../page";
+import Theme, { ThemeStates } from "../../../theme";
+import Navigation from "../../../navigation";
 import ArrowLeft from "feather-icons/dist/icons/arrow-left.svg";
 
 export default class SettingsPage extends Page<{ state: any }, { vault: string }> {
@@ -13,7 +13,7 @@ export default class SettingsPage extends Page<{ state: any }, { vault: string }
         let active = Theme.active();
         return <div>
             <header class="header">
-                <a class="header-icon-button" onClick={() => history.back()}><img src={ArrowLeft} height={undefined} width={undefined} /></a>
+                <a class="header-icon-button" onClick={() => history.back()}><ArrowLeft height={undefined} width={undefined} /></a>
                 <h3 style="display:inline" class="header-title" onClick={() => Navigation.setPage("/")}>Settings</h3>
                 <span></span>
             </header>

src/components/routes/share/Share.tsx

@@ -1,7 +1,7 @@
 import { h } from "preact";
-import { Page } from "../../page";
-import VaultsPage from "../Vaults/Vaults";
-import Navigation from "../../navigation";
+import { Page } from "../../../page";
+import VaultsPage from "../vaults/Vaults";
+import Navigation from "../../../navigation";
 
 export default class SharePage extends Page<{ state: any }, { vault: string }> {
     text: string;

src/components/routes/vault/Entry.tsx

@@ -1,12 +1,12 @@
 import { h, Component } from "preact"
-import { IVault, ViewNote } from "../../notes";
+import { IVault, ViewNote } from "../../../notes";
 import Trash from "feather-icons/dist/icons/trash-2.svg"
 import X from "feather-icons/dist/icons/x.svg"
 import Save from "feather-icons/dist/icons/save.svg"
 
-import Navigation from "../../navigation";
-import { YesNoModal } from "../../components/modals/YesNoModal";
-import Notifications, { MessageType } from "../../notifications";
+import Navigation from "../../../navigation";
+import { YesNoModal } from "../../modals/YesNoModal";
+import Notifications, { MessageType } from "../../../notifications";
 
 const minRows = 3;
 export default class EntryComponent extends Component<{ vault: Promise<IVault>, id: string | undefined, note: string | undefined }, { title: string, changed: boolean }> {
@@ -166,10 +166,10 @@ export default class EntryComponent extends Component<{ vault: Promise<IVault>,
 
       return <div>
          <header class="header">
-            <a class="header-icon-button" onClick={() => this.exitHandler()}><img src={X} height={undefined} width={undefined} /></a>
-            {this.state.changed ? <a class="header-icon-button" style="margin-left: 0.5em;" onClick={() => save_handler()}><img src={Save} height={undefined} width={undefined} /></a> : undefined}
+            <a class="header-icon-button" onClick={() => this.exitHandler()}><X height={undefined} width={undefined} /></a>
+            {this.state.changed ? <a class="header-icon-button" style="margin-left: 0.5em;" onClick={() => save_handler()}><Save height={undefined} width={undefined} /></a> : undefined}
             <h3 style="display:inline" class="button header-title">{this.state.title}</h3>
-            <a class="header-icon-button" onClick={() => delete_handler()}><img src={Trash} height={undefined} width={undefined} /></a>
+            <a class="header-icon-button" onClick={() => delete_handler()}><Trash height={undefined} width={undefined} /></a>
          </header>
          <div class="container">
             <textarea

src/components/routes/vault/EntryList.tsx

@@ -1,11 +1,11 @@
-import { h, Component, JSX } from "preact"
-import Notes, { IVault, BaseNote } from "../../notes";
-import AddButton from "../../components/AddButton";
-import Navigation from "../../navigation";
+import { h, Component } from "preact"
+import Notes, { IVault, BaseNote } from "../../../notes";
+import AddButton from "../../AddButton";
+import Navigation from "../../../navigation";
 import ArrowLeft from "feather-icons/dist/icons/arrow-left.svg"
 import Search from "feather-icons/dist/icons/search.svg"
-import ContextMenu from "../../components/context";
-import Notifications from "../../notifications";
+import ContextMenu from "../../context";
+import Notifications from "../../../notifications";
 import { Observable, Lock } from "@hibas123/utils";
 
 
@@ -266,7 +266,7 @@ export default class EntryList extends Component<{ vault: Promise<IVault> }, { n
       return <div>
          {this.state.context}
          <header class="header">
-            <a class="header-icon-button" onClick={() => history.back()}><img src={ArrowLeft} height={undefined} width={undefined} /></a>
+            <a class="header-icon-button" onClick={() => history.back()}><ArrowLeft height={undefined} width={undefined} /></a>
             <h3 style="display:inline" class="header-title" onClick={() => Navigation.setPage("/")}>{this.vault ? this.vault.name : ""}</h3>
             <span></span>
             {/* <a class="button header_icon_button"><MoreVertival height={undefined} width={undefined} /></a> */}
@@ -276,7 +276,7 @@ export default class EntryList extends Component<{ vault: Promise<IVault> }, { n
             <div style="display:flex;">
                <input class="inp" type="text" style="width: 100%; height: 40px;" onKeyUp={this.searchChanged} ref={elm => this.searchInput = elm} />
                <button class="btn btn-primary" style="padding: 5px 10px; margin: 0; height: 40px; width: 40px;">
-                  <img src={Search} />
+                  <Search />
                </button>
             </div>
 

src/components/routes/vault/Vault.tsx

@@ -1,7 +1,7 @@
 import { h } from "preact"
-import { Page } from "../../page";
-import Notes, { IVault, BaseNote } from "../../notes";
-import Navigation from "../../navigation";
+import { Page } from "../../../page";
+import Notes, { IVault, BaseNote } from "../../../notes";
+import Navigation from "../../../navigation";
 import EntryComponent from "./Entry";
 import EntryList from "./EntryList";
 

src/components/routes/vaults/Vaults.tsx

@@ -1,16 +1,16 @@
-import { h, JSX } from "preact"
-import { Page } from "../../page";
-import Notes, { VaultList } from "../../notes";
+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 Settings from "feather-icons/dist/icons/settings.svg"
-import Navigation from "../../navigation";
-import { InputModal } from "../../components/modals/InputModal";
-import { YesNoModal } from "../../components/modals/YesNoModal";
-import AddButton from "../../components/AddButton";
-import ContextMenu from "../../components/context";
-import Notifications from "../../notifications";
+import Navigation from "../../../navigation";
+import { InputModal } from "../../modals/InputModal";
+import { YesNoModal } from "../../modals/YesNoModal";
+import AddButton from "../../AddButton";
+import ContextMenu from "../../context";
+import Notifications from "../../../notifications";
 
 export interface VaultsProps {
    state: any;
@@ -206,13 +206,9 @@ export default class VaultsPage extends Page<VaultsProps, { vaults: VaultList, m
    }
 
    render() {
-      // <Unlock height={undefined} width={undefined} />}
-      // <Lock height={undefined} width={undefined} />
       let elms = this.state.vaults.map(vault => {
          return <li class="vaults_vault" onClick={() => this.openVault(vault)} onContextMenu={(evt) => this.onContext(evt, vault)}>
-            {vault.encrypted ? <img src={Lock} /> : <img src={Unlock} />}
-
-
+            {vault.encrypted ? <Lock height={undefined} width={undefined} /> : <Unlock height={undefined} width={undefined} />}
             <span>
                {vault.name}
             </span>
@@ -225,10 +221,7 @@ export default class VaultsPage extends Page<VaultsProps, { vaults: VaultList, m
          <header class="header">
             <span></span>
             <h3 style="display:inline" onClick={() => Navigation.setPage("/")}>{this.props.selectVault ? "Select Vault for share" : "Your vaults:"}</h3>
-            <a class="header-icon-button" onClick={() => Navigation.setPage("/settings")}>
-               <img src={Settings} />
-               {/* <Settings height={undefined} width={undefined} /> */}
-            </a>
+            <a class="header-icon-button" onClick={() => Navigation.setPage("/settings")}><Settings height={undefined} width={undefined} /></a>
          </header>
          <AddButton onClick={() => this.addButtonClick()} />
          <div class="container">

src/index.html

@@ -6,7 +6,7 @@
    <meta charset="utf8" />
    <meta name="Description" content="Notes app">
    <meta name="viewport" content="width=device-width,initial-scale=1" />
-   <link rel="manifest" href="./manifest.json">
+   <link rel="manifest" href="/manifest.json">
    <!-- <link rel="shortcut icon" href="/public/icon-72x72.png"> -->
 
    <!-- Add to home screen for Safari on iOS -->
@@ -15,9 +15,9 @@
    <meta name="apple-mobile-web-app-title" content="Secure Notes">
 
 
-   <!-- <link rel="apple-touch-icon" sizes="180x180" href="../public/apple-touch-icon.png"> -->
-   <!-- <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#1E88E5"> -->
-   <script src="./encoding.js"></script>
+   <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+   <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#1E88E5">
+   <script src="encoding.js"></script>
    <meta name="msapplication-TileColor" content="#1E88E5">
    <meta name="theme-color" content="#1E88E5">
 </head>
@@ -45,7 +45,7 @@
             console.warn("Disabling Service Worker in debug mode!")
          } else {
             // Register the ServiceWorker
-            navigator.serviceWorker.register('./serviceworker.ts', {
+            navigator.serviceWorker.register('/serviceworker.js', {
                scope: '/'
             }).then(function (reg) {
                console.log('Service worker has been registered for scope:' + reg.scope);
@@ -56,7 +56,6 @@
          }
       }
    </script>
-   <script src="./index.tsx"></script>
 </body>
 
 </html>

src/index.scss

@@ -9,48 +9,48 @@ body {
 //    display: flex;
 // }
 
-$header-margin: .5em;
+// $header-margin: .5em;
 // $header-icon-size: calc(1.5rem * 1);
 // $header-icon-size: 100%;
 
-header {
-   display: flex;
-   justify-content: space-between;
-   margin-bottom: $header-margin;
-   align-content: center;
-   padding: 0.75em;
-   border-bottom: solid var(--border-color) 1px;
-   background-color: var(--primary);
+// header {
+//    display: flex;
+//    justify-content: space-between;
+//    margin-bottom: $header-margin;
+//    align-content: center;
+//    padding: 0.75em;
+//    border-bottom: solid var(--border-color) 1px;
+//    background-color: var(--primary);
 
-   >* {
-      margin: 0;
-      color: white;
-      background: var(--primary);
-   }
+//    >* {
+//       margin: 0;
+//       color: white;
+//       background: var(--primary);
+//    }
 
-   >.header-title {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
-      flex-grow: 1;
-      margin: 0 1em;
-   }
+//    >.header-title {
+//       overflow: hidden;
+//       text-overflow: ellipsis;
+//       text-overflow: ellipsis;
+//       white-space: nowrap;
+//       overflow: hidden;
+//       flex-grow: 1;
+//       margin: 0 1em;
+//    }
 
-   .header-icon-button {
-      display: block;
-      margin-top: auto;
-      margin-bottom: auto;
-      // min-width: $header-icon-size;
+//    .header-icon-button {
+//       display: block;
+//       margin-top: auto;
+//       margin-bottom: auto;
+//       min-width: $header-icon-size;
 
-      // >svg {
-      //    height: $header-icon-size;
-      //    width: $header-icon-size;
-      // }
-   }
+//       >svg {
+//          height: $header-icon-size;
+//          width: $header-icon-size;
+//       }
+//    }
 
-}
+// }
 
 
 body {

src/index.tsx

@@ -72,16 +72,16 @@ import "@hibas123/theme/out/base.css"
 
 import "./index.scss";
 import Navigation from './navigation';
-import VaultsPage from './Views/Vaults/Vaults';
+import VaultsPage from './components/routes/vaults/Vaults';
 import { Page } from './page';
 
 import Notes from "./notes"
 import DemoPage from './components/demo';
-import VaultPage from './Views/Vault/Vault';
-import SharePage from './Views/Share/Share';
+import VaultPage from './components/routes/vault/Vault';
+import SharePage from './components/routes/share/Share';
 import Notifications from './notifications';
-import Error404Page from './Views/404';
-import SettingsPage from './Views/Settings/Settings';
+import Error404Page from './components/routes/404';
+import SettingsPage from './components/routes/settings/Settings';
 window.debug.notes = Notes;
 
 

src/navigation.ts

@@ -1,6 +1,6 @@
 import { Observable } from "@hibas123/utils";
 import { Page, PageProps } from "./page";
-import { h, VNode, JSX } from "preact";
+import { h, VNode } from "preact";
 
 function serializQuery(obj: any) {
    var str = [];

src/theme.ts

@@ -1,7 +1,5 @@
-import { readFileSync } from "fs";
-
-const light = readFileSync("./node_modules/@hibas123/theme/out/light.css", "utf8")
-const dark = readFileSync("./node_modules/@hibas123/theme/out/dark.css", "utf8")
+const light = require("!!raw-loader!@hibas123/theme/out/light.css").default;
+const dark = require("!!raw-loader!@hibas123/theme/out/dark.css").default;
 
 export enum ThemeStates {
     AUTO,

src/types.d.ts

@@ -1,15 +1,10 @@
-// declare module "*.svg" {
-//     const SVG: (props: {
-//         width?: number | undefined
-//         height?: number | undefined
-//         onClick?: (evt: MouseEvent) => void;
-//         style?: string;
-//     }) => JSX.Element;
-//     export default SVG;
-// }
-
 declare module "*.svg" {
-    const SVG: string;
+    const SVG: (props: {
+        width?: number | undefined
+        height?: number | undefined
+        onClick?: (evt: MouseEvent) => void;
+        style?: string;
+    }) => JSX.Element;
     export default SVG;
 }
 

tsconfig.json

@@ -13,8 +13,7 @@
          "dom",
          "esnext"
       ],
-      "resolveJsonModule": true,
-      "esModuleInterop": true
+      "resolveJsonModule": true
    },
    "include": [
       "./src/types.d.ts",