@open-kingdom/shared-frontend-feature-user-management 0.0.2-9

package/dist/lib/components/users/UserList.component.d.ts

@@ -0,0 +1,6 @@
+interface UserListProps {
+    currentUserId?: number;
+}
+export declare function UserList({ currentUserId }: UserListProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=UserList.component.d.ts.map

package/dist/lib/components/users/UserList.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserList.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/users/UserList.component.tsx"],"names":[],"mappings":"AAmBA,UAAU,aAAa;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,wBAAgB,QAAQ,CAAC,EAAE,aAAa,EAAE,EAAE,aAAa,2CAiIxD"}

package/dist/lib/styles.d.ts

@@ -0,0 +1,8 @@
+export declare const inputStyles = "w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-md bg-white dark:bg-neutral-700 text-neutral-900 dark:text-neutral-100";
+export declare const labelStyles = "block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1";
+export declare const cardStyles = "max-w-md mx-auto mt-8 p-6 bg-white dark:bg-neutral-800 rounded-lg shadow-lg";
+export declare const bodyTextStyles = "text-neutral-600 dark:text-neutral-400";
+export declare const buttonPrimaryStyles = "rounded-md px-4 py-2 text-sm font-medium transition-colors bg-primary-500 text-white hover:bg-primary-600 disabled:opacity-50";
+export declare const buttonSecondaryStyles = "rounded-md px-4 py-2 text-sm font-medium transition-colors border border-neutral-300 text-neutral-700 hover:bg-neutral-50 dark:border-neutral-600 dark:text-neutral-300 dark:hover:bg-neutral-700";
+export declare const buttonDangerStyles = "rounded-md px-4 py-2 text-sm font-medium transition-colors bg-error-500 text-white hover:bg-error-600 disabled:opacity-50";
+//# sourceMappingURL=styles.d.ts.map

package/dist/lib/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/lib/styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW,sJAC6H,CAAC;AAEtJ,eAAO,MAAM,WAAW,0EACiD,CAAC;AAE1E,eAAO,MAAM,UAAU,gFACwD,CAAC;AAEhF,eAAO,MAAM,cAAc,2CAA2C,CAAC;AAKvE,eAAO,MAAM,mBAAmB,kIAA2F,CAAC;AAE5H,eAAO,MAAM,qBAAqB,sMAA+J,CAAC;AAElM,eAAO,MAAM,kBAAkB,8HAAuF,CAAC"}

package/dist/lib/types.d.ts

@@ -0,0 +1,9 @@
+export type Role = 'guest' | 'user' | 'admin';
+export interface User {
+    id: number;
+    email: string;
+    firstName: string | null;
+    lastName: string | null;
+    role: Role;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/lib/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,IAAI,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;AAE9C,MAAM,WAAW,IAAI;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,IAAI,EAAE,IAAI,CAAC;CACZ"}

package/jest.config.cts

@@ -0,0 +1,14 @@
+module.exports = {
+  displayName: '@open-kingdom/feature-user-management',
+  preset: '../../../../jest.preset.js',
+  transform: {
+    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nx/react/plugins/jest',
+    '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/react/babel'] }],
+  },
+  transformIgnorePatterns: [
+    'node_modules/(?!(@react-hookz/web|@ver0/deep-equal)/)',
+  ],
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  coverageDirectory: 'test-output/jest/coverage',
+  coveragePathIgnorePatterns: ['src/lib/types.ts'],
+};

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@open-kingdom/shared-frontend-feature-user-management",
+  "version": "0.0.2-9",
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "@open-kingdom/source": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "nx": {
+    "tags": [
+      "scope:shared",
+      "type:feature",
+      "environment:frontend"
+    ]
+  }
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+export { UserList } from './lib/components/users/UserList.component';
+export { AcceptInvitation } from './lib/components/invitations';
+export { StatusCard } from './lib/components/shared/StatusCard.component';
+export type { User, Role } from './lib/types';

package/src/lib/components/invitations/AcceptInvitation.component.spec.tsx

