fix: sign-in page
This commit is contained in:
parent
7ce8ae0867
commit
071778533c
3 changed files with 23 additions and 12 deletions
|
|
@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue