feature(dashboard): actually add password production to overviews

apps/dashboard/src/modals/ShareOverviewModal.tsx

@@ -6,12 +6,13 @@ import { useAppParams } from '@/hooks/useAppParams';
 import { api, handleError } from '@/trpc/client';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useRouter } from 'next/navigation';
-import { Controller, useForm } from 'react-hook-form';
+import { Controller, useForm, useWatch } from 'react-hook-form';
 import { toast } from 'sonner';
 import type { z } from 'zod';
 
 import { zShareOverview } from '@openpanel/validation';
 
+import { Input } from '@/components/ui/input';
 import { popModal } from '.';
 import { ModalContent, ModalHeader } from './Modal/Container';
 
@@ -23,7 +24,7 @@ export default function ShareOverviewModal() {
   const { projectId, organizationId } = useAppParams();
   const router = useRouter();
 
-  const { register, handleSubmit, control } = useForm<IForm>({
+  const { register, handleSubmit } = useForm<IForm>({
     resolver: zodResolver(validator),
     defaultValues: {
       public: true,
@@ -47,46 +48,27 @@ export default function ShareOverviewModal() {
   });
 
   return (
-    <ModalContent>
-      <ModalHeader title="Overview access" />
+    <ModalContent className="max-w-md">
+      <ModalHeader
+        title="Dashboard public availability"
+        text="You can choose if you want to add a password to make it a bit more private."
+      />
       <form
-        className="flex flex-col gap-4"
         onSubmit={handleSubmit((values) => {
           mutation.mutate(values);
         })}
       >
-        <Controller
-          name="public"
-          control={control}
-          render={({ field }) => (
-            <label
-              htmlFor="public"
-              className="mb-4 flex items-center gap-2  font-medium leading-none"
-            >
-              <Checkbox
-                id="public"
-                ref={field.ref}
-                onBlur={field.onBlur}
-                defaultChecked={field.value}
-                onCheckedChange={(checked) => {
-                  field.onChange(checked);
-                }}
-              />
-              Make it public!
-            </label>
-          )}
-        />
-        <InputWithLabel
-          label="Password"
-          placeholder="Make your overview accessable with password"
+        <Input
           {...register('password')}
+          placeholder="Enter your password"
+          size="large"
         />
         <ButtonContainer>
           <Button type="button" variant="outline" onClick={() => popModal()}>
             Cancel
           </Button>
           <Button type="submit" loading={mutation.isLoading}>
-            Update
+            Make it public
           </Button>
         </ButtonContainer>
       </form>