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" />
        </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 focuses on gifts & gratitude, using them to build cool things together with your network.
      </p>

      <h2 class="text-xl font-semibold">What is the idea here?</h2>
      <p>
        We are building networks of people who want to grow good society from the ground up, using modern
        technology that connects people peer-to-peer.
        First of all, let's showcase gratitude: see what people have given, and recognize
        gifts you've seen. This is done in a way that leaves a permanent record -- one that
        came from you, and one that the recipient can prove it was for them. This can be
        personally gratifying, but it extends to broader work: volunteers get
        confirmation of activity, and they can selectively show off their contributions
        and network.
      </p>
      <p class="mt-2">
        With this, you highlight giving and you also offer help --
        which could be conditional on others' contributions, too.
        You can record your own ideas and invite others to collaborate.
        It's a way to organize & build with the resource that everyone has in equal amounts: time.
      </p>
      <p class="mt-2">
        Note that your personal data is safe: your ID is only shared with those you allow. Neither
        your name nor your contacts' names are shared with anyone -- even our servers --
        though you can explicitly share it with other individuals if you choose.
      </p>

      <h2 class="text-xl font-semibold">I want to know more because...</h2>
      <ul class="list-disc list-outside ml-4">
        <li class="p-2">
          <div @click="showAlpha = !showAlpha" class="text-blue-500">... I'm a member of Alpha chat.</div>
          <div v-if="showAlpha">
            <p>
              This is a project for public benefit. You are invited to add your gratitude
              and propose projects on a distributable ledger.
            </p>
            <p>
              The underlying data is on a merkle tree with each verifiable claim, signature and all.
              The chain includes individual IDs for discovery & visibility, so not all data is distributed -- yet.
              The goal is to eventually distribute the data on people's devices with their chosen network,
              where anyone could host their own chain of provenance if they choose.
              The formats follow standard schemas (eg. schema.org) to encourage interoperability.
              We're currently at the beginning phase where we're trusting the server to keep IDs private.
              It's all open-source, and we expect to have a professional audit someday.
            </p>
            <p>
              A person's network of contacts is similar: the server currently knows some of the links between people
              to allow discovery and visibility. However, even that will be manageable on personal devices someday.
            </p>
            <p>
              There are no tokens to maintain the chain: the purpose is to create software that communities
              and activists can easily join and use. We're betting that this is a case where network
              participants have the motivation to run the software. The protocol is meant to be lightweight enough that
              non-technical people can run it on inexpensive devices they already own. There may be cases for
              MPC or ZKP in the future when they are more widespread and standard,
              but our preference is to engineer as simply as possible with "white-magic" cryptography
              over those "black-magic" functions.
            </p>
            <p>
              Let's make real distributed computing and shared data happen, starting with our own small networks.
            </p>
            <p>
              ... and exemplify the fun along the way.
            </p>
          </div>
        </li>
        <li class="p-2">
          <div @click="showGroup = !showGroup" class="text-blue-500">... I want to find a group I'll enjoy working with.</div>
          <div v-if="showGroup">
            <p>
              This app encourages people to offer small bits of time to one another. It's a way to
              run experiments with other people... tests of working together, which can start small
              and easy but build into cooperation with people who are like-minded and who work well together.
            </p>
            <p>
              Search the projects and place an offer on an interesting one
              -- or create your own project and see who offers to help.
              After your first experiment, you can give and get confirmation about the work, which you might choose
              to show to future contacts.
            </p>
          </div>
        </li>
        <li class="p-2">
          <div @click="showCommunity = !showCommunity" class="text-blue-500">... I want to participate in community projects.</div>
          <div v-if="showCommunity">
            <p>
              These are mostly at the beginning stages, so any of them will appreciate your offers that show interest.
              In fact, your offers can include your preferences, which give the project owners indications of how to proceed.
            </p>
            <p>
              Search through the projects for issues of interest, locally as well as globally.
              If you don't see any projects that interest you, create your own and see what kind of offers you get.
            </p>
          </div>
        </li>
        <li class="p-2">
          <div @click="showVerifiable = !showVerifiable" class="text-blue-500">... I want to build with verifiable, private data.</div>
          <div v-if="showVerifiable">
            <p>
              Make your claims and get others to confirm them. Then you can use the API to pull your copy of all that
              data, both claims from you and claims from others about you. These are hard-and-fast credentials that can
              be shown to others, along with their verifiable time and signature.
            </p>
            <p>
              Furthermore, you can use your network to verify claims by other people, even if they haven't given you
              visibility. First, on the claim screen you can see if the server detects anyone who is a direct link
              between you, so you can reach out to those in-between people for more info. If there isn't anyone
              who is directly in between then you can reach out with a message to your network.
            </p>
            <p>
              This app generated an identifier, based on public & private keys located on your device.
              That ID is only shared with our server and with people you explicitly allow.
              The other information -- like gratitude and contributions and projects --
              are published to a server that protects your ID. (Someday, your devices
              will share directly P2P and not need a server... you can choose your levels
              of discovery and privacy.) What this means is that you are in charge of your
              network, and we provide tools and reporting to help you connect with your network for
              references and reputation.
            </p>
          </div>
        </li>
        <li class="p-2">
          <div @click="showGovernance = !showGovernance" class="text-blue-500">... I want to build governance organically.</div>
          <div v-if="showGovernance">
            <p>
              This requires motivated, dedicated citizens. The good thing is that dedication the primary ingredient;
              add coordination and we can find ways to replace monopolistic systems.
            </p>
            <p>
              Add projects for your main areas of interest, and offer commitments to projects to kick-start some initiatives.
            </p>
            <p>
              One other feature worth emphasizing: you build a history of credentials, ones that are verifiably
              yours. But one other good thing is that you get support from those who confirm your activity.
              You can share this support in a way that others can validate the data for themselves from people
              in their own network. This kind of reputable project and history of performance is good evidence
              for your ability to take responsibility for important initiatives.
            </p>
          </div>
        </li>
        <li class="p-2">
          <div @click="showBasics = !showBasics" class="text-blue-500">... I want to supply life's basics freely.</div>
          <div v-if="showBasics">
            <p>
              This platform is not optimal for balancing needs and resources at this point,
              but we continuously seek out and list
              those kinds of projects. Watch our blog, and watch the project list for words like
              <router-link class="text-blue-500" to="/discover?searchText=sharing">"sharing"</router-link>
              or
              <router-link class="text-blue-500" to="/discover?searchText=basic">"basic"</router-link>
              or
              <router-link class="text-blue-500" to="/discover?searchText=free">"free"</router-link>.
            </p>
          </div>
        </li>
      </ul>

      <h2 class="text-xl font-semibold">How do I get started?</h2>
      <p>
        Someone -- like the person who told you about this app -- needs to register you
        on the Contacts <fa icon="users" class="fa-fw" /> page.
        If you heard about this from our outreach, feel free to contact us (below) for a chat.
        After someone registers you, you can register others.
      </p>
      <p>
        Then you can record your appreciation for... whatever: select any contact on the home page
        (or "Unnamed") and send it. The main goal is to record what people
        have given you, to grow giving economies. You can also record your own
        ideas for projects. Each claim is recorded on a
        custom ledger.
      </p>
      <p>
        The day after being registered, you'll be able to able to register others, too.
        Note that there are limits to how many others you can register.
        Take your time to bring people on... make it an opportunity to get to
        know their projects, and to show off your own.
      </p>

      <h2 class="text-xl font-semibold">How do I add someone else?</h2>
      <p>
        <a href="/help-onboarding" target="_blank" class="text-blue-500">
          Use these instructions.
        </a>
        To start scanning, go to the
        <router-link class="text-blue-500" to="/contact-qr">contact-scanning page.</router-link>
      </p>
      <p>
        If they are not nearby to scan QR codes, you each can tap on the QR code
        and paste it into the text box on the Contacts <fa icon="users" class="fa-fw" /> page.
      </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
        <router-link class="text-blue-500" to="/import-account">import your identifier</router-link>.
      </p>

      <h2 class="text-xl font-semibold">How do I backup all my data?</h2>
      <p>
        There are four sets of data to backup: the identifier secrets;
        the private text data that isn't as sensitive such as settings and contacts;
        the private image for yourself; and the data that you have sent to the public.
      </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 private text data like settings & contacts?
        </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>

        <h2 class="text-xl font-semibold">
          How do I backup my profile image?
        </h2>
        <ul class="list-disc list-outside ml-4">
          <li>
            Go to Your Identity <fa icon="circle-user" class="fa-fw" /> page,
            tap on your image, and save it.
          </li>
        </ul>

        <h2 class="text-xl font-semibold">
          How do I backup other data I've posted?
        </h2>
        <ul class="list-disc list-outside ml-4">
          <li>
            This requires use of the API, so investigate the endpoints
            <a href="https://api.endorser.ch/" target="_blank" class="text-blue-500">here</a>
            (particularly the "claim" endpoints).
          </li>
        </ul>
      </div>

      <h2 class="text-xl font-semibold">How do I restore my data?</h2>
      <p>
        There are two steps to restore your data: the identity secrets, then 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 the Contacts & Settings Database "Import".
            Beware that this will erase your existing contact & settings.
          </li>
        </ul>
      </div>

      <h2 class="text-xl font-semibold">How do I create another identity?</h2>
      <p>
        Before doing this, beware that it is an advanced feature that affects
        functionality (eg. the words "Alt ID" next to results, backup features). 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 from my device?</h2>
      <p>
        Before doing this, you may want to back up your data with the instructions above.
      </p>
      <ul>
        <li class="list-disc list-outside ml-4">
          Mobile
          <ul>
            <li class="list-disc list-outside ml-4">
              Home Screen: hold down on the icon, and choose to delete it
            </li>
            <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:
              Clear at "chrome://settings/content/all" and
              also clear under dev tools Application
            </li>
            <li class="list-disc list-outside ml-4">
              Firefox: Navigate to "about:preferences", 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">
        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" target="_blank" class="text-blue-500">
          EndorserSearch.com
        </a>
      </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 ask specifically to 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">
        My app is misbehaving, like showing me a blank screen or failing to show a feed.
        What can I do?
      </h2>
      <p>
        First, note that clearing the cache will clear all your identity and contact info,
        so we recommend doing other things first (unless you know you have your backups ready).
      </p>
      <ul class="list-disc list-outside ml-4">
        <li>
          Drag down on the screen to refresh it; do that multiple times, because
          it sometimes takes multiple tries for the app to refresh to the current version.
          You can see the version information at the bottom of this page; the best
          way to determine the current version is to open this page in an incognito
          browser window and look at the version there.
        </li>
        <li>
          Close all tabs that have Time Safari open; it can be difficult to find them all,
          and you may have to close all your tabs. In addition, it may be running as an
          installed app, so look for any Time Safari app that may be running outside a browser.
        </li>
        <li>
          There may be a problem with your identity. Go to the Identity
          <fa icon="circle-user" class="fa-fw" /> page, then "Advanced", and "Switch Identifier"
          and you may see helpful info there. If it shows a problem, try adding your identifier again.
        </li>
        <li>
          It can help to reregister the service worker:
          <ul>
            <li>
              In Chrome, open a tab to
              "chrome://serviceworker-internals",
              find "timesafari.app", and click "Unregister".</li>
            <li>
              In Firefox,
              open a tab to "about:serviceworkers",
              find "timesafari.app", and click "Unregister".
            </li>
            <li>
              <a href="https://duckduckgo.com/?q=unregister+service+worker" target="_blank" class="text-blue-500">Search</a>
              for instructions for other browsers.</li>
          </ul>
          Then reload Time Safari.
        </li>
        <li>
          Restart your device.
        </li>
      </ul>
      <p>
        If you still have problems, you can clear the cache (see "erase my data" above)
        and even uninstall and reinstall the app
        -- just be sure to have your backups ready or be
        prepared to restart with a new identity and recreate your network.
        Nobody else has access to your identity or contact information because
        this app is designed to give you full control over your data.
      </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 public domain. If you like rules, reference
        <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" target="_blank" class="text-blue-500">
          the Endorser Service has this Privacy Policy.
        </a>
      </p>

      <h2 class="text-xl font-semibold">How can I contribute?</h2>
      <p>
        If you have skills, contact us below.
        If you have Bitcoin, donate to
        <button
          @click="
            doCopyTwoSecRedo(
              'bc1q90v4ted6cpt63tjfh2lvd5xzfc67sd4g9w8xma',
              () => (showDidCopy = !showDidCopy)
            )
          "
          class="text-blue-500 ml-2"
        >
          bc1q90v4ted6cpt63tjfh2lvd5xzfc67sd4g9w8xma
          <fa v-show="!showDidCopy" icon="copy" class="text-slate-400 fa-fw" />
        </button>
        <span v-show="showDidCopy" class="ml-2 text-sm text-green-500">Copied</span>
        For other donations, contact us.
      </p>

      <h2 class="text-xl font-semibold">Where can I read more?</h2>
      <p>
        This is part of the
        <a href="https://livesofgiving.org" target="_blank" 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">
        I have other questions, like getting a new account or removing all my data from the public ledger.
      </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 { useClipboard } from "@vueuse/core";

import * as Package from "../../package.json";
import QuickNav from "@/components/QuickNav.vue";
import { NotificationIface } from "@/constants/app";

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

  package = Package;
  commitHash = import.meta.env.VITE_GIT_HASH;
  showAlpha = false;
  showBasics = false;
  showCommunity = false;
  showGovernance = false;
  showGroup = false;
  showDidCopy = false;
  showVerifiable = false;

  // call fn, copy text to the clipboard, then redo fn after 2 seconds
  doCopyTwoSecRedo(text: string, fn: () => void) {
    fn();
    useClipboard()
      .copy(text)
      .then(() => setTimeout(fn, 2000));
  }
}
</script>