components/CropPopup.vue

@@ -1,93 +0,0 @@
-<template>
-  <div id="fullscreen-container">
-    <div id="crop-preview">
-      <img ref="image" :src="imageSrc" style="min-height: 35dvh;">
-      <Button text="Crop" :callback="cropImage"></Button>
-      <Button text="Cancel" :callback="closePopup"></Button>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import Cropper from 'cropperjs';
-
-const props = defineProps({
-  imageSrc: String,
-  onCrop: Function,
-  onClose: Function,
-});
-
-const image = ref<HTMLImageElement | null>(null);
-const cropper = ref<Cropper | null>(null);
-
-watch(image, (newValue) => {
-  if (newValue) {
-    cropper.value = new Cropper(newValue)
-    const cropperCanvas = cropper.value.getCropperCanvas()
-    const cropperSelection = cropper.value.getCropperSelection()
-    
-    if (cropperCanvas) {
-      cropperCanvas.background = false
-    }
-
-    if (cropperSelection) {
-      cropperSelection.precise = true
-      cropperSelection.aspectRatio = 1
-      cropperSelection.initialCoverage = 1
-    }
-  }
-});
-
-async function cropImage() {
-  if (cropper) {
-    const selection = cropper.value?.getCropperSelection();
-    if (selection) {
-      const canvas = await selection.$toCanvas({width: 256, height: 256})
-
-      canvas.toBlob((blob) => {
-        if (blob && props.onCrop) {
-          const reader = new FileReader();
-          reader.addEventListener("load", () => {
-            if (reader.result && typeof reader.result === 'string') {
-              if (props.onCrop) {
-                props.onCrop(blob, reader.result)
-              }
-            }
-          });
-          const file = new File([blob], 'preview.png', { type: 'image/png' })
-          reader.readAsDataURL(file)
-        }
-      });
-    }
-  }
-}
-
-function closePopup() {
-  if (props.onClose) {
-    props.onClose();
-  }
-}
-</script>
-
-<style scoped>
-.button {
-  margin: 0.2em
-}
-
-#fullscreen-container {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 10;
-  background: rgba(0, 0, 0, 0.5);
-}
-
-#crop-preview {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-</style>

components/MemberEntry.vue

@@ -3,7 +3,7 @@
         <img v-if="props.member.user.avatar" class="member-avatar" :src="props.member.user.avatar" :alt="props.member.user.display_name ?? props.member.user.username" />
         <Icon v-else class="member-avatar" name="lucide:user" />
         <span class="member-display-name">{{ props.member.user.display_name ?? props.member.user.username }}</span>
-        <UserPopup v-if="isPopupVisible" :user="props.member.user" id="profile-popup" />
+        <UserPopup v-if="isPopupVisible" :user="props.member.user" class="profile-popup" />
     </div>
 </template>
 
