allow any image URL for gifts & profiles

src/components/ImageMethodDialog.vue

@@ -28,6 +28,22 @@
           <div class="mt-4">
             <input type="file" @change="uploadImageFile" />
           </div>
+          <div class="mt-4">
+            <span class="mt-2">
+              ... or paste a URL:
+              <input type="text" v-model="imageUrl" class="border-2" />
+            </span>
+            <span class="ml-2">
+              <fa
+                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 -->
+              <fa v-else icon="check" class="text-white bg-white px-2 py-2" />
+            </span>
+          </div>
         </div>
       </div>
     </div>
@@ -36,10 +52,12 @@
 </template>
 
 <script lang="ts">
+import axios from "axios";
 import { ref } from "vue";
 import { Component, Vue } from "vue-facing-decorator";
 
 import PhotoDialog from "@/components/PhotoDialog.vue";
+import { NotificationIface } from "@/constants/app";
 
 const inputImageFileNameRef = ref<Blob>();
 
@@ -47,9 +65,12 @@ const inputImageFileNameRef = ref<Blob>();
   components: { PhotoDialog },
 })
 export default class ImageMethodDialog extends Vue {
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
+
   claimType: string;
   crop: boolean = false;
   imageCallback: (imageUrl?: string) => void = () => {};
+  imageUrl?: string;
   visible = false;
 
   open(setImageFn: (arg: string) => void, claimType: string, crop?: boolean) {
@@ -94,6 +115,38 @@ export default class ImageMethodDialog extends Vue {
     }
   }
 
+  async acceptUrl() {
+    this.visible = false;
+    if (this.crop) {
+      try {
+        const urlBlobResponse: Blob = await axios.get(this.imageUrl as string, {
+          responseType: "blob", // This ensures the data is returned as a Blob
+        });
+        const fullUrl = new URL(this.imageUrl as string);
+        const fileName = fullUrl.pathname.split("/").pop() as string;
+        (this.$refs.photoDialog as PhotoDialog).open(
+          this.imageCallback,
+          this.claimType,
+          this.crop,
+          urlBlobResponse.data as Blob,
+          fileName,
+        );
+      } catch (error) {
+        this.$notify(
+          {
+            group: "alert",
+            type: "danger",
+            title: "Error",
+            text: "There was an error retrieving that image.",
+          },
+          5000,
+        );
+      }
+    } else {
+      this.imageCallback(this.imageUrl);
+    }
+  }
+
   close() {
     this.visible = false;
   }

src/components/PhotoDialog.vue

@@ -398,10 +398,6 @@ export default class PhotoDialog extends Vue {
       );
     }
   }
-
-  window80() {
-    return window.innerHeight * 0.8 + "px";
-  }
 }
 </script>