passbolt-styleguide 5.11.3 → 5.11.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/RELEASE_NOTES.md +2 -2
  2. package/build/css/help.min.css +2 -2
  3. package/build/css/public.min.css +2 -2
  4. package/build/css/themes/default/api_authentication.min.css +2 -2
  5. package/build/css/themes/default/api_cloud.min.css +2 -2
  6. package/build/css/themes/default/api_main.min.css +2 -2
  7. package/build/css/themes/default/api_reports.min.css +2 -2
  8. package/build/css/themes/default/api_webinstaller.min.css +2 -2
  9. package/build/css/themes/default/ext_app.min.css +2 -2
  10. package/build/css/themes/default/ext_authentication.min.css +2 -2
  11. package/build/css/themes/default/ext_external.min.css +2 -2
  12. package/build/css/themes/default/ext_in_form_cta.min.css +2 -2
  13. package/build/css/themes/default/ext_in_form_menu.min.css +2 -2
  14. package/build/css/themes/default/ext_quickaccess.min.css +2 -2
  15. package/build/css/themes/midgar/api_authentication.min.css +2 -2
  16. package/build/css/themes/midgar/api_main.min.css +2 -2
  17. package/build/css/themes/midgar/api_reports.min.css +2 -2
  18. package/build/css/themes/midgar/ext_app.min.css +2 -2
  19. package/build/css/themes/midgar/ext_authentication.min.css +2 -2
  20. package/build/css/themes/midgar/ext_in_form_cta.min.css +2 -2
  21. package/build/css/themes/midgar/ext_in_form_menu.min.css +2 -2
  22. package/build/css/themes/midgar/ext_quickaccess.min.css +2 -2
  23. package/package.json +1 -1
  24. package/src/react-web-integration/Autofill/Autofill.test.js +26 -0
  25. package/src/react-web-integration/lib/InForm/InFormFieldSelector.js +14 -9
  26. package/src/react-web-integration/lib/InForm/InformManager.test.data.js +62 -2
  27. package/src/react-web-integration/lib/InForm/InformManager.test.js +1440 -1358
package/RELEASE_NOTES.md CHANGED
@@ -1,4 +1,4 @@
1
- ## v5.11.2
1
+ ## v5.11.4
2
2
 
3
3
  ### Fixed
