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,6 +18,7 @@
 
       <div>
         <div class="text-center mt-8">
+          <template v-if="isRegistered">
             <div>
               <font-awesome
                 icon="camera"
@@ -48,6 +49,10 @@
                 />
               </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,6 +83,7 @@
           />
         </span>
         <div v-else class="text-center">
+          <template v-if="isRegistered">
             <div class @click="openImageDialog()">
               <font-awesome
                 icon="image-portrait"
@@ -93,8 +94,12 @@
                 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">