crowd-funder-for-time-pwa/src/views/HelpView.vue

<template>
  <!-- QUICK NAV -->
  <nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200 z-50">
    <ul class="flex text-2xl p-2 gap-2">
      <!-- Home Feed -->
      <li class="basis-1/5 rounded-md text-slate-500">
        <router-link :to="{ name: 'home' }" class="block text-center py-3 px-1">
          <fa icon="house-chimney" class="fa-fw"></fa>
        </router-link>
      </li>
      <!-- Search -->
      <li class="basis-1/5 rounded-md text-slate-500">
        <router-link
          :to="{ name: 'discover' }"
          class="block text-center py-3 px-1"
        >
          <fa icon="magnifying-glass" class="fa-fw"></fa>
        </router-link>
      </li>
      <!-- Projects -->
      <li class="basis-1/5 rounded-md text-slate-500">
        <router-link
          :to="{ name: 'projects' }"
          class="block text-center py-3 px-1"
        >
          <fa icon="folder-open" class="fa-fw"></fa>
        </router-link>
      </li>
      <!-- Contacts -->
      <li class="basis-1/5 rounded-md text-slate-500">
        <router-link
          :to="{ name: 'contacts' }"
          class="block text-center py-3 px-1"
        >
          <fa icon="users" class="fa-fw"></fa>
        </router-link>
      </li>
      <!-- Profile -->
      <li class="basis-1/5 rounded-md text-slate-400">
        <router-link
          :to="{ name: 'account' }"
          class="block text-center py-3 px-1"
        >
          <fa icon="circle-user" class="fa-fw"></fa>
        </router-link>
      </li>
    </ul>
  </nav>

  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24">
    <!-- Heading -->
    <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
      Help
    </h1>

    <div>
      <p>
        This app is a window into data that you and your friends own, focused on
        gifts and collaboration.
      </p>

      <h2 class="text-xl font-semibold">What is the philosophy here?</h2>
      <p>
        We are building networks of people who want to grow a gifting society.
        First of all, you can record ways you've seen people give, and that
        leaves a permanent record -- one that came from you, and the recipient
        can prove it was for them. This is personally gratifying, but it extends
        to broader work: volunteers can get confirmation of activity and
        selectively show off their contributions and network.
      </p>
      <p>
        You can also record projects and plans and invite others to collaborate.
        Soon you'll be able to see when others are interested and see how much
        they're willing to contribute, even if there are conditions.
      </p>
      <p>
        This app uses the power of cryptography to build a reputation, recording
        activity that you can share at your discretion. You put some activity
        public, but your sensitive information is not shared with anyone,
        including our services. This is in contrast to Meta and Google, who hold
        your data and allow you use it. Those services are useful, but they have
        the control; this app gives you the control.
      </p>

      <h2 class="text-xl font-semibold">How do I take my first action?</h2>
      <p>
        You need someone to register you -- usually the person who told you
        about this app, on the Contacts
        <fa icon="circle-user" class="fa-fw" /> page. After they register you,
        and after you have contacts, you can select any contact on the home page
        and record your appreciation for... whatever. That is a claim recorded
        on a custom ledger. The day after being registered, you'll be able to
        register others; later, you can create projects, too.
      </p>
      <p>
        Note that there are limits to how many each person can register, so you
        may have to wait.
      </p>

      <h2 class="text-xl font-semibold">How do I backup all my data?</h2>
      <p>
        There are two sets of data to backup: the identifier secrets and the
        other data that isn't quite a secret such as settings, contacts, etc.
      </p>

      <div class="px-4">
        <h2 class="text-xl font-semibold">
          How do I backup my identifier (secret) data?
        </h2>
        <ul class="list-disc list-inside">
          <li>
            Go to Your Identity <fa icon="circle-user" class="fa-fw" /> page.
          </li>
          <li>
            Click on "Backup Identifier Seed" and follow the instructions.
          </li>
          <li>
            If you have other identifiers, switch to each one and repeat those
            steps.
          </li>
        </ul>

        <h2 class="text-xl font-semibold">
          How do I backup my other (non-identifier-secret) data?
        </h2>
        <ul class="list-disc list-inside">
          <li>
            Go to Your Identity <fa icon="circle-user" class="fa-fw" /> page.
          </li>
          <li>
            Click on "Download Settings...". That will save a file to your
            downloads folder. That is your backup, so put it someplace where you
            won't lose it.
          </li>
        </ul>
      </div>

      <h2 class="text-xl font-semibold">How do I restore my data?</h2>
      <p>
        There are two parts to restore your data: the identity secrets and the
        other data such as settings, contacts, etc.
      </p>

      <div class="px-4">
        <h2 class="text-xl font-semibold">
          How do I restore my identifier (secret) data?
        </h2>
        <ul class="list-disc list-inside">
          <li>
            <router-link class="text-blue-500" to="/import-account">
              Go to the import page
            </router-link>
            and enter the seed phrase you backed up.
          </li>
        </ul>

        <h2 class="text-xl font-semibold">
          How do I restore my other (non-identifier-secret) data?
        </h2>
        <ul class="list-disc list-inside">
          <li>Make sure you have your backup file (above), then contact us.</li>
        </ul>
      </div>

      <h2 class="text-xl font-semibold">
        How do I add someone to my contacts?
      </h2>
      <p>
        Tell them to copy their ID, which typically starts with "did:ethr:...",
        and send it to you. Go to the Contacts
        <fa icon="circle-user" class="fa-fw" /> page and enter that into the top
        form. You may add a name by adding a comma followed by their name; you
        may also add their public key by adding another comma followed by the
        key.
      </p>

      <h2 class="text-xl font-semibold">
        I know there is a record from someone, so why can't I see that info?
      </h2>
      <p>
        If you don't see anything associated with a person, this is typically
        because they have not given you permission to see their information. Ask
        them to add you to their contact list and make sure the eye next to your
        name is open like this
        <fa icon="eye" class="fa-fw" /> and not closed like this
        <fa icon="eye-slash" class="fa-fw" />.
      </p>
      <p>
        Sometimes the reason you don't see something is because the search time
        is limited. Go to the bottom and make sure to load all the data on a
        list. If you still don't see it, try a search or view on a different
        page.
      </p>

      <h2 class="text-xl font-semibold">How do I create another identity?</h2>
      <p>
        Go
        <router-link to="import-account" class="text-blue-500">
          import another mnemonic here.
        </router-link>
      </p>

      <h2 class="text-xl font-semibold">What is your privacy policy?</h2>
      <p>
        See
        <a href="https://endorser.ch/privacy-policy" class="text-blue-500">
          the Endorser Service Privacy Policy.
        </a>
      </p>

      <h2 class="text-xl font-semibold">What app version is this?</h2>
      <p>
        {{ package.version }}
      </p>
    </div>
  </section>
</template>

<script lang="ts">
import * as Package from "../../package.json";
import { Component, Vue } from "vue-facing-decorator";

@Component
export default class Help extends Vue {
  package = Package;
}
</script>