From 68eb04c1379aca5e15ce18b140a160827f2985c9 Mon Sep 17 00:00:00 2001
From: Matthew Aaron Raymer <matthew.raymer@anomalistdesign.com>
Date: Tue, 17 Jan 2023 16:53:44 +0800
Subject: [PATCH] Added updating account name

---
 src/views/AccountViewView.vue    | 10 +++++++++-
 src/views/NewEditAccountView.vue | 28 +++++++++++++++++++++++++++-
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/src/views/AccountViewView.vue b/src/views/AccountViewView.vue
index e22bb03..0bc56fa 100644
--- a/src/views/AccountViewView.vue
+++ b/src/views/AccountViewView.vue
@@ -72,7 +72,7 @@
 
     <!-- Identity Details -->
     <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4">
-      <h2 class="text-xl font-semibold mb-2">Firstname Lastname</h2>
+      <h2 class="text-xl font-semibold mb-2">{{ firstName }} {{ lastName }}</h2>
 
       <div class="text-slate-500 text-sm font-bold">ID</div>
       <div
@@ -184,6 +184,14 @@ import { ref } from "vue";
   components: {},
 })
 export default class AccountViewView extends Vue {
+  firstName =
+    localStorage.getItem("firstName") === null
+      ? "--"
+      : localStorage.getItem("firstName");
+  lastName =
+    localStorage.getItem("lastName") === null
+      ? "--"
+      : localStorage.getItem("lastName");
   mnemonic = "";
   address = "";
   privateHex = "";
diff --git a/src/views/NewEditAccountView.vue b/src/views/NewEditAccountView.vue
index f9b2cf2..55545b3 100644
--- a/src/views/NewEditAccountView.vue
+++ b/src/views/NewEditAccountView.vue
@@ -18,17 +18,20 @@
         type="text"
         placeholder="First Name"
         class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
+        v-model="firstName"
       />
       <input
         type="text"
         placeholder="Last Name"
         class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
+        v-model="lastName"
       />
 
       <div class="mt-8">
         <button
           type="button"
           class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2"
+          @click="onClickSaveChanges()"
         >
           Save Changes
         </button>
@@ -36,6 +39,7 @@
         <button
           type="button"
           class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md"
+          @click="onClickCancel()"
         >
           Cancel
         </button>
@@ -50,5 +54,27 @@ import { Options, Vue } from "vue-class-component";
 @Options({
   components: {},
 })
-export default class NewEditAccountView extends Vue {}
+export default class NewEditAccountView extends Vue {
+  firstName =
+    localStorage.getItem("firstName") === null
+      ? "--"
+      : localStorage.getItem("firstName");
+  lastName =
+    localStorage.getItem("lastName") === null
+      ? "--"
+      : localStorage.getItem("lastName");
+
+  onClickSaveChanges() {
+    localStorage.setItem("firstName", this.firstName as string);
+    localStorage.setItem("lastName", this.lastName as string);
+    const route = {
+      name: "account",
+    };
+    this.$router.push(route);
+  }
+
+  onClickCancel() {
+    this.$router.back();
+  }
+}
 </script>