Merge changes

src/views/AccountViewView.vue

@@ -82,13 +82,12 @@
         <div v-else class="text-center">
           <div class @click="openImageDialog()">
             <fa
-              icon="camera"
+              icon="image-portrait"
               class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-2 rounded-l"
             />
             <fa
-              icon="image-portrait"
+              icon="camera"
               class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-2 rounded-r"
-              @click="openImageDialog()"
             />
           </div>
         </div>
@@ -159,7 +158,7 @@
      We'll just pop the message in only if we discover that they need it.
     -->
     <div
-      v-if="!loadingLimits && !endorserLimits?.nextWeekBeginDateTime"
+      v-if="!isRegistered"
       id="noticeBeforeAnnounce"
       class="bg-amber-200 text-amber-900 border-amber-500 border-dashed border text-center rounded-md overflow-hidden px-4 py-3 mt-4"
     >
@@ -176,6 +175,7 @@
     </div>
 
     <div
+      v-if="isRegistered"
       id="sectionNotifications"
       class="bg-slate-100 rounded-md overflow-hidden px-4 py-4 mt-8 mb-8"
     >
@@ -250,19 +250,111 @@
 
     <div
       id="sectionSearchLocation"
-      class="bg-slate-100 rounded-md overflow-hidden px-4 py-4 mt-8 mb-8"
+      class="flex justify-between bg-slate-100 rounded-md overflow-hidden px-4 py-4 mt-8 mb-8"
     >
       <!-- label -->
-      <div class="mb-2 font-bold">Location for Searches</div>
+      <span class="mb-2 font-bold">Location for Searches</span>
       <router-link
         :to="{ name: 'search-area' }"
-        class="block w-full text-center text-m bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md mb-2 mt-6"
+        class="text-m bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md mb-2"
       >
-        Set Search Area…
-        <!-- If already set, change button label to "Change Search Area" -->
+        {{ isSearchAreasSet ? "Change" : "Set" }} Search Area…
       </router-link>
     </div>
 
+    <!-- User Profile -->
+    <div
+      v-if="isRegistered"
+      class="bg-slate-100 rounded-md overflow-hidden px-4 py-4 mt-8 mb-8"
+    >
+      <div v-if="loadingProfile" class="text-center mb-2">
+        <fa icon="spinner" class="fa-spin text-slate-400"></fa> Loading
+        profile...
+      </div>
+      <div v-else class="flex items-center mb-2">
+        <span class="font-bold">Public Profile</span>
+        <fa
+          icon="circle-info"
+          class="text-slate-400 fa-fw ml-2 cursor-pointer"
+          @click="showProfileInfo"
+        />
+      </div>
+      <textarea
+        v-model="userProfileDesc"
+        class="w-full h-32 p-2 border border-slate-300 rounded-md"
+        placeholder="Write something about yourself for the public..."
+        :readonly="loadingProfile || savingProfile"
+        :class="{ 'bg-slate-100': loadingProfile || savingProfile }"
+      ></textarea>
+
+      <div class="flex items-center mb-4" @click="toggleUserProfileLocation">
+        <input
+          type="checkbox"
+          class="mr-2"
+          v-model="includeUserProfileLocation"
+        />
+        <label for="includeUserProfileLocation">Include Location</label>
+      </div>
+      <div v-if="includeUserProfileLocation" class="mb-4 aspect-video">
+        <p class="text-sm mb-2 text-slate-500">
+          For your security, choose a location nearby but not exactly at your
+          place.
+        </p>
+
+        <l-map
+          ref="profileMap"
+          class="!z-40 rounded-md"
+          @click="
+            (event: LeafletMouseEvent) => {
+              userProfileLatitude = event.latlng.lat;
+              userProfileLongitude = event.latlng.lng;
+            }
+          "
+          @ready="onMapReady"
+        >
+          <l-tile-layer
+            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+            layer-type="base"
+            name="OpenStreetMap"
+          />
+          <l-marker
+            v-if="userProfileLatitude && userProfileLongitude"
+            :lat-lng="[userProfileLatitude, userProfileLongitude]"
+            @click="confirmEraseLatLong()"
+          />
+        </l-map>
+      </div>
+      <div v-if="!loadingProfile && !savingProfile">
+        <div class="flex justify-between items-center">
+          <button
+            @click="saveProfile"
+            class="mt-2 px-4 py-2 bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white rounded-md"
+            :disabled="loadingProfile || savingProfile"
+            :class="{
+              'opacity-50 cursor-not-allowed': loadingProfile || savingProfile,
+            }"
+          >
+            Save Profile
+          </button>
+          <button
+            @click="confirmDeleteProfile"
+            class="mt-2 px-4 py-2 bg-gradient-to-b from-red-400 to-red-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white rounded-md"
+            :disabled="loadingProfile || savingProfile"
+            :class="{
+              'opacity-50 cursor-not-allowed':
+                loadingProfile ||
+                savingProfile ||
+                (!userProfileDesc && !includeUserProfileLocation),
+            }"
+          >
+            Delete Profile
+          </button>
+        </div>
+      </div>
+      <div v-else-if="loadingProfile">Loading...</div>
+      <div v-else>Saving...</div>
+    </div>
+
     <div
       v-if="activeDid"
       id="sectionUsageLimits"