@@ -0,0 +1,154 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { AcceptInvitation } from './AcceptInvitation.component';
+
+const mockValidateQuery = jest.fn();
+const mockAccept = jest.fn();
+const mockAcceptState = jest.fn();
+
+jest.mock('@open-kingdom/shared-frontend-data-access-api-client', () => ({
+  useInvitationsControllerValidateQuery: (...args: unknown[]) =>
+    mockValidateQuery(...args),
+  useInvitationsControllerAcceptMutation: () => [mockAccept, mockAcceptState()],
+}));
+
+describe('AcceptInvitation', () => {
+  beforeEach(() => {
+    mockAccept.mockReset();
+    mockAccept.mockReturnValue({ unwrap: () => Promise.resolve() });
+    mockAcceptState.mockReturnValue({ isLoading: false, isSuccess: false });
+  });
+
+  it('shows a loading message while checking the invitation', () => {
+    mockValidateQuery.mockReturnValue({
+      data: undefined,
+      isLoading: true,
+      error: null,
+    });
+    render(<AcceptInvitation token="test-token" />);
+    expect(screen.getByText('Validating invitation...')).toBeInTheDocument();
+  });
+
+  it('tells the user when something went wrong checking the invitation', () => {
+    mockValidateQuery.mockReturnValue({
+      data: undefined,
+      isLoading: false,
+      error: { status: 500 },
+    });
+    render(<AcceptInvitation token="bad-token" />);
+    expect(screen.getByText('Validation Failed')).toBeInTheDocument();
+  });
+
+  it('tells the user when the invitation link is invalid or expired', () => {
+    mockValidateQuery.mockReturnValue({
+      data: { valid: false },
+      isLoading: false,
+      error: null,
+    });
+    render(<AcceptInvitation token="bad-token" />);
+    expect(screen.getByText('Invalid Invitation')).toBeInTheDocument();
+  });
+
+  it('shows the registration form for a valid invitation', () => {
+    mockValidateQuery.mockReturnValue({
+      data: { valid: true, email: 'test@example.com', role: 'user' },
+      isLoading: false,
+      error: null,
+    });
+    render(<AcceptInvitation token="test-token" />);
+    expect(screen.getByText('Accept Invitation')).toBeInTheDocument();
+    expect(screen.getByLabelText(/first name/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/last name/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/^password/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/confirm password/i)).toBeInTheDocument();
+  });
+
+  it('shows the invited email and assigned role', () => {
+    mockValidateQuery.mockReturnValue({
+      data: { valid: true, email: 'test@example.com', role: 'admin' },
+      isLoading: false,
+      error: null,
+    });
+    render(<AcceptInvitation token="test-token" />);
+    expect(screen.getByText('admin')).toBeInTheDocument();
+    expect(screen.getByText('test@example.com')).toBeInTheDocument();
+  });
+
+  it('requires a password of at least 8 characters', async () => {
+    mockValidateQuery.mockReturnValue({
+      data: { valid: true, email: 'test@example.com', role: 'user' },
+      isLoading: false,
+      error: null,
+    });
+    render(<AcceptInvitation token="test-token" />);
+    fireEvent.change(screen.getByLabelText(/^password/i), {
+      target: { value: 'short' },
+    });
+    fireEvent.change(screen.getByLabelText(/confirm password/i), {
+      target: { value: 'short' },
+    });
+    fireEvent.click(screen.getByText('Create Account'));
+    await waitFor(() => {
+      expect(
+        screen.getByText('Password must be at least 8 characters')
+      ).toBeInTheDocument();
+    });
+  });
+
+  it('requires password and confirmation to match', async () => {
+    mockValidateQuery.mockReturnValue({
+      data: { valid: true, email: 'test@example.com', role: 'user' },
+      isLoading: false,
+      error: null,
+    });
+    render(<AcceptInvitation token="test-token" />);
+    fireEvent.change(screen.getByLabelText(/^password/i), {
+      target: { value: 'password123' },
+    });
+    fireEvent.change(screen.getByLabelText(/confirm password/i), {
+      target: { value: 'different123' },
+    });
+    fireEvent.click(screen.getByText('Create Account'));
+    await waitFor(() => {
+      expect(screen.getByText('Passwords do not match')).toBeInTheDocument();
+    });
+  });
+
+  it('submits the account details when the form is filled correctly', async () => {
+    mockValidateQuery.mockReturnValue({
+      data: { valid: true, email: 'test@example.com', role: 'user' },
+      isLoading: false,
+      error: null,
+    });
+    render(<AcceptInvitation token="good-token" />);
+    fireEvent.change(screen.getByLabelText(/^password/i), {
+      target: { value: 'password123' },
+    });
+    fireEvent.change(screen.getByLabelText(/confirm password/i), {
+      target: { value: 'password123' },
+    });
+    fireEvent.click(screen.getByText('Create Account'));
+    await waitFor(() => {
+      expect(mockAccept).toHaveBeenCalledWith({
+        acceptInvitationDto: {
+          token: 'good-token',
+          password: 'password123',
+          firstName: undefined,
+          lastName: undefined,
+        },
+      });
+    });
+  });
+
+  it('confirms account creation and links to login', () => {
+    mockValidateQuery.mockReturnValue({
+      data: { valid: true, email: 'test@example.com', role: 'user' },
+      isLoading: false,
+      error: null,
+    });
+    mockAcceptState.mockReturnValue({ isLoading: false, isSuccess: true });
+    render(<AcceptInvitation token="good-token" loginPath="/profile" />);
+    expect(screen.getByText('Account Created')).toBeInTheDocument();
+    expect(screen.getByText('Go to login')).toHaveAttribute('href', '/profile');
+  });
+});

