Get password auth working.
This commit is contained in:
@@ -252,24 +252,27 @@ const SignIn = () => {
|
||||
<Tabs
|
||||
defaultValue={flow}
|
||||
onValueChange={(value) => setFlow(value as 'signIn' | 'signUp')}
|
||||
className='items-center'
|
||||
className='items-center flex-col'
|
||||
>
|
||||
<TabsList className='py-6'>
|
||||
<TabsList>
|
||||
<TabsTrigger
|
||||
value='signIn'
|
||||
className='cursor-pointer p-6 text-2xl font-bold'
|
||||
className='cursor-pointer py-2 px-6 text-2xl font-bold'
|
||||
>
|
||||
Sign In
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value='signUp'
|
||||
className='cursor-pointer p-6 text-2xl font-bold'
|
||||
className='cursor-pointer py-2 px-6 text-2xl font-bold'
|
||||
>
|
||||
Sign Up
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value='signIn'>
|
||||
<Card className='bg-card/50 min-w-xs sm:min-w-sm'>
|
||||
<TabsContent
|
||||
value='signIn'
|
||||
className='min-h-[560px] items-center flex flex-row'
|
||||
>
|
||||
<Card className='bg-card/50 min-w-xs sm:min-w-sm py-10'>
|
||||
<CardContent>
|
||||
<Form {...signInForm}>
|
||||
<form
|
||||
|
||||
@@ -42,7 +42,7 @@ const RootLayout = ({
|
||||
domain={env.NEXT_PUBLIC_SITE_URL}
|
||||
customDomain={env.NEXT_PUBLIC_PLAUSIBLE_URL}
|
||||
>
|
||||
<html lang='en'>
|
||||
<html lang='en' suppressHydrationWarning>
|
||||
<body
|
||||
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
||||
>
|
||||
|
||||
@@ -53,7 +53,7 @@ export const UserInfoForm = ({
|
||||
const userProvider = usePreloadedQuery(preloadedProvider);
|
||||
const providerMap: Record<string, string> = {
|
||||
unknown: 'Provider',
|
||||
authentik: 'Gib\'s Auth'
|
||||
authentik: 'Gib\'s Auth',
|
||||
};
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
@@ -168,4 +168,3 @@ export const UserInfoForm = ({
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -28,7 +28,7 @@ export default function Header(headerProps: ComponentProps<'header'>) {
|
||||
alt='Convex Monorepo'
|
||||
width={50}
|
||||
height={50}
|
||||
className='invert dark:invert-0'
|
||||
className='invert dark:invert-0 w-15'
|
||||
/>
|
||||
<span
|
||||
className={`mb-3 hidden font-extrabold lg:inline lg:text-5xl ${kanitSans.className}`}
|
||||
|
||||
@@ -8,7 +8,7 @@ export default function UseSendProvider(config: EmailUserConfig): EmailConfig {
|
||||
id: 'usesend',
|
||||
type: 'email',
|
||||
name: 'UseSend',
|
||||
from: 'Study Buddy <admin@techtracker.gbrown.org>',
|
||||
from: 'Convex Monorepo <admin@convexmonorepo.gbrown.org>',
|
||||
maxAge: 24 * 60 * 60, // 24 hours
|
||||
|
||||
async generateVerificationToken() {
|
||||
@@ -23,7 +23,7 @@ export default function UseSendProvider(config: EmailUserConfig): EmailConfig {
|
||||
async sendVerificationRequest(params) {
|
||||
const { identifier: to, provider, url, theme, token } = params;
|
||||
//const { host } = new URL(url);
|
||||
const host = 'TechTracker';
|
||||
const host = 'Convex Monorepo';
|
||||
|
||||
const useSend = new UseSend(
|
||||
process.env.USESEND_API_KEY!,
|
||||
|
||||
@@ -1,24 +1,24 @@
|
||||
'use client';
|
||||
|
||||
import type { ComponentProps } from 'react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Moon, Sun } from 'lucide-react';
|
||||
import { ThemeProvider as NextThemesProvider, useTheme } from 'next-themes';
|
||||
|
||||
import { Button, cn } from '@gib/ui';
|
||||
import {
|
||||
Button,
|
||||
cn,
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from '@gib/ui';
|
||||
|
||||
|
||||
const ThemeProvider = ({
|
||||
children,
|
||||
...props
|
||||
}: ComponentProps<typeof NextThemesProvider>) => {
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
if (!mounted) return null;
|
||||
return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
|
||||
return <NextThemesProvider {...props}>{children}</NextThemesProvider>
|
||||
};
|
||||
|
||||
interface ThemeToggleProps {
|
||||
@@ -27,44 +27,41 @@ interface ThemeToggleProps {
|
||||
}
|
||||
|
||||
const ThemeToggle = ({ size = 1, buttonProps }: ThemeToggleProps) => {
|
||||
const { setTheme, resolvedTheme } = useTheme();
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
if (!mounted) {
|
||||
return (
|
||||
<Button {...buttonProps}>
|
||||
<span style={{ height: `${size}rem`, width: `${size}rem` }} />
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
const toggleTheme = () => {
|
||||
if (resolvedTheme === 'dark') setTheme('light');
|
||||
else setTheme('dark');
|
||||
};
|
||||
const { setTheme } = useTheme();
|
||||
|
||||
return (
|
||||
<Button
|
||||
variant='outline'
|
||||
size='icon'
|
||||
{...buttonProps}
|
||||
onClick={toggleTheme}
|
||||
className={cn('cursor-pointer', buttonProps?.className)}
|
||||
>
|
||||
<Sun
|
||||
style={{ height: `${size}rem`, width: `${size}rem` }}
|
||||
className='scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90'
|
||||
/>
|
||||
<Moon
|
||||
style={{ height: `${size}rem`, width: `${size}rem` }}
|
||||
className='absolute scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0'
|
||||
/>
|
||||
</Button>
|
||||
);
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
{...buttonProps}
|
||||
className={cn('cursor-pointer', buttonProps?.className)}
|
||||
>
|
||||
<Sun
|
||||
style={{ height: `${size}rem`, width: `${size}rem` }}
|
||||
className='scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90'
|
||||
/>
|
||||
<Moon
|
||||
style={{ height: `${size}rem`, width: `${size}rem` }}
|
||||
className='absolute scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0'
|
||||
/>
|
||||
<span className="sr-only">Toggle theme</span>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={() => setTheme("light")}>
|
||||
Light
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => setTheme("dark")}>
|
||||
Dark
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => setTheme("system")}>
|
||||
System
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
)
|
||||
};
|
||||
|
||||
export { ThemeProvider, ThemeToggle, type ThemeToggleProps };
|
||||
|
||||
Reference in New Issue
Block a user