refactor(auth): update sign-in and sign-up cards to use loading states

This commit is contained in:
ngc2207 2025-02-01 10:03:28 +08:00
parent afb1b05c0a
commit 40636d2d52
2 changed files with 13 additions and 9 deletions

View File

@ -1,3 +1,5 @@
"use client";
import { z } from "zod";
import Link from "next/link";
import {
@ -19,7 +21,7 @@ import { Separator } from "@/components/ui/separator";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
export const SignInCard = () => {
const { mutate } = useLogin();
const { mutate, isPending } = useLogin();
const form = useForm<z.infer<typeof loginSchema>>({
resolver: zodResolver(loginSchema),
@ -78,7 +80,7 @@ export const SignInCard = () => {
</FormItem>
)}
/>
<Button disabled={false} size="lg" className="w-full">
<Button disabled={isPending} size="lg" className="w-full">
Login
</Button>
</form>
@ -89,7 +91,7 @@ export const SignInCard = () => {
</div>
<CardContent className="p-7 flex flex-col gap-y-4">
<Button
disabled={false}
disabled={isPending}
variant="secondary"
size="lg"
className="w-full"
@ -98,7 +100,7 @@ export const SignInCard = () => {
Login with Google
</Button>
<Button
disabled={false}
disabled={isPending}
variant="secondary"
size="lg"
className="w-full"

View File

@ -1,3 +1,5 @@
"use client";
import { z } from "zod";
import Link from "next/link";
import {
@ -25,7 +27,7 @@ import { Separator } from "@/components/ui/separator";
import { zodResolver } from "@hookform/resolvers/zod";
export const SignUpCard = () => {
const { mutate } = useRegister();
const { mutate, isPending } = useRegister();
const form = useForm<z.infer<typeof registerSchema>>({
resolver: zodResolver(registerSchema),
@ -113,8 +115,8 @@ export const SignUpCard = () => {
</FormItem>
)}
/>
<Button disabled={false} size="lg" className="w-full">
Login
<Button disabled={isPending} size="lg" className="w-full">
Register
</Button>
</form>
</Form>
@ -124,7 +126,7 @@ export const SignUpCard = () => {
</div>
<CardContent className="p-7 flex flex-col gap-y-4">
<Button
disabled={false}
disabled={isPending}
variant="secondary"
size="lg"
className="w-full"
@ -133,7 +135,7 @@ export const SignUpCard = () => {
Login with Google
</Button>
<Button
disabled={false}
disabled={isPending}
variant="secondary"
size="lg"
className="w-full"