passbolt-styleguide 3.3.3 → 3.4.0-alpha2

package/src/shared/components/Internationalisation/TranslationProvider.js

@@ -0,0 +1,145 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2021 Passbolt SA (https://www.passbolt.com)
+ *
+ * Licensed under GNU Affero General Public License version 3 of the or any later version.
+ * For full copyright and license information, please see the LICENSE.txt
+ * Redistributions of files must retain the above copyright notice.
+ *
+ * @copyright     Copyright (c) 2021 Passbolt SA (https://www.passbolt.com)
+ * @license       https://opensource.org/licenses/AGPL-3.0 AGPL License
+ * @link          https://www.passbolt.com Passbolt(tm)
+ * @since        3.2.0
+ */
+import i18n from 'i18next';
+import {I18nextProvider} from 'react-i18next';
+import HttpApi from 'i18next-http-backend';
+import React, {Component} from "react";
+import PropTypes from "prop-types";
+
+/**
+ * The locales default url.
+ * @type {string}
+ */
+const DEFAULT_LOCALE_URL = '/locales/{{lng}}/{{ns}}.json';
+
+/**
+ * This component set up the translation process
+ */
+class TranslationProvider extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = this.defaultState;
+  }
+
+  /**
+   * Returns the default component state
+   */
+  get defaultState() {
+    return {
+      i18next: null // The i18next instance
+    };
+  }
+
+  /**
+   * ComponentDidMount
+   * Invoked immediately after component is inserted into the tree
+   * @return {void}
+   */
+  componentDidMount() {
+    if (this.props.locale) {
+      this.initI18next();
+    }
+  }
+
+  /**
+   * Whenever the component has updated in terms of props
+   */
+  async componentDidUpdate(prevProps) {
+    await this.handleLocaleChange(prevProps);
+  }
+
+  /**
+   * Check if the locale has changed and update
+   */
+  async handleLocaleChange(prevProps) {
+    if (this.props.locale !== prevProps?.locale) {
+      this.initI18next();
+    }
+  }
+
+  /**
+   * Initialize i18next.
+   * @returns {Promise<void>}
+   */
+  async initI18next() {
+    const i18next = i18n.createInstance();
+    await i18next
+      // I18next plugin used to load the translations json over http.
+      .use(HttpApi)
+      // init i18next, once done store the i18next instance in the state.
+      .init(this.i18nextOptions, () => this.setState({i18next, locale:this.props.locale}));
+  }
+
+  /**
+   * Get the i18next options.
+   * For more information, checkout: https://www.i18next.com/overview/configuration-options
+   * @returns {Object}
+   */
+  get i18nextOptions() {
+    return {
+      lng: this.props.locale,
+      load: "currentOnly",
+      react: {
+        useSuspense: false,
+      },
+      backend: {
+        loadPath: this.props.loadingPath
+      },
+      supportedLngs: [this.props.locale],
+      fallbackLng: false,
+      ns: ["common"],
+      defaultNS: "common",
+      keySeparator: false, // don't use the dot for separator of nested json object
+      nsSeparator: false, // allowed ':' in key to avoid namespace separator
+      debug: false,
+    };
+  }
+
+  /**
+   * Returns true when the component can be rendered
+   */
+  get isReady() {
+    return this.state.i18next !== null;
+  }
+
+  /**
+   * Render the component.
+   * @returns {JSX}
+   */
+  render() {
+    return (
+      <>
+        {// Waiting for the i18n initialization to be completed
+          this.isReady &&
+          <I18nextProvider i18n={this.state.i18next}>
+            {this.props.children}
+          </I18nextProvider>
+        }
+      </>
+    );
+  }
+}
+
+TranslationProvider.propTypes = {
+  loadingPath: PropTypes.any, // The way to load translations files
+  children: PropTypes.any, // The children components
+  locale: PropTypes.string // The locale to use. i.e. en-UK
+};
+
+TranslationProvider.defaultProps = {
+  loadingPath: DEFAULT_LOCALE_URL
+};
+
+export default TranslationProvider;

package/src/shared/lib/Browser/detectBrowserName.js

