dce-reactkit 3.9.0-beta-loading-modal.2 → 3.9.0-beta-loading-modal.3

package/src/components/Modal/index.tsx

@@ -53,6 +53,9 @@ const modalTypeToModalButtonTypes: {
   [ModalType.Okay]: [
     ModalButtonType.Okay,
   ],
+  [ModalType.Cancel]: [
+    ModalButtonType.Cancel,
+  ],
   [ModalType.OkayCancel]: [
     ModalButtonType.Okay,
     ModalButtonType.Cancel,
@@ -460,7 +463,7 @@ const Modal: React.FC<ModalProps> = (props) => {
           // Override sizes for even larger for XL
           width: (
             size === ModalSize.ExtraLarge
-              ? 'calc(100vw - 3rem)'
+              ? 'calc(100vw - 1rem)'
               : undefined
           ),
           maxWidth: (

package/src/components/MultiSwitch.tsx

@@ -153,7 +153,7 @@ const MultiSwitch: React.FC<Props> = (props) => {
 
   // Constants
   const gutterRems = heightRem * 0.1;
-  const itemWidthRems = heightRem * 1.3;
+  const itemWidthRems = heightRem * 2.2;
   const textFontSize = heightRem / 3.5;
   const iconFontSize = heightRem / 2;
   const borderWidthRems = 0.05;

package/src/components/RadioButton.tsx

@@ -32,6 +32,8 @@ type Props = {
   selected?: boolean,
   // The id of the button
   id?: string,
+  // Custom class name of the button
+  className?: string,
   // If true, no margin on right
   noMarginOnRight?: boolean,
   // Variant for when radio is selected
@@ -40,6 +42,8 @@ type Props = {
   unselectedVariant?: Variant,
   // True if using a small button
   small?: boolean,
+  // If true, use complex formatting (tabs, newlines) in the text
+  useComplexFormatting?: boolean,
 };
 
 /*------------------------------------------------------------------------*/
@@ -60,6 +64,7 @@ const RadioButton: React.FC<Props> = (props) => {
     title,
     selected,
     id,
+    className,
     noMarginOnRight,
     selectedVariant = (
       isDarkModeOn()
@@ -72,6 +77,7 @@ const RadioButton: React.FC<Props> = (props) => {
         : Variant.Light
     ),
     small,
+    useComplexFormatting,
   } = props;
 
   /*------------------------------------------------------------------------*/
@@ -87,7 +93,7 @@ const RadioButton: React.FC<Props> = (props) => {
       type="button"
       id={id}
       title={title}
-      className={`btn btn-${selected ? selectedVariant : unselectedVariant}${selected ? ' selected' : ''}${small ? ' btn-sm' : ''} m-0${noMarginOnRight ? '' : ' me-1'}`}
+      className={`btn btn-${selected ? selectedVariant : unselectedVariant}${selected ? ' selected' : ''}${small ? ' btn-sm' : ''} m-0${noMarginOnRight ? '' : ' me-1'} ${className ?? ''}`}
       aria-label={`${ariaLabel}${selected ? ': currently selected' : ''}`}
       onClick={() => {
         if (!selected) {
@@ -95,11 +101,32 @@ const RadioButton: React.FC<Props> = (props) => {
         }
       }}
     >
-      <FontAwesomeIcon
-        icon={selected ? faDotCircle : faCircle}
-        className="me-1"
-      />
-      {text}
+      <div className="d-flex flex-row align-items-center">
+        <div className="me-1">
+          <FontAwesomeIcon
+            icon={selected ? faDotCircle : faCircle}
+          />
+        </div>
+        {
+          useComplexFormatting
+            ? (
+              <pre
+                className="ps-1 text-start text-break m-0"
+                style={{
+                  whiteSpace: 'pre-wrap',
+                  tabSize: 2,
+                }}
+              >
+                {text}
+              </pre>
+            )
+            : (
+              <div className="flex-grow-1 text-start text-break">
+                {text}
+              </div>
+            )
+        }
+      </div>
     </button>
   );
 };

package/src/components/SimpleDateChooser.tsx

@@ -94,7 +94,13 @@ const SimpleDateChooser: React.FC<Props> = (props) => {
     }
     const monthName = getMonthName(month).full;
     // Year is start year +1 for each 12 months
-    const year = (startYear + (Math.floor(unmoddedMonth / 12)));
+    let yearsToAdd = 0;
+    let monthsOfYearsToAdd = unmoddedMonth;
+    while (monthsOfYearsToAdd > 12) {
+      monthsOfYearsToAdd -= 12;
+      yearsToAdd += 1;
+    }
+    const year = startYear + yearsToAdd;
 
     // Figure out which days are allowed
     const days = [];
@@ -174,7 +180,7 @@ const SimpleDateChooser: React.FC<Props> = (props) => {
   return (
     <div
       className="SimpleDateChooser d-inline-block"
-      aria-label={`date chooser with selected date: ${month} ${day}, ${year}`}
+      aria-label={`date chooser with selected date: ${month}/${day}/${year}`}
     >
       {/* Month Chooser */}
       <select

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 ------------ */
     /*----------------------------------------*/
@@ -354,22 +453,22 @@ const genRouteHandler = (
     output.userId = (
       launchInfo
         ? launchInfo.userId
-        : undefined
+        : (output.userId ?? undefined)
     );
     output.userFirstName = (
       launchInfo
         ? launchInfo.userFirstName
-        : undefined
+        : (output.userFirstName ?? undefined)
     );
     output.userLastName = (
       launchInfo
         ? launchInfo.userLastName
-        : undefined
+        : (output.userLastName ?? undefined)
     );
     output.userEmail = (
       launchInfo
         ? launchInfo.userEmail
-        : undefined
+        : (output.userEmail ?? undefined)
     );
     output.userAvatarURL = (
       launchInfo
@@ -377,32 +476,32 @@ const genRouteHandler = (
           launchInfo.userImage
           ?? 'http://www.gravatar.com/avatar/?d=identicon'
         )
-        : undefined
+        : (output.userAvatarURL ?? undefined)
     );
     output.isLearner = (
       launchInfo
         ? !!launchInfo.isLearner
-        : undefined
+        : (output.isLearner ?? undefined)
     );
     output.isTTM = (
       launchInfo
         ? !!launchInfo.isTTM
-        : undefined
+        : (output.isTTM ?? undefined)
     );
     output.isAdmin = (
       launchInfo
         ? !!launchInfo.isAdmin
-        : undefined
+        : (output.isAdmin ?? undefined)
     );
     output.courseId = (
       launchInfo
         ? (output.courseId ?? launchInfo.courseId)
-        : undefined
+        : (output.courseId ?? undefined)
     );
     output.courseName = (
       launchInfo
         ? launchInfo.contextLabel
-        : undefined
+        : (output.courseName ?? undefined)
     );
 
     // Add other session variables
@@ -526,16 +625,16 @@ const genRouteHandler = (
 
         // Main log info
         const mainLogInfo: LogMainInfo = {
-          id: `${launchInfo ? 'unknown' : launchInfo.userId}-${Date.now()}-${Math.floor(Math.random() * 100000)}-${Math.floor(Math.random() * 100000)}`,
-          userFirstName: (launchInfo ? 'unknown' : launchInfo.userFirstName),
-          userLastName: (launchInfo ? 'unknown' : launchInfo.userLastName),
-          userEmail: (launchInfo ? 'unknown' : launchInfo.userEmail),
-          userId: (launchInfo ? 'unknown' : launchInfo.userId),
+          id: `${launchInfo ? launchInfo.userId : 'unknown'}-${Date.now()}-${Math.floor(Math.random() * 100000)}-${Math.floor(Math.random() * 100000)}`,
+          userFirstName: (launchInfo ? launchInfo.userFirstName: 'unknown'),
+          userLastName: (launchInfo ? launchInfo.userLastName : 'unknown'),
+          userEmail: (launchInfo ? launchInfo.userEmail : 'unknown'),
+          userId: (launchInfo ? launchInfo.userId : 'unknown'),
           isLearner: (launchInfo && !!launchInfo.isLearner),
           isAdmin: (launchInfo && !!launchInfo.isAdmin),
           isTTM: (launchInfo && !!launchInfo.isTTM),
-          courseId: (launchInfo ? 'unknown' : launchInfo.courseId),
-          courseName: (launchInfo ? 'unknown' : launchInfo.contextLabel),
+          courseId: (launchInfo ? launchInfo.courseId : 'unknown' ),
+          courseName: (launchInfo ? launchInfo.contextLabel : 'unknown'),
           browser,
           device,
           year,

package/src/helpers/logClientEvent.tsx

@@ -7,6 +7,9 @@ import LogLevel from '../types/LogLevel';
 // Import shared functions
 import visitServerEndpoint from './visitServerEndpoint';
 
+// Import status
+import { appHasNoServer } from '../client/initClient';
+
 /* ------- Metadata Populator ------- */
 
 // Type of a metadata populator function
@@ -36,6 +39,11 @@ export const setClientEventMetadataPopulator = (
  * @author Gabe Abrams
  */
 const logClientEvent: LogFunction = async (opts) => {
+  // Don't write to the server if there is none
+  if (appHasNoServer()) {
+    return;
+  }
+
   // Populate metadata
   let metadata = (opts.metadata ?? {});
   if (metadataPopulator) {

package/src/helpers/validators/ChicagoTitleCase.test.ts

@@ -0,0 +1,85 @@
+// Importing the testing function
+// import chicagoTitleCase from './chicagoTitleCase';
+
+// // Import constants
+// import { INVALID_STRING_ERRORS, INVALID_REGEX_ERROR } from './shared/constants/ERROR_MESSAGES';
+
+// /*------------------------------------------------------------------------*/
+// /* ---------------------------- Valid Tests --------------------------- */
+// /*------------------------------------------------------------------------*/
+
+// const validTests: { input: string, expected: string }[] = [
+//   {
+//     input: 'this is the american language',
+//     expected: 'This the American language',
+//   },
+//   {
+//     input: 'to kill a mockingbird',
+//     expected: 'To Kill a Mockingbird',
+//   },
+//   {
+//     input: 'the lord of the rings',
+//     expected: 'The Lord of the Rings',
+//   },
+//   {
+//     input: 'pride and prejudice',
+//     expected: 'Pride and Prejudice',
+//   },
+//   {
+//     input: 'the road not taken',
+//     expected: 'The Road Not Taken',
+//   },
+// ];
+
+// test(
+//   'Converts strings to Chicago title case correctly.',
+//   async () => {
+//     validTests.forEach(({ input, expected }) => {
+//       expect(chicagoTitleCase(input)).toBe(expected);
+//     });
+//   },
+// );
+
+// /*------------------------------------------------------------------------*/
+// /* ---------------------------- Edge Cases ---------------------------- */
+// /*------------------------------------------------------------------------*/
+
+// const edgeCases: { input: string, expected: string }[] = [
+//   {
+//     input: 'x',
+//     expected: 'X',
+//   },
+//   {
+//     input: ' ',
+//     expected: ' ',
+//   },
+//   {
+//     input: '',
+//     expected: '',
+//   },
+//   {
+//     input: 'the',
+//     expected: 'The',
+//   },
+//   {
+//     input: 'THE ROAD NOT TAKEN',
+//     expected: 'The Road Not Taken',
+//   },
+//   {
+//     input: 'tO kiLL A mOckingBirD',
+//     expected: 'To Kill a Mockingbird',
+//   },
+//   {
+//     input: 'pRiDe And pReduJiCe',
+//     expected: 'Pride and Prejudice',
+//   },
+// ];
+
+// test(
+//   'Handles the edge cases for the function that converts a string to Chicago Title Case.',
+//   async () => {
+//     edgeCases.forEach(({ input, expected }) => {
+//       expect(chicagoTitleCase(input)).toBe(expected);
+//     });
+//   },
+// );

package/src/helpers/validators/ChicagoTitleCase.ts

@@ -0,0 +1,32 @@
+/**
+ * This function converts a string to title case based on Chicago Title Case 
+ * Style rules.
+ * @author Leisha Bhandari
+ * @param input: The input string that needs to be converted to Chicago title
+ *               case.
+ * @returns Input string converted to title case
+ */
+
+
+const chicagoTitleCase = (input: string): string => {
+   // List of lowercase words according to Chicago Manual of Style
+  const lowerCaseWords: string[] = [
+    'in', 'nor', 'of', 'on', 'or', 'as', 'at', 'but', 'by',
+    'for', 'if', 'so', 'the', 'a', 'an', 'and', 'to', 'up',
+    'yet'
+  ];
+
+  return input
+    // Converts given input string to lowercase
+    .toLowerCase() 
+    // Splits the given string into separate words
+    .split(' ') 
+    .map((word, index, words) => 
+      // Capitalize the first word, last word, and the words that aren't
+      // in lowerCaseWords
+      index === 0 || !lowerCaseWords.includes(word) || index === words.length - 1
+        ? `${word.charAt(0).toUpperCase()}${word.slice(1)}` // Capitalize the first letter
+        : word // Nothing happens to the word
+    )
+    .join(' '); // Joins the words back 
+};

package/src/helpers/validators/findURL.test.ts

@@ -0,0 +1,83 @@
+// Import the function to be tested
+// import findURLs from './findURL';
+
+// // Import constants
+// import { INVALID_STRING_ERRORS, INVALID_REGEX_ERROR } from './shared/constants/ERROR_MESSAGES';
+
+// /*------------------------------------------------------------------------*/
+// /* ---------------------------- Valid Tests --------------------------- */
+// /*------------------------------------------------------------------------*/
+
+// const validTests: { block: string, expected: { start: number, end: number }[] }[] = [
+//   {
+//     block: 'Visit http://example.com for more information.',
+//     expected: [{ start: 6, end: 23 }],
+//   },
+//   {
+//     block: 'Multiple URLs: http://one.com and http://two.com.',
+//     expected: [
+//       { start: 15, end: 29 },
+//       { start: 34, end: 48 },
+//     ],
+//   },
+//   {
+//     block: 'Localhost URLs: http://localhost and http://127.0.0.1.',
+//     expected: [
+//       { start: 16, end: 31 },
+//       { start: 36, end: 52 },
+//     ],
+//   },
+//   {
+//     block: 'Embedded URL: text https://embedded-url.com?query=1&value=2.',
+//     expected: [{ start: 13, end: 51 }],
+//   },
+//   {
+//     block: 'Secure site: https://secure-site.com/path?query=string#fragment',
+//     expected: [{ start: 13, end: 58 }],
+//   },
+// ];
+
+// test(
+//   'Returns correct start and end indices for valid URLs within a string.',
+//   async () => {
+//     validTests.forEach(({ block, expected }) => {
+//       expect(findURLs(block)).toStrictEqual(expected);
+//     });
+//   },
+// );
+
+// /*------------------------------------------------------------------------*/
+// /* ---------------------------- Invalid Tests --------------------------- */
+// /*------------------------------------------------------------------------*/
+
+// const invalidTests: { block: string, expected: { start: number, end: number }[] }[] = [
+//   {
+//     block: 'No URL.',
+//     expected: [],
+//   },
+//   {
+//     block: 'URL format is wrong: http:/example.com and htt://example.com.',
+//     expected: [],
+//   },
+//   {
+//     block: 'Any punctuation after the URL http://example.com, should not count.',
+//     expected: [{ start: 20, end: 37 }],
+//   },
+//   {
+//     block: 'Starting punctuation ,http://example.com should not count.',
+//     expected: [{ start: 22, end: 39 }],
+//   },
+//   {
+//     block: 'Spaces in the middle http://exa mple.com is invalid.',
+//     expected: [],
+//   },
+// ];
+
+// test(
+//   'Returns empty array for strings without valid URLs.',
+//   async () => {
+//     invalidTests.forEach(({ block, expected }) => {
+//       expect(findURLs(block)).toStrictEqual(expected);
+//     });
+//   },
+// );

package/src/helpers/validators/findURL.ts

@@ -0,0 +1,43 @@
+// /**
+//  * This function finds URLs within a given string and returns an array of 
+//  * their locations.
+//  * @author Leisha Bhandari
+//  * @param block: The block of text to search for URLs
+//  * @returns Arrays where each of them contain the start and end index of the URL
+//  */
+// function findURLs(block: string): { start: number, end: number }[] {
+//   // Expression representing the skeleton of a URL to help match and find the  
+//   // URLs within the block of text (Also takes care of Unicode characters)
+//   const urlSkeleton = /(https?:\/\/[^\s\u0000-\u001F.,]+[^\s\u0000-\u001F.,]?(?:\?[^\s\u0000-\u001F]+)?(?:#[^\s\u0000-\u001F]+)?)/g;
+//   const found: { start: number, end: number }[] = [];
+//   let match: RegExpExecArray | null;
+
+//   // While loop to find the URLs in the given block of texts using the URL 
+//   // skeleton
+//   while ((match === urlSkeleton.exec(block)) 
+//          && match !== null) {
+//     // To find the beginning index of the URL
+//     let start = match.index;
+//     // To find the last index of the URL
+//     let end = match.index + match[0].length;
+
+//     // If statements to check whether the URL is followed by some kind of 
+//     // punctuation mark
+//     if (block.charAt(end) === '.' || /[,;:!?"]/.test(block.charAt(end))) {
+//       end--;
+//     }
+
+//     // While statement to make sure that the URL does not start with a 
+//     // punctuation mark
+//     while (start > 0 && /[.,:;!?]/.test(block.charAt(start - 1))) {
+//       start--;
+//     }
+
+//     // The object with start and end index of the URL is found and pushed to 
+//     // the found array
+//     found.push({ start, end });
+//   }
+  
+//   // Returns the array of the found URLs location
+//   return found;
+// }