diff --git a/apps/main/src/pages/settings.tsx b/apps/main/src/pages/settings.tsx index e841b39..9a71ce8 100644 --- a/apps/main/src/pages/settings.tsx +++ b/apps/main/src/pages/settings.tsx @@ -34,6 +34,8 @@ import { useOrganization, useRemoveOrganizationMember, useUpdateOrganization, + useUploadOrgLogo, + useRemoveOrgLogo, } from "../hooks/organization"; import { useRemoveAvatar, useUpdateProfile, useUploadAvatar } from "../hooks/profile"; import { useCookieConsent } from "../hooks/useCookieConsent"; @@ -59,6 +61,9 @@ export default function SettingsPage() { useInviteOrganizationUser(); const { mutate: removeOrganizationMember, isPending: removeOrganizationMemberPending } = useRemoveOrganizationMember(); + const { mutate: uploadOrgLogo, isPending: uploadOrgLogoPending } = useUploadOrgLogo(); + const { mutate: removeOrgLogo, isPending: removeOrgLogoPending } = useRemoveOrgLogo(); + const orgLogoInputRef = useRef(null); const [firstName, setFirstName] = useState(user?.first_name || ""); const [lastName, setLastName] = useState(user?.last_name || ""); @@ -192,6 +197,43 @@ export default function SettingsPage() { } }; + const handleOrgLogoChange = (e: React.ChangeEvent) => { + const file = e.target.files?.[0]; + if (!file) return; + + if (!file.type.startsWith("image/")) { + toast.add({ + title: t("settings:toasts.error"), + description: t("settings:toasts.invalidImage"), + type: "error", + position: "top-center", + }); + return; + } + + // Validate minimum size client-side + const img = new Image(); + img.onload = () => { + URL.revokeObjectURL(img.src); + if (img.width < 512 || img.height < 512) { + toast.add({ + title: t("settings:toasts.error"), + description: "L'image doit faire au moins 512x512 pixels", + type: "error", + position: "top-center", + }); + return; + } + uploadOrgLogo(file); + }; + img.src = URL.createObjectURL(file); + + // Reset input to allow selecting same file again + if (orgLogoInputRef.current) { + orgLogoInputRef.current.value = ""; + } + }; + return (
@@ -372,6 +414,68 @@ export default function SettingsPage() { {t("settings:organization.description")} + {/* Organization Logo */} +
+ +
+ {organizationData?.organization?.logo_url ? ( + Organization logo + ) : ( +
+ +
+ )} +
+ + + {organizationData?.organization?.logo_url && ( + + )} +
+
+

+ {t("settings:organization.logoHint", "PNG, JPEG ou WebP, minimum 512x512 pixels")} +

+
+