qpp-style 9.33.0 → 9.33.2

package/.editorconfig

@@ -6,7 +6,7 @@ root = true
 
 [*]
 indent_style = space
-indent_size = 4
+indent_size = 2
 end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true

package/components/Header/HeaderAccountMenu.jsx

@@ -2,8 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useHeaderState } from './hooks';
 import { setUtagLink } from './utag-helpers';
-import SessionDialogUI from '../SessionDialogUI';
 import HeaderMenuItem from './HeaderMenuItem';
+import Session from '../Session';
 
 const HeaderAccountMenu = ({ handleClick, isLoginEnabled, isDevPre }) => {
   const { closeMenus, RouterLink, headerContent } = useHeaderState();
@@ -66,7 +66,7 @@ const HeaderAccountMenu = ({ handleClick, isLoginEnabled, isDevPre }) => {
   if (isLoggedIn) {
     return (
       <>
-        <SessionDialogUI />
+        <Session />
         <HeaderMenuItem
           hasMenu
           menuName="Login"

package/components/Session/Session.jsx

@@ -0,0 +1,99 @@
+import React, { useEffect, useState } from 'react';
+import cookie from 'cookie';
+import Modal from '../Modal';
+import { fetchTtl } from '../../session';
+import refreshSession from '../../session/refresh';
+import logoutSession from '../../session/logout';
+
+// calculate TWO_MINUTES for interval
+const SECOND = 1000;
+const MINUTE = 60 * SECOND;
+const TWO_MINUTES = 2 * MINUTE;
+const DEFAULT_SESSION_CHECK_INTERVAL = TWO_MINUTES;
+
+// This Dialog shows up 2 minutes before the user session ends
+// giving the user an opportunity to refresh the token
+// or to sign out
+const InactiveDialog = () => {
+  const [isOpen, setIsOpen] = useState(true);
+
+  useEffect(() => {
+    const timeout = setTimeout(() => logoutSession(window), TWO_MINUTES);
+    return () => clearInterval(timeout);
+  }, []);
+
+  return (
+    <Modal
+      useDesignSystem
+      title="You will be signed out within two minutes"
+      isOpen={isOpen}
+      primary={{
+        title: 'Keep me signed in',
+        onClick: () => {
+          refreshSession();
+          setIsOpen(false);
+        },
+      }}
+      secondary={{
+        title: 'Sign me out now',
+        onClick: () => logoutSession(window),
+      }}
+      onRequestClose={() => setIsOpen(false)}
+    >
+      <p>
+        You have been inactive for thirty minutes. For your security, we will
+        sign you out automatically.
+      </p>
+    </Modal>
+  );
+};
+
+// 120 seconds is 2 minutes
+const DEFAULT_WARNING_TIMEOUT_SECONDS = 120;
+function shouldShowInactiveDialog(
+  timeRemainingSeconds,
+  warningTimeoutSeconds = DEFAULT_WARNING_TIMEOUT_SECONDS,
+) {
+  return timeRemainingSeconds < warningTimeoutSeconds;
+}
+
+const Session = () => {
+  const [isInactiveDialogOpen, setIsInactiveDialogOpen] = useState(false);
+
+  useEffect(() => {
+    let didCancel = false;
+    const cookies = cookie.parse(document.cookie);
+    const hasAuthToken = !!cookies.qpp_auth_token;
+    async function isSessionValid() {
+      if (hasAuthToken) {
+        const timeRemaining = await fetchTtl(cookies.qpp_auth_token);
+        // safeguard against unmounted component
+        if (didCancel) return;
+
+        // token expired
+        if (timeRemaining === 0) {
+          logoutSession(window);
+          return;
+        }
+        // token is about to expire
+        if (shouldShowInactiveDialog(timeRemaining)) {
+          setIsInactiveDialogOpen(true);
+        }
+      }
+    }
+    isSessionValid();
+    const interval = setInterval(
+      isSessionValid,
+      DEFAULT_SESSION_CHECK_INTERVAL,
+    );
+
+    return () => {
+      clearInterval(interval);
+      didCancel = true;
+    };
+  }, []);
+
+  return <>{isInactiveDialogOpen && <InactiveDialog />}</>;
+};
+
+export default Session;

package/components/Session/SessionDialogWrapped.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { render } from 'react-dom';
+import SessionDialogUI from '../Session';
+
+/**
+ * Renders the Session Dialog UI content.
+ */
+export default class SessionDialog {
+  constructor(options) {
+    render(<SessionDialogUI />, options.rootElement);
+  }
+}

package/components/Session/index.jsx

@@ -0,0 +1,3 @@
+import Session from './Session';
+
+export default Session;