handle keycloak user prefills in update-account form

app/auth/update-account/_components/update-account-form.tsx

@@ -2,8 +2,6 @@
 
 import Link from 'next/link';
 
-import { User } from '@supabase/supabase-js';
-
 import { ExternalLink } from '@/public/assets/external-link';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
@@ -23,31 +21,52 @@ import { Trans } from '@kit/ui/trans';
 
 import { UpdateAccountSchema } from '../_lib/schemas/update-account.schema';
 import { onUpdateAccount } from '../_lib/server/update-account';
+import { z } from 'zod';
 
-export function UpdateAccountForm({ user }: { user: User }) {
+type UpdateAccountFormValues = z.infer<typeof UpdateAccountSchema>;
+
+export function UpdateAccountForm({
+  defaultValues,
+}: {
+  defaultValues: UpdateAccountFormValues,
+}) {
   const form = useForm({
     resolver: zodResolver(UpdateAccountSchema),
     mode: 'onChange',
-    defaultValues: {
+    defaultValues,
-      firstName: '',
-      lastName: '',
-      personalCode: '',
-      email: user.email,
-      phone: '',
-      city: '',
-      weight: 0,
-      height: 0,
-      userConsent: false,
-    },
   });
+
+  const { firstName, lastName, personalCode, email, weight, height, userConsent } = defaultValues;
+
+  const hasFirstName = !!firstName;
+  const hasLastName = !!lastName;
+  const hasPersonalCode = !!personalCode;
+  const hasEmail = !!email;
+  const hasWeight = !!weight;
+  const hasHeight = !!height;
+  const hasUserConsent = !!userConsent;
+
+  const onUpdateAccountOptions = async (values: UpdateAccountFormValues) =>
+    onUpdateAccount({
+      ...values,
+      ...(hasFirstName && { firstName }),
+      ...(hasLastName && { lastName }),
+      ...(hasPersonalCode && { personalCode }),
+      ...(hasEmail && { email }),
+      ...(hasWeight && { weight: values.weight ?? weight }),
+      ...(hasHeight && { height: values.height ?? height }),
+      ...(hasUserConsent && { userConsent: values.userConsent ?? userConsent }),
+    });
+
   return (
     <Form {...form}>
       <form
         className="flex flex-col gap-6 px-6 pt-10 text-left"
-        onSubmit={form.handleSubmit(onUpdateAccount)}
+        onSubmit={form.handleSubmit(onUpdateAccountOptions)}
       >
         <FormField
           name="firstName"
+          disabled={hasFirstName}
           render={({ field }) => (
             <FormItem>
               <FormLabel>
@@ -63,6 +82,7 @@ export function UpdateAccountForm({ user }: { user: User }) {
 
         <FormField
           name="lastName"
+          disabled={hasLastName}
           render={({ field }) => (
             <FormItem>
               <FormLabel>
@@ -78,6 +98,7 @@ export function UpdateAccountForm({ user }: { user: User }) {
 
         <FormField
           name="personalCode"
+          disabled={hasPersonalCode}
           render={({ field }) => (
             <FormItem>
               <FormLabel>
@@ -93,13 +114,14 @@ export function UpdateAccountForm({ user }: { user: User }) {
 
         <FormField
           name="email"
+          disabled={hasEmail}
           render={({ field }) => (
             <FormItem>
               <FormLabel>
                 <Trans i18nKey={'common:formField:email'} />
               </FormLabel>
               <FormControl>
-                <Input {...field} disabled />
+                <Input {...field} />
               </FormControl>
               <FormMessage />
             </FormItem>

app/auth/update-account/page.tsx

@@ -11,18 +11,39 @@ import { Trans } from '@kit/ui/trans';
 import { withI18n } from '~/lib/i18n/with-i18n';
 
 import { UpdateAccountForm } from './_components/update-account-form';
+import { loadCurrentUserAccount } from '@/app/home/(user)/_lib/server/load-user-account';
+import { toTitleCase } from '~/lib/utils';
 
 async function UpdateAccount() {
   const client = getSupabaseServerClient();
+  const account = await loadCurrentUserAccount();
 
   const {
     data: { user },
   } = await client.auth.getUser();
+  const isKeycloakUser = user?.app_metadata?.provider === 'keycloak';
 
   if (!user) {
     redirect(pathsConfig.auth.signIn);
   }
 
+  const defaultValues = {
+    firstName: account?.name ? toTitleCase(account.name) : '',
+    lastName: account?.last_name ? toTitleCase(account.last_name) : '',
+    personalCode: account?.personal_code ?? '',
+    email: (() => {
+      if (isKeycloakUser) {
+        return account?.email ?? '';
+      }
+      return account?.email ?? user?.email ?? '';
+    })(),
+    phone: account?.phone ?? '',
+    city: account?.city ?? '',
+    weight: account?.accountParams?.weight ?? 0,
+    height: account?.accountParams?.height ?? 0,
+    userConsent: account?.has_consent_personal_data ?? false,
+  };
+
   return (
     <div className="border-border flex max-w-5xl flex-row overflow-hidden rounded-3xl border">
       <div className="relative flex min-w-md flex-col px-12 pt-7 pb-22 text-center md:w-1/2">
@@ -34,7 +55,7 @@ async function UpdateAccount() {
         <p className="text-muted-foreground pt-1 text-sm">
           <Trans i18nKey={'account:updateAccount:description'} />
         </p>
-        <UpdateAccountForm user={user} />
+        <UpdateAccountForm defaultValues={defaultValues} />
       </div>
       <div className="hidden w-1/2 min-w-[460px] bg-[url(/assets/med-report-logo-big.png)] bg-cover bg-center bg-no-repeat md:block"></div>
     </div>