ADD CROSS DOMAIN SUPPORT

apps/dashboard/src/modals/EditClient.tsx

@@ -1,10 +1,12 @@
 import { ButtonContainer } from '@/components/button-container';
-import { InputWithLabel } from '@/components/forms/input-with-label';
+import { InputWithLabel, WithLabel } from '@/components/forms/input-with-label';
+import TagInput from '@/components/forms/tag-input';
 import { Button } from '@/components/ui/button';
+import { CheckboxInput } from '@/components/ui/checkbox';
 import { api, handleError } from '@/trpc/client';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useRouter } from 'next/navigation';
-import { useForm } from 'react-hook-form';
+import { Controller, useForm } from 'react-hook-form';
 import { toast } from 'sonner';
 import { z } from 'zod';
 
@@ -19,20 +21,28 @@ const validator = z.object({
   id: z.string().min(1),
   name: z.string().min(1),
   cors: z.string().nullable(),
+  crossDomain: z.boolean().optional(),
 });
 
 type IForm = z.infer<typeof validator>;
 
-export default function EditClient({ id, name, cors }: EditClientProps) {
+export default function EditClient({
+  id,
+  name,
+  cors,
+  crossDomain,
+}: EditClientProps) {
   const router = useRouter();
-  const { register, handleSubmit, reset, formState } = useForm<IForm>({
-    resolver: zodResolver(validator),
-    defaultValues: {
-      id,
-      name,
-      cors,
-    },
-  });
+  const { register, handleSubmit, reset, formState, control, setError } =
+    useForm<IForm>({
+      resolver: zodResolver(validator),
+      defaultValues: {
+        id,
+        name,
+        cors,
+        crossDomain,
+      },
+    });
 
   const mutation = api.client.update.useMutation({
     onError: handleError,
@@ -51,6 +61,13 @@ export default function EditClient({ id, name, cors }: EditClientProps) {
       <ModalHeader title="Edit client" />
       <form
         onSubmit={handleSubmit((values) => {
+          if (!values.cors) {
+            return setError('cors', {
+              type: 'required',
+              message: 'Please add a domain',
+            });
+          }
+
           mutation.mutate(values);
         })}
       >
@@ -60,10 +77,61 @@ export default function EditClient({ id, name, cors }: EditClientProps) {
             placeholder="Name"
             {...register('name')}
           />
-          <InputWithLabel
-            label="Cors"
-            placeholder="Cors"
-            {...register('cors')}
+
+          <Controller
+            name="cors"
+            control={control}
+            render={({ field }) => (
+              <WithLabel
+                label="Domain(s)"
+                error={formState.errors.cors?.message}
+              >
+                <TagInput
+                  {...field}
+                  error={formState.errors.cors?.message}
+                  placeholder="Add a domain"
+                  value={field.value?.split(',') ?? []}
+                  renderTag={(tag) => (tag === '*' ? 'Allow domains' : tag)}
+                  onChange={(newValue) => {
+                    field.onChange(
+                      newValue
+                        .map((item) => {
+                          const trimmed = item.trim();
+                          if (
+                            trimmed.startsWith('http://') ||
+                            trimmed.startsWith('https://') ||
+                            trimmed === '*'
+                          ) {
+                            return trimmed;
+                          }
+                          return `https://${trimmed}`;
+                        })
+                        .join(',')
+                    );
+                  }}
+                />
+              </WithLabel>
+            )}
+          />
+
+          <Controller
+            name="crossDomain"
+            control={control}
+            render={({ field }) => {
+              return (
+                <CheckboxInput
+                  ref={field.ref}
+                  onBlur={field.onBlur}
+                  defaultChecked={field.value}
+                  onCheckedChange={field.onChange}
+                >
+                  <div>Enable cross domain support</div>
+                  <div className="font-normal text-muted-foreground">
+                    This will let you track users across multiple domains
+                  </div>
+                </CheckboxInput>
+              );
+            }}
           />
         </div>
         <ButtonContainer>