Massbug/judge4c
2
0
Fork 0
mirror of https://github.com/massbug/judge4c.git synced 2025-05-18 07:16:34 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(credentials-sign-in-form): add loading state, error handling, and navigation after sign in

Browse Source
This commit is contained in:
cfngc4594 2025-03-18 22:50:59 +08:00
parent bef8dcee44
commit 7ecef7679f
1 changed files with 23 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/credentials-sign-in-form.tsx
View File

@ -9,11 +9,13 @@ import {
FormLabel, FormLabel,
FormMessage, FormMessage,
} from "@/components/ui/form"; } from "@/components/ui/form";
import { useState } from "react"; import { toast } from "sonner";
import { authSchema } from "@/lib/zod"; import { authSchema } from "@/lib/zod";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import { useRouter } from "next/navigation";
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 { useState, useTransition } from "react";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import { signInWithCredentials } from "@/app/actions/auth"; import { signInWithCredentials } from "@/app/actions/auth";
import { EyeIcon, EyeOffIcon, MailIcon } from "lucide-react"; import { EyeIcon, EyeOffIcon, MailIcon } from "lucide-react";
@ -21,6 +23,10 @@ import { EyeIcon, EyeOffIcon, MailIcon } from "lucide-react";
export type CredentialsSignInFormValues = z.infer<typeof authSchema>; export type CredentialsSignInFormValues = z.infer<typeof authSchema>;
export function CredentialsSignInForm() { export function CredentialsSignInForm() {
const router = useRouter();
const [isPending, startTransition] = useTransition();
const [isVisible, setIsVisible] = useState(false);
const form = useForm<CredentialsSignInFormValues>({ const form = useForm<CredentialsSignInFormValues>({
resolver: zodResolver(authSchema), resolver: zodResolver(authSchema),
defaultValues: { defaultValues: {
@ -29,11 +35,21 @@ export function CredentialsSignInForm() {
}, },
}); });
const [isVisible, setIsVisible] = useState<boolean>(false); const toggleVisibility = () => setIsVisible((prev) => !prev);
const toggleVisibility = () => setIsVisible((prevState) => !prevState);
const onSubmit = async (data: CredentialsSignInFormValues) => { const onSubmit = (data: CredentialsSignInFormValues) => {
await signInWithCredentials(data); startTransition(async () => {
const result = await signInWithCredentials(data);
if (result?.error) {
toast.error("Sign In Failed", {
description: result.error,
});
} else {
toast.success("Signed In Successfully");
router.push("/dashboard");
}
});
}; };
return ( return (
@ -92,8 +108,8 @@ export function CredentialsSignInForm() {
)} )}
/> />
<Button type="submit" className="w-full"> <Button type="submit" disabled={isPending} className="w-full">
Sign In {isPending ? "Signing In..." : "Sign In"}
</Button> </Button>
</form> </form>
</Form> </Form>