passbolt-styleguide 5.12.0 → 5.12.1

package/RELEASE_NOTES.md

@@ -1,54 +1,3 @@
-# v5.12.0
+# v5.12.1
 
-## Browser extension
-### Added
-- PB-51015 Add PIN code resource type in resourceTypeSchemasDefinition
-- PB-51016 Handle PIN code in resourceTypeEntity
-- PB-51017 Handle PIN code in resourceTypesCollection
-- PB-51019 PINCODE - 1.5 Create secretDataV5StandalonePinCodeEntity  and add...
-- PB-51020 PINCODE - 1.6 Add pin code to ResourceEditCreateFormEnumerationTypes
-- PB-51023 Update resourceTypesFormEntity to handle the new pin code resource type
-- PB-51046 PINCODE - 3.2 Adapt ExternalResourceEntity to handle the pin code resource type schema
-- PB-51047 PINCODE - 3.3 Adapt ExportResourcesService to handle the mapping of pin code
-- PB-51048 PINCODE - 3.4 Adapt resourcesKdbxImportParser and to map pin code in case it exist to the correct resource types
-- PB-51049 Add PIN code icon to passboltDefaultResourceTypeIcons.data
-- PB-51050 Update DisplayContentTypesAllowedContentTypesAdministration to handle PIN code
-- PB-51051 Add the pin code resource type to DisplayResourceCreationMenu
-- PB-51052 Add PIN code in SelectResourceForm
-- PB-51053 Create the new pin code resource type form
-- PB-51054 Adapt OrchestrateResourceForm to handle the new AddResourcePinCode
-- PB-51055 Create the new DisplayResourceDetailsPinCode to display the pin code into detail
-- PB-51056 PINCODE - 3.5 Adapt resourcesKdbxExporter and to map pin code in case it exist to the correct resource types
-- PB-51073 PINCODE - 2.8 Add pin code into the grid
-- PB-51201 Fix notes-related issues
-- PB-51246 Add pin code to workspace create menu
-
-### Fixed
-- PB-49888 The contents of Resource Creation Progress Dialog always shows Creating Password
-- PB-50166 Fix break vs continue bug in MoveResourcesService batch permission calculation
-- PB-50535 DisplayuserbadgeMenu should display attention required on page served by API if MFA is required
-- PB-50617 Add PingOne redirect URL field
-- PB-50945 Fix expired session when port is disconnected
-- PB-51012 Hide 'set expired' option for already expired resources
-- PB-51018 Tighten fields selectors to avoid false positives
-- PB-51077 Fix typo "susccessfully" to "successfully"
-
-### Security
-- PB-50623 Fix GHSA-2328-f5f3-gj25 (HIGH)
-- PB-50877 Fix undici GHSA-f269-vfmq-vjvj - MEDIUM CVSS3.1
-- PB-50906 Fix svgo GHSA-xpqw-6gx7-v673 - HIGH CVSS3.1
-- PB-50907 Fix flatted GHSA-rf6f-7fwh-wjgh - HIGH CVSS4.0
-- PB-50908 Fix @xmldom/xmldom GHSA-wh4c-j3r5-mjhp - HIGH CVSS3.1
-- PB-50920 Upgrade webpack-cli
-- PB-50921 Upgrade web-ext
-- PB-51060 Fix protocol-buffers-schema GHSA-j452-xhg8-qg39 - MEDIUM CVSS3.1
-- PB-51151 Fix i18next-http-backend GHSA-r5fr-rjxr-66jc - MEDIUM CVSS3.1
-- PB-51152 Fix uuid GHSA-w5hq-g745-h8pq - MEDIUM CVSS3.1
-- PB-51170 Fix @xmldom/xmldom GHSA-2v35-w6hq-6mfw - HIGH CVSS4.0
-- PB-51179 Investigate and/or enforce package cool down mechanism with safe-chain or npm or both
-
-### Maintenance
-- PB-50224 Add devcontainer to bext
-- PB-50301 removed GitLab CI definition as it's been moved to the ci-definitions repo
-- PB-50340 Small upgrade for picomatch (Medium)
-- PB-51086 keep notify expired session tests skipping
+Fix various issues regarding pin code

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "passbolt-styleguide",
-  "version": "5.12.0",
+  "version": "5.12.1",
   "license": "AGPL-3.0",
   "copyright": "Copyright 2023 Passbolt SA",
   "description": "Passbolt styleguide contains common styling assets used by the different sites, plugin, etc.",

