allow deletion of an identity

src/views/IdentitySwitcherView.vue

@@ -39,24 +39,43 @@
 
     <!-- Other Identity/ies -->
     <ul class="mb-4">
-      <li
+      <li v-for="ident in otherIdentities" :key="ident.did">
-        class="block bg-slate-100 rounded-md flex items-center px-4 py-3 mb-2"
+        <div class="flex items-center justify-between mb-2">
-        v-for="ident in otherIdentities"
+          <div
-        :key="ident.did"
+            class="flex flex-grow items-center bg-slate-100 rounded-md px-4 py-3 mb-2 truncate cursor-pointer"
-        @click="switchAccount(ident.did)"
+            @click="switchAccount(ident.did)"
-      >
+          >
-        <fa
+            <fa
-          v-if="ident.did === activeDid"
+              v-if="ident.did === activeDid"
-          icon="circle-check"
+              icon="circle-check"
-          class="fa-fw text-blue-600 text-xl mr-3"
+              class="fa-fw text-blue-600 text-xl mr-3"
-        />
+            />
-        <fa v-else icon="circle" class="fa-fw text-slate-400 text-xl mr-3" />
+            <fa
-        <span class="overflow-hidden">
+              v-else
-          <h2 class="text-xl font-semibold mb-0"></h2>
+              icon="circle"
-          <div class="text-sm text-slate-500 truncate">
+              class="fa-fw text-slate-400 text-xl mr-3"
-            <b>ID:</b> <code>{{ ident.did }}</code>
+            />
+            <span class="flex-grow overflow-hidden">
+              <div class="text-sm text-slate-500 truncate">
+                <b>ID:</b> <code>{{ ident.did }}</code>
+              </div>
+            </span>
           </div>
-        </span>
+          <div>
+            <fa
+              v-if="ident.did === activeDid"
+              icon="trash-can"
+              class="text-slate-400 text-xl ml-2 mr-2 cursor-pointer"
+              @click="notifyCannotDelete()"
+            />
+            <fa
+              v-else
+              icon="trash-can"
+              class="text-red-600 text-xl ml-2 mr-2 cursor-pointer"
+              @click="deleteAccount(ident.id)"
+            />
+          </div>
+        </div>
       </li>
     </ul>
 
@@ -81,9 +100,8 @@
 <script lang="ts">
 import { Component, Vue } from "vue-facing-decorator";
 
-import { AppString, NotificationIface } from "@/constants/app";
+import { NotificationIface } from "@/constants/app";
 import { db, accountsDB } from "@/db/index";
-import { AccountsSchema } from "@/db/tables/accounts";
 import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
 import QuickNav from "@/components/QuickNav.vue";
 
@@ -91,14 +109,11 @@ import QuickNav from "@/components/QuickNav.vue";
 export default class IdentitySwitcherView extends Vue {
   $notify!: (notification: NotificationIface, timeout?: number) => void;
 
-  Constants = AppString;
-  public accounts: typeof AccountsSchema;
   public activeDid = "";
   public activeDidInIdentities = false;
   public apiServer = "";
   public apiServerInput = "";
-  public otherIdentities: Array<{ did: string }> = [];
+  public otherIdentities: Array<{ id: string; did: string }> = [];
-  public showContactGives = false;
 
   async created() {
     try {
@@ -107,20 +122,14 @@ export default class IdentitySwitcherView extends Vue {
       this.activeDid = settings?.activeDid || "";
       this.apiServer = settings?.apiServer || "";
       this.apiServerInput = settings?.apiServer || "";
-      this.showContactGives = !!settings?.showContactGivesInline;
 
       await accountsDB.open();
       const accounts = await accountsDB.accounts.toArray();
       for (let n = 0; n < accounts.length; n++) {
-        try {
+        const acct = accounts[n];
-          const did = accounts[n]["did"];
+        this.otherIdentities.push({ id: acct.id as string, did: acct.did });
-          this.otherIdentities.push({ did: did });
+        if (acct.did && this.activeDid === acct.did) {
-          if (did && this.activeDid === did) {
+          this.activeDidInIdentities = true;
-            this.activeDidInIdentities = true;
-          }
-        } catch (err) {
-          console.error("Error parsing identity:", err);
-          continue;
         }
       }
     } catch (err) {
@@ -148,5 +157,36 @@ export default class IdentitySwitcherView extends Vue {
     });
     this.$router.push({ name: "account" });
   }
+
+  async deleteAccount(id: string) {
+    this.$notify(
+      {
+        group: "modal",
+        type: "confirm",
+        title: "Delete Identity?",
+        text: "Are you sure you want to permanently delete this identity? (There is no undo.)",
+        onYes: async () => {
+          await accountsDB.open();
+          await accountsDB.accounts.delete(id);
+          this.otherIdentities = this.otherIdentities.filter(
+            (ident) => ident.id !== id,
+          );
+        },
+      },
+      -1,
+    );
+  }
+
+  notifyCannotDelete() {
+    this.$notify(
+      {
+        group: "alert",
+        type: "warning",
+        title: "Cannot Delete",
+        text: "You cannot delete the active identity.",
+      },
+      5000,
+    );
+  }
 }
 </script>