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 (