package/src/lib/components/invitations/AcceptInvitation.component.tsx

@@ -0,0 +1,197 @@
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import {
+  useInvitationsControllerValidateQuery,
+  useInvitationsControllerAcceptMutation,
+} from '@open-kingdom/shared-frontend-data-access-api-client';
+import { StatusCard } from '../shared/StatusCard.component';
+import { FormField } from '../shared/FormField.component';
+import {
+  inputStyles,
+  buttonPrimaryStyles,
+  cardStyles,
+  bodyTextStyles,
+} from '../../styles';
+
+const acceptSchema = z
+  .object({
+    firstName: z.string().optional(),
+    lastName: z.string().optional(),
+    password: z.string().min(8, 'Password must be at least 8 characters'),
+    confirmPassword: z.string(),
+  })
+  .refine((data) => data.password === data.confirmPassword, {
+    message: 'Passwords do not match',
+    path: ['confirmPassword'],
+  });
+
+type AcceptFormValues = z.infer<typeof acceptSchema>;
+
+interface AcceptInvitationProps {
+  token: string;
+  loginPath?: string;
+}
+
+export function AcceptInvitation({ token, loginPath }: AcceptInvitationProps) {
+  const {
+    data: validation,
+    isLoading: isValidating,
+    error: validationError,
+  } = useInvitationsControllerValidateQuery({ token });
+
+  const [accept, { isLoading, isSuccess }] =
+    useInvitationsControllerAcceptMutation();
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<AcceptFormValues>({
+    resolver: zodResolver(acceptSchema),
+    defaultValues: {
+      firstName: '',
+      lastName: '',
+      password: '',
+      confirmPassword: '',
+    },
+  });
+
+  const email = validation?.email ?? '';
+  const role = validation?.role ?? 'user';
+
+  const onSubmit = async (data: AcceptFormValues) => {
+    try {
+      await accept({
+        acceptInvitationDto: {
+          token,
+          password: data.password,
+          firstName: data.firstName || undefined,
+          lastName: data.lastName || undefined,
+        },
+      }).unwrap();
+    } catch {
+      // Error notification handled by RTK error middleware
+    }
+  };
+
+  if (isSuccess) {
+    return (
+      <StatusCard
+        variant="success"
+        title="Account Created"
+        message="Your account has been created successfully. You can now log in with your email and password."
+      >
+        {loginPath && (
+          <a
+            href={loginPath}
+            data-testid="accept-login-link"
+            className="mt-4 inline-block text-sm font-medium text-primary-600 hover:underline dark:text-primary-400"
+          >
+            Go to login
+          </a>
+        )}
+      </StatusCard>
+    );
+  }
+
+  if (isValidating) {
+    return <StatusCard variant="loading" message="Validating invitation..." />;
+  }
+
+  if (validationError) {
+    return (
+      <StatusCard
+        variant="error"
+        title="Validation Failed"
+        message="Unable to validate this invitation. Please check your connection and try again."
+      />
+    );
+  }
+
+  if (!validation?.valid) {
+    return (
+      <StatusCard
+        variant="error"
+        title="Invalid Invitation"
+        message="This invitation link is invalid or has expired. Please contact the person who invited you for a new link."
+      />
+    );
+  }
+
+  return (
+    <div className={cardStyles}>
+      <h2
+        data-testid="accept-heading"
+        className="text-xl font-bold text-neutral-900 dark:text-neutral-100"
+      >
+        Accept Invitation
+      </h2>
+      <p className={`mt-1 text-sm ${bodyTextStyles}`}>
+        You've been invited as <strong data-testid="accept-role">{role}</strong>{' '}
+        with email <strong data-testid="accept-email">{email}</strong>
+      </p>
+
+      <form onSubmit={handleSubmit(onSubmit)} className="mt-4 space-y-4">
+        <FormField label="First Name" htmlFor="accept-firstName">
+          <input
+            id="accept-firstName"
+            data-testid="accept-first-name-input"
+            type="text"
+            placeholder="John"
+            className={inputStyles}
+            {...register('firstName')}
+          />
+        </FormField>
+        <FormField label="Last Name" htmlFor="accept-lastName">
+          <input
+            id="accept-lastName"
+            data-testid="accept-last-name-input"
+            type="text"
+            placeholder="Doe"
+            className={inputStyles}
+            {...register('lastName')}
+          />
+        </FormField>
+        <FormField
+          label="Password"
+          htmlFor="accept-password"
+          required
+          error={errors.password?.message}
+        >
+          <input
+            id="accept-password"
+            data-testid="accept-password-input"
+            type="password"
+            placeholder="Min. 8 characters"
+            className={inputStyles}
+            {...register('password')}
+          />
+        </FormField>
+        <FormField
+          label="Confirm Password"
+          htmlFor="accept-confirmPassword"
+          required
+          error={errors.confirmPassword?.message}
+        >
+          <input
+            id="accept-confirmPassword"
+            data-testid="accept-confirm-password-input"
+            type="password"
+            placeholder="Repeat password"
+            className={inputStyles}
+            {...register('confirmPassword')}
+          />
+        </FormField>
+        <button
+          type="submit"
+          data-testid="accept-submit-btn"
+          disabled={isLoading}
+          className={`w-full ${buttonPrimaryStyles}`}
+        >
+          {isLoading ? 'Creating account...' : 'Create Account'}
+        </button>
+      </form>
+    </div>
+  );
+}