@@ -44,9 +44,10 @@ export function detectBrowserName() {
   } else if (userAgent.indexOf("trident") > -1) {
     browserName = BROWSER_NAMES.INTERNET_EXPLORER;
     // "Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; Zoom 3.6.0; wbx 1.0.0; rv:11.0) like Gecko"
-  } else if (userAgent.indexOf("edge") > -1) {
+  } else if (userAgent.indexOf("edg") > -1) {
     browserName = BROWSER_NAMES.EDGE;
     // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299"
+    // 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.55 Safari/537.36 Edg/96.0.1054.34'
   } else if (userAgent.indexOf("chrome") > -1) {
     browserName = BROWSER_NAMES.CHROME;
     // "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/66.0.3359.181 Chrome/66.0.3359.181 Safari/537.36"

package/src/shared/lib/Secret/SecretComplexity.js

@@ -92,7 +92,7 @@ export default class SecretComplexity {
    * @return {int}
    */
   static calculEntropy(length, maskSize) {
-    return length * (Math.log(maskSize) / Math.log(2));
+    return (length && maskSize) ? length * (Math.log(maskSize) / Math.log(2)) : 0;
   }
 
   /**
@@ -100,7 +100,7 @@ export default class SecretComplexity {
    * @param pwd {srtring} The password to test the entropy
    * @return {int}
    */
-  static entropy(pwd) {
+  static entropy(pwd= '') {
     let maskSize = 0;
 
     for (const i in MASKS) {

package/src/shared/lib/SecretGenerator/PassphraseGenerator.js

@@ -0,0 +1,112 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) Passbolt SA (https://www.passbolt.com)
+ *
+ * Licensed under GNU Affero General Public License version 3 of the or any later version.
+ * For full copyright and license information, please see the LICENSE.txt
+ * Redistributions of files must retain the above copyright notice.
+ *
+ * @copyright     Copyright (c) Passbolt SA (https://www.passbolt.com)
+ * @license       https://opensource.org/licenses/AGPL-3.0 AGPL License
+ * @link          https://www.passbolt.com Passbolt(tm)
+ * @since         3.3.0
+ */
+import { default as PassphraseGeneratorWords } from "./PassphraseGeneratorWords";
+
+/**
+ * Returns a number between the given min and max
+ * @param min The minimum number
+ * @param max The maximum number
+ */
+function randomNumberRange(min, max) {
+  const arr = new Uint32Array(1);
+  window.crypto.getRandomValues(arr);
+  const random = arr[0] / (0xffffffff + 1);
+  return Math.floor(random * (max - min + 1)) + min;
+}
+
+/**
+ * Returns randomly a word from a given list of word and apply the given word case
+ * @param words A list of words
+ * @param wordCase A case strategy to apply to the word
+ */
+function extractWordWithCase(words, wordCase) {
+  const extractWord = () => words[randomNumberRange(0, words.length-1)];
+  const toCamelCase = word => word.charAt(0).toUpperCase() + word.slice(1);
+  switch (wordCase) {
+    case "lowercase": return  extractWord().toLowerCase(); break;
+    case "uppercase": return  extractWord().toUpperCase(); break;
+    case "camelcase": return  toCamelCase(extractWord()); break;
+    default: return extractWord();
+  }
+}
+
+/**
+ * Detects if the given secret is a Passbolt passphrase.
+ * If yes, it returns the number of words, the separator and the flag to tell it's a passphrase
+ * @param secret
+ */
+function detectPassphrase(secret) {
+  if (!secret) {
+    return {
+      isPassphrase: false
+    };
+  }
+
+  // Remove all the words from the dictionary present in the secret and keep the count.
+  const separatorsSecret = PassphraseGeneratorWords['en-UK'].reduce((result, word) => {
+    const remainingSecret = result.remainingSecret.replace(new RegExp(word, 'g'), '');
+    const newNumberReplacement = (result.remainingSecret.length - remainingSecret.length) / word.length;
+    return {
+      numberReplacement: result.numberReplacement + newNumberReplacement,
+      remainingSecret: remainingSecret
+    };
+  }, {numberReplacement: 0, remainingSecret: secret.toLowerCase()});
+
+  // From the remaining, check if a separator can be identified.
+  const numberSeparators = separatorsSecret.numberReplacement - 1;
+  const lengthSeparators = separatorsSecret.remainingSecret.length / numberSeparators;
+  const cannotBeSplitSeparatorsWithSameLength = separatorsSecret.remainingSecret.length % numberSeparators !== 0;
+  const hasEmptySeparator = separatorsSecret.remainingSecret.length == 0;
+  if (cannotBeSplitSeparatorsWithSameLength) {
+    return {
+      isPassphrase: false
+    };
+  }
+  if (hasEmptySeparator) {
+    return {
+      numberWords: separatorsSecret.numberReplacement,
+      separator: '',
+      isPassphrase: true
+    };
+  }
+
+  const firstSeparator = separatorsSecret.remainingSecret.substring(0, lengthSeparators);
+  const firstSeparatorRegexEscaped = String(firstSeparator).replace(/([-()\[\]{}+?*.$\^|,:#<!\\])/g, '\\$1');
+  const isPassphrase = separatorsSecret.remainingSecret.replace(new RegExp(firstSeparatorRegexEscaped, 'g'), '').length === 0;
+  return {
+    numberWords: separatorsSecret.numberReplacement,
+    separator: firstSeparator,
+    isPassphrase: isPassphrase && !secret.startsWith(firstSeparator) && !secret.endsWith(firstSeparator)
+  };
+}
+
+/**
+ * Passphrase generator using diceware method from a file containing words
+ */
+export const PassphraseGenerator = {
+  generate: configuration => {
+    const wordCount = configuration.default_options.word_count;
+    const canGenerate = wordCount >=  configuration.default_options.min_word && wordCount <=  configuration.default_options.max_word;
+    if (canGenerate) {
+      const wordCase = configuration.default_options.word_case;
+      const words = PassphraseGeneratorWords['en-UK'];
+      const extractWordMapper = () => extractWordWithCase(words, wordCase);
+      const wordsGenerated = Array.from({length:wordCount}, extractWordMapper);
+      const secret = wordsGenerated.join(configuration.default_options.separator)
+      return secret;
+    }
+    return '';
+  },
+  detectPassphrase
+};

package/src/shared/lib/SecretGenerator/PassphraseGenerator.test.js

@@ -0,0 +1,48 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2021 Passbolt SA (https://www.passbolt.com)
+ *
+ * Licensed under GNU Affero General Public License version 3 of the or any later version.
+ * For full copyright and license information, please see the LICENSE.txt
+ * Redistributions of files must retain the above copyright notice.
+ *
+ * @copyright     Copyright (c) 2021 Passbolt SA (https://www.passbolt.com)
+ * @license       https://opensource.org/licenses/AGPL-3.0 AGPL License
+ * @link          https://www.passbolt.com Passbolt(tm)
+ * @since         3.3.0
+ */
+import {PassphraseGenerator} from "./PassphraseGenerator";
+
+describe("PassphraseGenerator", () => {
+  describe("detectPassphrase", () => {
+    it("detectPassphrase if a secret is a passphrase", () => {
+      const secret = "answering chirping luckiness android patriarch skinhead cacti ethics";
+      const result = PassphraseGenerator.detectPassphrase(secret);
+      expect(result).toEqual({"isPassphrase": true, "numberWords": 8, "separator": " "});
+    });
+
+    it("detectPassphrase if a secret in uppercase is a passphrase", () => {
+      const secret = "ANSWERING CHIRPING LUCKINESS ANDROID PATRIARCH SKINHEAD CACTI ETHICS";
+      const result = PassphraseGenerator.detectPassphrase(secret);
+      expect(result).toEqual({"isPassphrase": true, "numberWords": 8, "separator": " "});
+    });
+
+    it("detectPassphrase if a secret is a passphrase without separator", () => {
+      const secret = "answeringchirpingluckinessandroidpatriarchskinheadcactiethics";
+      const result = PassphraseGenerator.detectPassphrase(secret);
+      expect(result).toEqual({"isPassphrase": true, "numberWords": 8, "separator": ""});
+    });
+
+    it("detectPassphrase if a secret is a passphrase with separator containing special characters", () => {
+      const secret = "answering/=\\%[]-chirping/=\\%[]-luckiness/=\\%[]-android/=\\%[]-patriarch/=\\%[]-skinhead/=\\%[]-cacti/=\\%[]-ethics";
+      const result = PassphraseGenerator.detectPassphrase(secret);
+      expect(result).toEqual({"isPassphrase": true, "numberWords": 8, "separator": "/=\\%[]-"});
+    });
+
+    it("detectPassphrase if a secret is not a passphrase", () => {
+      const secret = "not-a-passhrase-123";
+      const result = PassphraseGenerator.detectPassphrase(secret);
+      expect(result).toEqual({"isPassphrase": false, "numberWords": 0, "separator": ""});
+    });
+  });
+});