add page to show mnemonic seed phrase for backup

src/views/HelpView.vue

@@ -55,12 +55,34 @@
     </h1>
 
     <div>
-      <h2 class="text-xl font-semibold">Introduction</h2>
       <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">How is this app useful?</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 they show came from you. 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 backup all my data?</h2>
       <p>
         There are two parts to backup your data: the identifier secrets and the
@@ -147,19 +169,76 @@
         key.
       </p>
 
+      <h2 class="text-xl font-semibold">
+        How do I get permission to store claims on the server?
+      </h2>
+      <p>
+        Get registered by someone else with the app; they can register you on
+        the Contacts <fa icon="circle-user" class="fa-fw" /> page. There are
+        limits to how many each person can register, so you may have to wait.
+      </p>
+
+      <h2 class="text-xl font-semibold">What do you mean by "claims"?</h2>
+      <p>
+        Certain actions in this app are signed by your private keys, and these
+        are often called "claims". For example, when you give time to a person
+        or project, you sign a claim declaring that you gave that time. When you
+        declare a project, you sign a claim declaring it to the world. When you
+        confirm someone else's claim, you sign a claim of agreement.
+      </p>
+      <p>
+        Some of the data in this app does not involve claims, such as your
+        contact list and your identifier.
+      </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>
-        Sometimes someone else has made claims -- meaning they have given time,
-        or recognized time given, or declared a project -- but you cannot see
-        anything associated with them. The reason may be 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
+        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>