From 3083bb084a787d602fb0c084bd1239e82ae2811f Mon Sep 17 00:00:00 2001
From: Trent Larson <trent@trentlarson.com>
Date: Tue, 2 Jan 2024 19:16:54 -0700
Subject: [PATCH] add more notification help instructions; remove confusing,
 big name-edit button

---
 project.task.yaml                   |   3 +-
 src/views/AccountViewView.vue       |  15 ++--
 src/views/HelpNotificationsView.vue | 115 +++++++++++++++++++++-------
 3 files changed, 94 insertions(+), 39 deletions(-)

diff --git a/project.task.yaml b/project.task.yaml
index 7921f11c5..b53b87674 100644
--- a/project.task.yaml
+++ b/project.task.yaml
@@ -2,8 +2,7 @@
 tasks:
 
 - 08 notifications :
-  - .2 after turning on notification, don't wait in push server but wait in client for message test (so that users don't have to wait 10 seconds for confirmation for some kind of confirmation)
-  - Make sure instructions note - Local install works after cleared out cache in Chrome
+  - Give them a message during/after "turn on notifications" because it takes a while for the message to show after console says "About to send subscription... "
 
 - fix maskable icon
 - change all list-inside to list-outside
diff --git a/src/views/AccountViewView.vue b/src/views/AccountViewView.vue
index b9a662493..33c09c140 100644
--- a/src/views/AccountViewView.vue
+++ b/src/views/AccountViewView.vue
@@ -72,11 +72,14 @@
     <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4">
       <h2 v-if="givenName" class="text-xl font-semibold mb-2">
         {{ givenName }}
+        <router-link :to="{ name: 'new-edit-account' }">
+          <fa icon="pen" class="text-xs text-blue-500 mb-1"></fa>
+        </router-link>
       </h2>
       <span v-else>
         <router-link
           :to="{ name: 'new-edit-account' }"
-          class="block w-full text-center text-md text-slate-500 uppercase border border-dashed border-slate-400 px-1.5 py-2 rounded-md mb-2"
+          class="block w-full text-center text-md text-blue-500 uppercase border border-dashed border-slate-400 px-1.5 py-2 rounded-md mb-2"
         >
           (Set Your Name)
         </router-link>
@@ -97,14 +100,6 @@
       </div>
     </div>
 
-    <router-link
-      :to="{ name: 'new-edit-account' }"
-      class="block text-center text-lg font-bold uppercase bg-slate-500 text-white px-2 py-3 rounded-md mb-2"
-      v-if="activeDid"
-    >
-      Edit Identity
-    </router-link>
-
     <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-4 mt-8 mb-8">
       <div
         v-if="!notificationMaybeChanged"
@@ -135,7 +130,7 @@
         latest setting.
       </div>
       <router-link class="px-4 text-sm text-blue-500" to="/help-notifications">
-        Test your notification setup.
+        Troubleshoot your notification setup.
       </router-link>
     </div>
 
diff --git a/src/views/HelpNotificationsView.vue b/src/views/HelpNotificationsView.vue
index 8a3fe3ff5..3790ef1e0 100644
--- a/src/views/HelpNotificationsView.vue
+++ b/src/views/HelpNotificationsView.vue
@@ -24,7 +24,7 @@
     <div>
       <p>Here are ways to test notifications and get them working.</p>
 
-      <h2 class="text-xl font-semibold">Full Test</h2>
+      <h2 class="text-xl font-semibold mt-4">Full Test</h2>
       <div>
         <p>
           If this works then you're all set.
@@ -38,16 +38,16 @@
         </p>
       </div>
 
-      <h2 class="text-xl font-semibold">
+      <h2 class="text-xl font-semibold mt-4">
         If this is not installed as an app...
         <!-- Note that that exact verbiage shows in a message elsewhere. -->
       </h2>
       <div>
         <p>
           For best results on mobile, install this app on your device (as
-          opposed to using it inside the broser app). In Chrome, it may prompt
+          opposed to using it inside the browser app). In Chrome, it may prompt
           you, and you can also look for the "Install" command in the browser
