dce-reactkit 3.6.24 → 3.6.26

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

@@ -16,10 +16,12 @@ import LogFunction from '../types/LogFunction';
  *   send (a function that sends a string to the client),
  *   redirect (takes a url and redirects the user to that url),
  *   renderErrorPage (shows a static error page to the user),
+ *   renderInfoPage (shows a static info page to the user),
  *   and returns the value to send to the client as a JSON API response, or
  *   calls next() or redirect(...) or send(...) or renderErrorPage(...).
  *   Note: params also has userId, userFirstName,
- *   userLastName, isLearner, isTTM, isAdmin, and any other variables that
+ *   userLastName, userEmail, userAvatarURL, isLearner, isTTM, isAdmin,
+ *   and any other variables that
  *   are directly added to the session, if the user does have a session.
  */
 declare const genRouteHandler: (opts: {
@@ -41,6 +43,10 @@ declare const genRouteHandler: (opts: {
             pageTitle?: string;
             status?: number;
         }) => void;
+        renderInfoPage: (opts: {
+            title: string;
+            body: string;
+        }) => void;
         logServerEvent: LogFunction;
     }) => any;
     skipSessionCheck?: boolean | undefined;

package/dist/esm/types/html/genInfoPage.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Generate a static info page
+ * @author Gabe Abrams
+ * @param opts object containing all arguments
+ * @param opts.title title of the info box
+ * @param opts.body a human-readable text body for the info alert
+ */
+declare const genInfoPage: (opts: {
+    title: string;
+    body: string;
+}) => string;
+export default genInfoPage;

package/dist/index.d.ts

@@ -1006,10 +1006,12 @@ type LogFunction = (opts: ({
  *   send (a function that sends a string to the client),
  *   redirect (takes a url and redirects the user to that url),
  *   renderErrorPage (shows a static error page to the user),
+ *   renderInfoPage (shows a static info page to the user),
  *   and returns the value to send to the client as a JSON API response, or
  *   calls next() or redirect(...) or send(...) or renderErrorPage(...).
  *   Note: params also has userId, userFirstName,
- *   userLastName, isLearner, isTTM, isAdmin, and any other variables that
+ *   userLastName, userEmail, userAvatarURL, isLearner, isTTM, isAdmin,
+ *   and any other variables that
  *   are directly added to the session, if the user does have a session.
  */
 declare const genRouteHandler: (opts: {
@@ -1031,6 +1033,10 @@ declare const genRouteHandler: (opts: {
             pageTitle?: string;
             status?: number;
         }) => void;
+        renderInfoPage: (opts: {
+            title: string;
+            body: string;
+        }) => void;
         logServerEvent: LogFunction;
     }) => any;
     skipSessionCheck?: boolean | undefined;

package/package.json

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

package/src/helpers/genRouteHandler.ts

@@ -45,10 +45,12 @@ import LogLevel from '../types/LogLevel';
  *   send (a function that sends a string to the client),
  *   redirect (takes a url and redirects the user to that url),
  *   renderErrorPage (shows a static error page to the user),
+ *   renderInfoPage (shows a static info page to the user),
  *   and returns the value to send to the client as a JSON API response, or
  *   calls next() or redirect(...) or send(...) or renderErrorPage(...).
  *   Note: params also has userId, userFirstName,
- *   userLastName, isLearner, isTTM, isAdmin, and any other variables that
+ *   userLastName, userEmail, userAvatarURL, isLearner, isTTM, isAdmin,
+ *   and any other variables that
  *   are directly added to the session, if the user does have a session.
  */
 const genRouteHandler = (
@@ -74,6 +76,12 @@ const genRouteHandler = (
             status?: number,
           },
         ) => void,
+        renderInfoPage: (
+          opts: {
+            title: string,
+            body: string,
+          },
+        ) => void,
         logServerEvent: LogFunction,
       },
     ) => any,
@@ -346,6 +354,14 @@ const genRouteHandler = (
         ? launchInfo.userEmail
         : undefined
     );
+    output.userAvatarURL = (
+      launchInfo
+        ? (
+          launchInfo.userImage
+          ?? 'http://www.gravatar.com/avatar/?d=identicon'
+        )
+        : undefined
+    );
     output.isLearner = (
       launchInfo
         ? !!launchInfo.isLearner
@@ -716,6 +732,23 @@ const genRouteHandler = (
       });
     };
 
