zaid.marzguioui/myeasycms-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor invitation system and update UI layout

Browse Source 
Updated invitation link generation logic to use 'invitePath' instead of 'siteURL' improving the overall invitation system. The changes also entailed multiple updates to the UI ranging from layout modifications to enhanced alerts and descriptions. Additionally, the text and styling of several components, such as the team account settings container and the layout of personal account settings page, were significantly adjusted.
This commit is contained in:
giancarlo
2024-03-28 20:48:41 +08:00
parent f6d1b500da
commit b4ecd1d231
7 changed files with 49 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
apps/web/app/(dashboard)/home/(user)/settings/page.tsx
View File

@@ -1,4 +1,5 @@
import { PersonalAccountSettingsContainer } from '@kit/accounts/personal-account-settings'; import { PersonalAccountSettingsContainer } from '@kit/accounts/personal-account-settings';
import { PageBody } from '@kit/ui/page';
import featureFlagsConfig from '~/config/feature-flags.config'; import featureFlagsConfig from '~/config/feature-flags.config';
import pathsConfig from '~/config/paths.config'; import pathsConfig from '~/config/paths.config';
@@ -14,13 +15,15 @@ const paths = {
function PersonalAccountSettingsPage() { function PersonalAccountSettingsPage() {
return ( return (
<div <PageBody>
className={ <div
'container mx-auto flex max-w-2xl flex-1 flex-col items-center' className={
} 'container mx-auto flex max-w-2xl flex-1 flex-col items-center'
> }
<PersonalAccountSettingsContainer features={features} paths={paths} /> >
</div> <PersonalAccountSettingsContainer features={features} paths={paths} />
</div>
</PageBody>
); );
} }

2
apps/web/app/(dashboard)/home/[account]/settings/page.tsx
View File

@@ -45,7 +45,7 @@ async function TeamAccountSettingsPage(props: Props) {
<PageBody> <PageBody>
<div <div
className={ className={
'container mx-auto flex w-full max-w-4xl flex-1 flex-col items-center' 'container mx-auto flex max-w-2xl flex-1 flex-col items-center'
} }
> >
<TeamAccountSettingsContainer <TeamAccountSettingsContainer

3
apps/web/public/locales/en/teams.json
View File

@@ -107,7 +107,8 @@
"deleteTeamInputField": "Type the name of the team to confirm", "deleteTeamInputField": "Type the name of the team to confirm",
"leaveTeam": "Leave Team", "leaveTeam": "Leave Team",
"leavingTeamModalHeading": "Leaving Team", "leavingTeamModalHeading": "Leaving Team",
"leaveTeamDescription": "You will no longer have access to this team.", "leavingTeamModalDescription": "You are about to leave this team. You will no longer have access to it.",
"leaveTeamDescription": "Click the button below to leave the team. Remember, you will no longer have access to it and will need to be re-invited to join.",
"deleteTeamDisclaimer": "You are deleting the team {{ teamName }}. This action cannot be undone.", "deleteTeamDisclaimer": "You are deleting the team {{ teamName }}. This action cannot be undone.",
"leaveTeamDisclaimer": "You are leaving the team {{ teamName }}. You will no longer have access to it.", "leaveTeamDisclaimer": "You are leaving the team {{ teamName }}. You will no longer have access to it.",
"deleteTeamErrorHeading": "Sorry, we couldn't delete your team.", "deleteTeamErrorHeading": "Sorry, we couldn't delete your team.",

11
packages/features/auth/src/components/sign-up-methods-container.tsx
View File

@@ -3,6 +3,7 @@
import type { Provider } from '@supabase/supabase-js'; import type { Provider } from '@supabase/supabase-js';
import { isBrowser } from '@kit/shared/utils'; import { isBrowser } from '@kit/shared/utils';
import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
import { If } from '@kit/ui/if'; import { If } from '@kit/ui/if';
import { Separator } from '@kit/ui/separator'; import { Separator } from '@kit/ui/separator';
@@ -28,6 +29,16 @@ export function SignUpMethodsContainer(props: {
return ( return (
<> <>
<If condition={props.inviteToken}>
<Alert variant={'info'}>
<AlertTitle>You have been invited to join a team</AlertTitle>
<AlertDescription>
Please sign up to continue with the invitation and create your
account.
</AlertDescription>
</Alert>
</If>
<If condition={props.providers.password}> <If condition={props.providers.password}>
<EmailPasswordSignUpContainer emailRedirectTo={redirectUrl} /> <EmailPasswordSignUpContainer emailRedirectTo={redirectUrl} />
</If> </If>

2
packages/features/team-accounts/src/components/invitations/accept-invitation-container.tsx
View File

@@ -28,7 +28,7 @@ export function AcceptInvitationContainer(props: {
}; };
}) { }) {
return ( return (
<div className={'flex flex-col items-center space-y-8'}> <div className={'flex flex-col items-center space-y-4'}>
<Heading className={'text-center'} level={5}> <Heading className={'text-center'} level={5}>
<Trans <Trans
i18nKey={'teams:acceptInvitationHeading'} i18nKey={'teams:acceptInvitationHeading'}

55
packages/features/team-accounts/src/components/settings/team-account-danger-zone.tsx
View File

@@ -232,7 +232,7 @@ function LeaveTeamContainer(props: {
}) { }) {
return ( return (
<div className={'flex flex-col space-y-4'}> <div className={'flex flex-col space-y-4'}>
<p> <p className={'text-muted-foreground text-sm'}>
<Trans <Trans
i18nKey={'teams:leaveTeamDescription'} i18nKey={'teams:leaveTeamDescription'}
values={{ values={{
@@ -241,9 +241,9 @@ function LeaveTeamContainer(props: {
/> />
</p> </p>
<div> <AlertDialog>
<AlertDialog> <AlertDialogTrigger asChild>
<AlertDialogTrigger asChild> <div>
<Button <Button
data-test={'leave-team-button'} data-test={'leave-team-button'}
type={'button'} type={'button'}
@@ -251,34 +251,25 @@ function LeaveTeamContainer(props: {
> >
<Trans i18nKey={'teams:leaveTeam'} /> <Trans i18nKey={'teams:leaveTeam'} />
</Button> </Button>
</AlertDialogTrigger> </div>
</AlertDialogTrigger>
<AlertDialogContent> <AlertDialogContent>
<AlertDialogHeader> <AlertDialogHeader>
<AlertDialogTitle> <AlertDialogTitle>
<Trans i18nKey={'teams:leavingTeamModalHeading'} /> <Trans i18nKey={'teams:leavingTeamModalHeading'} />
</AlertDialogTitle> </AlertDialogTitle>
<AlertDialogDescription> <AlertDialogDescription>
<Trans i18nKey={'teams:leavingTeamModalDescription'} /> <Trans i18nKey={'teams:leavingTeamModalDescription'} />
</AlertDialogDescription> </AlertDialogDescription>
</AlertDialogHeader> </AlertDialogHeader>
<ErrorBoundary fallback={<LeaveTeamErrorAlert />}> <ErrorBoundary fallback={<LeaveTeamErrorAlert />}>
<form action={leaveTeamAccountAction}> <form action={leaveTeamAccountAction}>
<input type={'hidden'} value={props.account.id} name={'id'} /> <input type={'hidden'} value={props.account.id} name={'id'} />
</form>
<div className={'my-2 flex flex-col space-y-4'}> </ErrorBoundary>
<Trans
i18nKey={'teams:leaveTeamDisclaimer'}
values={{
teamName: props.account?.name,
}}
/>
</div>
</form>
</ErrorBoundary>
</AlertDialogContent>
<AlertDialogFooter> <AlertDialogFooter>
<AlertDialogCancel> <AlertDialogCancel>
@@ -287,8 +278,8 @@ function LeaveTeamContainer(props: {
<LeaveTeamSubmitButton /> <LeaveTeamSubmitButton />
</AlertDialogFooter> </AlertDialogFooter>
</AlertDialog> </AlertDialogContent>
</div> </AlertDialog>
</div> </div>
); );
} }
@@ -302,7 +293,7 @@ function LeaveTeamSubmitButton() {
disabled={pending} disabled={pending}
variant={'destructive'} variant={'destructive'}
> >
<Trans i18nKey={'teams:leaveOrganization'} /> <Trans i18nKey={'teams:leaveTeam'} />
</Button> </Button>
); );
} }

2
packages/features/team-accounts/src/server/services/account-invitations.service.ts
View File

@@ -238,6 +238,6 @@ export class AccountInvitationsService {
} }
private getInvitationLink(token: string) { private getInvitationLink(token: string) {
return new URL(env.siteURL, env.siteURL).href + `?invite_token=${token}`; return new URL(env.invitePath, env.siteURL).href + `?invite_token=${token}`;
} }
} }