@forgerock/javascript-sdk-ui - npm Package Compare versions

Comparing version 2.1.1 to 2.2.0

CHANGELOG.md

 # Changelog
 
+## [2.2.0] - 2020-12-18
+
+### Added
+
+- Added email suspended node support in sample apps
+- Added support for `TextOutputCallback` `messageType 4` behind a configuration option that is disabled by default
+- Support for TypeScript 4.0
+
+### Fixed
+
+- Fixed basic callback handler to better support unique page node callback composition: polling wait and message node within page node
+
 ## [2.1.1] - 2020-09-24
@@ -4,0 +16,0 @@

lib-esm/basic/handlers/basic.d.ts

 import { FRStep } from '@forgerock/javascript-sdk';
-import { FRUIStepHandler } from '../../interfaces';
+import { FRUIStepHandler, FRRendererOptions } from '../../interfaces';
 import Deferred from '../../util/deferred';
@@ -13,2 +13,3 @@ import { CallbackRendererFactory } from '../interfaces';
     private rendererFactory?;
+    private rendererOptions?;
     private submit?;
@@ -29,3 +30,3 @@ private container;
      */
-    constructor(target: HTMLElement, step: FRStep, rendererFactory?: CallbackRendererFactory | undefined);
+    constructor(target: HTMLElement, step: FRStep, rendererFactory?: CallbackRendererFactory | undefined, rendererOptions?: FRRendererOptions | undefined);
     /**
@@ -32,0 +33,0 @@ * Renders all callbacks in the step and returns a Promise that is resolved when the step is

lib-esm/basic/handlers/basic.js

@@ -37,3 +37,3 @@ /*
      */
