From 260f7b32954b05aaf0ed1cd14d192190b57729d6 Mon Sep 17 00:00:00 2001 From: giancarlo Date: Thu, 28 Mar 2024 22:14:54 +0800 Subject: [PATCH] Refactor authentication and internationalize metadata This commit simplifies the authentication mechanism by directly comparing user ID and primary owner ID while refactoring the Team Account container. Simultaneously, it internationalizes the metadata of several pages by creating server I18n instances for title translations, ensuring better support for varied languages. --- .../app/(dashboard)/home/(user)/billing/page.tsx | 10 ++++++++++ apps/web/app/(dashboard)/home/(user)/page.tsx | 10 ++++++++++ .../app/(dashboard)/home/(user)/settings/page.tsx | 10 ++++++++++ .../(dashboard)/home/[account]/billing/page.tsx | 10 ++++++++++ .../(dashboard)/home/[account]/members/page.tsx | 10 ++++++++++ apps/web/app/(dashboard)/home/[account]/page.tsx | 10 ++++++++-- .../(dashboard)/home/[account]/settings/page.tsx | 12 +++++------- apps/web/public/locales/en/account.json | 3 +++ apps/web/public/locales/en/teams.json | 9 +++++++++ .../settings/team-account-danger-zone.tsx | 14 ++++++++++++-- .../settings/team-account-settings-container.tsx | 6 +----- 11 files changed, 88 insertions(+), 16 deletions(-) diff --git a/apps/web/app/(dashboard)/home/(user)/billing/page.tsx b/apps/web/app/(dashboard)/home/(user)/billing/page.tsx index da33f0d76..dba87c227 100644 --- a/apps/web/app/(dashboard)/home/(user)/billing/page.tsx +++ b/apps/web/app/(dashboard)/home/(user)/billing/page.tsx @@ -12,12 +12,22 @@ import { Trans } from '@kit/ui/trans'; import { createPersonalAccountBillingPortalSession } from '~/(dashboard)/home/(user)/billing/server-actions'; import billingConfig from '~/config/billing.config'; +import { createI18nServerInstance } from '~/lib/i18n/i18n.server'; import { withI18n } from '~/lib/i18n/with-i18n'; import { PersonalAccountCheckoutForm } from './_components/personal-account-checkout-form'; type Subscription = Database['public']['Tables']['subscriptions']['Row']; +export const generateMetadata = async () => { + const i18n = await createI18nServerInstance(); + const title = i18n.t('account:billingTab'); + + return { + title, + }; +}; + async function PersonalAccountBillingPage() { const client = getSupabaseServerComponentClient(); const [subscription, customerId] = await loadData(client); diff --git a/apps/web/app/(dashboard)/home/(user)/page.tsx b/apps/web/app/(dashboard)/home/(user)/page.tsx index b6b2beb02..2817bc55a 100644 --- a/apps/web/app/(dashboard)/home/(user)/page.tsx +++ b/apps/web/app/(dashboard)/home/(user)/page.tsx @@ -1,8 +1,18 @@ import { PageBody, PageHeader } from '@kit/ui/page'; import { Trans } from '@kit/ui/trans'; +import { createI18nServerInstance } from '~/lib/i18n/i18n.server'; import { withI18n } from '~/lib/i18n/with-i18n'; +export const generateMetadata = async () => { + const i18n = await createI18nServerInstance(); + const title = i18n.t('account:homePage'); + + return { + title, + }; +}; + function UserHomePage() { return ( <> diff --git a/apps/web/app/(dashboard)/home/(user)/settings/page.tsx b/apps/web/app/(dashboard)/home/(user)/settings/page.tsx index 0bf3be672..75bde0a1a 100644 --- a/apps/web/app/(dashboard)/home/(user)/settings/page.tsx +++ b/apps/web/app/(dashboard)/home/(user)/settings/page.tsx @@ -3,6 +3,7 @@ import { PageBody } from '@kit/ui/page'; import featureFlagsConfig from '~/config/feature-flags.config'; import pathsConfig from '~/config/paths.config'; +import { createI18nServerInstance } from '~/lib/i18n/i18n.server'; import { withI18n } from '~/lib/i18n/with-i18n'; const features = { @@ -13,6 +14,15 @@ const paths = { callback: pathsConfig.auth.callback + `?next=${pathsConfig.app.accountHome}`, }; +export const generateMetadata = async () => { + const i18n = await createI18nServerInstance(); + const title = i18n.t('account:settingsTab'); + + return { + title, + }; +}; + function PersonalAccountSettingsPage() { return ( diff --git a/apps/web/app/(dashboard)/home/[account]/billing/page.tsx b/apps/web/app/(dashboard)/home/[account]/billing/page.tsx index bff7a8661..f5cfa91ea 100644 --- a/apps/web/app/(dashboard)/home/[account]/billing/page.tsx +++ b/apps/web/app/(dashboard)/home/[account]/billing/page.tsx @@ -11,6 +11,7 @@ import { Trans } from '@kit/ui/trans'; import { loadTeamWorkspace } from '~/(dashboard)/home/[account]/_lib/load-team-account-workspace'; import { createBillingPortalSession } from '~/(dashboard)/home/[account]/billing/server-actions'; import billingConfig from '~/config/billing.config'; +import { createI18nServerInstance } from '~/lib/i18n/i18n.server'; import { withI18n } from '~/lib/i18n/with-i18n'; import { TeamAccountCheckoutForm } from './_components/team-account-checkout-form'; @@ -21,6 +22,15 @@ interface Params { }; } +export const generateMetadata = async () => { + const i18n = await createI18nServerInstance(); + const title = i18n.t('teams:billing.pageTitle'); + + return { + title, + }; +}; + async function TeamAccountBillingPage({ params }: Params) { const workspace = await loadTeamWorkspace(params.account); const accountId = workspace.account.id; diff --git a/apps/web/app/(dashboard)/home/[account]/members/page.tsx b/apps/web/app/(dashboard)/home/[account]/members/page.tsx index d62fe2029..7bd82debe 100644 --- a/apps/web/app/(dashboard)/home/[account]/members/page.tsx +++ b/apps/web/app/(dashboard)/home/[account]/members/page.tsx @@ -21,6 +21,7 @@ import { PageBody, PageHeader } from '@kit/ui/page'; import { Trans } from '@kit/ui/trans'; import { loadTeamWorkspace } from '~/(dashboard)/home/[account]/_lib/load-team-account-workspace'; +import { createI18nServerInstance } from '~/lib/i18n/i18n.server'; import { withI18n } from '~/lib/i18n/with-i18n'; interface Params { @@ -80,6 +81,15 @@ async function loadData(client: SupabaseClient, slug: string) { ]); } +export const generateMetadata = async () => { + const i18n = await createI18nServerInstance(); + const title = i18n.t('teams:members.pageTitle'); + + return { + title, + }; +}; + async function TeamAccountMembersPage({ params }: Params) { const client = getSupabaseServerComponentClient(); diff --git a/apps/web/app/(dashboard)/home/[account]/page.tsx b/apps/web/app/(dashboard)/home/[account]/page.tsx index 5e4329d46..4c8ee7f6b 100644 --- a/apps/web/app/(dashboard)/home/[account]/page.tsx +++ b/apps/web/app/(dashboard)/home/[account]/page.tsx @@ -8,6 +8,7 @@ import Spinner from '@kit/ui/spinner'; import { Trans } from '@kit/ui/trans'; import { AppHeader } from '~/(dashboard)/home/[account]/_components/app-header'; +import { createI18nServerInstance } from '~/lib/i18n/i18n.server'; import { withI18n } from '~/lib/i18n/with-i18n'; const DashboardDemo = loadDynamic( @@ -31,8 +32,13 @@ const DashboardDemo = loadDynamic( }, ); -export const metadata = { - title: 'Organization Account Home', +export const generateMetadata = async () => { + const i18n = await createI18nServerInstance(); + const title = i18n.t('teams:home.pageTitle'); + + return { + title, + }; }; function TeamAccountHomePage({ diff --git a/apps/web/app/(dashboard)/home/[account]/settings/page.tsx b/apps/web/app/(dashboard)/home/[account]/settings/page.tsx index 154bfc61c..91b9bb616 100644 --- a/apps/web/app/(dashboard)/home/[account]/settings/page.tsx +++ b/apps/web/app/(dashboard)/home/[account]/settings/page.tsx @@ -2,13 +2,14 @@ import { TeamAccountSettingsContainer } from '@kit/team-accounts/components'; import { PageBody, PageHeader } from '@kit/ui/page'; import { Trans } from '@kit/ui/trans'; -import { loadTeamWorkspace } from '~/(dashboard)/home/[account]/_lib/load-team-account-workspace'; import pathsConfig from '~/config/paths.config'; import { createI18nServerInstance } from '~/lib/i18n/i18n.server'; +import { loadTeamWorkspace } from '../_lib/load-team-account-workspace'; + export const generateMetadata = async () => { const i18n = await createI18nServerInstance(); - const title = i18n.t('accounts:settings:pageTitle'); + const title = i18n.t('teams:settings:pageTitle'); return { title, @@ -27,6 +28,7 @@ const paths = { async function TeamAccountSettingsPage(props: Props) { const data = await loadTeamWorkspace(props.params.account); + const account = { id: data.account.id, name: data.account.name, @@ -48,11 +50,7 @@ async function TeamAccountSettingsPage(props: Props) { 'container mx-auto flex max-w-2xl flex-1 flex-col items-center' } > - + diff --git a/apps/web/public/locales/en/account.json b/apps/web/public/locales/en/account.json index 8cf3d3ca4..7380ca916 100644 --- a/apps/web/public/locales/en/account.json +++ b/apps/web/public/locales/en/account.json @@ -8,6 +8,9 @@ "manageConnectedAccounts": "Connected Accounts", "manageConnectedAccountsSubheading": "Manage your connected accounts", "connectedAccounts": "Connected Accounts", + "homePage": "Home", + "billingTab": "Billing", + "settingsTab": "Settings", "authenticationTab": "Authentication", "multiFactorAuth": "Multi-Factor Authentication", "multiFactorAuthDescription": "Set up Multi-Factor Authentication method to further secure your account", diff --git a/apps/web/public/locales/en/teams.json b/apps/web/public/locales/en/teams.json index 68d2db00d..c29c50620 100644 --- a/apps/web/public/locales/en/teams.json +++ b/apps/web/public/locales/en/teams.json @@ -1,4 +1,7 @@ { + "home": { + "pageTitle": "Home" + }, "settings": { "pageTitle": "Settings", "pageDescription": "Manage your Team details", @@ -9,6 +12,12 @@ "dangerZone": "Danger Zone", "dangerZoneDescription": "This section contains actions that are irreversible" }, + "members": { + "pageTitle": "Members" + }, + "billing": { + "pageTitle": "Billing" + }, "yourTeams": "Your Teams", "createTeam": "Create a Team", "personalAccount": "Personal Account", diff --git a/packages/features/team-accounts/src/components/settings/team-account-danger-zone.tsx b/packages/features/team-accounts/src/components/settings/team-account-danger-zone.tsx index c136e0836..f1c33cf10 100644 --- a/packages/features/team-accounts/src/components/settings/team-account-danger-zone.tsx +++ b/packages/features/team-accounts/src/components/settings/team-account-danger-zone.tsx @@ -6,6 +6,7 @@ import { zodResolver } from '@hookform/resolvers/zod'; import { useForm } from 'react-hook-form'; import { z } from 'zod'; +import { useUser } from '@kit/supabase/hooks/use-user'; import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert'; import { AlertDialog, @@ -29,6 +30,7 @@ import { FormMessage, } from '@kit/ui/form'; import { Input } from '@kit/ui/input'; +import { LoadingOverlay } from '@kit/ui/loading-overlay'; import { Trans } from '@kit/ui/trans'; import { deleteTeamAccountAction } from '../../server/actions/delete-team-account-server-actions'; @@ -36,15 +38,23 @@ import { leaveTeamAccountAction } from '../../server/actions/leave-team-account- export function TeamAccountDangerZone({ account, - userIsPrimaryOwner, + primaryOwnerUserId, }: React.PropsWithChildren<{ account: { name: string; id: string; }; - userIsPrimaryOwner: boolean; + primaryOwnerUserId: string; }>) { + const { data: user, isLoading } = useUser(); + + if (isLoading) { + return ; + } + + const userIsPrimaryOwner = user?.id === primaryOwnerUserId; + if (userIsPrimaryOwner) { return ; } diff --git a/packages/features/team-accounts/src/components/settings/team-account-settings-container.tsx b/packages/features/team-accounts/src/components/settings/team-account-settings-container.tsx index 8c946a871..08e4bebd2 100644 --- a/packages/features/team-accounts/src/components/settings/team-account-settings-container.tsx +++ b/packages/features/team-accounts/src/components/settings/team-account-settings-container.tsx @@ -22,8 +22,6 @@ export function TeamAccountSettingsContainer(props: { primaryOwnerUserId: string; }; - userId: string; - paths: { teamAccountSettings: string; }; @@ -78,9 +76,7 @@ export function TeamAccountSettingsContainer(props: {