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,7 +14,6 @@
       </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>
@@ -22,14 +21,15 @@
       type="text"
       placeholder="Seed Phrase"
       class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
-        value="{{ mnemonic }}"
+      v-bind="mnemonic"
     />
     <div class="mt-8">
-        <button`
-          @click="import(mnemonic)"
+      <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"
-          value="Import Identity"
-        />
+      >
+        Import
+      </button>
       <button
         @click="onCancelClick()"
         type="button"
@@ -38,25 +38,35 @@
         Cancel
       </button>
     </div>
-    </form>
   </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);
     }
   }
 }