added spinner to signin button
All checks were successful
Vercel Production Deployment / Deploy-Production (push) Successful in 2m28s

This commit is contained in:
ChrQR 2024-05-17 23:22:31 +02:00
parent 6f18a4cb48
commit 3370ab6a03

View File

@ -1,32 +1,48 @@
"use client"; "use client";
import { signIn, signOut } from "next-auth/react"; import { signIn, signOut } from "next-auth/react";
import { SyntheticEvent } from "react"; import { SyntheticEvent, useState } from "react";
import { Session } from "next-auth"; import { Session } from "next-auth";
import { Button } from "@nextui-org/button"; import { Button } from "@nextui-org/button";
import { Spinner } from "@nextui-org/react";
interface SignInProps { interface SignInProps {
session: Session | null; session: Session | null;
} }
export default function SignIn({ session }: SignInProps) { export default function SignIn({ session }: SignInProps) {
const [loading, setLoading] = useState(false);
const handleSignIn = async (event: SyntheticEvent) => { const handleSignIn = async (event: SyntheticEvent) => {
event.preventDefault(); event.preventDefault();
setLoading(true);
await signIn("github"); await signIn("github");
}; };
const handleSignOut = async (event: SyntheticEvent) => { const handleSignOut = async (event: SyntheticEvent) => {
event.preventDefault(); event.preventDefault();
setLoading(true);
await signOut(); await signOut();
}; };
return session?.user ? ( return (
<>
{session?.user ? (
<form onSubmit={handleSignOut}> <form onSubmit={handleSignOut}>
<Button type="submit">Sign out</Button> <Button type="submit" disabled={loading}>
Sign out
</Button>
</form> </form>
) : ( ) : (
<form onSubmit={handleSignIn}> <form onSubmit={handleSignIn}>
<Button type="submit">Sign in</Button> {!loading ? (
<Button type="submit" disabled={loading}>
Sign in
</Button>
) : (
<Spinner color="success" />
)}
</form> </form>
)}
</>
); );
} }