crowd-funder-for-time-pwa/src/components/UserNameDialog.vue

<!-- similar to ContactNameDialog -->
<template>
  <div v-if="visible" class="dialog-overlay">
    <div class="dialog">
      <h1 class="text-xl font-bold text-center mb-4">Set Your Name</h1>

      {{ sharingExplanation }}
      <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="saveButtonClasses"
            @click="onClickSaveChanges()"
          >
            Save
          </button>
          <button
            type="button"
            :class="cancelButtonClasses"
            @click="onClickCancel()"
          >
            Cancel
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

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

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

/**
 * UserNameDialog Component
 *
 * A dialog component for setting the user's first name in their account settings.
 * Provides a simple form interface with save and cancel functionality.
 *
 * Features:
 * - Name input with validation
 * - Settings persistence via PlatformServiceMixin
 * - Responsive button layout
 * - Callback support for parent components
 *
 * Props:
 * - sharingExplanation: Custom text explaining data sharing policy
 * - callbackOnCancel: Whether to trigger callback on cancel
 *
 * Methods:
 * - open(): Opens dialog and loads current name from settings
 * - onClickSaveChanges(): Saves name to settings and closes dialog
 * - onClickCancel(): Closes dialog without saving
 *
 * @author Matthew Raymer
 * @since 2025-07-21
 */
@Component({
  mixins: [PlatformServiceMixin],
})
export default class UserNameDialog extends Vue {
  @Prop({
    default:
      "This is not sent to servers. It is only shared with people when you send it to them.",
  })
  sharingExplanation!: string;
  @Prop({ default: false }) callbackOnCancel!: boolean;

  callback: (name?: string) => void = () => {};
  givenName = "";
  visible = false;

  /**
   * Opens the dialog and loads the current user's first name from settings
   * @param aCallback - Optional callback function for name, which may be empty string
   */
  async open(aCallback?: (name?: string) => void) {
    this.callback = aCallback || this.callback;
    const settings = await this.$settings();
    this.givenName = settings.firstName || "";
    this.visible = true;
  }

  /**
   * Saves the entered name to user settings and closes the dialog
   * Uses PlatformServiceMixin for database operations
   */
  async onClickSaveChanges() {
    try {
      await this.$updateSettings({ firstName: this.givenName });
      this.visible = false;
      this.callback(this.givenName);
    } catch (error) {
      this.$logAndConsole(`Error updating user name: ${error}`, true);
      // Could add error notification here if needed
    }
  }

  /**
   * Closes the dialog without saving changes
   * Optionally triggers callback based on callbackOnCancel prop
   */
  onClickCancel() {
    this.visible = false;
    if (this.callbackOnCancel) {
      this.callback();
    }
  }

  // ===== COMPUTED PROPERTIES =====

  /**
   * CSS classes for the Save button
   * Extracted from template for reusability and maintainability
   */
  get saveButtonClasses(): string {
    return "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";
  }

  /**
   * CSS classes for the Cancel button
   * Extracted from template for reusability and maintainability
   */
  get cancelButtonClasses(): string {
    return "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";
  }
}
</script>

<style>
.dialog-overlay {
  z-index: 50;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.5rem;
}

.dialog {
  background-color: white;
  padding: 1rem;
  border-radius: 0.5rem;
  width: 100%;
  max-width: 500px;
}
</style>