diff --git a/src/index.ts b/src/index.ts index bc80d5fc..65198ea9 100644 --- a/src/index.ts +++ b/src/index.ts @@ -36,7 +36,7 @@ export { default as withCollapse } from './Collapse/withCollapse.js'; export { default as GraaspLogo } from './GraaspLogo/GraaspLogo.js'; -export { default as ItemLoginAuthorization } from './itemLogin/ItemLoginAuthorization.js'; +export { default as ItemLoginWrapper } from './itemLogin/ItemLoginWrapper.js'; export { default as ForbiddenContent } from './itemLogin/ForbiddenContent.js'; export { default as Card } from './Card/Card.js'; diff --git a/src/itemLogin/ItemLoginAuthorization.stories.tsx b/src/itemLogin/ItemLoginWrapper.stories.tsx similarity index 53% rename from src/itemLogin/ItemLoginAuthorization.stories.tsx rename to src/itemLogin/ItemLoginWrapper.stories.tsx index f4493725..1030b5c7 100644 --- a/src/itemLogin/ItemLoginAuthorization.stories.tsx +++ b/src/itemLogin/ItemLoginWrapper.stories.tsx @@ -1,8 +1,10 @@ import type { Meta, StoryObj } from '@storybook/react'; import { expect } from '@storybook/test'; import { within } from '@storybook/testing-library'; +import { v4 } from 'uuid'; import { + AccountType, CompleteMember, ItemLoginSchemaType, PackedDocumentItemFactory, @@ -10,13 +12,19 @@ import { import Card from '@/Card/Card.js'; -import ItemLoginAuthorization from './ItemLoginAuthorization.js'; +import ItemLoginWrapper from './ItemLoginWrapper.js'; import { FORBIDDEN_TEXT } from './constants.js'; const item = PackedDocumentItemFactory(); +const currentAccount = { + id: 'member', + name: 'member', + type: AccountType.Individual, +} as CompleteMember; + const meta = { - title: 'Actions/ItemLoginAuthorization', - component: ItemLoginAuthorization, + title: 'Actions/itemLogin/ItemLoginWrapper', + component: ItemLoginWrapper, argTypes: { signIn: { action: 'onRedirect' }, @@ -27,7 +35,7 @@ const meta = { children: , }, -} satisfies Meta; +} satisfies Meta; export default meta; @@ -35,7 +43,7 @@ type Story = StoryObj; export const Authorized = { args: { - currentAccount: { id: 'member', name: 'member' } as CompleteMember, + currentAccount, item, }, play: async ({ canvasElement }) => { @@ -67,13 +75,49 @@ export const Loading = { }, } satisfies Story; -export const Forbidden = { +export const Enroll = { args: { - currentAccount: { id: 'member', name: 'member' } as CompleteMember, + currentAccount, + itemId: v4(), + itemLoginSchemaType: ItemLoginSchemaType.Username, + enrollContent:
Enroll Content
, }, play: async ({ canvasElement }) => { const canvas = within(canvasElement); + expect(canvas.getByTestId('enroll')).toBeVisible(); + }, +} satisfies Story; + +export const RequestAccess = { + args: { + currentAccount, + itemId: v4(), + requestAccessContent:
Request Access
, + }, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + + expect(canvas.getByTestId('request')).toBeVisible(); + }, +} satisfies Story; + +export const ForbiddenSignedIn = { + args: { + currentAccount, + }, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + + expect(canvas.getByText(FORBIDDEN_TEXT)).toBeVisible(); + }, +} satisfies Story; + +export const ForbiddenSignedOut = { + args: {}, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + expect(canvas.getByText(FORBIDDEN_TEXT)).toBeVisible(); }, } satisfies Story; diff --git a/src/itemLogin/ItemLoginAuthorization.tsx b/src/itemLogin/ItemLoginWrapper.tsx similarity index 71% rename from src/itemLogin/ItemLoginAuthorization.tsx rename to src/itemLogin/ItemLoginWrapper.tsx index e3631b99..5339cc6f 100644 --- a/src/itemLogin/ItemLoginAuthorization.tsx +++ b/src/itemLogin/ItemLoginWrapper.tsx @@ -1,6 +1,7 @@ import { ReactElement, ReactNode } from 'react'; import { + AccountType, CurrentAccount, DiscriminatedItem, ItemLoginSchemaType, @@ -21,8 +22,10 @@ export type ItemLoginAuthorizationProps = { signInButtonId?: string; passwordInputId?: string; children?: ReactNode; - ForbiddenContent?: ReactElement; + forbiddenContent?: ReactElement; isLoading?: boolean; + enrollContent?: ReactElement; + requestAccessContent?: ReactElement; }; const ItemLoginAuthorization = ({ @@ -35,7 +38,9 @@ const ItemLoginAuthorization = ({ usernameInputId, signInButtonId, passwordInputId, - ForbiddenContent = , + forbiddenContent = , + enrollContent, + requestAccessContent, children, }: ItemLoginAuthorizationProps): ReactNode => { if (isLoading) { @@ -49,8 +54,22 @@ const ItemLoginAuthorization = ({ return children; } + if (currentAccount) { + if (currentAccount.type === AccountType.Individual) { + // user is logged in and item login enabled - request automatic membership + if (itemLoginSchemaType) { + return enrollContent ?? forbiddenContent; + } + + // user is logged in and item login disabled - request access + return requestAccessContent ?? forbiddenContent; + } else { + return forbiddenContent; + } + } + // signed out but can sign in with item login - if (!currentAccount?.id && itemLoginSchemaType) { + if (itemLoginSchemaType) { return (