Flesh out a bit more of the import and also refactor the router

src/router/index.ts

@@ -115,22 +115,20 @@ router.beforeEach(async (to, from, next) => {
   const publicPages = ["/start", "/account", "/import-account"];
   const isPublic = publicPages.includes(to.path);
   const appStore = useAppStore();
-  let return_path = "/start";
-  if (to.path === "/" && appStore.condition == "registered") {
-    return_path = "/account";
-  }
-  if (isPublic) {
+  console.log(to);
+  if (to.path === "/" && appStore.condition === "registered") {
+    next({ path: "/account" });
+  } else if (isPublic) {
     switch (appStore.condition) {
-      case "uninitialized":
-        return_path = "";
-        break;
       case "registered":
         next();
         break;
+      default:
+        next();
+        break;
     }
-  }
-  if (return_path == "") {
-    return;
+  } else if (appStore.condition === "uninitialized") {
+    next({ path: "/start" });
   } else {
     next();
   }

src/views/ImportAccountView.vue

@@ -14,49 +14,59 @@
       </h1>
     </div>
     <!-- Import Account Form -->
-    <form>
-      <p class="text-center text-xl mb-4 font-light">
-        Enter your seed phrase below to import your identity on this device.
-      </p>
-      <input
-        type="text"
-        placeholder="Seed Phrase"
-        class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
-        value="{{ mnemonic }}"
-      />
-      <div class="mt-8">
-        <button`
-          @click="import(mnemonic)"
-          class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2"
-          value="Import Identity"
-        />
-        <button
-          @click="onCancelClick()"
-          type="button"
-          class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md"
-        >
-          Cancel
-        </button>
-      </div>
-    </form>
+    <p class="text-center text-xl mb-4 font-light">
+      Enter your seed phrase below to import your identity on this device.
+    </p>
+    <input
+      type="text"
+      placeholder="Seed Phrase"
+      class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
+      v-bind="mnemonic"
+    />
+    <div class="mt-8">
+      <button
+        @click="from_mnemonic()"
+        class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2"
+      >
+        Import
+      </button>
+      <button
+        @click="onCancelClick()"
+        type="button"
+        class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md"
+      >
+        Cancel
+      </button>
+    </div>
   </section>
 </template>
 
 <script lang="ts">
 import { Options, Vue } from "vue-class-component";
+import { deriveAddress } from "../libs/crypto";
 
 @Options({
   components: {},
 })
 export default class ImportAccountView extends Vue {
   mnemonic = "";
+  address = "";
+  privateHex = "";
+  publicHex = "";
+  UPORT_ROOT_DERIVATION_PATH = "";
+
   public onCancelClick() {
     this.$router.back();
   }
-  public import() {
-    // just to get rid of variability that might cause an error
+  public from_mnemonic() {
     if (this.mnemonic.trim().length > 0) {
       this.mnemonic = this.mnemonic.trim().toLowerCase();
+      [
+        this.address,
+        this.privateHex,
+        this.publicHex,
+        this.UPORT_ROOT_DERIVATION_PATH,
+      ] = deriveAddress(this.mnemonic);
     }
   }
 }