diff --git a/.changeset/nervous-lizards-repeat.md b/.changeset/nervous-lizards-repeat.md new file mode 100644 index 00000000000..abd5df1546b --- /dev/null +++ b/.changeset/nervous-lizards-repeat.md @@ -0,0 +1,10 @@ +--- +'@clerk/localizations': patch +'@clerk/clerk-js': patch +'@clerk/types': patch +--- + +Introduces domains and invitations in + +- The "Members" page now accommodates Domain and Individual invitations +- The "Settings" page allows for the addition, edit and removal of a domain diff --git a/packages/clerk-js/src/core/resources/OrganizationDomain.ts b/packages/clerk-js/src/core/resources/OrganizationDomain.ts index a63a70fe251..6fb81651da4 100644 --- a/packages/clerk-js/src/core/resources/OrganizationDomain.ts +++ b/packages/clerk-js/src/core/resources/OrganizationDomain.ts @@ -37,7 +37,7 @@ export class OrganizationDomain extends BaseResource implements OrganizationDoma return new OrganizationDomain(json); } - prepareDomainAffiliationVerification = async ( + prepareAffiliationVerification = async ( params: PrepareAffiliationVerificationParams, ): Promise => { return this._basePost({ diff --git a/packages/clerk-js/src/core/resources/__snapshots__/OrganizationDomain.test.ts.snap b/packages/clerk-js/src/core/resources/__snapshots__/OrganizationDomain.test.ts.snap index a8083943b8b..85a8c0eb05c 100644 --- a/packages/clerk-js/src/core/resources/__snapshots__/OrganizationDomain.test.ts.snap +++ b/packages/clerk-js/src/core/resources/__snapshots__/OrganizationDomain.test.ts.snap @@ -10,7 +10,7 @@ OrganizationDomain { "name": "clerk.dev", "organizationId": "test_org_id", "pathRoot": "", - "prepareDomainAffiliationVerification": [Function], + "prepareAffiliationVerification": [Function], "update": [Function], "verification": null, } @@ -26,7 +26,7 @@ OrganizationDomain { "name": "clerk.dev", "organizationId": "test_org_id", "pathRoot": "", - "prepareDomainAffiliationVerification": [Function], + "prepareAffiliationVerification": [Function], "update": [Function], "verification": { "attempts": 1, diff --git a/packages/clerk-js/src/ui/common/CalloutWithAction.tsx b/packages/clerk-js/src/ui/common/CalloutWithAction.tsx new file mode 100644 index 00000000000..ed58a8977f7 --- /dev/null +++ b/packages/clerk-js/src/ui/common/CalloutWithAction.tsx @@ -0,0 +1,47 @@ +import type { MouseEvent } from 'react'; + +import { Col, Flex, Link, Text } from '../customizables'; +import type { LocalizationKey } from '../localization'; + +type CalloutWithActionProps = { + text: LocalizationKey; + actionLabel?: LocalizationKey; + onClick?: (e: MouseEvent) => Promise; +}; +export const CalloutWithAction = (props: CalloutWithActionProps) => { + const { text, actionLabel, onClick: onClickProp } = props; + + const onClick = (e: MouseEvent) => { + if (onClickProp) { + void onClickProp?.(e); + } + }; + + return ( + ({ + background: theme.colors.$blackAlpha50, + padding: theme.space.$4, + justifyContent: 'space-between', + alignItems: 'flex-start', + borderRadius: theme.radii.$md, + })} + > + + ({ + lineHeight: t.lineHeights.$tall, + })} + localizationKey={text} + /> + + + + + ); +}; diff --git a/packages/clerk-js/src/ui/common/index.ts b/packages/clerk-js/src/ui/common/index.ts index 234414736d6..44d4a3be3da 100644 --- a/packages/clerk-js/src/ui/common/index.ts +++ b/packages/clerk-js/src/ui/common/index.ts @@ -1,5 +1,6 @@ export * from './BlockButtons'; export * from './constants'; +export * from './CalloutWithAction'; export * from './forms'; export * from './redirects'; export * from './verification'; @@ -10,5 +11,6 @@ export * from './EmailLinkStatusCard'; export * from './Wizard'; export * from './RemoveResourcePage'; export * from './PrintableComponent'; +export * from './RemoveResourcePage'; export * from './withOrganizationsEnabledGuard'; export * from './QRCode'; diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/AddDomainPage.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/AddDomainPage.tsx new file mode 100644 index 00000000000..bc4a7e54bad --- /dev/null +++ b/packages/clerk-js/src/ui/components/OrganizationProfile/AddDomainPage.tsx @@ -0,0 +1,62 @@ +import React from 'react'; + +import { useCoreOrganization } from '../../contexts'; +import { localizationKeys } from '../../customizables'; +import { ContentPage, Form, FormButtons, useCardState, withCardStateProvider } from '../../elements'; +import { useRouter } from '../../router'; +import { handleError, useFormControl } from '../../utils'; +import { OrganizationProfileBreadcrumbs } from './OrganizationProfileNavbar'; + +export const AddDomainPage = withCardStateProvider(() => { + const title = localizationKeys('organizationProfile.createDomainPage.title'); + const subtitle = localizationKeys('organizationProfile.createDomainPage.subtitle'); + const card = useCardState(); + const { organization } = useCoreOrganization(); + const { navigate } = useRouter(); + + const nameField = useFormControl('name', '', { + type: 'text', + label: localizationKeys('formFieldLabel__organizationEmailDomain'), + placeholder: localizationKeys('formFieldInputPlaceholder__organizationName'), + }); + + if (!organization) { + return null; + } + + const canSubmit = organization.name !== nameField.value; + + const onSubmit = (e: React.FormEvent) => { + e.preventDefault(); + return organization + .createDomain(nameField.value) + .then(res => { + if (res.verification && res.verification.status === 'verified') { + return navigate(`../domain/${res.id}`); + } + return navigate(`../domain/${res.id}/verify`); + }) + .catch(err => { + handleError(err, [nameField], card.setError); + }); + }; + + return ( + + + + + + + + + ); +}); diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/DomainList.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/DomainList.tsx new file mode 100644 index 00000000000..e950b8183ed --- /dev/null +++ b/packages/clerk-js/src/ui/components/OrganizationProfile/DomainList.tsx @@ -0,0 +1,133 @@ +import type { GetDomainsParams, OrganizationEnrollmentMode } from '@clerk/types'; +import type { OrganizationDomainVerificationStatus } from '@clerk/types'; +import React, { useMemo } from 'react'; + +import { useCoreOrganization } from '../../contexts'; +import { Badge, Box, Col, descriptors, Spinner } from '../../customizables'; +import { ArrowBlockButton } from '../../elements'; +import { useInView } from '../../hooks'; +import { useRouter } from '../../router'; + +type DomainListProps = GetDomainsParams & { + verificationStatus?: OrganizationDomainVerificationStatus; + enrollmentMode?: OrganizationEnrollmentMode; + /** + * Enables internal links to navigate to the correct page + * based on when this component is used + */ + redirectSubPath: string; + fallback?: React.ReactNode; +}; + +export const DomainList = (props: DomainListProps) => { + const { verificationStatus, enrollmentMode, redirectSubPath, fallback, ...rest } = props; + const { organization, membership, domains } = useCoreOrganization({ + domains: { + infinite: true, + ...rest, + }, + }); + + const { ref } = useInView({ + threshold: 0, + onChange: inView => { + if (inView) { + void domains?.fetchNext?.(); + } + }, + }); + const { navigate } = useRouter(); + + const isAdmin = membership?.role === 'admin'; + + const domainList = useMemo(() => { + if (!domains?.data) { + return []; + } + + return domains.data.filter(d => { + let matchesStatus = true; + let matchesMode = true; + if (verificationStatus) { + matchesStatus = !!d.verification && d.verification.status === verificationStatus; + } + if (enrollmentMode) { + matchesMode = d.enrollmentMode === enrollmentMode; + } + + return matchesStatus && matchesMode; + }); + }, [domains?.data]); + + if (!organization || !isAdmin) { + return null; + } + + // TODO: Split this to smaller components + return ( + + {domainList.length === 0 && !domains?.isLoading && fallback} + {domainList.map(d => ( + Verified + ) : ( + + Unverified + + ) + ) : undefined + } + sx={t => ({ + padding: `${t.space.$3} ${t.space.$4}`, + minHeight: t.sizes.$10, + })} + onClick={() => { + d.verification && d.verification.status === 'verified' + ? void navigate(`${redirectSubPath}${d.id}`) + : void navigate(`${redirectSubPath}${d.id}/verify`); + }} + > + {d.name} + + ))} + {(domains?.hasNextPage || domains?.isFetching) && ( + ({ + width: '100%', + height: t.space.$10, + position: 'relative', + }), + ]} + > + + + + + )} + + ); +}; diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembers.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembers.tsx index 6caffaa4d79..c5d563f54b8 100644 --- a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembers.tsx +++ b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembers.tsx @@ -1,3 +1,4 @@ +import { CalloutWithAction } from '../../common'; import { useCoreOrganization, useOrganizationProfileContext } from '../../contexts'; import { Col, descriptors, Flex, Icon, localizationKeys } from '../../customizables'; import { @@ -16,6 +17,7 @@ import { import { UserAdd } from '../../icons'; import { useRouter } from '../../router'; import { ActiveMembersList } from './ActiveMembersList'; +import { DomainList } from './DomainList'; import { InvitedMembersList } from './InvitedMembersList'; import { MembershipWidget } from './MembershipWidget'; @@ -39,39 +41,20 @@ export const OrganizationMembers = withCardStateProvider(() => { elementId={descriptors.profilePage.setId('organizationMembers')} gap={8} > - - - - - - {isAdmin && ( - navigate('invite-members')} - icon={ - ({ marginRight: t.space.$2 })} - /> - } - textVariant='buttonExtraSmallBold' - localizationKey={localizationKeys('organizationProfile.membersPage.action__invite')} - /> - )} - + + + + - + {isAdmin && ( - + )} @@ -89,16 +72,96 @@ export const OrganizationMembers = withCardStateProvider(() => { {isAdmin && ( - {isAdmin && __unstable_manageBillingUrl && } - - + + + + + + navigate('organization-settings/domain')} + /> + } + redirectSubPath={'organization-settings/domain/'} + verificationStatus={'verified'} + enrollmentMode={'automatic_invitation'} + /> + + + + + + + + + {isAdmin && ( + navigate('invite-members')} + icon={ + ({ marginRight: t.space.$2 })} + /> + } + textVariant='buttonExtraSmallBold' + localizationKey={localizationKeys('organizationProfile.membersPage.action__invite')} + /> + )} + + + + )} diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileNavbar.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileNavbar.tsx index 5abac279b68..fff24f3b43a 100644 --- a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileNavbar.tsx +++ b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileNavbar.tsx @@ -51,6 +51,8 @@ export const OrganizationProfileNavbar = ( const pageToRootNavbarRouteMap = { 'invite-members': organizationProfileRoutes.find(r => r.id === 'members'), + 'add-domain': organizationProfileRoutes.find(r => r.id === 'settings'), + 'verify-domain/:id': organizationProfileRoutes.find(r => r.id === 'settings'), profile: organizationProfileRoutes.find(r => r.id === 'settings'), leave: organizationProfileRoutes.find(r => r.id === 'settings'), }; diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsx index dc7fdb791bc..d718c1795b9 100644 --- a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsx +++ b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsx @@ -2,10 +2,14 @@ import { ProfileCardContent } from '../../elements'; import { Route, Switch } from '../../router'; import type { PropsOfComponent } from '../../styledSystem'; import { DeleteOrganizationPage, LeaveOrganizationPage } from './ActionConfirmationPage'; +import { AddDomainPage } from './AddDomainPage'; import { InviteMembersPage } from './InviteMembersPage'; import { OrganizationMembers } from './OrganizationMembers'; import { OrganizationSettings } from './OrganizationSettings'; import { ProfileSettingsPage } from './ProfileSettingsPage'; +import { RemoveDomainPage } from './RemoveDomainPage'; +import { VerifiedDomainPage } from './VerifiedDomainPage'; +import { VerifyDomainPage } from './VerifyDomainPage'; export const OrganizationProfileRoutes = (props: PropsOfComponent) => { return ( @@ -18,6 +22,25 @@ export const OrganizationProfileRoutes = (props: PropsOfComponent + + + + + + + + + + + + + + + + { return ( @@ -25,6 +26,7 @@ export const OrganizationSettings = () => { + @@ -57,6 +59,32 @@ const OrganizationProfileSection = () => { ); }; +const OrganizationDomainsSection = () => { + const { organization, membership } = useCoreOrganization(); + + const { navigate } = useRouter(); + const isAdmin = membership?.role === 'admin'; + + if (!organization || !isAdmin) { + return null; + } + + return ( + + + + navigate('domain')} + /> + + ); +}; + const OrganizationDangerSection = () => { const { organization, diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/RemoveDomainPage.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/RemoveDomainPage.tsx new file mode 100644 index 00000000000..484adc9b085 --- /dev/null +++ b/packages/clerk-js/src/ui/components/OrganizationProfile/RemoveDomainPage.tsx @@ -0,0 +1,62 @@ +import type { OrganizationDomainResource } from '@clerk/types'; +import React from 'react'; + +import { RemoveResourcePage } from '../../common'; +import { useCoreOrganization } from '../../contexts'; +import { Flex, Spinner } from '../../customizables'; +import { useFetch } from '../../hooks'; +import { localizationKeys } from '../../localization'; +import { useRouter } from '../../router'; +import { OrganizationProfileBreadcrumbs } from './OrganizationProfileNavbar'; + +export const RemoveDomainPage = () => { + const { organization } = useCoreOrganization(); + const { params } = useRouter(); + + const ref = React.useRef(); + const { data: domain, status: domainStatus } = useFetch( + organization?.getDomain, + { + domainId: params.id, + }, + { + onSuccess(domain) { + ref.current = { ...domain }; + }, + }, + ); + + if (domainStatus.isLoading || !domain) { + return ( + ({ + height: '100%', + minHeight: t.sizes.$120, + })} + > + + + ); + } + + return ( + Promise.resolve(domain?.delete())} + Breadcrumbs={OrganizationProfileBreadcrumbs} + /> + ); +}; diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/VerifiedDomainPage.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/VerifiedDomainPage.tsx new file mode 100644 index 00000000000..6d3725f55e0 --- /dev/null +++ b/packages/clerk-js/src/ui/components/OrganizationProfile/VerifiedDomainPage.tsx @@ -0,0 +1,133 @@ +import type { OrganizationEnrollmentMode } from '@clerk/types'; + +import { useCoreOrganization } from '../../contexts'; +import { Badge, Col, descriptors, Flex, localizationKeys, Spinner } from '../../customizables'; +import { + BlockWithAction, + ContentPage, + Form, + FormButtons, + Header, + useCardState, + withCardStateProvider, +} from '../../elements'; +import { useFetch } from '../../hooks'; +import { useRouter } from '../../router'; +import { handleError, useFormControl } from '../../utils'; +import { OrganizationProfileBreadcrumbs } from './OrganizationProfileNavbar'; + +export const VerifiedDomainPage = withCardStateProvider(() => { + const card = useCardState(); + const { organization } = useCoreOrganization(); + const { params, navigate } = useRouter(); + + const title = localizationKeys('organizationProfile.verifiedDomainPage.title'); + + const enrollmentMode = useFormControl('enrollmentMode', '', { + type: 'radio', + radioOptions: [ + { + value: 'automatic_invitation', + // TODO: Add labels + label: 'Automatic invitation', + }, + { + value: 'manual_invitation', + label: 'Manual invitation', + }, + ], + }); + + const { data: domain, status: domainStatus } = useFetch( + organization?.getDomain, + { + domainId: params.id, + }, + { + onSuccess(d) { + enrollmentMode.setValue(d.enrollmentMode); + }, + }, + ); + + const updateEnrollmentMode = async () => { + if (!domain || !organization) { + return; + } + + try { + await domain.update({ + enrollmentMode: enrollmentMode.value as OrganizationEnrollmentMode, + }); + + await navigate('../../'); + } catch (e) { + handleError(e, [enrollmentMode], card.setError); + } + }; + + if (!organization) { + return null; + } + + if (domainStatus.isLoading || !domain) { + return ( + ({ + height: '100%', + minHeight: t.sizes.$120, + })} + > + + + ); + } + + return ( + + Verified} + sx={t => ({ + backgroundColor: t.colors.$blackAlpha50, + padding: `${t.space.$3} ${t.space.$4}`, + minHeight: t.sizes.$10, + })} + actionLabel={localizationKeys('organizationProfile.verifiedDomainPage.actionLabel__remove')} + onActionClick={() => navigate(`../../domain/${domain.id}/remove`)} + > + {domain.name} + + + + + + + + + + + + + + + + + + ); +}); diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/VerifyDomainPage.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/VerifyDomainPage.tsx new file mode 100644 index 00000000000..952c34eed70 --- /dev/null +++ b/packages/clerk-js/src/ui/components/OrganizationProfile/VerifyDomainPage.tsx @@ -0,0 +1,193 @@ +import React from 'react'; + +import { useWizard, Wizard } from '../../common'; +import { useCoreOrganization } from '../../contexts'; +import { Badge, Button, descriptors, Flex, localizationKeys, Spinner } from '../../customizables'; +import type { VerificationCodeCardProps } from '../../elements'; +import { + BlockWithAction, + ContentPage, + Form, + FormButtonContainer, + FormButtons, + useCardState, + useCodeControl, + withCardStateProvider, +} from '../../elements'; +import { CodeForm } from '../../elements/CodeForm'; +import { useFetch, useLoadingStatus, useNavigateToFlowStart } from '../../hooks'; +import { useRouter } from '../../router'; +import { handleError, sleep, useFormControl } from '../../utils'; +import { OrganizationProfileBreadcrumbs } from './OrganizationProfileNavbar'; + +export const VerifyDomainPage = withCardStateProvider(() => { + const card = useCardState(); + const { organization } = useCoreOrganization(); + const { params, navigate } = useRouter(); + const { navigateToFlowStart } = useNavigateToFlowStart(); + + const [success, setSuccess] = React.useState(false); + + const { data: domain, status: domainStatus } = useFetch(organization?.getDomain, { + domainId: params.id, + }); + const title = localizationKeys('organizationProfile.verifyDomainPage.title'); + const subtitle = localizationKeys('organizationProfile.verifyDomainPage.subtitle', { + domainName: domain?.name ?? '', + }); + const status = useLoadingStatus(); + + const codeControlState = useFormControl('code', ''); + const codeControl = useCodeControl(codeControlState); + + const wizard = useWizard({ onNextStep: () => card.setError(undefined) }); + + const emailField = useFormControl('emailAddress', '', { + type: 'email', + label: localizationKeys('formFieldLabel__organizationEmailDomain'), + placeholder: localizationKeys('formFieldInputPlaceholder__organizationName'), + }); + + const resolve = async () => { + setSuccess(true); + await sleep(750); + }; + + const action: VerificationCodeCardProps['onCodeEntryFinishedAction'] = (code, resolve, reject) => { + domain + ?.attemptAffiliationVerification?.({ code }) + .then(async res => { + await resolve(); + if (res.verification?.status === 'verified') { + return navigateToFlowStart(); + } + return; + }) + .catch(err => reject(err)); + }; + + const reject = async (err: any) => { + handleError(err, [codeControlState], card.setError); + status.setIdle(); + await sleep(750); + codeControl.reset(); + }; + + codeControl.onCodeEntryFinished(code => { + status.setLoading(); + codeControlState.setError(undefined); + action(code, resolve, reject); + }); + + if (!organization) { + return null; + } + const handleResend = () => { + codeControl.reset(); + }; + + const dataChanged = organization.name !== emailField.value; + const canSubmit = dataChanged; + + const onSubmitPrepare = (e: React.FormEvent) => { + e.preventDefault(); + return domain + ?.prepareAffiliationVerification({ + affiliationEmailAddress: emailField.value, + }) + .then(wizard.nextStep) + .catch(err => { + handleError(err, [emailField], card.setError); + }); + }; + + if (domainStatus.isLoading || !domain) { + return ( + ({ + height: '100%', + minHeight: t.sizes.$120, + })} + > + + + ); + } + + return ( + + + + Unverified + + } + sx={t => ({ + backgroundColor: t.colors.$blackAlpha50, + padding: `${t.space.$3} ${t.space.$4}`, + minHeight: t.sizes.$10, + })} + actionLabel={localizationKeys('organizationProfile.verifyDomainPage.actionLabel__remove')} + onActionClick={() => navigate(`../../../domain/${domain.id}/remove`)} + > + {domain.name} + + + + + + + + + + + + + + +