Merge branch 'release' into 'master'

Merge on master before tagging

See merge request passbolt/passbolt-styleguide!1292

package.json

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

src/less/components/announcement.less

@@ -21,6 +21,7 @@
     padding-bottom: 0;
     line-height: 1.6rem;
     margin-left: .8rem;
+    color: @announcement-text-color;
 
     &:hover {
       text-decoration: none;

src/react-extension/components/Administration/DisplayAdministrationWorkspaceActions/DisplayAdministrationPasswordPoliciesActions/DisplayAdministrationPasswordPoliciesActions.js

@@ -92,14 +92,14 @@ class DisplayAdministrationPasswordPoliciesActions extends React.Component {
     return (
       <div className="col2_3 actions-wrapper">
         <div className="actions">
-          <div>
+          <ul>
             <li>
               <button type="button" disabled={isDisabled} id="save-settings" onClick={this.handleSave}>
                 <Icon name="save"/>
                 <span><Trans>Save settings</Trans></span>
               </button>
             </li>
-          </div>
+          </ul>
         </div>
       </div>
     );

src/react-extension/components/Administration/DisplayPasswordPoliciesAdministration/DisplayPasswordPoliciesAdministration.js

@@ -64,6 +64,7 @@ class DisplayPasswordPoliciesAdministration extends React.Component {
     this.handlePassphraseSectionToggle = this.handlePassphraseSectionToggle.bind(this);
     this.handleInputChange = this.handleInputChange.bind(this);
     this.handleSliderInputChange = this.handleSliderInputChange.bind(this);
+    this.handleLengthChange = this.handleLengthChange.bind(this);
   }
 
   /**
@@ -135,6 +136,17 @@ class DisplayPasswordPoliciesAdministration extends React.Component {
     this.props.adminPasswordPoliciesContext.setSettings(name, value);
   }
 
+  /**
+   * Handle change of generic form input.
+   * @param {object} event
+   */
+  handleLengthChange(event) {
+    const target = event.target;
+    const value = parseInt(target.value, 10);
+    const name = target.name;
+    this.props.adminPasswordPoliciesContext.setSettings(name, value);
+  }
+
   /**
    * Handle toggle of a password mask.
    * @param {string} name name of the mask
@@ -246,7 +258,7 @@ class DisplayPasswordPoliciesAdministration extends React.Component {
                   min="8"
                   max="128"
                   value={settings.passwordLength}
-                  onChange={this.handleInputChange}
+                  onChange={this.handleLengthChange}
                   disabled={this.hasAllInputDisabled()}/>
               </div>
               {errors.passwordLength &&
@@ -321,7 +333,7 @@ class DisplayPasswordPoliciesAdministration extends React.Component {
                   min="4"
                   max="40"
                   value={settings.wordsCount}
-                  onChange={this.handleInputChange}
+                  onChange={this.handleLengthChange}
                   disabled={this.hasAllInputDisabled()}/>
               </div>
               {errors.wordsCount &&

src/react-extension/components/Authentication/CreateGpgKey/CreateGpgKey.js

@@ -319,20 +319,18 @@ class CreateGpgKey extends Component {
               <li id="specialCharactersyHint" className={this.state.hintClassNames.specialCharacters}>
                 <Trans>It contains special characters (like / or * or %)</Trans>
               </li>
-              {this.pownedService &&
-                <li id="notInDictionaryHint" className={this.state.hintClassNames.notInDictionary}>
-                  {this.state.isPwnedServiceAvailable  &&
+              <li id="notInDictionaryHint" className={this.state.hintClassNames.notInDictionary}>
+                {this.state.isPwnedServiceAvailable  &&
+                  <Trans>It is not part of an exposed data breach</Trans>
+                }
+                {!this.state.isPwnedServiceAvailable &&
+                  <Tooltip
+                    message={<Trans>The pwnedpasswords service is unavailable, your passphrase might be part of an exposed data breach</Trans>}
+                    direction="bottom">
                     <Trans>It is not part of an exposed data breach</Trans>
-                  }
-                  {!this.state.isPwnedServiceAvailable &&
-                    <Tooltip
-                      message={<Trans>The pwnedpasswords service is unavailable, your passphrase might be part of an exposed data breach</Trans>}
-                      direction="bottom">
-                      <Trans>It is not part of an exposed data breach</Trans>
-                    </Tooltip>
-                  }
-                </li>
-              }
+                  </Tooltip>
+                }
+              </li>
             </ul>
           </div>
 

src/react-extension/components/Resource/DisplayResourcesList/DisplayResourcesList.js

@@ -115,8 +115,8 @@ class DisplayResourcesList extends React.Component {
     }, {});
     // Merge the column values
     this.columns.forEach(column => Object.assign(column, columnsResources[column.id]));
-    // Sort the position of the column
-    this.columns.sort((columnA, columnB) => columnA.position < columnB.position ? -1 : 1);
+    // Sort the position of the column, the column with no position will be at the beginning
+    this.columns.sort((columnA, columnB) => (columnA.position || 0) < (columnB.position || 0) ? -1 : 1);
   }
 
   /**