adding some zod form validations to email

HolodexNet · Jun 10, 2024 · 8d63973 · 8d63973
1 parent 2f7bda6
commit 8d63973
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 10 deletions.
diff --git a/packages/react/src/components/about/EmailForm.tsx b/packages/react/src/components/about/EmailForm.tsx
@@ -12,16 +12,30 @@ import { Input } from "@/shadcn/ui/input";
 import { Textarea } from "@/shadcn/ui/textarea";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+
+const formSchema = z.object({
+  name: z.string().min(1, { message: "Name is required" }),
+  email: z
+    .string()
+    .min(1, { message: "Email is required" })
+    .email({ message: "Email is invalid" }),
+  message: z.string().min(80, { message: "Message is required" }),
+});
 
 export function AboutFaqEmailForm() {
   const { t } = useTranslation();
-  const form = useForm({
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
     defaultValues: {
       name: "",
       email: "",
       message: "",
     },
   });
+
   const { mutate } = useReportMutation({ type: "contact" });
 
   return (
@@ -41,7 +55,7 @@ export function AboutFaqEmailForm() {
               <FormItem>
                 <FormLabel>{t("about.contactForm.name")}</FormLabel>
                 <FormControl>
-                  <Input placeholder="Type here" {...field} />
+                  <Input type="text" placeholder="Type here" {...field} />
                 </FormControl>
                 <FormMessage />
               </FormItem>
@@ -74,7 +88,7 @@ export function AboutFaqEmailForm() {
             </FormItem>
           )}
         />
-        <Button type="submit" variant="secondary" className="mt-4">
+        <Button type="submit" variant="ghost" className="mt-4">
           {t("about.contactForm.sendButton")}
         </Button>
       </form>

diff --git a/packages/react/src/components/player/QueueList.tsx b/packages/react/src/components/player/QueueList.tsx
@@ -1,4 +1,3 @@
-import { miniplayerVideoAtom } from "@/store/player";
 import { queueAtom } from "@/store/queue";
 import { useAtom, useAtomValue } from "jotai";
 import { VideoCard } from "../video/VideoCard";

diff --git a/packages/react/src/routes/settings/user.tsx b/packages/react/src/routes/settings/user.tsx
@@ -58,7 +58,7 @@ export function SettingsUser() {
 
   return (
     <div className="flex flex-col p-2 md:p-4">
-      <div className="flex items-center gap-6">
+      <div className="mb-4 flex items-center gap-6">
         <img
           className="h-24 w-24 rounded-full"
           src={`https://api.dicebear.com/7.x/shapes/svg?seed=${user.id}`}
@@ -158,26 +158,26 @@ export function SettingsUser() {
           </Button>
         </div>
       </div>
-      <SettingsItem label={t("views.login.linkAcc")}>
+      <SettingsItem label={t("views.login.linkAcc")} fullWidth>
         <LoginButtons />
       </SettingsItem>
-      <SettingsItem label={t("views.login.username")}>
+      <SettingsItem label={t("views.login.username")} fullWidth>
         <div className="ml-auto flex w-full max-w-md items-center gap-2">
           <Input placeholder={user.username} />
           <Button className="whitespace-nowrap">
             {t("views.watch.uploadPanel.usernameChange")}
           </Button>
         </div>
       </SettingsItem>
-      <SettingsItem label={t("views.login.ownedYtChannel")}>
+      {/* <SettingsItem label={t("views.login.ownedYtChannel")}>
         <div className="ml-auto flex max-w-md flex-col gap-2">
           <Input className="ml-auto max-w-md" value="None on file" disabled />
           <span className="text-xs text-base-11">
             {t("views.login.futureYtcOwnerMessage")}
           </span>
         </div>
-      </SettingsItem>
-      <SettingsItem label="API Key">
+      </SettingsItem> */}
+      <SettingsItem label="API Key" fullWidth>
         <div className="ml-auto flex w-full max-w-md flex-col gap-4">
           <div className="flex items-center gap-2">
             <Input value={user.api_key} readOnly />