@@ -599,7 +691,7 @@
       <h2 class="text-slate-500 text-sm font-bold mb-2">
         Notification Push Server
       </h2>
-      <div id="sectionNotificationPushServer" class="px-3 py-4">
+      <div class="px-3 py-4">
         <input
           type="text"
           class="block w-full rounded border border-slate-400 px-3 py-2"
@@ -676,7 +768,7 @@
         {{ DEFAULT_PARTNER_API_SERVER }}
       </span>
 
-      <div id="sectionImageServerURL" class="mt-2">
+      <div class="mt-2">
         <span class="text-slate-500 text-sm font-bold">Image Server URL</span>
         &nbsp;
         <span class="text-sm">{{ DEFAULT_IMAGE_API_SERVER }}</span>
@@ -791,17 +883,21 @@
 </template>
 
 <script lang="ts">
+import "leaflet/dist/leaflet.css";
+
 import { AxiosError } from "axios";
 import { Buffer } from "buffer/";
 import Dexie from "dexie";
 import "dexie-export-import";
 import { ImportProgress } from "dexie-export-import/dist/import";
+import { LeafletMouseEvent } from "leaflet";
 import * as R from "ramda";
 import { IIdentifier } from "@veramo/core";
 import { ref } from "vue";
 import { Component, Vue } from "vue-facing-decorator";
 import { Router } from "vue-router";
 import { useClipboard } from "@vueuse/core";
+import { LMap, LMarker, LTileLayer } from "@vue-leaflet/vue-leaflet";
 
 import EntityIcon from "../components/EntityIcon.vue";
 import ImageMethodDialog from "../components/ImageMethodDialog.vue";
@@ -819,6 +915,7 @@ import {
 } from "../constants/app";
 import {
   db,
+  logConsoleAndDb,
   retrieveSettingsForActiveAccount,
   updateAccountSettings,
 } from "../db/index";
