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>