@pega/react-sdk-components 0.23.0

package/lib/components/forms/UserReference/UserReference.js

@@ -0,0 +1,127 @@
+import React, { Fragment, memo, useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { Typography } from '@material-ui/core';
+import AutoComplete from '../AutoComplete';
+import Dropdown from '../Dropdown';
+import { getUserId, isUserNameAvailable } from './UserReferenceUtils';
+const DROPDOWN_LIST = 'Drop-down list';
+const SEARCH_BOX = 'Search box';
+const UserReference = props => {
+    const { label, displayAs, getPConnect, value, testId, helperText, validatemessage, placeholder, showAsFormattedText, additionalProps, hideLabel, readOnly, required, disabled, onChange } = props;
+    const [dropDownDataSource, setDropDownDataSource] = useState([]);
+    const [userName, setUserName] = useState('');
+    const OPERATORS_DP = PCore.getEnvironmentInfo().getDefaultOperatorDP();
+    const userId = getUserId(value);
+    useEffect(() => {
+        if (userId && readOnly && showAsFormattedText) {
+            if (isUserNameAvailable(value)) {
+                setUserName(value.userName);
+            }
+            else {
+                // if same user ref field is referred in view as editable & readonly formatted text
+                // referenced users won't be available, so get user details from dx api
+                const { getOperatorDetails } = PCore.getUserApi();
+                getOperatorDetails(userId).then(res => {
+                    if (res.data && res.data.pyOperatorInfo && res.data.pyOperatorInfo.pyUserName) {
+                        setUserName(res.data.pyOperatorInfo.pyUserName);
+                    }
+                });
+            }
+        }
+        else if (displayAs === DROPDOWN_LIST) {
+            const queryPayload = {
+                dataViewName: OPERATORS_DP
+            };
+            PCore.getRestClient()
+                .invokeRestApi('getListData', { queryPayload })
+                .then(res => {
+                const ddDataSource = res.data.data.map(listItem => ({
+                    key: listItem.pyUserIdentifier,
+                    value: listItem.pyUserName
+                }));
+                setDropDownDataSource(ddDataSource);
+            })
+                .catch(err => {
+                // eslint-disable-next-line no-console
+                console.error(err);
+            });
+        }
+    }, [displayAs, readOnly, showAsFormattedText, value]);
+    let userReferenceComponent = null;
+    if (readOnly && showAsFormattedText) {
+        if (userId) {
+            userReferenceComponent = (React.createElement(Fragment, null,
+                React.createElement("div", null,
+                    React.createElement(Typography, { variant: 'caption' }, label),
+                    React.createElement(Typography, { variant: 'body1' }, userName))));
+        }
+    }
+    else {
+        if (displayAs === SEARCH_BOX) {
+            const columns = [
+                {
+                    value: 'pyUserName',
+                    display: 'true',
+                    useForSearch: true,
+                    primary: 'true'
+                },
+                {
+                    value: 'pyUserIdentifier',
+                    setProperty: 'Associated property',
+                    key: 'true',
+                    display: 'true',
+                    secondary: 'true',
+                    useForSearch: 'true'
+                }
+            ];
+            userReferenceComponent = (React.createElement(AutoComplete, { additionalProps: additionalProps, label: label, getPConnect: getPConnect, datasource: OPERATORS_DP, listType: 'datapage', columns: columns, testId: testId, placeholder: placeholder, readOnly: readOnly, disabled: disabled, required: required, helperText: helperText, validatemessage: validatemessage, value: userId, hideLabel: hideLabel, onChange: onChange }));
+        }
+        if (displayAs === DROPDOWN_LIST) {
+            userReferenceComponent = (React.createElement(Dropdown, { additionalProps: additionalProps, datasource: dropDownDataSource, listType: 'associated', getPConnect: getPConnect, label: label, value: userId, testId: testId, placeholder: placeholder, readOnly: readOnly, disabled: disabled, required: required, helperText: helperText, validatemessage: validatemessage, hideLabel: hideLabel, onChange: onChange }));
+        }
+    }
+    return userReferenceComponent;
+};
+UserReference.propTypes = {
+    getPConnect: PropTypes.func.isRequired,
+    displayAs: PropTypes.string,
+    label: PropTypes.string,
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.objectOf(PropTypes.any)]),
+    testId: PropTypes.string,
+    placeholder: PropTypes.string,
+    helperText: PropTypes.string,
+    disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+    readOnly: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+    required: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+    validatemessage: PropTypes.string,
+    showAsFormattedText: PropTypes.bool,
+    additionalProps: PropTypes.objectOf(PropTypes.any),
+    hideLabel: PropTypes.bool
+};
+UserReference.defaultProps = {
+    displayAs: null,
+    label: null,
+    value: null,
+    readOnly: false,
+    testId: null,
+    placeholder: null,
+    helperText: null,
+    disabled: false,
+    required: false,
+    validatemessage: null,
+    showAsFormattedText: false,
+    additionalProps: {},
+    variant: 'inline',
+    hideLabel: false
+};
+// as objects are there in props, shallow comparision fails & re-rendering of comp happens even with
+// same key value pairs in obj. hence using custom comparison function on when to re-render
+const comparisonFn = (prevProps, nextProps) => {
+    return (getUserId(prevProps.value) === getUserId(nextProps.value) &&
+        prevProps.validatemessage === nextProps.validatemessage &&
+        prevProps.required === nextProps.required &&
+        prevProps.disabled === nextProps.disabled &&
+        prevProps.readOnly === nextProps.readOnly);
+};
+export default memo(UserReference, comparisonFn);
+//# sourceMappingURL=UserReference.js.map

