diff --git a/frontend/src/main-page/settings/ProfilePictureModal.tsx b/frontend/src/main-page/settings/ProfilePictureModal.tsx
new file mode 100644
index 0000000..24725c7
--- /dev/null
+++ b/frontend/src/main-page/settings/ProfilePictureModal.tsx
@@ -0,0 +1,262 @@
+import { useState, useCallback } from "react";
+import Cropper, { Area } from "react-easy-crop";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faXmark } from "@fortawesome/free-solid-svg-icons";
+import Button from "../../components/Button";
+import { getCroppedImg } from "./cropUtils";
+import {
+ ALLOWED_PROFILE_PIC_MIME_TYPES,
+ ALLOWED_PROFILE_PIC_EXTENSIONS,
+ MAX_PROFILE_PIC_SIZE_BYTES,
+ MAX_PROFILE_PIC_SIZE_MB,
+} from "./profilePictureConstants";
+import { api } from "../../api";
+import { getAppStore } from "../../external/bcanSatchel/store";
+import { updateUserProfile } from "../../external/bcanSatchel/actions";
+import { setActiveUsers } from "../../external/bcanSatchel/actions";
+import { User } from "../../../../middle-layer/types/User";
+
+type ProfilePictureModalProps = {
+ isOpen: boolean;
+ onClose: () => void;
+ onSuccess?: () => void;
+ onError?: (message: string) => void;
+};
+
+export default function ProfilePictureModal({
+ isOpen,
+ onClose,
+ onSuccess,
+ onError,
+}: ProfilePictureModalProps) {
+ const [imageSrc, setImageSrc] = useState(null);
+ const [crop, setCrop] = useState({ x: 0, y: 0 });
+ const [zoom, setZoom] = useState(1.6);
+ const [croppedAreaPixels, setCroppedAreaPixels] = useState(null);
+ const [uploadError, setUploadError] = useState(null);
+ const [isUploading, setIsUploading] = useState(false);
+ const [validationError, setValidationError] = useState(null);
+
+ const user = getAppStore().user;
+
+ const onCropComplete = useCallback((_croppedArea: Area, croppedAreaPixels: Area) => {
+ setCroppedAreaPixels(croppedAreaPixels);
+ }, []);
+
+ const handleClose = () => {
+ setImageSrc(null);
+ setCrop({ x: 0, y: 0 });
+ setZoom(1.6);
+ setCroppedAreaPixels(null);
+ setUploadError(null);
+ setValidationError(null);
+ setIsUploading(false);
+ onClose();
+ };
+
+ const handleFileChange = (e: React.ChangeEvent) => {
+ const file = e.target.files?.[0];
+ e.target.value = "";
+
+ setValidationError(null);
+ setUploadError(null);
+
+ if (!file) return;
+
+ if (!ALLOWED_PROFILE_PIC_MIME_TYPES.includes(file.type as (typeof ALLOWED_PROFILE_PIC_MIME_TYPES)[number])) {
+ setValidationError(
+ `Invalid file type. Allowed: ${ALLOWED_PROFILE_PIC_EXTENSIONS.join(", ")}`
+ );
+ return;
+ }
+
+ if (file.size > MAX_PROFILE_PIC_SIZE_BYTES) {
+ setValidationError(`File too large. Maximum size is ${MAX_PROFILE_PIC_SIZE_MB} MB.`);
+ return;
+ }
+
+ const reader = new FileReader();
+ reader.addEventListener("load", () => {
+ setImageSrc(reader.result as string);
+ });
+ reader.readAsDataURL(file);
+ };
+
+ const handleSave = async () => {
+ if (!imageSrc || !croppedAreaPixels || !user) return;
+
+ setIsUploading(true);
+ setUploadError(null);
+
+ try {
+ const blob = await getCroppedImg(imageSrc, croppedAreaPixels);
+ const formData = new FormData();
+ formData.append("profilePic", blob, "profilepic.jpg");
+ formData.append(
+ "user",
+ JSON.stringify({
+ firstName: user.firstName,
+ lastName: user.lastName,
+ email: user.email,
+ position: user.position,
+ })
+ );
+
+ const response = await api("/user/upload-pfp", {
+ method: "POST",
+ body: formData,
+ });
+
+ if (!response.ok) {
+ const errBody = await response.json().catch(() => ({}));
+ const message =
+ (errBody as { message?: string }).message ||
+ `Upload failed (${response.status})`;
+ throw new Error(message);
+ }
+
+ const raw = await response.text();
+ let url: string;
+ try {
+ const parsed = JSON.parse(raw);
+ url = typeof parsed === "string" ? parsed : String(parsed);
+ } catch {
+ url = raw.replace(/^"|"$/g, "").trim();
+ }
+
+ updateUserProfile({ ...user, profilePicUrl: url });
+
+ const store = getAppStore();
+ const updatedActiveUsers = (store.activeUsers || []).map((u: User) =>
+ u.email === user.email ? { ...u, profilePicUrl: url } : u
+ );
+ setActiveUsers(updatedActiveUsers);
+
+ handleClose();
+ onSuccess?.();
+ } catch (err) {
+ const message = err instanceof Error ? err.message : "Failed to upload profile picture.";
+ setUploadError(message);
+ onError?.(message);
+ } finally {
+ setIsUploading(false);
+ }
+ };
+
+ if (!isOpen) return null;
+
+ return (
+
+
+
+
+ Profile Picture
+
+
+
+
+ {!imageSrc ? (
+
+
+ {validationError && (
+
+ {validationError}
+
+ )}
+
+ ) : (
+ <>
+
+
+
+
+
+
+
setZoom(Number(e.target.value))}
+ className="w-full h-2 rounded-lg appearance-none cursor-pointer bg-grey-300 accent-primary-900"
+ />
+
{zoom.toFixed(1)}x
+
+
+ {(uploadError || validationError) && (
+
+ {uploadError ?? validationError}
+
+ )}
+
+
+
+
+ )}
+
+
-
Profile Picture
+ {profilePictureMessage && (
+
+ {profilePictureMessage.text}
+
+ )}
- We support PNGs, JPEGs, and PDFs under 10 MB
+ {ALLOWED_PROFILE_PIC_EXTENSIONS.join(", ")} up to {MAX_PROFILE_PIC_SIZE_MB} MB
+ setIsProfilePictureModalOpen(false)}
+ onSuccess={() => setProfilePictureMessage({ type: "success", text: "Profile picture updated." })}
+ onError={(msg) => setProfilePictureMessage({ type: "error", text: msg })}
+ />
+
setIsChangePasswordModalOpen(false)}
error={changePasswordError}
onSubmit={(values) => {
- // Backend: call API with values.currentPassword and values.newPassword
void values;
}}
/>
);
}
+
+export default observer(Settings);
diff --git a/frontend/src/main-page/settings/cropUtils.ts b/frontend/src/main-page/settings/cropUtils.ts
new file mode 100644
index 0000000..d0a534c
--- /dev/null
+++ b/frontend/src/main-page/settings/cropUtils.ts
@@ -0,0 +1,55 @@
+/**
+ * Creates a cropped image blob from the source image and crop area.
+ * Used with react-easy-crop's onCropComplete (croppedAreaPixels).
+ */
+export async function getCroppedImg(
+ imageSrc: string,
+ pixelCrop: { x: number; y: number; width: number; height: number }
+): Promise