From e4155e1a203b69a4fd0dc629d5ecbd187f15ba33 Mon Sep 17 00:00:00 2001
From: Matt Raymer <matthew.raymer@anomalistdesign.com>
Date: Wed, 14 May 2025 05:39:03 -0400
Subject: [PATCH] feat(ui): disable all photo upload actions for unregistered
 users

- Updated ImageMethodDialog.vue to accept an isRegistered prop and show "Register to Upload a Photo" message instead of upload UI when not registered.
- Updated AccountViewView.vue to pass isRegistered to ImageMethodDialog and replace all profile photo add/upload buttons with the same message for unregistered users.
- Ensures consistent UX and prevents unregistered users from accessing any photo upload features.
---
 BUILDING.md                          |  2 +-
 src/components/ImageMethodDialog.vue | 67 ++++++++++++++++------------
 src/components/PhotoDialog.vue       |  4 ++
 src/views/AccountViewView.vue        | 27 ++++++-----
 4 files changed, 60 insertions(+), 40 deletions(-)

diff --git a/BUILDING.md b/BUILDING.md
index c2570796..ad7b1d41 100644
--- a/BUILDING.md
+++ b/BUILDING.md
@@ -54,7 +54,7 @@ Install dependencies:
 1. Run the production build:
 
    ```bash
-   npm run build
+   npm run build:web
    ```
 
    The built files will be in the `dist` directory.
diff --git a/src/components/ImageMethodDialog.vue b/src/components/ImageMethodDialog.vue
index 8a3faaa2..6585b2b5 100644
--- a/src/components/ImageMethodDialog.vue
+++ b/src/components/ImageMethodDialog.vue
@@ -18,36 +18,41 @@
 
       <div>
         <div class="text-center mt-8">
-          <div>
-            <font-awesome
-              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-md"
-              @click="openPhotoDialog()"
-            />
-          </div>
-          <div class="mt-4">
-            <input type="file" @change="uploadImageFile" />
-          </div>
-          <div class="mt-4">
-            <span class="mt-2">
-              ... or paste a URL:
-              <input v-model="imageUrl" type="text" class="border-2" />
-            </span>
-            <span class="ml-2">
+          <template v-if="isRegistered">
+            <div>
               <font-awesome
-                v-if="imageUrl"
-                icon="check"
-                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-md cursor-pointer"
-                @click="acceptUrl"
+                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-md"
+                @click="openPhotoDialog()"
               />
-              <!-- so that there's no shifting when it becomes visible -->
-              <font-awesome
-                v-else
-                icon="check"
-                class="text-white bg-white px-2 py-2"
-              />
-            </span>
-          </div>
+            </div>
+            <div class="mt-4">
+              <input type="file" @change="uploadImageFile" />
+            </div>
+            <div class="mt-4">
+              <span class="mt-2">
+                ... or paste a URL:
+                <input v-model="imageUrl" type="text" class="border-2" />
+              </span>
+              <span class="ml-2">
+                <font-awesome
+                  v-if="imageUrl"
+                  icon="check"
+                  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-md cursor-pointer"
+                  @click="acceptUrl"
+                />
+                <!-- so that there's no shifting when it becomes visible -->
+                <font-awesome
+                  v-else
+                  icon="check"
+                  class="text-white bg-white px-2 py-2"
+                />
+              </span>
+            </div>
+          </template>
+          <template v-else>
+            <div class="text-center text-lg text-slate-500 py-12">Register to Upload a Photo</div>
+          </template>
         </div>
       </div>
     </div>
@@ -67,6 +72,12 @@ const inputImageFileNameRef = ref<Blob>();
 
 @Component({
   components: { PhotoDialog },
+  props: {
+    isRegistered: {
+      type: Boolean,
+      default: true,
+    },
+  },
 })
 export default class ImageMethodDialog extends Vue {
   $notify!: (notification: NotificationIface, timeout?: number) => void;
diff --git a/src/components/PhotoDialog.vue b/src/components/PhotoDialog.vue
index 298dc067..65d41e6b 100644
--- a/src/components/PhotoDialog.vue
+++ b/src/components/PhotoDialog.vue
@@ -83,6 +83,7 @@ PhotoDialog.vue */
       <div v-else>
         <div class="flex flex-col items-center justify-center gap-4 p-4">
           <button
+            v-if="isRegistered"
             class="bg-blue-500 hover:bg-blue-700 text-white font-bold p-3 rounded-full text-2xl leading-none"
             @click="takePhoto"
           >
@@ -144,6 +145,8 @@ export default class PhotoDialog extends Vue {
   private platformService = PlatformServiceFactory.getInstance();
   URL = window.URL || window.webkitURL;
 
+  isRegistered = false;
+
   /**
    * Lifecycle hook: Initializes component and retrieves user settings
    * @throws {Error} When settings retrieval fails
@@ -152,6 +155,7 @@ export default class PhotoDialog extends Vue {
     try {
       const settings = await retrieveSettingsForActiveAccount();
       this.activeDid = settings.activeDid || "";
+      this.isRegistered = !!settings.isRegistered;
     } catch (error: unknown) {
       logger.error("Error retrieving settings from database:", error);
       this.$notify(
diff --git a/src/views/AccountViewView.vue b/src/views/AccountViewView.vue
index 24712a6e..05d6b86e 100644
--- a/src/views/AccountViewView.vue
+++ b/src/views/AccountViewView.vue
@@ -83,18 +83,23 @@
           />
         </span>
         <div v-else class="text-center">
-          <div class @click="openImageDialog()">
-            <font-awesome
-              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"
-            />
-            <font-awesome
-              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"
-            />
-          </div>
+          <template v-if="isRegistered">
+            <div class @click="openImageDialog()">
+              <font-awesome
+                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"
+              />
+              <font-awesome
+                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"
+              />
+            </div>
+          </template>
+          <template v-else>
+            <div class="text-center text-lg text-slate-500 py-8">Register to Upload a Photo</div>
+          </template>
         </div>
-        <ImageMethodDialog ref="imageMethodDialog" />
+        <ImageMethodDialog ref="imageMethodDialog" :isRegistered="isRegistered" />
       </div>
       <div class="mt-6">
         <div class="flex justify-center text-center">