Add login functionality

Author: tonyhu-x

src/Experiment.test.tsx

@@ -0,0 +1,34 @@
+import { act, render, screen } from '@testing-library/react';
+
+import { Experiment } from './Experiment.js';
+
+test('Login component is rendered', async () => {
+  await act(async () => {
+    render(
+      <Experiment loginOptions={{
+        loginType: 'login',
+        loginComponent: <p>Hello</p>,
+      }}
+      >
+        <p>World</p>
+      </Experiment>,
+    );
+  });
+  expect(screen.queryByText('Hello')).not.toBeNull();
+  expect(screen.queryByText('World')).toBeNull();
+});
+
+test('Children are immediately displayed if login set to "skip"', async () => {
+  await act(async () => {
+    render(
+      <Experiment loginOptions={{
+        loginType: 'login',
+        loginComponent: <p>Hello</p>,
+      }}
+      >
+        <p>World</p>
+      </Experiment>,
+    );
+  });
+  expect(screen.queryByText('Hello')).not.toBeNull();
+});

src/Experiment.tsx

@@ -2,6 +2,7 @@ import { createContext, useCallback, useEffect, useMemo, useReducer, useRef, use
 import { genUserIdDefault } from './utils.js';
 import { Result, db } from './database.js';
 import { DefaultEndScreen, renderDefaultErrorScreen } from './defaults.js';
+import { LoginOptions } from './login.js';
 import { createRoot } from 'react-dom/client';
 
 let errorHandlerEffectRun = false;
@@ -14,6 +15,10 @@ interface ExperimentInternals {
   addResult: (taskId: string, screenId: string, key: string, val: string) => void;
 }
 
+interface ExperimentControls {
+  login: (userId: string) => void;
+}
+
 const ExperimentInternalsDefault: ExperimentInternals = {
   currentTask: '',
   registerTask: () => { throw new Error('Experiment ancestor component not found.'); },
@@ -22,10 +27,15 @@ const ExperimentInternalsDefault: ExperimentInternals = {
   addResult: () => { throw new Error('Experiment ancestor component not found.'); },
 };
 
+const ExperimentControlsDefault: ExperimentControls = {
+  login: () => { throw new Error('Experiment ancestor component not found.'); },
+};
+
 const ExperimentInternalsContext = createContext(ExperimentInternalsDefault);
+const ExperimentControlsContext = createContext(ExperimentControlsDefault);
 
 type ExperimentProps = {
-  genUserId?: () => Promise<string>;
+  loginOptions?: LoginOptions;
   onResultAdded?: (result: Result) => void;
   endScreen?: React.ReactNode;
   useErrorHandling?: boolean;
@@ -34,10 +44,10 @@ type ExperimentProps = {
 };
 
 function Experiment({
+  loginOptions = { loginType: 'skip', loginComponent: <> </> },
   endScreen = <DefaultEndScreen />,
   useErrorHandling = false,
   renderErrorScreen = renderDefaultErrorScreen,
-  genUserId = genUserIdDefault,
   ...otherProps
 }: ExperimentProps) {
   // valid user ID must not be empty
@@ -48,10 +58,10 @@ function Experiment({
   const [, forceUpdate] = useReducer(x => x + 1, 0);
 
   useEffect(() => {
-    if (userId == '') {
-      genUserId()
+    if (loginOptions.loginType == 'skip' && userId == '') {
+      genUserIdDefault()
         .then((id) => {
-          setUserId(id);
+          login(id);
         });
     }
     if (useErrorHandling && !errorHandlerEffectRun) {
@@ -70,6 +80,7 @@ function Experiment({
     );
     document.body.appendChild(newDiv);
   }
+
   const registerTask = useCallback((id: string) => {
     // no duplicate IDs allowed
     if (allTasksRef.current.includes(id)) {
@@ -129,11 +140,32 @@ function Experiment({
     addResult,
   }), [taskRef.current, registerTask, unregisterTask, advance, addResult]);
 
+  const login = useCallback((userId: string) => {
+    setUserId(userId);
+  }, [setUserId]);
+
+  const experimentControls = useMemo(() => ({
+    login,
+  }), [login]);
+
+  let toDisplay;
+  if (ended) {
+    toDisplay = endScreen;
+  }
+  else if (userId == '') {
+    toDisplay = loginOptions.loginComponent;
+  }
+  else {
+    toDisplay = otherProps.children;
+  }
+
   return (
     <ExperimentInternalsContext.Provider value={experimentInternals}>
-      {ended ? endScreen : otherProps.children}
+      <ExperimentControlsContext.Provider value={experimentControls}>
+        {toDisplay}
+      </ExperimentControlsContext.Provider>
     </ExperimentInternalsContext.Provider>
   );
 };
 
-export { ExperimentInternalsContext, ExperimentProps, Experiment};
+export { ExperimentInternalsContext, ExperimentControlsContext, ExperimentProps, Experiment };

src/login.tsx

@@ -0,0 +1,27 @@
+type LoginOptions = {
+  /**
+   * The type of login to use. If 'skip', a random user ID will be generated and used.
+   */
+  loginType: 'skip' | 'login';
+  /**
+   * The component to display for login. If loginType is 'skip', this is ignored.
+   *
+   * In the following example, the login component displays a button that always logs
+   * in the user with the ID 'myUserId' when clicked:
+   *
+   * ```tsx
+   * function MyLoginComponent() {
+   *   const { login } = useContext(ExperimentControlsContext);
+   *
+   *   return (
+   *     <button onClick={() => login('myUserId')}>Click me to log in!</button>
+   *   );
+   * }
+   * ```
+   *
+   * In a real-world application, you would likely want each user to get a unique ID.
+   */
+  loginComponent: React.ReactNode;
+};
+
+export { LoginOptions };