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

@@ -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.

src/components/ImageMethodDialog.vue

@@ -18,36 +18,41 @@
 
       <div>
         <div class="text-center mt-8">
-          <div>
+          <template v-if="isRegistered">
-            <font-awesome
+            <div>
-              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">
               <font-awesome
-                v-if="imageUrl"
+                icon="camera"
-                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"
-                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="openPhotoDialog()"
-                @click="acceptUrl"
               />
-              <!-- so that there's no shifting when it becomes visible -->
+            </div>
-              <font-awesome
+            <div class="mt-4">
-                v-else
+              <input type="file" @change="uploadImageFile" />
-                icon="check"
+            </div>
-                class="text-white bg-white px-2 py-2"
+            <div class="mt-4">
-              />
+              <span class="mt-2">
-            </span>
+                ... or paste a URL:
-          </div>
+                <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;

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(

src/views/AccountViewView.vue

@@ -83,18 +83,23 @@
           />
         </span>
         <div v-else class="text-center">
-          <div class @click="openImageDialog()">
+          <template v-if="isRegistered">
-            <font-awesome
+            <div class @click="openImageDialog()">
-              icon="image-portrait"
+              <font-awesome
-              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"
+                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"
+              <font-awesome
-              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"
+                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>
+              />
+            </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">