From 3f23b60c9d6c8bbf98576f41f72de66d322b5de4 Mon Sep 17 00:00:00 2001
From: ngc2207 <cfngc3109@gmail.com>
Date: Fri, 31 Jan 2025 16:42:12 +0800
Subject: [PATCH] feat(ui): implement sign-in/sign-up form with validation

---
 src/features/auth/components/sign-in-card.tsx | 23 +++++++-------
 src/features/auth/components/sign-up-card.tsx | 30 +++++++++++--------
 2 files changed, 30 insertions(+), 23 deletions(-)

diff --git a/src/features/auth/components/sign-in-card.tsx b/src/features/auth/components/sign-in-card.tsx
index 3680e4a..6817021 100644
--- a/src/features/auth/components/sign-in-card.tsx
+++ b/src/features/auth/components/sign-in-card.tsx
@@ -7,31 +7,32 @@ import {
   FormItem,
   FormMessage,
 } from "@/components/ui/form";
+import { loginSchema } from "../schema";
 import { FcGoogle } from "react-icons/fc";
 import { FaGithub } from "react-icons/fa";
 import { useForm } from "react-hook-form";
+import { useLogin } from "../api/use-login";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Separator } from "@/components/ui/separator";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 
-const formSchema = z.object({
-  email: z.string().email(),
-  password: z.string().min(1, "Required"),
-});
-
 export const SignInCard = () => {
-  const form = useForm<z.infer<typeof formSchema>>({
-    resolver: zodResolver(formSchema),
+  const { mutate } = useLogin();
+
+  const form = useForm<z.infer<typeof loginSchema>>({
+    resolver: zodResolver(loginSchema),
     defaultValues: {
       email: "",
       password: "",
     },
   });
 
-  const onSubmit = (values: z.infer<typeof formSchema>) => {
-    console.log({ values });
+  const onSubmit = (values: z.infer<typeof loginSchema>) => {
+    mutate({
+      json: values,
+    });
   };
 
   return (
@@ -113,7 +114,9 @@ export const SignInCard = () => {
         <p>
           Don&apos;t have an account?{" "}
           <Link href="/sign-up">
-            <span className="underline underline-offset-4 hover:text-blue-700">Sign Up</span>
+            <span className="underline underline-offset-4 hover:text-blue-700">
+              Sign Up
+            </span>
           </Link>
         </p>
       </CardContent>
diff --git a/src/features/auth/components/sign-up-card.tsx b/src/features/auth/components/sign-up-card.tsx
index 9ec130f..7f23060 100644
--- a/src/features/auth/components/sign-up-card.tsx
+++ b/src/features/auth/components/sign-up-card.tsx
@@ -17,20 +17,18 @@ import {
 import { FcGoogle } from "react-icons/fc";
 import { FaGithub } from "react-icons/fa";
 import { useForm } from "react-hook-form";
+import { registerSchema } from "../schema";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
+import { useRegister } from "../api/use-register";
 import { Separator } from "@/components/ui/separator";
 import { zodResolver } from "@hookform/resolvers/zod";
 
-const formSchema = z.object({
-  name: z.string().trim().min(1, "Required"),
-  email: z.string().email(),
-  password: z.string().min(8, "Minimum of 8 characters required"),
-});
-
 export const SignUpCard = () => {
-  const form = useForm<z.infer<typeof formSchema>>({
-    resolver: zodResolver(formSchema),
+  const { mutate } = useRegister();
+
+  const form = useForm<z.infer<typeof registerSchema>>({
+    resolver: zodResolver(registerSchema),
     defaultValues: {
       name: "",
       email: "",
@@ -38,8 +36,8 @@ export const SignUpCard = () => {
     },
   });
 
-  const onSubmit = (values: z.infer<typeof formSchema>) => {
-    console.log({ values });
+  const onSubmit = (values: z.infer<typeof registerSchema>) => {
+    mutate({ json: values });
   };
 
   return (
@@ -49,11 +47,15 @@ export const SignUpCard = () => {
         <CardDescription>
           By signing up, you&apos;re giving a nod to our{" "}
           <Link href="/privacy">
-            <span className="hover:underline underline-offset-4 text-blue-700">Privacy Policy</span>
+            <span className="hover:underline underline-offset-4 text-blue-700">
+              Privacy Policy
+            </span>
           </Link>{" "}
           and{" "}
           <Link href="/terms">
-            <span className="hover:underline underline-offset-4 text-blue-700">Terms of service</span>
+            <span className="hover:underline underline-offset-4 text-blue-700">
+              Terms of service
+            </span>
           </Link>
         </CardDescription>
       </CardHeader>
@@ -147,7 +149,9 @@ export const SignUpCard = () => {
         <p>
           Already have an account?{" "}
           <Link href="/sign-in">
-            <span className="underline underline-offset-4 hover:text-blue-700">Sign In</span>
+            <span className="underline underline-offset-4 hover:text-blue-700">
+              Sign In
+            </span>
           </Link>
         </p>
       </CardContent>