crowd-funder-for-time-pwa/src/views/NewEditAccountView.vue

<!--
  NewEditAccountView.vue - Account Identity Editor
  
  A simple view for editing user account identity information.
  Allows users to update their display name (firstName) which is used
  throughout the application for user identification.
  
  Key Features:
  - Edit display name (firstName field)
  - Save changes to account settings
  - Cancel changes and return to previous view
  - Handles deprecated lastName field for backward compatibility
  
  Migration Status: ✅ Complete Enhanced Triple Migration Pattern
  - Phase 1: Database Migration (PlatformServiceMixin) ✅
  - Phase 2: SQL Abstraction (Service methods) ✅  
  - Phase 3: Notification Migration (N/A - no notifications) ✅
  - Phase 4: Template Streamlining (Simple template) ✅
  
  Author: Matthew Raymer
  Last Updated: 2025-07-07
-->
<template>
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
    <!-- Breadcrumb -->
    <div id="ViewBreadcrumb" class="mb-8">
      <h1 class="text-lg text-center font-light relative px-7">
        <!-- Cancel -->
        <button
          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
          @click="$router.back()"
        >
          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
        </button>
        Edit Identity
      </h1>
    </div>

    <input
      v-model="givenName"
      type="text"
      placeholder="Name"
      class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
    />

    <div class="mt-8">
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
        <button
          type="button"
          class="block w-full text-center text-lg font-bold uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mb-2"
          @click="onClickSaveChanges()"
        >
          Save Changes
        </button>
        <!-- SHOW ME instead while processing saving changes -->
        <button
          type="button"
          class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mb-2"
          @click="onClickCancel()"
        >
          Cancel
        </button>
      </div>
    </div>
  </section>
</template>

<script lang="ts">
import { Component, Vue } from "vue-facing-decorator";
import { Router } from "vue-router";

import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";

@Component({
  components: {},
  mixins: [PlatformServiceMixin],
})
export default class NewEditAccountView extends Vue {
  $router!: Router;

  /**
   * User's display name for editing
   * Combines firstName and deprecated lastName for backward compatibility
   */
  givenName = "";

  /**
   * Vue lifecycle hook - Initialize component with current account settings
   *
   * Loads the user's current name from account settings and populates
   * the editing field. Handles deprecated lastName field by concatenating
   * with firstName for display purposes.
   *
   * @async
   */
  async created() {
    const settings = await this.$accountSettings();
    this.givenName =
      (settings.firstName || "") +
      (settings.lastName ? ` ${settings.lastName}` : ""); // deprecated, pre v 0.1.3
  }

  /**
   * Save the edited name changes to account settings
   *
   * Updates the user's firstName in account settings with the current
   * givenName value. Clears the deprecated lastName field and navigates
   * back to the previous view upon successful save.
   *
   * @async
   */
  async onClickSaveChanges() {
    await this.$updateSettings({
      firstName: this.givenName,
      lastName: "", // deprecated, pre v 0.1.3
    });
    this.$router.back();
  }

  /**
   * Cancel editing and return to previous view
   *
   * Discards any unsaved changes and navigates back to the
   * previous view without updating account settings.
   */
  onClickCancel() {
    this.$router.back();
  }
}
</script>