Mark UserProfileView.vue as human tested, update migration tracker

- Human testing confirmed UserProfileView.vue works correctly
- Updated testing tracker with 21 complete migrations (88% success)
- Added ImportAccountView.vue to ready-for-testing list
- Migration progress: 4 components human tested, 17 ready for testing

src/constants/notifications.ts

@@ -156,3 +156,9 @@ export const NOTIFY_CONFIRM_CLAIM = {
   title: "Confirm",
   text: "Do you personally confirm that this is true?",
 };
+
+// UserProfileView.vue constants
+export const NOTIFY_PROFILE_LOAD_ERROR = {
+  title: "Profile Load Error", 
+  message: "There was a problem loading the profile.",
+};

src/views/ImportAccountView.vue

@@ -87,13 +87,38 @@ import { Component, Vue } from "vue-facing-decorator";
 import { Router } from "vue-router";
 
 import { AppString, NotificationIface } from "../constants/app";
-import * as databaseUtil from "../db/databaseUtil";
 import { DEFAULT_ROOT_DERIVATION_PATH } from "../libs/crypto";
 import { retrieveAccountCount, importFromMnemonic } from "../libs/util";
 import { logger } from "../utils/logger";
+import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
+import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
 
+/**
+ * Import Account View Component
+ * 
+ * Allows users to import existing identifiers using seed phrases:
+ * - Secure mnemonic phrase input with validation
+ * - Advanced options for custom derivation paths
+ * - Legacy uPort compatibility support
+ * - Test environment utilities for development
+ * 
+ * Features:
+ * - Secure seed phrase import functionality
+ * - Custom derivation path configuration
+ * - Account erasure options for fresh imports
+ * - Development mode test utilities
+ * - Comprehensive error handling and validation
+ * 
+ * Security Considerations:
+ * - Seed phrases are handled securely and not logged
+ * - Import process includes validation and error recovery
+ * - Advanced options are hidden by default
+ * 
+ * @author Matthew Raymer
+ */
 @Component({
   components: {},
+  mixins: [PlatformServiceMixin],
 })
 export default class ImportAccountView extends Vue {
   TEST_USER_0_MNEMONIC =
@@ -105,6 +130,8 @@ export default class ImportAccountView extends Vue {
   $notify!: (notification: NotificationIface, timeout?: number) => void;
   $router!: Router;
 
+  notify!: ReturnType<typeof createNotifyHelpers>;
+
   apiServer = "";
   derivationPath = DEFAULT_ROOT_DERIVATION_PATH;
   mnemonic = "";
@@ -112,21 +139,62 @@ export default class ImportAccountView extends Vue {
   showAdvanced = false;
   shouldErase = false;
 
-  async created() {
+  /**
+   * Initializes notification helpers
+   */
+  created() {
+    this.notify = createNotifyHelpers(this.$notify);
+  }
+
+  /**
+   * Component initialization
+   * 
+   * Loads account count and server settings for import configuration
+   * Uses PlatformServiceMixin for secure database access
+   */
+  async mounted() {
+    await this.initializeSettings();
+  }
+
+  /**
+   * Initializes component settings and account information
+   */
+  private async initializeSettings() {
     this.numAccounts = await retrieveAccountCount();
-    // get the server, to help with import on the test server
-    const settings = await databaseUtil.retrieveSettingsForActiveAccount();
+    const settings = await this.$accountSettings();
     this.apiServer = settings.apiServer || "";
   }
 
+  /**
+   * Handles cancel button click
+   * 
+   * Navigates back to previous view
+   */
   public onCancelClick() {
     this.$router.back();
   }
 
+  /**
+   * Checks if running on production server
+   * 
+   * @returns True if not on production server (enables test utilities)
+   */
   public isNotProdServer() {
     return this.apiServer !== AppString.PROD_ENDORSER_API_SERVER;
   }
 
+  /**
+   * Imports identifier from mnemonic phrase
+   * 
+   * Processes the mnemonic phrase with optional custom derivation path
+   * and account erasure options. Handles validation and error scenarios
+   * with appropriate user feedback.
+   * 
+   * Error Handling:
+   * - Invalid mnemonic format validation
+   * - Import process failure recovery
+   * - User-friendly error messaging
+   */
   public async fromMnemonic() {
     try {
       await importFromMnemonic(
@@ -139,24 +207,14 @@ export default class ImportAccountView extends Vue {
     } catch (err: any) {
       logger.error("Error importing from mnemonic:", err);
       if (err == "Error: invalid mnemonic") {
-        this.$notify(
-          {
-            group: "alert",
-            type: "danger",
-            title: "Invalid Mnemonic",
-            text: "Please check your mnemonic and try again.",
-          },
-          5000,
+        this.notify.error(
+          "Please check your mnemonic and try again.",
+          TIMEOUTS.LONG
         );
       } else {
-        this.$notify(
-          {
-            group: "alert",
-            type: "danger",
-            title: "Error",
-            text: "Got an error creating that identifier.",
-          },
-          5000,
+        this.notify.error(
+          "Got an error creating that identifier.",
+          TIMEOUTS.LONG
         );
       }
     }

src/views/UserProfileView.vue

@@ -32,7 +32,7 @@
       <div class="mt-8">
         <div class="text-sm">
           <font-awesome icon="user" class="fa-fw text-slate-400"></font-awesome>
-          {{ didInfo(profile.issuerDid, activeDid, allMyDids, allContacts) }}
+          {{ profileDisplayName }}
           <button title="Copy Link to Profile" @click="onCopyLinkClick()">
             <font-awesome
               icon="link"
@@ -46,46 +46,42 @@
       </div>
 
       <!-- Map for first coordinates -->
-      <div v-if="profile?.locLat && profile?.locLon" class="mt-4">
+      <div v-if="hasFirstLocation" class="mt-4">
         <h2 class="text-lg font-semibold">Location</h2>
         <div class="h-96 mt-2 w-full">
           <l-map
             ref="profileMap"
-            :center="[profile.locLat, profile.locLon]"
-            :zoom="12"
+            :center="firstLocationCoords"
+            :zoom="mapZoom"
           >
             <l-tile-layer
-              url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+              :url="tileLayerUrl"
               layer-type="base"
               name="OpenStreetMap"
             />
-            <l-marker :lat-lng="[profile.locLat, profile.locLon]">
-              <l-popup>{{
-                didInfo(profile.issuerDid, activeDid, allMyDids, allContacts)
-              }}</l-popup>
+            <l-marker :lat-lng="firstLocationCoords">
+              <l-popup>{{ profileDisplayName }}</l-popup>
             </l-marker>
           </l-map>
         </div>
       </div>
 
       <!-- Map for second coordinates -->
-      <div v-if="profile?.locLat2 && profile?.locLon2" class="mt-4">
+      <div v-if="hasSecondLocation" class="mt-4">
         <h2 class="text-lg font-semibold">Second Location</h2>
         <div class="h-96 mt-2 w-full">
           <l-map
             ref="profileMap"
-            :center="[profile.locLat2, profile.locLon2]"
-            :zoom="12"
+            :center="secondLocationCoords"
+            :zoom="mapZoom"
           >
             <l-tile-layer
-              url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+              :url="tileLayerUrl"
               layer-type="base"
               name="OpenStreetMap"
             />
-            <l-marker :lat-lng="[profile.locLat2, profile.locLon2]">
-              <l-popup>{{
-                didInfo(profile.issuerDid, activeDid, allMyDids, allContacts)
-              }}</l-popup>
+            <l-marker :lat-lng="secondLocationCoords">
+              <l-popup>{{ profileDisplayName }}</l-popup>
             </l-marker>
           </l-map>
         </div>
@@ -111,15 +107,32 @@ import {
   DEFAULT_PARTNER_API_SERVER,
   NotificationIface,
 } from "../constants/app";
-import * as databaseUtil from "../db/databaseUtil";
 import { Contact } from "../db/tables/contacts";
 import { didInfo, getHeaders } from "../libs/endorserServer";
 import { UserProfile } from "../libs/partnerServer";
 import { retrieveAccountDids } from "../libs/util";
 import { logger } from "../utils/logger";
-import { PlatformServiceFactory } from "@/services/PlatformServiceFactory";
-import { Settings } from "@/db/tables/settings";
 import { useClipboard } from "@vueuse/core";
+import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
+import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
+import { NOTIFY_PROFILE_LOAD_ERROR } from "@/constants/notifications";
+
+/**
+ * User Profile View Component
+ *
+ * Displays individual user profile information including:
+ * - Basic profile data and description
+ * - Location information with interactive maps
+ * - Profile link sharing functionality
+ *
+ * Features:
+ * - Profile data loading from partner API
+ * - Interactive maps for location visualization
+ * - Copy-to-clipboard functionality for profile links
+ * - Responsive design with loading states
+ *
+ * @author Matthew Raymer
+ */
 @Component({
   components: {
     LMap,
@@ -129,12 +142,15 @@ import { useClipboard } from "@vueuse/core";
     QuickNav,
     TopMessage,
   },
+  mixins: [PlatformServiceMixin],
 })
 export default class UserProfileView extends Vue {
   $notify!: (notification: NotificationIface, timeout?: number) => void;
   $router!: Router;
   $route!: RouteLocationNormalizedLoaded;
 
+  notify!: ReturnType<typeof createNotifyHelpers>;
+
   activeDid = "";
   allContacts: Array<Contact> = [];
   allMyDids: Array<string> = [];
@@ -145,29 +161,47 @@ export default class UserProfileView extends Vue {
   // make this function available to the Vue template
   didInfo = didInfo;
 
+  /**
+   * Initializes notification helpers
+   */
+  created() {
+    this.notify = createNotifyHelpers(this.$notify);
+  }
+
+  /**
+   * Component initialization
+   *
+   * Loads account settings, contacts, and profile data
+   * Uses PlatformServiceMixin for database operations
+   */
   async mounted() {
-    const platformService = PlatformServiceFactory.getInstance();
-    const settingsQuery = await platformService.dbQuery(
-      "SELECT * FROM settings",
-    );
-    const settings = databaseUtil.mapQueryResultToValues(
-      settingsQuery,
-    ) as Settings[];
-    this.activeDid = settings[0]?.activeDid || "";
-    this.partnerApiServer =
-      settings[0]?.partnerApiServer || this.partnerApiServer;
-
-    const contactQuery = await platformService.dbQuery(
-      "SELECT * FROM contacts",
-    );
-    this.allContacts = databaseUtil.mapQueryResultToValues(
-      contactQuery,
-    ) as unknown as Contact[];
-    this.allMyDids = await retrieveAccountDids();
-
+    await this.initializeSettings();
+    await this.loadContacts();
     await this.loadProfile();
   }
 
+  /**
+   * Initializes account settings from database
+   */
+  private async initializeSettings() {
+    const settings = await this.$accountSettings();
+    this.activeDid = settings.activeDid || "";
+    this.partnerApiServer = settings.partnerApiServer || this.partnerApiServer;
+  }
+
+  /**
+   * Loads all contacts from database
+   */
+  private async loadContacts() {
+    this.allContacts = await this.$getAllContacts();
+    this.allMyDids = await retrieveAccountDids();
+  }
+
+  /**
+   * Loads user profile data from partner API
+   *
+   * Handles profile loading with error handling and loading states
+   */
   async loadProfile() {
     const profileId: string = this.$route.params.id as string;
     if (!profileId) {
@@ -196,35 +230,85 @@ export default class UserProfileView extends Vue {
       }
     } catch (error) {
       logger.error("Error loading profile:", error);
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Error",
-          text: "There was a problem loading the profile.",
-        },
-        5000,
-      );
+      this.notify.error(NOTIFY_PROFILE_LOAD_ERROR.message, TIMEOUTS.LONG);
     } finally {
       this.isLoading = false;
     }
   }
 
+  /**
+   * Copies profile link to clipboard
+   *
+   * Creates a deep link to the profile and copies it to the clipboard
+   * Shows success notification when completed
+   */
   onCopyLinkClick() {
     const deepLink = `${APP_SERVER}/deep-link/user-profile/${this.profile?.rowId}`;
     useClipboard()
       .copy(deepLink)
       .then(() => {
-        this.$notify(
-          {
-            group: "alert",
-            type: "toast",
-            title: "Copied",
-            text: "A link to this profile was copied to the clipboard.",
-          },
-          2000,
-        );
-      });
+        this.notify.copied("profile link", TIMEOUTS.STANDARD);
+              });
+  }
+
+  /**
+   * Computed properties for template logic streamlining
+   */
+
+  /**
+   * Gets the display name for the profile using didInfo utility
+   * @returns Formatted display name for the profile owner
+   */
+  get profileDisplayName() {
+    return this.didInfo(this.profile?.issuerDid, this.activeDid, this.allMyDids, this.allContacts);
+  }
+
+  /**
+   * Checks if the profile has first location coordinates
+   * @returns True if both latitude and longitude are available
+   */
+  get hasFirstLocation() {
+    return this.profile?.locLat && this.profile?.locLon;
+  }
+
+  /**
+   * Gets the coordinate array for the first location
+   * @returns Array of [latitude, longitude] for map center
+   */
+  get firstLocationCoords() {
+    return [this.profile?.locLat, this.profile?.locLon];
+  }
+
+  /**
+   * Checks if the profile has second location coordinates
+   * @returns True if both latitude and longitude are available
+   */
+  get hasSecondLocation() {
+    return this.profile?.locLat2 && this.profile?.locLon2;
+  }
+
+  /**
+   * Gets the coordinate array for the second location
+   * @returns Array of [latitude, longitude] for map center
+   */
+  get secondLocationCoords() {
+    return [this.profile?.locLat2, this.profile?.locLon2];
+  }
+
+  /**
+   * Standard map zoom level for profile location maps
+   * @returns Default zoom level for location display
+   */
+  get mapZoom() {
+    return 12;
+  }
+
+  /**
+   * OpenStreetMap tile layer URL template
+   * @returns URL template for map tile fetching
+   */
+  get tileLayerUrl() {
+    return "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
   }
 }
 </script>