crowd-funder-from-jason/src/views/OnboardMeetingSetupView.vue

<template>
  <QuickNav selected="Contacts" />
  <TopMessage />

  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
    <!-- Heading -->
    <h1 id="ViewHeading" class="text-4xl text-center font-light">
      Onboarding Meeting
    </h1>

    <!-- Existing Meeting Section -->
    <div
      v-if="!isLoading && currentMeeting != null && !isInEditOrCreateMode()"
      class="mt-8 p-4 border rounded-lg bg-white shadow"
    >
      <div class="flex items-center justify-between mb-4">
        <div class="flex items-center">
          <h2 class="text-2xl">Current Meeting</h2>
          <button
            @click="startEditing"
            class="mb-4 text-blue-600 hover:text-blue-800 transition-colors duration-200 ml-2"
            title="Edit Meeting"
          >
            <fa icon="pen" class="fa-fw" />
            <span class="sr-only">{{
              isInCreateMode() ? "Create Meeting" : "Edit Meeting"
            }}</span>
          </button>
        </div>
        <button
          @click="confirmDelete"
          class="text-red-600 hover:text-red-800 transition-colors duration-200"
          :disabled="isDeleting"
          :class="{ 'opacity-50 cursor-not-allowed': isDeleting }"
          title="Delete Meeting"
        >
          <fa icon="trash-can" class="fa-fw" />
          <span class="sr-only">{{
            isDeleting ? "Deleting..." : "Delete Meeting"
          }}</span>
        </button>
      </div>
      <div class="space-y-2">
        <p><strong>Name:</strong> {{ currentMeeting.name }}</p>
        <p>
          <strong>Expires:</strong>
          {{ formatExpirationTime(currentMeeting.expiresAt) }}
        </p>

        <div v-if="currentMeeting.password" class="mt-4">
          <p class="text-gray-600">
            Share the password with the people you want to onboard.
          </p>
        </div>
        <div v-else class="text-red-600">
          Your copy of the password is not saved. Edit the meeting, or delete it
          and create a new meeting.
        </div>
      </div>
    </div>

    <!-- Delete Confirmation Dialog -->
    <div
      v-if="showDeleteConfirm"
      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4"
    >
      <div class="bg-white rounded-lg p-6 max-w-sm w-full">
        <h3 class="text-lg font-medium mb-4">Delete Meeting?</h3>
        <p class="text-gray-600 mb-6">
          This action cannot be undone. Are you sure you want to delete this
          meeting?
        </p>
        <div class="flex justify-between space-x-4">
          <button
            @click="showDeleteConfirm = false"
            class="px-4 py-2 bg-slate-500 text-white rounded hover:bg-slate-700"
          >
            Cancel
          </button>
          <button
            @click="deleteMeeting"
            class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
          >
            Delete
          </button>
        </div>
      </div>
    </div>

    <!-- Create/Edit Meeting Form -->
    <div
      v-if="
        !isLoading &&
        isInEditOrCreateMode() &&
        newOrUpdatedMeeting != null /* duplicate check is for typechecks */
      "
      class="mt-8"
    >
      <h2 class="text-2xl mb-4">
        {{ isInCreateMode() ? "Create New Meeting" : "Edit Meeting" }}
      </h2>
      <!-- This is my first form. Not sure if I like it; will see if the browser benefits extend to the native app. -->
      <form
        @submit.prevent="isInCreateMode() ? createMeeting() : updateMeeting()"
        class="space-y-4"
      >
        <div>
          <label
            for="meetingName"
            class="block text-sm font-medium text-gray-700"
            >Meeting Name</label
          >
          <input
            id="meetingName"
            v-model="newOrUpdatedMeeting.name"
            type="text"
            required
            class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none"
            placeholder="Enter meeting name"
          />
        </div>

        <div>
          <label
            for="expirationTime"
            class="block text-sm font-medium text-gray-700"
            >Meeting Expiration Time</label
          >
          <input
            id="expirationTime"
            v-model="newOrUpdatedMeeting.expiresAt"
            type="datetime-local"
            required
            :min="minDateTime"
            class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none"
          />
        </div>

        <div>
          <label for="password" class="block text-sm font-medium text-gray-700"
            >Meeting Password</label
          >
          <input
            id="password"
            v-model="newOrUpdatedMeeting.password"
            type="text"
            required
            class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none"
            placeholder="Enter meeting password"
          />
        </div>

        <div>
          <label for="userName" class="block text-sm font-medium text-gray-700"
            >Your Name</label
          >
          <input
            id="userName"
            v-model="newOrUpdatedMeeting.userFullName"
            type="text"
            required
            class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none"
            placeholder="Your name"
          />
        </div>

        <button
          type="submit"
          class="w-full bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md hover:from-green-500 hover:to-green-800"
          :disabled="isLoading"
        >
          {{
            isLoading
              ? isInCreateMode()
                ? "Creating..."
                : "Updating..."
              : isInCreateMode()
                ? "Create Meeting"
                : "Update Meeting"
          }}
        </button>
        <button
          v-if="isInEditOrCreateMode()"
          type="button"
          @click="cancelEditing"
          class="w-full bg-slate-500 text-white px-4 py-2 rounded-md hover:bg-slate-600"
        >
          Cancel
        </button>
      </form>
    </div>

    <!-- Members Section -->
    <div
      v-if="!isLoading && currentMeeting != null"
      class="mt-8 p-4 border rounded-lg bg-white shadow"
    >
      <div class="flex items-center justify-between mb-4">
        <h2 class="text-2xl">Meeting Members</h2>
      </div>
      <router-link
        :to="onboardMeetingMembersLink()"
        class="inline-block text-blue-600"
        target="_blank"
      >
        Open shortcut page for members <fa icon="external-link" />
      </router-link>

      <MembersList
        :password="currentMeeting.password || ''"
        :decrypt-failure-message="DECRYPT_FAILURE_MESSAGE"
        :show-organizer-tools="true"
        @error="handleMembersError"
        class="mt-4"
      />
    </div>

    <div v-else-if="isLoading">
      <div class="flex justify-center items-center h-full">
        <fa icon="spinner" class="fa-spin-pulse" />
      </div>
    </div>
  </section>
