dce-reactkit 3.9.2 → 3.9.4-beta.1

package/dist/esm/types/components/AppWrapper.d.ts

@@ -44,6 +44,30 @@ export declare const confirm: (title: string, text: string, opts?: {
     cancelButtonText?: string;
     cancelButtonVariant?: Variant;
 }) => Promise<boolean>;
+/**
+ * Show a prompt modal asking the user for input
+ * @author Yuen Ler Chow
+ * @param title the title text to display at the top of the prompt
+ * @param text the text to display in the prompt
+ * @param [opts={}] additional options for the prompt dialog
+ * @param [opts.placeholder] the placeholder text for the input field
+ * @param [opts.defaultText] the default text for the input field
+ * @param [opts.confirmButtonText=Okay] the text of the confirm button
+ * @param [opts.confirmButtonVariant=Variant.Dark] the variant of the confirm button
+ * @param [opts.cancelButtonText=Cancel] the text of the cancel button
+ * @param [opts.cancelButtonVariant=Variant.Secondary] the variant of the cancel button
+ * @returns Promise that resolves with the input string or null if canceled
+ */
+export declare const prompt: (title: string, text: string, currentInputFieldText: string, opts?: {
+    placeholder?: string | undefined;
+    defaultText?: string | undefined;
+    confirmButtonText?: string | undefined;
+    confirmButtonVariant?: Variant | undefined;
+    cancelButtonText?: string | undefined;
+    cancelButtonVariant?: Variant | undefined;
+    minNumChars?: number | undefined;
+    findValidationError?: ((text: string) => string | undefined) | undefined;
+} | undefined) => Promise<string | null>;
 /**
  * Show a fatal error message
  * @author Gabe Abrams

package/dist/esm/types/helpers/genRouteHandler.d.ts

@@ -9,6 +9,12 @@ import LogFunction from '../types/LogFunction';
  * @param opts.handler function that processes the request
  * @param [opts.skipSessionCheck] if true, skip the session check (allow users
  *   to not be logged in and launched via LTI)
+ * @param [opts.allowedHosts] if included, only allow requests from these hosts
+ *   (start a hostname with a "*" to only check the end of the hostname)
+ *   you can include just one string instead of an array
+ * @param [opts.bannedHosts] if included, do not allow requests from these hosts
+ *   (start a hostname with a "*" to only check the end of the hostname)
+ *   you can include just one string instead of an array
  * @param [opts.unhandledErrorMessagePrefix] if included, when an error that
  *   is not of type ErrorWithCode is thrown, the client will receive an error
  *   where the error message is prefixed with this string. For example,
@@ -63,6 +69,8 @@ declare const genRouteHandler: (opts: {
         logServerEvent: LogFunction;
     }) => any;
     skipSessionCheck?: boolean | undefined;
+    allowedHosts?: string | string[] | undefined;
+    bannedHosts?: string | string[] | undefined;
     unhandledErrorMessagePrefix?: string | undefined;
 }) => (req: any, res: any, next: () => void) => Promise<undefined>;
 export default genRouteHandler;

package/dist/esm/types/types/ModalType.d.ts

@@ -4,6 +4,7 @@
  */
 declare enum ModalType {
     Okay = "okay",
+    Cancel = "cancel",
     OkayCancel = "okay-cancel",
     YesNo = "yes-no",
     YesNoCancel = "yes-no-cancel",

package/dist/esm/types/types/ReactKitErrorCode.d.ts

@@ -8,6 +8,8 @@ declare enum ReactKitErrorCode {
     SessionExpired = "DRK3",
     MissingParameter = "DRK4",
     InvalidParameter = "DRK5",
+    HostNotAllowed = "DRK17",
+    HostBanned = "DRK18",
     WrongCourse = "DRK6",
     NoCACCLSendRequestFunction = "DRK7",
     NoCACCLGetLaunchInfoFunction = "DRK8",

package/dist/index.d.ts

@@ -131,6 +131,7 @@ declare enum ModalSize {
  */
 declare enum ModalType {
     Okay = "okay",
+    Cancel = "cancel",
     OkayCancel = "okay-cancel",
     YesNo = "yes-no",
     YesNoCancel = "yes-no-cancel",
@@ -1044,6 +1045,12 @@ type LogFunction = (opts: ({
  * @param opts.handler function that processes the request
  * @param [opts.skipSessionCheck] if true, skip the session check (allow users
  *   to not be logged in and launched via LTI)
+ * @param [opts.allowedHosts] if included, only allow requests from these hosts
+ *   (start a hostname with a "*" to only check the end of the hostname)
+ *   you can include just one string instead of an array
+ * @param [opts.bannedHosts] if included, do not allow requests from these hosts
+ *   (start a hostname with a "*" to only check the end of the hostname)
+ *   you can include just one string instead of an array
  * @param [opts.unhandledErrorMessagePrefix] if included, when an error that
  *   is not of type ErrorWithCode is thrown, the client will receive an error
  *   where the error message is prefixed with this string. For example,
@@ -1098,6 +1105,8 @@ declare const genRouteHandler: (opts: {
         logServerEvent: LogFunction;
     }) => any;
     skipSessionCheck?: boolean | undefined;
+    allowedHosts?: string | string[] | undefined;
+    bannedHosts?: string | string[] | undefined;
     unhandledErrorMessagePrefix?: string | undefined;
 }) => (req: any, res: any, next: () => void) => Promise<undefined>;
 
@@ -1637,6 +1646,8 @@ declare enum ReactKitErrorCode {
     SessionExpired = "DRK3",
     MissingParameter = "DRK4",
     InvalidParameter = "DRK5",
+    HostNotAllowed = "DRK17",
+    HostBanned = "DRK18",
     WrongCourse = "DRK6",
     NoCACCLSendRequestFunction = "DRK7",
     NoCACCLGetLaunchInfoFunction = "DRK8",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dce-reactkit",
-  "version": "3.9.2",
+  "version": "3.9.4-beta.1",
   "description": "Shared components for Harvard DCE apps",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/AppWrapper.tsx

@@ -240,6 +240,124 @@ export const confirm = async (
   });
 };
 
+/*----------------------------------------*/
+/* --------------- Prompt -------------- */
+/*----------------------------------------*/
+
+// Stored copies of setters
+let setPromptInfo: (
+  info:
+  | undefined
+  | {
+    title: string;
+    text: string;
+    currentInputFieldText: string,
+    opts: {
+      placeholder?: string,
+      defaultText?: string,
+      confirmButtonText?: string,
+      confirmButtonVariant?: Variant,
+      cancelButtonText?: string,
+      cancelButtonVariant?: Variant,
+      minNumChars?: number,
+      findValidationError?: (text: string) => string | undefined,
+    },
+  },
+) => void;
+
+// Function to call when prompt is closed
+let onPromptClosed: (result: string | null) => void;
+
+/**
+ * Show a prompt modal asking the user for input
+ * @author Yuen Ler Chow
+ * @param title the title text to display at the top of the prompt
+ * @param text the text to display in the prompt
+ * @param [opts={}] additional options for the prompt dialog
+ * @param [opts.placeholder] the placeholder text for the input field
+ * @param [opts.defaultText] the default text for the input field
+ * @param [opts.confirmButtonText=Okay] the text of the confirm button
+ * @param [opts.confirmButtonVariant=Variant.Dark] the variant of the confirm button
+ * @param [opts.cancelButtonText=Cancel] the text of the cancel button
+ * @param [opts.cancelButtonVariant=Variant.Secondary] the variant of the cancel button
+ * @returns Promise that resolves with the input string or null if canceled
+ */
+export const prompt = async (
+  title: string,
+  text: string,
+  currentInputFieldText: string,
+  opts?: {
+    placeholder?: string,
+    defaultText?: string,
+    confirmButtonText?: string,
+    confirmButtonVariant?: Variant,
+    cancelButtonText?: string,
+    cancelButtonVariant?: Variant,
+    minNumChars?: number,
+    findValidationError?: (text: string) => string | undefined,
+  },
+): Promise<string | null> => {
+  // Wait for helper to exist
+  await waitForHelper(() => {
+    return !!setPromptInfo;
+  });
+
+  // Fallback if prompt is not available
+  if (!setPromptInfo) {
+    const resultPassesValidation = false;
+    while (!resultPassesValidation) {
+      // eslint-disable-next-line no-alert
+      const result = window.prompt(
+        `${title}\n\n${text}`,
+        opts?.defaultText ?? '',
+      );
+
+      if (result === null) {
+        return null;
+      }
+
+      // Validate min num chars
+      const minNumCharsValidationError = (
+        (opts?.minNumChars && result.length < opts.minNumChars)
+          ? `Please enter at least ${opts.minNumChars} characters.`
+          : undefined
+      );
+
+      // Run custom validation
+      const customValidationError = (
+        opts?.findValidationError
+        && opts.findValidationError(result)
+      );
+
+      // Show validation issue
+      if (minNumCharsValidationError || customValidationError) {
+        alert(
+          'Invalid Input',
+          `${minNumCharsValidationError ?? ''} ${customValidationError ?? ''}`,
+        );
+      } else {
+        return result;
+      }
+    }
+  }
+
+  // Return promise that resolves with result of prompt
+  return new Promise((resolve) => {
+    // Setup handler
+    onPromptClosed = (result: string | null) => {
+      resolve(result);
+    };
+
+    // Show the prompt
+    setPromptInfo({
+      title,
+      text,
+      currentInputFieldText,
+      opts: (opts ?? {}),
+    });
+  });
+};
+
 /*----------------------------------------*/
 /* ------------- Fatal Error ------------ */
 /*----------------------------------------*/
@@ -465,6 +583,27 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
   >(undefined);
   setConfirmInfo = setConfirmInfoInner;
 
+  // Prompt
+  const [promptInfo, setPromptInfoInner] = useState<
+  | undefined
+  | {
+    title: string,
+    text: string,
+    currentInputFieldText: string,
+    opts: {
+      placeholder?: string,
+      defaultText?: string,
+      confirmButtonText?: string,
+      confirmButtonVariant?: Variant,
+      cancelButtonText?: string,
+      cancelButtonVariant?: Variant,
+      minNumChars?: number,
+      findValidationError?: (text: string) => string | undefined,
+    }
+  }
+  >(undefined);
+  setPromptInfo = setPromptInfoInner;
+
   // Session expired
   const [
     sessionHasExpired,
@@ -531,6 +670,83 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
     );
   }
 
+  /* ------------- Prompt ------------ */
+
+  if (promptInfo) {
+    // Run min char validation
+    const minNumCharsValidationError = (
+      (
+        promptInfo.opts.minNumChars
+        && promptInfo.currentInputFieldText.length < promptInfo.opts.minNumChars
+      )
+        ? `Please enter at least ${promptInfo.opts.minNumChars} characters.`
+        : undefined
+    );
+
+    // Run custom validation
+    const customValidationError = (
+      promptInfo.opts.findValidationError
+      && promptInfo.opts.findValidationError(promptInfo.currentInputFieldText)
+    );
+
+    modal = (
+      <ModalForWrapper
+        key={`prompt-${promptInfo.title}-${promptInfo.text}`}
+        title={promptInfo.title}
+        // only show the cancel button if there is a validation error
+        type={(
+          (customValidationError || minNumCharsValidationError)
+            ? ModalType.Cancel
+            : ModalType.OkayCancel
+        )}
+        okayLabel={promptInfo.opts.confirmButtonText}
+        okayVariant={promptInfo.opts.confirmButtonVariant}
+        cancelLabel={promptInfo.opts.cancelButtonText}
+        cancelVariant={promptInfo.opts.cancelButtonVariant}
+        onClose={(buttonType) => {
+          const result = (
+            buttonType === ModalButtonType.Okay
+              ? promptInfo.currentInputFieldText
+              : null
+          );
+
+          setPromptInfo(undefined);
+
+          if (onPromptClosed) {
+            onPromptClosed(result);
+          }
+        }}
+        onTopOfOtherModals
+        dontAllowBackdropExit
+      >
+        <div className="d-flex flex-column align-items-center">
+          <p>{promptInfo.text}</p>
+          <input
+            type="text"
+            placeholder={promptInfo.opts.placeholder}
+            value={promptInfo.currentInputFieldText}
+            onChange={(e) => {
+              return setPromptInfo({
+                ...promptInfo,
+                currentInputFieldText: e.target.value,
+              });
+            }}
+          />
+          {minNumCharsValidationError && (
+            <div className="text-danger bg-danger bg-opacity-25 p-2 m-1 rounded">
+              {minNumCharsValidationError}
+            </div>
+          )}
+          {customValidationError && (
+            <div className="text-danger bg-danger bg-opacity-25 p-2 m-1 rounded">
+              {customValidationError}
+            </div>
+          )}
+        </div>
+      </ModalForWrapper>
+    );
+  }
+
   /* ------ Custom Modal Portals ------ */
 
   // Custom modal portals

package/src/components/Modal/index.tsx

@@ -49,6 +49,9 @@ const modalTypeToModalButtonTypes: {
   [ModalType.Okay]: [
     ModalButtonType.Okay,
   ],
+  [ModalType.Cancel]: [
+    ModalButtonType.Cancel,
+  ],
   [ModalType.OkayCancel]: [
     ModalButtonType.Okay,
     ModalButtonType.Cancel,

package/src/helpers/genRouteHandler.ts

@@ -39,6 +39,12 @@ import LogLevel from '../types/LogLevel';
  * @param opts.handler function that processes the request
  * @param [opts.skipSessionCheck] if true, skip the session check (allow users
  *   to not be logged in and launched via LTI)
+ * @param [opts.allowedHosts] if included, only allow requests from these hosts
+ *   (start a hostname with a "*" to only check the end of the hostname)
+ *   you can include just one string instead of an array
+ * @param [opts.bannedHosts] if included, do not allow requests from these hosts
+ *   (start a hostname with a "*" to only check the end of the hostname)
+ *   you can include just one string instead of an array
  * @param [opts.unhandledErrorMessagePrefix] if included, when an error that
  *   is not of type ErrorWithCode is thrown, the client will receive an error
  *   where the error message is prefixed with this string. For example,
@@ -102,6 +108,8 @@ const genRouteHandler = (
       },
     ) => any,
     skipSessionCheck?: boolean,
+    allowedHosts?: string[] | string,
+    bannedHosts?: string[] | string,
     unhandledErrorMessagePrefix?: string,
   },
 ) => {
@@ -110,6 +118,97 @@ const genRouteHandler = (
     // Output params
     const output: { [k in string]: any } = {};
 
+    /*----------------------------------------*/
+    /* ----------- Hostname Check ----------- */
+    /*----------------------------------------*/
+
+    // Get hostnames
+    const originURL = String(
+      req.get('origin')
+      || req.headers.origin
+      || req.headers.referer
+    );
+    const originHostname = (
+      originURL
+        // Remove protocol
+        .replace(/(^\w+:|^)\/\//, '')
+        // Remove port
+        .replace(/:\d+$/, '')
+    );
+    const serverHostname = String(req.hostname);
+
+    // Check allowed
+    if (opts.allowedHosts) {
+      // Only accept requests from allowed hosts
+      const allowedArray = (
+        Array.isArray(opts.allowedHosts)
+          ? opts.allowedHosts
+          : [opts.allowedHosts]
+      );
+
+      // Check if server is localhost
+      if (serverHostname === 'localhost') {
+        // Allow localhost
+        allowedArray.push('localhost');
+      }
+
+      // Check if current host is allowed
+      const allowed = allowedArray.some((allowedHost) => {
+        if (allowedHost.startsWith('*')) {
+          // Check end of hostname
+          return originHostname.endsWith(allowedHost.substring(1));
+        }
+
+        // Check full hostname
+        return originHostname.toLowerCase() === allowedHost.toLowerCase();
+      });
+
+      // If not allowed, return error
+      if (!allowed) {
+        return handleError(
+          res,
+          {
+            message: 'You are not allowed to access this endpoint.',
+            code: ReactKitErrorCode.HostNotAllowed,
+            status: 403,
+          },
+        );
+      }
+    }
+
+    // Check banned
+    if (opts.bannedHosts) {
+      // Do not allow requests from banned hosts
+      const bannedArray = (
+        Array.isArray(opts.bannedHosts)
+          ? opts.bannedHosts
+          : [opts.bannedHosts]
+      );
+
+      // Check if current host is banned
+      const banned = bannedArray.some((bannedHost) => {
+        if (bannedHost.startsWith('*')) {
+          // Check end of hostname
+          return originHostname.endsWith(bannedHost.substring(1));
+        }
+
+        // Check full hostname
+        return originHostname.toLowerCase() === bannedHost.toLowerCase();
+      });
+
+      // If banned, return error
+      if (banned) {
+        return handleError(
+          res,
+          {
+            message: 'You are not allowed to access this endpoint.',
+            code: ReactKitErrorCode.HostBanned,
+            status: 403,
+          },
+        );
+      }
+    }
+
     /*----------------------------------------*/
     /* ------------ Parse Params ------------ */
     /*----------------------------------------*/

package/src/types/ModalType.tsx

@@ -4,6 +4,7 @@
  */
 enum ModalType {
   Okay = 'okay', // [Okay]
+  Cancel = 'cancel', // [Cancel]
   OkayCancel = 'okay-cancel', // [Okay] [Cancel]
   YesNo = 'yes-no', // [Yes] [No]
   YesNoCancel = 'yes-no-cancel', // [Yes] [No] [Cancel]

package/src/types/ReactKitErrorCode.tsx

@@ -1,4 +1,4 @@
-// Highest error code = DRK16
+// Highest error code = DRK18
 
 /**
  * List of error codes built into the react kit
@@ -10,6 +10,8 @@ enum ReactKitErrorCode {
   SessionExpired = 'DRK3',
   MissingParameter = 'DRK4',
   InvalidParameter = 'DRK5',
+  HostNotAllowed = 'DRK17',
+  HostBanned = 'DRK18',
   WrongCourse = 'DRK6',
   NoCACCLSendRequestFunction = 'DRK7',
   NoCACCLGetLaunchInfoFunction = 'DRK8',