4
- - PB-50617 - Add PingOne redirect URL field
4
+ - PB-51067 - Rework TOTP selectors
@@ -1,7 +1,7 @@
1
1
  /**!
2
2
  * @name passbolt-styleguide
3
- * @version v5.11.3
4
- * @date 2026-04-08
3
+ * @version v5.11.4
4
+ * @date 2026-04-22
5
5
  * @copyright Copyright 2023 Passbolt SA
6
6
  * @source https://github.com/passbolt/passbolt_styleguide
7
7
  * @license AGPL-3.0
@@ -1,7 +1,7 @@
1
1
  /**!
2
2
  * @name passbolt-styleguide
3
- * @version v5.11.3
4
- * @date 2026-04-08
3
+ * @version v5.11.4
4
+ * @date 2026-04-22
5
5
  * @copyright Copyright 2023 Passbolt SA
6
6
  * @source https://github.com/passbolt/passbolt_styleguide
7
7
  * @license AGPL-3.0
@@ -1,7 +1,7 @@
1
1
  /**!
2
2
  * @name passbolt-styleguide
3
- * @version v5.11.3
4
- * @date 2026-04-08
3
+ * @version v5.11.4
4
+ * @date 2026-04-22
5
5
  * @copyright Copyright 2023 Passbolt SA
6
6
  * @source https://github.com/passbolt/passbolt_styleguide
7
7
  * @license AGPL-3.0
@@ -1,7 +1,7 @@
1
1
  /**!
2
2
  * @name passbolt-styleguide
3
- * @version v5.11.3
4
- * @date 2026-04-08
3
+ * @version v5.11.4
4
+ * @date 2026-04-22
5
5
  * @copyright Copyright 2023 Passbolt SA
6
6
  * @source https://github.com/passbolt/passbolt_styleguide
7
7
  * @license AGPL-3.0
@@ -1,7 +1,7 @@
1
1
  /**!
2
2
  * @name passbolt-styleguide
3
- * @version v5.11.3
4
- * @date 2026-04-08
3
+ * @version v5.11.4
4
+ * @date 2026-04-22
5
5
  * @copyright Copyright 2023 Passbolt SA
6
6
  * @source https://github.com/passbolt/passbolt_styleguide
7
7
  * @license AGPL-3.0
@@ -1,7 +1,7 @@
1
1
  /**!
2
2
  * @name passbolt-styleguide
3
- * @version v5.11.3
4
- * @date 2026-04-08
3
+ * @version v5.11.4
4
+ * @date 2026-04-22
5
5
  * @copyright Copyright 2023 Passbolt SA
6
6
  * @source https://github.com/passbolt/passbolt_styleguide
7
7
  * @license AGPL-3.0
@@ -1,7 +1,7 @@
1
1
  /**!
2
2
  * @name passbolt-styleguide
3
- * @version v5.11.3
4
- * @date 2026-04-08
3
+ * @version v5.11.4
4
+ * @date 2026-04-22
5
5
  * @copyright Copyright 2023 Passbolt SA
6
6
  * @source https://github.com/passbolt/passbolt_styleguide
7
7
  * @license AGPL-3.0
@@ -1,7 +1,7 @@
1
1
  /**!
2
2
  * @name passbolt-styleguide
3
- * @version v5.11.3
4
- * @date 2026-04-08
3
+ * @version v5.11.4
4
+ * @date 2026-04-22
5
5
  * @copyright Copyright 2023 Passbolt SA
6
6
  * @source https://github.com/passbolt/passbolt_styleguide
7
7
  * @license AGPL-3.0
@@ -1,7 +1,7 @@
1
1
  /**!
2
2
  * @name passbolt-styleguide
3
- * @version v5.11.3
4
- * @date 2026-04-08
3
+ * @version v5.11.4
4
+ * @date 2026-04-22
5
5
  * @copyright Copyright 2023 Passbolt SA
6
6
  * @source https://github.com/passbolt/passbolt_styleguide
7
7
  * @license AGPL-3.0
@@ -1,7 +1,7 @@
1
1
  /**!
2
2
  * @name passbolt-styleguide
3
- * @version v5.11.3
4
- * @date 2026-04-08
3
+ * @version v5.11.4
4
+ * @date 2026-04-22
5
5
  * @copyright Copyright 2023 Passbolt SA
6
6
  * @source https://github.com/passbolt/passbolt_styleguide
7
7
  * @license AGPL-3.0
@@ -1,7 +1,7 @@
1
1
  /**!
2
2
  * @name passbolt-styleguide
3
- * @version v5.11.3
4
- * @date 2026-04-08
3
+ * @version v5.11.4
4
+ * @date 2026-04-22
5
5
  * @copyright Copyright 2023 Passbolt SA
6
6
  * @source https://github.com/passbolt/passbolt_styleguide
7
7
  * @license AGPL-3.0
@@ -1,7 +1,7 @@
1
1
  /**!
2
2
  * @name passbolt-styleguide
3
- * @version v5.11.3
4
- * @date 2026-04-08
3
+ * @version v5.11.4
4
+ * @date 2026-04-22
5
5
  * @copyright Copyright 2023 Passbolt SA
6
6
  * @source https://github.com/passbolt/passbolt_styleguide
7
7
  * @license AGPL-3.0
@@ -1,7 +1,7 @@
1
1
  /**!
2
2
  * @name passbolt-styleguide
3
- * @version v5.11.3
4
- * @date 2026-04-08
3
+ * @version v5.11.4
4
+ * @date 2026-04-22
5
5
  * @copyright Copyright 2023 Passbolt SA
6
6
  * @source https://github.com/passbolt/passbolt_styleguide
7
7
  * @license AGPL-3.0
@@ -1,7 +1,7 @@
1
1
  /**!
2
2
  * @name passbolt-styleguide
3
- * @version v5.11.3
4
- * @date 2026-04-08
3
+ * @version v5.11.4
4
+ * @date 2026-04-22
5
5
  * @copyright Copyright 2023 Passbolt SA
6
6
  * @source https://github.com/passbolt/passbolt_styleguide
7
7
  * @license AGPL-3.0
@@ -1,7 +1,7 @@
1
1
  /**!
2
2
  * @name passbolt-styleguide
3
- * @version v5.11.3
4
- * @date 2026-04-08
3
+ * @version v5.11.4
4
+ * @date 2026-04-22
5
5
  * @copyright Copyright 2023 Passbolt SA
6
6
  * @source https://github.com/passbolt/passbolt_styleguide
7
7
  * @license AGPL-3.0
@@ -1,7 +1,7 @@
1
1
  /**!
2
2
  * @name passbolt-styleguide
3
- * @version v5.11.3
4
- * @date 2026-04-08
3
+ * @version v5.11.4
4
+ * @date 2026-04-22
5
5
  * @copyright Copyright 2023 Passbolt SA
6
6
  * @source https://github.com/passbolt/passbolt_styleguide
7
7
  * @license AGPL-3.0
@@ -1,7 +1,7 @@
1
1
  /**!
2
2
  * @name passbolt-styleguide
3
- * @version v5.11.3
4
- * @date 2026-04-08
3
+ * @version v5.11.4
4
+ * @date 2026-04-22
5
5
  * @copyright Copyright 2023 Passbolt SA
6
6
  * @source https://github.com/passbolt/passbolt_styleguide
7
7
  * @license AGPL-3.0
@@ -1,7 +1,7 @@
1
1
  /**!
2
2
  * @name passbolt-styleguide
3
- * @version v5.11.3
4
- * @date 2026-04-08
3
+ * @version v5.11.4
4
+ * @date 2026-04-22
5
5
  * @copyright Copyright 2023 Passbolt SA
6
6
  * @source https://github.com/passbolt/passbolt_styleguide
7
7
  * @license AGPL-3.0
@@ -1,7 +1,7 @@
1
1
  /**!
2
2
  * @name passbolt-styleguide
3
- * @version v5.11.3
4
- * @date 2026-04-08
3
+ * @version v5.11.4
4
+ * @date 2026-04-22
5
5
  * @copyright Copyright 2023 Passbolt SA
6
6
  * @source https://github.com/passbolt/passbolt_styleguide
7
7
  * @license AGPL-3.0
@@ -1,7 +1,7 @@
1
1
  /**!
2
2
  * @name passbolt-styleguide
3
- * @version v5.11.3
4
- * @date 2026-04-08
3
+ * @version v5.11.4
4
+ * @date 2026-04-22
5
5
  * @copyright Copyright 2023 Passbolt SA
6
6
  * @source https://github.com/passbolt/passbolt_styleguide
7
7
  * @license AGPL-3.0
@@ -1,7 +1,7 @@
1
1
  /**!
2
2
  * @name passbolt-styleguide
3
- * @version v5.11.3
4
- * @date 2026-04-08
3
+ * @version v5.11.4
4
+ * @date 2026-04-22
5
5
  * @copyright Copyright 2023 Passbolt SA
6
6
  * @source https://github.com/passbolt/passbolt_styleguide
7
7
  * @license AGPL-3.0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "passbolt-styleguide",
3
- "version": "5.11.3",
3
+ "version": "5.11.4",
4
4
  "license": "AGPL-3.0",
5
5
  "copyright": "Copyright 2023 Passbolt SA",
6
6
  "description": "Passbolt styleguide contains common styling assets used by the different sites, plugin, etc.",
@@ -36,6 +36,8 @@ import {
36
36
  domSDRLoginForm,
37
37
  domBestKeywordOnFirstElement,
38
38
  domSameKeywordPriorityTwoElements,
39
+ domOTPSingleFieldPatternLookalike,
40
+ domOTPMultiFieldNumberLookalike,
39
41
  } from "../lib/InForm/InformManager.test.data";
40
42
  import { defaultFormData } from "./Autofill.test.data";
41
43
  import MockPort from "../../react-extension/test/mock/MockPort";
@@ -324,6 +326,30 @@ describe("Autofill::getOTPElement", () => {
324
326
 
325
327
  expect(window.port.emit).toHaveBeenCalledWith(formData.requestId, "SUCCESS");
326
328
  });
329
+
330
+ [
331
+ { label: "the pattern isn't supported", value: domOTPSingleFieldPatternLookalike },
332
+ {
333
+ label: "there is a single OTP field represented by multiple generic number inputs",
334
+ value: domOTPMultiFieldNumberLookalike,
335
+ },
336
+ ].forEach(({ label, value: testCase }) => {
337
+ it(`Shouldn't get the OTP field when ${label}`, () => {
338
+ expect.assertions(2);
339
+ document.body.innerHTML = testCase;
340
+
341
+ const formData = defaultFormData();
342
+ const page = new AutofillPage();
343
+
344
+ page.fillForm(formData);
345
+
346
+ expect(UserEventsService.autofill).toHaveBeenCalledTimes(0);
347
+ expect(window.port.emit).toHaveBeenCalledWith(formData.requestId, "ERROR", {
348
+ message: "Unable to find the input elements on this page.",
349
+ name: "Error",
350
+ });
351
+ });
352
+ });
327
353
  });
328
354
 
329
355
  describe("Autofill::extractUsernameElementWithFallback", () => {
@@ -93,11 +93,6 @@ export default {
93
93
  OTP_FIELD_SELECTOR: `input[autocomplete='one-time-code']:not([hidden]):not([disabled]),
94
94
  input[pattern*='\d{6}' i]:not([hidden]):not([disabled]),
95
95
  input[pattern*='[0-9]{6}' i]:not([hidden]):not([disabled]),
96
- input[pattern*='\d+' i]:not([hidden]):not([disabled]),
97
- input[pattern*='[0-9]+' i]:not([hidden]):not([disabled]),
98
- input[pattern*='\d*' i]:not([hidden]):not([disabled]),
99
- input[pattern*='[0-9]*' i]:not([hidden]):not([disabled]),
100
- input[inputmode='numeric' i]:not([hidden]):not([disabled]),
101
96
  input[minlength='6' i][maxlength='6' i]:not([hidden]):not([disabled]),
102
97
  input[name*='one-time-code' i]:not([hidden]):not([disabled]),
103
98
  input[id*='one-time-code' i]:not([hidden]):not([disabled]),
@@ -108,12 +103,22 @@ export default {
108
103
  input[name*='onetimecode' i]:not([hidden]):not([disabled]),
109
104
  input[id*='onetimecode' i]:not([hidden]):not([disabled]),
110
105
  input[class*='onetimecode' i]:not([hidden]):not([disabled]),
111
- input[name*='otp' i]:not([hidden]):not([disabled]),
112
- input[id*='otp' i]:not([hidden]):not([disabled]),
113
- input[class*='otp' i]:not([hidden]):not([disabled]),
106
+ input[name*='code' i]:not([hidden]):not([disabled]),
107
+ input[id*='code' i]:not([hidden]):not([disabled]),
108
+ input[class*='code' i]:not([hidden]):not([disabled]),
109
+ input[name*='otc' i]:not([hidden]):not([disabled]),
110
+ input[id*='otc' i]:not([hidden]):not([disabled]),
111
+ input[class*='otc' i]:not([hidden]):not([disabled]),
114
112
  input[name*='mfa' i]:not([hidden]):not([disabled]),
115
113
  input[id*='mfa' i]:not([hidden]):not([disabled]),
116
114
  input[class*='mfa' i]:not([hidden]):not([disabled]),
117
- *:has(> input:not([type='hidden']):not([hidden]):not([disabled]) + input:not([type='hidden']):not([hidden]):not([disabled]) + input:not([type='hidden']):not([hidden]):not([disabled]) + input:not([type='hidden']):not([hidden]):not([disabled]) + input:not([type='hidden']):not([hidden]):not([disabled]) + input:not([type='hidden']):not([hidden]):not([disabled]))
115
+ input[name*='2fa' i]:not([hidden]):not([disabled]),
116
+ input[id*='2fa' i]:not([hidden]):not([disabled]),
117
+ input[class*='2fa' i]:not([hidden]):not([disabled]),
118
+ *:has(> input[class*='otp' i]:not([type='hidden']):not([hidden]):not([disabled]) + input[class*='otp' i]:not([type='hidden']):not([hidden]):not([disabled]) + input[class*='otp' i]:not([type='hidden']):not([hidden]):not([disabled]) + input[class*='otp' i]:not([type='hidden']):not([hidden]):not([disabled]) + input[class*='otp' i]:not([type='hidden']):not([hidden]):not([disabled]) + input[class*='otp' i]:not([type='hidden']):not([hidden]):not([disabled])),
119
+ input[name*='otp' i]:not([hidden]):not([disabled]),
120
+ input[id*='otp' i]:not([hidden]):not([disabled]),
121
+ input[class*='otp' i]:not([hidden]):not([disabled]),
122
+ *:has(> input[aria-label*='otp' i]:not([type='hidden']):not([hidden]):not([disabled]) + input[aria-label*='otp' i]:not([type='hidden']):not([hidden]):not([disabled]) + input[aria-label*='otp' i]:not([type='hidden']):not([hidden]):not([disabled]) + input[aria-label*='otp' i]:not([type='hidden']):not([hidden]):not([disabled]) + input[aria-label*='otp' i]:not([type='hidden']):not([hidden]):not([disabled]) + input[aria-label*='otp' i]:not([type='hidden']):not([hidden]):not([disabled]))
118
123
  `,
119
124
  };
@@ -600,7 +600,7 @@ export const domTwoEmailInputsAndPassword = `
600
600
  */
