* refactor(auth): replace Supabase `User` type with new `JWTUserData` type across the codebase - Replaced usage of Supabase's `User` type with the newly defined `JWTUserData` type for better type mapping and alignment with JWT claims. - Refactored session-related components and hooks (`useUser`, `requireUser`) to use the updated user structure. - Updated Supabase client keys to use `publicKey` instead of `anonKey`. - Adjusted multi-factor authentication logic and components to use `aal` and additional properties. - Applied consistent naming for Supabase secret key functions. - Incremented version to 2.12.0. - Introduced a new `deprecated` property in the `EnvVariableModel` type to handle deprecated environment variables. - Updated the `EnvList` component to display a warning badge for deprecated variables, including reason and alternative suggestions. - Enhanced filtering logic to allow users to toggle the visibility of deprecated variables. - Added new deprecated variables for Supabase keys with appropriate reasons and alternatives. - Added support for filtering deprecated environment variables in the `FilterSwitcher` component. - Updated the `Summary` component to display a badge for the count of deprecated variables. - Introduced a button to filter and display only deprecated variables. - Adjusted filtering logic to include deprecated variables in the overall state management. add BILLING_MODE configuration to environment variables - Introduced a new environment variable `BILLING_MODE` to configure billing options for the application. - The variable supports two values: `subscription` and `one-time`. - Marked as deprecated with a reason indicating that this configuration is no longer required, as billing mode is now automatically determined. - Added validation logic for the new variable to ensure correct value parsing.
89 lines
2.1 KiB
TypeScript
89 lines
2.1 KiB
TypeScript
'use client';
|
|
|
|
import dynamic from 'next/dynamic';
|
|
import Link from 'next/link';
|
|
|
|
import { PersonalAccountDropdown } from '@kit/accounts/personal-account-dropdown';
|
|
import { useSignOut } from '@kit/supabase/hooks/use-sign-out';
|
|
import { JWTUserData } from '@kit/supabase/types';
|
|
import { Button } from '@kit/ui/button';
|
|
import { If } from '@kit/ui/if';
|
|
import { Trans } from '@kit/ui/trans';
|
|
|
|
import featuresFlagConfig from '~/config/feature-flags.config';
|
|
import pathsConfig from '~/config/paths.config';
|
|
|
|
const ModeToggle = dynamic(() =>
|
|
import('@kit/ui/mode-toggle').then((mod) => ({
|
|
default: mod.ModeToggle,
|
|
})),
|
|
);
|
|
|
|
const MobileModeToggle = dynamic(() =>
|
|
import('@kit/ui/mobile-mode-toggle').then((mod) => ({
|
|
default: mod.MobileModeToggle,
|
|
})),
|
|
);
|
|
|
|
const paths = {
|
|
home: pathsConfig.app.home,
|
|
};
|
|
|
|
const features = {
|
|
enableThemeToggle: featuresFlagConfig.enableThemeToggle,
|
|
};
|
|
|
|
export function SiteHeaderAccountSection({
|
|
user,
|
|
}: {
|
|
user: JWTUserData | null;
|
|
}) {
|
|
const signOut = useSignOut();
|
|
|
|
if (user) {
|
|
return (
|
|
<PersonalAccountDropdown
|
|
showProfileName={false}
|
|
paths={paths}
|
|
features={features}
|
|
user={user}
|
|
signOutRequested={() => signOut.mutateAsync()}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return <AuthButtons />;
|
|
}
|
|
|
|
function AuthButtons() {
|
|
return (
|
|
<div className={'animate-in fade-in flex gap-x-2.5 duration-500'}>
|
|
<div className={'hidden md:flex'}>
|
|
<If condition={features.enableThemeToggle}>
|
|
<ModeToggle />
|
|
</If>
|
|
</div>
|
|
|
|
<div className={'md:hidden'}>
|
|
<If condition={features.enableThemeToggle}>
|
|
<MobileModeToggle />
|
|
</If>
|
|
</div>
|
|
|
|
<div className={'flex gap-x-2.5'}>
|
|
<Button className={'hidden md:block'} asChild variant={'ghost'}>
|
|
<Link href={pathsConfig.auth.signIn}>
|
|
<Trans i18nKey={'auth:signIn'} />
|
|
</Link>
|
|
</Button>
|
|
|
|
<Button asChild className="text-xs md:text-sm" variant={'default'}>
|
|
<Link href={pathsConfig.auth.signUp}>
|
|
<Trans i18nKey={'auth:signUp'} />
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|