@@ -830,8 +927,9 @@ import {
 } from "../db/tables/settings";
 import {
   clearPasskeyToken,
-  ErrorResponse,
   EndorserRateLimits,
+  ErrorResponse,
+  errorStringForLog,
   fetchEndorserRateLimits,
   fetchImageRateLimits,
   getHeaders,
@@ -850,6 +948,10 @@ const inputImportFileNameRef = ref<Blob>();
   components: {
     EntityIcon,
     ImageMethodDialog,
+    LeafletMouseEvent,
+    LMap,
+    LMarker,
+    LTileLayer,
     PushNotificationPermission,
     QuickNav,
     TopMessage,
@@ -873,23 +975,26 @@ export default class AccountViewView extends Vue {
   givenName = "";
   hideRegisterPromptOnNewContact = false;
   imageLimits: ImageRateLimits | null = null;
-  imageServer = "";
+  includeUserProfileLocation = false;
   isRegistered = false;
+  isSearchAreasSet = false;
   limitsMessage = "";
   loadingLimits = false;
+  loadingProfile = true;
   notifyingNewActivity = false;
   notifyingNewActivityTime = "";
   notifyingReminder = false;
   notifyingReminderMessage = "";
   notifyingReminderTime = "";
-  partnerApiServer = "";
-  partnerApiServerInput = "";
+  partnerApiServer = DEFAULT_PARTNER_API_SERVER;
+  partnerApiServerInput = DEFAULT_PARTNER_API_SERVER;
   passkeyExpirationDescription = "";
   passkeyExpirationMinutes = DEFAULT_PASSKEY_EXPIRATION_MINUTES;
   previousPasskeyExpirationMinutes = DEFAULT_PASSKEY_EXPIRATION_MINUTES;
   profileImageUrl?: string;
   publicHex = "";
   publicBase64 = "";
+  savingProfile = false;
   showAdvanced = false;
   showB64Copy = false;
   showContactGives = false;
@@ -903,8 +1008,12 @@ export default class AccountViewView extends Vue {
   subscription: PushSubscription | null = null;
   warnIfProdServer = false;
   warnIfTestServer = false;
-  webPushServer = "";
-  webPushServerInput = "";
+  webPushServer = DEFAULT_PUSH_SERVER;
+  webPushServerInput = DEFAULT_PUSH_SERVER;
+  userProfileDesc = "";
+  userProfileLatitude = 0;
+  userProfileLongitude = 0;
+  zoom = 2;
 
   /**
    * Async function executed when the component is mounted.
@@ -918,6 +1027,49 @@ export default class AccountViewView extends Vue {
       // Initialize component state with values from the database or defaults
       await this.initializeState();
       await this.processIdentity();
+
+      // Load the user profile
+      if (this.isRegistered) {
+        try {
+          const headers = await getHeaders(this.activeDid);
+          const response = await this.axios.get(
+            this.apiServer +
+              "/api/partner/userProfileForIssuer/" +
+              this.activeDid,
+            { headers },
+          );
+          if (response.status === 200) {
+            this.userProfileDesc = response.data.data.description || "";
+            this.userProfileLatitude = response.data.data.locLat || 0;
+            this.userProfileLongitude = response.data.data.locLon || 0;
+            if (this.userProfileLatitude && this.userProfileLongitude) {
+              this.includeUserProfileLocation = true;
+            }
+          } else {
+            // won't get here because axios throws an error instead
+            throw Error("Unable to load profile.");
+          }
+        } catch (error) {
+          if (error.status === 404) {
+            // this is ok: the profile is not yet created
+          } else {
+            logConsoleAndDb(
+              "Error loading profile: " + errorStringForLog(error),
+            );
+            this.$notify(
+              {
+                group: "alert",
+                type: "danger",
+                title: "Error Loading Profile",
+                text: "Your server profile is not available.",
+              },
+              5000,
+            );
+          }
+        } finally {
+          this.loadingProfile = false;
+        }
+      }
     } catch (error) {
       // this can happen when running automated tests in dev mode because notifications don't work
       console.error(
@@ -992,14 +1144,15 @@ export default class AccountViewView extends Vue {
     this.hideRegisterPromptOnNewContact =
       !!settings.hideRegisterPromptOnNewContact;
     this.isRegistered = !!settings?.isRegistered;
-    this.imageServer = settings.imageServer || "";
+    this.isSearchAreasSet = !!settings.searchBoxes;
     this.notifyingNewActivity = !!settings.notifyingNewActivityTime;
     this.notifyingNewActivityTime = settings.notifyingNewActivityTime || "";
     this.notifyingReminder = !!settings.notifyingReminderTime;
     this.notifyingReminderMessage = settings.notifyingReminderMessage || "";
     this.notifyingReminderTime = settings.notifyingReminderTime || "";
-    this.partnerApiServer = settings.partnerApiServer || "";
-    this.partnerApiServerInput = settings.partnerApiServer || "";
+    this.partnerApiServer = settings.partnerApiServer || this.partnerApiServer;
+    this.partnerApiServerInput =
+      settings.partnerApiServer || this.partnerApiServerInput;
     this.profileImageUrl = settings.profileImageUrl;
     this.showContactGives = !!settings.showContactGivesInline;
     this.passkeyExpirationMinutes =
@@ -1009,8 +1162,8 @@ export default class AccountViewView extends Vue {
     this.showShortcutBvc = !!settings.showShortcutBvc;
     this.warnIfProdServer = !!settings.warnIfProdServer;
     this.warnIfTestServer = !!settings.warnIfTestServer;
-    this.webPushServer = settings.webPushServer || "";
-    this.webPushServerInput = settings.webPushServer || "";
+    this.webPushServer = settings.webPushServer || this.webPushServer;
+    this.webPushServerInput = settings.webPushServer || this.webPushServerInput;
   }
 
   // call fn, copy text to the clipboard, then redo fn after 2 seconds
@@ -1498,13 +1651,19 @@ export default class AccountViewView extends Vue {
    */
   private handleRateLimitsError(error: unknown) {
     if (error instanceof AxiosError) {
-      const data = error.response?.data as ErrorResponse;
-      this.limitsMessage =
-        (data?.error?.message as string) || "Bad server response.";
-      console.error(
-        "Got bad response retrieving limits, which usually means user isn't registered.",
-        error,
-      );
+      if (error.status == 400 || error.status == 404) {
+        // no worries: they probably just aren't registered and don't have any limits
+        console.log(
+          "Got 400 or 404 response retrieving limits which probably means they're not registered:",
+          error,
+        );
+        this.limitsMessage = "No limits were found, so no actions are allowed.";
+      } else {
+        const data = error.response?.data as ErrorResponse;
+        this.limitsMessage =
+          (data?.error?.message as string) || "Bad server response.";
+        console.error("Got bad response retrieving limits:", error);
+      }
     } else {
       this.limitsMessage = "Got an error retrieving limits.";
       console.error("Got some error retrieving limits:", error);
@@ -1635,5 +1794,174 @@ export default class AccountViewView extends Vue {
       }
     }
   }
+
+  onMapReady(map: L.Map) {
+    // doing this here instead of on the l-map element avoids a recentering after a drag then zoom at startup
+    const zoom = this.userProfileLatitude && this.userProfileLongitude ? 12 : 2;
+    map.setView([this.userProfileLatitude, this.userProfileLongitude], zoom);
+  }
+
+  showProfileInfo() {
+    this.$notify(
+      {
+        group: "alert",
+        type: "info",
+        title: "Public Profile Information",
+        text: "This data will be published for all to see, so be careful what your write. Your ID will only be shared with people who you allow to see your activity.",
+      },
+      7000,
+    );
+  }
+
+  async saveProfile() {
+    this.savingProfile = true;
+    try {
+      const headers = await getHeaders(this.activeDid);
+      const payload: UserProfile = {
+        description: this.userProfileDesc,
+      };
+      if (this.userProfileLatitude && this.userProfileLongitude) {
+        payload.locLat = this.userProfileLatitude;
+        payload.locLon = this.userProfileLongitude;
+      } else if (this.includeUserProfileLocation) {
+        this.$notify(
+          {
+            group: "alert",
+            type: "toast",
+            title: "",
+            text: "No profile location is saved.",
+          },
+          3000,
+        );
+      }
+      const response = await this.axios.post(
+        this.apiServer + "/api/partner/userProfile",
+        payload,
+        { headers },
+      );
+      if (response.status === 201) {
+        this.$notify(
+          {
+            group: "alert",
+            type: "success",
+            title: "Profile Saved",
+            text: "Your profile has been updated successfully.",
+          },
+          3000,
+        );
+      } else {
+        // won't get here because axios throws an error on non-success
+        throw Error("Profile not saved");
+      }
+    } catch (error) {
+      logConsoleAndDb("Error saving profile: " + errorStringForLog(error));
+      const errorMessage: string =
+        error.response?.data?.error?.message ||
+        error.response?.data?.error ||
+        error.message ||
+        "There was an error saving your profile.";
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error Saving Profile",
+          text: errorMessage,
+        },
+        3000,
+      );
+    } finally {
+      this.savingProfile = false;
+    }
+  }
+
+  toggleUserProfileLocation() {
+    this.includeUserProfileLocation = !this.includeUserProfileLocation;
+    if (!this.includeUserProfileLocation) {
+      this.userProfileLatitude = 0;
+      this.userProfileLongitude = 0;
+      this.zoom = 2;
+    }
+  }
+
+  confirmEraseLatLong() {
+    this.$notify(
+      {
+        group: "modal",
+        type: "confirm",
+        title: "Erase Marker",
+        text: "Are you sure you don't want to mark a location? This will erase the current location.",
+        onYes: async () => {
+          this.eraseLatLong();
+        },
+      },
+      -1,
+    );
+  }
+
+  eraseLatLong() {
+    this.userProfileLatitude = 0;
+    this.userProfileLongitude = 0;
+    this.zoom = 2;
+    this.includeUserProfileLocation = false;
+  }
+
+  async confirmDeleteProfile() {
+    this.$notify(
+      {
+        group: "modal",
+        type: "confirm",
+        title: "Delete Profile",
+        text: "Are you sure you want to delete your public profile? This will remove your description and location from the server, and it cannot be undone.",
+        onYes: this.deleteProfile,
+      },
+      -1,
+    );
+  }
+
+  async deleteProfile() {
+    this.savingProfile = true;
+    try {
+      const headers = await getHeaders(this.activeDid);
+      const response = await this.axios.delete(
+        this.apiServer + "/api/partner/userProfile",
+        { headers },
+      );
+      if (response.status === 204) {
+        this.userProfileDesc = "";
+        this.userProfileLatitude = 0;
+        this.userProfileLongitude = 0;
+        this.includeUserProfileLocation = false;
+        this.$notify(
+          {
+            group: "alert",
+            type: "success",
+            title: "Profile Deleted",
+            text: "Your profile has been deleted successfully.",
+          },
+          3000,
+        );
+      } else {
+        throw Error("Profile not deleted");
+      }
+    } catch (error) {
+      logConsoleAndDb("Error deleting profile: " + errorStringForLog(error));
+      const errorMessage: string =
+        error.response?.data?.error?.message ||
+        error.response?.data?.error ||
+        error.message ||
+        "There was an error deleting your profile.";
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error Deleting Profile",
+          text: errorMessage,
+        },
+        3000,
+      );
+    } finally {
+      this.savingProfile = false;
+    }
+  }
 }
 </script>