CodeSandBox/judge4c_backup_new
2
0
Fork 0
mirror of https://gitlab.massbug.com/massbug/judge4c.git synced 2025-07-04 10:04:17 +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,
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>

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

@ -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>