-          settings; on the the deskop, look for this icon in the address bar:
+          settings; on the the desktop, look for this icon in the address bar:
           <img
             src="../assets/help/chrome-install-pwa.png"
             alt="Chrome 'install' icon"
@@ -56,7 +56,7 @@
         </p>
       </div>
 
-      <h2 class="text-xl font-semibold">
+      <h2 class="text-xl font-semibold mt-4">
         If you must enable notifications...
         <!-- Note that that exact verbiage shows in a message elsewhere. -->
       </h2>
@@ -68,7 +68,19 @@
         </p>
       </div>
 
-      <h2 class="text-xl font-semibold">Check App Permissions</h2>
+      <h2 class="text-xl font-semibold mt-4">
+        If you're waiting for system initialization...
+        <!-- Note that that exact verbiage shows in a message elsewhere. -->
+      </h2>
+      <div>
+        <p>
+          ... and it never stops, then there is a problem with the underlying
+          service worker or push server mechanism in your browser. Your best bet
+          is to follow the "Reinstall" steps below or use a different browser.
+        </p>
+      </div>
+
+      <h2 class="text-xl font-semibold mt-4">Check App Permissions</h2>
       <div>
         <p>
           In Apple iOS, check "Settings" -> "Notifications", look for the Time
@@ -92,8 +104,8 @@
           </li>
           <li class="list-disc ml-4">
             Go to Chrome "Settings", then "Privacy and Security" and "Clear
-            "Clear browsing data", then "Cookies and site data". Also make sure
-            the "Time Range" at the top shows "All time".
+            "Clear browsing data", then "Cookies and site data". Make sure the
+            "Time Range" at the top shows "All time".
           </li>
         </ul>
         <p>
@@ -106,7 +118,7 @@
         </p>
       </div>
 
-      <h2 class="text-xl font-semibold">Check Browser Permissions</h2>
+      <h2 class="text-xl font-semibold mt-4">Check Browser Permissions</h2>
       <div>
         <p>In Apple iOS, check Settings -> Notifications.</p>
         <p>In Android, check Settings -> Notifications.</p>
@@ -121,7 +133,9 @@
         </a>
       </div>
 
-      <h2 class="text-xl font-semibold">Check OS Permissions</h2>
+      <h2 class="text-xl font-semibold mt-4">
+        Check Operating System (OS) Permissions
+      </h2>
       <div class="px-2">
         <div>
           <h3 class="text-lg font-semibold">Mobile Phone - Apple iOS</h3>
@@ -139,13 +153,15 @@
           <h3 class="text-lg font-semibold">Desktop - Mac</h3>
           <div>
             <span>
-              Requires Mac OS 13; see your macOS version under Apple -> About
-              This Mac.
+              See "System Settings" -> "Notifications" and make sure it is
+              enabled for the browser you're using. Note that these
+              notifications require Mac OS 13; see your macOS version under
+              Apple -> "About This Mac".
             </span>
           </div>
 
-          <h3 class="text-lg font-semibold">Windows desktop</h3>
-          In Windows, check Settings -> Notifications.
+          <h3 class="text-lg font-semibold">Desktop - Windows</h3>
+          In Windows, check "Settings" -> "Notifications".
           <img
             src="../assets/help/windows-system-enable-notifications.png"
             alt="Windows system settings"
@@ -164,66 +180,111 @@
         </div>
       </div>
 
-      <h2 class="text-xl font-semibold">Reinstall</h2>
+      <h2 class="text-xl font-semibold mt-4">Reinstall</h2>
       <div>
         <p>
           If all else fails, uninstall the app, ensure all the browser tabs with
           it are closed, and clear out caches and storage.
         </p>
+        <p>
+          Of course, you'll want to back up all your data first -- all seeds as
+          well as the contacts & settings -- on the Account
+          <fa icon="circle-user" /> page.
+        </p>
         <ul class="ml-4 list-disc">
           <li>
