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 && !isEditing" class="mt-8 p-4 border rounded-lg bg-white shadow">
      <h2 class="text-2xl mb-4">Current Meeting</h2>
      <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-sm text-gray-600">Share the password with the people you want to onboard.</p>
          <router-link
            :to="`/onboard-meeting-members/${currentMeeting.groupId}?password=${encodeURIComponent(currentMeeting.password)}`"
            class="mt-4 inline-block px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors duration-200"
          >
            Go to Meeting Members
          </router-link>
        </div>
        <span v-else class="text-sm text-red-600">
          The meeting password has been lost. Edit it, or delete and create a new meeting.
        </span>
      </div>
      <div class="flex justify-between mt-4 space-x-2">
        <button
          @click="startEditing"
          class="flex items-center justify-center w-10 h-10 rounded-full bg-blue-100 hover:bg-blue-200 transition-colors duration-200"
          title="Edit Meeting"
        >
          <fa icon="pen" class="fa-fw text-blue-600" />
          <span class="sr-only">Edit Meeting</span>
        </button>
        <button
          @click="confirmDelete"
          class="flex items-center justify-center w-10 h-10 rounded-full bg-red-100 hover:bg-red-200 transition-colors duration-200"
          :disabled="isDeleting"
          :class="{ 'opacity-50 cursor-not-allowed': isDeleting }"
          title="Delete Meeting"
        >
          <fa icon="trash-can" class="fa-fw text-red-600" />
          <span class="sr-only">{{ isDeleting ? 'Deleting...' : 'Delete Meeting' }}</span>
        </button>
      </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 && newOrUpdatedMeeting != null" class="mt-8">
      <h2 class="text-2xl mb-4">{{ isEditing ? 'Edit Meeting' : 'Create New Meeting' }}</h2>
      <!-- This is my first form. Not sure whether I like it or not; gotta see if the browser benefits extend to the native app. -->
      <form @submit.prevent="isEditing ? updateMeeting() : createMeeting()" 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 ? (isEditing ? 'Updating...' : 'Creating...') : (isEditing ? 'Update Meeting' : 'Create Meeting') }}
        </button>
        <button
          v-if="isEditing"
          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>

    <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 { logConsoleAndDb, retrieveSettingsForActiveAccount } from '@/db/index';
import { errorStringForLog, getHeaders, serverMessageForUser } from '@/libs/endorserServer';
import { encryptMessage } from '@/libs/crypto';

interface ServerMeeting {
  groupId: string;   // 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,
  },
})
export default class OnboardMeetingView extends Vue {
  $notify!: (notification: { group: string; type: string; title: string; text: string }, timeout?: number) => void;

  currentMeeting: ServerMeeting | null = null;
  newOrUpdatedMeeting: MeetingSetupInfo | null = null;
  activeDid = '';
  apiServer = '';
  isDeleting = false;
  isEditing = 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;
  }

  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 || "",
    };
  }

  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) {
        console.log('Response data', response.data.data);
        this.currentMeeting = {
          ...response.data.data,
          userFullName: this.fullName,
          password: this.currentMeeting?.password || "",
        };
        console.log('Current meeting', this.currentMeeting);
      } 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() {
    this.isEditing = true;
    // Populate form with existing meeting data
    if (this.currentMeeting) {
      console.log('Current meeting', 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() {
    this.isEditing = false;
    // 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) {
        console.log('Updated meeting', response.data);
        // Update the current meeting with only the necessary fields
        this.currentMeeting = {
          ...this.newOrUpdatedMeeting,
          groupId: this.currentMeeting?.groupId || "",
        };
        this.newOrUpdatedMeeting = null;
        console.log('Updated meeting now', this.currentMeeting);
        this.isEditing = false;
      } 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;
    }
  }
}
</script>