601
601
  export const domSingleOTPField = `
602
602
  <div>
603
- <input type="number" autocomplete="one-time-code" data-testid="otp" />
603
+ <input autocomplete="one-time-code" data-testid="otp" />
604
604
  </div>`;
605
605
 
606
606
  /**
@@ -611,7 +611,7 @@ export const domSingleOTPFieldWithUsernameAndPassword = `
611
611
  <div>
612
612
  <input type="text" name="username" />
613
613
  <input type="password" />
614
- <input type="number" autocomplete="one-time-code" data-testid="otp" />
614
+ <input autocomplete="one-time-code" data-testid="otp" />
615
615
  </div>`;
616
616
 
617
617
  /**
@@ -620,9 +620,69 @@ export const domSingleOTPFieldWithUsernameAndPassword = `
620
620
  */
621
621
  export const domSingleOTPMultiField = `
622
622
  <div data-testid="otp">
623
+ <input class="time-otp" />
624
+ <input class="time-otp" />
625
+ <input class="time-otp" />
626
+ <input class="time-otp" />
627
+ <input class="time-otp" />
628
+ <input class="time-otp" />
629
+ </div>`;
630
+
631
+ /**
632
+ * Create a login form with an OTP field composed of 6 inputs with aria-label.
633
+ * @type {string}
634
+ */
635
+ export const domSingleOTPMultiFieldAriaLabel = `
636
+ <div data-testid="otp">
637
+ <input aria-label="time-based otp" />
638
+ <input aria-label="time-based otp" />
639
+ <input aria-label="time-based otp" />
640
+ <input aria-label="time-based otp" />
641
+ <input aria-label="time-based otp" />
642
+ <input aria-label="time-based otp" />
643
+ </div>`;
644
+
645
+ /**
646
+ * Create a login form with a single input using a generic numeric pattern
647
+ * @type {string}
648
+ */
649
+ export const domOTPSingleFieldPatternLookalike = `
650
+ <div>
651
+ <input pattern="^\\d+$" />
652
+ </div>`;
653
+
654
+ /**
655
+ * Create a login form with a single input using custom pattern
656
+ * @type {string}
657
+ */
658
+ export const domOTPSingleFieldCustomPatternLookalike = `
659
+ <div>
660
+ <input pattern="-?\d*([.]\d{0,6})?" />
661
+ </div>`;
662
+
663
+ /**
664
+ * Create a login form with a DOM looking like a OTP field composed of 6 inputs type number.
665
+ * @type {string}
666
+ */
667
+ export const domOTPMultiFieldNumberLookalike = `
668
+ <div>
669
+ <input type="number" />
670
+ <input type="number" />
671
+ <input type="number" />
623
672
  <input type="number" />
624
673
  <input type="number" />
625
674
  <input type="number" />
675
+ </div>`;
676
+
677
+ /**
678
+ * Create a login form with a DOM looking like a OTP field composed of 6 inputs type text.
679
+ * @type {string}
680
+ */
681
+ export const domOTPMultiFieldTextLookalike = `
682
+ <div>
683
+ <input type="text" />
684
+ <input type="text" />
685
+ <input type="text" />
626
686
  <input type="text" />
627
687
  <input type="text" />
628
688
  <input type="text" />