+    /**
+     * Render an info page
+     * @author Gabe Abrams
+     * @param renderOpts object containing all arguments
+     * @param renderOpts.title title of the info box
+     * @param renderOpts.body a human-readable text body for the info alert
+     */
+    const renderInfoPage = (
+      renderOpts: {
+        title: string,
+        body: string,
+      },
+    ) => {
+      const html = genErrorPage(renderOpts);
+      send(html, 200);
+    };
+
     // Call the handler
     try {
       const results = await opts.handler({
@@ -728,6 +761,7 @@ const genRouteHandler = (
         },
         redirect,
         renderErrorPage,
+        renderInfoPage,
         logServerEvent,
       });
 

package/src/html/genInfoPage.ts

@@ -0,0 +1,100 @@
+/**
+ * Generate a static info page
+ * @author Gabe Abrams
+ * @param opts object containing all arguments
+ * @param opts.title title of the info box
+ * @param opts.body a human-readable text body for the info alert
+ */
+const genInfoPage = (
+  opts: {
+    title: string,
+    body: string,
+  },
+): string => {
+  const {
+    title,
+    body,
+  } = opts;
+
+  return `
+<head>
+  <!-- Metadata -->
+  <meta
+    name="viewport"
+    content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0"
+  >
+
+  <!-- Title -->
+  <title>${title}</title>
+
+  <!-- Bootstrap -->
+  <link
+    rel="stylesheet"
+    href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.1/css/bootstrap.min.css"
+    integrity="sha512-siwe/oXMhSjGCwLn+scraPOWrJxHlUgMBMZXdPe2Tnk3I0x3ESCoLz7WZ5NTH6SZrywMY+PB1cjyqJ5jAluCOg=="
+    crossorigin="anonymous"
+    referrerpolicy="no-referrer"
+  />
+  <script
+    src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.1/js/bootstrap.min.js"
+    integrity="sha512-vyRAVI0IEm6LI/fVSv/Wq/d0KUfrg3hJq2Qz5FlfER69sf3ZHlOrsLriNm49FxnpUGmhx+TaJKwJ+ByTLKT+Yg=="
+    crossorigin="anonymous"
+    referrerpolicy="no-referrer"
+  ></script>
+
+  <!-- FontAwesome -->
+  <link
+    rel="stylesheet"
+    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
+    integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A=="
+    crossorigin="anonymous"
+    referrerpolicy="no-referrer"
+  />
+
+  <!-- Style -->
+  <style>
+    .DCEReactKit-pop-in {
+      animation-name: DCEReactKit-pop-in;
+      animation-duration: 0.5s;
+      animation-iteration-count: 1;
+      animation-timing-function: ease-out;
+      animation-fill-mode: both;
+
+      transform-origin: center;
+    }
+
+    @keyframes DCEReactKit-pop-in {
+      0% {
+        opacity: 0;
+        transform: scale(0.9);
+      }
+      100% {
+        opacity: 1;
+        transform: scale(1);
+      }
+    }
+  </style>
+</head>
+
+<!-- Body -->
+<body class="bg-dark text-center pt-3 ps-3 pe-3">
+  <!-- Alert -->
+  <div
+    class="DCEReactKit-pop-in alert alert-info d-inline-block"
+    style="width: 50em; max-width: 100%"
+  >
+    <!-- Title -->
+    <h2>
+      <i class="me-1 fa-solid fa-circle-info"></i>
+      ${title}
+    </h2>
+    <!-- Body -->
+    <div>
+      ${body}
+    </div>
+  </div>
+</body>
+  `;
+};
+
+export default genInfoPage;