-            Clear cache for site. (In Chrome, go to `chrome://settings/cookies`
-            and "all site data and permissions"; in Firefox, go to
-            `about:preferences` and search for "cache" then "Manage Data", and
-            also manually remove the IndexedDB data if the DBs still show.)
+            Clear cache.
+            <ul>
+              <li>
+                In mobile, look for the browser app settings. This is true even
+                for an installed app: go to the browser which you used to
+                initially visit timesafari.app, because those settings affect
+                the app. Look for "Delete browsing data" in the "Settings",
+                under "Privacy and Security".
+              </li>
+              <li>
+                In Chrome, go to `chrome://settings/cookies` and "all site data
+                and permissions" for timesafari.app; in Firefox, go to
+                `about:preferences` and search for "cache" then "Manage Data"
+                for timesafari.app. Also manually remove the IndexedDB data if
+                the DBs still show.)
+              </li>
+            </ul>
           </li>
           <li>
-            Clear notification permission. (in Chrome, go to
+            Clear notification permission. (In Chrome, go to
             `chrome://settings/content/notifications`; in Firefox, go to
             `about:preferences` and search for "notifications".)
           </li>
           <li>
-            Unregister service worker. (in Chrome, go to
+            Unregister service worker. (In Chrome, go to
             `chrome://serviceworker-internals/`; in Firefox, go to
             `about:serviceworkers`.)
           </li>
           <li>
-            Clear Cache Storage. (in Chrome, in dev tools under Application; in
-            Firefox, in dev tools under Storage.)
+            Clear "Cache Storage". (In Chrome, in dev tools under "Application";
+            in Firefox, in dev tools under "Storage".)
           </li>
         </ul>
         <p>Then reinstall the app.</p>
       </div>
 
+      <h2 class="text-xl font-semibold mt-4">Tests</h2>
       <button
         @click="showTestNotification()"
-        class="block w-full text-center text-md bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
+        class="block w-full text-center text-md bg-slate-500 text-white px-1.5 py-2 rounded-md mt-4 mb-2"
       >
         Send Test Notification Directly to Device (Not Through Push Server)
       </button>
+      <p>
+        If that didn't show a notification on your device, the problem is that
+        your browser or your operating system are not allowing notifications
+        through. See "Check App Permissions" and "Check Browser Permissions" and
+        "Check Operating System (OS) Permissions" above.
+      </p>
 
       <button
         @click="alertWebPushSubscription()"
-        class="block w-full text-center text-md bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
+        class="block w-full text-center text-md bg-slate-500 text-white px-1.5 py-2 rounded-md mt-4 mb-2"
       >
         Show Web Push Subscription Info
       </button>
+      <p>
+        If that showed "null" then the notification is not active.
+        <button class="text-blue-500" @click="showNotificationChoice()">
+          Click here.
+        </button>
+      </p>
 
       <button
         @click="sendTestWebPushMessage(true)"
-        class="block w-full text-center text-md bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
+        class="block w-full text-center text-md bg-slate-500 text-white px-1.5 py-2 rounded-md mt-4 mb-2"
       >
         Send Yourself a Test Web Push Message (Through Push Server but Skipping
         Client Filter)
       </button>
+      <p>
+        If that didn't show a notification on your device, there is a problem
+        getting to the push server. Disable notifications and then enable them
+        again.
+      </p>
 
       <button
         @click="sendTestWebPushMessage()"
-        class="block w-full text-center text-md bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
+        class="block w-full text-center text-md bg-slate-500 text-white px-1.5 py-2 rounded-md mt-4 mb-2"
       >
         Send Yourself a Test Web Push Message (Through Push Server and Client
         Filter)
       </button>
+      <p>
+        If you don't see a message, it could be that there is nothing new for
+        you to see. If the previous test worked, then things should work fine.
+        If you notice a full 24 hours where you get no notification and you know
+        that there are new items that should show, gather as many details as
+        possible and go to the bottom of
+        <router-link to="help" class="text-blue-500"> this page </router-link>
+        for ways to contact us.
+      </p>
     </div>
   </section>
 </template>