Files
myeasycms-v2/apps/web/app/(marketing)/_components/site-header-account-section.tsx
giancarlo 99db8f4ca4 Implement custom roles and improve permissions logic
The commit refactors the handling of account roles and enhances permissions checks. The account role has been shifted to use a string type, providing the ability to define custom roles. It also introduces the RolesDataProvider component, which stipulates role-related data for different forms and tables. The modification goes further to consider user role hierarchy in permissions checks, offering a more granular access control.
2024-03-29 14:48:45 +08:00

71 lines
1.8 KiB
TypeScript

'use client';
import Link from 'next/link';
import type { User } from '@supabase/supabase-js';
import { ChevronRight } from 'lucide-react';
import { PersonalAccountDropdown } from '@kit/accounts/personal-account-dropdown';
import { useSignOut } from '@kit/supabase/hooks/use-sign-out';
import { useUser } from '@kit/supabase/hooks/use-user';
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';
export function SiteHeaderAccountSection(
props: React.PropsWithChildren<{
user: User | null;
}>,
) {
if (!props.user) {
return <AuthButtons />;
}
return <SuspendedPersonalAccountDropdown user={props.user} />;
}
function SuspendedPersonalAccountDropdown(props: { user: User | null }) {
const signOut = useSignOut();
const user = useUser(props.user);
return (
<If condition={user.data} fallback={<AuthButtons />}>
{(data) => (
<PersonalAccountDropdown
paths={{
home: pathsConfig.app.home,
}}
features={{
enableThemeToggle: featuresFlagConfig.enableThemeToggle,
}}
user={data}
signOutRequested={() => signOut.mutateAsync()}
/>
)}
</If>
);
}
function AuthButtons() {
return (
<div className={'hidden space-x-2 lg:flex'}>
<Button variant={'link'}>
<Link href={pathsConfig.auth.signIn}>
<Trans i18nKey={'auth:signIn'} />
</Link>
</Button>
<Link href={pathsConfig.auth.signUp}>
<Button className={'rounded-full'}>
<Trans i18nKey={'auth:signUp'} />
<ChevronRight className={'h-4'} />
</Button>
</Link>
</div>
);
}