</template>

<script lang="ts">
import { Component, Vue } from "vue-facing-decorator";
import QuickNav from "@/components/QuickNav.vue";
import TopMessage from "@/components/TopMessage.vue";
import MembersList from "@/components/MembersList.vue";
import { logConsoleAndDb, retrieveSettingsForActiveAccount } from "@/db/index";
import {
  errorStringForLog,
  getHeaders,
  serverMessageForUser,
} from "@/libs/endorserServer";
import { encryptMessage } from "@/libs/crypto";

interface ServerMeeting {
  groupId: number; // from the server
  name: string; // from the server
  expiresAt: string; // from the server
  userFullName?: string; // from the user's session
  password?: string; // from the user's session
}

interface MeetingSetupInfo {
  name: string;
  expiresAt: string;
  userFullName: string;
  password: string;
}

@Component({
  components: {
    QuickNav,
    TopMessage,
    MembersList,
  },
})
export default class OnboardMeetingView extends Vue {
  $notify!: (
    notification: { group: string; type: string; title: string; text: string },
    timeout?: number,
  ) => void;

  DECRYPT_FAILURE_MESSAGE =
    "Unable to decrypt some member information. Check your password, or have them reset theirs if they don't show here.";

  currentMeeting: ServerMeeting | null = null;
  newOrUpdatedMeeting: MeetingSetupInfo | null = null;
  activeDid = "";
  apiServer = "";
  isDeleting = false;
  isLoading = true;
  showDeleteConfirm = false;
  fullName = "";
  get minDateTime() {
    const now = new Date();
    now.setMinutes(now.getMinutes() + 5); // Set minimum 5 minutes in the future
    return this.formatDateForInput(now);
  }

  async created() {
    const settings = await retrieveSettingsForActiveAccount();
    this.activeDid = settings.activeDid || "";
    this.apiServer = settings.apiServer || "";
    this.fullName = settings.firstName || "";

    await this.fetchCurrentMeeting();
    this.isLoading = false;
  }

  isInCreateMode(): boolean {
    return this.newOrUpdatedMeeting != null && this.currentMeeting == null;
  }

  isInEditOrCreateMode(): boolean {
    return this.newOrUpdatedMeeting != null;
  }

  getDefaultExpirationTime(): string {
    const date = new Date();
    // Round up to the next hour
    date.setMinutes(0);
    date.setSeconds(0);
    date.setMilliseconds(0);
    date.setHours(date.getHours() + 1); // Round up to next hour
    date.setHours(date.getHours() + 2); // Add 2 more hours
    return this.formatDateForInput(date);
  }