-    function BasicStepHandler(target, step, rendererFactory) {
+    function BasicStepHandler(target, step, rendererFactory, rendererOptions) {
         var _this = this;
@@ -43,2 +43,3 @@ this.target = target;
         this.rendererFactory = rendererFactory;
+        this.rendererOptions = rendererOptions;
         this.callbacksThatDontRequireSubmitButton = [
@@ -105,2 +106,3 @@ CallbackType.ConfirmationCallback,
         this.createRenderer = function (cb, index) {
+            var _a;
             if (_this.rendererFactory) {
@@ -135,3 +137,3 @@ var renderer = _this.rendererFactory(cb, index, _this.step, _this.onChange);
                 case CallbackType.TextOutputCallback:
-                    return new TextOutputCallbackRenderer(cb, index);
+                    return new TextOutputCallbackRenderer(cb, index, ((_a = _this.rendererOptions) === null || _a === void 0 ? void 0 : _a.dangerouslySetScriptText) || false);
                 case CallbackType.KbaCreateCallback:
@@ -148,18 +150,58 @@ var kbaCreateCallback_1 = cb;
         };
+        // TODO: use `renderer` to identify what triggered the change
         this.onChange = function () {
+            var callbacks = _this.step.callbacks;
+            // If any renderer has an invalid value (input value length of 0), this will be false
             var isValid = _this.isValid();
+            // Enables or disables button according to validity of renderer values
             _this.setSubmitButton(isValid);
+            var pollingWaitCb = callbacks.find(function (x) { return x.getType() === CallbackType.PollingWaitCallback; });
             /**
-             * Automatically resolve if there's no submit button and a callback change occurs.
-             * This is expected for callbacks like polling wait.
+             * A confirmation callback with a single value has a specific meaning
+             * that we need to handle.
+             * To allow the use of `getOptions`, the use of any is needed
              */
-            if (!_this.submit && isValid) {
+            // eslint-disable-next-line
+            var singleValueConfirmation = callbacks.find(function (x) {
+                return x.getOptions && x.getOptions().length === 1;
+            });
+            /**
+             * If Polling Wait is "exitable", it will come with a confirmation callback
+             * that has only one value. We don't want to block the autosubmission of
+             * the Polling Wait if it is exitable.
+             *
+             * Otherwise, automatically resolve/submit if there's no submit button,
+             * and all other renders are valid, and a callback change occurs.
+             */
+            if (callbacks.length === 2 && pollingWaitCb && singleValueConfirmation) {
                 _this.resolve();
             }
+            else if (!_this.submit && isValid) {
+                _this.resolve();
+            }
         };
         this.requiresSubmitButton = function () {
-            var intersection = _this.step.callbacks.filter(function (x) {
+            var cbsNotNeedingSubmitBtn = _this.step.callbacks.filter(function (x) {
                 return _this.callbacksThatDontRequireSubmitButton.includes(x.getType());
             });
-            return intersection.length === 0;
+            var confirmationCbs = cbsNotNeedingSubmitBtn.filter(function (x) { return x.getType() === CallbackType.ConfirmationCallback; });
+            var hasMultipleRenderers = _this.renderers.length > 1;
+            if (cbsNotNeedingSubmitBtn.length && hasMultipleRenderers) {
+                /**
+                 * If ConfirmationCallback is present among others, return false.
+                 * If any other *callback not requiring a submit button* is present,
+                 * but if it's one of other callbacks, return true, which results
+                 * in rendering a submit button.
+                 */
+                return !confirmationCbs.length;
+            }
+            else {
+                /**
+                 * If there's a single callback not needing a submit button,
+                 * return false. If there are no callbacks needing a submit
+                 * button, return true, which results in the rendering of a
+                 * submit button.
+                 */
+                return !cbsNotNeedingSubmitBtn.length;
+            }
         };
@@ -175,3 +217,11 @@ this.createSubmitButton = function () {
         this.isValid = function () {
+            /**
+             * 1. Detect if the renderer itself, not this class, has an `isValid` method
+             * 2. If it doesn't have the above method, `isInvalid` results in false
+             * 3. If it does have an `isValid` method, run it
+             * 4. If the value is valid, set to true then flip it with `!` to false, so `isInvalid` is false
+             * 5. The one way `isInvalid` is true is if the renderer has isValid and the value's length is 0
+             */
             var isInvalid = function (x) { return x.isValid !== undefined && !x.isValid(); };
+            // Iterate through the renderers, if there is one invalid value return true, then flip to false
             return !_this.renderers.some(isInvalid);
@@ -178,0 +228,0 @@ };

lib-esm/basic/index.js

@@ -24,3 +24,3 @@ /*
  */
-var basicStepHandlerFactory = function (target, step, rendererFactory) {
+var basicStepHandlerFactory = function (target, step, rendererFactory, rendererOptions) {
     if (!step) {
@@ -51,3 +51,3 @@ throw new Error('Cannot create handler; no step specified');
     }
-    return new BasicStepHandler(target, step, rendererFactory);
+    return new BasicStepHandler(target, step, rendererFactory, rendererOptions);
 };
@@ -54,0 +54,0 @@ export default basicStepHandlerFactory;

lib-esm/basic/renderers/confirmation.d.ts

@@ -11,2 +11,3 @@ import { ConfirmationCallback } from '@forgerock/javascript-sdk';
     private buttons;
+    private wasClicked;
     /**
@@ -27,2 +28,6 @@ * @param callback The callback to render
     /**
+     * Returns true if the dropdown has a value selected.
+     */
+    isValid: () => boolean;
+    /**
      * Creates all required DOM elements and returns the containing element.
@@ -29,0 +34,0 @@ */

lib-esm/basic/renderers/confirmation.js

@@ -25,2 +25,3 @@ /*
         this.onChange = onChange;
+        this.wasClicked = false;
         /**
@@ -38,2 +39,6 @@ * Removes event listeners.
         /**
+         * Returns true if the dropdown has a value selected.
+         */
+        this.isValid = function () { return _this.wasClicked; };
+        /**
          * Creates all required DOM elements and returns the containing element.
@@ -63,2 +68,3 @@ */
         this.onInput = function (index) {
+            _this.wasClicked = true;
             _this.callback.setInputValue(index);
@@ -65,0 +71,0 @@ _this.onChange(_this);

lib-esm/basic/renderers/polling-wait.d.ts

@@ -11,2 +11,3 @@ import { PollingWaitCallback } from '@forgerock/javascript-sdk';
     private onChange;
+    private timeoutFinished;
     /**
@@ -19,2 +20,6 @@ * @param callback The callback to render
     /**
+     * Returns true if the timeout has completed.
+     */
+    isValid: () => boolean;
+    /**
      * Creates all required DOM elements and returns the containing element.
@@ -21,0 +26,0 @@ */

lib-esm/basic/renderers/polling-wait.js

@@ -26,3 +26,8 @@ /*
         this.onChange = onChange;
+        this.timeoutFinished = false;
         /**
+         * Returns true if the timeout has completed.
+         */
+        this.isValid = function () { return _this.timeoutFinished; };
+        /**
          * Creates all required DOM elements and returns the containing element.
@@ -40,3 +45,6 @@ */
             var waitTime = _this.callback.getWaitTime();
-            window.setTimeout(function () { return _this.onChange(_this); }, waitTime);
+            window.setTimeout(function () {
+                _this.timeoutFinished = true;
+                _this.onChange(_this);
+            }, waitTime);
         };
@@ -43,0 +51,0 @@ }

lib-esm/basic/renderers/text.d.ts

@@ -9,2 +9,3 @@ import { TextOutputCallback } from '@forgerock/javascript-sdk';
     private index;
+    private dangerouslySetScriptText;
     /**
@@ -15,3 +16,3 @@ * @param callback The callback to render
      */
-    constructor(callback: TextOutputCallback, index: number);
+    constructor(callback: TextOutputCallback, index: number, dangerouslySetScriptText: boolean);
     /**
@@ -18,0 +19,0 @@ * Creates all required DOM elements and returns the containing element.

lib-esm/basic/renderers/text.js

@@ -21,6 +21,7 @@ /*
      */
-    function TextOutputCallbackRenderer(callback, index) {
+    function TextOutputCallbackRenderer(callback, index, dangerouslySetScriptText) {
         var _this = this;
         this.callback = callback;
         this.index = index;
+        this.dangerouslySetScriptText = dangerouslySetScriptText;
         /**
@@ -32,5 +33,16 @@ * Creates all required DOM elements and returns the containing element.
             // Add the message
-            var p = el('p');
-            p.innerHTML = _this.callback.getMessage();
-            formGroup.appendChild(p);
+            if (_this.dangerouslySetScriptText && _this.callback.getMessageType() === '4') {
+                var script = document.createElement('script');
+                script.text = _this.callback.getMessage();
+                formGroup.appendChild(script);
+            }
+            else if (_this.callback.getMessageType() === '4') {
+                console.warn('TextOutputCallback messageType 4 is not supported by default. ' +
+                    'Enable this in the rendererOptions if you want to support this.');
+            }
+            else {
+                var p = el('p');
+                p.innerHTML = _this.callback.getMessage();
+                formGroup.appendChild(p);
+            }
             return formGroup;
@@ -37,0 +49,0 @@ };

lib-esm/fr-ui.js

@@ -131,14 +131,15 @@ /*
     FRUI.prototype.nextStep = function (previousStep, options) {
+        var _a;
         return __awaiter(this, void 0, void 0, function () {
-            var thisStep, _a, _b, error_1, failure;
-            return __generator(this, function (_c) {
-                switch (_c.label) {
+            var thisStep, _b, _c, rendererOptions, error_1, failure;
+            return __generator(this, function (_d) {
+                switch (_d.label) {
                     case 0:
-                        _c.trys.push([0, 11, , 12]);
+                        _d.trys.push([0, 11, , 12]);
                         return [4 /*yield*/, FRAuth.next(previousStep, options)];
                     case 1:
-                        thisStep = _c.sent();
+                        thisStep = _d.sent();
                         this.dispatchEvent({ step: thisStep, type: FREventType.StepChange });
-                        _a = thisStep.type;
-                        switch (_a) {
+                        _b = thisStep.type;
+                        switch (_b) {
                             case StepType.LoginSuccess: return [3 /*break*/, 2];
@@ -153,6 +154,6 @@ case StepType.LoginFailure: return [3 /*break*/, 3];
                         if (!(previousStep && this.firstStepTimedOut(thisStep))) return [3 /*break*/, 5];
-                        _b = previousStep.payload;
+                        _c = previousStep.payload;
                         return [4 /*yield*/, this.getNewFirstAuthId()];
                     case 4:
-                        _b.authId = _c.sent();
+                        _c.authId = _d.sent();
                         return [2 /*return*/, this.nextStep(previousStep)];
@@ -163,3 +164,3 @@ case 5:
                     case 6:
-                        previousStep = _c.sent();
+                        previousStep = _d.sent();
                         return [2 /*return*/, this.nextStep(previousStep)];
@@ -177,3 +178,4 @@ case 7:
                         }
-                        this.handler = this.options.handlerFactory(this.el, thisStep);
+                        rendererOptions = (_a = this.options) === null || _a === void 0 ? void 0 : _a.rendererOptions;
+                        this.handler = this.options.handlerFactory(this.el, thisStep, undefined, rendererOptions);
                         if (!this.handler) {
@@ -184,3 +186,3 @@ throw new Error('Handler factory failed to produce a handler');
                     case 9:
-                        thisStep = _c.sent();
+                        thisStep = _d.sent();
                         // Keep going to the next step
@@ -190,3 +192,3 @@ return [2 /*return*/, this.nextStep(thisStep)];
                     case 11:
-                        error_1 = _c.sent();
+                        error_1 = _d.sent();
                         this.dispatchEvent({ step: previousStep, type: FREventType.StepError, error: error_1 });
@@ -193,0 +195,0 @@ failure = new FRLoginFailure({

lib-esm/interfaces.d.ts

 import { FRLoginFailure, FRLoginSuccess, FRStep } from '@forgerock/javascript-sdk';
 import { FREventType } from './enums';
+import { CallbackRendererFactory } from './basic/interfaces';
 /**
@@ -28,3 +29,3 @@ * Represents the final step type of authentication, which could be success or failure.
 interface FRUIStepHandlerFactory {
-    (el: HTMLElement, step: FRStep): FRUIStepHandler | undefined;
+    (el: HTMLElement, step: FRStep, rendererFactory?: CallbackRendererFactory, rendererOptions?: FRRendererOptions): FRUIStepHandler | undefined;
 }
@@ -37,2 +38,3 @@ /**
     targetId?: string;
+    rendererOptions?: FRRendererOptions;
 }
@@ -46,2 +48,14 @@ /**
 /**
+ * Allows for configuring the behavior of the renderers
+ */
+interface FRRendererOptions {
+    /**
+     * Allows the SDK to handle TextOutputCallback messageType 4.
+     * This is considered an advanced callback that can have dangerous
+     * implications if not used carefully and correctly.
+     * DO NOT ENABLE THIS if you are not sure.
+     */
+    dangerouslySetScriptText?: boolean;
+}
+/**
  * Represents a "step change" event dispatched by `FRUI`.
@@ -52,2 +66,2 @@ */
 }
-export { FRAnyStep, FREndStep, FREvent, FRUIOptions, FRUIStepHandler, FRUIStepHandlerFactory, StepChangeEvent, };
+export { FRAnyStep, FREndStep, FREvent, FRRendererOptions, FRUIOptions, FRUIStepHandler, FRUIStepHandlerFactory, StepChangeEvent, };

lib/basic/handlers/basic.d.ts

 import { FRStep } from '@forgerock/javascript-sdk';
-import { FRUIStepHandler } from '../../interfaces';
+import { FRUIStepHandler, FRRendererOptions } from '../../interfaces';
 import Deferred from '../../util/deferred';
@@ -13,2 +13,3 @@ import { CallbackRendererFactory } from '../interfaces';
     private rendererFactory?;
+    private rendererOptions?;
     private submit?;
@@ -29,3 +30,3 @@ private container;
      */
-    constructor(target: HTMLElement, step: FRStep, rendererFactory?: CallbackRendererFactory | undefined);
+    constructor(target: HTMLElement, step: FRStep, rendererFactory?: CallbackRendererFactory | undefined, rendererOptions?: FRRendererOptions | undefined);
     /**
@@ -32,0 +33,0 @@ * Renders all callbacks in the step and returns a Promise that is resolved when the step is

lib/basic/handlers/basic.js

@@ -42,3 +42,3 @@ "use strict";
      */
-    function BasicStepHandler(target, step, rendererFactory) {
+    function BasicStepHandler(target, step, rendererFactory, rendererOptions) {
         var _this = this;
@@ -48,2 +48,3 @@ this.target = target;
         this.rendererFactory = rendererFactory;
+        this.rendererOptions = rendererOptions;
         this.callbacksThatDontRequireSubmitButton = [
@@ -110,2 +111,3 @@ javascript_sdk_1.CallbackType.ConfirmationCallback,
         this.createRenderer = function (cb, index) {
+            var _a;
             if (_this.rendererFactory) {
@@ -140,3 +142,3 @@ var renderer = _this.rendererFactory(cb, index, _this.step, _this.onChange);
                 case javascript_sdk_1.CallbackType.TextOutputCallback:
-                    return new text_1.default(cb, index);
+                    return new text_1.default(cb, index, ((_a = _this.rendererOptions) === null || _a === void 0 ? void 0 : _a.dangerouslySetScriptText) || false);
                 case javascript_sdk_1.CallbackType.KbaCreateCallback:
@@ -153,18 +155,58 @@ var kbaCreateCallback_1 = cb;
         };
+        // TODO: use `renderer` to identify what triggered the change
         this.onChange = function () {
+            var callbacks = _this.step.callbacks;
+            // If any renderer has an invalid value (input value length of 0), this will be false
             var isValid = _this.isValid();
+            // Enables or disables button according to validity of renderer values
             _this.setSubmitButton(isValid);
+            var pollingWaitCb = callbacks.find(function (x) { return x.getType() === javascript_sdk_1.CallbackType.PollingWaitCallback; });
             /**
-             * Automatically resolve if there's no submit button and a callback change occurs.
-             * This is expected for callbacks like polling wait.
+             * A confirmation callback with a single value has a specific meaning
+             * that we need to handle.
+             * To allow the use of `getOptions`, the use of any is needed
              */
-            if (!_this.submit && isValid) {
+            // eslint-disable-next-line
+            var singleValueConfirmation = callbacks.find(function (x) {
+                return x.getOptions && x.getOptions().length === 1;
+            });
+            /**
+             * If Polling Wait is "exitable", it will come with a confirmation callback
+             * that has only one value. We don't want to block the autosubmission of
+             * the Polling Wait if it is exitable.
+             *
+             * Otherwise, automatically resolve/submit if there's no submit button,
+             * and all other renders are valid, and a callback change occurs.
+             */
+            if (callbacks.length === 2 && pollingWaitCb && singleValueConfirmation) {
                 _this.resolve();
             }
+            else if (!_this.submit && isValid) {
+                _this.resolve();
+            }
         };
         this.requiresSubmitButton = function () {
-            var intersection = _this.step.callbacks.filter(function (x) {
+            var cbsNotNeedingSubmitBtn = _this.step.callbacks.filter(function (x) {
                 return _this.callbacksThatDontRequireSubmitButton.includes(x.getType());
             });
-            return intersection.length === 0;
+            var confirmationCbs = cbsNotNeedingSubmitBtn.filter(function (x) { return x.getType() === javascript_sdk_1.CallbackType.ConfirmationCallback; });
+            var hasMultipleRenderers = _this.renderers.length > 1;
+            if (cbsNotNeedingSubmitBtn.length && hasMultipleRenderers) {
+                /**
+                 * If ConfirmationCallback is present among others, return false.
+                 * If any other *callback not requiring a submit button* is present,
+                 * but if it's one of other callbacks, return true, which results
+                 * in rendering a submit button.
+                 */
+                return !confirmationCbs.length;
+            }
+            else {
+                /**
+                 * If there's a single callback not needing a submit button,
+                 * return false. If there are no callbacks needing a submit
+                 * button, return true, which results in the rendering of a
+                 * submit button.
+                 */
+                return !cbsNotNeedingSubmitBtn.length;
+            }
         };
@@ -180,3 +222,11 @@ this.createSubmitButton = function () {
         this.isValid = function () {
+            /**
+             * 1. Detect if the renderer itself, not this class, has an `isValid` method
+             * 2. If it doesn't have the above method, `isInvalid` results in false
+             * 3. If it does have an `isValid` method, run it
+             * 4. If the value is valid, set to true then flip it with `!` to false, so `isInvalid` is false
+             * 5. The one way `isInvalid` is true is if the renderer has isValid and the value's length is 0
+             */
             var isInvalid = function (x) { return x.isValid !== undefined && !x.isValid(); };
+            // Iterate through the renderers, if there is one invalid value return true, then flip to false
             return !_this.renderers.some(isInvalid);
@@ -183,0 +233,0 @@ };

lib/basic/index.js

@@ -31,3 +31,3 @@ "use strict";
  */
-var basicStepHandlerFactory = function (target, step, rendererFactory) {
+var basicStepHandlerFactory = function (target, step, rendererFactory, rendererOptions) {
     if (!step) {
@@ -58,5 +58,5 @@ throw new Error('Cannot create handler; no step specified');
     }
-    return new basic_1.default(target, step, rendererFactory);
+    return new basic_1.default(target, step, rendererFactory, rendererOptions);
 };
 exports.default = basicStepHandlerFactory;
 //# sourceMappingURL=index.js.map

lib/basic/renderers/confirmation.d.ts

@@ -11,2 +11,3 @@ import { ConfirmationCallback } from '@forgerock/javascript-sdk';
     private buttons;
+    private wasClicked;
     /**
@@ -27,2 +28,6 @@ * @param callback The callback to render
     /**
+     * Returns true if the dropdown has a value selected.
+     */
+    isValid: () => boolean;
+    /**
      * Creates all required DOM elements and returns the containing element.
@@ -29,0 +34,0 @@ */

lib/basic/renderers/confirmation.js

@@ -27,2 +27,3 @@ "use strict";
         this.onChange = onChange;
+        this.wasClicked = false;
         /**
@@ -40,2 +41,6 @@ * Removes event listeners.
         /**
+         * Returns true if the dropdown has a value selected.
+         */
+        this.isValid = function () { return _this.wasClicked; };
+        /**
          * Creates all required DOM elements and returns the containing element.
@@ -65,2 +70,3 @@ */
         this.onInput = function (index) {
+            _this.wasClicked = true;
             _this.callback.setInputValue(index);
@@ -67,0 +73,0 @@ _this.onChange(_this);

lib/basic/renderers/polling-wait.d.ts

@@ -11,2 +11,3 @@ import { PollingWaitCallback } from '@forgerock/javascript-sdk';
     private onChange;
+    private timeoutFinished;
     /**
@@ -19,2 +20,6 @@ * @param callback The callback to render
     /**
+     * Returns true if the timeout has completed.
+     */
+    isValid: () => boolean;
+    /**
      * Creates all required DOM elements and returns the containing element.
@@ -21,0 +26,0 @@ */

lib/basic/renderers/polling-wait.js

@@ -28,3 +28,8 @@ "use strict";
         this.onChange = onChange;
+        this.timeoutFinished = false;
         /**
+         * Returns true if the timeout has completed.
+         */
+        this.isValid = function () { return _this.timeoutFinished; };
+        /**
          * Creates all required DOM elements and returns the containing element.
@@ -42,3 +47,6 @@ */
             var waitTime = _this.callback.getWaitTime();
-            window.setTimeout(function () { return _this.onChange(_this); }, waitTime);
+            window.setTimeout(function () {
+                _this.timeoutFinished = true;
+                _this.onChange(_this);
+            }, waitTime);
         };
@@ -45,0 +53,0 @@ }

lib/basic/renderers/text.d.ts

@@ -9,2 +9,3 @@ import { TextOutputCallback } from '@forgerock/javascript-sdk';
     private index;
+    private dangerouslySetScriptText;
     /**
@@ -15,3 +16,3 @@ * @param callback The callback to render
      */
-    constructor(callback: TextOutputCallback, index: number);
+    constructor(callback: TextOutputCallback, index: number, dangerouslySetScriptText: boolean);
     /**
@@ -18,0 +19,0 @@ * Creates all required DOM elements and returns the containing element.

lib/basic/renderers/text.js

@@ -23,6 +23,7 @@ "use strict";
      */
-    function TextOutputCallbackRenderer(callback, index) {
+    function TextOutputCallbackRenderer(callback, index, dangerouslySetScriptText) {
         var _this = this;
         this.callback = callback;
         this.index = index;
+        this.dangerouslySetScriptText = dangerouslySetScriptText;
         /**
@@ -34,5 +35,16 @@ * Creates all required DOM elements and returns the containing element.
             // Add the message
-            var p = dom_1.el('p');
-            p.innerHTML = _this.callback.getMessage();
-            formGroup.appendChild(p);
+            if (_this.dangerouslySetScriptText && _this.callback.getMessageType() === '4') {
+                var script = document.createElement('script');
+                script.text = _this.callback.getMessage();
+                formGroup.appendChild(script);
+            }
+            else if (_this.callback.getMessageType() === '4') {
+                console.warn('TextOutputCallback messageType 4 is not supported by default. ' +
+                    'Enable this in the rendererOptions if you want to support this.');
+            }
+            else {
+                var p = dom_1.el('p');
+                p.innerHTML = _this.callback.getMessage();
+                formGroup.appendChild(p);
+            }
             return formGroup;
@@ -39,0 +51,0 @@ };

lib/fr-ui.js

@@ -136,14 +136,15 @@ "use strict";
     FRUI.prototype.nextStep = function (previousStep, options) {
+        var _a;
         return __awaiter(this, void 0, void 0, function () {
-            var thisStep, _a, _b, error_1, failure;
-            return __generator(this, function (_c) {
-                switch (_c.label) {
+            var thisStep, _b, _c, rendererOptions, error_1, failure;
+            return __generator(this, function (_d) {
+                switch (_d.label) {
                     case 0:
-                        _c.trys.push([0, 11, , 12]);
+                        _d.trys.push([0, 11, , 12]);
                         return [4 /*yield*/, javascript_sdk_1.FRAuth.next(previousStep, options)];
                     case 1:
-                        thisStep = _c.sent();
+                        thisStep = _d.sent();
                         this.dispatchEvent({ step: thisStep, type: enums_1.FREventType.StepChange });
-                        _a = thisStep.type;
-                        switch (_a) {
+                        _b = thisStep.type;
+                        switch (_b) {
                             case javascript_sdk_1.StepType.LoginSuccess: return [3 /*break*/, 2];
@@ -158,6 +159,6 @@ case javascript_sdk_1.StepType.LoginFailure: return [3 /*break*/, 3];
                         if (!(previousStep && this.firstStepTimedOut(thisStep))) return [3 /*break*/, 5];
-                        _b = previousStep.payload;
+                        _c = previousStep.payload;
                         return [4 /*yield*/, this.getNewFirstAuthId()];
                     case 4:
-                        _b.authId = _c.sent();
+                        _c.authId = _d.sent();
                         return [2 /*return*/, this.nextStep(previousStep)];
@@ -168,3 +169,3 @@ case 5:
                     case 6:
-                        previousStep = _c.sent();
+                        previousStep = _d.sent();
                         return [2 /*return*/, this.nextStep(previousStep)];
@@ -182,3 +183,4 @@ case 7:
                         }
-                        this.handler = this.options.handlerFactory(this.el, thisStep);
+                        rendererOptions = (_a = this.options) === null || _a === void 0 ? void 0 : _a.rendererOptions;
+                        this.handler = this.options.handlerFactory(this.el, thisStep, undefined, rendererOptions);
                         if (!this.handler) {
@@ -189,3 +191,3 @@ throw new Error('Handler factory failed to produce a handler');
                     case 9:
-                        thisStep = _c.sent();
+                        thisStep = _d.sent();
                         // Keep going to the next step
@@ -195,3 +197,3 @@ return [2 /*return*/, this.nextStep(thisStep)];
                     case 11:
-                        error_1 = _c.sent();
+                        error_1 = _d.sent();
                         this.dispatchEvent({ step: previousStep, type: enums_1.FREventType.StepError, error: error_1 });
@@ -198,0 +200,0 @@ failure = new javascript_sdk_1.FRLoginFailure({

lib/index.js

@@ -34,3 +34,4 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.WebAuthnStepType = exports.WebAuthnOutcome = exports.ValidatedCreateUsernameCallback = exports.ValidatedCreatePasswordCallback = exports.UserManager = exports.TokenStorage = exports.TokenManager = exports.TextOutputCallback = exports.TermsAndConditionsCallbackRenderer = exports.TermsAndConditionsCallback = exports.SuspendedTextOutputCallback = exports.StepType = exports.SessionManager = exports.ResponseType = exports.ReCaptchaCallbackRenderer = exports.ReCaptchaCallback = exports.PollingWaitCallbackRenderer = exports.PollingWaitCallback = exports.PolicyKey = exports.PKCE = exports.PasswordCallbackRenderer = exports.PasswordCallback = exports.OAuth2Client = exports.nonce = exports.NameCallback = exports.MetadataCallback = exports.LocalStorage = exports.KbaCreateCallbackRenderer = exports.KbaCreateCallback = exports.HttpClient = exports.HiddenValueCallback = exports.GenericCallbackRenderer = exports.FRWebAuthn = exports.FRUser = exports.FRUI = exports.FRStepHandlerBase = exports.FRStep = exports.FRRecoveryCodes = exports.FRPolicy = exports.FRLoginSuccess = exports.FRLoginFailure = exports.FRDevice = exports.FRCallback = exports.FRAuth = exports.ErrorCode = exports.Dispatcher = exports.Deferred = exports.DeviceProfileCallback = exports.ConfirmationCallbackRenderer = exports.ConfirmationCallback = exports.Config = exports.ChoiceCallbackRenderer = exports.ChoiceCallback = exports.CallbackType = exports.BooleanAttributeCallbackRenderer = exports.BasicStepHandler = exports.Auth = exports.AttributeInputCallback = exports.expressStepHandlerFactory = exports.defaultMessageCreator = exports.basicStepHandlerFactory = void 0;
+exports.StepType = exports.SessionManager = exports.ResponseType = exports.ReCaptchaCallbackRenderer = exports.ReCaptchaCallback = exports.PollingWaitCallbackRenderer = exports.PollingWaitCallback = exports.PolicyKey = exports.PKCE = exports.PasswordCallbackRenderer = exports.PasswordCallback = exports.OAuth2Client = exports.nonce = exports.NameCallback = exports.MetadataCallback = exports.LocalStorage = exports.KbaCreateCallbackRenderer = exports.KbaCreateCallback = exports.HttpClient = exports.HiddenValueCallback = exports.GenericCallbackRenderer = exports.FRWebAuthn = exports.FRUser = exports.FRUI = exports.FRStepHandlerBase = exports.FRStep = exports.FRRecoveryCodes = exports.FRPolicy = exports.FRLoginSuccess = exports.FRLoginFailure = exports.FRDevice = exports.FRCallback = exports.FRAuth = exports.ErrorCode = exports.Dispatcher = exports.Deferred = exports.DeviceProfileCallback = exports.ConfirmationCallbackRenderer = exports.ConfirmationCallback = exports.Config = exports.ChoiceCallbackRenderer = exports.ChoiceCallback = exports.CallbackType = exports.BooleanAttributeCallbackRenderer = exports.BasicStepHandler = exports.Auth = exports.AttributeInputCallback = exports.expressStepHandlerFactory = exports.defaultMessageCreator = exports.basicStepHandlerFactory = void 0;
+exports.WebAuthnStepType = exports.WebAuthnOutcome = exports.ValidatedCreateUsernameCallback = exports.ValidatedCreatePasswordCallback = exports.UserManager = exports.TokenStorage = exports.TokenManager = exports.TextOutputCallback = exports.TermsAndConditionsCallbackRenderer = exports.TermsAndConditionsCallback = exports.SuspendedTextOutputCallback = void 0;
 var javascript_sdk_1 = require("@forgerock/javascript-sdk");
@@ -37,0 +38,0 @@ Object.defineProperty(exports, "AttributeInputCallback", { enumerable: true, get: function () { return javascript_sdk_1.AttributeInputCallback; } });

lib/interfaces.d.ts

 import { FRLoginFailure, FRLoginSuccess, FRStep } from '@forgerock/javascript-sdk';
 import { FREventType } from './enums';
+import { CallbackRendererFactory } from './basic/interfaces';
 /**
@@ -28,3 +29,3 @@ * Represents the final step type of authentication, which could be success or failure.
 interface FRUIStepHandlerFactory {
-    (el: HTMLElement, step: FRStep): FRUIStepHandler | undefined;
+    (el: HTMLElement, step: FRStep, rendererFactory?: CallbackRendererFactory, rendererOptions?: FRRendererOptions): FRUIStepHandler | undefined;
 }
@@ -37,2 +38,3 @@ /**
     targetId?: string;
+    rendererOptions?: FRRendererOptions;
 }
@@ -46,2 +48,14 @@ /**
 /**
+ * Allows for configuring the behavior of the renderers
+ */
+interface FRRendererOptions {
+    /**
+     * Allows the SDK to handle TextOutputCallback messageType 4.
+     * This is considered an advanced callback that can have dangerous
+     * implications if not used carefully and correctly.
+     * DO NOT ENABLE THIS if you are not sure.
+     */
+    dangerouslySetScriptText?: boolean;
+}
+/**
  * Represents a "step change" event dispatched by `FRUI`.
@@ -52,2 +66,2 @@ */
 }
-export { FRAnyStep, FREndStep, FREvent, FRUIOptions, FRUIStepHandler, FRUIStepHandlerFactory, StepChangeEvent, };
+export { FRAnyStep, FREndStep, FREvent, FRRendererOptions, FRUIOptions, FRUIStepHandler, FRUIStepHandlerFactory, StepChangeEvent, };

package.json

 {
   "name": "@forgerock/javascript-sdk-ui",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "ForgeRock JavaScript SDK with UI rendering capability",
@@ -51,3 +51,3 @@ "main": "./lib/",
   "dependencies": {
-    "@forgerock/javascript-sdk": "^2.1.0"
+    "@forgerock/javascript-sdk": "^2.2.0"
   },
@@ -58,4 +58,4 @@ "devDependencies": {
     "@types/jest": "^26.0.13",
-    "@types/jest-environment-puppeteer": "^4.3.2",
-    "@types/puppeteer": "^2.0.0",
+    "@types/jest-environment-puppeteer": "4.3.2",
+    "@types/puppeteer": "^3.0.2",
     "@typescript-eslint/eslint-plugin": "^3.4.0",
@@ -62,0 +62,0 @@ "@typescript-eslint/parser": "^3.4.0",

Fixed alerts

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2008654

41.88%

Lines of code

14180

51.92%

Number of medium supply chain risk alerts

0

-100%

Worsened metrics

Number of package files

259

-0.38%

Dependency changes

• Updated

  @forgerock/javascript-sdk@^2.2.0