@@ -32,4 +32,9 @@ const hidePopup = () => {
 .member-item {
     position: relative; /* Set the position to relative for absolute positioning of the popup */
 }
+
+.profile-popup {
+    position: absolute; /* Use absolute positioning */
+    left: -100px; /* Adjust this value to position the popup to the left */
+}
 </style>

components/Settings/UserSettings/Account.vue

@@ -86,4 +86,8 @@ async function deleteAccount() {
   color: var(--text-color);
   background-color: var(--accent-color);
 }
+
+.profile-popup {
+  margin-left: 2dvw;
+}
 </style>

components/Settings/UserSettings/Profile.vue

@@ -20,25 +20,15 @@
         <Button style="margin-top: 2dvh" text="Save Changes" :callback="saveChanges"></Button>
       </div>
 
-      <UserPopup v-if="user" :user="user" id="profile-popup"></UserPopup>
+      <UserPopup v-if="user" :user="user" class="profile-popup"></UserPopup>
-
     </div>
   </div>
-  <CropPopup
-    v-if="isCropPopupVisible"
-    :imageSrc="cropImageSrc"
-    :onCrop="handleCrop"
-    :onClose="closeCropPopup"
-  />
 </template>
 
 <script lang="ts" setup>
+import Button from '~/components/Button.vue';
 import type { UserResponse } from '~/types/interfaces';
 
-let newPfpFile: File;
-const isCropPopupVisible = ref(false);
-const cropImageSrc = ref("")
-;
 const { fetchUser } = useAuth();
 
 const user: UserResponse | undefined = await fetchUser()
@@ -46,6 +36,8 @@ if (!user) {
   alert("could not fetch user info, aborting :(")
 }
 
+let newPfpFile: File;
+
 async function saveChanges() {
   if (!user) return;
   
@@ -72,7 +64,7 @@ async function saveChanges() {
     alert('success!!')
   } catch (error: any) {
     if (error?.response?.status !== 200) {
-      alert(`error ${error?.response?.status} met whilst trying to update profile info\n"${error?.response._data?.message}"`)
+      alert(`error ${error?.response?.status} met whilst trying to update profile info`)
     }
   }
 };
@@ -95,11 +87,12 @@ async function changeAvatar() {
       const file = input.files[0];
       if (!file) return;
 
+      newPfpFile = file
+      
       const reader = new FileReader();
-      reader.addEventListener("load", () => {
+      reader.addEventListener("onload", () => {
         if (reader.result && typeof reader.result === 'string') {
-          cropImageSrc.value = reader.result;
+          user.avatar = reader.result;
-          isCropPopupVisible.value = true;
         }
       });
       reader.readAsDataURL(file);
@@ -108,19 +101,6 @@ async function changeAvatar() {
 
   input.click()
 }
-
-
-function handleCrop(blob: Blob, url: string) {
-  if (!user) return;
-
-  user.avatar = url;
-  newPfpFile = new File([blob], 'avatar.png', { type: 'image/png' })
-  closeCropPopup()
-}
-
-function closeCropPopup() {
-  isCropPopupVisible.value = false
-}
 </script>
 
 <style scoped>
@@ -145,7 +125,7 @@ function closeCropPopup() {
   background-color: var(--accent-color);
 }
 
-#profile-popup {
+.profile-popup {
   margin-left: 2dvw;
 }
 </style>

components/UserPopup.vue

@@ -59,14 +59,12 @@ const props = defineProps<{
   width: 96px;
   height: 96px;
   border: 5px solid #4b3018;
-  background-color: var(--secondary-color);
   border-radius: 100%;
   position: absolute;
   left: 16px;
   top: 16px;
 }
 
-
 #display-name {
   margin-top: 60px;
   margin-bottom: 0;

package.json

@@ -14,7 +14,6 @@
     "@nuxt/icon": "1.13.0",
     "@nuxt/image": "1.10.0",
     "@pinia/nuxt": "0.11.0",
-    "cropperjs": "^2.0.0",
     "dompurify": "^3.2.6",
     "marked": "^15.0.12",
     "nuxt": "^3.17.0",

pnpm-lock.yaml

@@ -20,9 +20,6 @@ importers:
       '@pinia/nuxt':
         specifier: 0.11.0
         version: 0.11.0(magicast@0.3.5)(pinia@3.0.2(typescript@5.8.3)(vue@3.5.13(typescript@5.8.3)))
-      cropperjs:
-        specifier: ^2.0.0
-        version: 2.0.0
       dompurify:
         specifier: ^3.2.6
         version: 3.2.6
@@ -208,39 +205,6 @@ packages:
     resolution: {integrity: sha512-Ir+AOibqzrIsL6ajt3Rz3LskB7OiMVHqltZmspbW/TJuTVuyOMirVqAkjfY6JISiLHgyNqicAC8AyHHGzNd/dA==}
     engines: {node: '>=0.1.90'}
 
-  '@cropper/element-canvas@2.0.0':
-    resolution: {integrity: sha512-GPtGJgSm92crJhhhwUsaMw3rz2KfJWWSz7kRAlufFEV/EHTP5+6r6/Z1BCGRna830i+Avqbm435XLOtA7PVJwA==}
-
-  '@cropper/element-crosshair@2.0.0':
-    resolution: {integrity: sha512-KfPfyrdeFvUC31Ws7ATtcalWWSaMtrC6bMoCipZhqbUOE7wZoL4ecDSL6BUOZxPa74awZUqfzirCDjHvheBfyw==}
-
-  '@cropper/element-grid@2.0.0':
-    resolution: {integrity: sha512-i78SQ0IJTLFveKX6P7svkfMYVdgHrQ8ZmmEw8keFy9n1ZVbK+SK0UHK5FNMRNI/gtVhKJOGEnK/zeyjUdj4Iyw==}
-
-  '@cropper/element-handle@2.0.0':
-    resolution: {integrity: sha512-ZJvW+0MkK9E8xYymGdoruaQn2kwjSHFpNSWinjyq6csuVQiCPxlX5ovAEDldmZ9MWePPtWEi3vLKQOo2Yb0T8g==}
-
-  '@cropper/element-image@2.0.0':
-    resolution: {integrity: sha512-9BxiTS/aHRmrjopaFQb9mQQXmx4ruhYHGkDZMVz24AXpMFjUY6OpqrWse/WjzD9tfhMFvEdu17b3VAekcAgpeg==}
-
-  '@cropper/element-selection@2.0.0':
-    resolution: {integrity: sha512-ensNnbIfJsJ8bhbJTH/RXtk2URFvTOO4TvfRk461n2FPEC588D7rwBmUJxQg74IiTi4y1JbCI+6j+4LyzYBLCQ==}
-
-  '@cropper/element-shade@2.0.0':
-    resolution: {integrity: sha512-jv/2bbNZnhU4W+T4G0c8ADocLIZvQFTXgCf2RFDNhI5UVxurzWBnDdb8Mx8LnVplnkTqO+xUmHZYve0CwgWo+Q==}
-
-  '@cropper/element-viewer@2.0.0':
-    resolution: {integrity: sha512-zY+3VRN5TvpM8twlphYtXw0tzJL2VgzeK7ufhL1BixVqOdRxwP13TprYIhqwGt9EW/SyJZUiaIu396T89kRX8A==}
-
-  '@cropper/element@2.0.0':
-    resolution: {integrity: sha512-lsthn0nQq73GExUE7Mg/ss6Q3RXADGDv055hxoLFwvl/wGHgy6ZkYlfLZ/VmgBHC6jDK5IgPBFnqrPqlXWSGBA==}
-
-  '@cropper/elements@2.0.0':
-    resolution: {integrity: sha512-PQkPo1nUjxLFUQuHYu+6atfHxpX9B41Xribao6wpvmvmNIFML6LQdNqqWYb6LyM7ujsu71CZdBiMT5oetjJVoQ==}
-
-  '@cropper/utils@2.0.0':
-    resolution: {integrity: sha512-cprLYr+7kK3faGgoOsTW9gIn5sefDr2KwOmgyjzIXk+8PLpW8FgFKEg5FoWfRD5zMAmkCBuX6rGKDK3VdUEGrg==}
-
   '@dabh/diagnostics@2.0.3':
     resolution: {integrity: sha512-hrlQOIi7hAfzsMqlGSFyVucrx38O+j6wiGOf//H2ecvIEqYN4ADBSS2iLMh5UFyDunCNniUIPk/q3riFv45xRA==}
 
@@ -1936,9 +1900,6 @@ packages:
     resolution: {integrity: sha512-onMB0OkDjkXunhdW9htFjEhqrD54+M94i6ackoUkjHKbRnXdyEyKRelp4nJ1kAz32+s27jP1FsebpJCVl0BsvA==}
     engines: {node: '>=18.0'}
 
-  cropperjs@2.0.0:
-    resolution: {integrity: sha512-TO2j0Qre01kPHbow4FuTrbdEB4jTmGRySxW49jyEIqlJZuEBfrvCTT0vC3eRB2WBXudDfKi1Onako6DKWKxeAQ==}
-
   cross-spawn@7.0.6:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
@@ -5004,72 +4965,6 @@ snapshots:
 
   '@colors/colors@1.6.0': {}
 
-  '@cropper/element-canvas@2.0.0':
-    dependencies:
-      '@cropper/element': 2.0.0
-      '@cropper/utils': 2.0.0
-
-  '@cropper/element-crosshair@2.0.0':
-    dependencies:
-      '@cropper/element': 2.0.0
-      '@cropper/utils': 2.0.0
-
-  '@cropper/element-grid@2.0.0':
-    dependencies:
-      '@cropper/element': 2.0.0
-      '@cropper/utils': 2.0.0
-
-  '@cropper/element-handle@2.0.0':
-    dependencies:
-      '@cropper/element': 2.0.0
-      '@cropper/utils': 2.0.0
-
-  '@cropper/element-image@2.0.0':
-    dependencies:
-      '@cropper/element': 2.0.0
-      '@cropper/element-canvas': 2.0.0
-      '@cropper/utils': 2.0.0
-
-  '@cropper/element-selection@2.0.0':
-    dependencies:
-      '@cropper/element': 2.0.0
-      '@cropper/element-canvas': 2.0.0
-      '@cropper/element-image': 2.0.0
-      '@cropper/utils': 2.0.0
-
-  '@cropper/element-shade@2.0.0':
-    dependencies:
-      '@cropper/element': 2.0.0
-      '@cropper/element-canvas': 2.0.0
-      '@cropper/element-selection': 2.0.0
-      '@cropper/utils': 2.0.0
-
-  '@cropper/element-viewer@2.0.0':
-    dependencies:
-      '@cropper/element': 2.0.0
-      '@cropper/element-canvas': 2.0.0
-      '@cropper/element-image': 2.0.0
-      '@cropper/element-selection': 2.0.0
-      '@cropper/utils': 2.0.0
-
-  '@cropper/element@2.0.0':
-    dependencies:
-      '@cropper/utils': 2.0.0
-
-  '@cropper/elements@2.0.0':
-    dependencies:
-      '@cropper/element': 2.0.0
-      '@cropper/element-canvas': 2.0.0
-      '@cropper/element-crosshair': 2.0.0
-      '@cropper/element-grid': 2.0.0
-      '@cropper/element-handle': 2.0.0
-      '@cropper/element-image': 2.0.0
-      '@cropper/element-selection': 2.0.0
-      '@cropper/element-shade': 2.0.0
-      '@cropper/element-viewer': 2.0.0
-
-  '@cropper/utils@2.0.0': {}
-
   '@dabh/diagnostics@2.0.3':
     dependencies:
       colorspace: 1.1.4
@@ -7000,11 +6895,6 @@ snapshots:
 
   croner@9.0.0: {}
 
-  cropperjs@2.0.0:
-    dependencies:
-      '@cropper/elements': 2.0.0
-      '@cropper/utils': 2.0.0
-
   cross-spawn@7.0.6:
     dependencies:
       path-key: 3.1.1