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

<template>
  <QuickNav />

  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
    <!-- Breadcrumb -->
    <div class="mb-8">
      <!-- Back -->
      <div class="text-lg text-center font-light relative px-7">
        <h1
          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
          @click="$router.back()"
        >
          <fa icon="chevron-left" class="fa-fw"></fa>
        </h1>
      </div>

      <!-- Heading -->
      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
        Help
      </h1>
    </div>

    <!-- eslint-disable prettier/prettier -->
    <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 idea here?</h2>
      <p>
        We are building networks of people who want to grow a giving society.
        First of all, you can see what people have given, and also recognize
        gifts you've seen, in a way 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 get
        confirmation of activity, and selectively show off their contributions
        and network.
      </p>
      <p>
        You can show giving and also offer help to ideas, based on others'
        willingness to help out, too. You can record your own ideas and invite
        others to collaborate.
      </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 get started?</h2>
      <p>
        You need someone to register you -- usually the person who told you
        about this app, on the Contacts
        <fa icon="users" class="fa-fw" /> page. After they register you, you can
        select any contact on the home page (or "anonymous") and record your
        appreciation for... whatever. The main goal is to record what people
        have given you, to grow giving economies. Each claim is recorded on a
        custom ledger. The day after being registered, you'll be able to able to
        register others; later, you can create projects, too.
      </p>
      <p>
        Note that there are rate limits to how many others you can register,
        so it may take some time to register everyone you want. Take your time...
        make it an opportunity to get to know their projects, and show your own.
      </p>

      <h2 class="text-xl font-semibold">
        I had an identifier, but I reinstalled and I got a new one automatically.
        How do I restore my old one?
      </h2>
      <p>
        Go to the page
        <router-link class="text-blue-500" to="/import-account">import your identifier</router-link>.
        If you don't want the old one, click "Advanced" and check the box to erase it.
        (The erase option only shows if you have exactly one identifier.
         For more in-depth surgery, you'll have to erase data from the browser or reinstall.)
      </p>

      <h2 class="text-xl font-semibold">How do I add someone else?</h2>
      <p>
        <button class="text-blue-500" @click="showOnboardInfo">
          Click here to show an alert with the steps.
        </button>
        To start scanning, go
        <router-link class="text-blue-500" to="/contact-qr">here.</router-link>
      </p>
      <p>
        If they are not nearby to scan QR codes, tell them to copy their ID from
        their Identity <fa icon="circle-user" class="fa-fw" /> page, which
        typically starts with "did:ethr:...", and send it to you. Go to the
        Contacts <fa icon="users" class="fa-fw" /> page and enter that into the
        top form. To add a name, put a comma and then their name; to add their
        public key, put another comma followed by the key.
      </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-outside ml-4">
          <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-outside ml-4">
          <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-outside ml-4">
          <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-outside ml-4">
          <li>
            Go to Your Identity <fa icon="circle-user" class="fa-fw" /> page,
            click Advanced, and follow the instructions for Data Import.
          </li>
        </ul>
      </div>

      <h2 class="text-xl font-semibold">How do I create another identity?</h2>
      <p>
        Before doing this, note that it is an advanced feature that affects
        functionality (eg. the words "Alt ID" next to results, backup features)
        so beware. You can
        <router-link to="start" class="text-blue-500">
          create another identity here.
        </router-link>
      </p>

      <h2 class="text-xl font-semibold">How do I erase my data?</h2>
      <p>
        Before doing this, note the two kinds of data to backup: identity data,
        and other data for contacts and settings (see instructions above).
      </p>
      <ul>
        <li class="list-disc list-outside ml-4">
          Mobile
          <ul>
            <li class="list-disc list-outside ml-4">
              Chrome: Settings -> Privacy and Security -> Clear Browsing Data
            </li>
            <li class="list-disc list-outside ml-4">
              DuckDuckGo: long hold -> Clear Data (takes effect immediately)
            </li>
          </ul>
        </li>
        <li class="list-disc list-outside ml-4">
          Desktop
          <ul>
            <li class="list-disc list-outside ml-4">
              Chrome:
              <a href="chrome://settings/content/all" class="text-blue-500"
                >clear here</a
              >
              also clear under dev tools Application
            </li>
            <li class="list-disc list-outside ml-4">
              Firefox: <a href="about:preferences">go here</a>, Manage Data,
              find timesafari.app and select, hit Remove Selected, then Save
              Changes
            </li>
            <li class="list-disc list-outside ml-4">
              Safari: Settings -> Privacy -> Manage Website Data, search for
              timesafari.app and select, hit Remove Selected, then Done.
            </li>
          </ul>
        </li>
      </ul>
      <p>To erase your data from our servers, contact us (below).</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
        results are 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">
        Where do I get help with notifications?
      </h2>
      <p>
        <router-link class="text-blue-500" to="/help-notifications"
          >Here.</router-link
        >
      </p>

      <h2 class="text-xl font-semibold">
        How do I get higher limits?
      </h2>
      <p>
        Let's talk. Contact us (below).
      </p>

      <h2 class="text-xl font-semibold">
        How do I access even more functionality?
      </h2>
      <p>
        There is an "Advanced" section at the bottom of the Account
        <fa icon="circle-user" /> page.
      </p>
      <p>
        There is a even more functionality in a mobile app (and more
        documentation) at
        <a href="https://endorser.ch" class="text-blue-500">
          EndorserSearch.com
        </a>
      </p>

      <h2 class="text-xl font-semibold">What are the terms & conditions and the privacy policy?</h2>
      <p style="display:inline; align-items: center">
        This work is marked with
        <a href="http://creativecommons.org/publicdomain/zero/1.0?ref=chooser-v1" target="_blank" rel="license noopener noreferrer">
          <span class="text-blue-500 mr-1">CC0 1.0</span>
          <img
              src="../assets/help/creative-commons-circle.svg"
              alt="CC circle"
              width="20"
              class="display: inline"
          />
          <img
              src="../assets/help/creative-commons-zero.svg"
              alt="CC zero"
              width="20"
              style="display: inline"
          />
        </a>
        <br />
        For notifications, this service stores push token data; that can be revoked at any time
        by disabling notifications on the Account <fa icon="circle-user" class="fa-fw" /> page.
        <br />
        For all other claim data,
        <a href="https://endorser.ch/privacy-policy" class="text-blue-500">
          the Endorser Service has this Privacy Policy.
        </a>
      </p>

      <h2 class="text-xl font-semibold">Where can I read more?</h2>
      <p>
        This is part of the
        <a href="https://livesofgiving.org" class="text-blue-500">
          Lives of Giving
        </a>
        initiative.
      </p>

      <h2 class="text-xl font-semibold">What app version is this?</h2>
      <p>{{ package.version }} ({{ commitHash }})</p>

      <h2 class="text-xl font-semibold">
        For any other questions, including removing your data:
      </h2>
      <p>
        Contact us at
        <a href="mailto:info@TimeSafari.app" class="text-blue-500"
          >info@TimeSafari.app</a
        >
      </p>
    </div>
    <!-- eslint enable -->
  </section>
</template>

<script lang="ts">
import { Component, Vue } from "vue-facing-decorator";

import * as Package from "../../package.json";
import QuickNav from "@/components/QuickNav.vue";
import { ONBOARD_MESSAGE } from "@/libs/util";

interface Notification {
  group: string;
  type: string;
  title: string;
  text: string;
}

@Component({ components: { QuickNav } })
export default class Help extends Vue {
  $notify!: (notification: Notification, timeout?: number) => void;

  package = Package;
  commitHash = process.env.VUE_APP_GIT_HASH;

  showOnboardInfo() {
    this.$notify(
      {
        group: "alert",
        type: "info",
        title: "Onboard Someone",
        text: ONBOARD_MESSAGE,
      },
      -1,
    );
  }
}
</script>