package/src/lib/components/invitations/InviteUserModal.component.spec.tsx

@@ -0,0 +1,79 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { Provider } from 'react-redux';
+import { configureStore } from '@reduxjs/toolkit';
+import { InviteUserModal } from './InviteUserModal.component';
+
+const mockInvite = jest.fn();
+
+jest.mock('@open-kingdom/shared-frontend-data-access-api-client', () => ({
+  useInvitationsControllerInviteMutation: () => [
+    mockInvite,
+    { isLoading: false },
+  ],
+}));
+
+jest.mock('@open-kingdom/shared-frontend-data-access-notifications', () => ({
+  showSuccessNotification: jest.fn((msg: string) => ({
+    type: 'notify',
+    payload: msg,
+  })),
+}));
+
+const store = configureStore({ reducer: {} });
+
+function renderWithProviders(ui: React.ReactElement) {
+  return render(<Provider store={store}>{ui}</Provider>);
+}
+
+describe('InviteUserModal', () => {
+  beforeEach(() => {
+    mockInvite.mockReset();
+    mockInvite.mockReturnValue({ unwrap: () => Promise.resolve() });
+  });
+
+  it('shows the invitation form when opened', () => {
+    renderWithProviders(<InviteUserModal isOpen={true} onClose={jest.fn()} />);
+    expect(screen.getByText('Invite User')).toBeInTheDocument();
+    expect(screen.getByLabelText(/email/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/role/i)).toBeInTheDocument();
+  });
+
+  it('hides the form when closed', () => {
+    renderWithProviders(<InviteUserModal isOpen={false} onClose={jest.fn()} />);
+    expect(screen.queryByText('Invite User')).not.toBeInTheDocument();
+  });
+
+  it('sends the invitation with the entered email and role', async () => {
+    const onClose = jest.fn();
+    renderWithProviders(<InviteUserModal isOpen={true} onClose={onClose} />);
+    fireEvent.change(screen.getByLabelText(/email/i), {
+      target: { value: 'user@example.com' },
+    });
+    fireEvent.click(screen.getByText('Send Invitation'));
+    await waitFor(() => {
+      expect(mockInvite).toHaveBeenCalledWith({
+        inviteUserDto: { email: 'user@example.com', role: 'guest' },
+      });
+    });
+  });
+
+  it('closes after sending the invitation', async () => {
+    const onClose = jest.fn();
+    renderWithProviders(<InviteUserModal isOpen={true} onClose={onClose} />);
+    fireEvent.change(screen.getByLabelText(/email/i), {
+      target: { value: 'user@example.com' },
+    });
+    fireEvent.click(screen.getByText('Send Invitation'));
+    await waitFor(() => {
+      expect(onClose).toHaveBeenCalled();
+    });
+  });
+
+  it('closes when clicking Cancel', () => {
+    const onClose = jest.fn();
+    renderWithProviders(<InviteUserModal isOpen={true} onClose={onClose} />);
+    fireEvent.click(screen.getByText('Cancel'));
+    expect(onClose).toHaveBeenCalled();
+  });
+});