package/src/img/passbolt-default-resource-type-icons/pincode.svg

@@ -1,12 +1,12 @@
 <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M20 11.6807C20.4825 11.6807 20.8736 11.2896 20.8736 10.8072C20.8736 10.3247 20.4825 9.93359 20 9.93359C19.5175 9.93359 19.1264 10.3247 19.1264 10.8072C19.1264 11.2896 19.5175 11.6807 20 11.6807Z" fill="white" stroke="var(--icon-color)" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M26.115 11.6807C26.5974 11.6807 26.9885 11.2896 26.9885 10.8072C26.9885 10.3247 26.5974 9.93359 26.115 9.93359C25.6325 9.93359 25.2414 10.3247 25.2414 10.8072C25.2414 11.2896 25.6325 11.6807 26.115 11.6807Z" fill="white" stroke="var(--icon-color)" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M13.885 11.6807C14.3675 11.6807 14.7586 11.2896 14.7586 10.8072C14.7586 10.3247 14.3675 9.93359 13.885 9.93359C13.4026 9.93359 13.0115 10.3247 13.0115 10.8072C13.0115 11.2896 13.4026 11.6807 13.885 11.6807Z" fill="white" stroke="var(--icon-color)" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M20 17.795C20.4824 17.795 20.8736 17.4039 20.8736 16.9214C20.8736 16.439 20.4824 16.0479 20 16.0479C19.5175 16.0479 19.1264 16.439 19.1264 16.9214C19.1264 17.4039 19.5175 17.795 20 17.795Z" fill="white" stroke="var(--icon-color)" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M26.115 17.795C26.5974 17.795 26.9885 17.4039 26.9885 16.9214C26.9885 16.439 26.5974 16.0479 26.115 16.0479C25.6325 16.0479 25.2414 16.439 25.2414 16.9214C25.2414 17.4039 25.6325 17.795 26.115 17.795Z" fill="white" stroke="var(--icon-color)" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M13.885 17.795C14.3675 17.795 14.7586 17.4039 14.7586 16.9214C14.7586 16.439 14.3675 16.0479 13.885 16.0479C13.4026 16.0479 13.0115 16.439 13.0115 16.9214C13.0115 17.4039 13.4026 17.795 13.885 17.795Z" fill="white" stroke="var(--icon-color)" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M20 23.9112C20.4824 23.9112 20.8736 23.5201 20.8736 23.0376C20.8736 22.5552 20.4824 22.1641 20 22.1641C19.5175 22.1641 19.1264 22.5552 19.1264 23.0376C19.1264 23.5201 19.5175 23.9112 20 23.9112Z" fill="white" stroke="var(--icon-color)" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M26.115 23.9112C26.5974 23.9112 26.9885 23.5201 26.9885 23.0376C26.9885 22.5552 26.5974 22.1641 26.115 22.1641C25.6325 22.1641 25.2414 22.5552 25.2414 23.0376C25.2414 23.5201 25.6325 23.9112 26.115 23.9112Z" fill="white" stroke="var(--icon-color)" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M13.885 23.9112C14.3675 23.9112 14.7586 23.5201 14.7586 23.0376C14.7586 22.5552 14.3675 22.1641 13.885 22.1641C13.4026 22.1641 13.0115 22.5552 13.0115 23.0376C13.0115 23.5201 13.4026 23.9112 13.885 23.9112Z" fill="white" stroke="var(--icon-color)" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M20 30.0665C20.4825 30.0665 20.8736 29.6754 20.8736 29.1929C20.8736 28.7104 20.4825 28.3193 20 28.3193C19.5175 28.3193 19.1264 28.7104 19.1264 29.1929C19.1264 29.6754 19.5175 30.0665 20 30.0665Z" fill="white" stroke="var(--icon-color)" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20 11.6807C20.4825 11.6807 20.8736 11.2896 20.8736 10.8072C20.8736 10.3247 20.4825 9.93359 20 9.93359C19.5175 9.93359 19.1264 10.3247 19.1264 10.8072C19.1264 11.2896 19.5175 11.6807 20 11.6807Z" fill="var(--icon-color)" stroke="var(--icon-color)" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M26.115 11.6807C26.5974 11.6807 26.9885 11.2896 26.9885 10.8072C26.9885 10.3247 26.5974 9.93359 26.115 9.93359C25.6325 9.93359 25.2414 10.3247 25.2414 10.8072C25.2414 11.2896 25.6325 11.6807 26.115 11.6807Z" fill="var(--icon-color)" stroke="var(--icon-color)" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.885 11.6807C14.3675 11.6807 14.7586 11.2896 14.7586 10.8072C14.7586 10.3247 14.3675 9.93359 13.885 9.93359C13.4026 9.93359 13.0115 10.3247 13.0115 10.8072C13.0115 11.2896 13.4026 11.6807 13.885 11.6807Z" fill="var(--icon-color)" stroke="var(--icon-color)" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20 17.795C20.4824 17.795 20.8736 17.4039 20.8736 16.9214C20.8736 16.439 20.4824 16.0479 20 16.0479C19.5175 16.0479 19.1264 16.439 19.1264 16.9214C19.1264 17.4039 19.5175 17.795 20 17.795Z" fill="var(--icon-color)" stroke="var(--icon-color)" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M26.115 17.795C26.5974 17.795 26.9885 17.4039 26.9885 16.9214C26.9885 16.439 26.5974 16.0479 26.115 16.0479C25.6325 16.0479 25.2414 16.439 25.2414 16.9214C25.2414 17.4039 25.6325 17.795 26.115 17.795Z" fill="var(--icon-color)" stroke="var(--icon-color)" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.885 17.795C14.3675 17.795 14.7586 17.4039 14.7586 16.9214C14.7586 16.439 14.3675 16.0479 13.885 16.0479C13.4026 16.0479 13.0115 16.439 13.0115 16.9214C13.0115 17.4039 13.4026 17.795 13.885 17.795Z" fill="var(--icon-color)" stroke="var(--icon-color)" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20 23.9112C20.4824 23.9112 20.8736 23.5201 20.8736 23.0376C20.8736 22.5552 20.4824 22.1641 20 22.1641C19.5175 22.1641 19.1264 22.5552 19.1264 23.0376C19.1264 23.5201 19.5175 23.9112 20 23.9112Z" fill="var(--icon-color)" stroke="var(--icon-color)" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M26.115 23.9112C26.5974 23.9112 26.9885 23.5201 26.9885 23.0376C26.9885 22.5552 26.5974 22.1641 26.115 22.1641C25.6325 22.1641 25.2414 22.5552 25.2414 23.0376C25.2414 23.5201 25.6325 23.9112 26.115 23.9112Z" fill="var(--icon-color)" stroke="var(--icon-color)" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.885 23.9112C14.3675 23.9112 14.7586 23.5201 14.7586 23.0376C14.7586 22.5552 14.3675 22.1641 13.885 22.1641C13.4026 22.1641 13.0115 22.5552 13.0115 23.0376C13.0115 23.5201 13.4026 23.9112 13.885 23.9112Z" fill="var(--icon-color)" stroke="var(--icon-color)" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20 30.0665C20.4825 30.0665 20.8736 29.6754 20.8736 29.1929C20.8736 28.7104 20.4825 28.3193 20 28.3193C19.5175 28.3193 19.1264 28.7104 19.1264 29.1929C19.1264 29.6754 19.5175 30.0665 20 30.0665Z" fill="var(--icon-color)" stroke="var(--icon-color)" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/src/react-extension/components/Resource/ResourceForm/AddResourcePinCode.js

