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

/** * @file RegistrationNotice.vue * @description Reusable component for
displaying user registration status and related actions. * Shows registration
notice when user is not registered, with options to show identifier info * or
access advanced options. * * @author Matthew Raymer * @version 1.0.0 * @created
2025-08-21T17:25:28-08:00 */

<template>
  <div
    id="noticeSomeoneMustRegisterYou"
    class="bg-amber-200 text-amber-900 border-amber-500 border-dashed border text-center rounded-md overflow-hidden px-4 py-3 my-4"
  >
    <p class="mb-4">{{ message }}</p>
    <div class="grid grid-cols-1 gap-2 sm:flex sm:justify-center">
      <button
        class="inline-block text-md font-bold 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-4 py-2 rounded-md"
        @click="showNameThenIdDialog"
      >
        Show them {{ passkeysEnabled ? "default" : "your" }} identifier info
      </button>
      <button
        class="inline-block text-md 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-4 py-2 rounded-md"
        @click="openAdvancedOptions"
      >
        See advanced options
      </button>
    </div>
  </div>
  <UserNameDialog ref="userNameDialog" />
  <ChoiceButtonDialog ref="choiceButtonDialog" />
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-facing-decorator";
import { Router } from "vue-router";
import { Capacitor } from "@capacitor/core";
import UserNameDialog from "./UserNameDialog.vue";
import ChoiceButtonDialog from "./ChoiceButtonDialog.vue";

/**
 * RegistrationNotice Component
 *
 * Displays registration status notice and provides actions for unregistered users.
 * Handles all registration-related flows internally without requiring parent component intervention.
 *
 * Template Usage:
 * ```vue
 * <RegistrationNotice
 *   v-if="!isUserRegistered"
 *   :passkeys-enabled="PASSKEYS_ENABLED"
 *   :given-name="givenName"
 *   message="Custom registration message here"
 * />
 * ```
 *
 * Component Dependencies:
 * - UserNameDialog: Dialog for entering user name
 * - ChoiceButtonDialog: Dialog for sharing method selection
 */
@Component({
  name: "RegistrationNotice",
  components: {
    UserNameDialog,
    ChoiceButtonDialog,
  },
})
export default class RegistrationNotice extends Vue {
  $router!: Router;

  /**
   * Whether passkeys are enabled in the application
   */
  @Prop({ required: true })
  passkeysEnabled!: boolean;

  /**
   * User's given name for dialog pre-population
   */
  @Prop({ required: true })
  givenName!: string;

  /**
   * Custom message to display in the registration notice
   * Defaults to "To share, someone must register you."
   */
  @Prop({ default: "To share, someone must register you." })
  message!: string;

  /**
   * Shows name input dialog if needed
   * Handles the full flow internally without requiring parent component intervention
   */
  showNameThenIdDialog() {
    this.openUserNameDialog(() => {
      this.promptForShareMethod();
    });
  }

  /**
   * Opens advanced options page
   * Navigates directly to the start page
   */
  openAdvancedOptions() {
    this.$router.push({ name: "start" });
  }

  /**
   * Shows dialog for sharing method selection
   * Provides options for different sharing scenarios
   */
  promptForShareMethod() {
    (this.$refs.choiceButtonDialog as ChoiceButtonDialog).open({
      title: "How can you share your info?",
      text: "",
      option1Text: "We are in a meeting together",
      option2Text: "We are nearby with cameras",
      option3Text: "We will share some other way",
      onOption1: () => {
        this.$router.push({ name: "onboard-meeting-list" });
      },
      onOption2: () => {
        this.handleQRCodeClick();
      },
      onOption3: () => {
        this.$router.push({ name: "share-my-contact-info" });
      },
    });
  }

  /**
   * Handles QR code sharing based on platform
   * Navigates to appropriate QR code page
   */
  private handleQRCodeClick() {
    if (Capacitor.isNativePlatform()) {
      this.$router.push({ name: "contact-qr-scan-full" });
    } else {
      this.$router.push({ name: "contact-qr" });
    }
  }

  /**
   * Opens the user name dialog if needed
   *
   * @param callback Function to call after name is entered
   */
  openUserNameDialog(callback: () => void) {
    if (!this.givenName) {
      (this.$refs.userNameDialog as UserNameDialog).open(callback);
    } else {
      callback();
    }
  }
}
</script>