feat: update item login wrapper with enroll mechanism (#1060)

* feat: add enroll content in item login wrapper

* refactor: show forbidden if no content provided

* test: add item login tests

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';

src/itemLogin/ItemLoginAuthorization.stories.tsx → src/itemLogin/ItemLoginWrapper.stories.tsx

@@ -1,22 +1,30 @@
 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,
 } from '@graasp/sdk';
 
 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,15 +35,15 @@ const meta = {
 
  children: <Card alt='card' name='card' />,
  },
-} satisfies Meta<typeof ItemLoginAuthorization>;
+} satisfies Meta<typeof ItemLoginWrapper>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 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: <div data-testId='enroll'>Enroll Content</div>,
  },
  play: async ({ canvasElement }) => {
  const canvas = within(canvasElement);
 
+ expect(canvas.getByTestId('enroll')).toBeVisible();
+ },
+} satisfies Story;
+
+export const RequestAccess = {
+ args: {
+ currentAccount,
+ itemId: v4(),
+ requestAccessContent: <div data-testId='request'>Request Access</div>,
+ },
+ 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;

src/itemLogin/ItemLoginAuthorization.tsx → 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 = <ForbiddenText />,
+ forbiddenContent = <ForbiddenText />,
+ 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 (
  <ItemLoginScreen
  itemId={itemId}
@@ -65,7 +84,7 @@ const ItemLoginAuthorization = ({
 
  // either the item does not allow item login
  // or the user is already signed in as normal user and hasn't the access to this item
- return ForbiddenContent;
+ return forbiddenContent;
 };
 
 export default ItemLoginAuthorization;