@formio/js 5.4.0 → 5.4.2

package/lib/mjs/components/_classes/list/editForm/ListComponent.edit.data.js

@@ -19,10 +19,7 @@ export default [
         tooltip: 'A URL that returns a JSON array to use as the data source.',
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.dataSrc' },
-                    'url',
-                ],
+                '===': [{ var: 'data.dataSrc' }, 'url'],
             },
         },
     },
@@ -49,10 +46,7 @@ export default [
         ],
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.dataSrc' },
-                    'url',
-                ],
+                '===': [{ var: 'data.dataSrc' }, 'url'],
             },
         },
     },
@@ -68,14 +62,7 @@ export default [
         tooltip: 'The property of each item in the data source to use as the select value. If not specified, the item itself will be used.',
         conditional: {
             json: {
-                in: [
-                    { var: 'data.dataSrc' },
-                    [
-                        'json',
-                        'url',
-                        'custom',
-                    ],
-                ],
+                in: [{ var: 'data.dataSrc' }, ['json', 'url', 'custom']],
             },
         },
     },
@@ -108,10 +95,7 @@ export default [
         tooltip: 'Check this if you would like to use Formio Authentication with the request.',
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.dataSrc' },
-                    'url',
-                ],
+                '===': [{ var: 'data.dataSrc' }, 'url'],
             },
         },
     },
