CodeSandBox/judge4c_backup_new
2
0
Fork 0
mirror of https://gitlab.massbug.com/massbug/judge4c.git synced 2025-07-04 15:22:25 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(ui): implement sign-in/sign-up form with validation

Browse Source
This commit is contained in:
ngc2207 2025-01-31 16:42:12 +08:00
parent 90853fa69a
commit 3f23b60c9d
2 changed files with 30 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/features/auth/components/sign-in-card.tsx
View File

@ -7,31 +7,32 @@ import {
FormItem, FormItem,
FormMessage, FormMessage,
} from "@/components/ui/form"; } from "@/components/ui/form";
import { loginSchema } from "../schema";
import { FcGoogle } from "react-icons/fc"; import { FcGoogle } from "react-icons/fc";
import { FaGithub } from "react-icons/fa"; import { FaGithub } from "react-icons/fa";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import { useLogin } from "../api/use-login";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import { Separator } from "@/components/ui/separator"; import { Separator } from "@/components/ui/separator";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; 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 = () => { export const SignInCard = () => {
const form = useForm<z.infer<typeof formSchema>>({ const { mutate } = useLogin();
resolver: zodResolver(formSchema),
const form = useForm<z.infer<typeof loginSchema>>({
resolver: zodResolver(loginSchema),
defaultValues: { defaultValues: {
email: "", email: "",
password: "", password: "",
}, },
}); });
const onSubmit = (values: z.infer<typeof formSchema>) => { const onSubmit = (values: z.infer<typeof loginSchema>) => {
console.log({ values }); mutate({
json: values,
});
}; };
return ( return (
@ -113,7 +114,9 @@ export const SignInCard = () => {
<p> <p>
Don&apos;t have an account?{" "} Don&apos;t have an account?{" "}
<Link href="/sign-up"> <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> </Link>
</p> </p>
</CardContent> </CardContent>

30
src/features/auth/components/sign-up-card.tsx
View File

@ -17,20 +17,18 @@ import {
import { FcGoogle } from "react-icons/fc"; import { FcGoogle } from "react-icons/fc";
import { FaGithub } from "react-icons/fa"; import { FaGithub } from "react-icons/fa";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import { registerSchema } from "../schema";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { useRegister } from "../api/use-register";
import { Separator } from "@/components/ui/separator"; import { Separator } from "@/components/ui/separator";
import { zodResolver } from "@hookform/resolvers/zod"; 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 = () => { export const SignUpCard = () => {
const form = useForm<z.infer<typeof formSchema>>({ const { mutate } = useRegister();
resolver: zodResolver(formSchema),
const form = useForm<z.infer<typeof registerSchema>>({
resolver: zodResolver(registerSchema),
defaultValues: { defaultValues: {
name: "", name: "",
email: "", email: "",
@ -38,8 +36,8 @@ export const SignUpCard = () => {
}, },
}); });
const onSubmit = (values: z.infer<typeof formSchema>) => { const onSubmit = (values: z.infer<typeof registerSchema>) => {
console.log({ values }); mutate({ json: values });
}; };
return ( return (
@ -49,11 +47,15 @@ export const SignUpCard = () => {
<CardDescription> <CardDescription>
By signing up, you&apos;re giving a nod to our{" "} By signing up, you&apos;re giving a nod to our{" "}
<Link href="/privacy"> <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>{" "} </Link>{" "}
and{" "} and{" "}
<Link href="/terms"> <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> </Link>
</CardDescription> </CardDescription>
</CardHeader> </CardHeader>
@ -147,7 +149,9 @@ export const SignUpCard = () => {
<p> <p>
Already have an account?{" "} Already have an account?{" "}
<Link href="/sign-in"> <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> </Link>
</p> </p>
</CardContent> </CardContent>