wip

apps/remix/app/components/forms/profile.tsx

@@ -0,0 +1,142 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { trpc } from '@documenso/trpc/react';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { Label } from '@documenso/ui/primitives/label';
+import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useAuth } from '~/providers/auth';
+
+export const ZProfileFormSchema = z.object({
+  name: z.string().trim().min(1, { message: 'Please enter a valid name.' }),
+  signature: z.string().min(1, 'Signature Pad cannot be empty'),
+});
+
+export const ZTwoFactorAuthTokenSchema = z.object({
+  token: z.string(),
+});
+
+export type TTwoFactorAuthTokenSchema = z.infer<typeof ZTwoFactorAuthTokenSchema>;
+export type TProfileFormSchema = z.infer<typeof ZProfileFormSchema>;
+
+export type ProfileFormProps = {
+  className?: string;
+};
+
+export const ProfileForm = ({ className }: ProfileFormProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+  const { user } = useAuth();
+
+  const form = useForm<TProfileFormSchema>({
+    values: {
+      name: user.name ?? '',
+      signature: user.signature || '',
+    },
+    resolver: zodResolver(ZProfileFormSchema),
+  });
+
+  const isSubmitting = form.formState.isSubmitting;
+
+  const { mutateAsync: updateProfile } = trpc.profile.updateProfile.useMutation();
+
+  const onFormSubmit = async ({ name, signature }: TProfileFormSchema) => {
+    try {
+      await updateProfile({
+        name,
+        signature,
+      });
+
+      toast({
+        title: _(msg`Profile updated`),
+        description: _(msg`Your profile has been updated successfully.`),
+        duration: 5000,
+      });
+
+      // router.refresh(); // Todo
+    } catch (err) {
+      toast({
+        title: _(msg`An unknown error occurred`),
+        description: _(
+          msg`We encountered an unknown error while attempting update your profile. Please try again later.`,
+        ),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <Form {...form}>
+      <form
+        className={cn('flex w-full flex-col gap-y-4', className)}
+        onSubmit={form.handleSubmit(onFormSubmit)}
+      >
+        <fieldset className="flex w-full flex-col gap-y-4" disabled={isSubmitting}>
+          <FormField
+            control={form.control}
+            name="name"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>
+                  <Trans>Full Name</Trans>
+                </FormLabel>
+                <FormControl>
+                  <Input type="text" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <div>
+            <Label htmlFor="email" className="text-muted-foreground">
+              <Trans>Email</Trans>
+            </Label>
+            <Input id="email" type="email" className="bg-muted mt-2" value={user.email} disabled />
+          </div>
+          <FormField
+            control={form.control}
+            name="signature"
+            render={({ field: { onChange } }) => (
+              <FormItem>
+                <FormLabel>
+                  <Trans>Signature</Trans>
+                </FormLabel>
+                <FormControl>
+                  <SignaturePad
+                    className="h-44 w-full"
+                    disabled={isSubmitting}
+                    containerClassName={cn('rounded-lg border bg-background')}
+                    defaultValue={user.signature ?? undefined}
+                    onChange={(v) => onChange(v ?? '')}
+                    allowTypedSignature={true}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </fieldset>
+
+        <Button type="submit" loading={isSubmitting} className="self-end">
+          {isSubmitting ? <Trans>Updating profile...</Trans> : <Trans>Update profile</Trans>}
+        </Button>
+      </form>
+    </Form>
+  );
+};