@@ -126,16 +110,10 @@ export default [
             json: {
                 or: [
                     {
-                        '===': [
-                            { var: 'data.dataSrc' },
-                            'url',
-                        ],
+                        '===': [{ var: 'data.dataSrc' }, 'url'],
                     },
                     {
-                        '===': [
-                            { var: 'data.dataSrc' },
-                            'resource',
-                        ],
+                        '===': [{ var: 'data.dataSrc' }, 'resource'],
                     },
                 ],
             },

package/lib/mjs/components/_classes/multivalue/Multivalue.js

@@ -17,26 +17,16 @@ export default class Multivalue extends Field {
             if (Array.isArray(value)) {
                 if (underlyingValueShouldBeArray) {
                     if (value.length === 0 || !Array.isArray(value[0])) {
-                        return [
-                            value,
-                        ];
+                        return [value];
                     }
                 }
                 if (value.length === 0) {
-                    return [
-                        emptyValue,
-                    ];
+                    return [emptyValue];
                 }
                 return super.normalizeValue(value, flags);
             }
             else {
-                return super.normalizeValue(value == null
-                    ? [
-                        emptyValue,
-                    ]
-                    : [
-                        value,
-                    ], flags);
+                return super.normalizeValue(value == null ? [emptyValue] : [value], flags);
             }
         }
         else {
@@ -64,22 +54,16 @@ export default class Multivalue extends Field {
         let value = super.defaultValue;
         if (this.component.multiple) {
             if (_.isArray(value)) {
-                value = !value.length
-                    ? [
-                        super.emptyValue,
-                    ]
-                    : value;
+                value = !value.length ? [super.emptyValue] : value;
             }
             else {
-                value = [
-                    value,
-                ];
+                value = [value];
             }
         }
         return value;
     }
     get addAnother() {
-        return this.t(this.component.addAnother || 'Add Another');
+        return this.t(this.component.addAnother || 'addAnother');
     }
     /**
      * @returns {Field} - The created field.
@@ -198,7 +182,7 @@ export default class Multivalue extends Field {
                 this.saveCaretPosition(element, index);
             }
             catch (err) {
-                console.warn('An error occurred while trying to save caret position', err);
+                console.warn(this.t('caretPositionSavingError'), err);
             }
             // If a mask is present, delay the update to allow mask to update first.
             if (element.mask) {
@@ -300,9 +284,7 @@ export default class Multivalue extends Field {
         }
         let dataValue = this.dataValue || [];
         if (!Array.isArray(dataValue)) {
-            dataValue = [
-                dataValue,
-            ];
+            dataValue = [dataValue];
         }
         if (Array.isArray(value)) {
             dataValue = dataValue.concat(value);

package/lib/mjs/components/_classes/nested/NestedComponent.js

@@ -511,10 +511,7 @@ export default class NestedComponent extends Field {
                 }
             });
         }
-        return Promise.all([
-            superPromise,
-            childPromise,
-        ]);
+        return Promise.all([superPromise, childPromise]);
     }
     /**
      * Attach the logic to the components.

package/lib/mjs/components/_classes/nestedarray/NestedArrayComponent.js

@@ -12,15 +12,13 @@ export default class NestedArrayComponent extends NestedDataComponent {
         }, ...extend);
     }
     static savedValueTypes() {
-        return [
-            componentValueTypes.array,
-        ];
+        return [componentValueTypes.array];
     }
     componentContext(component) {
         return this.iteratableRows[component.rowIndex].data;
     }
     get iteratableRows() {
-        throw new Error('Getter #iteratableRows() is not implemented');
+        throw new Error(this.t('iteratableRowsError'));
     }
     get rowIndex() {
         return this._rowIndex;
@@ -62,12 +60,10 @@ export default class NestedArrayComponent extends NestedDataComponent {
     }
     validate(data, flags = {}) {
         data = data || this.data;
-        return this.validateComponents([
-            this.component,
-        ], data, flags);
+        return this.validateComponents([this.component], data, flags);
     }
     checkRow(...args) {
-        console.log('Deprecation Warning: checkRow method has been replaced with processRow');
+        console.log(this.t('checkRowDeprecation'));
         return this.processRow.call(this, ...args);
     }
     processRow(method, data, opts, row, components, silentCheck) {
@@ -124,7 +120,7 @@ export default class NestedArrayComponent extends NestedDataComponent {
       `;
             this.component.components?.forEach((component) => {
                 const label = component.label || component.key;
-                result += `<th style="padding: 5px 10px;">${label}</th>`;
+                result += `<th style="padding: 5px 10px;">${this.t(label, { _userInput: true })}</th>`;
             });
             result += `
           </tr>

package/lib/mjs/components/_classes/nesteddata/NestedDataComponent.js

@@ -12,9 +12,7 @@ export default class NestedDataComponent extends NestedComponent {
         return !_.isEqual(newValue, oldValue);
     }
     static savedValueTypes(schema) {
-        return (getComponentSavedTypes(schema) || [
-            componentValueTypes.object,
-        ]);
+        return getComponentSavedTypes(schema) || [componentValueTypes.object];
     }
     get allowData() {
         return true;

package/lib/mjs/components/address/Address.js

@@ -78,9 +78,7 @@ export default class AddressComponent extends ContainerComponent {
     }
     static savedValueTypes(schema) {
         schema = schema || {};
-        return (getComponentSavedTypes(schema) || [
-            componentValueTypes.object,
-        ]);
+        return getComponentSavedTypes(schema) || [componentValueTypes.object];
     }
     static get builderInfo() {
         return {
@@ -98,10 +96,7 @@ export default class AddressComponent extends ContainerComponent {
     static get conditionOperatorsSettings() {
         return {
             ...super.conditionOperatorsSettings,
-            operators: [
-                'isEmpty',
-                'isNotEmpty',
-            ],
+            operators: ['isEmpty', 'isNotEmpty'],
         };
     }
     mergeSchema(component = {}) {
@@ -201,11 +196,7 @@ export default class AddressComponent extends ContainerComponent {
     }
     get address() {
         if (this.isMultiple) {
-            return _.isArray(this.dataValue)
-                ? this.dataValue
-                : [
-                    this.dataValue,
-                ];
+            return _.isArray(this.dataValue) ? this.dataValue : [this.dataValue];
         }
         // Manual mode is not implementing for multiple value
         return this.manualModeEnabled && this.dataValue ? this.dataValue.address : this.dataValue;
@@ -221,11 +212,7 @@ export default class AddressComponent extends ContainerComponent {
     get defaultValue() {
         let defaultValue = super.defaultValue;
         if (this.isMultiple) {
-            defaultValue = _.isArray(defaultValue)
-                ? defaultValue
-                : [
-                    defaultValue,
-                ];
+            defaultValue = _.isArray(defaultValue) ? defaultValue : [defaultValue];
         }
         return defaultValue;
     }
@@ -241,9 +228,7 @@ export default class AddressComponent extends ContainerComponent {
     get dataValue() {
         const resultValue = _.get(this._data, this.path);
         if (!_.isArray(resultValue) && this.component.multiple) {
-            return [
-                resultValue,
-            ];
+            return [resultValue];
         }
         return super.dataValue;
     }
@@ -341,7 +326,7 @@ export default class AddressComponent extends ContainerComponent {
         return !this.isMultiple && (this.builderMode || this.manualModeEnabled);
     }
     get addAnother() {
-        return this.t(this.component.addAnother || 'Add Another');
+        return this.t(this.component.addAnother || 'addAnother');
     }
     renderElement(value) {
         return this.renderTemplate(this.templateName, {
@@ -383,9 +368,7 @@ export default class AddressComponent extends ContainerComponent {
     onSelectAddress(address, element, index) {
         if (this.isMultiple) {
             this.address[index] = address;
-            this.address = [
-                ...this.address,
-            ];
+            this.address = [...this.address];
         }
         else {
             this.address = address;
@@ -597,12 +580,9 @@ export default class AddressComponent extends ContainerComponent {
             }
             return this.getComponents()
                 .filter((component) => component.hasValue(address))
-                .map((component) => [
-                component,
-                _.get(address, component.key),
-            ])
-                .filter(([component, componentValue,]) => !component.isEmpty(componentValue))
-                .map(([component, componentValue,]) => component.getValueAsString(componentValue, options))
+                .map((component) => [component, _.get(address, component.key)])
+                .filter(([component, componentValue]) => !component.isEmpty(componentValue))
+                .map(([component, componentValue]) => component.getValueAsString(componentValue, options))
                 .join(', ');
         }
         return super.getValueAsString(address, options);

package/lib/mjs/components/address/editForm/Address.edit.provider.js

@@ -38,10 +38,7 @@ export default [
         },
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.provider' },
-                    'azure',
-                ],
+                '===': [{ var: 'data.provider' }, 'azure'],
             },
         },
     },
@@ -58,10 +55,7 @@ export default [
         },
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.provider' },
-                    'custom',
-                ],
+                '===': [{ var: 'data.provider' }, 'custom'],
             },
         },
     },
@@ -76,10 +70,7 @@ export default [
         tooltip: 'Which query param should be used to pass as a search string. Default is `query`.',
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.provider' },
-                    'custom',
-                ],
+                '===': [{ var: 'data.provider' }, 'custom'],
             },
         },
     },
@@ -93,10 +84,7 @@ export default [
         tooltip: 'The property within the response data, where iterable addresses reside. For example: results.',
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.provider' },
-                    'custom',
-                ],
+                '===': [{ var: 'data.provider' }, 'custom'],
             },
         },
     },
@@ -110,10 +98,7 @@ export default [
         tooltip: 'The property of each address in the response to use as the display value.',
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.provider' },
-                    'custom',
-                ],
+                '===': [{ var: 'data.provider' }, 'custom'],
             },
         },
     },
@@ -130,10 +115,7 @@ export default [
         tooltip: 'Additional query params can be specified here in a way of JSON object.',
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.provider' },
-                    'custom',
-                ],
+                '===': [{ var: 'data.provider' }, 'custom'],
             },
         },
     },
@@ -150,10 +132,7 @@ export default [
         },
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.provider' },
-                    'google',
-                ],
+                '===': [{ var: 'data.provider' }, 'google'],
             },
         },
     },
@@ -171,10 +150,7 @@ export default [
         tooltip: "Specify Google Maps Autocomplete options used for address searching as JSON object. Follow the <a href ='https://developers.google.com/maps/documentation/javascript/places-autocomplete' target='_blank'>link</a> for available options",
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.provider' },
-                    'google',
-                ],
+                '===': [{ var: 'data.provider' }, 'google'],
             },
         },
     },

package/lib/mjs/components/alert/Alert.js

@@ -22,11 +22,7 @@ export default class Alert {
         };
     }
     showErrors(errors = [], triggerEvent = false, options = {}) {
-        errors = _.isArray(errors)
-            ? errors
-            : [
-                errors,
-            ];
+        errors = _.isArray(errors) ? errors : [errors];
         const messagesList = this.createMessagesList('error', errors);
         this.showAlert('error', messagesList, options);
         if (triggerEvent) {
@@ -112,7 +108,7 @@ export default class Alert {
         };
         if (this.refs.messageRef?.length) {
             this.refs.messageRef.forEach((el) => {
-                Object.entries(customEvents).forEach(([event, listeners,]) => {
+                Object.entries(customEvents).forEach(([event, listeners]) => {
                     listeners.forEach((listener) => this.parentComponent.addEventListener(el, event, listener));
                     this.eventListenersKeys.push(event);
                 });
@@ -142,6 +138,7 @@ export default class Alert {
             const component = this.parentComponent.root?.getComponent(path, null, keyOrPath);
             if (component && _.isFunction(component.focus)) {
                 component.focus();
+                component.scrollIntoView();
             }
         }
     }

package/lib/mjs/components/button/Button.d.ts

@@ -29,6 +29,7 @@ export default class ButtonComponent extends Field {
     detach(element: any): void;
     onClick(event: any): void;
     openOauth(settings: any): void;
+    _handleOauthSessionExpired(): void;
     get oauthComponentPath(): any;
     focus(): void;
     triggerCaptcha(): void;

package/lib/mjs/components/button/Button.js

@@ -30,9 +30,7 @@ export default class ButtonComponent extends Field {
         };
     }
     static savedValueTypes(schema) {
-        return (getComponentSavedTypes(schema) || [
-            componentValueTypes.boolean,
-        ]);
+        return getComponentSavedTypes(schema) || [componentValueTypes.boolean];
     }
     constructor(component, options, data) {
         super(component, options, data);
@@ -44,12 +42,7 @@ export default class ButtonComponent extends Field {
     get inputInfo() {
         const info = super.elementInfo();
         info.type = 'button';
-        info.attr.type = [
-            'submit',
-            'saveState',
-        ].includes(this.component.action)
-            ? 'submit'
-            : 'button';
+        info.attr.type = ['submit', 'saveState'].includes(this.component.action) ? 'submit' : 'button';
         this.component.theme = this.component.theme || 'default';
         info.attr.class = `btn btn-${this.component.theme}`;
         if (this.component.size) {
@@ -345,17 +338,17 @@ export default class ButtonComponent extends Field {
                 break;
             case 'oauth':
                 if (this.root === this) {
-                    console.warn('You must add the OAuth button to a form for it to function properly');
+                    console.warn(this.t('noOAuthBtn'));
                     return;
                 }
                 // Display Alert if OAuth config is missing
                 if (!this.oauthConfig) {
-                    this.root?.setAlert('danger', 'OAuth not configured. You must configure oauth for your project before it will work.');
+                    this.root.setAlert('danger', this.t('noOAuthConfiguration'));
                     break;
                 }
                 // Display Alert if oAuth has an error is missing
                 if (this.oauthConfig.error) {
-                    this.root?.setAlert('danger', `The Following Error Has Occured ${this.oauthConfig.error}`);
+                    this.root?.setAlert('danger', `${this.t('oAuthErrorsTitle')} ${this.t(this.oauthConfig.error)}`);
                     break;
                 }
                 this.openOauth(this.oauthConfig);
@@ -363,8 +356,14 @@ export default class ButtonComponent extends Field {
         }
     }
     openOauth(settings) {
+        // this is if the temp session (storing the state and code verifiers) expires in the db
+        // and we need to fetch new oauth state
+        if (settings.sessionExpireAt && Date.now() >= settings.sessionExpireAt) {
+            this._handleOauthSessionExpired();
+            return;
+        }
         if (!this.root?.formio) {
-            console.warn('You must attach a Form API url to your form in order to use OAuth buttons.');
+            console.warn(this.t('noOAuthFormUrl'));
             return;
         }
         let params = {
@@ -378,7 +377,8 @@ export default class ButtonComponent extends Field {
         if (settings.state) {
             params.state = settings.state;
         }
-        else if (settings.code_challenge) {
+        // okta requires both a state and a code challenge for PKCE
+        if (settings.code_challenge) {
             params.code_challenge = settings.code_challenge;
             params.code_challenge_method = 'S256';
         }
@@ -417,9 +417,12 @@ export default class ButtonComponent extends Field {
                     }
                     // TODO: check for error response here
                     if (settings.state !== params.state) {
-                        this.root?.setAlert('danger', 'OAuth state does not match. Please try logging in again.');
+                        this.root?.setAlert('danger', this.t('oAuthStateError'));
                         return;
                     }
+                    if (settings.sessionId) {
+                        params.sessionId = settings.sessionId;
+                    }
                     // Depending on where the settings came from, submit to either the submission endpoint (old) or oauth endpoint (new).
                     let requestPromise = Promise.resolve();
                     if (_.has(this, 'root.form.config.oauth') &&
@@ -446,6 +449,11 @@ export default class ButtonComponent extends Field {
                         this.root?.onSubmit(result, true);
                     })
                         .catch((err) => {
+                        console.log(err);
+                        if (settings.sessionExpireAt && Date.now() >= settings.sessionExpireAt) {
+                            this._handleOauthSessionExpired();
+                            return;
+                        }
                         this.root?.onSubmissionError(err);
                     });
                 }
@@ -453,7 +461,7 @@ export default class ButtonComponent extends Field {
             catch (error) {
                 if (error.name !== 'SecurityError' &&
                     (error.name !== 'Error' || error.message !== 'Permission denied')) {
-                    this.root?.setAlert('danger', error.message || error);
+                    this.root?.setAlert('danger', this.t(`${error.message || error}`));
                 }
             }
             if (!popup || popup.closed || popup.closed === undefined) {
@@ -461,6 +469,11 @@ export default class ButtonComponent extends Field {
             }
         }, 100);
     }
+    _handleOauthSessionExpired() {
+        this.root?.setAlert('warning', this.t('oauthSessionExpired'));
+        this.loading = true;
+        setTimeout(() => window.location.reload(), 2000);
+    }
     get oauthComponentPath() {
         const pathArray = getArrayFromComponentPath(this.path);
         return _.chain(pathArray)

package/lib/mjs/components/button/editForm/Button.edit.display.js

@@ -56,10 +56,7 @@ export default [
         },
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.action' },
-                    'oauth',
-                ],
+                '===': [{ var: 'data.action' }, 'oauth'],
             },
         },
     },
@@ -73,10 +70,7 @@ export default [
         input: true,
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.action' },
-                    'saveState',
-                ],
+                '===': [{ var: 'data.action' }, 'saveState'],
             },
         },
     },
@@ -90,10 +84,7 @@ export default [
         tooltip: 'Use the Enter key to submit form.',
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.action' },
-                    'submit',
-                ],
+                '===': [{ var: 'data.action' }, 'submit'],
             },
         },
     },
@@ -107,10 +98,7 @@ export default [
         tooltip: 'When the button is pressed, show any validation errors on the form.',
         conditional: {
             json: {
-                '!==': [
-                    { var: 'data.action' },
-                    'submit',
-                ],
+                '!==': [{ var: 'data.action' }, 'submit'],
             },
         },
     },
@@ -123,10 +111,7 @@ export default [
         tooltip: 'The event to fire when the button is clicked.',
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.action' },
-                    'event',
-                ],
+                '===': [{ var: 'data.action' }, 'event'],
             },
         },
     },
@@ -141,10 +126,7 @@ export default [
         placeholder: 'https://example.form.io',
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.action' },
-                    'url',
-                ],
+                '===': [{ var: 'data.action' }, 'url'],
             },
         },
     },
@@ -172,10 +154,7 @@ export default [
         ],
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.action' },
-                    'url',
-                ],
+                '===': [{ var: 'data.action' }, 'url'],
             },
         },
     },
@@ -191,10 +170,7 @@ export default [
         placeholder: "data['mykey'] = data['anotherKey'];",
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.action' },
-                    'custom',
-                ],
+                '===': [{ var: 'data.action' }, 'custom'],
             },
         },
     },