Add profile picture upload for users and organizations

.changeset/gold-actors-type.md

@@ -0,0 +1,5 @@
+---
+"@nmi-agro/fdm-app": minor
+---
+
+Users can now upload their profile picture and organizations can now upload their logo, which will be stored in the GCS and displayed using the existing user.image and organization.logo database record fields. The profile pictures and logos, including those retrieved previously from social login, can also be deleted.

fdm-app/app/components/blocks/mijnpercelen/form-upload.tsx

@@ -238,6 +238,7 @@ export function MijnPercelenUploadForm({
                               onBlur={onBlur}
                               onFilesChange={handleFilesSet}
                               className={cn(
+                                "h-32",
                                 hasAllRequiredFiles && "border-green-500 bg-green-50",
                                 uploadState === "error" && "border-red-500 bg-red-50",
                                 uploadState === "success" && "border-green-500 bg-green-50",

fdm-app/app/components/blocks/organization/form.tsx

@@ -1,9 +1,16 @@
 import { zodResolver } from "@hookform/resolvers/zod"
-import { useEffect } from "react"
+import { Building, X } from "lucide-react"
+import { useEffect, useRef, useState, useTransition } from "react"
 import { Controller } from "react-hook-form"
-import { Form, type HTMLFormMethod } from "react-router"
+import { useFetcher, type HTMLFormMethod } from "react-router"
 import { RemixFormProvider, useRemixForm } from "remix-hook-form"
+import z from "zod"
 import type { ParsedOrganization } from "~/lib/organization-helpers"
+import {
+  cropProfilePicture,
+  MAX_SIZE_BYTES,
+  ProfilePictureInput,
+} from "~/components/blocks/profile/profile-picture-manager"
 import { Button } from "~/components/ui/button"
 import {
   Card,
@@ -17,23 +24,51 @@ import { Field, FieldError, FieldLabel } from "~/components/ui/field"
 import { Input } from "~/components/ui/input"
 import { Spinner } from "~/components/ui/spinner"
 import { Textarea } from "~/components/ui/textarea"
-import { FormSchema } from "./schema"
+import { OrganizationInfoSchema } from "./schema"
 
+const FormSchema = OrganizationInfoSchema.extend({ intent: z.literal("update_organization_info") })
 export function OrganizationSettingsForm({
+  className,
   organization,
   action,
   method = "POST",
   canModify,
+  profilePictureField,
 }: {
+  className?: string
   organization?: ParsedOrganization
   action?: string
   method?: HTMLFormMethod
   canModify: boolean
+  profilePictureField: boolean
 }) {
+  const fetcher = useFetcher()
+
+  const [profilePictureFiles, setProfilePictureFiles] = useState<File[]>([])
+
+  const [isProcessingForm, processForm] = useTransition()
+
+  const formRef = useRef<HTMLFormElement>(null)
   const form = useRemixForm({
     mode: "onTouched",
     resolver: zodResolver(FormSchema),
+    fetcher: fetcher,
+    stringifyAllValues: false,
+    submitHandlers: {
+      async onValid() {
+        if (!formRef.current) return
+        const formData = new FormData(formRef.current)
+        processForm(async () => {
+          const formDataWithCroppedPic = await cropProfilePicture(formData)
+          fetcher.submit(formDataWithCroppedPic, {
+            method: "post",
+            encType: "multipart/form-data",
+          })
+        })
+      },
+    },
     defaultValues: {
+      intent: "update_organization_info" as const,
       name: organization?.name,
       slug: organization?.slug,
       description: organization?.metadata?.data?.description,
@@ -52,10 +87,12 @@ export function OrganizationSettingsForm({
   // Reset the form when the organization changes
   useEffect(() => {
     form.reset({
+      intent: "update_organization_info" as const,
       name: organization?.name,
       slug: organization?.slug,
       description: organization?.metadata?.data?.description,
     })
+    setProfilePictureFiles([])
   }, [form.reset, !!organization, organization?.slug])
 
   // Update slug when name changes
@@ -69,24 +106,26 @@ export function OrganizationSettingsForm({
     }
   }, [organizationName, form.getValues, form.setValue])
 
-  const disabled = !canModify || form.formState.isSubmitting
+  const isSubmitting = isProcessingForm || fetcher.state !== "idle"
+  const disabled = !canModify || isSubmitting
   return (
-    <Card className="mx-auto max-w-3xl">
+    <Card className={className}>
       <RemixFormProvider {...form}>
-        <Form action={action} method={method} onSubmit={form.handleSubmit}>
+        <fetcher.Form ref={formRef} action={action} method={method} onSubmit={form.handleSubmit}>
           <CardHeader>
             <CardTitle>Organisatiegegevens</CardTitle>
             <CardDescription>Voer de gegevens van je organisatie in.</CardDescription>
           </CardHeader>
           <CardContent className="space-y-4">
             <fieldset disabled={disabled} className="space-y-4">
+              <input type="hidden" name="intent" value="update_organization_info" />
               <Controller
                 name="name"
                 control={form.control}
                 render={({ field, fieldState }) => (
                   <Field data-invalid={fieldState.invalid}>
                     <FieldLabel>Naam organisatie</FieldLabel>
-                    <Input {...field} type="text" required />
+                    <Input {...field} value={field.value ?? ""} type="text" required />
                     {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
                   </Field>
                 )}
@@ -97,7 +136,13 @@ export function OrganizationSettingsForm({
                 render={({ field, fieldState }) => (
                   <Field data-invalid={fieldState.invalid}>
                     <FieldLabel>Organisatie ID</FieldLabel>
-                    <Input {...field} type="text" disabled />
+                    <Input
+                      {...field}
+                      value={field.value ?? ""}
+                      type="text"
+                      readOnly
+                      className="text-muted-foreground pointer-events-none"
+                    />
                     {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
                   </Field>
                 )}
@@ -112,20 +157,49 @@ export function OrganizationSettingsForm({
                       placeholder="Een korte toelichting op je organisatie zodat andere gebruikers er meer te weten over komen."
                       className="resize-none"
                       {...field}
+                      value={field.value ?? ""}
                     />
                     {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
                   </Field>
                 )}
               />
+              {profilePictureField && (
+                <Field>
+                  <FieldLabel>Logo (optioneel)</FieldLabel>
+                  <div className="relative mx-auto max-w-sm">
+                    <ProfilePictureInput
+                      appAspectRatio={3 / 2}
+                      frameShape="rectangle"
+                      cropBounds="outer"
+                      files={profilePictureFiles}
+                      onFilesChange={setProfilePictureFiles}
+                      maxFileSize={MAX_SIZE_BYTES}
+                      avatarFallback={<Building className="text-muted-foreground size-3/4" />}
+                    />
+                    {profilePictureFiles.length > 0 ? (
+                      <Button
+                        variant="ghost"
+                        type="button"
+                        onClick={() => setProfilePictureFiles([])}
+                        className="hover:text-destructive absolute top-2 right-2 size-auto text-gray-100 has-[>svg]:px-1 has-[>svg]:py-1"
+                        title="Logo verwijderen"
+                        aria-label="Logo verwijderen"
+                      >
+                        <X className="h-4 w-4" />
+                      </Button>
+                    ) : null}
+                  </div>
+                </Field>
+              )}
             </fieldset>
           </CardContent>
           <CardFooter className="flex-row justify-end">
             <Button type="submit" disabled={disabled}>
-              {form.formState.isSubmitting && <Spinner />}
+              {isSubmitting && <Spinner />}
               {organization ? "Bijwerken" : "Aanmaken"}
             </Button>
           </CardFooter>
-        </Form>
+        </fetcher.Form>
       </RemixFormProvider>
     </Card>
   )

fdm-app/app/components/blocks/organization/organization-avatar.tsx

@@ -0,0 +1,22 @@
+import { Building } from "lucide-react"
+import { cn } from "@/app/lib/utils"
+import { Avatar, AvatarFallback, AvatarImage } from "~/components/ui/avatar"
+
+export function OrganizationAvatar({
+  src,
+  alt,
+  className,
+}: {
+  src: string | null | undefined
+  alt: string
+  className?: string
+}) {
+  return (
+    <Avatar className={cn("rounded-lg", className)}>
+      {typeof src === "string" ? <AvatarImage src={src} alt={alt} /> : undefined}
+      <AvatarFallback className="rounded-lg">
+        <Building className="text-muted-foreground size-3/4" />
+      </AvatarFallback>
+    </Avatar>
+  )
+}

fdm-app/app/components/blocks/organization/organization-card.tsx

@@ -1,16 +1,18 @@
-import { ArrowRight, Building } from "lucide-react"
+import { ArrowRight } from "lucide-react"
 import { NavLink } from "react-router"
 import { Badge } from "~/components/ui/badge"
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "~/components/ui/card"
 import {
   getOrganizationRoleLabel,
   type ParseOrganizationMetadataResult,
 } from "~/lib/organization-helpers"
+import { OrganizationAvatar } from "./organization-avatar"
 
 type OrganizationRole = "owner" | "admin" | "member"
 export interface OrganizationWithRoles {
   slug: string
   name: string | null
+  logo?: string | null | undefined
   metadata: ParseOrganizationMetadataResult
   userRoles: OrganizationRole[]
 }
@@ -23,9 +25,11 @@ export function OrganizationCard({ organization }: { organization: OrganizationW
         <CardHeader>
           <div className="flex items-start justify-between">
             <div className="flex items-center gap-3">
-              <div className="bg-muted text-muted-foreground group-hover:bg-primary/10 group-hover:text-primary flex h-10 w-10 items-center justify-center rounded-lg transition-colors">
-                <Building className="h-5 w-5" />
-              </div>
+              <OrganizationAvatar
+                src={organization.logo}
+                alt={`Logo van ${organization.name}`}
+                className="size-10"
+              />
               <div>
                 <CardTitle className="text-xl">{organization.name}</CardTitle>
                 <div className="mt-1 flex gap-1">

fdm-app/app/components/blocks/organization/schema.ts

@@ -16,7 +16,7 @@ function isValidSlug(slug: string): boolean {
   return /^[a-z0-9]+(-[a-z0-9]+)*$/.test(slug)
 }
 
-export const FormSchema = z.object({
+export const OrganizationInfoFields = {
   name: z
     .string({
       error: (issue) =>
@@ -36,4 +36,6 @@ export const FormSchema = z.object({
       error: "ID moet minimaal 3 karakters bevatten, enkel kleine letters, cijfers of '-'",
     }),
   description: z.string({}).optional(),
-})
+}
+
+export const OrganizationInfoSchema = z.object(OrganizationInfoFields)

fdm-app/app/components/blocks/profile/detect-existing.server.ts

@@ -0,0 +1,24 @@
+/**
+ * Detect if the user might have an existing profile picture in GCS based on the image URL.
+ * If so, returns the object key for it.
+ *
+ * @param imageUrl URL to check
+ * @returns the object key if the url matches the pattern for a profile picture that is stored in GCS, null otherwise.
+ */
+export function detectExistingProfilePictureObjectKey(imageUrl: string | null | undefined) {
+  if (typeof imageUrl !== "string") {
+    return null
+  }
+
+  const types = ["user", "organization"] as const
+
+  for (const type of types) {
+    const prefix = `/api/profile-picture/${type}/`
+    if (imageUrl.startsWith(prefix)) {
+      const fileName = imageUrl.substring(prefix.length).split("?")[0]
+      return `profile_picture_${type}/${fileName}`
+    }
+  }
+
+  return null
+}

fdm-app/app/components/blocks/profile/profile-info-form.tsx

@@ -0,0 +1,77 @@
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useEffect } from "react"
+import { Controller } from "react-hook-form"
+import { Form, useFetcher } from "react-router"
+import { RemixFormProvider, useRemixForm } from "remix-hook-form"
+import z from "zod"
+import { Button } from "~/components/ui/button"
+import { Field, FieldError, FieldLabel } from "~/components/ui/field"
+import { Input } from "~/components/ui/input"
+import { Spinner } from "~/components/ui/spinner"
+import { ProfileInfoSchema } from "./profile-info-schema"
+
+const InfoFormSchema = ProfileInfoSchema.extend({ intent: z.literal("update_profile_info") })
+export function ProfileInfoForm({
+  user,
+}: {
+  user: { firstname?: string | null | undefined; surname?: string | null | undefined }
+}) {
+  const fetcher = useFetcher()
+
+  const isSubmitting = fetcher.state !== "idle"
+
+  const form = useRemixForm({
+    mode: "onTouched",
+    resolver: zodResolver(InfoFormSchema),
+    fetcher: fetcher,
+    stringifyAllValues: false,
+    defaultValues: {
+      intent: "update_profile_info" as const,
+      firstname: user.firstname ?? "",
+      surname: user.surname ?? "",
+    },
+  })
+
+  useEffect(() => {
+    form.reset({
+      intent: "update_profile_info" as const,
+      firstname: user.firstname ?? "",
+      surname: user.surname ?? "",
+    })
+  }, [user, form.reset])
+
+  return (
+    <RemixFormProvider {...form}>
+      <Form method="post" onSubmit={form.handleSubmit} className="space-y-6">
+        <fieldset disabled={isSubmitting} className="space-y-4">
+          <input type="hidden" name="intent" value="update_profile_info" />
+          <Controller
+            name="firstname"
+            render={({ field, fieldState }) => (
+              <Field>
+                <FieldLabel>Voornaam</FieldLabel>
+                <Input {...field} type="text" />
+                {fieldState.error && <FieldError errors={[fieldState.error]} />}
+              </Field>
+            )}
+          />
+          <Controller
+            name="surname"
+            render={({ field, fieldState }) => (
+              <Field>
+                <FieldLabel>Achternaam</FieldLabel>
+                <Input {...field} type="text" />
+                {fieldState.error && <FieldError errors={[fieldState.error]} />}
+              </Field>
+            )}
+          />
+        </fieldset>
+        <div className="flex flex-row items-center justify-end gap-2">
+          <Button type="submit" disabled={isSubmitting}>
+            Opslaan{isSubmitting && <Spinner />}
+          </Button>
+        </div>
+      </Form>
+    </RemixFormProvider>
+  )
+}

fdm-app/app/components/blocks/profile/profile-info-schema.ts

@@ -0,0 +1,20 @@
+import z from "zod"
+
+export const ProfileInfoSchema = z.object({
+  firstname: z
+    .string({
+      error: (issue) => (issue.input === undefined ? "Vul je voornaam in" : undefined),
+    })
+    .trim()
+    .min(1, {
+      error: "Vul je voornaam in",
+    }),
+  surname: z
+    .string({
+      error: (issue) => (issue.input === undefined ? "Vul je achternaam in" : undefined),
+    })
+    .trim()
+    .min(1, {
+      error: "Vul je achternaam in",
+    }),
+})