package/lib/components/forms/UserReference/UserReference.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserReference.js","sourceRoot":"","sources":["../../../../src/components/forms/UserReference/UserReference.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { Fragment, memo, useEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { Typography } from '@material-ui/core';\nimport AutoComplete from '../AutoComplete';\nimport Dropdown from '../Dropdown';\nimport { getUserId, isUserNameAvailable } from './UserReferenceUtils';\n\ndeclare const PCore: any;\nconst DROPDOWN_LIST = 'Drop-down list';\nconst SEARCH_BOX = 'Search box';\n\nconst UserReference = props => {\n  const {\n    label,\n    displayAs,\n    getPConnect,\n    value,\n    testId,\n    helperText,\n    validatemessage,\n    placeholder,\n    showAsFormattedText,\n    additionalProps,\n    hideLabel,\n    readOnly,\n    required,\n    disabled,\n    onChange\n  } = props;\n  const [dropDownDataSource, setDropDownDataSource] = useState([]);\n  const [userName, setUserName] = useState('');\n  const OPERATORS_DP = PCore.getEnvironmentInfo().getDefaultOperatorDP();\n  const userId = getUserId(value);\n\n  useEffect(() => {\n    if (userId && readOnly && showAsFormattedText) {\n      if (isUserNameAvailable(value)) {\n        setUserName(value.userName);\n      } else {\n        // if same user ref field is referred in view as editable & readonly formatted text\n        // referenced users won't be available, so get user details from dx api\n        const { getOperatorDetails } = PCore.getUserApi();\n        getOperatorDetails(userId).then(res => {\n          if (res.data && res.data.pyOperatorInfo && res.data.pyOperatorInfo.pyUserName) {\n            setUserName(res.data.pyOperatorInfo.pyUserName);\n          }\n        });\n      }\n    } else if (displayAs === DROPDOWN_LIST) {\n      const queryPayload = {\n        dataViewName: OPERATORS_DP\n      };\n      PCore.getRestClient()\n        .invokeRestApi('getListData', { queryPayload })\n        .then(res => {\n          const ddDataSource = res.data.data.map(listItem => ({\n            key: listItem.pyUserIdentifier,\n            value: listItem.pyUserName\n          }));\n          setDropDownDataSource(ddDataSource);\n        })\n        .catch(err => {\n          // eslint-disable-next-line no-console\n          console.error(err);\n        });\n    }\n  }, [displayAs, readOnly, showAsFormattedText, value]);\n\n  let userReferenceComponent: any = null;\n\n  if (readOnly && showAsFormattedText) {\n    if (userId) {\n      userReferenceComponent = (\n        <Fragment>\n          {/*\n            TODO: This has to be replaced with Operator Component\n          */}\n          <div>\n            <Typography variant='caption'>{label}</Typography>\n            <Typography variant='body1'>{userName}</Typography>\n          </div>\n        </Fragment>\n      );\n    }\n  } else {\n    if (displayAs === SEARCH_BOX) {\n      const columns = [\n        {\n          value: 'pyUserName',\n          display: 'true',\n          useForSearch: true,\n          primary: 'true'\n        },\n        {\n          value: 'pyUserIdentifier',\n          setProperty: 'Associated property',\n          key: 'true',\n          display: 'true',\n          secondary: 'true',\n          useForSearch: 'true'\n        }\n      ];\n\n      userReferenceComponent = (\n        <AutoComplete\n          additionalProps={additionalProps}\n          label={label}\n          getPConnect={getPConnect}\n          datasource={OPERATORS_DP}\n          listType='datapage'\n          columns={columns}\n          testId={testId}\n          placeholder={placeholder}\n          readOnly={readOnly}\n          disabled={disabled}\n          required={required}\n          helperText={helperText}\n          validatemessage={validatemessage}\n          value={userId}\n          hideLabel={hideLabel}\n          onChange={onChange}\n        />\n      );\n    }\n    if (displayAs === DROPDOWN_LIST) {\n      userReferenceComponent = (\n        <Dropdown\n          additionalProps={additionalProps}\n          datasource={dropDownDataSource}\n          listType='associated'\n          getPConnect={getPConnect}\n          label={label}\n          value={userId}\n          testId={testId}\n          placeholder={placeholder}\n          readOnly={readOnly}\n          disabled={disabled}\n          required={required}\n          helperText={helperText}\n          validatemessage={validatemessage}\n          hideLabel={hideLabel}\n          onChange={onChange}\n        />\n      );\n    }\n  }\n\n  return userReferenceComponent;\n};\n\nUserReference.propTypes = {\n  getPConnect: PropTypes.func.isRequired,\n  displayAs: PropTypes.string,\n  label: PropTypes.string,\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.objectOf(PropTypes.any)]),\n  testId: PropTypes.string,\n  placeholder: PropTypes.string,\n  helperText: PropTypes.string,\n  disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),\n  readOnly: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),\n  required: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),\n  validatemessage: PropTypes.string,\n  showAsFormattedText: PropTypes.bool,\n  additionalProps: PropTypes.objectOf(PropTypes.any),\n  hideLabel: PropTypes.bool\n};\n\nUserReference.defaultProps = {\n  displayAs: null,\n  label: null,\n  value: null,\n  readOnly: false,\n  testId: null,\n  placeholder: null,\n  helperText: null,\n  disabled: false,\n  required: false,\n  validatemessage: null,\n  showAsFormattedText: false,\n  additionalProps: {},\n  variant: 'inline',\n  hideLabel: false\n};\n\n// as objects are there in props, shallow comparision fails & re-rendering of comp happens even with\n// same key value pairs in obj. hence using custom comparison function on when to re-render\nconst comparisonFn = (prevProps, nextProps) => {\n  return (\n    getUserId(prevProps.value) === getUserId(nextProps.value) &&\n    prevProps.validatemessage === nextProps.validatemessage &&\n    prevProps.required === nextProps.required &&\n    prevProps.disabled === nextProps.disabled &&\n    prevProps.readOnly === nextProps.readOnly\n  );\n};\n\nexport default memo(UserReference, comparisonFn);\n"]}

package/lib/components/forms/UserReference/UserReferenceUtils.d.ts

@@ -0,0 +1,3 @@
+export declare const getUserId: (user: any) => string;
+export declare const isUserNameAvailable: (user: any) => any;
+//# sourceMappingURL=UserReferenceUtils.d.ts.map

package/lib/components/forms/UserReference/UserReferenceUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserReferenceUtils.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/UserReference/UserReferenceUtils.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS,uBAQrB,CAAC;AAEF,eAAO,MAAM,mBAAmB,oBAE/B,CAAC"}

package/lib/components/forms/UserReference/UserReferenceUtils.js

@@ -0,0 +1,14 @@
+export const getUserId = (user) => {
+    let userId = '';
+    if (typeof user === 'object' && user !== null && user.userId) {
+        userId = user.userId;
+    }
+    else if (typeof user === 'string' && user) {
+        userId = user;
+    }
+    return userId;
+};
+export const isUserNameAvailable = (user) => {
+    return typeof user === 'object' && user !== null && user.userName;
+};
+//# sourceMappingURL=UserReferenceUtils.js.map

package/lib/components/forms/UserReference/UserReferenceUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserReferenceUtils.js","sourceRoot":"","sources":["../../../../src/components/forms/UserReference/UserReferenceUtils.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,IAAI,EAAE,EAAE;IAChC,IAAI,MAAM,GAAG,EAAE,CAAC;IAChB,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,IAAI,KAAK,IAAI,IAAI,IAAI,CAAC,MAAM,EAAE;QAC5D,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;KACtB;SAAM,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,IAAI,EAAE;QAC3C,MAAM,GAAG,IAAI,CAAC;KACf;IACD,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,IAAI,EAAE,EAAE;IAC1C,OAAO,OAAO,IAAI,KAAK,QAAQ,IAAI,IAAI,KAAK,IAAI,IAAI,IAAI,CAAC,QAAQ,CAAC;AACpE,CAAC,CAAC","sourcesContent":["export const getUserId = (user) => {\n  let userId = '';\n  if (typeof user === 'object' && user !== null && user.userId) {\n    userId = user.userId;\n  } else if (typeof user === 'string' && user) {\n    userId = user;\n  }\n  return userId;\n};\n\nexport const isUserNameAvailable = (user) => {\n  return typeof user === 'object' && user !== null && user.userName;\n};\n"]}

package/lib/components/forms/UserReference/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './UserReference';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/forms/UserReference/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/UserReference/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC"}

package/lib/components/forms/UserReference/index.js

@@ -0,0 +1,2 @@
+export { default } from './UserReference';
+//# sourceMappingURL=index.js.map

package/lib/components/forms/UserReference/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/forms/UserReference/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC","sourcesContent":["export { default } from './UserReference';\n"]}

package/lib/components/helpers/auth.d.ts

@@ -0,0 +1,16 @@
+export default PegaAuth;
+declare class PegaAuth {
+    constructor(ssKeyConfig: any);
+    ssKeyConfig: any;
+    bEncodeSI: boolean;
+    reloadConfig(): void;
+    config: {} | null | undefined;
+    login(): Promise<any>;
+    loginRedirect(): void;
+    getToken(authCode: any): Promise<any>;
+    refreshToken(refresh_token: any): Promise<any>;
+    revokeTokens(access_token: any, refresh_token?: null): Promise<void>;
+    getUserinfo(access_token: any): Promise<any>;
+    #private;
+}
+//# sourceMappingURL=auth.d.ts.map

package/lib/components/helpers/auth.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"auth.d.ts","sourceRoot":"","sources":["../../../src/components/helpers/auth.js"],"names":[],"mappings":";AAAA;IAEE,8BAIC;IAHG,iBAA8B;IAC9B,mBAAsB;IAI1B,qBAgBC;IADG,8BAAmC;IAgDvC,sBA2LC;IAGD,sBAOC;IAID,sCAoDC;IAGD,+CAqCC;IAED,qEA4CC;IAID,6CAwBC;;CA0CF"}

package/lib/components/helpers/auth.js

@@ -0,0 +1,437 @@
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _PegaAuth_instances, _PegaAuth_updateConfig, _PegaAuth_buildAuthorizeUrl, _PegaAuth_sha256Hash, _PegaAuth_encode64, _PegaAuth_base64UrlSafeEncode, _PegaAuth_getCodeChallenge;
+class PegaAuth {
+    constructor(ssKeyConfig) {
+        _PegaAuth_instances.add(this);
+        this.ssKeyConfig = ssKeyConfig;
+        this.bEncodeSI = false;
+        this.reloadConfig();
+    }
+    reloadConfig() {
+        const peConfig = window.sessionStorage.getItem(this.ssKeyConfig);
+        let obj = {};
+        if (peConfig) {
+            try {
+                obj = JSON.parse(peConfig);
+            }
+            catch (e) {
+                try {
+                    obj = JSON.parse(window.atob(peConfig));
+                }
+                catch (e2) {
+                    obj = {};
+                }
+            }
+        }
+        this.config = peConfig ? obj : null;
+    }
+    async login() {
+        const fnGetRedirectUriOrigin = () => {
+            const redirectUri = this.config.redirectUri;
+            const nRootOffset = redirectUri.indexOf("//");
+            const nFirstPathOffset = nRootOffset !== -1 ? redirectUri.indexOf("/", nRootOffset + 2) : -1;
+            return nFirstPathOffset !== -1 ? redirectUri.substring(0, nFirstPathOffset) : redirectUri;
+        };
+        const redirectOrigin = fnGetRedirectUriOrigin();
+        // eslint-disable-next-line no-restricted-globals
+        const state = window.btoa(location.origin);
+        return new Promise((resolve, reject) => {
+            __classPrivateFieldGet(this, _PegaAuth_instances, "m", _PegaAuth_buildAuthorizeUrl).call(this, state).then((url) => {
+                let myWindow = null; // popup or iframe
+                let elIframe = null;
+                let elCloseBtn = null;
+                const iframeTimeout = this.config.silentTimeout !== undefined ? this.config.silentTimeout : 5000;
+                let bWinIframe = iframeTimeout > 0 && ((!!this.config.userIdentifier && !!this.config.password) || this.config.iframeLoginUI || this.config.authService !== "pega");
+                let tmrAuthComplete = null;
+                let checkWindowClosed = null;
+                const myWinOnLoad = () => {
+                    try {
+                        if (bWinIframe) {
+                            elIframe.contentWindow.postMessage({ type: "PegaAuth" }, redirectOrigin);
+                            // eslint-disable-next-line no-console
+                            console.log("authjs(login): loaded a page in iFrame");
+                        }
+                        else {
+                            myWindow.postMessage({ type: "PegaAuth" }, redirectOrigin);
+                        }
+                    }
+                    catch (e) {
+                        // eslint-disable-next-line no-console
+                        console.log("authjs(login): Exception trying to postMessage on load");
+                    }
+                };
+                const fnOpenPopup = () => {
+                    myWindow = window.open(url, '_blank', 'width=700,height=500,left=200,top=100');
+                    if (!myWindow) {
+                        // Blocked by popup-blocker
+                        // eslint-disable-next-line prefer-promise-reject-errors
+                        return reject("blocked");
+                    }
+                    checkWindowClosed = setInterval(() => {
+                        if (myWindow.closed) {
+                            clearInterval(checkWindowClosed);
+                            // eslint-disable-next-line prefer-promise-reject-errors
+                            reject("closed");
+                        }
+                    }, 500);
+                    try {
+                        myWindow.addEventListener("load", myWinOnLoad, true);
+                    }
+                    catch (e) {
+                        // eslint-disable-next-line no-console
+                        console.log("authjs(login): Exception trying to add onload handler to opened window;");
+                    }
+                };
+                const fnCloseIframe = () => {
+                    elIframe.parentNode.removeChild(elIframe);
+                    elCloseBtn.parentNode.removeChild(elCloseBtn);
+                    // eslint-disable-next-line no-multi-assign
+                    elIframe = elCloseBtn = null;
+                    bWinIframe = false;
+                };
+                const fnCloseAndReject = () => {
+                    fnCloseIframe();
+                    // eslint-disable-next-line prefer-promise-reject-errors
+                    reject("closed");
+                };
+                // If there is a userIdentifier and password specified or an external SSO auth service,
+                //  we can try to use this silently in an iFrame first
+                if (bWinIframe) {
+                    const nFrameZLevel = 99999;
+                    elIframe = document.createElement('iframe');
+                    // eslint-disable-next-line prefer-template
+                    elIframe.id = 'pe' + this.config.clientId;
+                    const loginBoxWidth = 500;
+                    const loginBoxHeight = 700;
+                    const oStyle = elIframe.style;
+                    oStyle.position = 'absolute';
+                    oStyle.display = 'none';
+                    oStyle.zIndex = nFrameZLevel;
+                    oStyle.top = `${Math.round(Math.max(window.innerHeight - loginBoxHeight, 0) / 2)}px`;
+                    oStyle.left = `${Math.round(Math.max(window.innerWidth - loginBoxWidth, 0) / 2)}px`;
+                    oStyle.width = '500px';
+                    oStyle.height = '700px';
+                    // Add Iframe to top of document DOM to have it load
+                    document.body.insertBefore(elIframe, document.body.firstChild);
+                    // Add Iframe to DOM to have it load
+                    document.getElementsByTagName('body')[0].appendChild(elIframe);
+                    elIframe.addEventListener("load", myWinOnLoad, true);
+                    // Disallow iframe content attempts to navigate main window
+                    elIframe.setAttribute("sandbox", "allow-scripts allow-forms allow-same-origin");
+                    elIframe.setAttribute('src', url);
+                    const svgCloseBtn = `<?xml version="1.0" encoding="UTF-8"?>
+                  <svg width="34px" height="34px" viewBox="0 0 34 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                    <title>Dismiss - Black</title>
+                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                      <g transform="translate(1.000000, 1.000000)">
+                        <circle fill="#252C32" cx="16" cy="16" r="16"></circle>
+                        <g transform="translate(9.109375, 9.214844)" fill="#FFFFFF" fill-rule="nonzero">
+                          <path d="M12.7265625,0 L0,12.6210938 L1.0546875,13.5703125 L13.78125,1.0546875 L12.7265625,0 Z M13.7460938,12.5507812 L1.01953125,0 L0,1.01953125 L12.7617188,13.6054688 L13.7460938,12.5507812 Z"></path>
+                        </g>
+                      </g>
+                    </g>
+                  </svg>`;
+                    const bCloseWithinFrame = false;
+                    elCloseBtn = document.createElement('img');
+                    elCloseBtn.onclick = fnCloseAndReject;
+                    // eslint-disable-next-line prefer-template
+                    elCloseBtn.src = 'data:image/svg+xml;base64,' + window.btoa(svgCloseBtn);
+                    const oBtnStyle = elCloseBtn.style;
+                    oBtnStyle.cursor = 'pointer';
+                    // If svg doesn't set width and height might want to set oBtStyle width and height to something like '2em'
+                    oBtnStyle.position = 'absolute';
+                    oBtnStyle.display = 'none';
+                    oBtnStyle.zIndex = nFrameZLevel + 1;
+                    const nTopOffset = bCloseWithinFrame ? 5 : -10;
+                    const nRightOffset = bCloseWithinFrame ? -34 : -20;
+                    oBtnStyle.top = `${Math.round(Math.max(window.innerHeight - loginBoxHeight, 0) / 2) + nTopOffset}px`;
+                    oBtnStyle.left = `${Math.round(Math.max(window.innerWidth - loginBoxWidth, 0) / 2) + loginBoxWidth + nRightOffset}px`;
+                    document.body.insertBefore(elCloseBtn, document.body.firstChild);
+                    // If the password was wrong, then the login screen will be in the iframe
+                    // ..and with Pega without realization of US-372314 it may replace the top (main portal) window
+                    // For now set a timer and if the timer expires, remove the iFrame and use same url within
+                    // visible window
+                    tmrAuthComplete = setTimeout(() => {
+                        clearTimeout(tmrAuthComplete);
+                        // remove password from config
+                        if (this.config.password) {
+                            delete this.config.password;
+                            __classPrivateFieldGet(this, _PegaAuth_instances, "m", _PegaAuth_updateConfig).call(this);
+                        }
+                        if (this.config.iframeLoginUI) {
+                            elIframe.style.display = "block";
+                            elCloseBtn.style.display = "block";
+                        }
+                        else {
+                            fnCloseIframe();
+                            fnOpenPopup();
+                        }
+                    }, iframeTimeout);
+                }
+                else {
+                    fnOpenPopup();
+                }
+                let authMessageReceiver = null;
+                /* Retrieve token(s) and close login window */
+                const fnGetTokenAndFinish = (code) => {
+                    window.removeEventListener("message", authMessageReceiver, false);
+                    this.getToken(code).then(token => {
+                        if (bWinIframe) {
+                            clearTimeout(tmrAuthComplete);
+                            fnCloseIframe();
+                        }
+                        else {
+                            clearInterval(checkWindowClosed);
+                            myWindow.close();
+                        }
+                        resolve(token);
+                    })
+                        .catch(e => {
+                        reject(e);
+                    });
+                };
+                /* Handler to receive the auth code */
+                authMessageReceiver = (event) => {
+                    // Check origin to make sure it is the redirect origin
+                    if (event.origin !== redirectOrigin)
+                        return;
+                    if (!event.data || !event.data.type || event.data.type !== "PegaAuth")
+                        return;
+                    // eslint-disable-next-line no-console
+                    console.log("authjs(login): postMessage received with code");
+                    const code = event.data.code.toString();
+                    fnGetTokenAndFinish(code);
+                };
+                window.addEventListener("message", authMessageReceiver, false);
+                window.authCodeCallback = (code) => {
+                    // eslint-disable-next-line no-console
+                    console.log("authjs(login): authCodeCallback used with code");
+                    fnGetTokenAndFinish(code);
+                };
+            });
+        });
+    }
+    // Login redirect
+    loginRedirect() {
+        // eslint-disable-next-line no-restricted-globals
+        const state = btoa(location.origin);
+        __classPrivateFieldGet(this, _PegaAuth_instances, "m", _PegaAuth_buildAuthorizeUrl).call(this, state).then((url) => {
+            // eslint-disable-next-line no-restricted-globals
+            location.href = url;
+        });
+    }
+    // For PKCE token endpoint includes code_verifier
+    getToken(authCode) {
+        // Reload config to pick up the previously stored codeVerifier
+        this.reloadConfig();
+        const { clientId, clientSecret, redirectUri, tokenUri, codeVerifier } = this.config;
+        // eslint-disable-next-line no-restricted-globals
+        const queryString = location.search;
+        const urlParams = new URLSearchParams(queryString);
+        const code = authCode || urlParams.get("code");
+        const formData = new URLSearchParams();
+        formData.append("client_id", clientId);
+        if (clientSecret) {
+            formData.append("client_secret", clientSecret);
+        }
+        formData.append("grant_type", "authorization_code");
+        formData.append("code", code);
+        formData.append("redirect_uri", redirectUri);
+        formData.append("code_verifier", codeVerifier);
+        return fetch(tokenUri, {
+            method: "POST",
+            headers: new Headers({
+                "content-type": "application/x-www-form-urlencoded",
+            }),
+            body: formData.toString(),
+        })
+            .then((response) => response.json())
+            .then(token => {
+            // .expires_in contains the # of seconds before access token expires
+            // add property to keep track of current time when the token expires
+            token.eA = Date.now() + (token.expires_in * 1000);
+            if (this.config.codeVerifier) {
+                delete this.config.codeVerifier;
+            }
+            // If there is a session_index then move this to the peConfig structure (as used on authorize)
+            if (token.session_index) {
+                this.config.sessionIndex = token.session_index;
+            }
+            // If we got a token and have a session index, then reset the sessionIndexAttempts
+            if (this.config.sessionIndex) {
+                this.config.sessionIndexAttempts = 0;
+            }
+            __classPrivateFieldGet(this, _PegaAuth_instances, "m", _PegaAuth_updateConfig).call(this);
+            return token;
+        })
+            .catch(e => {
+            // eslint-disable-next-line no-console
+            console.log(e);
+        });
+    }
+    /* eslint-disable camelcase */
+    async refreshToken(refresh_token) {
+        const { clientId, clientSecret, tokenUri } = this.config;
+        const formData = new URLSearchParams();
+        formData.append("client_id", clientId);
+        if (clientSecret) {
+            formData.append("client_secret", clientSecret);
+        }
+        formData.append("grant_type", "refresh_token");
+        formData.append("refresh_token", refresh_token);
+        return fetch(tokenUri, {
+            method: "POST",
+            headers: new Headers({
+                "content-type": "application/x-www-form-urlencoded",
+            }),
+            body: formData.toString(),
+        })
+            .then((response) => {
+            if (!response.ok && response.status === 401) {
+                return null;
+            }
+            return response.json();
+        })
+            .then(token => {
+            if (token) {
+                // .expires_in contains the # of seconds before access token expires
+                // add property to keep track of current time when the token expires
+                token.eA = Date.now() + (token.expires_in * 1000);
+            }
+            return token;
+        })
+            .catch(e => {
+            // eslint-disable-next-line no-console
+            console.log(e);
+        });
+    }
+    async revokeTokens(access_token, refresh_token = null) {
+        if (!this.config || !this.config.revokeUri) {
+            // Must have a config structure and revokeUri to proceed
+            return;
+        }
+        const { clientId, clientSecret, revokeUri } = this.config;
+        const hdrs = { "content-type": "application/x-www-form-urlencoded" };
+        if (clientSecret) {
+            const creds = `${clientId}:${clientSecret}`;
+            hdrs.authorization = `Basic ${window.btoa(creds)}`;
+        }
+        const aTknProps = ["access_token"];
+        if (refresh_token) {
+            aTknProps.push("refresh_token");
+        }
+        aTknProps.forEach((prop) => {
+            const formData = new URLSearchParams();
+            if (!clientSecret) {
+                formData.append("client_id", clientId);
+            }
+            formData.append("token", prop === "access_token" ? access_token : refresh_token);
+            formData.append("token_type_hint", prop);
+            fetch(revokeUri, {
+                method: "POST",
+                headers: new Headers(hdrs),
+                body: formData.toString(),
+            })
+                .then((response) => {
+                if (!response.ok) {
+                    // eslint-disable-next-line no-console
+                    console.log(`Error revoking ${prop}:${response.status}`);
+                }
+            })
+                .catch(e => {
+                // eslint-disable-next-line no-console
+                console.log(e);
+            });
+        });
+        // Also clobber any sessionIndex
+        if (this.config.sessionIndex) {
+            delete this.config.sessionIndex;
+            __classPrivateFieldGet(this, _PegaAuth_instances, "m", _PegaAuth_updateConfig).call(this);
+        }
+    }
+    // For userinfo endpoint to return meaningful data, endpoint must include appAlias (if specified) and authorize must
+    //  specify profile and optionally email scope to get such info returned
+    async getUserinfo(access_token) {
+        if (!this.config || !this.config.userinfoUri) {
+            // Must have a config structure and userInfo to proceed
+            return {};
+        }
+        const hdrs = { 'authorization': `bearer ${access_token}`, 'content-type': 'application/json;charset=UTF-8' };
+        return fetch(this.config.userinfoUri, {
+            method: "GET",
+            headers: new Headers(hdrs)
+        })
+            .then(response => {
+            if (response.ok) {
+                return response.json();
+            }
+            else {
+                // eslint-disable-next-line no-console
+                console.log(`Error invoking userinfo: ${response.status}`);
+            }
+        })
+            .then(data => {
+            return data;
+        })
+            .catch(e => {
+            // eslint-disable-next-line no-console
+            console.log(e);
+        });
+    }
+}
+_PegaAuth_instances = new WeakSet(), _PegaAuth_updateConfig = function _PegaAuth_updateConfig() {
+    const sSI = JSON.stringify(this.config);
+    window.sessionStorage.setItem(this.ssKeyConfig, this.bEncodeSI ? window.btoa(sSI) : sSI);
+}, _PegaAuth_buildAuthorizeUrl = 
+// For PKCE the authorize includes a code_challenge & code_challenge_method as well
+async function _PegaAuth_buildAuthorizeUrl(state) {
+    const { clientId, redirectUri, authorizeUri, authService, sessionIndex, appAlias, useLocking, userIdentifier, password } = this.config;
+    // Generate random string of 64 chars for verifier.  RFC 7636 says from 43-128 chars
+    let buf = new Uint8Array(64);
+    window.crypto.getRandomValues(buf);
+    this.config.codeVerifier = __classPrivateFieldGet(this, _PegaAuth_instances, "m", _PegaAuth_base64UrlSafeEncode).call(this, buf);
+    // If sessionIndex exists then increment attempts count (we will stop sending session_index after two failures)
+    if (sessionIndex) {
+        this.config.sessionIndexAttempts += 1;
+    }
+    // Persist codeVerifier in session storage so it survives the redirects that are to follow
+    __classPrivateFieldGet(this, _PegaAuth_instances, "m", _PegaAuth_updateConfig).call(this);
+    if (!state) {
+        // Calc random state variable
+        buf = new Uint8Array(32);
+        window.crypto.getRandomValues(buf);
+        state = __classPrivateFieldGet(this, _PegaAuth_instances, "m", _PegaAuth_base64UrlSafeEncode).call(this, buf);
+    }
+    // Trim alias to include just the real alias piece
+    const addtlScope = appAlias ? `+app.alias.${appAlias.replace(/^app\//, '')}` : "";
+    // Add explicit creds if specified to try to avoid login popup
+    const moreAuthArgs = (authService ? `&authentication_service=${encodeURIComponent(authService)}` : "") +
+        (sessionIndex && this.config.sessionIndexAttempts < 3 ? `&session_index=${sessionIndex}` : "") +
+        (useLocking ? `&enable_psyncId=true` : '') +
+        (userIdentifier ? `&UserIdentifier=${encodeURIComponent(userIdentifier)}` : '') +
+        (userIdentifier && password ? `&Password=${encodeURIComponent(window.atob(password))}` : '');
+    return __classPrivateFieldGet(this, _PegaAuth_instances, "m", _PegaAuth_getCodeChallenge).call(this, this.config.codeVerifier).then(cc => {
+        // Now includes new enable_psyncId=true and session_index params
+        return `${authorizeUri}?client_id=${clientId}&response_type=code&redirect_uri=${redirectUri}&scope=openid+email+profile${addtlScope}&state=${state}&code_challenge=${cc}&code_challenge_method=S256${moreAuthArgs}`;
+    });
+}, _PegaAuth_sha256Hash = function _PegaAuth_sha256Hash(str) {
+    return window.crypto.subtle.digest("SHA-256", new TextEncoder().encode(str));
+}, _PegaAuth_encode64 = function _PegaAuth_encode64(buff) {
+    return window.btoa(new Uint8Array(buff).reduce((s, b) => s + String.fromCharCode(b), ''));
+}, _PegaAuth_base64UrlSafeEncode = function _PegaAuth_base64UrlSafeEncode(buf) {
+    const s = __classPrivateFieldGet(this, _PegaAuth_instances, "m", _PegaAuth_encode64).call(this, buf).replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, "");
+    return s;
+}, _PegaAuth_getCodeChallenge = function _PegaAuth_getCodeChallenge(code_verifier) {
+    return __classPrivateFieldGet(this, _PegaAuth_instances, "m", _PegaAuth_sha256Hash).call(this, code_verifier).then((hashed) => {
+        return __classPrivateFieldGet(this, _PegaAuth_instances, "m", _PegaAuth_base64UrlSafeEncode).call(this, hashed);
+    }).catch((error) => {
+        // eslint-disable-next-line no-console
+        console.log(error);
+    }).finally(() => { return null; });
+};
+export default PegaAuth;
+//# sourceMappingURL=auth.js.map