Links prefetching (#225)
1. Marketing Layout: speed up rendering by retrieving user session from cookies instead of using server side request 2. Use "redirecting" state when signing in to keep displaying a loading state while Next.js redirects to home page 3. Use "useCallback" to prevent double tracking when switching pages 4. Add links pre-fetching in marketing navigation 5. Add new pending state to MFA verification form 6. Pre-fetch sign-in/sign-up pages 7. Fix i18n when using regional languages 8. currency formatter should default to the region if it exists 9. Update packages
This commit is contained in:
committed by
GitHub
parent
7c4dd23e5d
commit
7a1903d0c2
@@ -9,12 +9,12 @@
|
|||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@hookform/resolvers": "^4.1.3",
|
"@hookform/resolvers": "^4.1.3",
|
||||||
"@tanstack/react-query": "5.69.2",
|
"@tanstack/react-query": "5.70.0",
|
||||||
"lucide-react": "^0.484.0",
|
"lucide-react": "^0.485.0",
|
||||||
"next": "15.2.4",
|
"next": "15.2.4",
|
||||||
"nodemailer": "^6.10.0",
|
"nodemailer": "^6.10.0",
|
||||||
"react": "19.0.0",
|
"react": "19.1.0",
|
||||||
"react-dom": "19.0.0"
|
"react-dom": "19.1.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@kit/email-templates": "workspace:*",
|
"@kit/email-templates": "workspace:*",
|
||||||
@@ -29,7 +29,7 @@
|
|||||||
"@types/react-dom": "19.0.4",
|
"@types/react-dom": "19.0.4",
|
||||||
"babel-plugin-react-compiler": "19.0.0-beta-e1e972c-20250221",
|
"babel-plugin-react-compiler": "19.0.0-beta-e1e972c-20250221",
|
||||||
"pino-pretty": "^13.0.0",
|
"pino-pretty": "^13.0.0",
|
||||||
"react-hook-form": "^7.54.2",
|
"react-hook-form": "^7.55.0",
|
||||||
"tailwindcss": "4.0.17",
|
"tailwindcss": "4.0.17",
|
||||||
"tailwindcss-animate": "^1.0.7",
|
"tailwindcss-animate": "^1.0.7",
|
||||||
"typescript": "^5.8.2",
|
"typescript": "^5.8.2",
|
||||||
|
|||||||
@@ -3,11 +3,11 @@
|
|||||||
import dynamic from 'next/dynamic';
|
import dynamic from 'next/dynamic';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
|
|
||||||
import type { User } from '@supabase/supabase-js';
|
import { useQuery } from '@tanstack/react-query';
|
||||||
|
|
||||||
import { PersonalAccountDropdown } from '@kit/accounts/personal-account-dropdown';
|
import { PersonalAccountDropdown } from '@kit/accounts/personal-account-dropdown';
|
||||||
import { useSignOut } from '@kit/supabase/hooks/use-sign-out';
|
import { useSignOut } from '@kit/supabase/hooks/use-sign-out';
|
||||||
import { useUser } from '@kit/supabase/hooks/use-user';
|
import { useSupabase } from '@kit/supabase/hooks/use-supabase';
|
||||||
import { Button } from '@kit/ui/button';
|
import { Button } from '@kit/ui/button';
|
||||||
import { If } from '@kit/ui/if';
|
import { If } from '@kit/ui/if';
|
||||||
import { Trans } from '@kit/ui/trans';
|
import { Trans } from '@kit/ui/trans';
|
||||||
@@ -29,30 +29,17 @@ const features = {
|
|||||||
enableThemeToggle: featuresFlagConfig.enableThemeToggle,
|
enableThemeToggle: featuresFlagConfig.enableThemeToggle,
|
||||||
};
|
};
|
||||||
|
|
||||||
export function SiteHeaderAccountSection({
|
export function SiteHeaderAccountSection() {
|
||||||
user,
|
const session = useSession();
|
||||||
}: React.PropsWithChildren<{
|
|
||||||
user: User | null;
|
|
||||||
}>) {
|
|
||||||
if (!user) {
|
|
||||||
return <AuthButtons />;
|
|
||||||
}
|
|
||||||
|
|
||||||
return <SuspendedPersonalAccountDropdown user={user} />;
|
|
||||||
}
|
|
||||||
|
|
||||||
function SuspendedPersonalAccountDropdown(props: { user: User | null }) {
|
|
||||||
const signOut = useSignOut();
|
const signOut = useSignOut();
|
||||||
const user = useUser(props.user);
|
|
||||||
const userData = user.data ?? props.user ?? null;
|
|
||||||
|
|
||||||
if (userData) {
|
if (session.data) {
|
||||||
return (
|
return (
|
||||||
<PersonalAccountDropdown
|
<PersonalAccountDropdown
|
||||||
showProfileName={false}
|
showProfileName={false}
|
||||||
paths={paths}
|
paths={paths}
|
||||||
features={features}
|
features={features}
|
||||||
user={userData}
|
user={session.data.user}
|
||||||
signOutRequested={() => signOut.mutateAsync()}
|
signOutRequested={() => signOut.mutateAsync()}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
@@ -63,7 +50,7 @@ function SuspendedPersonalAccountDropdown(props: { user: User | null }) {
|
|||||||
|
|
||||||
function AuthButtons() {
|
function AuthButtons() {
|
||||||
return (
|
return (
|
||||||
<div className={'flex gap-x-2.5'}>
|
<div className={'flex gap-x-2.5 animate-in fade-in duration-500'}>
|
||||||
<div className={'hidden md:flex'}>
|
<div className={'hidden md:flex'}>
|
||||||
<If condition={features.enableThemeToggle}>
|
<If condition={features.enableThemeToggle}>
|
||||||
<ModeToggle />
|
<ModeToggle />
|
||||||
@@ -86,3 +73,16 @@ function AuthButtons() {
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function useSession() {
|
||||||
|
const client = useSupabase();
|
||||||
|
|
||||||
|
return useQuery({
|
||||||
|
queryKey: ['session'],
|
||||||
|
queryFn: async () => {
|
||||||
|
const { data } = await client.auth.getSession();
|
||||||
|
|
||||||
|
return data.session;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,5 +1,3 @@
|
|||||||
import type { User } from '@supabase/supabase-js';
|
|
||||||
|
|
||||||
import { Header } from '@kit/ui/marketing';
|
import { Header } from '@kit/ui/marketing';
|
||||||
|
|
||||||
import { AppLogo } from '~/components/app-logo';
|
import { AppLogo } from '~/components/app-logo';
|
||||||
@@ -7,12 +5,12 @@ import { AppLogo } from '~/components/app-logo';
|
|||||||
import { SiteHeaderAccountSection } from './site-header-account-section';
|
import { SiteHeaderAccountSection } from './site-header-account-section';
|
||||||
import { SiteNavigation } from './site-navigation';
|
import { SiteNavigation } from './site-navigation';
|
||||||
|
|
||||||
export function SiteHeader(props: { user?: User | null }) {
|
export function SiteHeader() {
|
||||||
return (
|
return (
|
||||||
<Header
|
<Header
|
||||||
logo={<AppLogo />}
|
logo={<AppLogo />}
|
||||||
navigation={<SiteNavigation />}
|
navigation={<SiteNavigation />}
|
||||||
actions={<SiteHeaderAccountSection user={props.user ?? null} />}
|
actions={<SiteHeaderAccountSection />}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -29,7 +29,7 @@ export function SiteNavigationItem({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<NavigationMenuItem key={path}>
|
<NavigationMenuItem key={path}>
|
||||||
<Link className={className} href={path}>
|
<Link className={className} href={path} as={path} prefetch={true}>
|
||||||
{children}
|
{children}
|
||||||
</Link>
|
</Link>
|
||||||
</NavigationMenuItem>
|
</NavigationMenuItem>
|
||||||
|
|||||||
@@ -1,19 +1,11 @@
|
|||||||
import { getSupabaseServerClient } from '@kit/supabase/server-client';
|
|
||||||
|
|
||||||
import { SiteFooter } from '~/(marketing)/_components/site-footer';
|
import { SiteFooter } from '~/(marketing)/_components/site-footer';
|
||||||
import { SiteHeader } from '~/(marketing)/_components/site-header';
|
import { SiteHeader } from '~/(marketing)/_components/site-header';
|
||||||
import { withI18n } from '~/lib/i18n/with-i18n';
|
import { withI18n } from '~/lib/i18n/with-i18n';
|
||||||
|
|
||||||
async function SiteLayout(props: React.PropsWithChildren) {
|
function SiteLayout(props: React.PropsWithChildren) {
|
||||||
const client = getSupabaseServerClient();
|
|
||||||
|
|
||||||
const {
|
|
||||||
data: { user },
|
|
||||||
} = await client.auth.getUser();
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={'flex min-h-[100vh] flex-col'}>
|
<div className={'flex min-h-[100vh] flex-col'}>
|
||||||
<SiteHeader user={user} />
|
<SiteHeader />
|
||||||
|
|
||||||
{props.children}
|
{props.children}
|
||||||
|
|
||||||
@@ -22,4 +14,4 @@ async function SiteLayout(props: React.PropsWithChildren) {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default withI18n(SiteLayout);
|
export default withI18n(SiteLayout);
|
||||||
@@ -58,7 +58,7 @@ async function SignInPage({ searchParams }: SignInPageProps) {
|
|||||||
|
|
||||||
<div className={'flex justify-center'}>
|
<div className={'flex justify-center'}>
|
||||||
<Button asChild variant={'link'} size={'sm'}>
|
<Button asChild variant={'link'} size={'sm'}>
|
||||||
<Link href={signUpPath}>
|
<Link href={signUpPath} prefetch={true}>
|
||||||
<Trans i18nKey={'auth:doNotHaveAccountYet'} />
|
<Trans i18nKey={'auth:doNotHaveAccountYet'} />
|
||||||
</Link>
|
</Link>
|
||||||
</Button>
|
</Button>
|
||||||
|
|||||||
@@ -57,7 +57,7 @@ async function SignUpPage({ searchParams }: Props) {
|
|||||||
|
|
||||||
<div className={'flex justify-center'}>
|
<div className={'flex justify-center'}>
|
||||||
<Button asChild variant={'link'} size={'sm'}>
|
<Button asChild variant={'link'} size={'sm'}>
|
||||||
<Link href={signInPath}>
|
<Link href={signInPath} prefetch={true}>
|
||||||
<Trans i18nKey={'auth:alreadyHaveAnAccount'} />
|
<Trans i18nKey={'auth:alreadyHaveAnAccount'} />
|
||||||
</Link>
|
</Link>
|
||||||
</Button>
|
</Button>
|
||||||
|
|||||||
@@ -2,7 +2,6 @@ import Link from 'next/link';
|
|||||||
|
|
||||||
import { ArrowLeft } from 'lucide-react';
|
import { ArrowLeft } from 'lucide-react';
|
||||||
|
|
||||||
import { getSupabaseServerClient } from '@kit/supabase/server-client';
|
|
||||||
import { Button } from '@kit/ui/button';
|
import { Button } from '@kit/ui/button';
|
||||||
import { Heading } from '@kit/ui/heading';
|
import { Heading } from '@kit/ui/heading';
|
||||||
import { Trans } from '@kit/ui/trans';
|
import { Trans } from '@kit/ui/trans';
|
||||||
@@ -21,15 +20,9 @@ export const generateMetadata = async () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const NotFoundPage = async () => {
|
const NotFoundPage = async () => {
|
||||||
const client = getSupabaseServerClient();
|
|
||||||
|
|
||||||
const {
|
|
||||||
data: { user },
|
|
||||||
} = await client.auth.getUser();
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={'flex h-screen flex-1 flex-col'}>
|
<div className={'flex h-screen flex-1 flex-col'}>
|
||||||
<SiteHeader user={user} />
|
<SiteHeader />
|
||||||
|
|
||||||
<div
|
<div
|
||||||
className={
|
className={
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { useEffect } from 'react';
|
import { useCallback, useEffect } from 'react';
|
||||||
|
|
||||||
import { usePathname, useSearchParams } from 'next/navigation';
|
import { usePathname, useSearchParams } from 'next/navigation';
|
||||||
|
|
||||||
@@ -71,7 +71,7 @@ function AnalyticsProviderBrowser(props: React.PropsWithChildren) {
|
|||||||
useAnalyticsMapping(analyticsMapping);
|
useAnalyticsMapping(analyticsMapping);
|
||||||
|
|
||||||
// Report page views to the analytics service
|
// Report page views to the analytics service
|
||||||
useReportPageView((url) => analytics.trackPageView(url));
|
useReportPageView(useCallback((url) => analytics.trackPageView(url), []));
|
||||||
|
|
||||||
// Render children
|
// Render children
|
||||||
return props.children;
|
return props.children;
|
||||||
|
|||||||
@@ -40,7 +40,7 @@ export function AppLogo({
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Link aria-label={label ?? 'Home Page'} href={href ?? '/'}>
|
<Link aria-label={label ?? 'Home Page'} href={href ?? '/'} prefetch={true}>
|
||||||
<LogoImage className={className} />
|
<LogoImage className={className} />
|
||||||
</Link>
|
</Link>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -55,16 +55,16 @@
|
|||||||
"@marsidev/react-turnstile": "^1.1.0",
|
"@marsidev/react-turnstile": "^1.1.0",
|
||||||
"@radix-ui/react-icons": "^1.3.2",
|
"@radix-ui/react-icons": "^1.3.2",
|
||||||
"@supabase/supabase-js": "2.49.3",
|
"@supabase/supabase-js": "2.49.3",
|
||||||
"@tanstack/react-query": "5.69.2",
|
"@tanstack/react-query": "5.70.0",
|
||||||
"@tanstack/react-table": "^8.21.2",
|
"@tanstack/react-table": "^8.21.2",
|
||||||
"date-fns": "^4.1.0",
|
"date-fns": "^4.1.0",
|
||||||
"lucide-react": "^0.484.0",
|
"lucide-react": "^0.485.0",
|
||||||
"next": "15.2.4",
|
"next": "15.2.4",
|
||||||
"next-sitemap": "^4.2.3",
|
"next-sitemap": "^4.2.3",
|
||||||
"next-themes": "0.4.6",
|
"next-themes": "0.4.6",
|
||||||
"react": "19.0.0",
|
"react": "19.1.0",
|
||||||
"react-dom": "19.0.0",
|
"react-dom": "19.1.0",
|
||||||
"react-hook-form": "^7.54.2",
|
"react-hook-form": "^7.55.0",
|
||||||
"react-i18next": "^15.4.1",
|
"react-i18next": "^15.4.1",
|
||||||
"recharts": "2.15.1",
|
"recharts": "2.15.1",
|
||||||
"sonner": "^2.0.2",
|
"sonner": "^2.0.2",
|
||||||
|
|||||||
@@ -69,6 +69,7 @@
|
|||||||
"termsOfService": "Terms of Service",
|
"termsOfService": "Terms of Service",
|
||||||
"privacyPolicy": "Privacy Policy",
|
"privacyPolicy": "Privacy Policy",
|
||||||
"orContinueWith": "Or continue with",
|
"orContinueWith": "Or continue with",
|
||||||
|
"redirecting": "You're in! Please wait...",
|
||||||
"errors": {
|
"errors": {
|
||||||
"Invalid login credentials": "The credentials entered are invalid",
|
"Invalid login credentials": "The credentials entered are invalid",
|
||||||
"User already registered": "This credential is already in use. Please try with another one.",
|
"User already registered": "This credential is already in use. Please try with another one.",
|
||||||
|
|||||||
@@ -29,10 +29,10 @@
|
|||||||
"@supabase/supabase-js": "2.49.3",
|
"@supabase/supabase-js": "2.49.3",
|
||||||
"@types/react": "19.0.12",
|
"@types/react": "19.0.12",
|
||||||
"date-fns": "^4.1.0",
|
"date-fns": "^4.1.0",
|
||||||
"lucide-react": "^0.484.0",
|
"lucide-react": "^0.485.0",
|
||||||
"next": "15.2.4",
|
"next": "15.2.4",
|
||||||
"react": "19.0.0",
|
"react": "19.1.0",
|
||||||
"react-hook-form": "^7.54.2",
|
"react-hook-form": "^7.55.0",
|
||||||
"react-i18next": "^15.4.1",
|
"react-i18next": "^15.4.1",
|
||||||
"zod": "^3.24.2"
|
"zod": "^3.24.2"
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -26,7 +26,7 @@
|
|||||||
"@kit/ui": "workspace:*",
|
"@kit/ui": "workspace:*",
|
||||||
"@types/react": "19.0.12",
|
"@types/react": "19.0.12",
|
||||||
"next": "15.2.4",
|
"next": "15.2.4",
|
||||||
"react": "19.0.0",
|
"react": "19.1.0",
|
||||||
"zod": "^3.24.2"
|
"zod": "^3.24.2"
|
||||||
},
|
},
|
||||||
"typesVersions": {
|
"typesVersions": {
|
||||||
|
|||||||
@@ -30,7 +30,7 @@
|
|||||||
"@types/react": "19.0.12",
|
"@types/react": "19.0.12",
|
||||||
"date-fns": "^4.1.0",
|
"date-fns": "^4.1.0",
|
||||||
"next": "15.2.4",
|
"next": "15.2.4",
|
||||||
"react": "19.0.0",
|
"react": "19.1.0",
|
||||||
"zod": "^3.24.2"
|
"zod": "^3.24.2"
|
||||||
},
|
},
|
||||||
"typesVersions": {
|
"typesVersions": {
|
||||||
|
|||||||
@@ -28,7 +28,7 @@
|
|||||||
"@kit/ui": "workspace:*",
|
"@kit/ui": "workspace:*",
|
||||||
"@types/node": "^22.13.14",
|
"@types/node": "^22.13.14",
|
||||||
"@types/react": "19.0.12",
|
"@types/react": "19.0.12",
|
||||||
"react": "19.0.0",
|
"react": "19.1.0",
|
||||||
"zod": "^3.24.2"
|
"zod": "^3.24.2"
|
||||||
},
|
},
|
||||||
"typesVersions": {
|
"typesVersions": {
|
||||||
|
|||||||
@@ -35,15 +35,15 @@
|
|||||||
"@kit/ui": "workspace:*",
|
"@kit/ui": "workspace:*",
|
||||||
"@radix-ui/react-icons": "^1.3.2",
|
"@radix-ui/react-icons": "^1.3.2",
|
||||||
"@supabase/supabase-js": "2.49.3",
|
"@supabase/supabase-js": "2.49.3",
|
||||||
"@tanstack/react-query": "5.69.2",
|
"@tanstack/react-query": "5.70.0",
|
||||||
"@types/react": "19.0.12",
|
"@types/react": "19.0.12",
|
||||||
"@types/react-dom": "19.0.4",
|
"@types/react-dom": "19.0.4",
|
||||||
"lucide-react": "^0.484.0",
|
"lucide-react": "^0.485.0",
|
||||||
"next": "15.2.4",
|
"next": "15.2.4",
|
||||||
"next-themes": "0.4.6",
|
"next-themes": "0.4.6",
|
||||||
"react": "19.0.0",
|
"react": "19.1.0",
|
||||||
"react-dom": "19.0.0",
|
"react-dom": "19.1.0",
|
||||||
"react-hook-form": "^7.54.2",
|
"react-hook-form": "^7.55.0",
|
||||||
"react-i18next": "^15.4.1",
|
"react-i18next": "^15.4.1",
|
||||||
"sonner": "^2.0.2",
|
"sonner": "^2.0.2",
|
||||||
"zod": "^3.24.2"
|
"zod": "^3.24.2"
|
||||||
|
|||||||
@@ -21,14 +21,14 @@
|
|||||||
"@makerkit/data-loader-supabase-core": "^0.0.10",
|
"@makerkit/data-loader-supabase-core": "^0.0.10",
|
||||||
"@makerkit/data-loader-supabase-nextjs": "^1.2.5",
|
"@makerkit/data-loader-supabase-nextjs": "^1.2.5",
|
||||||
"@supabase/supabase-js": "2.49.3",
|
"@supabase/supabase-js": "2.49.3",
|
||||||
"@tanstack/react-query": "5.69.2",
|
"@tanstack/react-query": "5.70.0",
|
||||||
"@tanstack/react-table": "^8.21.2",
|
"@tanstack/react-table": "^8.21.2",
|
||||||
"@types/react": "19.0.12",
|
"@types/react": "19.0.12",
|
||||||
"lucide-react": "^0.484.0",
|
"lucide-react": "^0.485.0",
|
||||||
"next": "15.2.4",
|
"next": "15.2.4",
|
||||||
"react": "19.0.0",
|
"react": "19.1.0",
|
||||||
"react-dom": "19.0.0",
|
"react-dom": "19.1.0",
|
||||||
"react-hook-form": "^7.54.2",
|
"react-hook-form": "^7.55.0",
|
||||||
"zod": "^3.24.2"
|
"zod": "^3.24.2"
|
||||||
},
|
},
|
||||||
"exports": {
|
"exports": {
|
||||||
|
|||||||
@@ -29,11 +29,11 @@
|
|||||||
"@marsidev/react-turnstile": "^1.1.0",
|
"@marsidev/react-turnstile": "^1.1.0",
|
||||||
"@radix-ui/react-icons": "^1.3.2",
|
"@radix-ui/react-icons": "^1.3.2",
|
||||||
"@supabase/supabase-js": "2.49.3",
|
"@supabase/supabase-js": "2.49.3",
|
||||||
"@tanstack/react-query": "5.69.2",
|
"@tanstack/react-query": "5.70.0",
|
||||||
"@types/react": "19.0.12",
|
"@types/react": "19.0.12",
|
||||||
"lucide-react": "^0.484.0",
|
"lucide-react": "^0.485.0",
|
||||||
"next": "15.2.4",
|
"next": "15.2.4",
|
||||||
"react-hook-form": "^7.54.2",
|
"react-hook-form": "^7.55.0",
|
||||||
"react-i18next": "^15.4.1",
|
"react-i18next": "^15.4.1",
|
||||||
"sonner": "^2.0.2",
|
"sonner": "^2.0.2",
|
||||||
"zod": "^3.24.2"
|
"zod": "^3.24.2"
|
||||||
|
|||||||
@@ -2,6 +2,8 @@
|
|||||||
|
|
||||||
import { useEffect } from 'react';
|
import { useEffect } from 'react';
|
||||||
|
|
||||||
|
import { useRouter } from 'next/navigation';
|
||||||
|
|
||||||
import { zodResolver } from '@hookform/resolvers/zod';
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
|
import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
|
||||||
import { useMutation } from '@tanstack/react-query';
|
import { useMutation } from '@tanstack/react-query';
|
||||||
@@ -41,9 +43,11 @@ export function MultiFactorChallengeContainer({
|
|||||||
redirectPath: string;
|
redirectPath: string;
|
||||||
};
|
};
|
||||||
}>) {
|
}>) {
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
const verifyMFAChallenge = useVerifyMFAChallenge({
|
const verifyMFAChallenge = useVerifyMFAChallenge({
|
||||||
onSuccess: () => {
|
onSuccess: () => {
|
||||||
window.location.replace(paths.redirectPath);
|
router.replace(paths.redirectPath);
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -156,14 +160,29 @@ export function MultiFactorChallengeContainer({
|
|||||||
data-test={'submit-mfa-button'}
|
data-test={'submit-mfa-button'}
|
||||||
disabled={
|
disabled={
|
||||||
verifyMFAChallenge.isPending ||
|
verifyMFAChallenge.isPending ||
|
||||||
|
verifyMFAChallenge.isSuccess ||
|
||||||
!verificationCodeForm.formState.isValid
|
!verificationCodeForm.formState.isValid
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
{verifyMFAChallenge.isPending ? (
|
<If condition={verifyMFAChallenge.isPending}>
|
||||||
<Trans i18nKey={'account:verifyingCode'} />
|
<span className={'animate-in fade-in slide-in-from-bottom-24'}>
|
||||||
) : (
|
<Trans i18nKey={'account:verifyingCode'} />
|
||||||
|
</span>
|
||||||
|
</If>
|
||||||
|
|
||||||
|
<If condition={verifyMFAChallenge.isSuccess}>
|
||||||
|
<span className={'animate-in fade-in slide-in-from-bottom-24'}>
|
||||||
|
<Trans i18nKey={'auth:redirecting'} />
|
||||||
|
</span>
|
||||||
|
</If>
|
||||||
|
|
||||||
|
<If
|
||||||
|
condition={
|
||||||
|
!verifyMFAChallenge.isPending && !verifyMFAChallenge.isSuccess
|
||||||
|
}
|
||||||
|
>
|
||||||
<Trans i18nKey={'account:submitVerificationCode'} />
|
<Trans i18nKey={'account:submitVerificationCode'} />
|
||||||
)}
|
</If>
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
@@ -231,7 +250,7 @@ function FactorsListContainer({
|
|||||||
<div className={'flex flex-col items-center space-y-4 py-8'}>
|
<div className={'flex flex-col items-center space-y-4 py-8'}>
|
||||||
<Spinner />
|
<Spinner />
|
||||||
|
|
||||||
<div>
|
<div className={'text-sm'}>
|
||||||
<Trans i18nKey={'account:loadingFactors'} />
|
<Trans i18nKey={'account:loadingFactors'} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -259,7 +278,7 @@ function FactorsListContainer({
|
|||||||
const verifiedFactors = factors?.totp ?? [];
|
const verifiedFactors = factors?.totp ?? [];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={'flex flex-col space-y-4'}>
|
<div className={'flex flex-col space-y-4 animate-in fade-in duration-500'}>
|
||||||
<div>
|
<div>
|
||||||
<span className={'font-medium'}>
|
<span className={'font-medium'}>
|
||||||
<Trans i18nKey={'account:selectFactor'} />
|
<Trans i18nKey={'account:selectFactor'} />
|
||||||
|
|||||||
@@ -19,6 +19,7 @@ export function PasswordSignInContainer({
|
|||||||
const { captchaToken, resetCaptchaToken } = useCaptchaToken();
|
const { captchaToken, resetCaptchaToken } = useCaptchaToken();
|
||||||
const signInMutation = useSignInWithEmailPassword();
|
const signInMutation = useSignInWithEmailPassword();
|
||||||
const isLoading = signInMutation.isPending;
|
const isLoading = signInMutation.isPending;
|
||||||
|
const isRedirecting = signInMutation.isSuccess;
|
||||||
|
|
||||||
const onSubmit = useCallback(
|
const onSubmit = useCallback(
|
||||||
async (credentials: z.infer<typeof PasswordSignInSchema>) => {
|
async (credentials: z.infer<typeof PasswordSignInSchema>) => {
|
||||||
@@ -46,7 +47,11 @@ export function PasswordSignInContainer({
|
|||||||
<>
|
<>
|
||||||
<AuthErrorAlert error={signInMutation.error} />
|
<AuthErrorAlert error={signInMutation.error} />
|
||||||
|
|
||||||
<PasswordSignInForm onSubmit={onSubmit} loading={isLoading} />
|
<PasswordSignInForm
|
||||||
|
onSubmit={onSubmit}
|
||||||
|
loading={isLoading}
|
||||||
|
redirecting={isRedirecting}
|
||||||
|
/>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -25,10 +25,12 @@ import { PasswordSignInSchema } from '../schemas/password-sign-in.schema';
|
|||||||
|
|
||||||
export function PasswordSignInForm({
|
export function PasswordSignInForm({
|
||||||
onSubmit,
|
onSubmit,
|
||||||
loading,
|
loading = false,
|
||||||
|
redirecting = false,
|
||||||
}: {
|
}: {
|
||||||
onSubmit: (params: z.infer<typeof PasswordSignInSchema>) => unknown;
|
onSubmit: (params: z.infer<typeof PasswordSignInSchema>) => unknown;
|
||||||
loading: boolean;
|
loading: boolean;
|
||||||
|
redirecting: boolean;
|
||||||
}) {
|
}) {
|
||||||
const { t } = useTranslation('auth');
|
const { t } = useTranslation('auth');
|
||||||
|
|
||||||
@@ -112,23 +114,30 @@ export function PasswordSignInForm({
|
|||||||
data-test="auth-submit-button"
|
data-test="auth-submit-button"
|
||||||
className={'group w-full'}
|
className={'group w-full'}
|
||||||
type="submit"
|
type="submit"
|
||||||
disabled={loading}
|
disabled={loading || redirecting}
|
||||||
>
|
>
|
||||||
<If
|
<If condition={redirecting}>
|
||||||
condition={loading}
|
<span className={'animate-in fade-in slide-in-from-bottom-24'}>
|
||||||
fallback={
|
<Trans i18nKey={'auth:redirecting'} />
|
||||||
<>
|
</span>
|
||||||
<Trans i18nKey={'auth:signInWithEmail'} />
|
</If>
|
||||||
|
|
||||||
<ArrowRight
|
<If condition={loading}>
|
||||||
className={
|
<span className={'animate-in fade-in slide-in-from-bottom-24'}>
|
||||||
'zoom-in animate-in slide-in-from-left-2 fill-mode-both h-4 delay-500 duration-500'
|
<Trans i18nKey={'auth:signingIn'} />
|
||||||
}
|
</span>
|
||||||
/>
|
</If>
|
||||||
</>
|
|
||||||
}
|
<If condition={!redirecting && !loading}>
|
||||||
>
|
<span className={'animate-out fade-out flex items-center'}>
|
||||||
<Trans i18nKey={'auth:signingIn'} />
|
<Trans i18nKey={'auth:signInWithEmail'} />
|
||||||
|
|
||||||
|
<ArrowRight
|
||||||
|
className={
|
||||||
|
'zoom-in animate-in slide-in-from-left-2 fill-mode-both h-4 delay-500 duration-500'
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
</If>
|
</If>
|
||||||
</Button>
|
</Button>
|
||||||
</form>
|
</form>
|
||||||
|
|||||||
@@ -20,11 +20,11 @@
|
|||||||
"@kit/tsconfig": "workspace:*",
|
"@kit/tsconfig": "workspace:*",
|
||||||
"@kit/ui": "workspace:*",
|
"@kit/ui": "workspace:*",
|
||||||
"@supabase/supabase-js": "2.49.3",
|
"@supabase/supabase-js": "2.49.3",
|
||||||
"@tanstack/react-query": "5.69.2",
|
"@tanstack/react-query": "5.70.0",
|
||||||
"@types/react": "19.0.12",
|
"@types/react": "19.0.12",
|
||||||
"lucide-react": "^0.484.0",
|
"lucide-react": "^0.485.0",
|
||||||
"react": "19.0.0",
|
"react": "19.1.0",
|
||||||
"react-dom": "19.0.0",
|
"react-dom": "19.1.0",
|
||||||
"react-i18next": "^15.4.1"
|
"react-i18next": "^15.4.1"
|
||||||
},
|
},
|
||||||
"prettier": "@kit/prettier-config",
|
"prettier": "@kit/prettier-config",
|
||||||
|
|||||||
@@ -33,17 +33,17 @@
|
|||||||
"@kit/tsconfig": "workspace:*",
|
"@kit/tsconfig": "workspace:*",
|
||||||
"@kit/ui": "workspace:*",
|
"@kit/ui": "workspace:*",
|
||||||
"@supabase/supabase-js": "2.49.3",
|
"@supabase/supabase-js": "2.49.3",
|
||||||
"@tanstack/react-query": "5.69.2",
|
"@tanstack/react-query": "5.70.0",
|
||||||
"@tanstack/react-table": "^8.21.2",
|
"@tanstack/react-table": "^8.21.2",
|
||||||
"@types/react": "19.0.12",
|
"@types/react": "19.0.12",
|
||||||
"@types/react-dom": "19.0.4",
|
"@types/react-dom": "19.0.4",
|
||||||
"class-variance-authority": "^0.7.1",
|
"class-variance-authority": "^0.7.1",
|
||||||
"date-fns": "^4.1.0",
|
"date-fns": "^4.1.0",
|
||||||
"lucide-react": "^0.484.0",
|
"lucide-react": "^0.485.0",
|
||||||
"next": "15.2.4",
|
"next": "15.2.4",
|
||||||
"react": "19.0.0",
|
"react": "19.1.0",
|
||||||
"react-dom": "19.0.0",
|
"react-dom": "19.1.0",
|
||||||
"react-hook-form": "^7.54.2",
|
"react-hook-form": "^7.55.0",
|
||||||
"react-i18next": "^15.4.1",
|
"react-i18next": "^15.4.1",
|
||||||
"sonner": "^2.0.2",
|
"sonner": "^2.0.2",
|
||||||
"zod": "^3.24.2"
|
"zod": "^3.24.2"
|
||||||
|
|||||||
@@ -20,10 +20,10 @@
|
|||||||
"@kit/prettier-config": "workspace:*",
|
"@kit/prettier-config": "workspace:*",
|
||||||
"@kit/shared": "workspace:*",
|
"@kit/shared": "workspace:*",
|
||||||
"@kit/tsconfig": "workspace:*",
|
"@kit/tsconfig": "workspace:*",
|
||||||
"@tanstack/react-query": "5.69.2",
|
"@tanstack/react-query": "5.70.0",
|
||||||
"next": "15.2.4",
|
"next": "15.2.4",
|
||||||
"react": "19.0.0",
|
"react": "19.1.0",
|
||||||
"react-dom": "19.0.0",
|
"react-dom": "19.1.0",
|
||||||
"react-i18next": "^15.4.1"
|
"react-i18next": "^15.4.1"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
|||||||
@@ -23,7 +23,6 @@ export function createI18nSettings({
|
|||||||
fallbackLng: languages[0],
|
fallbackLng: languages[0],
|
||||||
detection: undefined,
|
detection: undefined,
|
||||||
lng,
|
lng,
|
||||||
load: 'languageOnly' as const,
|
|
||||||
preload: false as const,
|
preload: false as const,
|
||||||
lowerCaseLng: true as const,
|
lowerCaseLng: true as const,
|
||||||
fallbackNS: ns,
|
fallbackNS: ns,
|
||||||
|
|||||||
@@ -25,7 +25,7 @@
|
|||||||
"@kit/shared": "workspace:*",
|
"@kit/shared": "workspace:*",
|
||||||
"@kit/tsconfig": "workspace:*",
|
"@kit/tsconfig": "workspace:*",
|
||||||
"@types/react": "19.0.12",
|
"@types/react": "19.0.12",
|
||||||
"react": "19.0.0",
|
"react": "19.1.0",
|
||||||
"zod": "^3.24.2"
|
"zod": "^3.24.2"
|
||||||
},
|
},
|
||||||
"typesVersions": {
|
"typesVersions": {
|
||||||
|
|||||||
@@ -25,7 +25,7 @@
|
|||||||
"@kit/prettier-config": "workspace:*",
|
"@kit/prettier-config": "workspace:*",
|
||||||
"@kit/tsconfig": "workspace:*",
|
"@kit/tsconfig": "workspace:*",
|
||||||
"@types/react": "19.0.12",
|
"@types/react": "19.0.12",
|
||||||
"react": "19.0.0",
|
"react": "19.1.0",
|
||||||
"zod": "^3.24.2"
|
"zod": "^3.24.2"
|
||||||
},
|
},
|
||||||
"typesVersions": {
|
"typesVersions": {
|
||||||
|
|||||||
@@ -18,7 +18,7 @@
|
|||||||
"@kit/prettier-config": "workspace:*",
|
"@kit/prettier-config": "workspace:*",
|
||||||
"@kit/tsconfig": "workspace:*",
|
"@kit/tsconfig": "workspace:*",
|
||||||
"@types/react": "19.0.12",
|
"@types/react": "19.0.12",
|
||||||
"react": "19.0.0"
|
"react": "19.1.0"
|
||||||
},
|
},
|
||||||
"typesVersions": {
|
"typesVersions": {
|
||||||
"*": {
|
"*": {
|
||||||
|
|||||||
@@ -16,7 +16,7 @@
|
|||||||
"./config/server": "./src/sentry.client.server.ts"
|
"./config/server": "./src/sentry.client.server.ts"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@sentry/nextjs": "^9.10.0",
|
"@sentry/nextjs": "^9.10.1",
|
||||||
"import-in-the-middle": "1.13.1"
|
"import-in-the-middle": "1.13.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
@@ -25,7 +25,7 @@
|
|||||||
"@kit/prettier-config": "workspace:*",
|
"@kit/prettier-config": "workspace:*",
|
||||||
"@kit/tsconfig": "workspace:*",
|
"@kit/tsconfig": "workspace:*",
|
||||||
"@types/react": "19.0.12",
|
"@types/react": "19.0.12",
|
||||||
"react": "19.0.0"
|
"react": "19.1.0"
|
||||||
},
|
},
|
||||||
"typesVersions": {
|
"typesVersions": {
|
||||||
"*": {
|
"*": {
|
||||||
|
|||||||
@@ -28,9 +28,9 @@
|
|||||||
"@supabase/supabase-js": "2.49.3",
|
"@supabase/supabase-js": "2.49.3",
|
||||||
"@types/react": "19.0.12",
|
"@types/react": "19.0.12",
|
||||||
"@types/react-dom": "19.0.4",
|
"@types/react-dom": "19.0.4",
|
||||||
"react": "19.0.0",
|
"react": "19.1.0",
|
||||||
"react-dom": "19.0.0",
|
"react-dom": "19.1.0",
|
||||||
"react-hook-form": "^7.54.2",
|
"react-hook-form": "^7.55.0",
|
||||||
"zod": "^3.24.2"
|
"zod": "^3.24.2"
|
||||||
},
|
},
|
||||||
"typesVersions": {
|
"typesVersions": {
|
||||||
|
|||||||
@@ -14,7 +14,9 @@ export function formatCurrency(params: {
|
|||||||
locale: string;
|
locale: string;
|
||||||
value: string | number;
|
value: string | number;
|
||||||
}) {
|
}) {
|
||||||
return new Intl.NumberFormat(params.locale, {
|
const [lang, region] = params.locale.split('-');
|
||||||
|
|
||||||
|
return new Intl.NumberFormat(region ?? lang, {
|
||||||
style: 'currency',
|
style: 'currency',
|
||||||
currency: params.currencyCode,
|
currency: params.currencyCode,
|
||||||
}).format(Number(params.value));
|
}).format(Number(params.value));
|
||||||
|
|||||||
@@ -29,10 +29,10 @@
|
|||||||
"@kit/tsconfig": "workspace:*",
|
"@kit/tsconfig": "workspace:*",
|
||||||
"@supabase/ssr": "^0.6.1",
|
"@supabase/ssr": "^0.6.1",
|
||||||
"@supabase/supabase-js": "2.49.3",
|
"@supabase/supabase-js": "2.49.3",
|
||||||
"@tanstack/react-query": "5.69.2",
|
"@tanstack/react-query": "5.70.0",
|
||||||
"@types/react": "19.0.12",
|
"@types/react": "19.0.12",
|
||||||
"next": "15.2.4",
|
"next": "15.2.4",
|
||||||
"react": "19.0.0",
|
"react": "19.1.0",
|
||||||
"server-only": "^0.0.1",
|
"server-only": "^0.0.1",
|
||||||
"zod": "^3.24.2"
|
"zod": "^3.24.2"
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -33,7 +33,7 @@
|
|||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
"cmdk": "1.1.1",
|
"cmdk": "1.1.1",
|
||||||
"input-otp": "1.4.2",
|
"input-otp": "1.4.2",
|
||||||
"lucide-react": "^0.484.0",
|
"lucide-react": "^0.485.0",
|
||||||
"react-top-loading-bar": "3.0.2",
|
"react-top-loading-bar": "3.0.2",
|
||||||
"recharts": "2.15.1",
|
"recharts": "2.15.1",
|
||||||
"tailwind-merge": "^3.0.2"
|
"tailwind-merge": "^3.0.2"
|
||||||
@@ -43,7 +43,7 @@
|
|||||||
"@kit/prettier-config": "workspace:*",
|
"@kit/prettier-config": "workspace:*",
|
||||||
"@kit/tsconfig": "workspace:*",
|
"@kit/tsconfig": "workspace:*",
|
||||||
"@radix-ui/react-icons": "^1.3.2",
|
"@radix-ui/react-icons": "^1.3.2",
|
||||||
"@tanstack/react-query": "5.69.2",
|
"@tanstack/react-query": "5.70.0",
|
||||||
"@tanstack/react-table": "^8.21.2",
|
"@tanstack/react-table": "^8.21.2",
|
||||||
"@types/react": "19.0.12",
|
"@types/react": "19.0.12",
|
||||||
"@types/react-dom": "19.0.4",
|
"@types/react-dom": "19.0.4",
|
||||||
@@ -54,7 +54,7 @@
|
|||||||
"next-themes": "0.4.6",
|
"next-themes": "0.4.6",
|
||||||
"prettier": "^3.5.3",
|
"prettier": "^3.5.3",
|
||||||
"react-day-picker": "^8.10.1",
|
"react-day-picker": "^8.10.1",
|
||||||
"react-hook-form": "^7.54.2",
|
"react-hook-form": "^7.55.0",
|
||||||
"react-i18next": "^15.4.1",
|
"react-i18next": "^15.4.1",
|
||||||
"sonner": "^2.0.2",
|
"sonner": "^2.0.2",
|
||||||
"tailwindcss": "4.0.17",
|
"tailwindcss": "4.0.17",
|
||||||
|
|||||||
3076
pnpm-lock.yaml
generated
3076
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user