  // Format a date object to YYYY-MM-DDTHH:mm format for datetime-local input
  private formatDateForInput(date: Date): string {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, "0");
    const day = String(date.getDate()).padStart(2, "0");
    const hours = String(date.getHours()).padStart(2, "0");
    const minutes = String(date.getMinutes()).padStart(2, "0");

    return `${year}-${month}-${day}T${hours}:${minutes}`;
  }

  blankMeeting(): MeetingSetupInfo {
    return {
      // no groupId yet
      name: "",
      expiresAt: this.getDefaultExpirationTime(),
      userFullName: this.fullName,
      password: (this.currentMeeting?.password as string) || "",
    };
  }

  async fetchCurrentMeeting() {
    try {
      const headers = await getHeaders(this.activeDid);
      const response = await this.axios.get(
        this.apiServer + "/api/partner/groupOnboard",
        { headers },
      );

      if (response?.data?.data) {
        this.currentMeeting = {
          ...response.data.data,
          userFullName: this.fullName,
          password: this.currentMeeting?.password || "",
        };
      } else {
        // no meeting found
        this.newOrUpdatedMeeting = this.blankMeeting();
      }
    } catch (error) {
      // no meeting found
      this.newOrUpdatedMeeting = this.blankMeeting();
    }
  }

  async createMeeting() {
    this.isLoading = true;

    try {
      if (!this.newOrUpdatedMeeting) {
        throw Error(
          "There was no meeting data to create. We should never get here.",
        );
      }

      // Convert local time to UTC for comparison and server submission
      const localExpiresAt = new Date(this.newOrUpdatedMeeting.expiresAt);
      const now = new Date();
      if (localExpiresAt <= now) {
        this.$notify(
          {
            group: "alert",
            type: "warning",
            title: "Invalid Time",
            text: "Select a future time for the meeting expiration.",
          },
          5000,
        );
        return;
      }
      if (!this.newOrUpdatedMeeting.userFullName) {
        this.$notify(
          {
            group: "alert",
            type: "warning",
            title: "Invalid Name",
            text: "Please enter your name.",
          },
          5000,
        );
        return;
      }
      if (!this.newOrUpdatedMeeting.password) {
        this.$notify(
          {
            group: "alert",
            type: "warning",
            title: "Invalid Password",
            text: "Please enter a password.",
          },
          5000,
        );
        return;
      }

      // create content with user's name and DID encrypted with password
      const content = {
        name: this.newOrUpdatedMeeting.userFullName,
        did: this.activeDid,
      };
      const encryptedContent = await encryptMessage(
        JSON.stringify(content),
        this.newOrUpdatedMeeting.password,
      );

      const headers = await getHeaders(this.activeDid);
      const response = await this.axios.post(
        this.apiServer + "/api/partner/groupOnboard",
        {
          name: this.newOrUpdatedMeeting.name,
          expiresAt: localExpiresAt.toISOString(),
          content: encryptedContent,
        },
        { headers },
      );

      if (response.data && response.data.success) {
        this.currentMeeting = {
          ...this.newOrUpdatedMeeting,
          groupId: response.data.success.groupId,
        };

        this.newOrUpdatedMeeting = null;
        this.$notify(
          {
            group: "alert",
            type: "success",
            title: "Success",
            text: "Meeting created.",
          },
          3000,
        );
      } else {
        throw { response: response };
      }
    } catch (error) {
      logConsoleAndDb(
        "Error creating meeting: " + errorStringForLog(error),
        true,
      );
      const errorMessage = serverMessageForUser(error);
      this.$notify(
        {
          group: "alert",
          type: "danger",
          title: "Error",
          text:
            errorMessage ||
            "Failed to create meeting. Try reloading or submitting again.",
        },
        5000,
      );
    } finally {
      this.isLoading = false;
    }
  }

  formatExpirationTime(expiresAt: string): string {
    const expiration = new Date(expiresAt); // Server time is in UTC
    const now = new Date();
    const diffHours = Math.round(
      (expiration.getTime() - now.getTime()) / (1000 * 60 * 60),
    );

    if (diffHours < 0) {
      return "Expired";
    } else if (diffHours < 1) {
      return "Less than an hour";
    } else if (diffHours === 1) {
      return "1 hour";
    } else {
      return `${diffHours} hours`;
    }
  }

  confirmDelete() {
    this.showDeleteConfirm = true;
  }

  async deleteMeeting() {
    this.isDeleting = true;
    try {
      const headers = await getHeaders(this.activeDid);
      await this.axios.delete(this.apiServer + "/api/partner/groupOnboard", {
        headers,
      });

      this.currentMeeting = null;
      this.newOrUpdatedMeeting = this.blankMeeting();
      this.showDeleteConfirm = false;

      this.$notify(
        {
          group: "alert",
          type: "success",
          title: "Success",
          text: "Meeting deleted successfully.",
        },
        3000,
      );
    } catch (error) {
      console.error("Error deleting meeting:", error);
      this.$notify(
        {
          group: "alert",
          type: "danger",
          title: "Error",
          text: serverMessageForUser(error) || "Failed to delete meeting.",
        },
        5000,
      );
    } finally {
      this.isDeleting = false;
    }
  }

  startEditing() {
    // Populate form with existing meeting data
    if (this.currentMeeting) {
      const localExpiresAt = new Date(this.currentMeeting.expiresAt);
      this.newOrUpdatedMeeting = {
        name: this.currentMeeting.name,
        expiresAt: this.formatDateForInput(localExpiresAt),
        userFullName: this.currentMeeting.userFullName || "",
        password: this.currentMeeting.password || "",
      };
    } else {
      console.error(
        "There is no current meeting to edit. We should never get here.",
      );
    }
  }

  cancelEditing() {
    // Reset form data
    this.newOrUpdatedMeeting = null;
  }

  async updateMeeting() {
    this.isLoading = true;
    if (!this.newOrUpdatedMeeting) {
      throw Error("There was no meeting data to update.");
    }

    try {
      // Convert local time to UTC for comparison and server submission
      const localExpiresAt = new Date(this.newOrUpdatedMeeting.expiresAt);
      const now = new Date();
      if (localExpiresAt <= now) {
        this.$notify(
          {
            group: "alert",
            type: "warning",
            title: "Invalid Time",
            text: "Select a future time for the meeting expiration.",
          },
          5000,
        );
        return;
      }
      if (!this.newOrUpdatedMeeting.userFullName) {
        this.$notify(
          {
            group: "alert",
            type: "warning",
            title: "Invalid Name",
            text: "Please enter your name.",
          },
          5000,
        );
        return;
      }
      if (!this.newOrUpdatedMeeting.password) {
        this.$notify(
          {
            group: "alert",
            type: "warning",
            title: "Invalid Password",
            text: "Please enter a password.",
          },
          5000,
        );
        return;
      }
      // create content with user's name and DID encrypted with password
      const content = {
        name: this.newOrUpdatedMeeting.userFullName,
        did: this.activeDid,
      };
      const encryptedContent = await encryptMessage(
        JSON.stringify(content),
        this.newOrUpdatedMeeting.password,
      );

      const headers = await getHeaders(this.activeDid);
      const response = await this.axios.put(
        this.apiServer + "/api/partner/groupOnboard",
        {
          // the groupId is in the currentMeeting but it's not necessary while users only have one meeting
          name: this.newOrUpdatedMeeting.name,
          expiresAt: localExpiresAt.toISOString(),
          content: encryptedContent,
        },
        { headers },
      );

      if (response.data && response.data.success) {
        // Update the current meeting with only the necessary fields
        this.currentMeeting = {
          ...this.newOrUpdatedMeeting,
          groupId: (this.currentMeeting?.groupId as number) || -1,
        };
        this.newOrUpdatedMeeting = null;
      } else {
        throw { response: response };
      }
    } catch (error) {
      logConsoleAndDb(
        "Error updating meeting: " + errorStringForLog(error),
        true,
      );
      const errorMessage = serverMessageForUser(error);
      this.$notify(
        {
          group: "alert",
          type: "danger",
          title: "Error",
          text:
            errorMessage ||
            "Failed to update meeting. Try reloading or submitting again.",
        },
        5000,
      );
    } finally {
      this.isLoading = false;
    }
  }

  onboardMeetingMembersLink(): string {
    if (this.currentMeeting) {
      return `/onboard-meeting-members/${this.currentMeeting?.groupId}?password=${encodeURIComponent(
        this.currentMeeting?.password || "",
      )}`;
    }
    return "";
  }

  handleMembersError(message: string) {
    this.$notify(
      {
        group: "alert",
        type: "danger",
        title: "Error",
        text: message,
      },
      5000,
    );
  }
}
</script>