@@ -22,6 +22,7 @@ import { PinCodeGenerator, PIN_CODE_LENGTH_CONSTRAINTS } from "../../../../share
 import DiceSVG from "../../../../img/svg/dice.svg";
 import CaretDownSVG from "../../../../img/svg/caret_down.svg";
 import CaretRightSVG from "../../../../img/svg/caret_right.svg";
+import AttentionSVG from "../../../../img/svg/attention.svg";
 
 class AddResourcePinCode extends Component {
   constructor(props) {
@@ -158,12 +159,22 @@ class AddResourcePinCode extends Component {
   }
 
   /**
-   * Does the pin code length exceeds the max pin code length?
+   * Checks if the pin code length exceeds the max pin code length
    */
   isMaxLengthError() {
     return this.props.errors?.details?.secret?.hasError("pin_code", "maxLength");
   }
 
+  /**
+   * Checks if there is a max length warning for a specific property.
+   * @param {string} propName The name of the property to check.
+   * @param {string} association The association name.
+   * @returns {boolean}
+   */
+  isMaxLengthWarnings(propName, association) {
+    return !this.isMaxLengthError() && this.props.warnings?.hasError(`${association}.${propName}`, "maxLength");
+  }
+
   /**
    * Focus the first erroring field, if any.
    */
@@ -192,6 +203,7 @@ class AddResourcePinCode extends Component {
             >
               <label htmlFor="resource-pin-code">
                 <Trans>Code</Trans>
+                {this.isMaxLengthWarnings("pin_code", "secret") && <AttentionSVG className="attention-required" />}
               </label>
               <div className="password-button-inline">
                 <Password
@@ -200,6 +212,7 @@ class AddResourcePinCode extends Component {
                   autoComplete="off"
                   placeholder={this.translate("Pin code")}
                   preview={true}
+                  maxLength={PIN_CODE_LENGTH_CONSTRAINTS.MAX}
                   value={this.props.resource?.secret?.pin_code}
                   onChange={this.handlePinCodeInputChange}
                   inputRef={this.pinCodeInputRef}
@@ -215,6 +228,14 @@ class AddResourcePinCode extends Component {
                 </button>
               </div>
               {this.hasFieldPinCodeError() && <div className="pin-code error-message">{this.pinCodeErrorMessage}</div>}
+              {this.isMaxLengthWarnings("pin_code", "secret") && (
+                <div className="pin-code warning-message">
+                  <strong>
+                    <Trans>Warning:</Trans>
+                  </strong>{" "}
+                  <Trans>this is the maximum size for this field, make sure your data was not truncated.</Trans>
+                </div>
+              )}
             </div>
           </div>
           <div className="additional-information">

package/src/react-extension/components/Resource/ResourceForm/AddResourcePinCode.test.data.js

@@ -61,3 +61,14 @@ export function pinCodeErrors(rule) {
 
   return errors;
 }
+
+/**
+ * Build warnings prop with a single `secret.pin_code` rule violation.
+ * @param {string} rule e.g. "maxLength"
+ * @returns {EntityValidationError}
+ */
+export function pinCodeWarnings(rule) {
+  const warnings = new EntityValidationError();
+  warnings.addError("secret.pin_code", rule, `pin_code ${rule} warning`);
+  return warnings;
+}

package/src/react-extension/components/Resource/ResourceForm/AddResourcePinCode.test.js

@@ -13,7 +13,7 @@
  */
 
 import AddResourcePinCodePage from "./AddResourcePinCode.test.page";
-import { defaultProps, defaultPropsWithValue, pinCodeErrors } from "./AddResourcePinCode.test.data";
+import { defaultProps, defaultPropsWithValue, pinCodeErrors, pinCodeWarnings } from "./AddResourcePinCode.test.data";
 import { PinCodeGenerator } from "../../../../shared/lib/SecretGenerator/PinCodeGenerator";
 
 beforeEach(() => {
@@ -230,4 +230,36 @@ describe("AddResourcePinCode", () => {
       expect(page.pinCodeErrorMessage.textContent).toEqual("The PIN code is required.");
     });
   });
+
+  describe("Warnings", () => {
+    it("renders the maxLength warning message and the attention icon when warnings include secret.pin_code maxLength.", () => {
+      expect.assertions(2);
+
+      const props = defaultProps({
+        warnings: pinCodeWarnings("maxLength"),
+        resource: { secret: { pin_code: "123456789012" } },
+      });
+      const page = new AddResourcePinCodePage(props);
+
+      expect(page.pinCodeWarningMessage.textContent).toEqual(
+        "Warning: this is the maximum size for this field, make sure your data was not truncated.",
+      );
+      expect(page.attentionIcon).not.toBeNull();
+    });
+
+    it("suppresses the maxLength warning when a maxLength error is also present.", () => {
+      expect.assertions(3);
+
+      const props = defaultProps({
+        errors: pinCodeErrors("maxLength"),
+        warnings: pinCodeWarnings("maxLength"),
+        resource: { secret: { pin_code: "1234567890123" } },
+      });
+      const page = new AddResourcePinCodePage(props);
+
+      expect(page.pinCodeErrorMessage.textContent).toEqual("The PIN code cannot exceed 12 digits.");
+      expect(page.pinCodeWarningMessage).toBeNull();
+      expect(page.attentionIcon).toBeNull();
+    });
+  });
 });

package/src/react-quickaccess/components/FilterResourcesByFavoritePage/FilterResourcesByFavoritePage.js

@@ -113,6 +113,34 @@ class FilterResourcesByFavoritePage extends React.Component {
     return search ? filterResourcesBySearch(favoriteResources, search, BROWSED_RESOURCES_LIMIT) : favoriteResources;
   });
 
+  /**
+   * Is password resource
+   * @param {string} resourceTypeId
+   * @returns {boolean}
+   */
+  isPasswordResource(resourceTypeId) {
+    return this.props.resourceTypes?.getFirstById(resourceTypeId)?.hasPassword();
+  }
+
+  /**
+   * Is OTP resource
+   * @param {string} resourceTypeId
+   * @returns {boolean}
+   */
+  isOTPResource(resourceTypeId) {
+    return this.props.resourceTypes?.getFirstById(resourceTypeId)?.hasTotp();
+  }
+
+  /**
+   * Get resource filtered by resource type to have only resource with password and totp
+   * @return {Array}
+   */
+  get resourcesFilterByResourceTypePasswordAndTotp() {
+    const keepOnlyResourcesPasswordAndTotp = (resource) =>
+      this.isPasswordResource(resource.resource_type_id) || this.isOTPResource(resource.resource_type_id);
+    return this.props.resources.filter(keepOnlyResourcesPasswordAndTotp);
+  }
+
   /**
    * Has metadata types settings
    * @returns {boolean}
@@ -161,7 +189,10 @@ class FilterResourcesByFavoritePage extends React.Component {
     let browsedResources;
 
     if (isReady) {
-      browsedResources = this.filterSearchedResources(this.props.resources, this.props.context.search);
+      browsedResources = this.filterSearchedResources(
+        this.resourcesFilterByResourceTypePasswordAndTotp,
+        this.props.context.search,
+      );
     }
 
     /**

package/src/react-quickaccess/components/FilterResourcesByGroupPage/FilterResourcesByGroupPage.js

@@ -222,6 +222,34 @@ class FilterResourcesByGroupPage extends React.Component {
     search ? this.filterGroupsBySearch(groups, search, BROWSED_GROUPS_LIMIT) : groups.slice(0, BROWSED_GROUPS_LIMIT),
   );
 
+  /**
+   * Is password resource
+   * @param {string} resourceTypeId
+   * @returns {boolean}
+   */
+  isPasswordResource(resourceTypeId) {
+    return this.props.resourceTypes?.getFirstById(resourceTypeId)?.hasPassword();
+  }
+
+  /**
+   * Is OTP resource
+   * @param {string} resourceTypeId
+   * @returns {boolean}
+   */
+  isOTPResource(resourceTypeId) {
+    return this.props.resourceTypes?.getFirstById(resourceTypeId)?.hasTotp();
+  }
+
+  /**
+   * Get resource filtered by resource type to have only resource with password and totp
+   * @return {Array}
+   */
+  get resourcesFilterByResourceTypePasswordAndTotp() {
+    const keepOnlyResourcesPasswordAndTotp = (resource) =>
+      this.isPasswordResource(resource.resource_type_id) || this.isOTPResource(resource.resource_type_id);
+    return this.props.resources.filter(keepOnlyResourcesPasswordAndTotp);
+  }
+
   /**
    * Has metadata types settings
    * @returns {boolean}
@@ -278,7 +306,7 @@ class FilterResourcesByGroupPage extends React.Component {
       isReady = this.props.resources !== null && this.state.groupResourceIds !== null;
       if (isReady) {
         browsedResources = this.filterSearchedResources(
-          this.props.resources,
+          this.resourcesFilterByResourceTypePasswordAndTotp,
           this.state.groupResourceIds,
           this.props.context.search,
         );

package/src/react-quickaccess/components/FilterResourcesByItemsIOwnPage/FilterResourcesByItemsIOwnPage.js

@@ -121,6 +121,34 @@ class FilterResourcesByItemsIOwnPage extends React.Component {
     return search ? filterResourcesBySearch(ownedResources, search, BROWSED_RESOURCES_LIMIT) : ownedResources;
   });
 
+  /**
+   * Is password resource
+   * @param {string} resourceTypeId
+   * @returns {boolean}
+   */
+  isPasswordResource(resourceTypeId) {
+    return this.props.resourceTypes?.getFirstById(resourceTypeId)?.hasPassword();
+  }
+
+  /**
+   * Is OTP resource
+   * @param {string} resourceTypeId
+   * @returns {boolean}
+   */
+  isOTPResource(resourceTypeId) {
+    return this.props.resourceTypes?.getFirstById(resourceTypeId)?.hasTotp();
+  }
+
+  /**
+   * Get resource filtered by resource type to have only resource with password and totp
+   * @return {Array}
+   */
+  get resourcesFilterByResourceTypePasswordAndTotp() {
+    const keepOnlyResourcesPasswordAndTotp = (resource) =>
+      this.isPasswordResource(resource.resource_type_id) || this.isOTPResource(resource.resource_type_id);
+    return this.props.resources.filter(keepOnlyResourcesPasswordAndTotp);
+  }
+
   /**
    * Has metadata types settings
    * @returns {boolean}
@@ -173,7 +201,10 @@ class FilterResourcesByItemsIOwnPage extends React.Component {
     let browsedResources;
 
     if (isReady) {
-      browsedResources = this.filterSearchedResources(this.props.resources, this.props.context.search);
+      browsedResources = this.filterSearchedResources(
+        this.resourcesFilterByResourceTypePasswordAndTotp,
+        this.props.context.search,
+      );
     }
 
     return (

package/src/react-quickaccess/components/FilterResourcesByRecentlyModifiedPage/FilterResourcesByRecentlyModifiedPage.js

@@ -68,13 +68,32 @@ class FilterResourcesByRecentlyModifiedPage extends React.Component {
     this.props.history.push(`/webAccessibleResources/quickaccess/resources/view/${resourceId}`);
   }
 
-  async findAndLoadResources() {
-    const storageData = await this.props.context.storage.local.get(["resources"]);
-    if (storageData.resources) {
-      const resources = storageData.resources;
-      this.sortResourcesByModifiedDesc(resources);
-      this.setState({ resources });
-    }
+  /**
+   * Is password resource
+   * @param {string} resourceTypeId
+   * @returns {boolean}
+   */
+  isPasswordResource(resourceTypeId) {
+    return this.props.resourceTypes?.getFirstById(resourceTypeId)?.hasPassword();
+  }
+
+  /**
+   * Is OTP resource
+   * @param {string} resourceTypeId
+   * @returns {boolean}
+   */
+  isOTPResource(resourceTypeId) {
+    return this.props.resourceTypes?.getFirstById(resourceTypeId)?.hasTotp();
+  }
+
+  /**
+   * Get resource filtered by resource type to have only resource with password and totp
+   * @return {Array}
+   */
+  get resourcesFilterByResourceTypePasswordAndTotp() {
+    const keepOnlyResourcesPasswordAndTotp = (resource) =>
+      this.isPasswordResource(resource.resource_type_id) || this.isOTPResource(resource.resource_type_id);
+    return this.props.resources.filter(keepOnlyResourcesPasswordAndTotp);
   }
 
   /**
@@ -82,7 +101,7 @@ class FilterResourcesByRecentlyModifiedPage extends React.Component {
    * @returns {Array}
    */
   sortResourcesByModifiedDesc() {
-    return this.props.resources.sort(
+    return this.resourcesFilterByResourceTypePasswordAndTotp.sort(
       (resource1, resource2) => new Date(resource2.modified) - new Date(resource1.modified),
     );
   }

package/src/react-quickaccess/components/FilterResourcesBySharedWithMePage/FilterResourcesBySharedWithMePage.js

@@ -115,6 +115,34 @@ class FilterResourcesBySharedWithMePage extends React.Component {
       : resourcesSharedWithMe;
   });
 
+  /**
+   * Is password resource
+   * @param {string} resourceTypeId
+   * @returns {boolean}
+   */
+  isPasswordResource(resourceTypeId) {
+    return this.props.resourceTypes?.getFirstById(resourceTypeId)?.hasPassword();
+  }
+
+  /**
+   * Is OTP resource
+   * @param {string} resourceTypeId
+   * @returns {boolean}
+   */
+  isOTPResource(resourceTypeId) {
+    return this.props.resourceTypes?.getFirstById(resourceTypeId)?.hasTotp();
+  }
+
+  /**
+   * Get resource filtered by resource type to have only resource with password and totp
+   * @return {Array}
+   */
+  get resourcesFilterByResourceTypePasswordAndTotp() {
+    const keepOnlyResourcesPasswordAndTotp = (resource) =>
+      this.isPasswordResource(resource.resource_type_id) || this.isOTPResource(resource.resource_type_id);
+    return this.props.resources.filter(keepOnlyResourcesPasswordAndTotp);
+  }
+
   /**
    * Has metadata types settings
    * @returns {boolean}
@@ -167,7 +195,10 @@ class FilterResourcesBySharedWithMePage extends React.Component {
     let browsedResources;
 
     if (isReady) {
-      browsedResources = this.filterSearchedResources(this.props.resources, this.props.context.search);
+      browsedResources = this.filterSearchedResources(
+        this.resourcesFilterByResourceTypePasswordAndTotp,
+        this.props.context.search,
+      );
     }
 
     return (

package/src/react-quickaccess/components/FilterResourcesByTagPage/FilterResourcesByTagPage.js

@@ -165,6 +165,34 @@ class FilterResourcesByTagPage extends React.Component {
       : resourcesMatchingTag;
   });
 
+  /**
+   * Is password resource
+   * @param {string} resourceTypeId
+   * @returns {boolean}
+   */
+  isPasswordResource(resourceTypeId) {
+    return this.props.resourceTypes?.getFirstById(resourceTypeId)?.hasPassword();
+  }
+
+  /**
+   * Is OTP resource
+   * @param {string} resourceTypeId
+   * @returns {boolean}
+   */
+  isOTPResource(resourceTypeId) {
+    return this.props.resourceTypes?.getFirstById(resourceTypeId)?.hasTotp();
+  }
+
+  /**
+   * Get resource filtered by resource type to have only resource with password and totp
+   * @return {Array}
+   */
+  get resourcesFilterByResourceTypePasswordAndTotp() {
+    const keepOnlyResourcesPasswordAndTotp = (resource) =>
+      this.isPasswordResource(resource.resource_type_id) || this.isOTPResource(resource.resource_type_id);
+    return this.props.resources.filter(keepOnlyResourcesPasswordAndTotp);
+  }
+
   /**
    * Get the tags to display
    * @param {Array<Object>} tags the tag list to filter from
@@ -251,14 +279,11 @@ class FilterResourcesByTagPage extends React.Component {
     let browsedTags, browsedResources;
 
     if (isReady) {
+      const resources = this.resourcesFilterByResourceTypePasswordAndTotp;
       if (listTagsOnly) {
-        browsedTags = this.filterSearchedTags(this.props.resources, this.props.context.search);
+        browsedTags = this.filterSearchedTags(resources, this.props.context.search);
       } else {
-        browsedResources = this.filterSearchedResources(
-          this.props.resources,
-          this.props.context.search,
-          selectedTag?.id,
-        );
+        browsedResources = this.filterSearchedResources(resources, this.props.context.search, selectedTag?.id);
       }
     }
 

package/src/react-quickaccess/components/HomePage/HomePage.js

@@ -133,10 +133,7 @@ class HomePage extends React.Component {
 
     for (const i in resources) {
       const resource = resources[i];
-      if (
-        (this.isPasswordResource(resource.resource_type_id) || this.isOTPResource(resource.resource_type_id)) &&
-        CanSuggestService.canSuggestUris(activeTabUrl, resource.metadata.uris)
-      ) {
+      if (CanSuggestService.canSuggestUris(activeTabUrl, resource.metadata.uris)) {
         suggestedResources.push(resource);
         if (suggestedResources.length === SUGGESTED_RESOURCES_LIMIT) {
           break;
@@ -195,18 +192,30 @@ class HomePage extends React.Component {
 
   /**
    * Is password resource
+   * @param {string} resourceTypeId
    * @returns {boolean}
    */
-  isPasswordResource(resourceId) {
-    return this.props.resourceTypes?.getFirstById(resourceId)?.hasPassword();
+  isPasswordResource(resourceTypeId) {
+    return this.props.resourceTypes?.getFirstById(resourceTypeId)?.hasPassword();
   }
 
   /**
    * Is OTP resource
+   * @param {string} resourceTypeId
    * @returns {boolean}
    */
-  isOTPResource(resourceId) {
-    return this.props.resourceTypes?.getFirstById(resourceId)?.hasTotp();
+  isOTPResource(resourceTypeId) {
+    return this.props.resourceTypes?.getFirstById(resourceTypeId)?.hasTotp();
+  }
+
+  /**
+   * Get resource filtered by resource type to have only resource with password and totp
+   * @return {Array}
+   */
+  get resourcesFilterByResourceTypePasswordAndTotp() {
+    const keepOnlyResourcesPasswordAndTotp = (resource) =>
+      this.isPasswordResource(resource.resource_type_id) || this.isOTPResource(resource.resource_type_id);
+    return this.props.resources.filter(keepOnlyResourcesPasswordAndTotp);
   }
 
   /**
@@ -266,8 +275,9 @@ class HomePage extends React.Component {
     let browsedResources, suggestedResources;
 
     if (isReady) {
-      browsedResources = this.filterSearchedResources(this.props.resources, this.props.context.search);
-      suggestedResources = this.filterSuggestedResources(this.props.resources, this.state.activeTabUrl);
+      const resources = this.resourcesFilterByResourceTypePasswordAndTotp;
+      browsedResources = this.filterSearchedResources(resources, this.props.context.search);
+      suggestedResources = this.filterSuggestedResources(resources, this.state.activeTabUrl);
     }
 
     return (

package/src/shared/components/Password/Password.js

@@ -184,7 +184,7 @@ class Password extends Component {
         <input
           id={this.props.id}
           name={this.props.name}
-          maxLength="4096"
+          maxLength={this.props.maxLength}
           placeholder={this.props.placeholder}
           type={this.state.viewPassword && !this.props.disabled ? "text" : "password"}
           onKeyUp={this.props.onKeyUp}
@@ -232,6 +232,7 @@ Password.defaultProps = {
   id: "",
   name: "",
   autoComplete: "off",
+  maxLength: 4096,
 };
 
 Password.propTypes = {
@@ -252,6 +253,7 @@ Password.propTypes = {
     backgroundColor: PropTypes.string,
     textColor: PropTypes.string,
   }), // The securityTokenDto
+  maxLength: PropTypes.number, // The max length of the input
 };
 
 export default withTranslation("common")(Password);

package/src/shared/components/Password/Password.test.js

@@ -102,4 +102,30 @@ describe("As LU I should see the user confirm passphrase page", () => {
       expect(page.isObfuscated).toBeTruthy();
     });
   });
+
+  describe("As LU I cannot exceed the password max length", () => {
+    it("maxLength is 4096 when no maxLength prop is provided", () => {
+      expect.assertions(1);
+      const props = defaultProps();
+      const page = new PasswordPage(props);
+      expect(page.passwordInput.maxLength).toBe(4096);
+    });
+
+    it("forwards a custom maxLength prop to the input element", () => {
+      expect.assertions(1);
+      const props = defaultProps({ maxLength: 12 });
+      const page = new PasswordPage(props);
+      expect(page.passwordInput.maxLength).toBe(12);
+    });
+
+    it("reflects an updated maxLength when the prop changes", () => {
+      expect.assertions(2);
+      const props = defaultProps({ maxLength: 8 });
+      const page = new PasswordPage(props);
+      expect(page.passwordInput.maxLength).toBe(8);
+
+      page.rerender(defaultProps({ maxLength: 16 }));
+      expect(page.passwordInput.maxLength).toBe(16);
+    });
+  });
 });