fix: sign-in page

This commit is contained in:
shadcn 2023-06-16 21:28:44 +04:00
parent 7ce8ae0867
commit 071778533c
3 changed files with 23 additions and 12 deletions

View file

@ -1,13 +1,9 @@
import { FooterText } from '@/components/footer'
import { LoginButton } from '@/components/login-button' import { LoginButton } from '@/components/login-button'
export default function SignInPage() { export default function SignInPage() {
return ( return (
<div className="flex flex-col items-center justify-center h-full min-h-screen"> <div className="flex h-[calc(100vh-theme(spacing.16))] items-center justify-center py-10">
<div className="space-y-4"> <LoginButton />
<LoginButton />
<FooterText />
</div>
</div> </div>
) )
} }

View file

@ -41,7 +41,12 @@ export async function Header() {
{session?.user ? ( {session?.user ? (
<UserMenu user={session.user} /> <UserMenu user={session.user} />
) : ( ) : (
<LoginButton className="-ml-2" /> <LoginButton
variant="link"
showGithubIcon={false}
text="Login"
className="-ml-2"
/>
)} )}
</div> </div>
</div> </div>

View file

@ -5,18 +5,24 @@ import { signIn } from 'next-auth/react'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
import { Button, type ButtonProps } from '@/components/ui/button' import { Button, type ButtonProps } from '@/components/ui/button'
import { IconSpinner } from '@/components/ui/icons' import { IconGitHub, IconSpinner } from '@/components/ui/icons'
interface LoginButtonProps extends ButtonProps { interface LoginButtonProps extends ButtonProps {
showGithubIcon?: boolean
text?: string text?: string
} }
export function LoginButton({ className, ...props }: LoginButtonProps) { export function LoginButton({
text = 'Login with GitHub',
showGithubIcon = true,
className,
...props
}: LoginButtonProps) {
const [isLoading, setIsLoading] = React.useState(false) const [isLoading, setIsLoading] = React.useState(false)
return ( return (
<Button <Button
variant="link" variant="outline"
onClick={() => { onClick={() => {
setIsLoading(true) setIsLoading(true)
signIn('github') signIn('github')
@ -25,8 +31,12 @@ export function LoginButton({ className, ...props }: LoginButtonProps) {
className={cn(className)} className={cn(className)}
{...props} {...props}
> >
{isLoading && <IconSpinner className="mr-2 animate-spin" />} {isLoading ? (
Login <IconSpinner className="mr-2 animate-spin" />
) : showGithubIcon ? (
<IconGitHub className="mr-2" />
) : null}
{text}
</Button> </Button>
) )
} }