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

<template>
  <div
    v-if="isOpen"
    class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
  >
    <div class="bg-white rounded-lg p-6 max-w-2xl w-full mx-4">
      <!-- Header -->
      <div class="flex justify-between items-center mb-4">
        <h2 class="text-xl font-bold capitalize">{{ roleName }} Details</h2>
        <button class="text-gray-500 hover:text-gray-700" @click="close">
          <font-awesome icon="times" />
        </button>
      </div>

      <!-- Content -->
      <!-- This is somewhat similar to ClaimView.vue and ConfirmGiftView.vue -->
      <div class="mb-4">
        <p class="mb-4">
          <span v-if="R.isEmpty(visibleToDids)">
            The {{ roleName }} is not visible to you or any of your contacts.
          </span>
          <span v-else> The {{ roleName }} is not visible to you. </span>
        </p>

        <div v-if="R.isEmpty(visibleToDids)">
          <p class="mt-2">
            You can ask one of your contacts to take a look and see if their
            contacts can see more details. Someone is connected to people closer
            to them; if you don't know who to ask, try the person who registered
            you.
          </p>
        </div>

        <div v-else>
          <p class="mb-2">
            They are visible to some of your contacts. If you'd like an
            introduction, ask them if they'll tell you more.
          </p>

          <div class="ml-4">
            <ul>
              <li
                v-for="(visDid, idx) of visibleToDids"
                :key="idx"
                class="list-disc ml-4 mb-2"
              >
                <div class="text-sm">
                  <span>
                    {{ didInfo(visDid) }}
                    <span v-if="!serverUtil.isEmptyOrHiddenDid(visDid)">
                      <a
                        :href="`/did/${visDid}`"
                        target="_blank"
                        class="text-blue-500"
                      >
                        <font-awesome
                          icon="arrow-up-right-from-square"
                          class="fa-fw"
                        />
                      </a>
                    </span>
                  </span>
                </div>
              </li>
            </ul>
          </div>
        </div>

        <div class="mt-4">
          <span v-if="canShare">
            If you'd like an introduction,
            <a class="text-blue-500" @click="onClickShareClaim()"
              >click here to share the information with them and ask if they'll
              tell you more about the {{ roleName }}.</a
            >
          </span>
          <span v-else>
            If you'd like an introduction,
            <a
              class="text-blue-500"
              @click="copyToClipboard('A link to this page', windowLocation)"
              >click here to copy this page, paste it into a message, and ask if
              they'll tell you more about the {{ roleName }}.</a
            >
          </span>
        </div>
      </div>

      <!-- Footer -->
      <div class="flex justify-end">
        <button
          class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
          @click="close"
        >
          Close
        </button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-facing-decorator";
import * as R from "ramda";
import { useClipboard } from "@vueuse/core";
import { Contact } from "../db/tables/contacts";
import * as serverUtil from "../libs/endorserServer";
import { NotificationIface } from "../constants/app";

@Component
export default class HiddenDidDialog extends Vue {
  $notify!: (notification: NotificationIface, timeout?: number) => void;

  isOpen = false;
  roleName = "";
  visibleToDids: string[] = [];
  allContacts: Array<Contact> = [];
  activeDid = "";
  allMyDids: Array<string> = [];
  canShare = false;
  windowLocation = window.location.href;

  R = R;
  serverUtil = serverUtil;

  created() {
    // When Chrome compatibility is fixed https://developer.mozilla.org/en-US/docs/Web/API/Web_Share_API#api.navigator.canshare
    // then use this truer check: navigator.canShare && navigator.canShare()
    this.canShare = !!navigator.share;
  }

  open(
    roleName: string,
    visibleToDids: string[],
    allContacts: Array<Contact>,
    activeDid: string,
    allMyDids: Array<string>,
  ) {
    this.roleName = roleName;
    this.visibleToDids = visibleToDids;
    this.allContacts = allContacts;
    this.activeDid = activeDid;
    this.allMyDids = allMyDids;
    this.isOpen = true;
  }

  close() {
    this.isOpen = false;
  }

  didInfo(did: string) {
    return serverUtil.didInfo(
      did,
      this.activeDid,
      this.allMyDids,
      this.allContacts,
    );
  }

  copyToClipboard(name: string, text: string) {
    useClipboard()
      .copy(text)
      .then(() => {
        this.$notify(
          {
            group: "alert",
            type: "toast",
            title: "Copied",
            text: (name || "That") + " was copied to the clipboard.",
          },
          2000,
        );
      });
  }

  onClickShareClaim() {
    this.copyToClipboard("A link to this page", this.windowLocation);
    window.navigator.share({
      title: "Help Connect Me",
      text: "I'm trying to find the people who recorded this. Can you help me?",
      url: this.windowLocation,
    });
  }
}
</script>