package/src/lib/components/invitations/InviteUserModal.component.tsx

@@ -0,0 +1,121 @@
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { useDispatch } from 'react-redux';
+import { useInvitationsControllerInviteMutation } from '@open-kingdom/shared-frontend-data-access-api-client';
+import { showSuccessNotification } from '@open-kingdom/shared-frontend-data-access-notifications';
+import { ModalOverlay } from '../shared/ModalOverlay.component';
+import { FormField } from '../shared/FormField.component';
+import {
+  inputStyles,
+  buttonPrimaryStyles,
+  buttonSecondaryStyles,
+} from '../../styles';
+
+const inviteSchema = z.object({
+  email: z.string().email('Invalid email address'),
+  role: z.enum(['guest', 'user', 'admin']),
+});
+
+type InviteFormValues = z.infer<typeof inviteSchema>;
+
+interface InviteUserModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function InviteUserModal({ isOpen, onClose }: InviteUserModalProps) {
+  const dispatch = useDispatch();
+  const [invite, { isLoading }] = useInvitationsControllerInviteMutation();
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm<InviteFormValues>({
+    resolver: zodResolver(inviteSchema),
+    defaultValues: { email: '', role: 'guest' },
+  });
+
+  const titleId = 'invite-modal-title';
+
+  const handleClose = () => {
+    reset();
+    onClose();
+  };
+
+  const onSubmit = async (data: InviteFormValues) => {
+    try {
+      await invite({ inviteUserDto: data }).unwrap();
+      dispatch(showSuccessNotification('Invitation sent successfully'));
+      reset();
+      onClose();
+    } catch {
+      // Error notification handled by RTK error middleware
+    }
+  };
+
+  return (
+    <ModalOverlay
+      isOpen={isOpen}
+      onClose={handleClose}
+      ariaLabelledBy={titleId}
+    >
+      <h3
+        id={titleId}
+        className="text-lg font-semibold text-neutral-900 dark:text-neutral-100"
+      >
+        Invite User
+      </h3>
+      <form onSubmit={handleSubmit(onSubmit)} className="mt-4 space-y-4">
+        <FormField
+          label="Email"
+          htmlFor="invite-email"
+          required
+          error={errors.email?.message}
+        >
+          <input
+            id="invite-email"
+            data-testid="invite-email-input"
+            type="email"
+            placeholder="user@example.com"
+            className={inputStyles}
+            {...register('email')}
+          />
+        </FormField>
+        <FormField label="Role" htmlFor="invite-role">
+          <select
+            id="invite-role"
+            data-testid="invite-role-select"
+            className={inputStyles}
+            {...register('role')}
+          >
+            <option value="guest">Guest</option>
+            <option value="user">User</option>
+            <option value="admin">Admin</option>
+          </select>
+        </FormField>
+        <div className="flex justify-end gap-3">
+          <button
+            type="button"
+            data-testid="invite-cancel-btn"
+            onClick={handleClose}
+            disabled={isLoading}
+            className={buttonSecondaryStyles}
+          >
+            Cancel
+          </button>
+          <button
+            type="submit"
+            data-testid="invite-submit-btn"
+            disabled={isLoading}
+            className={buttonPrimaryStyles}
+          >
+            {isLoading ? 'Sending...' : 'Send Invitation'}
+          </button>
+        </div>
+      </form>
+    </ModalOverlay>
+  );
+}

package/src/lib/components/invitations/index.ts

@@ -0,0 +1,2 @@
+export { InviteUserModal } from './InviteUserModal.component';
+export { AcceptInvitation } from './AcceptInvitation.component';